/* /Auth/Components/AuthCard.razor.rz.scp.css */
.auth-card[b-dmfz9yjzqs] {
    width: 100%;
}

.auth-card-title[b-dmfz9yjzqs] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.auth-card[b-dmfz9yjzqs]  .auth-card-content {
    padding-bottom: 1.5rem;
}

.auth-card[b-dmfz9yjzqs]  .auth-card-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.auth-card[b-dmfz9yjzqs]  .auth-card-text {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.auth-card[b-dmfz9yjzqs]  .auth-card-notice,
.auth-card[b-dmfz9yjzqs]  .auth-card-error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.auth-card[b-dmfz9yjzqs]  .auth-card-notice {
    border: 1px solid var(--border-colour);
    background-color: var(--accent);
    color: var(--primary);
}

.auth-card[b-dmfz9yjzqs]  .auth-card-error {
    border: 1px solid color-mix(in srgb, var(--destructive) 30%, transparent);
    background-color: var(--destructive-foreground);
    color: var(--destructive);
}

.auth-card[b-dmfz9yjzqs]  .auth-card-notice > svg,
.auth-card[b-dmfz9yjzqs]  .auth-card-error > svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.auth-card[b-dmfz9yjzqs]  .auth-card-wide {
    width: 100%;
}

.auth-card[b-dmfz9yjzqs]  .auth-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.auth-card[b-dmfz9yjzqs]  .auth-card-footer {
    margin: 0.25rem 0 0;
    text-align: center;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.auth-card[b-dmfz9yjzqs]  .auth-card-link {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (hover: hover) {
    .auth-card[b-dmfz9yjzqs]  .auth-card-link:hover {
        color: var(--primary);
    }
}

.auth-card[b-dmfz9yjzqs]  .auth-card-password-rules {
    list-style: none;
    margin: -0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

.auth-card[b-dmfz9yjzqs]  .auth-card-password-rules li {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.auth-card[b-dmfz9yjzqs]  .auth-card-rule-met {
    color: var(--success);
}
/* /Auth/Components/AuthHeroPanel.razor.rz.scp.css */
.auth-hero[b-a2ghkpfvfd] {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: var(--card-radius);
    background-color: var(--primary-lighter);
    color: var(--primary-foreground);
    display: flex;
    align-items: flex-end;
}

.auth-hero-image[b-a2ghkpfvfd] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.auth-hero-overlay[b-a2ghkpfvfd] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        color-mix(in srgb, var(--primary) 88%, transparent) 0%,
        color-mix(in srgb, var(--primary) 60%, transparent) 45%,
        color-mix(in srgb, var(--primary) 5%, transparent) 100%);
}

.auth-hero-content[b-a2ghkpfvfd] {
    position: relative;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 34rem;
}

.auth-hero-eyebrow[b-a2ghkpfvfd] {
    margin: 0;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

.auth-hero-title[b-a2ghkpfvfd] {
    margin: 0;
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.auth-hero-lead[b-a2ghkpfvfd] {
    margin: 0;
    opacity: 0.85;
}

.auth-hero-points[b-a2ghkpfvfd] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.875rem;
}

.auth-hero-points li[b-a2ghkpfvfd] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.auth-hero-points li > div[b-a2ghkpfvfd] {
    display: flex;
    flex-direction: column;
}

.auth-hero-points strong[b-a2ghkpfvfd] {
    font-size: var(--text-sm);
    font-weight: 600;
}

.auth-hero-points span[b-a2ghkpfvfd] {
    font-size: var(--text-sm);
    opacity: 0.75;
}

/* The icon is rendered by a child component, so ::deep anchors on the raw li. */
.auth-hero-points li[b-a2ghkpfvfd]  svg {
    flex-shrink: 0;
    margin-top: 1px;
}
/* /Auth/Components/BotCheck.razor.rz.scp.css */
.bot-check[b-scwf8ly0tx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

/* Turnstile sizes its own iframe; the container only gives it the form's width. */
.bot-check-widget[b-scwf8ly0tx] {
    width: 100%;
    min-width: 0;
}

.bot-check-hidden[b-scwf8ly0tx] {
    display: none;
}

.bot-check-failed[b-scwf8ly0tx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--destructive) 30%, transparent);
    border-radius: var(--radius);
    background-color: var(--destructive-foreground);
    color: var(--destructive);
    font-size: var(--text-sm);
}

.bot-check-failed-text[b-scwf8ly0tx] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    overflow-wrap: anywhere;
}

.bot-check-failed-text > svg[b-scwf8ly0tx] {
    flex-shrink: 0;
    margin-top: 0.125rem;
}
/* /Auth/Components/EmailVerificationActions.razor.rz.scp.css */
.email-verification-actions[b-0fdca0autn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.email-verification-actions-prominent[b-0fdca0autn] {
    flex-direction: column;
}

.email-verification-actions-prominent[b-0fdca0autn]  .btn {
    width: 100%;
}
/* /Auth/Components/EmailVerificationBanner.razor.rz.scp.css */
/* Text and icon on the left, the buttons to the right; on narrow screens the buttons go below. */
.email-verification-banner[b-8ga195kbvc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
    border-radius: var(--radius);
    background-color: var(--info-foreground);
    color: var(--info);
    font-size: var(--text-sm);
    line-height: 1.25rem;
}

.email-verification-banner-warning[b-8ga195kbvc] {
    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
    background-color: var(--warning-foreground);
    color: var(--warning);
}

.email-verification-banner-message[b-8ga195kbvc] {
    display: flex;
    flex: 1 1 18rem;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
}

.email-verification-banner-icon[b-8ga195kbvc] {
    display: inline-flex;
    flex-shrink: 0;
    padding-top: 0.125rem;
}

.email-verification-banner-text[b-8ga195kbvc] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.email-verification-banner-title[b-8ga195kbvc] {
    margin: 0;
    font-weight: 600;
}

.email-verification-banner-description[b-8ga195kbvc] {
    margin: 0;
    overflow-wrap: anywhere;
}
/* /Auth/Components/EmailVerificationGate.razor.rz.scp.css */
/* Shown by MainLayout instead of the whole app once the grace period is over: the authentication layout's look. */
.email-verification-gate[b-0gloeylkdf] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--off-white);
    padding: 2rem 1rem;
}

.email-verification-gate-shell[b-0gloeylkdf] {
    margin: auto;
    width: 100%;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.email-verification-gate-brand[b-0gloeylkdf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.25rem;
}

.email-verification-gate-footer[b-0gloeylkdf] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    text-align: center;
}
/* /Auth/Components/WaitlistForm.razor.rz.scp.css */
.waitlist[b-pt47zfercq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--page-background);
}

.waitlist-heading[b-pt47zfercq] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.waitlist-title[b-pt47zfercq] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.waitlist-description[b-pt47zfercq] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.waitlist-form[b-pt47zfercq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.waitlist-done[b-pt47zfercq],
.waitlist-error[b-pt47zfercq] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.waitlist-done[b-pt47zfercq] {
    border: 1px solid var(--border-colour);
    background-color: var(--accent);
    color: var(--primary);
}

.waitlist-error[b-pt47zfercq] {
    border: 1px solid color-mix(in srgb, var(--destructive) 30%, transparent);
    background-color: var(--destructive-foreground);
    color: var(--destructive);
}

.waitlist-done > svg[b-pt47zfercq],
.waitlist-error > svg[b-pt47zfercq] {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.waitlist-note[b-pt47zfercq] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    text-align: center;
}

.waitlist-back[b-pt47zfercq] {
    align-self: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--muted-foreground);
    font: inherit;
    font-size: var(--text-sm);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

@media (hover: hover) {
    .waitlist-back:hover[b-pt47zfercq] {
        color: var(--primary);
    }
}

.waitlist[b-pt47zfercq]  .waitlist-wide {
    width: 100%;
}
/* /Auth/ConfirmEmailChange.razor.rz.scp.css */
.confirm-email-change-loading[b-5gjw16yeu4] {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}
/* /Auth/JoinShop.razor.rz.scp.css */
.join-shop-loading[b-h1ql3qnr53] {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.join-shop-row[b-h1ql3qnr53] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.join-shop-field[b-h1ql3qnr53] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* The button names the shop ("Sumarme a Taller Mecánico Integral…"), so a long name wraps it to more lines instead of
   spilling out of both sides. */
.auth-card-stack[b-h1ql3qnr53]  .join-shop-submit {
    height: auto;
    min-height: 2.25rem;
    padding-block: 0.5rem;
    white-space: normal;
    text-align: center;
}

.join-shop-hint[b-h1ql3qnr53] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

@media (width <= 420px) {
    .join-shop-row[b-h1ql3qnr53] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Auth/Login.razor.rz.scp.css */
.login[b-hr7dwp2x7q] {
    width: 100%;
}

.login-title[b-hr7dwp2x7q] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.login-form[b-hr7dwp2x7q] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.login-field[b-hr7dwp2x7q] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.login-label[b-hr7dwp2x7q] {
    font-size: var(--text-sm);
    font-weight: 500;
}

.login-label-row[b-hr7dwp2x7q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.login-link[b-hr7dwp2x7q] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (hover: hover) {
    .login-link:hover[b-hr7dwp2x7q] {
        color: var(--primary);
    }
}

.login-link-strong[b-hr7dwp2x7q] {
    color: var(--primary);
    font-weight: 500;
}

.login-error[b-hr7dwp2x7q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--destructive) 30%, transparent);
    border-radius: var(--radius);
    background-color: var(--destructive-foreground);
    color: var(--destructive);
    font-size: var(--text-sm);
}

.login-hint[b-hr7dwp2x7q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.login-notice[b-hr7dwp2x7q] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--accent);
    color: var(--primary);
    font-size: var(--text-sm);
}

.login-notice[b-hr7dwp2x7q]  svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.login-footer[b-hr7dwp2x7q] {
    margin: 0.25rem 0 0;
    text-align: center;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.login[b-hr7dwp2x7q]  .login-content {
    padding-bottom: 1.5rem;
}

.login[b-hr7dwp2x7q]  .login-submit {
    width: 100%;
}

.login[b-hr7dwp2x7q]  .input:-webkit-autofill {
    -webkit-text-fill-color: var(--primary);
    box-shadow: inset 0 0 0 1000px var(--primary-foreground);
}

.login[b-hr7dwp2x7q]  .input:-webkit-autofill:focus-visible {
    box-shadow: inset 0 0 0 1000px var(--primary-foreground),
                var(--field-focus-ring);
}
/* /Auth/Modals/ChangeEmailModal.razor.rz.scp.css */
.change-email-modal-text[b-dzlw09nmu5] {
    margin: 0;
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
}
/* /Auth/Register.razor.rz.scp.css */
.register[b-pugj4s3q1u] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.register-heading[b-pugj4s3q1u] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    scroll-margin-top: 1rem;
}

.register-title[b-pugj4s3q1u] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.register-description[b-pugj4s3q1u] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.register-form[b-pugj4s3q1u] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.register-field[b-pugj4s3q1u] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.register-group-label[b-pugj4s3q1u] {
    font-size: var(--text-sm);
    font-weight: 500;
}

.register-hint-tight[b-pugj4s3q1u] {
    margin-top: -0.375rem;
}

/* Two columns even at 360px: each is about 150px, enough for names and State/Postal code. */
.register-row[b-pugj4s3q1u] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}

/* A select's label doesn't truncate ("Español (Argentina)", "ARS — Peso argentino" wrap out of a half-width field),
   so on a phone the language and currency take a row each. */
@media (width <= 480px) {
    .register-row-selects[b-pugj4s3q1u] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.register-actions[b-pugj4s3q1u] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.register-link[b-pugj4s3q1u] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (hover: hover) {
    .register-link:hover[b-pugj4s3q1u] {
        color: var(--primary);
    }
}

.register-link-strong[b-pugj4s3q1u] {
    color: var(--primary);
    font-weight: 500;
}

.register-inline-link[b-pugj4s3q1u] {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: var(--text-xs);
}

.register-footer[b-pugj4s3q1u] {
    margin: 0.25rem 0 0;
    text-align: center;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.register-error[b-pugj4s3q1u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--destructive) 30%, transparent);
    border-radius: var(--radius);
    background-color: var(--destructive-foreground);
    color: var(--destructive);
    font-size: var(--text-sm);
}

.register-password-rules[b-pugj4s3q1u] {
    list-style: none;
    margin: -0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

.register-password-rules li[b-pugj4s3q1u] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.register-rule-met[b-pugj4s3q1u] {
    color: var(--success);
}

.register-note[b-pugj4s3q1u] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius);
    background-color: var(--info-foreground);
    color: var(--info);
    font-size: var(--text-sm);
}

.register[b-pugj4s3q1u]  .register-primary {
    width: 100%;
}

.register-actions[b-pugj4s3q1u]  .btn {
    width: 100%;
}

.register[b-pugj4s3q1u]  .input:-webkit-autofill {
    -webkit-text-fill-color: var(--primary);
    box-shadow: inset 0 0 0 1000px var(--primary-foreground);
}

.register[b-pugj4s3q1u]  .input:-webkit-autofill:focus-visible {
    box-shadow: inset 0 0 0 1000px var(--primary-foreground),
                var(--field-focus-ring);
}

/* Buttons that look like the page's links ("My country isn't listed", "Join the waitlist instead"). */
.register-link-button[b-pugj4s3q1u] {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
}

/* "My country isn't listed" leaves the account form empty: no gap for it. */
.register-step[b-pugj4s3q1u]  form:empty {
    display: none;
}

.register-legal[b-pugj4s3q1u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    text-align: center;
}
/* /Auth/VerifyEmail.razor.rz.scp.css */
.verify-email-loading[b-64afm1qujo] {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}
/* /Components/ErrorHandling/AppUpdateNotice.razor.rz.scp.css */
.app-update-notice[b-l6jyjgq66l] {
    position: fixed;
    left: 50%;
    bottom: calc(var(--spacing) * 4);
    transform: translateX(-50%);
    /* Above every modal (ModalService's z-indexes count up from 1000) and the toast tray (3000): the notice must stay
       reachable whatever is open. */
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    background-color: var(--warning-foreground);
    color: var(--primary);
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px -6px var(--shadow);
    font-size: var(--text-sm);
}

.app-update-notice-icon[b-l6jyjgq66l] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--warning);
}

.app-update-notice-text[b-l6jyjgq66l] {
    flex: 1;
    min-width: 0;
}

.app-update-notice-actions[b-l6jyjgq66l] {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    flex-shrink: 0;
}

.app-update-notice-close[b-l6jyjgq66l] {
    display: inline-flex;
    padding: calc(var(--spacing) * 1);
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .app-update-notice-close:hover[b-l6jyjgq66l] {
        background-color: var(--accent);
    }
}

.app-update-notice-close:active[b-l6jyjgq66l] {
    background-color: var(--pressed);
}

.app-update-notice-close:focus-visible[b-l6jyjgq66l] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .app-update-notice[b-l6jyjgq66l] {
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        max-width: none;
        border-width: 1px 0 0;
        border-radius: 0;
    }
}
/* /Components/ErrorHandling/FilesUnavailableBanner.razor.rz.scp.css */
/* Text and icon on the left, the ✕ on the right; like EmailVerificationBanner (the info tint) without its buttons. */
.files-unavailable-banner[b-ygchxtrjjc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* At least the ✕'s touch growth (10 px a side on a coarse pointer, T1): the hit areas never overlap the text. */
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
    border-radius: var(--radius);
    background-color: var(--info-foreground);
    color: var(--info);
    font-size: var(--text-sm);
    line-height: 1.25rem;
}

.files-unavailable-banner-message[b-ygchxtrjjc] {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
}

.files-unavailable-banner-icon[b-ygchxtrjjc] {
    display: inline-flex;
    flex-shrink: 0;
    padding-top: 0.125rem;
}

.files-unavailable-banner-text[b-ygchxtrjjc] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.files-unavailable-banner-title[b-ygchxtrjjc] {
    margin: 0;
    font-weight: 600;
}

.files-unavailable-banner-description[b-ygchxtrjjc] {
    margin: 0;
    overflow-wrap: anywhere;
}

.files-unavailable-banner-close[b-ygchxtrjjc] {
    display: inline-flex;
    flex-shrink: 0;
    padding: 0.125rem;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .files-unavailable-banner-close:hover[b-ygchxtrjjc] {
        background-color: color-mix(in srgb, var(--info) 12%, transparent);
    }
}

.files-unavailable-banner-close:active[b-ygchxtrjjc] {
    background-color: color-mix(in srgb, var(--info) 20%, transparent);
}

.files-unavailable-banner-close:focus-visible[b-ygchxtrjjc] {
    outline: none;
    box-shadow: var(--focus-ring);
}
/* /Components/ErrorHandling/PageErrorBoundary.razor.rz.scp.css */
.page-error[b-8tbearmede] {
    display: flex;
    justify-content: center;
    padding-block: calc(var(--spacing) * 6);
}

.page-error-actions[b-8tbearmede] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
}
/* /Components/LegalLinksLine.razor.rz.scp.css */
.legal-links[b-4fqz4pqio6] {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
}

.legal-links a[b-4fqz4pqio6] {
    color: inherit;
}
/* /Components/LoadingSpinner.razor.rz.scp.css */
.loading-spinner[b-odmqo9trkt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: hsl(var(--foreground, 222.2 47.4% 11.2%));
}

.loading-spinner__icon[b-odmqo9trkt] {
    animation: loading-spinner-spin-b-odmqo9trkt 0.8s linear infinite;
}

.loading-spinner__track[b-odmqo9trkt] {
    opacity: 0.25;
}

.loading-spinner__indicator[b-odmqo9trkt] {
    opacity: 0.75;
}

.loading-spinner__label[b-odmqo9trkt] {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: hsl(var(--muted-foreground, 215.4 16.3% 46.9%));
}

/* Label positions */

.loading-spinner--label-right[b-odmqo9trkt] {
    flex-direction: row;
}

.loading-spinner--label-top[b-odmqo9trkt] {
    flex-direction: column;
}

/* Sizes */

.loading-spinner--small[b-odmqo9trkt] {
    width: 1rem;
    height: 1rem;
}

.loading-spinner--medium[b-odmqo9trkt] {
    width: 1.5rem;
    height: 1.5rem;
}

.loading-spinner--large[b-odmqo9trkt] {
    width: 2rem;
    height: 2rem;
}

.loading-spinner--xlarge[b-odmqo9trkt] {
    width: 2.5rem;
    height: 2.5rem;
}

@keyframes loading-spinner-spin-b-odmqo9trkt {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading-spinner__icon[b-odmqo9trkt] {
        animation-duration: 1.5s;
    }
}
/* /Components/SidebarToggleButton.razor.rz.scp.css */
/* Sized and styled like the top row's other icon buttons (the bell): 44 px, it only renders on the phone (T-18). */
.sidebar-toggle-button[b-4o8x8fjtf6] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--primary);
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .sidebar-toggle-button:hover[b-4o8x8fjtf6] {
        background-color: var(--accent);
    }
}

.sidebar-toggle-button:active[b-4o8x8fjtf6] {
    background-color: var(--pressed);
}

.sidebar-toggle-button:focus-visible[b-4o8x8fjtf6] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Safety net: the desktop layout always shows the sidebar. */
/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width >= 769px) and (not ((pointer: coarse) and (height < 500px))) {
    .sidebar-toggle-button[b-4o8x8fjtf6] {
        display: none;
    }
}
/* /Components/UI/Alert/Alert.razor.rz.scp.css */
.alert[b-a3ne1i0ov5] {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5);
    font-size: var(--text-sm);
    line-height: 1.25rem;
}

.alert-icon[b-a3ne1i0ov5] {
    display: inline-flex;
    flex-shrink: 0;
    /* Centres the 16px icon on the first 20px line of text. */
    padding-top: 0.125rem;
}

.alert-content[b-a3ne1i0ov5] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 0.5);
    min-width: 0;
}

.alert-title[b-a3ne1i0ov5] {
    margin: 0;
    font-weight: 600;
}

.alert-description[b-a3ne1i0ov5] {
    overflow-wrap: anywhere;
}

.alert-info[b-a3ne1i0ov5] {
    border-color: color-mix(in srgb, var(--info) 30%, transparent);
    background-color: var(--info-foreground);
    color: var(--info);
}

.alert-warning[b-a3ne1i0ov5] {
    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
    background-color: var(--warning-foreground);
    color: var(--warning);
}

.alert-destructive[b-a3ne1i0ov5] {
    border-color: color-mix(in srgb, var(--destructive) 30%, transparent);
    background-color: var(--destructive-foreground);
    color: var(--destructive);
}
/* /Components/UI/Autocomplete/Autocomplete.razor.rz.scp.css */
.autocomplete[b-ynu4yo67li] {
    position: relative;
    width: 100%;
}

.autocomplete-input-wrapper[b-ynu4yo67li] {
    position: relative;
}

.autocomplete-input[b-ynu4yo67li] {
    display: flex;
    width: 100%;
    height: 2.25rem;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--input);
    border-radius: var(--radius, 0.625rem);
    background: var(--background);
    padding: 0.375rem 2.25rem 0.375rem 2.25rem;
    color: var(--foreground, #0a0a0a);
    font: inherit;
    font-size: var(--text-input);
    line-height: 1.25rem;
    outline: none;
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.autocomplete-input[b-ynu4yo67li]::placeholder { color: var(--muted-foreground, #737373); }

.autocomplete-input:focus-visible[b-ynu4yo67li] {
    border-color: var(--ring);
    box-shadow: var(--field-focus-ring);
}

@media (hover: hover) {
    .autocomplete-input:hover:not(:disabled):not(:focus-visible):not(.autocomplete-invalid)[b-ynu4yo67li] {
        border-color: var(--input-hover);
    }
}

.autocomplete-invalid .autocomplete-input[b-ynu4yo67li] {
    border-color: var(--destructive, #dc2626);
}

.autocomplete-invalid .autocomplete-input:focus-visible[b-ynu4yo67li] {
    border-color: var(--destructive, #dc2626);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive, #dc2626) 25%, transparent);
}

.autocomplete-invalid[b-ynu4yo67li] { border-color: var(--destructive); }

.autocomplete-invalid:focus-visible[b-ynu4yo67li] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 25%, transparent);
}

.validation-message-container[b-ynu4yo67li] {
    min-height: 1rem;
}

.autocomplete-input:disabled[b-ynu4yo67li] {
    cursor: not-allowed;
    opacity: 0.5;
}

[b-ynu4yo67li] .autocomplete-search-icon,
[b-ynu4yo67li] .autocomplete-clear-icon {
    width: 1rem;
    height: 1rem;
}

[b-ynu4yo67li] .autocomplete-search-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--muted-foreground, #737373);
    pointer-events: none;
}

.autocomplete-clear-button[b-ynu4yo67li] {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateY(-50%);
    border: 0;
    border-radius: calc(var(--radius, 0.625rem) - 0.2rem);
    background: transparent;
    color: var(--muted-foreground, #737373);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .autocomplete-clear-button:hover[b-ynu4yo67li] { background: var(--accent); }
}

.autocomplete-clear-button:active[b-ynu4yo67li] { background: var(--pressed); }

.autocomplete-clear-button:focus-visible[b-ynu4yo67li] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.autocomplete-content[b-ynu4yo67li] {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    width: auto;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--radius, 0.625rem);
    background: var(--popover);
    color: var(--popover-foreground);
    padding: 0.25rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    animation: autocomplete-in-b-ynu4yo67li var(--motion-base) var(--ease-out) backwards;
    /* T-120: the smaller of the component's own cap (MaxVisibleResults) and the room above the keyboard on the list's side,
       in whole rows (autocomplete.js); the list scrolls inside it. */
    max-height: min(var(--autocomplete-max-height, 100vh), var(--autocomplete-room, 100vh));
    overflow-y: auto;
}

/* Hidden until autocomplete.js has placed it (data-placed), so it never flashes at the viewport's top-left; the fade-in
   animation then starts when it is placed. Without the module there is no data-awaiting-position: it shows as before. */
.autocomplete-content[data-awaiting-position]:not([data-placed])[b-ynu4yo67li] {
    visibility: hidden;
    animation: none;
}

.autocomplete-content.autocomplete-scrollable[b-ynu4yo67li] {
    overflow-y: auto;
}

.autocomplete-content.is-loading[b-ynu4yo67li] {
    min-height: 4rem;
}

.autocomplete-loading-backdrop[b-ynu4yo67li] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    backdrop-filter: blur(2px);
}

.autocomplete-content.autocomplete-flip-y[b-ynu4yo67li] {
    top: auto;
    animation-name: autocomplete-in-up-b-ynu4yo67li;
}

.autocomplete-item[b-ynu4yo67li] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    border-radius: calc(var(--radius, 0.625rem) - 0.25rem);
    background: transparent;
    padding: 0.5rem 0.625rem;
    color: inherit;
    font: inherit;
    font-size: var(--text-sm);
    line-height: 1.25rem;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Touch (T-27): a list row is 44 px tall. */
@media (pointer: coarse) {
    .autocomplete-item[b-ynu4yo67li] {
        min-height: 2.75rem;
    }
}

/* The keyboard's is-active row stays outside the hover query, so a phone's list never keeps the tapped row tinted. */
@media (hover: hover) {
    .autocomplete-item:hover[b-ynu4yo67li] {
        background: var(--accent);
        color: var(--accent-foreground);
    }
}

.autocomplete-item.is-active[b-ynu4yo67li] {
    background: var(--accent);
    color: var(--accent-foreground);
}

/* The current value's row (X-15): a heavier label and a trailing check. The check is decoration; aria-selected follows the
   highlighted row, as it does for a combobox's listbox. */
.autocomplete-item.is-selected[b-ynu4yo67li] {
    font-weight: 500;
}

.autocomplete-item-check[b-ynu4yo67li] {
    display: inline-flex;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.autocomplete-item:active[b-ynu4yo67li] {
    background: var(--pressed);
    color: var(--accent-foreground);
}

.autocomplete-status[b-ynu4yo67li],
.autocomplete-empty[b-ynu4yo67li] {
    display: flex;
    min-height: 4rem;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.625rem;
    color: var(--muted-foreground, #737373);
    font-size: var(--text-sm);
    text-align: center;
}

@keyframes autocomplete-in-b-ynu4yo67li {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes autocomplete-in-up-b-ynu4yo67li {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* /Components/UI/Badge/Badge.razor.rz.scp.css */
/* Badges never clip: they keep their size, and the row holding them wraps. */
.badge[b-xq4zzp63a7] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: fit-content;
    white-space: nowrap;
    border-radius: 9999px;
    border: 1px solid transparent;
    padding: 0.125rem 0.625rem;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.25rem;
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
    cursor: default;
}

.badge-variant-default[b-xq4zzp63a7] {
    background-color: var(--primary, #18181b);
    color: var(--primary-foreground, #fafafa);
}

.badge-variant-secondary[b-xq4zzp63a7] {
    background-color: var(--accent);
    color: var(--foreground, #18181b);
}

.badge-variant-destructive[b-xq4zzp63a7] {
    background-color: var(--destructive, #dc2626);
    color: var(--destructive-foreground, #fef2f2);
}

.badge-variant-outline[b-xq4zzp63a7] {
    border-color: var(--border-colour, #e5e5e5);
    background-color: transparent;
    color: var(--foreground, #0a0a0a);
}

/* Custom colours: light and dark shades of the same Tailwind palette hue. */
.badge-color-red[b-xq4zzp63a7] { background-color: var(--badge-red-bg); color: var(--badge-red-fg); }
.badge-color-orange[b-xq4zzp63a7] { background-color: var(--badge-orange-bg); color: var(--badge-orange-fg); }
.badge-color-amber[b-xq4zzp63a7] { background-color: var(--badge-amber-bg); color: var(--badge-amber-fg); }
.badge-color-green[b-xq4zzp63a7] { background-color: var(--badge-green-bg); color: var(--badge-green-fg); }
.badge-color-blue[b-xq4zzp63a7] { background-color: var(--badge-blue-bg); color: var(--badge-blue-fg); }
.badge-color-violet[b-xq4zzp63a7] { background-color: var(--badge-violet-bg); color: var(--badge-violet-fg); }
.badge-color-pink[b-xq4zzp63a7] { background-color: var(--badge-pink-bg); color: var(--badge-pink-fg); }
.badge-color-slate[b-xq4zzp63a7] { background-color: var(--badge-slate-bg); color: var(--badge-slate-fg); }

/* /Components/UI/Badge/JobLineItemTypeBadge.razor.rz.scp.css */
.job-line-item-type-badge[b-1b9ejrjjzu] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.375rem;
    width: fit-content;
    white-space: nowrap;
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.25rem;
}

.job-line-item-type-badge svg[b-1b9ejrjjzu] {
    flex: 0 0 auto;
}

.job-line-item-type-part[b-1b9ejrjjzu] { background-color: var(--badge-blue-bg); color: var(--badge-blue-fg); }
.job-line-item-type-labour[b-1b9ejrjjzu] { background-color: var(--badge-violet-bg); color: var(--badge-violet-fg); }
.job-line-item-type-consumable[b-1b9ejrjjzu] { background-color: var(--badge-green-bg); color: var(--badge-green-fg); }
.job-line-item-type-fee[b-1b9ejrjjzu] { background-color: var(--badge-amber-bg); color: var(--badge-amber-fg); }
.job-line-item-type-diagnostic[b-1b9ejrjjzu] { background-color: var(--badge-pink-bg); color: var(--badge-pink-fg); }
.job-line-item-type-discount[b-1b9ejrjjzu] { background-color: var(--badge-teal-bg); color: var(--badge-teal-fg); }
.job-line-item-type-unknown[b-1b9ejrjjzu] { background-color: var(--badge-slate-bg); color: var(--badge-slate-fg); }
/* /Components/UI/Badge/StatusBadge.razor.rz.scp.css */
/* Badges never clip: they keep their size, and the row holding them wraps. */
.status-badge[b-taymar0cgi] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.375rem;
    width: fit-content;
    white-space: nowrap;
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.25rem;
}

.status-badge-size-small[b-taymar0cgi] {
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    line-height: 1rem;
}

.status-badge-size-small svg[b-taymar0cgi] {
    width: 14px;
    height: 14px;
}

.status-badge-size-large[b-taymar0cgi] {
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    font-size: var(--text-sm);
    line-height: 1.5rem;
}

.status-badge-size-large svg[b-taymar0cgi] {
    width: 20px;
    height: 20px;
}

.status-badge svg[b-taymar0cgi] {
    flex: 0 0 auto;
}

.status-badge-created[b-taymar0cgi] {
    background-color: var(--badge-indigo-bg);
    color: var(--badge-indigo-fg);
}

.status-badge-scheduled[b-taymar0cgi] {
    background-color: var(--badge-purple-bg);
    color: var(--badge-purple-fg);
}

.status-badge-carreceived[b-taymar0cgi] {
    background-color: var(--badge-amber-bg);
    color: var(--badge-amber-fg);
}

.status-badge-inprogress[b-taymar0cgi] {
    background-color: var(--badge-blue-bg);
    color: var(--badge-blue-fg);
}

.status-badge-readyforpickup[b-taymar0cgi] {
    background-color: var(--badge-green-bg);
    color: var(--badge-green-fg);
}

.status-badge-completed[b-taymar0cgi] {
    background-color: var(--badge-emerald-bg);
    color: var(--badge-emerald-fg);
}

.status-badge-cancelled[b-taymar0cgi] {
    background-color: var(--badge-slate-bg);
    color: var(--badge-slate-fg);
}
/* /Components/UI/Button/Button.razor.rz.scp.css */
/* Uses the same shadcn/ui-style CSS variable tokens as Dropdown.razor.css
   (--background, --border, --accent, --ring, --radius, ...) plus a few
   button-specific ones (--primary, --secondary, --destructive + their
   "-foreground" pairs). See README.md for wiring these to your theme. */

button[b-af5oilwzs3] {
    font-family: inherit;
}

.btn[b-af5oilwzs3] {
    position: relative;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: var(--radius, 0.5rem);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.25rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.btn:focus-visible[b-af5oilwzs3] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn:disabled[b-af5oilwzs3],
.btn[aria-disabled="true"]:not(.btn-loading)[b-af5oilwzs3] {
    opacity: 0.5;
    pointer-events: none;
}

/* Loading (Loading=true): not disabled, so it keeps focus and full opacity; clicks are ignored by the component. */
.btn-loading[b-af5oilwzs3] {
    pointer-events: none;
}

/* ::deep is required because the icon component (e.g. IconUserPlus) renders its own
   markup with its own CSS scope, so a plain descendant selector wouldn't reach it. */
.btn-icon[b-af5oilwzs3]  svg {
    display: flex;
    align-items: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    grid-area: 1 / 1;
}

/* The icon's cell: a loading spinner is stacked on the icon in the same 1rem cell, so nothing moves. */
.btn-icon[b-af5oilwzs3] {
    display: inline-grid;
    flex-shrink: 0;
}

.btn-icon > .btn-spinner[b-af5oilwzs3] {
    grid-area: 1 / 1;
}

/* --- Sizes --- */

.btn-size-default[b-af5oilwzs3] {
    height: 2.25rem;
    padding: 0 1rem;
}

.btn-size-sm[b-af5oilwzs3] {
    height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.8rem;
    border-radius: calc(var(--radius, 0.5rem) - 0.125rem);
}

/* On touch (T-24, Q1) a small text button is 36 px tall, and at least 44 px wide so its label never makes a narrower target. */
@media (pointer: coarse) {
    .btn-size-sm[b-af5oilwzs3] {
        height: 2.25rem;
        min-width: 2.75rem;
    }
}

.btn-size-lg[b-af5oilwzs3] {
    height: 2.5rem;
    padding: 0 2rem;
}

.btn-size-icon[b-af5oilwzs3] {
    height: 2.25rem;
    width: 2.25rem;
    padding: 0;
}

/* On touch (T-25, T-26) an icon-only button and a link-style button keep its box and gets a 44 px hit area, the same inset as app.css's .touch-target
   (written here because .btn is this component's own raw element). A row of two needs 8 px between them. */
@media (pointer: coarse) {
    .btn-size-icon[b-af5oilwzs3],
    .btn-variant-link[b-af5oilwzs3] {
        position: relative;
    }

    .btn-size-icon[b-af5oilwzs3]::after,
    .btn-variant-link[b-af5oilwzs3]::after {
        content: "";
        position: absolute;
        inset: min(0px, calc((100% - 2.75rem) / 2));
    }
}

/* --- Variants --- */

.btn-variant-default[b-af5oilwzs3] {
    background-color: var(--primary, #18181b);
    color: var(--primary-foreground, #fafafa);
}

@media (hover: hover) {
    .btn-variant-default:hover:not(:disabled)[b-af5oilwzs3] {
        background-color: color-mix(in srgb, var(--primary, #18181b) 90%, transparent);
    }
}

.btn-variant-destructive[b-af5oilwzs3] {
    background-color: var(--destructive);
    color: var(--destructive-foreground, #fef2f2);
}

@media (hover: hover) {
    .btn-variant-destructive:hover:not(:disabled)[b-af5oilwzs3] {
        background-color: color-mix(in srgb, var(--destructive) 90%, transparent);
    }
}

.btn-variant-outline[b-af5oilwzs3] {
    background-color: var(--background);
    color: var(--foreground, #0a0a0a);
    border-color: var(--border);
}

@media (hover: hover) {
    .btn-variant-outline:hover:not(:disabled)[b-af5oilwzs3] {
        background-color: var(--accent);
        color: var(--accent-foreground);
    }
}

.btn-variant-secondary[b-af5oilwzs3] {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}

@media (hover: hover) {
    .btn-variant-secondary:hover:not(:disabled)[b-af5oilwzs3] {
        background-color: color-mix(in srgb, var(--secondary) 80%, transparent);
    }
}

.btn-variant-ghost[b-af5oilwzs3] {
    background-color: transparent;
    border-color: transparent;
    color: var(--foreground, #0a0a0a);
}

@media (hover: hover) {
    .btn-variant-ghost:hover:not(:disabled)[b-af5oilwzs3] {
        background-color: var(--accent);
        color: var(--accent-foreground);
    }
}

.btn-variant-link[b-af5oilwzs3] {
    background-color: transparent;
    border-color: transparent;
    color: var(--primary, #18181b);
    padding: 0;
    height: auto;
    text-underline-offset: 4px;
}

@media (hover: hover) {
    .btn-variant-link:hover:not(:disabled)[b-af5oilwzs3] {
        text-decoration: underline;
    }
}

/* --- Loading spinner --- */

/* The spinner shows after 150 ms (QD-P1: a save that finishes sooner never flickers). It exists only while loading, so
   its reveal needs no JS timer: it starts transparent and a 1 ms animation delayed by 150 ms turns it on. The icon (or,
   for a label-only button, the label) it stands in for turns transparent at the same moment. `forwards` holds only an
   opacity, never a transform. */
.btn-spinner[b-af5oilwzs3] {
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    opacity: 0;
    animation: btn-spin-b-af5oilwzs3 600ms linear infinite, btn-loading-reveal-b-af5oilwzs3 1ms linear 150ms forwards;
    flex-shrink: 0;
}

/* A button with no icon: the spinner sits centred over the label. */
.btn-spinner-overlay[b-af5oilwzs3] {
    position: absolute;
    inset: 0;
    margin: auto;
}

.btn-loading .btn-icon[b-af5oilwzs3]  svg,
.btn-loading:not(.btn-has-icon) .btn-label[b-af5oilwzs3] {
    animation: btn-loading-conceal-b-af5oilwzs3 1ms linear 150ms forwards;
}

@keyframes btn-loading-reveal-b-af5oilwzs3 {
    to {
        opacity: 1;
    }
}

@keyframes btn-loading-conceal-b-af5oilwzs3 {
    to {
        opacity: 0;
    }
}

@keyframes btn-spin-b-af5oilwzs3 {
    to {
        transform: rotate(360deg);
    }
}

/* Reduced motion: a spinner is the only sign of progress, so it keeps turning, slowly (as LoadingSpinner does). */
@media (prefers-reduced-motion: reduce) {
    .btn-spinner[b-af5oilwzs3] {
        animation-duration: 1.5s, 1ms;
    }
}
/* /Components/UI/Card/CardContent.razor.rz.scp.css */
.card-content[b-c90k79yx6r] {
    padding: 1rem 1.5rem;
}

.card-content-condensed[b-c90k79yx6r] {
    padding: 0.75rem 1rem;
}

/* A closed collapsible card shows only its header. Both elements are this file's own, so this scoped rule beats the
   padding above (the scoped bundle loads after app.css, which is why app.css's own rule never applied). */
.card-content-collapse-collapsed > .card-content[b-c90k79yx6r] {
    padding: 0;
}
/* /Components/UI/Card/CardStickyHeader.razor.rz.scp.css */
/* The top of a tall card that stays docked under the app's top bar while the rest of the card scrolls by, so the
   card is never chopped. Place it as the first child of a Card, followed by a CardContent.

   The frame overlays the card's own top border and corners, so at rest it is indistinguishable from the card's
   top. The margin/padding pairs cancel out: at rest the layout is exactly a CardHeader followed by a
   CardContent, whose 1rem top padding plus the first panel's 0.75rem margin still leave 0.75rem under the strip. */
.card-sticky-header[b-4f04ywslvg] {
    position: sticky;
    /* Same line as a sticky sibling column (details pages' profile card), 0.75rem clear of the top bar. */
    top: calc(var(--sticky-offset, 0px) + 0.75rem);
    z-index: 4;
    margin: -1px -1px -2rem;
}

/* Opaque backing behind the frame that hides the card's own side borders and the body scrolling past, in both
   places the frame doesn't paint: the 0.75rem between the top bar and the docked header, and the cut-out
   outside its rounded top corners (where the card's straight side borders would otherwise show through).
   Square on purpose, and behind the frame (z-index -1), so the frame's own border and corners stay on top.
   It stops after the corners so the fade at the frame's bottom still shows the content sliding under it. It is as
   tall above the header as the gap the pages leave above the card, so it covers nothing at rest. */
.card-sticky-header[b-4f04ywslvg]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -1rem;
    left: 0;
    right: 0;
    height: calc(1rem + var(--card-radius, var(--radius, 0.625rem)));
    background: var(--primary-foreground);
}

.card-sticky-header-frame[b-4f04ywslvg] {
    border: 1px solid var(--border-colour);
    border-bottom: 0;
    border-radius: var(--card-radius, var(--radius, 0.625rem)) var(--card-radius, var(--radius, 0.625rem)) 0 0;
    /* Opaque down to the strip, then the same fade as the layout footer's (upside down), so content slides out
       from under the header instead of being cut. */
    background: linear-gradient(to bottom,
        var(--primary-foreground) calc(100% - 1rem),
        rgb(255 255 255 / 0.9) calc(100% - 0.75rem),
        rgb(255 255 255 / 0.55) calc(100% - 0.45rem),
        rgb(255 255 255 / 0) 100%);
}

.card-sticky-header-body[b-4f04ywslvg] {
    padding: 1rem 1.5rem;
}

/* The phone layout (viewport.js, T-119; S1w T-33): the card's title scrolls away and only the tab strip stays docked under
   the top bar, on a solid background (no fade: nothing shows through under the tabs), so a tall header never covers a field
   on a small screen. A sticky element sticks inside its parent's box, so the wrapper and the frame stop being boxes
   (display: contents) and the strip sticks within the whole card. The card's own border and corners are the card's again
   (the frame's overlay, the backing and the margins are not needed). At rest the card looks as before: the strip's bottom
   padding is traded for a negative margin that leaves the same 0.75rem under the tabs. */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .card-sticky-header[b-4f04ywslvg],
    .card-sticky-header-frame[b-4f04ywslvg] {
        display: contents;
    }

    .card-sticky-header[b-4f04ywslvg]::before {
        display: none;
    }

    .card-sticky-header-body[b-4f04ywslvg] {
        position: sticky;
        top: var(--sticky-offset, 0px);
        z-index: 4;
        padding-bottom: 0;
        margin-bottom: -1rem;
        background: var(--primary-foreground);
    }
}

/* A short touch screen (a phone in landscape) has no room for a docked strip: nothing below the top bar is sticky. */
@media (pointer: coarse) and (height < 500px) {
    .card-sticky-header-body[b-4f04ywslvg] {
        position: static;
    }
}
/* /Components/UI/Checkbox/Checkbox.razor.rz.scp.css */
/* Overrides the global `label` grid (built for label-above-input fields). */
.checkbox-field[b-0uzs1h12x2] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    cursor: pointer;
}

/* On touch (T-29) the label is the row: 44 px tall, the box and its text both toggle (it's a <label>). A bare box (no text)
   gets its 44 px width from .touch-target's hit area. */
@media (pointer: coarse) {
    .checkbox-field[b-0uzs1h12x2] {
        min-height: 2.75rem;
    }
}

.checkbox-field:has(.checkbox:disabled)[b-0uzs1h12x2] {
    cursor: not-allowed;
}

.checkbox[b-0uzs1h12x2] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
    appearance: none;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius, 0.625rem) - 0.25rem);
    background: var(--background);
    color: var(--primary-foreground);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.checkbox:checked[b-0uzs1h12x2] {
    border-color: var(--primary, #18181b);
    background-color: var(--primary, #18181b);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
}

.checkbox:focus-visible[b-0uzs1h12x2] {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (hover: hover) {
    .checkbox:hover:not(:disabled):not(:checked):not(.checkbox-invalid)[b-0uzs1h12x2] {
        border-color: var(--input-hover);
    }
}

.checkbox-invalid[b-0uzs1h12x2] { border-color: var(--destructive); }

.validation-message-container[b-0uzs1h12x2] {
    min-height: 1rem;
}

.checkbox:disabled[b-0uzs1h12x2] { cursor: not-allowed; opacity: 0.5; }

/* The space before "(optional)" is a margin: Razor drops the leading space of the text. */
.optional-mark[b-0uzs1h12x2] {
    margin-inline-start: 0.25rem;
}
/* /Components/UI/ChoiceChips/ChoiceChips.razor.rz.scp.css */
/* The label and the message sit as FormField lays them out (FormField's rules are scoped to it, so they're repeated). */
.choice-chips-field[b-q1hxs7hanp] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.choice-chips-label[b-q1hxs7hanp] {
    font-size: var(--text-sm);
    font-weight: 500;
}

.choice-chips-optional[b-q1hxs7hanp] {
    margin-inline-start: 0.25rem;
    white-space: nowrap;
}

/* B2: the row of chips wraps; each chip is as wide as its label and a label too long for the row wraps inside its chip. */
.choice-chips[b-q1hxs7hanp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.choice-chip[b-q1hxs7hanp] {
    flex: 0 1 auto;
    max-width: 100%;
    min-height: 2.25rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--background);
    color: var(--foreground);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.25rem;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

/* T1: 44 px tall on a touch screen (the box itself: a wrapped label must stay inside the hit area). */
@media (pointer: coarse) {
    .choice-chip[b-q1hxs7hanp] {
        min-height: 2.75rem;
    }
}

@media (hover: hover) {
    .choice-chip:hover:not(:disabled):not(.choice-chip-selected)[b-q1hxs7hanp] {
        border-color: var(--input-hover);
        background-color: var(--off-white);
    }
}

.choice-chip:focus-visible[b-q1hxs7hanp] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.choice-chip:active:not(:disabled)[b-q1hxs7hanp] {
    transform: scale(0.98);
}

.choice-chip:active:not(:disabled):not(.choice-chip-selected)[b-q1hxs7hanp] {
    background-color: var(--pressed);
}

/* QD-S2: selected is filled, so it reads at a glance, and shows on the tap itself. */
.choice-chip-selected[b-q1hxs7hanp] {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.choice-chip:disabled[b-q1hxs7hanp] {
    cursor: not-allowed;
    opacity: 0.5;
}
/* /Components/UI/Collapse/Collapse.razor.rz.scp.css */
/* The base tier is for a collapsible's row (Rules - Client UI "Motion"; QD-M1 names this exception to "opacity only"). */
.ui-collapse[b-ysjwt6dn14] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 0fr;
    min-width: 0;
    opacity: 0;
    transition: grid-template-rows var(--motion-base) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}

.ui-collapse-open[b-ysjwt6dn14] {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* A programmatic open that a scroll follows: the final layout at once. */
.ui-collapse-instant[b-ysjwt6dn14] {
    transition: none;
}

/* The row clips its content while it eases. The 0.25rem of padding, taken back by the negative margin, gives a focus ring
   at the content's edge room to show; the closed row is still 0 high. */
.ui-collapse-inner[b-ysjwt6dn14] {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0.25rem;
    margin: -0.25rem;
}
/* /Components/UI/CopyButton/CopyButton.razor.rz.scp.css */
/* The button's size is its own; the wrapper only carries the scope. Full-width buttons (Class="w-100") fill it. */
.copy-button-wrap[b-4njjci9kzu] {
    display: contents;
}

/* "Copy" and "Copied" share one grid cell: the cell is as wide as the longer one, so the swap moves nothing. */
.copy-button-label[b-4njjci9kzu] {
    display: inline-grid;
    justify-items: center;
}

.copy-button-label > *[b-4njjci9kzu] {
    grid-area: 1 / 1;
}

.copy-button-ghost[b-4njjci9kzu] {
    visibility: hidden;
}
/* /Components/UI/CopyField/CopyField.razor.rz.scp.css */
/* The field and Copy side by side from 481 px, the button's bottom on the field's (the label sits above the field only).
   On a phone the button goes under the field at the full width (S1w, T-12: beside it, a link's 36 px field was squeezed and
   the row pushed 7-16 px past the modal body). `min-width: 0` lets the field shrink instead of widening the row. */
.copy-field[b-twpzkp5gqb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.copy-field[b-twpzkp5gqb]  .copy-field-input {
    min-width: 0;
    text-overflow: ellipsis;
}

.copy-field[b-twpzkp5gqb]  .copy-field-button {
    width: 100%;
}

@media (min-width: 481px) {
    .copy-field[b-twpzkp5gqb] {
        flex-direction: row;
        align-items: flex-end;
    }

    /* The Input's FormField is the label + field stack: it takes what Copy leaves. */
    .copy-field[b-twpzkp5gqb]  > :first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .copy-field[b-twpzkp5gqb]  .copy-field-button {
        width: auto;
        flex: 0 0 auto;
    }
}
/* /Components/UI/DatePicker/DatePicker.razor.rz.scp.css */
.date-picker[b-2osazd3y1k] { position: relative; width: 100%; }
.date-picker-trigger[b-2osazd3y1k] { display: inline-flex; align-items: center; gap: .55rem; width: 100%; min-height: 2.5rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius, .5rem); background: var(--background); color: var(--foreground, #09090b); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
@media (hover: hover) { .date-picker-trigger:hover:not(:disabled)[b-2osazd3y1k] { background: var(--accent); } }
.date-picker-trigger:active:not(:disabled)[b-2osazd3y1k] { background: var(--pressed); }
.date-picker-trigger[b-2osazd3y1k], .date-picker-nav[b-2osazd3y1k], .date-picker-day[b-2osazd3y1k], .date-picker-today[b-2osazd3y1k] { -webkit-tap-highlight-color: transparent; }
.date-picker-trigger:focus-visible[b-2osazd3y1k] { outline: none; border-color: var(--ring); box-shadow: var(--field-focus-ring); }
.date-picker-trigger:disabled[b-2osazd3y1k] { cursor: not-allowed; opacity: .5; }
.date-picker-calendar-icon svg[b-2osazd3y1k] { width: 1rem; height: 1rem; }
.date-picker-placeholder[b-2osazd3y1k] { color: var(--muted-foreground, #71717a); }
.date-picker-invalid[b-2osazd3y1k] { border-color: var(--destructive, #ef4444); }
.date-picker-popover[b-2osazd3y1k] { position: fixed; z-index: 4000; top: 0; left: 0; box-sizing: border-box; width: 19rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius, .5rem); background: var(--popover); color: var(--popover-foreground); box-shadow: 0 10px 25px rgba(0,0,0,.12); overflow-y: auto; }
.date-picker-popover.date-picker-flip-y[b-2osazd3y1k] { top: 0; bottom: auto; }
.date-picker-header[b-2osazd3y1k] { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.date-picker-month[b-2osazd3y1k] { font-size: var(--text-sm); font-weight: 600; }
.date-picker-nav[b-2osazd3y1k] { width: 2rem; height: 2rem; border: 0; border-radius: .375rem; background: transparent; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }
@media (hover: hover) { .date-picker-nav:hover:not(:disabled)[b-2osazd3y1k], .date-picker-today:hover[b-2osazd3y1k] { background: var(--accent); } }
.date-picker-nav:active:not(:disabled)[b-2osazd3y1k], .date-picker-today:active[b-2osazd3y1k] { background: var(--pressed); }
.date-picker-nav:focus-visible[b-2osazd3y1k], .date-picker-day:focus-visible[b-2osazd3y1k], .date-picker-today:focus-visible[b-2osazd3y1k] { outline: none; box-shadow: var(--focus-ring-inset); }
.date-picker-nav:disabled[b-2osazd3y1k] { cursor: not-allowed; opacity: .35; }
.date-picker-grid[b-2osazd3y1k] { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; text-align: center; }
.date-picker-weekday[b-2osazd3y1k] { padding: .25rem 0; color: var(--muted-foreground, #71717a); font-size: .7rem; font-weight: 500; }
.date-picker-day[b-2osazd3y1k] { aspect-ratio: 1; border: 0; border-radius: .375rem; background: transparent; color: inherit; font: inherit; font-size: .8rem; cursor: pointer; }
@media (hover: hover) { .date-picker-day:hover:not(:disabled)[b-2osazd3y1k] { background: var(--accent); } }
.date-picker-day:active:not(:disabled):not(.date-picker-day-selected)[b-2osazd3y1k] { background: var(--pressed); }
.date-picker-day:disabled[b-2osazd3y1k] { color: var(--muted-foreground, #71717a); opacity: .35; cursor: not-allowed; }
.date-picker-day-today[b-2osazd3y1k] { box-shadow: inset 0 0 0 1px var(--primary, #18181b); }
.date-picker-day-selected[b-2osazd3y1k] { background: var(--primary, #18181b); color: var(--primary-foreground); }
@media (hover: hover) { .date-picker-day-selected:hover[b-2osazd3y1k] { background: var(--primary, #18181b); } }
.date-picker-empty[b-2osazd3y1k] { aspect-ratio: 1; }
.date-picker-today[b-2osazd3y1k] { width: 100%; margin-top: .75rem; padding: .4rem; border: 0; border-radius: .375rem; background: transparent; color: var(--primary, #18181b); font: inherit; font-size: .8rem; cursor: pointer; }
/* Touch (T-28): the month chevrons, the days and Today are 44 px targets. Seven 44 px columns are 308 px, so the popover is
   20.5rem (328 px, 16 px from each edge of a 360 px screen) with .5rem of padding and no gap between the days. */
@media (pointer: coarse) {
    .date-picker-popover[b-2osazd3y1k] { width: min(20.5rem, calc(100vw - 2rem)); padding: .5rem; }
    .date-picker-nav[b-2osazd3y1k] { width: 2.75rem; height: 2.75rem; }
    .date-picker-grid[b-2osazd3y1k] { gap: 0; }
    .date-picker-today[b-2osazd3y1k] { min-height: 2.75rem; margin-top: .25rem; }
}
.validation-message-container[b-2osazd3y1k] { min-height: 1rem; }
/* /Components/UI/DictationButton/DictationButton.razor.rz.scp.css */
.dictation[b-4jfr0mljun] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.dictation-button[b-4jfr0mljun] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--border-colour);
    border-radius: 50%;
    background: var(--primary-foreground);
    color: var(--primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .dictation-button:hover:not(:disabled)[b-4jfr0mljun] {
        background: var(--accent);
    }
}

.dictation-button:active:not(:disabled):not(.dictation-button-listening)[b-4jfr0mljun] {
    background: var(--pressed);
}

.dictation-button:focus-visible[b-4jfr0mljun] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.dictation-button:disabled[b-4jfr0mljun] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dictation-button-listening[b-4jfr0mljun] {
    border-color: var(--destructive);
    background: var(--destructive);
    color: var(--destructive-foreground);
}

@media (hover: hover) {
    .dictation-button-listening:hover:not(:disabled)[b-4jfr0mljun] {
        border-color: var(--destructive);
        background: var(--destructive);
        color: var(--destructive-foreground);
    }
}

.dictation-status[b-4jfr0mljun] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: 1.3;
}

.dictation-status[b-4jfr0mljun] {
    color: var(--destructive);
    font-weight: 500;
}

/* Listening is a state, not a performance (QD-M9): the red button, this still dot and the text say it; nothing pulses. */
.dictation-status[b-4jfr0mljun]::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-end: 0.375rem;
    border-radius: 50%;
    background: var(--destructive);
    vertical-align: baseline;
}
/* /Components/UI/DropdownMenu/DropdownMenu.razor.rz.scp.css */
/* Uses shadcn/ui-style CSS variables (--background, --border, --popover, --accent, --ring, --radius, ...)
   with sensible fallbacks so this still looks reasonable if those variables aren't defined.
   See README.md for how to wire this up to your actual theme tokens. */

.dm-root[b-xqppbeiomo] {
    position: relative;
    display: inline-block;
    max-width: 100%;
    min-width: 0;
}

.dm-trigger-wrapper[b-xqppbeiomo] {
    display: inline-flex;
    max-width: 100%;
}

/* A long label (the user's greeting) keeps the trigger on one line: it ends in an ellipsis, the icon stays. */
.dm-trigger-text[b-xqppbeiomo] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-trigger-button[b-xqppbeiomo] {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.25rem;
    width: 100%;
    min-width: 0;
    color: var(--foreground, #0a0a0a);
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius, 0.5rem);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .dm-trigger-button:hover:not(:disabled)[b-xqppbeiomo] {
        background-color: var(--accent);
    }
}

.dm-trigger-button:active:not(:disabled)[b-xqppbeiomo] {
    background-color: var(--pressed);
}

.dm-trigger-button:focus-visible[b-xqppbeiomo] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.dm-trigger-button:disabled[b-xqppbeiomo] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dm-trigger-icon[b-xqppbeiomo] {
    display: inline-flex;
}

/* ::deep is required because the icon component (e.g. IconUserPlus) renders its own
   markup with its own CSS scope, so a plain descendant selector wouldn't reach it. */
.dm-trigger-icon[b-xqppbeiomo]  svg {
    width: 1rem;
    height: 1rem;
}

.dm-content[b-xqppbeiomo] {
    /* A fixed panel is not included in an ancestor's scrollable overflow area. */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    min-width: 10rem;
    padding: 0.25rem;
    /* Keep the panel opaque so content behind the menu cannot bleed through. */
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius, 0.5rem);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    animation: dm-in-b-xqppbeiomo var(--motion-base) var(--ease-out) backwards;
}

.dm-content.start[b-xqppbeiomo] {
    /* Horizontal position is set from the trigger by dropdown.js. */
}

.dm-content.end[b-xqppbeiomo] {
    /* Horizontal position is set from the trigger by dropdown.js. */
}

/* Applied by dropdown.js when there isn't enough room below the trigger but there is
   enough room above it. */
.dm-content.dm-flip-y[b-xqppbeiomo] {
    animation: dm-in-up-b-xqppbeiomo var(--motion-base) var(--ease-out) backwards;
}

@keyframes dm-in-b-xqppbeiomo {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes dm-in-up-b-xqppbeiomo {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* /Components/UI/DropdownMenu/DropdownMenuItem.razor.rz.scp.css */
.dm-item[b-4m8v7fskah] {
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    font-size: var(--text-sm);
    line-height: 1.25rem;
    text-align: left;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: calc(var(--radius, 0.5rem) - 0.25rem);
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

/* Touch (T-27): a list row is 44 px tall. */
@media (pointer: coarse) {
    .dm-item[b-4m8v7fskah] {
        min-height: 2.75rem;
    }
}

@media (hover: hover) {
    .dm-item:hover:not(:disabled)[b-4m8v7fskah] {
        background-color: var(--accent);
        color: var(--accent-foreground);
    }
}

/* A menu's roving focus is its highlight. */
.dm-item:focus-visible[b-4m8v7fskah] {
    background-color: var(--accent);
    color: var(--accent-foreground);
    outline: none;
}

.dm-item:active:not(:disabled)[b-4m8v7fskah] {
    background-color: var(--pressed);
    color: var(--accent-foreground);
}

.dm-item:disabled[b-4m8v7fskah] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dm-item.destructive[b-4m8v7fskah] {
    color: var(--destructive);
}

@media (hover: hover) {
    .dm-item.destructive:hover:not(:disabled)[b-4m8v7fskah] {
        background-color: var(--destructive);
        color: var(--destructive-foreground, #fff);
    }
}

.dm-item.destructive:focus-visible[b-4m8v7fskah] {
    background-color: var(--destructive);
    color: var(--destructive-foreground, #fff);
}

.dm-item.destructive:active:not(:disabled)[b-4m8v7fskah] {
    background-color: color-mix(in srgb, var(--destructive) 85%, black);
    color: var(--destructive-foreground, #fff);
}

.dm-item-icon[b-4m8v7fskah] {
    display: inline-flex;
}

.dm-item-icon[b-4m8v7fskah]  svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.dm-item-label[b-4m8v7fskah] {
    flex: 1;
}

.dm-item.destructive > .dm-item-label[b-4m8v7fskah] {
    font-weight: 600;
}

.dm-item-shortcut[b-4m8v7fskah] {
    font-size: var(--text-xs);
    color: var(--muted-foreground, #71717a);
}

/* A link item (Href) keeps the button items' box: the user menu sits in MainLayout's top row, whose `.top-row a` rule
   adds a left margin to links. The role attribute makes this rule the more specific one. */
a[role="menuitem"].dm-item[b-4m8v7fskah] {
    margin: 0;
}

/* An item with a description is taller: the icon stays on the first line, and the line wraps (the menu is as wide as the
   longest line up to 15rem). */
.dm-item-described[b-4m8v7fskah] {
    align-items: flex-start;
}

.dm-item-described > .dm-item-icon[b-4m8v7fskah] {
    padding-top: 0.125rem;
}

.dm-item-label[b-4m8v7fskah] {
    min-width: 0;
}

.dm-item-description[b-4m8v7fskah] {
    display: block;
    max-inline-size: 15rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: 1.3;
    white-space: normal;
}

.dm-item:focus-visible .dm-item-description[b-4m8v7fskah],
.dm-item:active:not(:disabled) .dm-item-description[b-4m8v7fskah] {
    color: inherit;
}

@media (hover: hover) {
    .dm-item:hover:not(:disabled) .dm-item-description[b-4m8v7fskah],
    .dm-item.destructive:hover:not(:disabled) .dm-item-description[b-4m8v7fskah] {
        color: inherit;
    }
}
/* /Components/UI/DropdownMenu/DropdownMenuLabel.razor.rz.scp.css */
.dm-label[b-56hwyae8xp] {
    padding: 0.375rem 0.5rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--muted-foreground, #71717a);
}
/* /Components/UI/DropdownMenu/DropdownMenuSeparator.razor.rz.scp.css */
.dm-separator[b-16losqgf1k] {
    height: 1px;
    margin: 0.25rem -0.25rem;
    background-color: var(--border);
}
/* /Components/UI/EmptyState/EmptyState.razor.rz.scp.css */
.empty-state[b-br37pu0lha] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.empty-state-icon[b-br37pu0lha] {
    display: flex;
    margin-bottom: 0.5rem;
    color: var(--muted-foreground);
}

.empty-state-title[b-br37pu0lha] {
    /* A search term echoed in "No results for …" can be one 100-character word: it wraps anywhere inside the card (S1w, T-8)
       instead of widening the page. */
    max-width: 100%;
    overflow-wrap: anywhere;
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
}

.empty-state-subtitle[b-br37pu0lha] {
    max-width: 100%;
    overflow-wrap: anywhere;
    margin: 0 0 0.5rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Components/UI/FlashNote/FlashNote.razor.rz.scp.css */
/* Inline by default: nothing at all while empty. */
.flash-note[b-hs3n8aadde] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* Empty, the root stays in the accessibility tree (a live region that appears together with its text isn't announced),
   but takes no room: out of the flow, 0 x 0. */
.flash-note-empty[b-hs3n8aadde] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Reserve: a block that keeps one line's height after the first show, so a form below never moves when it fades. */
.flash-note-reserved[b-hs3n8aadde] {
    display: flex;
    min-height: 1.25rem;
    margin-bottom: 0.5rem;
}

.flash-note-line[b-hs3n8aadde] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    opacity: 1;
    animation: flash-note-in-b-hs3n8aadde var(--motion-base) var(--ease-out) backwards;
    transition: opacity var(--motion-base) var(--ease-out);
}

.flash-note-leaving[b-hs3n8aadde] {
    opacity: 0;
}

.flash-note-line[b-hs3n8aadde]  .flash-note-icon {
    flex: 0 0 auto;
    color: var(--success);
}

.flash-note-text[b-hs3n8aadde] {
    min-width: 0;
}

@keyframes flash-note-in-b-hs3n8aadde {
    from {
        opacity: 0;
    }
}
/* /Components/UI/FormField/FormField.razor.rz.scp.css */
.form-field[b-ps7qen5f9n] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* The space before "(optional)" is a margin: Razor drops the leading space of the text. The mark
   wraps whole, never inside the word: `body { overflow-wrap: break-word }` would otherwise let a
   narrow column split it one character at a time ("opcio / nal"). */
.optional-mark[b-ps7qen5f9n] {
    margin-inline-start: 0.25rem;
    white-space: nowrap;
}
/* /Components/UI/InlineNumberInput/InlineNumberInput.razor.rz.scp.css */
/* A row-sized field: the owner sets the width through Class (or a rule of its own on .inline-number). Numbers never break
   (X1); the field keeps Input's 36 px height, at least 44 px wide (T1). */
.inline-number[b-82g8qsx2yw] {
    display: inline-flex;
    min-width: 2.75rem;
    vertical-align: middle;
    white-space: nowrap;
}

.inline-number[b-82g8qsx2yw]  .input-group {
    width: 100%;
}

.inline-number[b-82g8qsx2yw]  .input-container {
    width: 100%;
}

/* Quieter than a form's field: tighter padding, and no room kept for a warning icon until there is one. */
.inline-number[b-82g8qsx2yw]  .input-container .input.inline-number-field {
    padding: 0.375rem 0.5rem;
    font-variant-numeric: tabular-nums;
}

.inline-number[b-82g8qsx2yw]  .input-container .input.inline-number-field.input-warning {
    padding-right: 1.75rem;
}

.inline-number[b-82g8qsx2yw]  .input-container .input-warning-icon {
    right: 0.375rem;
}

.inline-number[b-82g8qsx2yw]  .input-group .input-group-prefix {
    min-width: 2rem;
    padding: 0 0.375rem;
}
/* /Components/UI/InlineTextInput/InlineTextInput.razor.rz.scp.css */
/* The text shown as a button (it wraps, X4) or the one-line field that replaces it. Both modes are the same height (36 px;
   44 px on touch, T1), so opening the field never moves the heading's other parts. The owner sets the width through Class
   (or a rule of its own on .inline-text); the open field takes the room the row leaves it. */
.inline-text[b-6whym17ihd] {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

.inline-text-editing[b-6whym17ihd] {
    flex: 1 1 12rem;
}

/* The button's padding sits outside the text's left edge, so the text lines up with what is under it (the margin on the
   wrapper, not the button: a stretched column item with a negative margin lost that width and wrapped the pencil). */
.inline-text:not(.inline-text-editing)[b-6whym17ihd] {
    margin-left: -0.375rem;
}

/* The text in the owner's font (a heading's size and weight), with the pencil after its last word, muted. */
.inline-text-button[b-6whym17ihd] {
    display: inline-block;
    min-height: 2.25rem;
    max-width: 100%;
    margin: 0;
    padding: 0.5rem 0.375rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.25;
    letter-spacing: inherit;
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.inline-text-value[b-6whym17ihd] {
    overflow-wrap: anywhere;
}

.inline-text-button[b-6whym17ihd]  .inline-text-pen {
    margin-left: 0.375rem;
    color: var(--muted-foreground);
    vertical-align: -0.0625rem;
}

@media (hover: hover) {
    .inline-text-button:hover[b-6whym17ihd] {
        background: var(--accent);
    }
}

.inline-text-button:active[b-6whym17ihd] {
    background: var(--pressed);
}

.inline-text-button:focus-visible[b-6whym17ihd] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

/* The field: no room kept for a warning icon (it has none). */
.inline-text[b-6whym17ihd]  .input-container {
    width: 100%;
}

.inline-text[b-6whym17ihd]  .input-container .input.inline-text-field {
    padding: 0.375rem 0.5rem;
}

/* Saving (QD-O3, QD-P1): read-only, and dimmed only after 150 ms, so a quick answer shows no flicker. */
.inline-text[aria-busy="true"][b-6whym17ihd]  .input.inline-text-field {
    opacity: 0.55;
    transition: opacity var(--motion-fast) var(--ease-out) 150ms;
}

.inline-text-error[b-6whym17ihd] {
    margin-top: 0.25rem;
    color: var(--destructive);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: normal;
    white-space: normal;
}

@media (pointer: coarse) {
    .inline-text-button[b-6whym17ihd] {
        min-height: 2.75rem;
    }

    .inline-text[b-6whym17ihd]  .input-container .input.inline-text-field {
        height: 2.75rem;
    }
}
/* /Components/UI/Input/Input.razor.rz.scp.css */
.input-container[b-m201p506m8] {
    position: relative;
}

.input-container .input[b-m201p506m8] {
    padding-right: 2rem;
}

.input-warning-icon[b-m201p506m8] {
    position: absolute;
    top: 50%;
    right: 0.625rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.input[b-m201p506m8] {
    display: flex;
    width: 100%;
    height: 2.25rem;
    min-width: 0;
    border: 1px solid var(--input);
    border-radius: var(--radius, 0.625rem);
    background: var(--background);
    padding: 0.375rem 0.75rem;
    color: var(--foreground, #0a0a0a);
    font: inherit;
    font-size: var(--text-input);
    line-height: 1.25rem;
    outline: none;
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.input[b-m201p506m8]::placeholder { color: var(--muted-foreground, #737373); }

.input:focus-visible[b-m201p506m8] {
    border-color: var(--ring);
    box-shadow: var(--field-focus-ring);
}

/* Hover darkens the border on a fine pointer only (nothing sticks after a tap); a focused, invalid, warned or disabled field keeps its own look. */
@media (hover: hover) {
    .input:hover:not(:disabled):not(:focus-visible):not(.input-invalid):not(.input-warning)[b-m201p506m8] {
        border-color: var(--input-hover);
    }
}

.input-invalid[b-m201p506m8] { border-color: var(--destructive); }

.input-warning[b-m201p506m8] { border-color: var(--warning); }

.input-warning:focus-visible[b-m201p506m8] {
    border-color: var(--warning);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 25%, transparent);
}

.input-warning-message[b-m201p506m8] {
    display: block;
    color: var(--warning);
    font-weight: 400;
    font-size: var(--text-xs);
    line-height: 1rem;
    padding-top: 4px;
}

.input-error-message[b-m201p506m8] {
    display: block;
    color: var(--destructive);
    font-weight: 400;
    font-size: var(--text-xs);
    line-height: 1rem;
}

.input-invalid:focus-visible[b-m201p506m8] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 25%, transparent);
}

.validation-message-container[b-m201p506m8] {
    min-height: 1rem;
}

.input:disabled[b-m201p506m8] { cursor: not-allowed; opacity: 0.5; }
/* /Components/UI/Input/InputGroup.razor.rz.scp.css */
.input-group[b-6kxjqr43mo] {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.input-group-control[b-6kxjqr43mo] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

.input-group-control[b-6kxjqr43mo]  .input {
    flex: 1;
    border-radius: 0;
}

.input-group-control[b-6kxjqr43mo]  .input-container {
    width: 100%;
    min-width: 0;
}

.input-group-control[b-6kxjqr43mo]  .input-container .input {
    border-radius: 0;
}

.input-group:not(.has-prefix):not(.has-suffix)[b-6kxjqr43mo]  .input-container .input {
    border-radius: var(--radius, 0.625rem);
}

.input-group.has-prefix:not(.has-suffix)[b-6kxjqr43mo]  .input-container .input {
    border-radius: 0 var(--radius, 0.625rem) var(--radius, 0.625rem) 0;
}

.input-group:not(.has-prefix).has-suffix[b-6kxjqr43mo]  .input-container .input {
    border-radius: var(--radius, 0.625rem) 0 0 var(--radius, 0.625rem);
}

.input-group-prefix[b-6kxjqr43mo],
.input-group-suffix[b-6kxjqr43mo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 2.25rem;
    min-width: 2.5rem;
    border: 1px solid var(--border);
    background: var(--muted);
    color: var(--muted-foreground, #737373);
    padding: 0 0.5rem;
    font-size: var(--text-sm);
    white-space: nowrap;
}

.input-group-prefix[b-6kxjqr43mo] { border-right: 0; border-radius: var(--radius, 0.625rem) 0 0 var(--radius, 0.625rem); }
.input-group-suffix[b-6kxjqr43mo] { border-left: 0; border-radius: 0 var(--radius, 0.625rem) var(--radius, 0.625rem) 0; }

.input-group-warning-message[b-6kxjqr43mo] {
    min-height: 1rem;
    color: var(--warning);
    font-weight: 400;
    font-size: var(--text-xs);
    line-height: 1rem;
}

.input-group-error-message[b-6kxjqr43mo] {
    min-height: 1rem;
    color: var(--destructive);
    font-weight: 400;
    font-size: var(--text-xs);
    line-height: 1rem;
}
/* /Components/UI/ListSkeleton/ListSkeleton.razor.rz.scp.css */
.list-skeleton[b-q5w49pn0hg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.list-skeleton-mobile[b-q5w49pn0hg] {
    gap: 1rem;
}
/* /Components/UI/LoadError/LoadError.razor.rz.scp.css */
.load-error[b-wjym75npw7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--muted-foreground);
}

.load-error p[b-wjym75npw7] {
    margin: 0;
}
/* /Components/UI/Modal/ConfirmModal.razor.rz.scp.css */
.confirm-modal-text[b-5bjfn8jaku] {
    margin: 0;
}

.confirm-modal-actions[b-5bjfn8jaku] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Phone: the buttons stack full width, the primary on top (the app.css .modal-footer-content rule). */
@media (max-width: 480px) {
    .confirm-modal-actions[b-5bjfn8jaku] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .confirm-modal-actions[b-5bjfn8jaku]  .btn {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/UI/Modal/Modal.razor.rz.scp.css */
/* Uses the same shadcn/ui-style CSS variable tokens as Dropdown/Button
   (--background, --foreground, --border, --accent, --radius, --muted-foreground, ...). */

.modal-wrapper[b-yx3vnsy64e] {
    position: fixed;
    inset: 0;
}

.modal-wrapper--blocking[b-yx3vnsy64e] {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    /* On a touch screen modal.js sets the two properties to the visible area above the keyboard; without them this is the
       full-screen box of `inset: 0`. */
    top: var(--modal-viewport-top, 0);
    bottom: auto;
    height: var(--modal-viewport-height, 100%);
}

/* Draggable/minimisable modals: the wrapper is just a positioning root, not a click-catching
   overlay — pointer-events are re-enabled only on the panel itself below, so the rest of the
   page stays fully interactive. */
.modal-wrapper--floating[b-yx3vnsy64e] {
    pointer-events: none;
}

/* Hides the whole modal without unmounting it — DynamicComponent (and its state) stays alive
   in the DOM, it's just not visible or interactive. This is what makes minimise/restore
   preserve the modal's internal state. */
.modal-wrapper--minimised[b-yx3vnsy64e] {
    display: none;
}

.modal-backdrop[b-yx3vnsy64e] {
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.modal-panel[b-yx3vnsy64e] {
    display: flex;
    flex-direction: column;
    width: 28rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 3rem);
    background-color: var(--primary-foreground);
    color: var(--primary);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius, 0.5rem);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    pointer-events: auto;
    animation: modal-in-b-yx3vnsy64e var(--motion-base) var(--ease-out) backwards;
    z-index: 3000;
}

/* A blocking panel is where focus lands when the modal opens (modal.js): a landing place, not a control, so no ring. */
.modal-panel:focus[b-yx3vnsy64e] {
    outline: none;
}

.modal-wrapper--blocking .modal-panel[b-yx3vnsy64e] {
    max-height: calc(var(--modal-viewport-height, 100vh) - 3rem);
}

/* Fills the dynamic viewport; the body is a flex column so its content can fill what the header and footer leave. */
.modal-panel--fullscreen[b-yx3vnsy64e] {
    width: 100dvw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
}

/* After the rule above (equal specificity): a full-screen panel has no max-height, only the visible area's height. */
.modal-wrapper--blocking .modal-panel--fullscreen[b-yx3vnsy64e] {
    height: var(--modal-viewport-height, 100dvh);
    max-height: none;
}

.modal-panel--fullscreen .modal-body[b-yx3vnsy64e] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    --modal-body-padding-block: 0.75rem;
    --modal-body-padding-inline: 1rem;
    padding: var(--modal-body-padding-block) var(--modal-body-padding-inline);
}

.modal-panel--fullscreen .modal-header[b-yx3vnsy64e],
.modal-panel--fullscreen .modal-footer[b-yx3vnsy64e] {
    padding: 0.75rem 1rem;
}

.modal-panel--floating[b-yx3vnsy64e] {
    position: fixed;
    top: 6rem;
    left: 50%;
    /* Initial centering only. dropdown.js-style drag script switches this element to explicit
       inline left/top + transform:none on first drag — see initDraggable in modal.js. */
    transform: translateX(-50%);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15);
    animation: modal-fade-in-b-yx3vnsy64e var(--motion-base) var(--ease-out) backwards;
}

/* The panel's enter (the base tier: a fade, a 4 px rise, a 0.97 scale). `backwards`, never `both`: a transform left on the
   panel would make it the containing block of every `position: fixed` popover inside it (QD-M5). */
@keyframes modal-in-b-yx3vnsy64e {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* The floating panel's `transform: translateX(-50%)` centres it, so a transform keyframe would fight it: opacity only. */
@keyframes modal-fade-in-b-yx3vnsy64e {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-header[b-yx3vnsy64e] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-colour);
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.modal-header--draggable[b-yx3vnsy64e] {
    cursor: grab;
    user-select: none;
}

.modal-header--draggable:active[b-yx3vnsy64e] {
    cursor: grabbing;
}

.modal-header-icon[b-yx3vnsy64e] {
    display: inline-flex;
    margin-top: 0.25rem;
}

.modal-header-icon[b-yx3vnsy64e]  svg {
    width: 1.125rem;
    height: 1.125rem;
}

.title-container[b-yx3vnsy64e] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* T-17: a title wraps (X4) so a long one is read whole; only with the keyboard up does the header keep one line (M3, below). The
   record the modal is about goes in the subtitle, which is one line with an ellipsis and a title attribute (X2). */
.modal-header-title[b-yx3vnsy64e] {
    flex: 1;
    overflow-wrap: anywhere;
    font-size: 1.25rem;
}

.modal-header-subtitle[b-yx3vnsy64e] {
    font-weight: normal;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-header-actions[b-yx3vnsy64e] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* On touch (T-19) the ✕ and minimise buttons keep their 28 px box and get a 44 px hit area (.touch-target); two side by side
   need 16 px between them so the areas don't overlap. */
@media (pointer: coarse) {
    .modal-header-actions[b-yx3vnsy64e] {
        gap: 1rem;
    }
}

.modal-icon-button[b-yx3vnsy64e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    background: transparent;
    border-radius: calc(var(--radius, 0.5rem) - 0.25rem);
    color: var(--muted-foreground, #71717a);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .modal-icon-button:hover[b-yx3vnsy64e] {
        background-color: var(--accent);
        color: var(--primary-hover, #18181b);
    }
}

.modal-icon-button:active[b-yx3vnsy64e] {
    background-color: var(--pressed);
    color: var(--primary-hover, #18181b);
}

.modal-icon-button:focus-visible[b-yx3vnsy64e] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.modal-minimise-glyph[b-yx3vnsy64e] {
    display: inline-block;
    width: 0.65rem;
    height: 0.125rem;
    background-color: currentColor;
    margin-top: 0.6rem;
}

/* flex-grow (QD-W2, D1): while modal.js's size ease holds the panel taller than its new content (a shrink), the body takes
   the extra height, so the footer rides the panel's bottom edge instead of jumping up first. At rest the panel's height is
   auto (or capped by max-height), so the body has nothing to grow into. */
.modal-body[b-yx3vnsy64e] {
    --modal-body-padding-block: 1.5rem;
    --modal-body-padding-inline: 1.5rem;
    padding: var(--modal-body-padding-block) var(--modal-body-padding-inline);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* Touch screens: most modals end their body with their buttons (.modal-footer-content, app.css) rather than the footer slot,
   so with the keyboard up they would sit below the fold of the body's scroll. They stick to the bottom of the scrolling body
   instead, over the fields, spanning the body's full width and over its bottom padding (so the row at rest looks like the
   .modal-footer: a top border, the panel's colour). The body keeps room for the row when it scrolls a focused field into view
   (the default below; modal.js sets the measured height when the keyboard opens, since two modals stack their buttons).
   A mouse keeps the plain row at the end of the content. `.modal-body` is raw HTML in Modal.razor, the ::deep anchor. */
@media (pointer: coarse) {
    .modal-body[b-yx3vnsy64e] {
        scroll-padding-bottom: 5rem;
    }

    .modal-body[b-yx3vnsy64e]  .modal-footer-content {
        position: sticky;
        /* Sticky measures from the body's content box, inside its padding: pull the row down over the padding. */
        bottom: calc(-1 * var(--modal-body-padding-block));
        z-index: 2;
        margin: 0.75rem calc(-1 * var(--modal-body-padding-inline)) calc(-1 * var(--modal-body-padding-block));
        padding: 0.75rem var(--modal-body-padding-inline) var(--modal-body-padding-block);
        background-color: var(--primary-foreground);
        border-top: 1px solid var(--border-colour);
    }
}

/* While modal.js eases the panel's size (QD-W2: data-modal-easing on the body, removed when the ease ends), a growing panel
   keeps the body's button row on its bottom edge, as it does the footer slot: the row sticks to the bottom of the visible
   body (a touch screen's row above already sticks), and its background, with a shadow over the body's bottom padding, hides
   the content still clipped under it. Where it sits is where it rests, so nothing moves when the attribute goes. A shrink
   moves the row in modal.js. */
@media not all and (pointer: coarse) {
    .modal-body[data-modal-easing][b-yx3vnsy64e]  .modal-footer-content {
        position: sticky;
        bottom: 0;
        z-index: 2;
        background-color: var(--primary-foreground);
        box-shadow: 0 var(--modal-body-padding-block) 0 0 var(--primary-foreground);
    }
}

/* D1 (Plans/Plan - Wizard Step Transition.md): a modal that asks for it (the Quick Actions wizard) hangs from the top on the
   phone layout, so its header and stepper stay put while the panel eases to a new height; the bottom margin at full
   height stays the same (max-height leaves 3rem). Declared before the keyboard rules, which win with the keyboard up
   (their selectors are more specific: the root's class plus the wrapper's), and so do the compact frame's. */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .modal-wrapper--anchor-top[b-yx3vnsy64e] {
        align-items: flex-start;
    }

    .modal-wrapper--anchor-top .modal-panel[b-yx3vnsy64e] {
        margin-top: 1.5rem;
    }
}

/* The keyboard is up (modal.js puts modal-keyboard-open on the root, touch screens only): the panel hangs from the top of the
   area above the keyboard instead of being centred in it, its header keeps only the title, and the buttons share one slim
   row, so the fields keep most of that area (Plans/Plan - Phone Keyboard and Landscape.md, D5: in portrait, a four-line
   subtitle and three stacked buttons left nothing). A label too long for a third of the row wraps inside its button. */
:root.modal-keyboard-open .modal-wrapper--blocking[b-yx3vnsy64e] {
    align-items: flex-start;
}

:root.modal-keyboard-open .modal-wrapper--blocking .modal-panel[b-yx3vnsy64e] {
    margin-top: 0.5rem;
    max-height: calc(var(--modal-viewport-height, 100vh) - 1rem);
}

:root.modal-keyboard-open .modal-header[b-yx3vnsy64e] {
    padding-block: 0.75rem;
}

:root.modal-keyboard-open .modal-header-subtitle[b-yx3vnsy64e] {
    display: none;
}

:root.modal-keyboard-open .modal-header-title[b-yx3vnsy64e] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The footer slot (the Quick Actions wizard's buttons, and the slot rows below) slims down the same way: in the compact frame
   to the body row's 0.125rem, so a 1.75rem row is 33 px with its border (L-18). The wizard lays its own row out itself. */
:root.modal-keyboard-open .modal-footer[b-yx3vnsy64e] {
    padding-block: 0.5rem;
}

:root.modal-keyboard-compact .modal-footer[b-yx3vnsy64e] {
    padding: 0.125rem 1rem;
}

:root.modal-keyboard-open .modal-body[b-yx3vnsy64e]  .modal-footer-content {
    padding-block: 0.5rem;
}

/* T-20 (Plans/Plan - Mobile UI Components.md, T2): the body's row and the footer slot's row (Cambiar estado, Reprogramar,
   Nota rápida: their buttons in a .modal-footer-content inside ModalFooter) get the same slim row; the slot keeps its own
   padding above. `.modal-footer` is raw HTML in Modal.razor, the ::deep anchor for the slot. */
:root.modal-keyboard-open .modal-body[b-yx3vnsy64e]  .modal-footer-content,
:root.modal-keyboard-open .modal-footer[b-yx3vnsy64e]  .modal-footer-content {
    flex-direction: row;
    align-items: stretch;
}

:root.modal-keyboard-open .modal-body[b-yx3vnsy64e]  .modal-footer-content > *,
:root.modal-keyboard-open .modal-footer[b-yx3vnsy64e]  .modal-footer-content > * {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

:root.modal-keyboard-open .modal-body[b-yx3vnsy64e]  .modal-footer-content .btn,
:root.modal-keyboard-open .modal-footer[b-yx3vnsy64e]  .modal-footer-content .btn {
    height: auto;
    min-height: 2.25rem;
    padding-inline: 0.5rem;
    white-space: normal;
}

/* Q4 (c): no Cancel in the slim row. While the keyboard is up the row keeps the main button(s) ("Agregar otro" and the
   primary, or the primary alone), so two labels fit a 360 px row and one fits the landscape frame; ✕ and Back still
   cancel, asking first when there are changes (ModalContext). With the keyboard down the footer is as before, Cancel last. */
:root.modal-keyboard-open .modal-body[b-yx3vnsy64e]  .modal-footer-content .modal-cancel,
:root.modal-keyboard-open .modal-footer[b-yx3vnsy64e]  .modal-footer-content .modal-cancel {
    display: none;
}

/* The area above the keyboard is short (a phone in landscape: ~96 px), D1: the panel fills it edge to edge, with no header,
   and the focused field (scrolled to the body's top by modal.js) sits over one slim row of buttons. min-width, not width:
   a modal's Width option is an inline style. */
:root.modal-keyboard-compact .modal-wrapper--blocking .modal-panel[b-yx3vnsy64e] {
    min-width: 100%;
    height: var(--modal-viewport-height, 100dvh);
    max-height: none;
    margin-top: 0;
    border: 0;
    border-radius: 0;
}

:root.modal-keyboard-compact .modal-header[b-yx3vnsy64e] {
    display: none;
}

/* The row is as slim as the 96 px allow next to a label and its input: 1.75rem buttons. */
:root.modal-keyboard-compact .modal-body[b-yx3vnsy64e] {
    --modal-body-padding-block: 0.25rem;
    --modal-body-padding-inline: 1rem;
}

:root.modal-keyboard-compact .modal-body[b-yx3vnsy64e]  .modal-footer-content {
    margin-top: 0.25rem;
    padding-block: 0.125rem;
}

:root.modal-keyboard-compact .modal-body[b-yx3vnsy64e]  .modal-footer-content,
:root.modal-keyboard-compact .modal-footer[b-yx3vnsy64e]  .modal-footer-content {
    justify-content: flex-end;
}

:root.modal-keyboard-compact .modal-body[b-yx3vnsy64e]  .modal-footer-content > *,
:root.modal-keyboard-compact .modal-footer[b-yx3vnsy64e]  .modal-footer-content > * {
    flex: 0 0 auto;
}

:root.modal-keyboard-compact .modal-body[b-yx3vnsy64e]  .modal-footer-content .btn,
:root.modal-keyboard-compact .modal-footer[b-yx3vnsy64e]  .modal-footer-content .btn {
    min-height: 1.75rem;
    white-space: nowrap;
}

.modal-footer[b-yx3vnsy64e] {
    border-top: 1px solid var(--border-colour);
    padding: 1.5rem;
    overflow-y: visible;
    flex-shrink: 0;
}

/* A slot row its content marks modal-footer-compact-hide has nothing to offer while typing in the compact frame (Nota
   rápida's picker step: Cancelar hidden, Guardar nota disabled until a record is picked): the slot steps aside, so the
   search and its results get the whole ~96 px (T-120, L-1b). */
:root.modal-keyboard-compact .modal-footer:has(.modal-footer-compact-hide)[b-yx3vnsy64e] {
    display: none;
}

/* A row in the footer slot sits in the slot's padding: no gap above it (app.css gives a body's row 0.75rem). */
.modal-footer[b-yx3vnsy64e]  .modal-footer-content {
    margin-top: 0;
}

/* Backdrop fade-in, and the short exit once the modal is closed (ModalService removes it after --motion-fast). The result
   has already been delivered, so nothing in a closing modal takes clicks. */
.modal-backdrop[b-yx3vnsy64e] {
    animation: modal-backdrop-in-b-yx3vnsy64e var(--motion-base) var(--ease-out) backwards;
}

@keyframes modal-backdrop-in-b-yx3vnsy64e {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-wrapper--closing[b-yx3vnsy64e],
.modal-wrapper--closing .modal-backdrop[b-yx3vnsy64e],
.modal-wrapper--closing .modal-panel[b-yx3vnsy64e] {
    pointer-events: none;
}

.modal-wrapper--closing .modal-backdrop[b-yx3vnsy64e] {
    animation: modal-backdrop-out-b-yx3vnsy64e var(--motion-fast) var(--ease-in) forwards;
}

.modal-wrapper--closing .modal-panel[b-yx3vnsy64e] {
    animation: modal-panel-out-b-yx3vnsy64e var(--motion-fast) var(--ease-in) forwards;
}

@keyframes modal-backdrop-out-b-yx3vnsy64e {
    to {
        opacity: 0;
    }
}

@keyframes modal-panel-out-b-yx3vnsy64e {
    to {
        opacity: 0;
        transform: scale(0.98);
    }
}
/* /Components/UI/Modal/ModalHost.razor.rz.scp.css */
.modal-tray[b-91a1p9aefu] {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    z-index: 2000;
}

.modal-tray-item[b-91a1p9aefu] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--primary-foreground);
    color: var(--primary);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius, 0.5rem);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .modal-tray-item:hover[b-91a1p9aefu] {
        background-color: var(--accent);
    }
}

.modal-tray-item:active[b-91a1p9aefu] {
    background-color: var(--pressed);
}

/* A row inside the tray: the ring is drawn inside, over the item's own shadow. */
.modal-tray-item:focus-visible[b-91a1p9aefu] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

.modal-tray-icon[b-91a1p9aefu]  svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .modal-tray[b-91a1p9aefu] {
    left: 1rem;}
}
/* /Components/UI/Pagination/Pagination.razor.rz.scp.css */
.pagination[b-ppspcd3rlb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.pagination-summary[b-ppspcd3rlb] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.pagination-pages[b-ppspcd3rlb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-nav[b-ppspcd3rlb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .pagination-nav:hover:not(:disabled)[b-ppspcd3rlb] {
        background-color: var(--accent);
    }
}

.pagination-nav:active:not(:disabled)[b-ppspcd3rlb] {
    background-color: var(--pressed);
}

.pagination-nav:focus-visible[b-ppspcd3rlb],
.pagination-page:focus-visible[b-ppspcd3rlb] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.pagination-nav:disabled[b-ppspcd3rlb] {
    color: var(--muted-foreground);
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination-page[b-ppspcd3rlb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background-color: transparent;
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .pagination-page:hover:not(.pagination-page-active)[b-ppspcd3rlb] {
        background-color: var(--accent);
    }
}

.pagination-page:active:not(.pagination-page-active)[b-ppspcd3rlb] {
    background-color: var(--pressed);
}

.pagination-page-active[b-ppspcd3rlb] {
    border-color: var(--border-colour);
    background-color: var(--primary-foreground);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
    font-weight: 600;
    cursor: default;
}

.pagination-ellipsis[b-ppspcd3rlb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 2.25rem;
    color: var(--muted-foreground);
}

.pagination-size[b-ppspcd3rlb] {
    width: 5rem;
    flex: 0 0 auto;
}

/* The page-size select sits at the bottom of a list, so its own dropdown
   has no room to open downward. Open it above the control instead of
   letting the customizable picker overflow the viewport (Chromium 135+). */
@supports (appearance: base-select) {
    .pagination-size[b-ppspcd3rlb]  .select::picker(select) {
        position-area: block-start span-inline-end;
    }
}

.pagination-compact[b-ppspcd3rlb] {
    justify-content: space-between;
    gap: 0.5rem;
}

.pagination-compact .pagination-nav[b-ppspcd3rlb] {
    flex: 0 0 auto;
}

.pagination-compact-label[b-ppspcd3rlb] {
    flex: 1 1 auto;
    text-align: center;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    white-space: nowrap;
}

@media (width <= 30rem) {
    .pagination:not(.pagination-compact)[b-ppspcd3rlb] {
        justify-content: center;
        text-align: center;
    }

    .pagination:not(.pagination-compact) .pagination-summary[b-ppspcd3rlb] {
        width: 100%;
        text-align: center;
    }
}
/* /Components/UI/PasswordInput/PasswordInput.razor.rz.scp.css */
.password-input[b-7bsixu6zgp] {
    position: relative;
}

.password-input-toggle[b-7bsixu6zgp] {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    border-radius: var(--radius);
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .password-input-toggle:hover[b-7bsixu6zgp] {
        color: var(--primary);
    }
}

.password-input-toggle:active[b-7bsixu6zgp] {
    color: var(--primary);
}

.password-input-toggle:focus-visible[b-7bsixu6zgp] {
    box-shadow: var(--focus-ring);
    outline: none;
}

.password-input-toggle:disabled[b-7bsixu6zgp] {
    cursor: not-allowed;
    opacity: 0.5;
}
/* /Components/UI/SaveIndicator/SaveIndicator.razor.rz.scp.css */
/* Inline: it takes room only while it shows something. */
.save-indicator[b-xyyttoat9u] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-width: 0;
    font-size: var(--text-xs);
    line-height: 1rem;
    color: var(--muted-foreground);
}

/* A flex box, not an inline span: an inline line box would add the font's descender under the line. */
.save-indicator-status[b-xyyttoat9u] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

/* Empty, the status root stays in the accessibility tree (a live region that appears together with its text isn't
   announced), but takes no room: out of the flow, 0 x 0. */
.save-indicator-empty[b-xyyttoat9u] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.save-indicator-line[b-xyyttoat9u] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    opacity: 1;
    animation: save-indicator-in-b-xyyttoat9u var(--motion-base) var(--ease-out) backwards;
}

/* A long action's progress text wraps on its line rather than being cut (X6). */
.save-indicator-pending[b-xyyttoat9u] {
    white-space: normal;
}

.save-indicator-saved[b-xyyttoat9u] {
    color: var(--success);
}

/* The exit is quicker than the enter, easing in (QD-M2); SaveIndicator.FadeMs matches it. */
.save-indicator-leaving[b-xyyttoat9u] {
    opacity: 0;
    transition: opacity var(--motion-fast) var(--ease-in);
}

.save-indicator-line[b-xyyttoat9u]  .save-indicator-icon {
    flex: 0 0 auto;
}

/* The failure wraps as running text; its Try again never breaks. */
.save-indicator-failed[b-xyyttoat9u] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    min-width: 0;
    color: var(--destructive);
    font-weight: 500;
}

.save-indicator-retry[b-xyyttoat9u] {
    -webkit-tap-highlight-color: transparent;
    min-height: 1.75rem;
    padding: 0 0.25rem;
    border: none;
    border-radius: calc(var(--radius) - 0.25rem);
    background: none;
    color: var(--destructive);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
    cursor: pointer;
}

.save-indicator-retry:focus-visible[b-xyyttoat9u] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.save-indicator-retry:active[b-xyyttoat9u] {
    background: var(--pressed);
}

@media (hover: hover) {
    .save-indicator-retry:hover[b-xyyttoat9u] {
        text-decoration-thickness: 2px;
    }
}

@keyframes save-indicator-in-b-xyyttoat9u {
    from {
        opacity: 0;
    }
}
/* /Components/UI/Select/Select.razor.rz.scp.css */
/* min-height, not height: Chromium's customizable select (below) wraps a label longer than the field instead of ending it
   in an ellipsis, and at 16px on touch ("Hora de Argentina (Buenos Aires)" at 360px) the box must grow to hold it. */
.select[b-k2864sqjxf] {
    display: flex;
    width: 100%;
    min-height: 2.25rem;
    min-width: 0;
    appearance: none;
    border: 1px solid var(--input);
    border-radius: var(--radius, 0.625rem);
    background-color: var(--background);
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23737373%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 class=%22icon icon-tabler icons-tabler-outline icon-tabler-chevron-down%22%3E%3Cpath stroke=%22none%22 d=%22M0 0h24v24H0z%22 fill=%22none%22 /%3E%3Cpath d=%22M6 9l6 6l6 -6%22 /%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    color: var(--foreground, #0a0a0a);
    font: inherit;
    font-size: var(--text-input);
    line-height: 1.25rem;
    outline: none;
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.select:focus-visible[b-k2864sqjxf] {
    border-color: var(--ring);
    box-shadow: var(--field-focus-ring);
}

@media (hover: hover) {
    .select:hover:not(:disabled):not(:focus-visible):not(.select-invalid)[b-k2864sqjxf] {
        border-color: var(--input-hover);
    }
}

.select-placeholder[b-k2864sqjxf] { color: var(--muted-foreground, #737373); }

.select-invalid[b-k2864sqjxf] { border-color: var(--destructive); }

.select-invalid:focus-visible[b-k2864sqjxf] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 25%, transparent);
}

.validation-message-container[b-k2864sqjxf] {
    min-height: 1rem;
}

.select:disabled[b-k2864sqjxf] { cursor: not-allowed; opacity: 0.5; }

/* Customizable select picker (Chromium 135+, with the native fallback above elsewhere). */
@supports (appearance: base-select) {
    .select[b-k2864sqjxf],
    .select[b-k2864sqjxf]::picker(select) {
        appearance: base-select;
    }
    
    .select[b-k2864sqjxf] {
        background-image: none;
        padding-right: 0.75rem;
    }

    .select[b-k2864sqjxf]::picker-icon {
        align-self: center;
        width: 1rem;
        height: 1rem;
        margin-block: auto;
        background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23737373%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 class=%22icon icon-tabler icons-tabler-outline icon-tabler-chevron-down%22%3E%3Cpath stroke=%22none%22 d=%22M0 0h24v24H0z%22 fill=%22none%22 /%3E%3Cpath d=%22M6 9l6 6l6 -6%22 /%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        color: transparent;
    }

    .select[b-k2864sqjxf]::picker(select) {
        /* The picker is rendered in the top layer, so a scroll area shorter than the list never clips it. It opens below
           the control, flips above it when there is more room there (a field low on the screen), and is capped at 22rem
           or the room it has (100% is the space of the side it opened on) and scrolls inside itself: with `overflow: hidden` and no fallback, a
           list of thirty categories at 16px on touch (~1,100px) ran off the screen and its last options couldn't be
           reached on Android (S1o item 8). */
        position-area: block-end span-inline-end;
        position-try-order: most-block-size;
        position-try-fallbacks: flip-block;
        max-block-size: min(22rem, 100%);
        overflow-y: auto;
        overscroll-behavior: contain;
        margin-block: 0.25rem;
        border: 1px solid var(--border);
        border-radius: var(--radius, 0.625rem);
        background: var(--background);
        padding: 0.25rem;
        color: var(--foreground, #0a0a0a);
        box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
    }

    /* The options are the caller's ChildContent (they carry the caller's scope, not this file's), so every option rule goes
       through ::deep from the raw <select> in Select.razor: `.select[b-…] option`. */
    .select[b-k2864sqjxf]  option {
        border-radius: calc(var(--radius, 0.625rem) - 0.25rem);
        padding: 0.5rem 0.75rem;
        font: inherit;
        font-size: var(--text-input);
    }

    /* Touch (T-27): an option row is 44 px tall (a native picker, an older Chrome or Samsung Internet, ignores this). */
    @media (pointer: coarse) {
        .select[b-k2864sqjxf]  option {
            min-height: 2.75rem;
        }
    }

    @media (hover: hover) {
        .select[b-k2864sqjxf]  option:hover {
            background-color: var(--off-white) !important;
            color: var(--foreground, #0a0a0a);
            border-radius: var(--radius);
        }
    }

    .select[b-k2864sqjxf]  option:focus-visible {
        background-color: var(--off-white) !important;
        color: var(--foreground, #0a0a0a);
        border-radius: var(--radius);
    }

    .select[b-k2864sqjxf]  option:checked {
        background: var(--off-white);
        color: var(--foreground, #0a0a0a);
        font-weight: 500;
    }

    .select[b-k2864sqjxf]  option::checkmark { color: var(--foreground, #0a0a0a); }
}
/* /Components/UI/Stat/StatCard.razor.rz.scp.css */
.stat-card-scope[b-8uofarqi04] {
    display: contents;
}

.stat-card-scope[b-8uofarqi04]  .stat-card {
    height: 100%;
}

.stat-card-scope[b-8uofarqi04]  .stat-card-clickable {
    cursor: pointer;
}

.stat-card-scope[b-8uofarqi04]  .stat-card-clickable:focus-visible {
    /* An outline, not the shared box-shadow ring: the selected card's own ring is a box-shadow. */
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.stat-card-scope[b-8uofarqi04]  .stat-card-active {
    box-shadow: 0 0 0 2px var(--primary);
}

/* CardHeader/CardTitle render their own markup in Card's component tree, not StatCard's;
   ::deep here is anchored at .stat-card-scope (a real element in this component's own
   scope that wraps the whole Card) so it actually reaches CardHeader's/CardTitle's elements. */
.stat-card-scope[b-8uofarqi04]  .stat-card-header {
    padding-bottom: 0;
}

.stat-card-scope[b-8uofarqi04]  .stat-card-title {
    color: var(--muted-foreground);
    font-weight: 500;
    white-space: normal;
}

.stat-card-scope[b-8uofarqi04]  .stat-card-footer {
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.3;
}

/* A muted badge so the icon isn't sitting directly on the card's white background. Stays top-right of the card, in
   line with the label (card-title-with-icon puts the label and this badge at opposite ends of the header row). This
   div is literally written in StatCard.razor (inside CardTitle's child content), so it gets this component's scope
   attribute directly - no ::deep needed for its own styling. */
.stat-card-icon-badge[b-8uofarqi04] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
    color: var(--primary);
}

/* A figure is never truncated or wrapped: the type steps down from 2.25rem as the figure gets longer than the card can
   hold (--chars is its length; about 0.55em per character, punctuation included). The card's content is the container. */
.stat-card-scope[b-8uofarqi04]  .stat-card-content {
    container-type: inline-size;
}

.stat-card-value[b-8uofarqi04] {
    font-weight: 700;
    font-size: clamp(1rem, calc(100cqw / (var(--chars, 1) * 0.55)), 2.25rem);
    white-space: nowrap;
}

.stat-card-value-warning[b-8uofarqi04] {
    color: var(--destructive);
}

.stat-card-value-success[b-8uofarqi04] {
    color: var(--success);
}

.stat-card-scope[b-8uofarqi04]  .stat-card-footer-warning {
    color: var(--destructive);
    font-weight: 600;
}
/* /Components/UI/Stat/StatGroup.razor.rz.scp.css */
.stat-group-scope[b-wf3nzkc2u2] {
    display: contents;
}

.stat-group-scope[b-wf3nzkc2u2]  .stat-group-mobile-header {
    align-items: center;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
}

.stat-group-scope[b-wf3nzkc2u2]  .stat-group-chevron-collapsed {
    transform: rotate(-90deg);
    transition: transform var(--motion-fast) var(--ease-out);
}

.stat-group-collapse[b-wf3nzkc2u2] {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows var(--motion-base) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}

.stat-group-collapse-collapsed[b-wf3nzkc2u2] {
    grid-template-rows: 0fr;
    opacity: 0;
}

.stat-group-collapse-inner[b-wf3nzkc2u2] {
    min-height: 0;
    overflow: hidden;
}

.stat-group-desktop[b-wf3nzkc2u2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (width >= 1300px) {
    .stat-group-desktop[b-wf3nzkc2u2] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.stat-group-mobile-grid[b-wf3nzkc2u2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
/* /Components/UI/Stat/StatTile.razor.rz.scp.css */
.stat-tile[b-8e0ltm9obs] {
    /* The value sizes itself from the tile's width (see .stat-tile-value). */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
    width: 100%;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--off-white);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.stat-tile[b-8e0ltm9obs] {
    -webkit-tap-highlight-color: transparent;
}

.stat-tile:active[b-8e0ltm9obs] {
    background-color: var(--pressed);
}

.stat-tile:focus-visible[b-8e0ltm9obs] {
    /* An outline, not the shared box-shadow ring: the selected tile's own ring is a box-shadow. */
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.stat-tile-active[b-8e0ltm9obs] {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.stat-tile-label[b-8e0ltm9obs] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Never wraps or truncates: the type steps down from 1.25rem as the figure gets longer than the tile can hold
   (--chars is its length; about 0.52em per character, punctuation included). */
.stat-tile-value[b-8e0ltm9obs] {
    font-weight: 600;
    font-size: clamp(0.8125rem, calc(100cqw / (var(--chars, 1) * 0.52)), 1.25rem);
    white-space: nowrap;
}
/* /Components/UI/Stepper/StepperView.razor.rz.scp.css */
/* Uses the same shadcn/ui-style CSS variable tokens as the other components
   (--background, --foreground, --border, --primary, --muted-foreground, ...). */

button[b-as2eoz7g07], input[b-as2eoz7g07], select[b-as2eoz7g07], textarea[b-as2eoz7g07] {
    font-family: inherit;
}

.stepper[b-as2eoz7g07] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Header layout: horizontal (default) --- */

.stepper--horizontal .stepper-header[b-as2eoz7g07] {
    display: flex;
    align-items: flex-start;
}

.stepper--horizontal .stepper-header-item[b-as2eoz7g07] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Connector sits behind the indicator (z-index below it) and stretches from the previous
   item's center to this one's, using the classic left:-50%; width:100%; flexbox-stepper trick. */
.stepper--horizontal .stepper-connector[b-as2eoz7g07] {
    position: absolute;
    top: 1rem;
    left: -30%;
    width: 60%;
    height: 1px;
    background-color: var(--border);
    z-index: 0;
    /* QD-W5: the connector fills at the micro tier, as the indicator does. */
    transition: background-color var(--motion-fast) var(--ease-out);
}

.stepper--horizontal .stepper-label[b-as2eoz7g07] {
    margin-top: 0.5rem;
}

/* --- Header layout: vertical --- */

.stepper--vertical .stepper-header[b-as2eoz7g07] {
    display: flex;
    flex-direction: column;
}

.stepper--vertical .stepper-header-item[b-as2eoz7g07] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 1.5rem;
}

.stepper--vertical .stepper-connector[b-as2eoz7g07] {
    position: absolute;
    left: 0.9375rem;
    top: -1.5rem;
    width: 2px;
    height: 1.5rem;
    background-color: var(--border);
    transition: background-color var(--motion-fast) var(--ease-out);
}

.stepper--vertical .stepper-label[b-as2eoz7g07] {
    margin-top: 0.125rem;
    text-align: left;
}

.stepper-connector--completed[b-as2eoz7g07] {
    background-color: var(--primary, #18181b);
}

/* --- Indicator (shared) --- */

.stepper-indicator[b-as2eoz7g07] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 2px solid var(--border-colour);
    background-color: var(--off-white);
    color: var(--muted-foreground, #71717a);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1rem;
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.stepper-indicator:disabled[b-as2eoz7g07] {
    cursor: default;
}

.stepper-indicator[b-as2eoz7g07]  svg {
    width: 1rem;
    height: 1rem;
}

.stepper-indicator--active[b-as2eoz7g07] {
    border-color: var(--primary, #18181b);
    background-color: var(--primary, #18181b);
    color: var(--primary-foreground, #fafafa);
}

.stepper-indicator--completed[b-as2eoz7g07] {
    border-color: var(--border-colour-darker);
    background-color: var(--border-colour);
    color: var(--primary-lighter);
}

.stepper-check[b-as2eoz7g07] {
    font-size: 0.9rem;
}

/* --- Labels (shared) --- */

.stepper-label[b-as2eoz7g07] {
    display: flex;
    flex-direction: column;
}

.stepper-title[b-as2eoz7g07] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--foreground, #0a0a0a);
}

.stepper-subtitle[b-as2eoz7g07] {
    font-size: 0.7rem;
    color: var(--muted-foreground, #71717a);
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape).
   A step's summary (the customer's name, the vehicle) is one line ending in an ellipsis (its title attribute holds the whole
   text); the step's title stays whole. The header item and the label may shrink below their text for that. */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .stepper--horizontal .stepper-header-item[b-as2eoz7g07] {
        min-width: 0;
    }

    .stepper-label[b-as2eoz7g07] {
        max-width: 100%;
        min-width: 0;
    }

    .stepper-subtitle[b-as2eoz7g07] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* --- Body / footer --- */

.stepper-body[b-as2eoz7g07] {
    min-height: 0;
    /* L1: the enter's 24 px move must never give the modal body or the page a sideways scroll position. The body itself
       never moves (only `.stepper-step` inside it does), so its `clip` cuts the move at its own edge, inside the modal
       body's padding. `clip` cuts the horizontal overflow without making the body a scroll container (vertical stays
       visible); the 4 px of padding, given back by the negative margin, keep a focused field's ring at the edge whole
       (overflow-clip-margin isn't available per axis everywhere). */
    overflow-x: clip;
    padding-inline: 4px;
    margin-inline: -4px;
}

/* The step's region takes focus after a change on touch or when it has no field (stepper.js): a region, not a control,
   so no ring after that programmatic focus. */
.stepper-body:focus[b-as2eoz7g07] {
    outline: none;
}

/* The shared step enter (QD-W1, T1): the new step fades in from the side it's going to, on the spatial tier. Two identical
   keyframes per direction: StepperView swaps the class between `a` and `b` on every change, so the animation restarts
   without remounting the step. The class sits on the inner `.stepper-step`, never on `.stepper-body`, whose clip must stay
   put to cut the move (L1). `backwards`, never `both`: the transform must not outlive the enter (QD-M5). No
   pointer-events change: the step takes taps from its first frame. Reduced motion: app.css's block. */
.stepper-step--enter-forward-a[b-as2eoz7g07] {
    animation: stepper-enter-forward-a-b-as2eoz7g07 var(--motion-spatial) var(--ease-out) backwards;
}

.stepper-step--enter-forward-b[b-as2eoz7g07] {
    animation: stepper-enter-forward-b-b-as2eoz7g07 var(--motion-spatial) var(--ease-out) backwards;
}

.stepper-step--enter-back-a[b-as2eoz7g07] {
    animation: stepper-enter-back-a-b-as2eoz7g07 var(--motion-spatial) var(--ease-out) backwards;
}

.stepper-step--enter-back-b[b-as2eoz7g07] {
    animation: stepper-enter-back-b-b-as2eoz7g07 var(--motion-spatial) var(--ease-out) backwards;
}

@keyframes stepper-enter-forward-a-b-as2eoz7g07 {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes stepper-enter-forward-b-b-as2eoz7g07 {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes stepper-enter-back-a-b-as2eoz7g07 {
    from { opacity: 0; transform: translateX(-24px); }
    to { opacity: 1; transform: none; }
}

@keyframes stepper-enter-back-b-b-as2eoz7g07 {
    from { opacity: 0; transform: translateX(-24px); }
    to { opacity: 1; transform: none; }
}

.stepper-footer[b-as2eoz7g07] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Focus and press (S1t.1): kept small and separate. A completed step is the only enabled one besides the active step. */
.stepper-indicator[b-as2eoz7g07] {
    -webkit-tap-highlight-color: transparent;
}

.stepper-indicator:focus-visible[b-as2eoz7g07] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.stepper-indicator--completed:active:not(:disabled)[b-as2eoz7g07] {
    background-color: var(--off-white-darker);
}
/* /Components/UI/SuggestInput/SuggestInput.razor.rz.scp.css */
.suggest-input[b-04l7v39jqg] {
    position: relative;
    width: 100%;
}

.suggest-input-field[b-04l7v39jqg] {
    display: flex;
    width: 100%;
    height: 2.25rem;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--input);
    border-radius: var(--radius, 0.625rem);
    background: var(--background);
    padding: 0.375rem 0.75rem;
    color: var(--foreground, #0a0a0a);
    font: inherit;
    font-size: var(--text-input);
    line-height: 1.25rem;
    outline: none;
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.suggest-input-field[b-04l7v39jqg]::placeholder { color: var(--muted-foreground, #737373); }

.suggest-input-field:focus-visible[b-04l7v39jqg] {
    border-color: var(--ring);
    box-shadow: var(--field-focus-ring);
}

@media (hover: hover) {
    .suggest-input-field:hover:not(:disabled):not(:focus-visible):not(.suggest-input-invalid)[b-04l7v39jqg] {
        border-color: var(--input-hover);
    }
}

.suggest-input-field:disabled[b-04l7v39jqg] {
    cursor: not-allowed;
    opacity: 0.5;
}

.suggest-input-invalid[b-04l7v39jqg] { border-color: var(--destructive); }

.suggest-input-invalid:focus-visible[b-04l7v39jqg] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 25%, transparent);
}

.validation-message-container[b-04l7v39jqg] {
    min-height: 1rem;
}

/* Placed and flipped by wwwroot/scripts/autocomplete.js (openResults), which adds autocomplete-flip-y. */
.suggest-content[b-04l7v39jqg] {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    width: auto;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--radius, 0.625rem);
    background: var(--popover);
    color: var(--popover-foreground);
    padding: 0.25rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    animation: suggest-in-b-04l7v39jqg var(--motion-base) var(--ease-out) backwards;
    /* T-120: capped at the room above the keyboard on the list's side, in whole rows (autocomplete.js); it scrolls inside. */
    max-height: var(--autocomplete-room, 100vh);
    overflow-y: auto;
}

/* Hidden until autocomplete.js has placed it (data-placed); see Autocomplete.razor.css. */
.suggest-content[data-awaiting-position]:not([data-placed])[b-04l7v39jqg] {
    visibility: hidden;
    animation: none;
}

.suggest-content.autocomplete-flip-y[b-04l7v39jqg] {
    top: auto;
    animation-name: suggest-in-up-b-04l7v39jqg;
}

.suggest-item[b-04l7v39jqg] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    border-radius: calc(var(--radius, 0.625rem) - 0.25rem);
    background: transparent;
    padding: 0.5rem 0.625rem;
    color: inherit;
    font: inherit;
    font-size: var(--text-sm);
    line-height: 1.25rem;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Touch (T-27): a list row is 44 px tall. */
@media (pointer: coarse) {
    .suggest-item[b-04l7v39jqg] {
        min-height: 2.75rem;
    }
}

@media (hover: hover) {
    .suggest-item:hover[b-04l7v39jqg] {
        background: var(--accent);
        color: var(--accent-foreground);
    }
}

.suggest-item.is-active[b-04l7v39jqg] {
    background: var(--accent);
    color: var(--accent-foreground);
}

.suggest-item:active[b-04l7v39jqg] {
    background: var(--pressed);
    color: var(--accent-foreground);
}

@keyframes suggest-in-b-04l7v39jqg {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes suggest-in-up-b-04l7v39jqg {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* /Components/UI/Table/Table.razor.rz.scp.css */
.table-container[b-gcnjvdwmou] {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    container-type: inline-size;
    container-name: table-container;
}

/* --table-min-* are set by Table.razor off mobile only: the fixed-width columns still visible in that container width band plus the
   free column's floor. The table then outgrows its container (which scrolls sideways) instead of squeezing the name column. */
.table[b-gcnjvdwmou] {
    width: 100%;
    min-width: var(--table-min-xxl, 0);
    table-layout: fixed;
    caption-side: bottom;
    border-collapse: collapse;
    color: var(--primary, #0a0a0a);
    font-size: var(--text-sm);
    line-height: 1.25rem;
}

.table[b-gcnjvdwmou]  .table-column-hide-at-xsmall,
.table[b-gcnjvdwmou]  .table-column-hide-at-small,
.table[b-gcnjvdwmou]  .table-column-hide-at-medium,
.table[b-gcnjvdwmou]  .table-column-hide-at-large,
.table[b-gcnjvdwmou]  .table-column-hide-at-xlarge {
    display: table-cell;
}

.table[b-gcnjvdwmou]  .table-column-right-align-at-xsmall,
.table[b-gcnjvdwmou]  .table-column-right-align-at-small,
.table[b-gcnjvdwmou]  .table-column-right-align-at-medium,
.table[b-gcnjvdwmou]  .table-column-right-align-at-large {
    text-align: left;
}

@container table-container (width <= 1100px) {
    .table[b-gcnjvdwmou] {
        min-width: var(--table-min-xl, 0);
    }
}

@container table-container (width <= 1024px) {
    .table[b-gcnjvdwmou] {
        min-width: var(--table-min-lg, 0);
    }
}

@container table-container (width <= 768px) {
    .table[b-gcnjvdwmou] {
        min-width: var(--table-min-md, 0);
    }
}

@container table-container (width <= 640px) {
    .table[b-gcnjvdwmou] {
        min-width: var(--table-min-sm, 0);
    }
}

@container table-container (width <= 480px) {
    .table[b-gcnjvdwmou] {
        min-width: var(--table-min-xs, 15rem);
    }

    .table[b-gcnjvdwmou]  .table-column-hide-at-xsmall {
        width: 0 !important;
        min-width: 0;
        max-width: 0;
        padding: 0 !important;
        border-width: 0;
        overflow: hidden;
        visibility: hidden;
    }

}

@container table-container (width <= 640px) {
    .table[b-gcnjvdwmou]  .table-column-hide-at-small {
        width: 0 !important;
        min-width: 0;
        max-width: 0;
        padding: 0 !important;
        border-width: 0;
        overflow: hidden;
        visibility: hidden;
    }

}

@container table-container (width <= 768px) {
    .table[b-gcnjvdwmou]  .table-column-hide-at-medium {
        width: 0 !important;
        min-width: 0;
        max-width: 0;
        padding: 0 !important;
        border-width: 0;
        overflow: hidden;
        visibility: hidden;
    }

}

@container table-container (width <= 1024px) {
    .table[b-gcnjvdwmou]  .table-column-hide-at-large {
        width: 0 !important;
        min-width: 0;
        max-width: 0;
        padding: 0 !important;
        border-width: 0;
        overflow: hidden;
        visibility: hidden;
    }

}

@container table-container (width <= 1100px) {
    .table[b-gcnjvdwmou]  .table-column-hide-at-xlarge {
        width: 0 !important;
        min-width: 0;
        max-width: 0;
        padding: 0 !important;
        border-width: 0;
        overflow: hidden;
        visibility: hidden;
    }

}

/* A second line under a cell's text that stands in for columns hidden at a small table width (e.g. "2 × $ 987.654,32" for
   the quantity and unit price): only shown while the table is that narrow. */
.table[b-gcnjvdwmou]  .table-show-at-small {
    display: none;
}

.table[b-gcnjvdwmou]  .table-subline {
    overflow: hidden;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The same for a column hidden at Large (a container up to 1024px). */
.table[b-gcnjvdwmou]  .table-show-at-large {
    display: none;
}

@container table-container (width <= 1024px) {
    .table[b-gcnjvdwmou]  .table-show-at-large {
        display: block;
    }
}

/* The same for a column hidden at Medium (a container up to 768px). */
.table[b-gcnjvdwmou]  .table-show-at-medium {
    display: none;
}

@container table-container (width <= 768px) {
    .table[b-gcnjvdwmou]  .table-show-at-medium {
        display: block;
    }
}

@container table-container (width <= 640px) {
    .table[b-gcnjvdwmou]  .table-show-at-small {
        display: block;
    }
}

.table[b-gcnjvdwmou]  .table-header {
    border-bottom: 1px solid var(--border-colour);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table[b-gcnjvdwmou]  .table-footer {
    border-top: 1px solid var(--border-colour);
    background: color-mix(in srgb, var(--accent) 50%, transparent);
    font-weight: 500;
}

.table[b-gcnjvdwmou]  .table-footer > tr:last-child {
    border-bottom: 0;
}

.table[b-gcnjvdwmou]  .table-row {
    border-bottom: 1px solid var(--border-colour);
    transition: background-color var(--motion-fast) var(--ease-out);
}

.table[b-gcnjvdwmou]  .table-body > .table-row:last-of-type,
.table[b-gcnjvdwmou]  .table-body > .table-row:last-of-type > .table-cell {
    border-bottom: 0 !important;
}

@media (hover: hover) {
    .table[b-gcnjvdwmou]  .table-row:hover {
        background: color-mix(in srgb, var(--accent) 50%, transparent);
    }
}

/* A clickable row presses like any row (touch has no hover). */
.table[b-gcnjvdwmou]  .table-row-link {
    -webkit-tap-highlight-color: transparent;
}

.table[b-gcnjvdwmou]  .table-row-link:active {
    background: var(--pressed);
}

.table[b-gcnjvdwmou]  .table-row[data-state="selected"] {
    background: var(--accent);
}

.table[b-gcnjvdwmou]  .table-head {
    height: 2.5rem;
    padding: 0 0.5rem;
    color: var(--primary);
    font-weight: 500;
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
    /* Headers wrap (two lines at most), never end in an ellipsis. */
    white-space: normal;
    line-height: 1.125rem;
}

/* The first column and the free-width one (no inline width) never wrap: their header stays on one line and clips (ellipsis) instead of
   stacking one character per line and making the header row tall. Other columns' headers wrap. */
.table[b-gcnjvdwmou]  .table-head:first-child,
.table[b-gcnjvdwmou]  .table-head:not([style*="width"]) {
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The header and the content of a hidden (zero-width) column must not wrap: their text would stack one character per line and make the whole
   row tall. */
@container table-container (width <= 480px) {
    .table[b-gcnjvdwmou]  .table-head.table-column-hide-at-xsmall,
    .table[b-gcnjvdwmou]  .table-column-hide-at-xsmall * {
        white-space: nowrap;
        overflow-wrap: normal;
    }
}

@container table-container (width <= 640px) {
    .table[b-gcnjvdwmou]  .table-head.table-column-hide-at-small,
    .table[b-gcnjvdwmou]  .table-column-hide-at-small * {
        white-space: nowrap;
        overflow-wrap: normal;
    }
}

@container table-container (width <= 768px) {
    .table[b-gcnjvdwmou]  .table-head.table-column-hide-at-medium,
    .table[b-gcnjvdwmou]  .table-column-hide-at-medium * {
        white-space: nowrap;
        overflow-wrap: normal;
    }
}

@container table-container (width <= 1024px) {
    .table[b-gcnjvdwmou]  .table-head.table-column-hide-at-large,
    .table[b-gcnjvdwmou]  .table-column-hide-at-large * {
        white-space: nowrap;
        overflow-wrap: normal;
    }
}

@container table-container (width <= 1100px) {
    .table[b-gcnjvdwmou]  .table-head.table-column-hide-at-xlarge,
    .table[b-gcnjvdwmou]  .table-column-hide-at-xlarge * {
        white-space: nowrap;
        overflow-wrap: normal;
    }
}

/* The sort button and its icon are rendered by TableHead, so they need ::deep from Table's own .table element. */
.table[b-gcnjvdwmou]  .table-head-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.table[b-gcnjvdwmou]  .table-head-sort:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 0.25rem;
}

.table[b-gcnjvdwmou]  .table-head-sort-icon {
    flex: 0 0 auto;
    color: var(--muted-foreground);
}

@media (hover: hover) {
    .table[b-gcnjvdwmou]  .table-head-sort:hover .table-head-sort-icon {
        color: var(--primary);
    }
}

.table[b-gcnjvdwmou]  .table-head-sort-active .table-head-sort-icon {
    color: var(--primary);
}

.table[b-gcnjvdwmou]  .table-cell {
    padding: 0.5rem;
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table[b-gcnjvdwmou]  .table-head-right-align,
.table[b-gcnjvdwmou]  .table-cell-right-align {
    text-align: right;
}

@container table-container (width <= 480px) {
    .table[b-gcnjvdwmou]  .table-column-right-align-at-xsmall {
        text-align: right;
    }
}

@container table-container (width <= 640px) {
    .table[b-gcnjvdwmou]  .table-column-right-align-at-small {
        text-align: right;
    }
}

@container table-container (width <= 768px) {
    .table[b-gcnjvdwmou]  .table-column-right-align-at-medium {
        text-align: right;
    }
}

@container table-container (width <= 1024px) {
    .table[b-gcnjvdwmou]  .table-column-right-align-at-large {
        text-align: right;
    }
}

.table[b-gcnjvdwmou]  .table-head:has([role="checkbox"]),
.table[b-gcnjvdwmou]  .table-cell:has([role="checkbox"]) {
    padding-right: 0;
}

.table[b-gcnjvdwmou]  .table-caption {
    margin-top: 0.25rem;
    color: var(--muted-foreground, #737373);
    font-size: var(--text-sm);
}
/* /Components/UI/Tabs/Tabs.razor.rz.scp.css */
.tabs[b-n04gh4g6qc] { width: 100%; }

.tabs[b-n04gh4g6qc]  .tabs-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.5rem;
    padding: 0.25rem;
    width: 100%;
    border-radius: var(--radius, 0.625rem);
    background: var(--muted);
    color: var(--muted-foreground, #737373);
    /* Triggers grow to fill the strip when there's room; once they hit their natural (label)
       width and still don't all fit, the strip scrolls horizontally instead of squeezing text -
       same behaviour on every breakpoint, not just mobile. */
    overflow-x: auto;
    /* A tab scrolled into view keeps the strip's own gap at the edge. */
    scroll-padding-inline: 0.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tabs[b-n04gh4g6qc]  .tabs-list::-webkit-scrollbar {
    display: none;
}

.tabs[b-n04gh4g6qc]  .tabs-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    /* flex-shrink stops at the label's own min-content width by default (overflow stays
       "visible", so min-width:auto resolves to min-content) - triggers never get squeezed
       unreadably; flex-grow fills any extra room evenly across the triggers instead of leaving
       it as dead space after the last tab. */
    flex: 1 1 auto;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: calc(var(--radius, 0.625rem) - 0.125rem);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .tabs[b-n04gh4g6qc]  .tabs-trigger:hover:not(:disabled) { color: var(--foreground, #0a0a0a); }
}

/* Pressed: an inactive tab only (the active one is already "on"). */
.tabs[b-n04gh4g6qc]  .tabs-trigger:active:not(:disabled):not([data-state="active"]) {
    background: var(--pressed);
    color: var(--foreground, #0a0a0a);
}

.tabs[b-n04gh4g6qc]  .tabs-trigger:focus-visible,
.tabs[b-n04gh4g6qc]  .tabs-content:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.tabs[b-n04gh4g6qc]  .tabs-trigger[data-state="active"] {
    background: var(--background);
    color: var(--foreground, #0a0a0a);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

/* On touch (T-22, D11 (a)) a tab is 44 px tall and the strip 52 px (the tab plus its 0.25rem padding), the one layer that
   stays sticky under the top bar in portrait. */
@media (pointer: coarse) {
    .tabs[b-n04gh4g6qc]  .tabs-trigger {
        min-height: 2.75rem;
    }

    .tabs[b-n04gh4g6qc]  .tabs-list {
        min-height: 3.25rem;
    }
}

.tabs[b-n04gh4g6qc]  .tabs-trigger:disabled { cursor: not-allowed; opacity: 0.5; }
.tabs[b-n04gh4g6qc]  .tabs-content { margin-top: 0.75rem; outline: none; }
/* /Components/UI/Tabs/TabsContent.razor.rz.scp.css */
/* Fade the newly-active panel in over the same 150ms window LiveDataComponentBase waits before
   revealing a skeleton (see SkeletonRevealDelayMs), so a fast initial load never flashes a
   skeleton - the panel is still fading in by the time the data lands. A CSS animation (not a
   transition) is used because the panel goes from `hidden` (display:none) to shown: transitions
   can't run across a display:none boundary, but an animation restarts automatically whenever the
   element becomes displayable again. */
.tabs-content[b-2tp13syo6h] {
    animation: tabs-content-fade-in-b-2tp13syo6h var(--motion-fast) var(--ease-out);
}

@keyframes tabs-content-fade-in-b-2tp13syo6h {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Components/UI/Tabs/TabsList.razor.rz.scp.css */
.tabs-list-wrapper[b-ji8kv7dcml] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.tabs-list-scroll-button[b-ji8kv7dcml] {
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 1.75rem;
    border: 0;
    border-radius: calc(var(--radius, 0.625rem) - 0.125rem);
    color: var(--muted-foreground, #737373);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    opacity: 1;
    transition: opacity var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

/* Faded out (not unmounted) when there's nothing left to scroll to on that side, so it never
   pops in/out abruptly - and can't be clicked or tabbed to while invisible. */
.tabs-list-scroll-button-hidden[b-ji8kv7dcml] {
    opacity: 0;
    pointer-events: none;
}

.tabs-list-scroll-button-left[b-ji8kv7dcml] {
    left: 0.25rem;
    justify-content: flex-start;
    background: linear-gradient(to right, var(--muted) 55%, transparent);
}

.tabs-list-scroll-button-right[b-ji8kv7dcml] {
    right: 0.25rem;
    justify-content: flex-end;
    background: linear-gradient(to left, var(--muted) 55%, transparent);
}

@media (hover: hover) {
    .tabs-list-scroll-button:hover[b-ji8kv7dcml] {
        color: var(--primary);
    }
}

/* Pressed: the arrow darkens (the button's background is a fade, not a fill). */
.tabs-list-scroll-button:active[b-ji8kv7dcml] {
    color: var(--primary);
}

.tabs-list-scroll-button:focus-visible[b-ji8kv7dcml] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* The svg is IconChevron's own markup, not this component's, so ::deep is needed - anchored at
   the button itself (a real element in this component's own scope) so it actually matches. */
.tabs-list-scroll-button-left[b-ji8kv7dcml]  svg {
    transform: rotate(90deg);
}

.tabs-list-scroll-button-right[b-ji8kv7dcml]  svg {
    transform: rotate(-90deg);
}

/* Reserve room so the fade/button overlay never sits on top of an actual tab trigger. .tabs-list
   is raw HTML written directly in this same file (TabsList.razor), so it's scoped normally here -
   no ::deep needed (::deep would actually strip scoping from it, making it match globally).
   Only where the buttons show: on a touch-width screen they are gone, the strip scrolls by swipe and keeps its own
   0.25rem padding (Tabs.razor.css) at both ends, so the first and last tabs never touch its rounded edges and the
   padding never changes while it scrolls. */
/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width > 768px) and (not ((pointer: coarse) and (height < 500px))) {
    .tabs-list-wrapper:has(.tabs-list-scroll-button-left:not(.tabs-list-scroll-button-hidden)) .tabs-list[b-ji8kv7dcml] {
        padding-left: 1.5rem;
    }

    .tabs-list-wrapper:has(.tabs-list-scroll-button-right:not(.tabs-list-scroll-button-hidden)) .tabs-list[b-ji8kv7dcml] {
        padding-right: 1.5rem;
    }
}

@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .tabs-list-scroll-button[b-ji8kv7dcml] {
        display: none;
    }

    /* The edge cue (T-22): the scroll buttons are gone here, so a strip with more tabs past an edge fades them out there
       (half a tab at the edge says it scrolls). The fade is a mask on the strip itself, over the strip's colour, which
       the wrapper paints: an overlay laid on top left a pixel of a label showing at each end whenever the strip's edge
       fell between two device pixels, since the label and the overlay were each clipped there on their own. */
    .tabs-list-wrapper[b-ji8kv7dcml] {
        border-radius: var(--radius, 0.625rem);
        background: var(--muted);
    }

    .tabs-list-wrapper .tabs-list[role="tablist"][b-ji8kv7dcml] {
        background: transparent;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--tabs-fade-start), #000 calc(100% - var(--tabs-fade-end)), transparent);
        mask-image: linear-gradient(to right, transparent, #000 var(--tabs-fade-start), #000 calc(100% - var(--tabs-fade-end)), transparent);
        transition: --tabs-fade-start var(--motion-fast) var(--ease-out), --tabs-fade-end var(--motion-fast) var(--ease-out);
    }

    .tabs-list-wrapper--more-left .tabs-list[role="tablist"][b-ji8kv7dcml] {
        --tabs-fade-start: 1.75rem;
    }

    .tabs-list-wrapper--more-right .tabs-list[role="tablist"][b-ji8kv7dcml] {
        --tabs-fade-end: 1.75rem;
    }
}
/* /Components/UI/TextArea/TextArea.razor.rz.scp.css */
.textarea[b-8bu9ztplr4] {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 5rem;
    border: 1px solid var(--input);
    border-radius: var(--radius, 0.625rem);
    background: var(--background);
    padding: 0.5rem 0.75rem;
    color: var(--foreground, #0a0a0a);
    font: inherit;
    font-size: var(--text-input);
    line-height: 1.25rem;
    outline: none;
    resize: vertical;
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.textarea[b-8bu9ztplr4]::placeholder { color: var(--muted-foreground, #737373); }

.textarea:focus-visible[b-8bu9ztplr4] {
    border-color: var(--ring);
    box-shadow: var(--field-focus-ring);
}

@media (hover: hover) {
    .textarea:hover:not(:disabled):not(:focus-visible):not(.textarea-invalid)[b-8bu9ztplr4] {
        border-color: var(--input-hover);
    }
}

.textarea-invalid[b-8bu9ztplr4] { border-color: var(--destructive); }

.textarea-invalid:focus-visible[b-8bu9ztplr4] {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 25%, transparent);
}

.textarea:disabled[b-8bu9ztplr4] { cursor: not-allowed; opacity: 0.5; }

.textarea-description[b-8bu9ztplr4] {
    color: var(--muted-foreground, #737373);
    font-size: var(--text-sm);
    line-height: 1.25rem;
}

.validation-message-container[b-8bu9ztplr4] { min-height: 1rem; }
/* /Components/UI/TimePickerInterval/TimePickerInterval.razor.rz.scp.css */
.time-picker-interval[b-h7bms2ezcj] { position: relative; width: 100%; }
.time-picker-interval-trigger[b-h7bms2ezcj] { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 2.5rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius, .5rem); background: var(--background); color: var(--foreground, #09090b); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out); }
@media (hover: hover) { .time-picker-interval-trigger:hover:not(:disabled)[b-h7bms2ezcj] { background: var(--accent); } }
.time-picker-interval-trigger:active:not(:disabled)[b-h7bms2ezcj] { background: var(--pressed); }
.time-picker-interval-trigger[b-h7bms2ezcj], .time-picker-interval-option[b-h7bms2ezcj] { -webkit-tap-highlight-color: transparent; }
.time-picker-interval-trigger:focus-visible[b-h7bms2ezcj] { outline: none; border-color: var(--ring); box-shadow: var(--field-focus-ring); }
.time-picker-interval-trigger:disabled[b-h7bms2ezcj] { cursor: not-allowed; opacity: .5; }
.time-picker-interval-placeholder[b-h7bms2ezcj] { color: var(--muted-foreground, #71717a); }
.time-picker-interval-chevron[b-h7bms2ezcj] { display: inline-flex; color: var(--muted-foreground, #71717a); }
.time-picker-interval-chevron svg[b-h7bms2ezcj] { width: 1rem; height: 1rem; }
.time-picker-interval-invalid[b-h7bms2ezcj] { border-color: var(--destructive, #ef4444); }
.time-picker-interval-popover[b-h7bms2ezcj] { position: fixed; z-index: 4000; top: 0; left: 0; box-sizing: border-box; min-width: 10rem; max-height: calc(22.5rem + .5rem); padding: .25rem; border: 1px solid var(--border); border-radius: var(--radius, .5rem); background: var(--popover); color: var(--popover-foreground); box-shadow: 0 10px 25px rgb(0 0 0 / .12); overflow-y: auto; }
.time-picker-interval-option[b-h7bms2ezcj] { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 2.25rem; padding: .375rem .5rem; border: 0; border-radius: calc(var(--radius, .5rem) - .125rem); background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
/* Touch (T-27): a list row is 44 px tall. */
@media (pointer: coarse) { .time-picker-interval-option[b-h7bms2ezcj] { min-height: 2.75rem; } }
@media (hover: hover) { .time-picker-interval-option:hover:not(:disabled)[b-h7bms2ezcj] { background: var(--accent); color: var(--accent-foreground); } }
.time-picker-interval-option-selected[b-h7bms2ezcj] { background: var(--accent); color: var(--accent-foreground); }
.time-picker-interval-option:active:not(:disabled)[b-h7bms2ezcj] { background: var(--pressed); color: var(--accent-foreground); }
.time-picker-interval-option:focus-visible[b-h7bms2ezcj] { outline: none; box-shadow: var(--focus-ring-inset); }
.time-picker-interval-option:disabled[b-h7bms2ezcj] { color: var(--muted-foreground); opacity: .35; cursor: not-allowed; }
.time-picker-interval-clear[b-h7bms2ezcj] { margin-bottom: .25rem; border-bottom: 1px solid var(--border); border-radius: 0; color: var(--muted-foreground, #71717a); }
.time-picker-interval-check[b-h7bms2ezcj] { font-size: 1rem; font-weight: 600; }
.validation-message-container[b-h7bms2ezcj] { min-height: 1rem; }
/* /Components/UI/Toast/Toast.razor.rz.scp.css */
/* Each type tints the whole toast: the *-foreground token is the pale background, the base token the border and text. */

.toast[b-mwz21ldrg8] {
    --toast-colour: var(--toast-info-fg);
    --toast-bg: var(--toast-info-bg);

    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2.5);
    width: 22rem;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5);
    background-color: var(--toast-bg);
    color: var(--toast-colour);
    border: 1px solid color-mix(in srgb, var(--toast-colour) 30%, transparent);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--toast-colour) 35%, transparent), 0 2px 6px rgb(0 0 0 / 0.06);
    pointer-events: auto;
    /* Vertical scrolling stays with the browser; horizontal drags are the swipe-to-dismiss. */
    touch-action: pan-y;
    animation: toast-in-b-mwz21ldrg8 var(--motion-base) var(--ease-out);
}

.toast--success[b-mwz21ldrg8] { --toast-colour: var(--success); --toast-bg: var(--success-foreground); }
.toast--error[b-mwz21ldrg8]   { --toast-colour: var(--destructive); --toast-bg: var(--destructive-foreground); }
.toast--warning[b-mwz21ldrg8] { --toast-colour: var(--warning); --toast-bg: var(--warning-foreground); }
.toast--info[b-mwz21ldrg8]    { --toast-colour: var(--toast-info-fg); --toast-bg: var(--toast-info-bg); }

@keyframes toast-in-b-mwz21ldrg8 {
    from {
        opacity: 0;
        transform: translateX(4px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.toast-icon[b-mwz21ldrg8] {
    display: inline-flex;
    flex-shrink: 0;
    /* Centres the 20px icon on the first 20px line of text. */
    padding-top: 0.0625rem;
}

.toast-content[b-mwz21ldrg8] {
    flex: 1;
    min-width: 0;
}

.toast-title[b-mwz21ldrg8] {
    font-weight: 600;
    font-size: var(--text-sm);
    line-height: 1.25rem;
}

/* A darker shade of the type colour keeps the body text readable on the pale background. */
.toast-message[b-mwz21ldrg8] {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: color-mix(in srgb, var(--toast-colour) 80%, black);
    overflow-wrap: anywhere;
}

.toast-title + .toast-message[b-mwz21ldrg8] {
    opacity: 0.9;
}

.toast-action[b-mwz21ldrg8] {
    display: inline-block;
    margin-top: calc(var(--spacing) * 1.5);
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 0.25rem;
}

/* Keyboard focus and press take the toast's own colour: the grey --ring reads poorly on the pale coloured toasts. The
   pressed tint is spread past the text so it shows around a link with no padding. */
.toast-action:focus-visible[b-mwz21ldrg8],
.toast-close:focus-visible[b-mwz21ldrg8] {
    outline: none;
    box-shadow: 0 0 0 2px var(--toast-colour);
}

.toast-action:active:not(:disabled)[b-mwz21ldrg8] {
    background-color: color-mix(in srgb, var(--toast-colour) 20%, transparent);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--toast-colour) 20%, transparent);
}

.toast-action:disabled[b-mwz21ldrg8] {
    opacity: 0.5;
    cursor: not-allowed;
}

.toast-close[b-mwz21ldrg8] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.125rem -0.25rem 0 0;
    border: none;
    background: transparent;
    border-radius: calc(var(--radius) - 0.25rem);
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Touch (T1): the action link is a 44 px row of its own (the toast's padding stays, the link carries the height) and the ✕ keeps its
   24 px box with a 44 px hit area (.touch-target, app.css). */
@media (pointer: coarse) {
    .toast-action[b-mwz21ldrg8] {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        margin-top: 0;
    }
}

@media (hover: hover) {
    .toast-close:hover[b-mwz21ldrg8] {
        opacity: 1;
        background-color: color-mix(in srgb, var(--toast-colour) 15%, transparent);
    }
}

.toast-close:active[b-mwz21ldrg8] {
    opacity: 1;
    background-color: color-mix(in srgb, var(--toast-colour) 20%, transparent);
}

/* Dismissed (a click, the timer or a swipe that stopped short): fades and slides out before ToastService removes it. */
.toast--closing[b-mwz21ldrg8] {
    pointer-events: none;
    animation: toast-out-b-mwz21ldrg8 var(--motion-fast) var(--ease-in) forwards;
}

@keyframes toast-out-b-mwz21ldrg8 {
    to {
        opacity: 0;
        transform: translateX(4px);
    }
}
/* /Components/UI/Toast/ToastHost.razor.rz.scp.css */
.toast-tray[b-hbzxkwzq3c] {
    position: fixed;
    bottom: 3.5rem;
    right: 1rem;
    z-index: 3000;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    max-width: 24rem;
    /* Empty tray space shouldn't block clicks to the page underneath — each .toast
       (in Toast.razor.css) re-enables pointer-events on itself. */
    pointer-events: none;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    /* T-31: at the bottom, above the safe area, where the thumb is; the newest sits nearest the bottom edge (the oldest is first
       in the list, so a plain column puts it on top). At most two show (ToastService). */
    .toast-tray[b-hbzxkwzq3c] {
        top: auto;
        left: 50%;
        right: auto;
        bottom: calc(1rem + env(safe-area-inset-bottom));
        width: min(24rem, calc(100vw - 2rem));
        flex-direction: column;
        align-items: center;
        transform: translateX(-50%);
    }
}
/* /Components/UI/Tooltip/Tooltip.razor.rz.scp.css */
/* shadcn/ui-inspired tooltip surface. Position is assigned by tooltip.js so it can escape
   clipping ancestors and remain attached to its trigger during layout changes. */
.tooltip[b-nqwi9onrup] {
    display: inline-flex;
}

.tooltip-content[b-nqwi9onrup] {
    position: fixed;
    z-index: 60;
    visibility: hidden;
    max-width: min(20rem, calc(100vw - 1rem));
    max-height: calc(100dvh - 1rem);
    overflow: auto;
    padding: 0.375rem 0.75rem;
    border-radius: calc(var(--radius, 0.5rem) - 0.125rem);
    background: var(--primary, #18181b);
    color: var(--primary-foreground, #fafafa);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    pointer-events: none;
}

.tooltip-content.tooltip-positioned[b-nqwi9onrup] {
    visibility: visible;
    animation: tooltip-in-b-nqwi9onrup var(--motion-base) var(--ease-out) backwards;
}

@keyframes tooltip-in-b-nqwi9onrup {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}
/* /Components/UI/UnsentChanges/UnsentChangesNote.razor.rz.scp.css */
/* One quiet line, wrapping with the text (X4). The Discard link is the shared link Button (its focus ring, hover and 44 px
   hit area); only the colour is the plain-link token. */
.unsent-changes-note[b-b1c552vq6i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.375rem;
    margin-bottom: 0.75rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.unsent-changes-note-dot[b-b1c552vq6i] {
    flex: none;
}

.unsent-changes-note[b-b1c552vq6i]  .unsent-changes-note-discard {
    flex: none;
    color: var(--link);
    font-size: inherit;
}
/* /Features/Calendar/Components/CalendarAgenda.razor.rz.scp.css */
.cal-agenda[b-gkzlqkqlpt] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cal-agenda-day[b-gkzlqkqlpt] {
    overflow: hidden;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius);
    background-color: var(--background);
    /* Scrolled to on load: clear the app's sticky top bar. */
    scroll-margin-top: calc(var(--sticky-offset) + 0.5rem);
}

.cal-agenda-day-today[b-gkzlqkqlpt] {
    border-color: var(--primary);
}

.cal-agenda-header[b-gkzlqkqlpt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    border-bottom: 1px solid var(--border-colour);
    background-color: var(--accent);
}

.cal-agenda-day-past .cal-agenda-header[b-gkzlqkqlpt] {
    color: var(--muted-foreground);
}

.cal-agenda-date[b-gkzlqkqlpt] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.cal-agenda-spacer[b-gkzlqkqlpt] {
    flex: 1 1 auto;
}

.cal-agenda-add[b-gkzlqkqlpt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--primary);
    cursor: pointer;
}

.cal-agenda-add:focus-visible[b-gkzlqkqlpt] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

@media (hover: hover) {
    .cal-agenda-add:hover[b-gkzlqkqlpt] {
        background-color: var(--background);
    }
}

.cal-agenda-add:active[b-gkzlqkqlpt] {
    background-color: var(--pressed);
}

.cal-agenda-empty[b-gkzlqkqlpt] {
    margin: 0;
    padding: 0.75rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.cal-agenda-rows[b-gkzlqkqlpt] {
    display: flex;
    flex-direction: column;
}

.cal-agenda-item + .cal-agenda-item[b-gkzlqkqlpt] {
    border-top: 1px solid var(--border-colour);
}

.cal-agenda-overdue[b-gkzlqkqlpt] {
    margin: 0;
    padding: 0.5rem 0.75rem 0.25rem;
    color: var(--warning);
    font-size: var(--text-xs);
    font-weight: 600;
}
/* /Features/Calendar/Components/CalendarGrid.razor.rz.scp.css */
.cal-grid-scope[b-xb8e3c5wu8] {
    --cal-hour-height: 3rem;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius);
    background-color: var(--background);
}

.cal-grid[b-xb8e3c5wu8] {
    display: grid;
    grid-template-columns: 3.5rem repeat(var(--cal-days), minmax(0, 1fr));
    grid-template-rows: auto auto calc(var(--cal-hour-height) * var(--cal-hours));
}

/* Row 1: day headers. */
.cal-grid-corner[b-xb8e3c5wu8],
.cal-grid-head[b-xb8e3c5wu8] {
    border-bottom: 1px solid var(--border-colour);
}

.cal-grid-head[b-xb8e3c5wu8] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 3rem;
    padding: 0.25rem;
    border-inline-start: 1px solid var(--border-colour);
}

.cal-grid-head-button[b-xb8e3c5wu8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    width: 100%;
    border: none;
    border-radius: var(--radius);
    background: none;
    padding: 0.125rem;
    color: var(--primary);
    cursor: pointer;
}

.cal-grid-head-button:focus-visible[b-xb8e3c5wu8] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

@media (hover: hover) {
    .cal-grid-head-button:hover[b-xb8e3c5wu8] {
        background-color: var(--accent);
    }
}

.cal-grid-head-button:active[b-xb8e3c5wu8] {
    background-color: var(--pressed);
}

.cal-grid-head-weekday[b-xb8e3c5wu8] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    text-transform: uppercase;
}

.cal-grid-head-number[b-xb8e3c5wu8] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cal-grid-head-label[b-xb8e3c5wu8] {
    font-weight: 600;
    font-size: var(--text-sm);
}

.cal-grid-head-today .cal-grid-head-number[b-xb8e3c5wu8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.cal-grid-head-past[b-xb8e3c5wu8] {
    opacity: 0.6;
}

/* Row 2: the Any time bands. */
.cal-grid-band-label[b-xb8e3c5wu8] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0.375rem 0.25rem 0.375rem 0;
    border-bottom: 1px solid var(--border-colour);
    color: var(--muted-foreground);
    font-size: var(--text-2xs);
    line-height: 1.2;
    text-align: end;
}

.cal-grid-band[b-xb8e3c5wu8] {
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    min-height: 2.25rem;
    padding: 0.25rem;
    border-bottom: 1px solid var(--border-colour);
    border-inline-start: 1px solid var(--border-colour);
    cursor: pointer;
}

@media (hover: hover) {
    .cal-grid-band:hover[b-xb8e3c5wu8] {
        background-color: var(--accent);
    }
}

.cal-grid-band:active[b-xb8e3c5wu8] {
    background-color: var(--pressed);
}

.cal-grid-band-past[b-xb8e3c5wu8] {
    background-color: var(--off-white);
    cursor: default;
}

@media (hover: hover) {
    .cal-grid-band-past:hover[b-xb8e3c5wu8] {
        background-color: var(--off-white);
    }
}

.cal-grid-overdue-label[b-xb8e3c5wu8] {
    margin: 0.125rem 0 0;
    color: var(--warning);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Row 3: the hour gutter and the day columns. */
.cal-grid-gutter[b-xb8e3c5wu8] {
    position: relative;
}

.cal-grid-hour[b-xb8e3c5wu8] {
    position: absolute;
    right: 0.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-2xs);
    line-height: 1;
    transform: translateY(0.25rem);
}

.cal-grid-col[b-xb8e3c5wu8] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-inline-start: 1px solid var(--border-colour);
}

.cal-grid-col-today[b-xb8e3c5wu8],
.cal-grid-band-today[b-xb8e3c5wu8] {
    background-color: color-mix(in srgb, var(--badge-blue-bg) 35%, transparent);
}

.cal-grid-col-past[b-xb8e3c5wu8] {
    background-color: var(--off-white);
}

.cal-slot[b-xb8e3c5wu8] {
    -webkit-tap-highlight-color: transparent;
    flex: 0 0 calc(var(--cal-hour-height) / 2);
    border-top: 1px dashed var(--border-colour);
    cursor: pointer;
}

.cal-slot-hour[b-xb8e3c5wu8] {
    border-top-style: solid;
}

@media (hover: hover) {
    .cal-slot:hover[b-xb8e3c5wu8] {
        background-color: var(--accent);
    }
}

.cal-slot:active[b-xb8e3c5wu8] {
    background-color: var(--pressed);
}

.cal-grid-col-past .cal-slot[b-xb8e3c5wu8] {
    cursor: default;
}

@media (hover: hover) {
    .cal-grid-col-past .cal-slot:hover[b-xb8e3c5wu8] {
        background-color: transparent;
    }
}

/* S1v: a slot of today that has ended looks like a past day's and takes no click or drop. */
.cal-slot-past[b-xb8e3c5wu8] {
    background-color: var(--off-white);
    cursor: default;
}

@media (hover: hover) {
    .cal-slot-past:hover[b-xb8e3c5wu8] {
        background-color: var(--off-white);
    }
}

/* calendar.js marks the hovered drop target while a drag runs. */
.cal-drop-over[b-xb8e3c5wu8],
.cal-grid-col-past .cal-slot.cal-drop-over[b-xb8e3c5wu8] {
    background-color: var(--badge-blue-bg);
    outline: 2px dashed var(--info);
    outline-offset: -2px;
}

.cal-grid-dragging .cal-block[b-xb8e3c5wu8],
.cal-grid-dragging .cal-chip[b-xb8e3c5wu8],
.cal-grid-dragging .cal-note-block[b-xb8e3c5wu8],
.cal-grid-dragging .cal-note-chip[b-xb8e3c5wu8],
.cal-grid-dragging .cal-grid-more[b-xb8e3c5wu8] {
    pointer-events: none;
}

/* A job block: a fixed visual hour, the status colour on its left border. */
.cal-block[b-xb8e3c5wu8],
.cal-chip[b-xb8e3c5wu8] {
    -webkit-tap-highlight-color: transparent;
    display: flex;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-colour);
    border-inline-start: 3px solid var(--cal-status, var(--border-colour));
    border-radius: 0.375rem;
    background-color: var(--background);
    color: var(--primary);
    font-size: var(--text-xs);
    text-decoration: none;
}

.cal-block[b-xb8e3c5wu8] {
    position: absolute;
    z-index: 1;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.125rem 0.125rem 0.125rem 0.25rem;
    box-shadow: 0 1px 2px var(--shadow);
}

@media (hover: hover) {
    .cal-block:hover[b-xb8e3c5wu8],
    .cal-chip:hover[b-xb8e3c5wu8] {
        background-color: var(--accent);
    }
}

.cal-block:active[b-xb8e3c5wu8],
.cal-chip:active[b-xb8e3c5wu8] {
    background-color: var(--pressed);
}

.cal-block[draggable="true"][b-xb8e3c5wu8],
.cal-chip[draggable="true"][b-xb8e3c5wu8] {
    cursor: grab;
}

.cal-block-dragged[b-xb8e3c5wu8],
.cal-chip-dragged[b-xb8e3c5wu8] {
    opacity: 0.5;
}

.cal-block-created[b-xb8e3c5wu8],
.cal-chip-created[b-xb8e3c5wu8] { --cal-status: var(--badge-indigo-fg); }
.cal-block-scheduled[b-xb8e3c5wu8],
.cal-chip-scheduled[b-xb8e3c5wu8] { --cal-status: var(--badge-purple-fg); }
.cal-block-carreceived[b-xb8e3c5wu8],
.cal-chip-carreceived[b-xb8e3c5wu8] { --cal-status: var(--badge-amber-fg); }
.cal-block-inprogress[b-xb8e3c5wu8],
.cal-chip-inprogress[b-xb8e3c5wu8] { --cal-status: var(--badge-blue-fg); }
.cal-block-readyforpickup[b-xb8e3c5wu8],
.cal-chip-readyforpickup[b-xb8e3c5wu8] { --cal-status: var(--badge-green-fg); }
.cal-block-completed[b-xb8e3c5wu8],
.cal-chip-completed[b-xb8e3c5wu8] { --cal-status: var(--badge-emerald-fg); }

.cal-block-muted[b-xb8e3c5wu8],
.cal-chip-muted[b-xb8e3c5wu8] {
    opacity: 0.6;
}

.cal-block-overdue[b-xb8e3c5wu8],
.cal-chip-overdue[b-xb8e3c5wu8] {
    --cal-status: var(--warning);
    background-color: var(--warning-foreground);
}

.cal-block-line[b-xb8e3c5wu8] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

/* A row of codes and times that never break or truncate (CLAUDE.md "Text that doesn't fit"): each item sits whole
   on the first row or wraps onto a second one that's clipped, so in a narrow block the last items give way first
   (the plate, then the pin and the number, the time last) and the menu after the row keeps its place. The
   zero-width, full-height first item lets even the first real one give way instead of being cut. The block's or
   chip's `title` holds everything. */
.cal-fit[b-xb8e3c5wu8] {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    column-gap: 0.25rem;
    min-width: 0;
    height: 1.25rem;
    overflow: hidden;
}

/* A job's row takes the line up to its menu, which then sits at the end. */
.cal-fit-grow[b-xb8e3c5wu8] {
    flex-grow: 1;
}

.cal-fit[b-xb8e3c5wu8]::before {
    content: "";
    flex: 0 0 0;
    height: 100%;
    margin-inline-end: -0.25rem;
}

/* The menu takes no more height than the row (a flex root drops the inline line box's extra half pixel, and the
   24 px trigger reaches into the block's padding, as the avatar does), so a block's two lines fit its hour, Day
   view's status badge included. */
.cal-block[b-xb8e3c5wu8]  .dm-root {
    display: flex;
}

.cal-block[b-xb8e3c5wu8]  .cal-menu-trigger {
    margin-block: -0.125rem;
}

.cal-block-time[b-xb8e3c5wu8] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cal-block-overdue .cal-block-time[b-xb8e3c5wu8] {
    color: var(--warning);
}

.cal-block-number[b-xb8e3c5wu8],
.cal-chip-number[b-xb8e3c5wu8] {
    font-weight: 700;
}

.cal-block-icon[b-xb8e3c5wu8] {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--muted-foreground);
}


/* The assignee avatar (Whole shop) fits the one-hour block's second line: the negative margin lets it reach into
   the block's padding instead of making the line taller than the text. */
.cal-block-line[b-xb8e3c5wu8]  .job-assignee-avatar {
    width: 1.125rem;
    height: 1.125rem;
    margin-block: -0.0625rem;
    font-size: var(--text-2xs);
}

.cal-block-text[b-xb8e3c5wu8],
.cal-chip-text[b-xb8e3c5wu8] {
    overflow: hidden;
    min-width: 0;
    color: var(--muted-foreground);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Day view's chip: the text takes what the number and plate leave and pushes the menu to the end. */
.cal-chip-text[b-xb8e3c5wu8] {
    flex: 1 1 0;
}

/* The plate is never cut: in a narrow block it gives way whole (`.cal-fit`), and its own `title` holds it. */
.cal-block[b-xb8e3c5wu8]  .vehicle-plate,
.cal-chip[b-xb8e3c5wu8]  .vehicle-plate {
    padding: 0 0.25rem;
    font-size: var(--text-2xs);
}

.cal-chip[b-xb8e3c5wu8] {
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.125rem 0.125rem 0.25rem;
}

/* A note: half an hour high, a muted tint with the bell, a dashed left border. */
.cal-note-block[b-xb8e3c5wu8],
.cal-note-chip[b-xb8e3c5wu8] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
    padding: 0 0.25rem;
    border: 1px solid var(--badge-amber-bg);
    border-inline-start: 3px dashed var(--badge-amber-fg);
    border-radius: 0.375rem;
    background-color: var(--badge-amber-bg);
    font-size: var(--text-xs);
    cursor: default;
}

/* A timed note's block: the tick, the bell, the time, the text. The time (never cut) shows only where it leaves the
   text about 3rem (the longest, "10:00 AM", needs a 10rem block); a narrower block gives the text its place, and
   the block's height on the hour axis and its `title` still tell the time. */
.cal-note-block[b-xb8e3c5wu8] {
    position: absolute;
    z-index: 1;
    container-type: inline-size;
}

.cal-note-block .cal-note-time[b-xb8e3c5wu8] {
    display: none;
}

@container (min-width: 10rem) {
    .cal-note-block .cal-note-time[b-xb8e3c5wu8] {
        display: inline;
    }
}

.cal-note-chip[b-xb8e3c5wu8] {
    min-height: 1.5rem;
}

.cal-note-overdue[b-xb8e3c5wu8] {
    border-inline-start-color: var(--warning);
}

.cal-note-time[b-xb8e3c5wu8] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cal-note-overdue .cal-note-time[b-xb8e3c5wu8] {
    color: var(--warning);
}

.cal-note-icon[b-xb8e3c5wu8] {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--badge-amber-fg);
}

.cal-note-text[b-xb8e3c5wu8] {
    flex: 1 1 0;
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-note-block[b-xb8e3c5wu8]  .checkbox-field,
.cal-note-chip[b-xb8e3c5wu8]  .checkbox-field {
    flex: 0 0 auto;
}

/* "+n": overlapping jobs beyond three lanes, or overdue notes beyond five; both open the day. */
.cal-grid-more[b-xb8e3c5wu8] {
    -webkit-tap-highlight-color: transparent;
    align-self: flex-start;
    border: 1px solid var(--border-colour);
    border-radius: 999px;
    background-color: var(--background);
    padding: 0 0.375rem;
    color: var(--primary);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
}

@media (hover: hover) {
    .cal-grid-more:hover[b-xb8e3c5wu8] {
        background-color: var(--accent);
    }
}

.cal-grid-more:active[b-xb8e3c5wu8] {
    background-color: var(--pressed);
}

.cal-grid-more-lane[b-xb8e3c5wu8] {
    position: absolute;
    z-index: 2;
    right: 0.125rem;
    margin-top: 0.125rem;
}

.cal-now-line[b-xb8e3c5wu8] {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid var(--destructive);
    pointer-events: none;
}

.cal-now-line[b-xb8e3c5wu8]::before {
    content: "";
    position: absolute;
    left: -0.25rem;
    top: -0.3125rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background-color: var(--destructive);
}
/* /Features/Calendar/Components/CalendarJobMenu.razor.rz.scp.css */
.cal-menu-scope[b-14a340r6jm] {
    display: inline-flex;
    flex: 0 0 auto;
}

.cal-menu-trigger[b-14a340r6jm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: var(--radius);
    background: none;
    padding: 0;
    color: var(--muted-foreground);
    cursor: pointer;
}

.cal-menu-trigger:focus-visible[b-14a340r6jm] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
    color: var(--primary);
}

@media (hover: hover) {
    .cal-menu-trigger:hover[b-14a340r6jm] {
        background-color: var(--accent);
        color: var(--primary);
    }
}

.cal-menu-trigger:active[b-14a340r6jm] {
    background-color: var(--pressed);
    color: var(--primary);
}

/* Touch (T-19): the 44 px hit area reaches past the event card's edge, which clips it; 2 px in keeps it whole. */
@media (pointer: coarse) {
    .cal-menu-trigger[b-14a340r6jm] {
        margin-right: 0.125rem;
    }
}
/* /Features/Calendar/Components/CalendarJobRow.razor.rz.scp.css */
.cal-row[b-xpkla6y45p] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.625rem 0.5rem 0.625rem 0.625rem;
    border-inline-start: 3px solid transparent;
    color: var(--primary);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.cal-row:focus-visible[b-xpkla6y45p] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

@media (hover: hover) {
    .cal-row:hover[b-xpkla6y45p] {
        background-color: var(--accent);
    }
}

.cal-row:active[b-xpkla6y45p] {
    background-color: var(--pressed);
}

.cal-row-muted[b-xpkla6y45p] {
    opacity: 0.6;
}

.cal-row-overdue[b-xpkla6y45p] {
    border-inline-start-color: var(--warning);
}

.cal-row-line[b-xpkla6y45p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* The status badge never shrinks: it wraps to the next line when the row is too narrow. */
.cal-row-head[b-xpkla6y45p] {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

.cal-row-time[b-xpkla6y45p] {
    font-weight: 600;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.cal-row-overdue .cal-row-time[b-xpkla6y45p] {
    color: var(--warning);
}

.cal-row-number[b-xpkla6y45p] {
    font-weight: 700;
    font-size: var(--text-sm);
}

.cal-row-offsite[b-xpkla6y45p] {
    display: inline-flex;
    color: var(--muted-foreground);
}

.cal-row-spacer[b-xpkla6y45p] {
    flex: 1 1 auto;
}

.cal-row-details[b-xpkla6y45p] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.cal-row-text[b-xpkla6y45p] {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Features/Calendar/Components/CalendarNoteRow.razor.rz.scp.css */
.cal-note-row[b-e8cc1unvje] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.625rem 0.5rem 0.625rem 0.625rem;
    border-inline-start: 3px dashed var(--badge-amber-fg);
    background-color: var(--badge-amber-bg);
}

.cal-note-row-overdue[b-e8cc1unvje] {
    border-inline-start-color: var(--warning);
}

.cal-note-body[b-e8cc1unvje] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.cal-note-text[b-e8cc1unvje] {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.cal-note-meta[b-e8cc1unvje] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.125rem;
    font-size: var(--text-xs);
}

.cal-note-icon[b-e8cc1unvje] {
    display: inline-flex;
    color: var(--badge-amber-fg);
}

.cal-note-when[b-e8cc1unvje] {
    color: var(--muted-foreground);
    font-weight: 600;
}

.cal-note-row-overdue .cal-note-when[b-e8cc1unvje] {
    color: var(--warning);
}

.cal-note-owner[b-e8cc1unvje] {
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    color: var(--primary);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Features/Calendar/Components/CalendarSlotMenu.razor.rz.scp.css */
/* A zero-size anchor at the click: dropdown.js places the panel from its rect, and the panel is fixed itself. */
.cal-slot-menu-anchor[b-fmdxvo1gvc] {
    position: fixed;
    width: 0;
    height: 0;
    z-index: 50;
}
/* /Features/Calendar/Components/CalendarToolbar.razor.rz.scp.css */
.cal-toolbar[b-tk772bnx41] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.cal-toolbar-nav[b-tk772bnx41] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.cal-toolbar-step[b-tk772bnx41] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--primary);
    cursor: pointer;
}

.cal-toolbar-step:focus-visible[b-tk772bnx41] {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (hover: hover) {
    .cal-toolbar-step:hover[b-tk772bnx41] {
        background-color: var(--accent);
    }
}

.cal-toolbar-step:active[b-tk772bnx41] {
    background-color: var(--pressed);
}

.cal-toolbar-label[b-tk772bnx41] {
    margin: 0 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    white-space: nowrap;
}

.cal-toolbar-actions[b-tk772bnx41] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* The Jobs page's List | Board toggle (its CSS is scoped there, so the rules are copied). */
.cal-toggle[b-tk772bnx41] {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    overflow: hidden;
}

.cal-toggle-btn[b-tk772bnx41] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: none;
    background: none;
    padding: 0.4375rem 0.75rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    white-space: nowrap;
    cursor: pointer;
}

.cal-toggle-btn + .cal-toggle-btn[b-tk772bnx41] {
    border-inline-start: 1px solid var(--border-colour);
}

/* Touch (T-23): a segment is 44 px tall. */
@media (pointer: coarse) {
    .cal-toggle-btn[b-tk772bnx41] {
        min-height: 2.75rem;
    }
}

.cal-toggle-btn-active[b-tk772bnx41] {
    background-color: var(--accent);
    color: var(--primary);
    font-weight: 600;
}

/* Phone: two centred rows. First ‹ Today › (the chevrons and Today are all 2.75rem tall touch targets with the outline
   button's look), then the period label under them, larger. The label may wrap only at the dash: the resx strings keep
   each date whole with non-breaking spaces. Create Job fills the last row. */
/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .cal-toolbar-nav[b-tk772bnx41] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
    }

    .cal-toolbar-step[b-tk772bnx41] {
        width: 2.75rem;
        height: 2.75rem;
        border: 1px solid var(--border);
        background-color: var(--background);
        color: var(--foreground);
    }

    @media (hover: hover) {
        .cal-toolbar-step:hover[b-tk772bnx41] {
            background-color: var(--accent);
            color: var(--accent-foreground);
        }
    }

    .cal-toolbar-step:active[b-tk772bnx41] {
        background-color: var(--pressed);
        color: var(--accent-foreground);
    }

    .cal-toolbar-nav[b-tk772bnx41]  .btn {
        min-height: 2.75rem;
    }

    .cal-toolbar-label[b-tk772bnx41] {
        flex: 1 1 100%;
        margin-inline-start: 0;
        font-size: 1.25rem;
        font-weight: 600;
        text-align: center;
        white-space: normal;
    }

    .cal-toolbar-actions[b-tk772bnx41] {
        width: 100%;
    }

    .cal-toolbar-create[b-tk772bnx41] {
        flex: 1 1 100%;
    }

    .cal-toolbar-create[b-tk772bnx41]  .btn {
        width: 100%;
    }
}
/* /Features/Calendar/Components/WeekCard.razor.rz.scp.css */
.week-card-header[b-4jsrdpa2tg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.week-card-open[b-4jsrdpa2tg] {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
}

.week-card-empty[b-4jsrdpa2tg] {
    margin: 0 0 0.75rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* Desktop: seven day columns. */
.week-card-columns[b-4jsrdpa2tg] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.week-card-column[b-4jsrdpa2tg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    min-height: 6rem;
    padding: 0.375rem 0.25rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    color: var(--primary);
    text-decoration: none;
}

.week-card-column:focus-visible[b-4jsrdpa2tg],
.week-card-pill:focus-visible[b-4jsrdpa2tg] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

@media (hover: hover) {
    .week-card-column:hover[b-4jsrdpa2tg],
    .week-card-pill:hover[b-4jsrdpa2tg] {
        background-color: var(--accent);
    }
}

.week-card-column:active[b-4jsrdpa2tg],
.week-card-pill:active[b-4jsrdpa2tg] {
    background-color: var(--pressed);
}

.week-card-today[b-4jsrdpa2tg] {
    border-color: var(--primary);
}

.week-card-past[b-4jsrdpa2tg] {
    opacity: 0.6;
}

.week-card-day[b-4jsrdpa2tg] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    min-width: 0;
}

.week-card-weekday[b-4jsrdpa2tg] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    text-transform: uppercase;
}

.week-card-number[b-4jsrdpa2tg] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.week-card-counts[b-4jsrdpa2tg] {
    color: var(--muted-foreground);
    font-size: var(--text-2xs);
    white-space: nowrap;
}

.week-card-chip[b-4jsrdpa2tg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.125rem 0.25rem;
    border-inline-start: 2px solid var(--badge-purple-fg);
    border-radius: 0.25rem;
    background-color: var(--accent);
    font-size: var(--text-2xs);
    line-height: 1.25;
}

.week-card-chip-muted[b-4jsrdpa2tg] {
    border-inline-start-color: var(--badge-emerald-fg);
    opacity: 0.7;
}

.week-card-chip-overdue[b-4jsrdpa2tg] {
    border-inline-start-color: var(--warning);
    background-color: var(--warning-foreground);
}

.week-card-chip-note[b-4jsrdpa2tg] {
    flex-direction: row;
    align-items: center;
    gap: 0.125rem;
    border-inline-start-style: dashed;
    border-inline-start-color: var(--badge-amber-fg);
    background-color: var(--badge-amber-bg);
}

.week-card-chip-time[b-4jsrdpa2tg],
.week-card-chip-code[b-4jsrdpa2tg],
.week-card-chip-text[b-4jsrdpa2tg] {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-card-chip-time[b-4jsrdpa2tg] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.week-card-chip-code[b-4jsrdpa2tg] {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.week-card-chip-icon[b-4jsrdpa2tg] {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--badge-amber-fg);
}

.week-card-more[b-4jsrdpa2tg] {
    color: var(--muted-foreground);
    font-size: var(--text-2xs);
    font-weight: 600;
}

/* Phone: a horizontal strip of day pills. */
.week-card-strip[b-4jsrdpa2tg] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scroll-snap-type: x proximity;
}

.week-card-pill[b-4jsrdpa2tg] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    min-width: 3.25rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    color: var(--primary);
    text-decoration: none;
    scroll-snap-align: start;
}

.week-card-count[b-4jsrdpa2tg] {
    min-width: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background-color: var(--accent);
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* /Features/Calendar/Pages/Calendar.razor.rz.scp.css */
.calendar-page[b-r7w6vl6lrs] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* Named "-list-content" so app.css's reduced-motion block covers its refresh dim. */
.calendar-list-content[b-r7w6vl6lrs] {
    min-width: 0;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.calendar-list-content.is-refreshing[b-r7w6vl6lrs] {
    opacity: 0.6;
    /* Dims only if the reload takes longer than 150 ms, so a quick refresh never blinks. */
    transition: opacity var(--motion-fast) var(--ease-out) 150ms;
}

/* Week view on a phone (S1v): the toolbar's steps again under the last day, so the week changes without scrolling back
   up. Two buttons side by side, stacked only when the row is narrower than two 10 rem buttons. */
.calendar-week-steps[b-r7w6vl6lrs] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
}

/* The Button's own element, reached from this file's raw div: 44 px targets, as the phone toolbar's. */
.calendar-week-steps[b-r7w6vl6lrs]  .btn {
    width: 100%;
    min-height: 2.75rem;
}
/* /Features/Contacts/Components/AddressAddForm.razor.rz.scp.css */
/* ::deep needs a genuinely-scoped ancestor element to anchor its descendant selector, and Card
   is invoked directly at this component's root with nothing raw wrapping it. display:contents
   keeps this div out of layout entirely (see CLAUDE.md's ::deep note). */
.address-add-form-scope[b-do00b0pj68] {
    display: contents;
}

.address-add-form-scope[b-do00b0pj68]  .address-add-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.address-form-actions[b-do00b0pj68] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.address-form-actions[b-do00b0pj68]  .btn {
    width: 100%;
}

/* A phone: the buttons stack at the card's full width, the main action on top and Cancel (Secondary) under it, as the
   modals' footers do at this width. */
@media (width <= 480px) {
    .address-form-actions[b-do00b0pj68] {
        display: flex;
        flex-direction: column-reverse;
    }
}
/* /Features/Contacts/Components/AddressCard.razor.rz.scp.css */
.address-card[b-weu03fxf4u] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius, 0.625rem));
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

.address-card-icon[b-weu03fxf4u] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
    color: var(--primary);
}

.address-card-body[b-weu03fxf4u] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.address-card-badge-row[b-weu03fxf4u] {
    display: flex;
    align-items: center;
}

.address-card-street[b-weu03fxf4u] {
    font-size: 1.375rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.address-card-locality[b-weu03fxf4u] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* A direct child of the card taking a full row, so the buttons share one line even on narrow
   screens. On wider screens it's indented to line up with the text beside the icon tile. */
.address-card-footer[b-weu03fxf4u] {
    display: flex;
    flex: 0 0 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-left: 3.25rem;
}

.address-card-actions[b-weu03fxf4u] {
    display: flex;
    flex: 0 0 auto;
    gap: 0.25rem;
}

/* Touch (T-25): icon buttons get a 44 px hit area, so neighbours sit 8 px apart. */
@media (pointer: coarse) {
    .address-card-actions[b-weu03fxf4u] {
        gap: 0.5rem;
    }
}

/* EditForm is a component (not raw HTML), so its rendered <form> needs ::deep, anchored at
   .address-card - the raw root element in this component's own scope. */
.address-card[b-weu03fxf4u]  .address-card-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.address-form-actions[b-weu03fxf4u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.address-form-actions[b-weu03fxf4u]  .btn {
    width: 100%;
}

/* A phone: the buttons stack at the card's full width, the main action on top and Cancel (Secondary) under it, as the
   modals' footers do at this width. */
@media (width <= 480px) {
    .address-form-actions[b-weu03fxf4u] {
        display: flex;
        flex-direction: column-reverse;
    }
}

@media (width <= 480px) {
    .address-card-icon[b-weu03fxf4u] {
        width: 2rem;
        height: 2rem;
    }

    /* While editing, the form takes the card's whole width: the icon column pushed it 13-27 px past the card (A6-17). */
    .address-card-editing .address-card-icon[b-weu03fxf4u] {
        display: none;
    }

    .address-card-street[b-weu03fxf4u] {
        font-size: 1.125rem;
    }

    .address-card-footer[b-weu03fxf4u] {
        padding-left: 0;
    }

    /* The icon and the edit/delete buttons share the first row and the text takes the card's full
       width below them (not a ~100 px column between them). While editing there are no buttons, so
       the form keeps its place beside the icon. */
    .address-card:not(.address-card-editing) .address-card-icon[b-weu03fxf4u] {
        order: 1;
    }

    .address-card:not(.address-card-editing) .address-card-actions[b-weu03fxf4u] {
        order: 2;
        margin-left: auto;
    }

    .address-card:not(.address-card-editing) .address-card-body[b-weu03fxf4u] {
        order: 3;
        flex: 1 0 100%;
    }

    .address-card:not(.address-card-editing) .address-card-footer[b-weu03fxf4u] {
        order: 4;
    }
}
/* /Features/Contacts/Components/AddressesPanel.razor.rz.scp.css */
.addresses-tab[b-jssgz26jyu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.addresses-tab-refreshing[b-jssgz26jyu] {
    opacity: 0.6;
}

.addresses-title[b-jssgz26jyu] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.addresses-add-trigger[b-jssgz26jyu]  .btn {
    width: 100%;
}

.addresses-divider[b-jssgz26jyu] {
    border-top: 1px solid var(--border-colour);
}

.addresses-empty[b-jssgz26jyu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius, 0.625rem));
}

.addresses-empty-title[b-jssgz26jyu] {
    margin: 0;
    font-weight: 600;
}

.addresses-empty-text[b-jssgz26jyu] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.addresses-list[b-jssgz26jyu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.addresses-error[b-jssgz26jyu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--muted-foreground);
}
/* /Features/Contacts/Components/AddressFields.razor.rz.scp.css */
.address-fields[b-g3ozompu2h] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.address-fields-row[b-g3ozompu2h] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

/* A phone: one field per row, as Perfil del taller's address (T-39: Provincia and Código postal shared 131 px columns that
   cut their placeholders and their values). */
@media (width <= 480px) {
    .address-fields-row[b-g3ozompu2h] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Features/Contacts/Components/ContactActions.razor.rz.scp.css */
.contact-actions[b-i89c8dmufe] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

/* Four actions (WhatsApp where the shop's country uses it, S1o D7b): always 2 x 2. In one row the desktop labels
   ("Llamar al principal") overflow a 128 px button in the customer's contacts tab at 1280 px. */
.contact-actions-four[b-i89c8dmufe] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-actions[b-i89c8dmufe]  .btn {
    width: 100%;
}
/* /Features/Contacts/Components/ContactAddForm.razor.rz.scp.css */
/* ::deep needs a genuinely-scoped ancestor element to anchor its descendant selector, and EditForm
   is invoked directly at this component's root with nothing raw wrapping it - so without this
   div, ::deep rules below wouldn't match anything real (see CLAUDE.md's ::deep note).
   display:contents keeps it out of layout entirely. */
.contact-add-form-scope[b-bwerevr9j4] {
    display: contents;
}

/* The form itself (EditForm renders a real <form>, reached only via ::deep since EditForm is a
   component, not raw HTML we wrote). Its direct children are the 3 raw divs below, which - being
   literally written in this file - are already scoped and don't need ::deep to target. */
.contact-add-form-scope[b-bwerevr9j4]  .contact-add-form {
    display: grid;
    grid-template-columns: 8rem 1fr 1fr;
    align-items: start;
    gap: 0.75rem;
}

.contact-add-submit[b-bwerevr9j4]  .btn {
    width: 100%;
}

/* The fields carry labels, the button doesn't: the spacer takes a label's height so the button lines up with the fields
   in the one-row layout (and goes away in the stacked one). */
.contact-add-submit-spacer[b-bwerevr9j4] {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.25;
}

/* The form's width is its card's, not the window's: beside the sidebar at 1024 px the card is
   narrow on a desktop-width window. A real wrapper is the container (the scope above is
   display: contents, which can't be one). */
.contact-add-form-container[b-bwerevr9j4] {
    container-type: inline-size;
}

/* A mid-width card (a desktop window beside the sidebar): the type and the value share a row, Add below. */
@container (width < 34rem) {
    .contact-add-form-scope[b-bwerevr9j4]  .contact-add-form {
        grid-template-columns: 7rem 1fr;
    }

    .contact-add-submit[b-bwerevr9j4] {
        grid-column: 1 / -1;
    }

    .contact-add-submit-spacer[b-bwerevr9j4] {
        display: none;
    }
}

/* A phone's card (T-39): one column, each field its own row, Tipo then Valor then Agregar, each at the card's full width
   (the 7 rem type column left the value 131 px, which cut its placeholder). */
@container (width < 24rem) {
    .contact-add-form-scope[b-bwerevr9j4]  .contact-add-form {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Features/Contacts/Components/ContactLink.razor.rz.scp.css */
.contact-link[b-2ltht74y3n] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    overflow: hidden;
    color: var(--primary);
    text-decoration: none;
}

@media (hover: hover) {
    a.contact-link:hover[b-2ltht74y3n] {
        text-decoration: underline;
    }
}

/* The icon is the SVG that IconMail/IconPhone render: it doesn't carry this component's scope, hence ::deep from the
   <a class="contact-link"> that is raw HTML in ContactLink.razor. */
.contact-link[b-2ltht74y3n]  .contact-link-icon {
    flex: 0 0 auto;
    color: var(--muted-foreground);
}

.contact-link-text[b-2ltht74y3n] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-link-empty[b-2ltht74y3n],
.contact-link-plain[b-2ltht74y3n] {
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Detail pages: the whole value, wrapping anywhere instead of an ellipsis. */
.contact-link-wrap[b-2ltht74y3n] {
    overflow: visible;
    align-items: flex-start;
}

/* Centres the 16 px icon on the first line of text (the row aligns to flex-start). */
.contact-link-wrap[b-2ltht74y3n]  .contact-link-icon {
    margin-top: calc((1lh - 1rem) / 2);
}

.contact-link-wrap .contact-link-text[b-2ltht74y3n],
.contact-link-wrap.contact-link-plain[b-2ltht74y3n] {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Touch (T-26). A detail page's wrapping link (Wrap) is a 44 px row of its own, by layout (phone and email links stack
   there, so neighbours never overlap); its text and icon centre on the row. A list card's or table row's link (the row
   opens the record) keeps its box and gets the 44 px hit area from .touch-target (app.css): its overflow turns visible,
   since a clipped link would clip the hit area too (the text span still ends in its ellipsis). */
@media (pointer: coarse) {
    a.contact-link-wrap[b-2ltht74y3n] {
        min-height: 2.75rem;
        align-items: center;
    }

    a.contact-link-wrap[b-2ltht74y3n]  .contact-link-icon {
        margin-top: 0;
    }

    a.contact-link:not(.contact-link-wrap)[b-2ltht74y3n] {
        overflow: visible;
    }
}
/* /Features/Contacts/Components/ContactRow.razor.rz.scp.css */
.contact-row[b-ko750nj32o] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius, 0.625rem));
}

.contact-row[b-ko750nj32o] {
    transition: opacity var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.contact-row-draggable[b-ko750nj32o] {
    cursor: grab;
}

/* Being dragged: fade the original so it reads as "picked up". */
.contact-row-dragged[b-ko750nj32o] {
    opacity: 0.45;
    border-style: dashed;
}

/* Valid drop targets while a drag is in progress. Children ignore the pointer so dragenter /
   dragleave only fire for the row itself (no flicker when crossing inner elements). */
.contact-row-candidate[b-ko750nj32o] {
    border-style: dashed;
    border-color: var(--primary);
    background: var(--accent);
}

.contact-row-candidate *[b-ko750nj32o] {
    pointer-events: none;
}

.contact-row-over[b-ko750nj32o] {
    border-style: solid;
    border-width: 2px;
    padding: calc(1.25rem - 1px);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.contact-row-drop-hint[b-ko750nj32o] {
    color: var(--primary);
    font-size: var(--text-xs);
    font-weight: 600;
}

.contact-row-drag-handle[b-ko750nj32o] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    color: var(--muted-foreground);
    cursor: grab;
    touch-action: none;
}

.contact-row-drag-handle:active[b-ko750nj32o] {
    cursor: grabbing;
}

.contact-row-icon[b-ko750nj32o] {
    display: flex;
    flex: 0 0 auto;
    /* Centred on the label + value block (a two-line email would leave a top-aligned tile above its middle). */
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
    color: var(--primary);
}

.contact-row-body[b-ko750nj32o] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.contact-row-label-row[b-ko750nj32o] {
    display: flex;
    /* The "Principal" badge never shrinks (B1): when it and a long type label don't fit together it wraps under the label
       instead of running over the actions (S1w, T-13). The actions keep their own column. */
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

.contact-row-label[b-ko750nj32o] {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-row-value[b-ko750nj32o] {
    font-size: 1.375rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.contact-row-actions[b-ko750nj32o] {
    display: flex;
    flex: 0 0 auto;
    gap: 0.25rem;
}

/* Touch (T-25): icon buttons get a 44 px hit area, so neighbours sit 8 px apart. */
@media (pointer: coarse) {
    .contact-row-actions[b-ko750nj32o] {
        gap: 0.5rem;
    }
}

/* EditForm is a component (not raw HTML), so its rendered <form> needs ::deep, anchored at
   .contact-row - a real element in this component's own scope. Input and Cancel/Save
   share one line; on narrow screens the input takes the full width and the buttons wrap below. */
.contact-row[b-ko750nj32o]  .contact-row-edit-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

/* Input renders its own (unscoped, component-owned) .input-container div directly under the
   form, so it's reached with ::deep the same way as the form itself. */
.contact-row[b-ko750nj32o]  .contact-row-edit-form .input-container {
    flex: 1 1 10rem;
    min-width: 8rem;
}

.contact-row[b-ko750nj32o]  .contact-row-edit-input {
    width: 100%;
}

.contact-row-edit-actions[b-ko750nj32o] {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

@media (width <= 480px) {
    .contact-row-icon[b-ko750nj32o] {
        width: 2rem;
        height: 2rem;
    }

    /* Give the value the card's whole width: the body's children join the row's flex layout
       (icon, label + badge, actions on the first line) and the value drops to its own full-width
       line below, so an email or phone number doesn't wrap. */
    .contact-row[b-ko750nj32o] {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
        padding: 1rem;
    }

    .contact-row-body[b-ko750nj32o] {
        display: contents;
    }

    .contact-row-label-row[b-ko750nj32o] {
        flex: 1;
        min-width: 0;
        order: 1;
    }

    .contact-row-actions[b-ko750nj32o] {
        order: 2;
    }

    .contact-row-value[b-ko750nj32o],
    .contact-row[b-ko750nj32o]  .contact-row-edit-form {
        flex: 0 0 100%;
        order: 3;
    }

    .contact-row-value[b-ko750nj32o] {
        font-size: clamp(0.9375rem, 4.6vw, 1.125rem);
    }

    .contact-row[b-ko750nj32o]  .contact-row-edit-form .input-container {
        flex-basis: 100%;
    }

    .contact-row-edit-actions[b-ko750nj32o]  .btn {
        flex: 1;
    }
}
/* /Features/Contacts/Components/ContactsPanel.razor.rz.scp.css */
.contacts-tab[b-nzlc61ro2v] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.contacts-tab-refreshing[b-nzlc61ro2v] {
    opacity: 0.6;
}

.contacts-title[b-nzlc61ro2v] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.contacts-divider[b-nzlc61ro2v] {
    border-top: 1px solid var(--border-colour);
}

.contacts-empty[b-nzlc61ro2v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius, 0.625rem));
}

.contacts-empty-title[b-nzlc61ro2v] {
    margin: 0;
    font-weight: 600;
}

.contacts-empty-text[b-nzlc61ro2v] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.contacts-list[b-nzlc61ro2v] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contacts-error[b-nzlc61ro2v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--muted-foreground);
}
/* /Features/Customers/Components/CustomerCard.razor.rz.scp.css */
.customer-card-scope[b-ohvostjq3b] {
    display: contents;
}

/* The badge never shrinks: when the name leaves it no room, it wraps under it. */
.customer-card-scope[b-ohvostjq3b]  .customer-card-header .card-header-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.customer-card-header-content[b-ohvostjq3b] {
    display: flex;
    flex: 1 1 10rem;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.customer-card-label[b-ohvostjq3b] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.customer-card-name[b-ohvostjq3b] {
    font-weight: 600;
    font-size: 1.0625rem;
}

.customer-card-grid[b-ohvostjq3b] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.customer-card-tile[b-ohvostjq3b] {
    /* The outstanding figure sizes itself from the tile's width (see .customer-card-tile-figure). */
    container-type: inline-size;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--off-white);
}

.customer-card-tile-label[b-ohvostjq3b] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.customer-card-tile-value[b-ohvostjq3b] {
    font-weight: 600;
    font-size: 1rem;
}

/* Money never wraps or truncates: the type steps down from 1rem as the figure gets longer than the tile can hold
   (--chars is its length; about 0.6em per character, punctuation included), as StatTile does. */
.customer-card-tile-figure[b-ohvostjq3b] {
    font-size: clamp(0.6875rem, calc(100cqw / (var(--chars, 1) * 0.6)), 1rem);
    white-space: nowrap;
}

.customer-card-tile-value-owing[b-ohvostjq3b] {
    color: var(--destructive);
}

/* The contact link sits in a span so its press can be told apart from the card's; the span is only as wide as the link. */
.customer-card-contact[b-ohvostjq3b] {
    display: block;
    align-self: flex-start;
    max-width: 100%;
    min-width: 0;
}

/* Touch (T1): a link in a card is its own 44 px row, so its hit area never reaches over the name, which opens the card. */
@media (pointer: coarse) {
    .customer-card-contact[data-card-action][b-ohvostjq3b] {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
    }
}
/* /Features/Customers/Components/CustomerDetails/CustomerJobCard.razor.rz.scp.css */
.customer-job-card[b-rwpgu8k1sl] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius, 0.625rem));
    color: inherit;
    text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.customer-job-card:active[b-rwpgu8k1sl] {
    background: var(--accent);
}

@media (hover: hover) {
    .customer-job-card:hover[b-rwpgu8k1sl] {
        background: var(--accent);
    }
}

.customer-job-card-icon[b-rwpgu8k1sl] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
    color: var(--primary);
}

.customer-job-card-body[b-rwpgu8k1sl] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.customer-job-card-head[b-rwpgu8k1sl] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.customer-job-card-number[b-rwpgu8k1sl] {
    font-weight: 600;
}

.customer-job-card-line[b-rwpgu8k1sl] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-job-card-muted[b-rwpgu8k1sl] {
    color: var(--muted-foreground);
}

.customer-job-card-meta[b-rwpgu8k1sl] {
    font-size: var(--text-sm);
}

.customer-job-card-amount[b-rwpgu8k1sl] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.customer-job-card-owing[b-rwpgu8k1sl] {
    color: var(--destructive);
    font-weight: 600;
}

.customer-job-card-paid[b-rwpgu8k1sl] {
    color: var(--success);
    font-weight: 600;
}

.customer-job-card-due[b-rwpgu8k1sl] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}
/* /Features/Customers/Components/CustomerDetails/CustomerJobsTab.razor.rz.scp.css */
.customer-jobs-tab[b-nb19x4rdmk] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.customer-jobs-tab-refreshing[b-nb19x4rdmk] {
    opacity: 0.6;
}

.customer-jobs-header[b-nb19x4rdmk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.customer-jobs-title[b-nb19x4rdmk] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.customer-jobs-count[b-nb19x4rdmk] {
    color: var(--muted-foreground);
    font-weight: 500;
}

.customer-jobs-list[b-nb19x4rdmk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.customer-jobs-empty[b-nb19x4rdmk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius, 0.625rem));
}

.customer-jobs-empty-icon[b-nb19x4rdmk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.5rem;
    border-radius: 9999px;
    background-color: var(--accent);
    color: var(--muted-foreground);
}

.customer-jobs-empty-title[b-nb19x4rdmk] {
    margin: 0;
    font-weight: 600;
}

.customer-jobs-empty-text[b-nb19x4rdmk] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.customer-jobs-error[b-nb19x4rdmk] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--muted-foreground);
}

.customer-jobs-stat-row[b-nb19x4rdmk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (width <= 480px) {
    .customer-jobs-stat-row[b-nb19x4rdmk] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Customers/Components/CustomerDetails/CustomerJobsTable.razor.rz.scp.css */
.customer-jobs-job-cell[b-12qmhfr9ta] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.customer-jobs-icon[b-12qmhfr9ta] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
    color: var(--primary);
}

.customer-jobs-stack[b-12qmhfr9ta] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    min-width: 0;
    max-width: 100%;
}

.customer-jobs-balance[b-12qmhfr9ta] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}

.customer-jobs-number[b-12qmhfr9ta] {
    font-weight: 600;
}

.customer-jobs-subtext[b-12qmhfr9ta] {
    overflow-wrap: anywhere;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.customer-jobs-owing[b-12qmhfr9ta] {
    color: var(--destructive);
    font-weight: 600;
}

.customer-jobs-paid[b-12qmhfr9ta] {
    color: var(--success);
    font-weight: 600;
}

.customer-jobs-muted[b-12qmhfr9ta] {
    color: var(--muted-foreground);
}
/* /Features/Customers/Components/CustomerDetails/CustomerProfileCard.razor.rz.scp.css */
.customer-profile-skeleton[b-n4k25vug9i] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.customer-profile-error[b-n4k25vug9i] {
    margin: 0;
    color: var(--muted-foreground);
}

/* The shared profile header: the avatar and the edit button share the first row, and the name spans the whole card
   (it never sits in a narrow column beside the buttons). The identity wrapper only groups the markup. */
.customer-profile-header[b-n4k25vug9i] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    align-items: start;
    gap: 0.375rem 0.75rem;
}

.customer-profile-identity[b-n4k25vug9i] {
    display: contents;
}

.customer-profile-avatar[b-n4k25vug9i] {
    grid-column: 1;
    grid-row: 1;
}

.customer-profile-actions[b-n4k25vug9i] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.customer-profile-name[b-n4k25vug9i],
.customer-profile-since[b-n4k25vug9i],
[b-n4k25vug9i] .customer-profile-contact {
    grid-column: 1 / -1;
}

.customer-profile-name[b-n4k25vug9i] {
    justify-self: stretch;
}

.customer-profile-avatar[b-n4k25vug9i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
    color: var(--primary);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

.customer-profile-name[b-n4k25vug9i] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.customer-profile-since[b-n4k25vug9i] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

[b-n4k25vug9i] .customer-profile-contact {
    margin-top: 0.125rem;
}

.customer-profile-edit-button[b-n4k25vug9i] {
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius, 0.625rem);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .customer-profile-edit-button:hover[b-n4k25vug9i] {
        background: var(--accent);
        color: var(--primary);
    }
}

.customer-profile-edit-button:active[b-n4k25vug9i] {
    background: var(--pressed);
    color: var(--primary);
}

.customer-profile-pinned-note[b-n4k25vug9i] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 1.5rem;
}

.customer-profile-all-notes[b-n4k25vug9i] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: var(--text-xs);
    text-decoration: underline;
    cursor: pointer;
}

@media (hover: hover) {
    .customer-profile-all-notes:hover[b-n4k25vug9i] {
        color: var(--primary);
    }
}

/* The opt-out line and its button: they share a row when they fit, else the button wraps under the text. */
.customer-profile-reminders[b-n4k25vug9i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 1rem;
}

.customer-profile-reminders-text[b-n4k25vug9i] {
    display: flex;
    align-items: flex-start;
    flex: 1 1 14rem;
    gap: 0.375rem;
    min-width: 0;
    margin: 0;
    color: var(--warning);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.customer-profile-reminders-text[b-n4k25vug9i]  svg {
    flex: 0 0 auto;
    margin-top: 0.1875rem;
}

.customer-profile-form[b-n4k25vug9i] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-colour);
}

.customer-profile-name-row[b-n4k25vug9i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

[b-n4k25vug9i] .customer-profile-edit-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.customer-profile-form-actions[b-n4k25vug9i] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (width <= 480px) {
    .customer-profile-name-row[b-n4k25vug9i] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Customers/Components/CustomerDetails/CustomerSummaryTab.razor.rz.scp.css */
.customer-summary-tab[b-pvdvqn6t1b] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.customer-summary-tab-refreshing[b-pvdvqn6t1b] {
    opacity: 0.6;
}

.customer-summary-stat-row[b-pvdvqn6t1b] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.customer-summary-last-job-value[b-pvdvqn6t1b] {
    font-weight: 600;
    font-size: 1.25rem;
}

.customer-summary-financial-content[b-pvdvqn6t1b] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.customer-summary-financial-row[b-pvdvqn6t1b] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.customer-summary-financial-label[b-pvdvqn6t1b] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.customer-summary-financial-value[b-pvdvqn6t1b] {
    font-weight: 600;
    font-size: 1.125rem;
}

.customer-summary-financial-value-warning[b-pvdvqn6t1b] {
    color: var(--destructive);
}

.customer-summary-quick-actions[b-pvdvqn6t1b] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.customer-summary-quick-actions[b-pvdvqn6t1b]  .btn {
    width: 100%;
}

.customer-summary-error[b-pvdvqn6t1b] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--muted-foreground);
}

@media (width <= 480px) {
    .customer-summary-stat-row[b-pvdvqn6t1b],
    .customer-summary-quick-actions[b-pvdvqn6t1b] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Customers/Components/CustomerDetails/CustomerTabPlaceholder.razor.rz.scp.css */
.customer-tab-placeholder[b-spon9n6sxd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.375rem;
    padding: 3rem 1.5rem;
    color: var(--muted-foreground);
}

.customer-tab-placeholder-icon[b-spon9n6sxd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.5rem;
    border-radius: 9999px;
    background-color: var(--accent);
    color: var(--muted-foreground);
}

.customer-tab-placeholder-title[b-spon9n6sxd] {
    margin: 0;
    color: var(--primary);
    font-weight: 600;
}

.customer-tab-placeholder-text[b-spon9n6sxd] {
    margin: 0;
    max-width: 24rem;
    font-size: var(--text-sm);
}
/* /Features/Customers/Components/CustomerDetails/CustomerVehicleCard.razor.rz.scp.css */
.customer-vehicle-card[b-hubjoedkxm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius, 0.625rem));
    color: inherit;
    text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.customer-vehicle-card:active[b-hubjoedkxm] {
    background: var(--accent);
}

@media (hover: hover) {
    .customer-vehicle-card:hover[b-hubjoedkxm] {
        background: var(--accent);
    }
}

.customer-vehicle-card-icon[b-hubjoedkxm] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
    color: var(--primary);
}

.customer-vehicle-card-body[b-hubjoedkxm] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.customer-vehicle-card-name[b-hubjoedkxm] {
    max-width: 100%;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-vehicle-card-plate-row[b-hubjoedkxm] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    min-width: 0;
}

.customer-vehicle-card-year[b-hubjoedkxm],
.customer-vehicle-card-meta[b-hubjoedkxm] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.customer-vehicle-card-meta[b-hubjoedkxm] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-vehicle-card-chevron[b-hubjoedkxm] {
    display: flex;
    flex: 0 0 auto;
    color: var(--muted-foreground);
    rotate: -90deg;
}
/* /Features/Customers/Components/CustomerDetails/CustomerVehiclesTab.razor.rz.scp.css */
.customer-vehicles-tab[b-06l9fbz5bz] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.customer-vehicles-tab-refreshing[b-06l9fbz5bz] {
    opacity: 0.6;
}

.customer-vehicles-header[b-06l9fbz5bz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.customer-vehicles-title[b-06l9fbz5bz] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.customer-vehicles-count[b-06l9fbz5bz] {
    color: var(--muted-foreground);
    font-weight: 500;
}

.customer-vehicles-list[b-06l9fbz5bz] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.customer-vehicles-empty[b-06l9fbz5bz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius, 0.625rem));
}

.customer-vehicles-empty-icon[b-06l9fbz5bz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.5rem;
    border-radius: 9999px;
    background-color: var(--accent);
    color: var(--muted-foreground);
}

.customer-vehicles-empty-title[b-06l9fbz5bz] {
    margin: 0;
    font-weight: 600;
}

.customer-vehicles-empty-text[b-06l9fbz5bz] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.customer-vehicles-error[b-06l9fbz5bz] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--muted-foreground);
}
/* /Features/Customers/Components/CustomerDetails/CustomerVehiclesTable.razor.rz.scp.css */
.customer-vehicles-plate-cell[b-dvb41q848p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.customer-vehicles-icon[b-dvb41q848p] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
    color: var(--primary);
}

.customer-vehicles-table[b-dvb41q848p]  .customer-vehicles-name {
    font-weight: 500;
}

.customer-vehicles-table[b-dvb41q848p]  .customer-vehicles-muted {
    color: var(--muted-foreground);
}

.customer-vehicles-table[b-dvb41q848p]  .customer-vehicles-due {
    margin-top: 0.25rem;
    font-weight: 400;
}
/* /Features/Customers/Components/CustomerPicker.razor.rz.scp.css */
/* CardContent renders its own root, so the padding needs ::deep, anchored on this file's root div. */
.customer-picker[b-5z57zkuf4i]  .customer-picker-card-content {
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
}

.customer-picker-state[b-5z57zkuf4i] {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
}

.customer-picker-state-selected[b-5z57zkuf4i] {
    gap: calc(var(--spacing) * 4);
}
/* /Features/Customers/Components/CustomersTable.razor.rz.scp.css */
.customers-table-scope[b-5yccttb87e] {
    display: contents;
}

.customers-table-scope[b-5yccttb87e]  .customers-table-center {
    text-align: center;
}

.customers-table-scope[b-5yccttb87e]  .customers-outstanding-owing {
    color: var(--destructive);
    font-weight: 600;
}

.customers-table-scope[b-5yccttb87e]  .customers-outstanding-clear {
    color: var(--muted-foreground);
}

.customers-table-scope[b-5yccttb87e]  .customers-last-job-empty {
    color: var(--muted-foreground);
}

.customers-table-action[b-5yccttb87e] {
    display: flex;
    justify-content: center;
}
/* /Features/Customers/Components/QuickCustomerForm.razor.rz.scp.css */
.quick-customer-form-hint[b-bs9xrzp20h] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* Contact type and value sit side by side, the value's label hidden but keeping its height so the fields line up.
   They stack on a phone and in Spanish, whose select placeholder wraps to two lines in a half-width column (the
   spacer then goes away, since nothing sits beside it). */
.quick-customer-contact[b-bs9xrzp20h] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-customer-contact[b-bs9xrzp20h]  .quick-customer-contact-spacer {
    visibility: hidden;
}

@media (width <= 30rem) {
    .quick-customer-contact[b-bs9xrzp20h] {
        grid-template-columns: minmax(0, 1fr);
    }

    .quick-customer-contact[b-bs9xrzp20h]  .quick-customer-contact-spacer {
        display: none;
    }
}

:lang(es) .quick-customer-contact[b-bs9xrzp20h] {
    grid-template-columns: minmax(0, 1fr);
}

:lang(es) .quick-customer-contact[b-bs9xrzp20h]  .quick-customer-contact-spacer {
    display: none;
}
/* /Features/Customers/Pages/Customers.razor.rz.scp.css */
.customers-page-content[b-fgzw2mkptm] {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

[b-fgzw2mkptm] .customers-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.customers-search-row[b-fgzw2mkptm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width >= 769px) and (not ((pointer: coarse) and (height < 500px))) {
    .customers-search-row[b-fgzw2mkptm] {
        flex: 1 1 16rem;
    }
}

[b-fgzw2mkptm] .customers-search-input {
    flex: 1 1 auto;
    min-width: 0;
}

[b-fgzw2mkptm] .customers-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.customers-filter-clear[b-fgzw2mkptm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: 1;
    cursor: pointer;
}

[b-fgzw2mkptm] .customers-create-button {
    flex: 0 0 auto;
}

.customers-toolbar-actions[b-fgzw2mkptm] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
}

.customers-empty-actions[b-fgzw2mkptm] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

[b-fgzw2mkptm] .customers-list-content {
    transition: opacity var(--motion-fast) var(--ease-out);
}

[b-fgzw2mkptm] .customers-list-content.is-refreshing {
    opacity: 0.6;
    /* Dims only if the reload takes longer than 150 ms, so a quick refresh never blinks. */
    transition: opacity var(--motion-fast) var(--ease-out) 150ms;
    pointer-events: none;
}

.customers-card-list[b-fgzw2mkptm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    [b-fgzw2mkptm] .customers-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .customers-toolbar-actions[b-fgzw2mkptm] {
        width: 100%;
    }

    [b-fgzw2mkptm] .customers-create-button {
        flex: 1 1 auto;
    }

    .customers-search-row[b-fgzw2mkptm] {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* The filter chip (S1w, T-7). On the phone layout (viewport.js, T-119) the search keeps the full width and the "Filtrado por …"
   chip goes on its own row under it, its label wrapping inside the chip with the ✕ at the end (B2). The same shape on every
   list page with a chip. */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .customers-search-row[b-fgzw2mkptm] {
        flex-wrap: wrap;
    }

    .customers-search-row[b-fgzw2mkptm]  .customers-search-input {
        flex: 1 1 100%;
    }

    .customers-search-row[b-fgzw2mkptm]  .customers-filter-badge {
        flex: 0 1 auto;
        max-width: 100%;
        white-space: normal;
    }
}

/* The chip's ✕ is a small text button: a 44 px tap area on touch without making the chip taller. */
@media (pointer: coarse) {
    .customers-filter-clear[b-fgzw2mkptm] {
        position: relative;
    }

    .customers-filter-clear[b-fgzw2mkptm]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2.75rem;
        height: 2.75rem;
        transform: translate(-50%, -50%);
    }
}
/* /Features/Customers/Pages/CustomersDetails.razor.rz.scp.css */
.customer-details-content[b-mu9j2y6hy6] {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.customer-details-back-link[b-mu9j2y6hy6] {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-decoration: none;
}

@media (hover: hover) {
    .customer-details-back-link:hover[b-mu9j2y6hy6] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.customer-details-layout[b-mu9j2y6hy6] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.customer-details-profile[b-mu9j2y6hy6] {
    min-width: 0;
}

.customer-details-command-center[b-mu9j2y6hy6] {
    min-width: 0;
}

[b-mu9j2y6hy6] .customer-details-tabs-list {
    flex-wrap: nowrap;
}

[b-mu9j2y6hy6] .customer-details-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    color: var(--muted-foreground);
}

.customer-details-not-found-title[b-mu9j2y6hy6] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
}

.customer-details-not-found-text[b-mu9j2y6hy6] {
    margin: 0 0 0.5rem;
}

/* Two columns: the page scrolls as a whole. The profile sticks under the top bar, and so does the top of the
   command center card (CardStickyHeader), on the same line as the profile's top edge. */
@media (width >= 1024px) {
    .customer-details-layout[b-mu9j2y6hy6] {
        grid-template-columns: minmax(18rem, 22rem) 1fr;
    }

    .customer-details-profile[b-mu9j2y6hy6] {
        position: sticky;
        top: calc(var(--sticky-offset) + 0.75rem);
        align-self: start;
        /* A profile taller than the window scrolls on its own instead of hiding its bottom. Two things are kept free
           below it, so its scrolled-to-the-end bottom (the form's buttons) is never under the footer's fade: the footer
           (4 rem, MainLayout) and the distance the profile starts below where it sticks at the top of the page (the back
           link and the gaps above the grid: scroll.js measures it into --sticky-lead; 3 rem until it has). */
        max-height: calc(100dvh - var(--sticky-offset) - 1.5rem - var(--sticky-lead, 3rem) - 4rem);
        overflow-y: auto;
    }
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    /* Growing/scrolling behaviour for the tab strip now lives in the shared Tabs component
       (Components/UI/Tabs/Tabs.razor.css) and applies at every breakpoint, not just mobile. */
}
/* /Features/DataExport/Modals/ExportPasswordModal.razor.rz.scp.css */
.export-password-modal-text[b-8few1h5a3v] {
    margin: 0;
    color: var(--muted-foreground);
}
/* /Features/DeferredWork/Components/DeferredWorkBadge.razor.rz.scp.css */
.deferred-work-badge[b-a9kopq9ewv] {
    display: inline-flex;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
}

.deferred-work-badge-spaced[b-a9kopq9ewv] {
    margin-top: 0.75rem;
}

.deferred-work-badge:focus-visible[b-a9kopq9ewv] {
    border-radius: 999px;
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Long text (es, several items) wraps instead of pushing the badge past the card. */
.deferred-work-badge[b-a9kopq9ewv]  .badge {
    max-width: 100%;
    white-space: normal;
    text-align: left;
}
/* /Features/DeferredWork/Components/DeferredWorkBanner.razor.rz.scp.css */
.deferred-work-banner[b-t7qdim9j7y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.deferred-work-banner-text[b-t7qdim9j7y] {
    flex: 1 1 14rem;
    min-width: 0;
}
/* /Features/DeferredWork/Components/DeferredWorkList.razor.rz.scp.css */
.deferred-work-list[b-bftc04ykb5] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.deferred-work-row[b-bftc04ykb5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-colour);
}

.deferred-work-row:first-child[b-bftc04ykb5] {
    padding-top: 0;
    border-top: 0;
}

.deferred-work-main[b-bftc04ykb5] {
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.deferred-work-head[b-bftc04ykb5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.deferred-work-name[b-bftc04ykb5] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.deferred-work-visit[b-bftc04ykb5],
.deferred-work-muted[b-bftc04ykb5] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

@media (hover: hover) {
    .deferred-work-visit:hover[b-bftc04ykb5] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.deferred-work-side[b-bftc04ykb5] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

.deferred-work-amount[b-bftc04ykb5] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.deferred-work-amount-value[b-bftc04ykb5] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* /Features/DeferredWork/Components/VehicleDeferredWorkCard.razor.rz.scp.css */
.deferred-work-card-count[b-luyo3kuszm] {
    color: var(--muted-foreground);
    font-weight: 400;
}

.deferred-work-card-actions[b-luyo3kuszm] {
    display: flex;
    margin-top: 1rem;
}
/* /Features/DeferredWork/Modals/AddDeferredWorkModal.razor.rz.scp.css */
.add-deferred-note[b-kz2iylc1sx] {
    margin: 0 0 0.75rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.add-deferred-list[b-kz2iylc1sx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.add-deferred-row[b-kz2iylc1sx] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
}

.add-deferred-row-unticked[b-kz2iylc1sx] {
    opacity: 0.6;
}

.add-deferred-body[b-kz2iylc1sx] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    min-width: 0;
}

.add-deferred-head[b-kz2iylc1sx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.add-deferred-name[b-kz2iylc1sx] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.add-deferred-muted[b-kz2iylc1sx] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.add-deferred-description[b-kz2iylc1sx] {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
/* /Features/DeferredWork/Modals/CustomerDeferredWorkModal.razor.rz.scp.css */
.customer-deferred-vehicles[b-c6lahog9v4] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.customer-deferred-vehicle[b-c6lahog9v4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.customer-deferred-vehicle-name[b-c6lahog9v4] {
    color: var(--primary);
    font-weight: 600;
    overflow-wrap: anywhere;
}

@media (hover: hover) {
    .customer-deferred-vehicle-name:hover[b-c6lahog9v4] {
        text-decoration: underline;
    }
}

.customer-deferred-vehicle-actions[b-c6lahog9v4] {
    display: flex;
}
/* /Features/DeferredWork/Modals/DismissDeferredWorkModal.razor.rz.scp.css */
.dismiss-deferred-summary[b-vdx0r8hxta] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.dismiss-deferred-name[b-vdx0r8hxta] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dismiss-deferred-muted[b-vdx0r8hxta] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.dismiss-deferred-reasons[b-vdx0r8hxta] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dismiss-deferred-reason[b-vdx0r8hxta] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    font-size: var(--text-sm);
    text-align: left;
}

.dismiss-deferred-reason-selected[b-vdx0r8hxta] {
    border-color: var(--primary);
    background-color: var(--off-white);
    font-weight: 600;
}
/* /Features/DeferredWork/Modals/MessageDeferredWorkModal.razor.rz.scp.css */
.message-deferred-loading[b-ss4bje4az2] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.message-deferred-body[b-ss4bje4az2] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message-deferred-recipient[b-ss4bje4az2] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.message-deferred-share[b-ss4bje4az2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* /Features/Estimates/Components/EstimateGroupCard.razor.rz.scp.css */
/* A declined group is dimmed part by part, not as a whole: the open ⋮ menu (a child of the title row, outside these parts)
   and the expand chevron stay at full strength. The wrapper is the raw div, the ::deep anchor. */
.estimate-group-card-declined[b-56cco6xqz4]  :is(.estimate-group-card-heading, .estimate-group-card-aside, .card-content) {
    opacity: 0.6;
}

/* The card's own width is what the heading rule below measures: the group card sits in a ~338 px column
   beside the sidebar at 1024 px, on a window that is desktop-wide. */
.estimate-group-card[b-56cco6xqz4] {
    container-type: inline-size;
}

/* CardTitle is nowrap with line-height 1 (built for one-line titles): let the name, badges and description wrap. */
.estimate-group-card-heading[b-56cco6xqz4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    line-height: 1.25;
    white-space: normal;
}

.estimate-group-card-heading-row[b-56cco6xqz4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.estimate-group-card-description[b-56cco6xqz4] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The title row: the heading, the badges and total (aside) and the menu, one row side by side. CardTitle renders the h3
   (flex, space-between): the grid replaces that from the raw wrapper. The heading takes what is left, the others their size. */
.estimate-group-card[b-56cco6xqz4]  .estimate-group-card-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: auto;
    align-items: center;
    gap: 0.5rem 1rem;
}

/* The total (never truncated), after the badges on a phone. */
.estimate-group-card-aside[b-56cco6xqz4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: 0.5rem 1rem;
}

.estimate-group-card-aside-badges[b-56cco6xqz4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-right: auto;
}

/* In a narrow card (a phone, or a side column) the heading never sits in a column beside the total: the name takes the
   card's width with the menu at its top right, and the badges and the total share the row below. */
@container (width < 36rem) {
    .estimate-group-card[b-56cco6xqz4]  .estimate-group-card-title {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "heading menu"
            "aside aside";
        grid-auto-flow: row;
        align-items: start;
        column-gap: 0.5rem;
    }

    .estimate-group-card-heading[b-56cco6xqz4] {
        grid-area: heading;
    }

    .estimate-group-card-menu[b-56cco6xqz4] {
        grid-area: menu;
    }

    .estimate-group-card-aside[b-56cco6xqz4] {
        grid-area: aside;
        flex-shrink: 1;
        justify-content: space-between;
    }

    /* The name being renamed (diff review, Should fix 1; F1): the field takes the title's whole width, the menu moves down
       beside the badges and the total, and the expand chevron steps aside until it closes, so a 360 px phone shows more
       than a dozen characters of the name. */
    .estimate-group-card[b-56cco6xqz4]  .estimate-group-card-title:has(.inline-text-editing) {
        grid-template-areas:
            "heading heading"
            "aside menu";
    }

    .estimate-group-card[b-56cco6xqz4]  .card-header:has(.inline-text-editing) > .card-expand-trigger {
        display: none;
    }
}

.estimate-group-card-photos[b-56cco6xqz4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.estimate-group-card-photo[b-56cco6xqz4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--muted-foreground);
    cursor: pointer;
}

@media (hover: hover) {
    .estimate-group-card-photo:hover[b-56cco6xqz4] {
        border-color: var(--border-colour-darker);
    }
}

.estimate-group-card-photo img[b-56cco6xqz4] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Mobile stacked rows --- */

.estimate-items-mobile[b-56cco6xqz4] {
    display: flex;
    flex-direction: column;
}

/* The description (and its badges) take the row's full width; the quantity × price and the line total share the row
   below it, so a long description never ends up in a narrow column beside the amounts. */
.estimate-item-row-mobile[b-56cco6xqz4] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.75rem;
    align-items: start;
    gap: 0.375rem 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--border-colour);
}

/* A read-only line (Spec - Money §3): text only, no trash beside it. */
.estimate-item-row-mobile-readonly[b-56cco6xqz4] {
    grid-template-columns: minmax(0, 1fr);
}

.estimate-item-row-mobile-main[b-56cco6xqz4] {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* The description and badges as the button that opens Edit details (S1t.16). It reaches the row's left and top edges (its
   padding gives them back), so a tap there still opens it, and stops short of the trash's hit area. */
.estimate-item-row-mobile-open[b-56cco6xqz4] {
    margin: -0.625rem 0 -0.375rem -1rem;
    padding: 0.625rem 0 0.375rem 1rem;
    border: 0;
    border-radius: var(--radius) 0 0 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.estimate-item-row-mobile-open:active[b-56cco6xqz4] {
    background-color: var(--pressed);
}

.estimate-item-row-mobile-open:focus-visible[b-56cco6xqz4] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

.estimate-item-row-mobile-description[b-56cco6xqz4] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.estimate-item-row-mobile-badges[b-56cco6xqz4] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

/* Quantity × price and the line total: the total goes under the fields when they don't fit beside it. */
.estimate-item-row-mobile-amount[b-56cco6xqz4] {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
}

.estimate-item-row-mobile-readonly .estimate-item-row-mobile-amount[b-56cco6xqz4] {
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}

.estimate-item-row-mobile-qty[b-56cco6xqz4] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.estimate-item-row-mobile-total[b-56cco6xqz4] {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
}

/* The trash icon's room in the row's grid. */
.estimate-item-row-mobile-delete-space[b-56cco6xqz4] {
    grid-column: 2;
    grid-row: 1;
    height: 1.5rem;
}

/* A 44 px hit area over that room (T1): the row's top padding is 0.625rem and its side padding 1rem. */
.estimate-item-row-mobile-delete[b-56cco6xqz4] {
    position: absolute;
    top: 0;
    right: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.estimate-item-row-mobile-delete:active[b-56cco6xqz4] {
    background-color: var(--pressed);
}

.estimate-item-row-mobile-delete:focus-visible[b-56cco6xqz4] {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (hover: hover) {
    .estimate-item-row-mobile-open:hover[b-56cco6xqz4],
    .estimate-item-row-mobile-delete:hover[b-56cco6xqz4] {
        background-color: var(--accent);
    }
}

/* The quantity and price fields side by side (two short numbers, F1), on the phone's row and the narrow table's subline. */
.estimate-item-fields[b-56cco6xqz4] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.estimate-item-fields-times[b-56cco6xqz4] {
    color: var(--muted-foreground);
}

.estimate-item-fields[b-56cco6xqz4]  .estimate-item-quantity,
.estimate-item-cell-field[b-56cco6xqz4]  .estimate-item-quantity {
    width: 4.5rem;
}

.estimate-item-fields[b-56cco6xqz4]  .estimate-item-price,
.estimate-item-cell-field[b-56cco6xqz4]  .estimate-item-price {
    width: 9rem;
}

.estimate-item-cell-field[b-56cco6xqz4] {
    display: inline-flex;
}

/* The narrow table's subline holds fields, not text: Table's subline clips and keeps one line (an ellipsis for text), which
   would cut the price's last digits and the fields' focus rings. Here it shows everything, the price drops under the
   quantity when the description column is narrow, and 3 px of room keep the ring whole on every side. */
.estimate-group-card .table-subline.estimate-item-subline[b-56cco6xqz4] {
    overflow: visible;
    white-space: normal;
}

.table-subline .estimate-item-fields[b-56cco6xqz4] {
    flex-wrap: wrap;
    margin: calc(0.375rem - 3px) -3px -3px;
    padding: 3px;
}

/* The line's amount while its inline save runs: the old value until the answer, dimmed only after 150 ms so a quick save
   never blinks (QD-P1; the reduced-motion block in app.css keeps the wait). */
.estimate-item-amount-saving[b-56cco6xqz4] {
    opacity: 0.55;
    transition: opacity var(--motion-fast) var(--ease-out) 150ms;
}

/* A rule the typed quantity or price breaks, said under the line (the field is red, with the same text as its title); on a
   phone a zero to fill in, in amber (M6: visible text, not only the field icon's title). */
.estimate-item-row-error[b-56cco6xqz4],
.estimate-item-row-warning[b-56cco6xqz4] {
    grid-column: 1 / -1;
    font-size: var(--text-xs);
    line-height: 1rem;
}

.estimate-item-row-error[b-56cco6xqz4] {
    color: var(--destructive);
}

.estimate-item-row-warning[b-56cco6xqz4] {
    color: var(--warning);
}

/* Someone else changed the line (S1t.16, Decision 1): the warning under the row, their values and the two answers. */
.estimate-item-row-conflict[b-56cco6xqz4] {
    grid-column: 1 / -1;
}

.estimate-group-card[b-56cco6xqz4]  .estimate-item-conflict-cell {
    padding: 0.5rem 1rem 0.75rem;
}

.estimate-item-stale[b-56cco6xqz4] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    white-space: normal;
}

.estimate-item-stale-theirs[b-56cco6xqz4] {
    font-weight: 600;
    white-space: nowrap;
}

.estimate-item-stale-actions[b-56cco6xqz4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* Same look as the desktop "Add item to group" row (background-accent + border-radius-bottom). */
.estimate-item-row-mobile-add[b-56cco6xqz4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border: 0;
    border-top: 1px solid var(--border-colour);
    border-radius: 0 0 var(--radius) var(--radius);
    background: color-mix(in srgb, var(--accent) 50%, transparent);
    font-weight: 600;
    cursor: pointer;
}

.estimate-group-card-warning[b-56cco6xqz4] {
    width: 100%;
    padding: 0.75rem 1rem;
}

/* The name renamed in place (S1t.17): the button keeps the heading's font and wraps (X4); the open field takes the row's
   width on a phone, and leaves the badges beside it on a wide screen. */
.estimate-group-card-heading-row[b-56cco6xqz4]  .estimate-group-card-name {
    flex: 0 1 auto;
}

.estimate-group-card-heading-row[b-56cco6xqz4]  .estimate-group-card-name.inline-text-editing {
    flex: 1 1 14rem;
}

/* Someone else changed the service (S1t.17): the warning at the top of the card's content, at its full width (the
   heading's column is ~140 px on a phone). Their name is free text: one line with its title (X2). */
.estimate-group-card-name-conflict[b-56cco6xqz4] {
    width: 100%;
    padding: 0.5rem 1rem 0.75rem;
}

.estimate-group-card-stale-theirs[b-56cco6xqz4] {
    display: block;
    font-weight: 600;
}
/* /Features/Estimates/Components/EstimateSendBar.razor.rz.scp.css */
/* Sticks to the bottom of the screen while the tab scrolls (S1t.17, A-37): solid, a top border, above the gesture bar. It
   sits under the toasts (z-index 3000), which keep their place at the bottom for their few seconds. */
.estimate-send-bar[b-zpn7l9oiud] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem 0.25rem calc(0.625rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--background);
    container-type: inline-size;
}

.estimate-send-bar-row[b-zpn7l9oiud] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.estimate-send-bar-total[b-zpn7l9oiud] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.estimate-send-bar-label[b-zpn7l9oiud] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* Money never breaks (X1). */
.estimate-send-bar-amount[b-zpn7l9oiud] {
    font-size: 1.25rem;
    font-weight: 700;
    white-space: nowrap;
}

.estimate-send-bar-row[b-zpn7l9oiud]  .estimate-send-bar-button {
    flex: 0 1 auto;
}

/* Why Send is off, said in words (A-37). */
.estimate-send-bar-reason[b-zpn7l9oiud] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    text-align: end;
}

/* The bar is narrow on a phone (the job page's card padding takes 80 px at 360): the total and the button stack, the total a
   row of its own (label and amount at the two ends, the amount never broken, X1), the button the full width (44 px target
   from its own hit area, T1). Side by side only where both fit whatever the amount. */
@container (width < 28rem) {
    .estimate-send-bar-row[b-zpn7l9oiud] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .estimate-send-bar-total[b-zpn7l9oiud] {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .estimate-send-bar-reason[b-zpn7l9oiud] {
        text-align: start;
    }
}

/* A short touch screen (a phone in landscape) has no room for a docked bar: it sits after the totals (L3). */
@media (pointer: coarse) and (height < 500px) {
    .estimate-send-bar[b-zpn7l9oiud] {
        position: static;
    }
}

/* Out of the way while a field in the tab has focus (a line's quantity or price, a service's name): the keyboard and the
   bar would otherwise cover it. The tab is the bar's ancestor, so the scope attribute lands on the bar alone. */
.estimate-tab:has(input:focus, textarea:focus) .estimate-send-bar[b-zpn7l9oiud] {
    display: none;
}
/* /Features/Estimates/Components/EstimateStatusCard.razor.rz.scp.css */
/* The wrapper is a raw div in this file (so it carries this file's scope) and adds no box of its own. The Card,
   the icon and the buttons render their own roots, so they're reached through ::deep from a raw ancestor. */
.estimate-status-card[b-qgm13gpnpp] {
    display: contents;
}

.estimate-status-card-draft[b-qgm13gpnpp]  .card { border-left: 4px solid var(--muted-foreground); }
.estimate-status-card-sent[b-qgm13gpnpp]  .card { border-left: 4px solid var(--info); }
.estimate-status-card-approved[b-qgm13gpnpp]  .card { border-left: 4px solid var(--success); }
.estimate-status-card-partlyapproved[b-qgm13gpnpp]  .card { border-left: 4px solid var(--warning); }
.estimate-status-card-declined[b-qgm13gpnpp]  .card { border-left: 4px solid var(--destructive); }

.estimate-status-card-body[b-qgm13gpnpp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.estimate-status-card-body[b-qgm13gpnpp]  .estimate-status-card-icon {
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.estimate-status-card-text[b-qgm13gpnpp] {
    flex: 1 1 16rem;
}

.estimate-status-card-warning[b-qgm13gpnpp] {
    margin-top: 0.25rem;
    color: var(--warning);
    font-weight: 500;
}

.estimate-status-card-comment[b-qgm13gpnpp] {
    margin-top: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    background-color: var(--accent, var(--off-white));
    font-style: italic;
}

.estimate-status-card-actions[b-qgm13gpnpp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* The reason Send is off (A-37): a row of its own under the text and the button, at the card's end. */
.estimate-status-card-reason[b-qgm13gpnpp] {
    flex: 1 1 100%;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    text-align: end;
}

.estimate-status-card-actions[b-qgm13gpnpp]  .estimate-status-card-destructive {
    color: var(--destructive);
}

@media (width <= 480px) {
    .estimate-status-card-actions[b-qgm13gpnpp] {
        width: 100%;
    }

    .estimate-status-card-actions[b-qgm13gpnpp]  .btn {
        flex: 1;
    }

    .estimate-status-card-reason[b-qgm13gpnpp] {
        text-align: start;
    }
}

/* What a change would do to a sent or answered estimate, said before any change (X-4): quiet, it's information. */
.estimate-status-card-notice[b-qgm13gpnpp] {
    margin-top: 0.375rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Estimates/Components/EstimateTab.razor.rz.scp.css */
.estimate-tab[b-g3hrdrz2ij] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

/* Dims only if the reload takes longer than 150 ms, so a quick refresh never blinks (QD-P1), and never blocks a tap: the
   next "Add item" right after a dialog closes lands (A-27). */
.estimate-tab-refreshing[b-g3hrdrz2ij] {
    opacity: 0.6;
    transition: opacity var(--motion-fast) var(--ease-out) 150ms;
}

.estimate-tab-error[b-g3hrdrz2ij] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.estimate-tab-header[b-g3hrdrz2ij] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.estimate-tab-heading[b-g3hrdrz2ij] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.estimate-tab-heading h3[b-g3hrdrz2ij] {
    margin: 0;
}

.estimate-tab-summary[b-g3hrdrz2ij] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.estimate-tab-header-actions[b-g3hrdrz2ij] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.estimate-tab-invoice-row[b-g3hrdrz2ij] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius);
    background-color: var(--off-white);
    color: var(--muted-foreground);
}

.estimate-tab-invoice-text[b-g3hrdrz2ij] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.estimate-tab-invoice-note[b-g3hrdrz2ij] {
    font-size: var(--text-sm);
}

@media (width <= 480px) {
    .estimate-tab-header-actions[b-g3hrdrz2ij] {
        width: 100%;
        flex-direction: column-reverse;
    }

    .estimate-tab-header-actions .btn[b-g3hrdrz2ij] {
        width: 100%;
    }

    .estimate-tab-invoice-row[b-g3hrdrz2ij] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Features/Estimates/Components/EstimateTotalsCard.razor.rz.scp.css */
/* A raw wrapper around the Card (a class on the Card itself would carry the Card's scope): full width up to 22rem,
   right-aligned. */
.estimate-totals-card[b-mztkts60hg] {
    width: 100%;
    max-width: 22rem;
    margin-left: auto;
}

.estimate-totals-row[b-mztkts60hg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
}

.estimate-totals-row-muted[b-mztkts60hg] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.estimate-totals-row-total[b-mztkts60hg] {
    font-weight: 700;
    font-size: 1.25rem;
}

.estimate-totals-row-approved[b-mztkts60hg] {
    color: var(--success);
    font-weight: 600;
}

.estimate-totals-divider[b-mztkts60hg] {
    border: none;
    border-top: 1px solid var(--border-colour);
    margin: 0.5rem 0;
}
/* /Features/Estimates/Modals/EstimateGroupModal.razor.rz.scp.css */
.estimate-group-modal-conflict[b-zfqzwgjnfy] {
    margin-bottom: 1rem;
}

.estimate-priority-picker[b-zfqzwgjnfy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.estimate-priority-option[b-zfqzwgjnfy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex: 1 1 auto;
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    font-size: var(--text-sm);
}

.estimate-priority-option-selected[b-zfqzwgjnfy] {
    border-color: var(--primary);
    background-color: var(--off-white);
    font-weight: 600;
}

.estimate-priority-dot[b-zfqzwgjnfy] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.estimate-priority-dot-critical[b-zfqzwgjnfy] { background-color: var(--badge-red-fg); }
.estimate-priority-dot-recommended[b-zfqzwgjnfy] { background-color: var(--badge-amber-fg); }
.estimate-priority-dot-optional[b-zfqzwgjnfy] { background-color: var(--badge-slate-fg); }
/* /Features/Estimates/Modals/EstimateGroupPhotosModal.razor.rz.scp.css */
.estimate-group-photos-hint[b-13vzn3em5m] {
    margin: 0 0 0.75rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* 5.5rem: 3 columns in the space a 360 px phone leaves inside the modal padding. */
.estimate-group-photos-grid[b-13vzn3em5m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: calc(var(--spacing) * 2);
}

.estimate-group-photos-grid[b-13vzn3em5m]  .estimate-group-photos-skeleton {
    aspect-ratio: 1;
}

.estimate-group-photos-tile[b-13vzn3em5m] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--muted-foreground);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .estimate-group-photos-tile:hover:not(:disabled)[b-13vzn3em5m] {
        border-color: var(--border-colour-darker);
    }
}

.estimate-group-photos-tile:focus-visible[b-13vzn3em5m] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.estimate-group-photos-tile:disabled[b-13vzn3em5m] {
    opacity: 0.4;
    cursor: not-allowed;
}

.estimate-group-photos-tile-selected[b-13vzn3em5m] {
    border-color: var(--primary);
}

.estimate-group-photos-tile img[b-13vzn3em5m] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.estimate-group-photos-check[b-13vzn3em5m] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: flex;
    border-radius: 50%;
    background: var(--primary-foreground);
    color: var(--primary);
}

.estimate-group-photos-count[b-13vzn3em5m] {
    margin: 0.75rem 0 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Estimates/Modals/EstimateItemModal.razor.rz.scp.css */
.estimate-item-modal-conflict[b-7rcldqthjy] {
    margin-bottom: 1rem;
}

.estimate-item-modal-hint[b-7rcldqthjy] {
    margin: -0.5rem 0 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.estimate-item-modal-amount[b-7rcldqthjy] {
    margin: 0;
    font-weight: 600;
}

/* Quantity needs at most "9999.25"; the unit price gets the rest. The modal's form container is the
   inline-size container, so a phone-width modal stacks them instead of squeezing the price. */
.estimate-item-modal-quantity-price[b-7rcldqthjy] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 0.5rem;
}

@container (width < 20rem) {
    .estimate-item-modal-quantity-price[b-7rcldqthjy] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* "Add another" sits in a raw span (it keeps the focus in the field on press): the span is the footer's flex item, and its
   button fills it, so the stacked phone footer and the keyboard's slim row lay it out like the other buttons. */
.estimate-item-modal-add-another[b-7rcldqthjy] {
    display: flex;
}

.estimate-item-modal-add-another[b-7rcldqthjy]  .btn {
    flex: 1 1 auto;
}
/* /Features/Estimates/Modals/SendEstimateModal.razor.rz.scp.css */
.send-estimate-modal-loading[b-b1wpww5nzu] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.send-estimate-modal-body[b-b1wpww5nzu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.send-estimate-modal-field label[b-b1wpww5nzu] {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 600;
    font-size: var(--text-sm);
}

.send-estimate-modal-pin[b-b1wpww5nzu] {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.5rem;
    text-align: center;
    padding: 0.5rem;
    border-radius: var(--radius);
    background-color: var(--off-white);
}

.send-estimate-modal-ready[b-b1wpww5nzu] {
    margin: 0;
    font-weight: 500;
}

.send-estimate-modal-hint[b-b1wpww5nzu] {
    margin: 0.375rem 0 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.send-estimate-modal-expiry[b-b1wpww5nzu] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.send-estimate-modal-share[b-b1wpww5nzu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* /Features/Feedback/Components/FeedbackScreenshots.razor.rz.scp.css */
.screenshots[b-fxo4cu1apq] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
}

.screenshots-label[b-fxo4cu1apq] {
    font-size: var(--text-sm);
    font-weight: 500;
}

.screenshots-tiles[b-fxo4cu1apq] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.screenshots-tile[b-fxo4cu1apq] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--muted-foreground);
}

.screenshots-image[b-fxo4cu1apq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Reachable with a thumb: at least 2rem square, over the tile's corner. */
.screenshots-remove[b-fxo4cu1apq] {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
    color: inherit;
    cursor: pointer;
}

.screenshots-remove:disabled[b-fxo4cu1apq] {
    cursor: default;
    opacity: 0.5;
}

.screenshots-remove:focus-visible[b-fxo4cu1apq] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.screenshots-actions[b-fxo4cu1apq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
}

.screenshots-muted[b-fxo4cu1apq],
.screenshots-error[b-fxo4cu1apq] {
    margin: 0;
    font-size: var(--text-sm);
}

.screenshots-muted[b-fxo4cu1apq] {
    min-width: 0;
    color: var(--muted-foreground);
}

.screenshots-error[b-fxo4cu1apq] {
    color: var(--destructive);
}
/* /Features/Feedback/Modals/FeedbackModal.razor.rz.scp.css */
.feedback-kinds[b-c299gppzot] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feedback-kind[b-c299gppzot] {
    flex: 1 1 8rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    font-size: var(--text-sm);
    text-align: center;
}

.feedback-kind-selected[b-c299gppzot] {
    border-color: var(--primary);
    background-color: var(--secondary);
    font-weight: 600;
}

.feedback-muted[b-c299gppzot] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.feedback-counter[b-c299gppzot] {
    align-self: flex-end;
}
/* /Features/GlobalSearchBar/Components/GlobalSearchBar.razor.rz.scp.css */
.component-container[b-wf768juphq] {
    width: 50%;
    position: relative;
}

input:focus[b-wf768juphq] {
    outline: 3px solid var(--off-white);
}

/* The panel: at least 480 px wide (clamped to the viewport), at most 70% of the viewport high, scrolling inside. */
.results-container[b-wf768juphq] {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 50;
    width: max(100%, min(480px, calc(100vw - 2rem)));
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    transform: translateX(-50%);
    margin-top: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--primary-foreground);
    box-shadow: 2px 2px 6px 1px var(--shadow);
}

.results-container-closed[b-wf768juphq] {
    display: none;
}

.text-input[b-wf768juphq] {
    border: 1px solid var(--border-colour);
    padding: 10px 10px 10px 40px;
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius);
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.extra-padding[b-wf768juphq] {
    padding: 10px 35px 10px 40px;
}

.input-container[b-wf768juphq] {
    position: relative;
    width: 100%;
}

.input-container[b-wf768juphq]  .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--muted-foreground);
    pointer-events: none;
}

.remove-icon-container[b-wf768juphq] {
    position: absolute;
    right: 4px;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

.remove-icon-container[b-wf768juphq]  .remove-icon {
    width: 18px;
    height: 18px;
}
/* /Features/GlobalSearchBar/Components/GlobalSearchPhone.razor.rz.scp.css */
.search-icon-button[b-hegdh12d2l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--primary-foreground);
    color: var(--primary);
    cursor: pointer;
}

/* Full screen, above the top bar (below modals). */
.phone-panel[b-hegdh12d2l] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background-color: var(--primary-foreground);
}

.phone-header[b-hegdh12d2l] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    border-bottom: 1px solid var(--border-colour);
}

.header-button[b-hegdh12d2l],
.clear-button[b-hegdh12d2l] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--primary);
    cursor: pointer;
}

.input-container[b-hegdh12d2l] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
}

.text-input[b-hegdh12d2l] {
    width: 100%;
    min-height: 2.75rem;
    box-sizing: border-box;
    padding: 0 2.75rem 0 calc(var(--spacing) * 3);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    -webkit-appearance: none;
    appearance: none;
}

.text-input[b-hegdh12d2l]::-webkit-search-cancel-button {
    display: none;
}

.clear-button[b-hegdh12d2l] {
    position: absolute;
    right: 0;
    color: var(--muted-foreground);
}

.phone-results[b-hegdh12d2l] {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(var(--spacing) * 3);
}
/* /Features/GlobalSearchBar/Components/GlobalSearchResults.razor.rz.scp.css */
.gs-results[b-e8e8jw39oz] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
}

.gs-results-loading .gs-listbox[b-e8e8jw39oz],
.gs-results-loading .gs-message[b-e8e8jw39oz] {
    opacity: 0.5;
}

.gs-spinner[b-e8e8jw39oz] {
    position: absolute;
    top: calc(var(--spacing) * 1);
    right: calc(var(--spacing) * 1);
    z-index: 1;
}

.gs-searching[b-e8e8jw39oz] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing) * 2);
}

.gs-message[b-e8e8jw39oz] {
    margin: 0;
    padding: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    color: var(--muted-foreground);
}

.gs-failed[b-e8e8jw39oz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    color: var(--destructive);
}

.gs-listbox[b-e8e8jw39oz] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
}

.gs-listbox:empty[b-e8e8jw39oz] {
    display: none;
}

.gs-group[b-e8e8jw39oz] {
    display: flex;
    flex-direction: column;
}

/* A line between groups, so one group's end and the next one's heading are obvious on a phone and in the dropdown alike. */
.gs-group + .gs-group[b-e8e8jw39oz] {
    padding-top: calc(var(--spacing) * 3);
    border-top: 1px solid var(--border);
}

/* The heading: the foreground colour, semibold, with room below it. */
.gs-group-label[b-e8e8jw39oz] {
    padding-inline: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 1);
    color: var(--foreground);
    font-weight: 600;
    font-size: var(--text-sm);
}

.gs-row[b-e8e8jw39oz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: calc(var(--radius) - 4px);
}

.gs-option[b-e8e8jw39oz] {
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex: 1 1 12rem;
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    min-height: 2.5rem;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    border-radius: calc(var(--radius) - 4px);
    cursor: pointer;
    font-size: var(--text-sm);
}

.gs-option-active[b-e8e8jw39oz] {
    background-color: var(--off-white);
    outline: 2px solid var(--border-colour-darker);
    outline-offset: -2px;
}

@media (hover: hover) {
    .gs-option:hover[b-e8e8jw39oz] {
        background-color: var(--off-white);
    }
}

.gs-option:active[b-e8e8jw39oz] {
    background-color: var(--pressed);
}

.gs-see-all[b-e8e8jw39oz] {
    color: var(--muted-foreground);
    font-weight: 600;
}

.gs-kind[b-e8e8jw39oz] {
    flex: 0 0 auto;
    padding: 0 calc(var(--spacing) * 1.5);
    border: 1px solid var(--border-colour);
    border-radius: 999px;
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

.gs-row-actions[b-e8e8jw39oz] {
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 1);
}

.gs-action[b-e8e8jw39oz],
.gs-row-actions[b-e8e8jw39oz]  .gs-chip {
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    min-height: 2rem;
    padding: 0 calc(var(--spacing) * 2.5);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--primary-foreground);
    color: var(--primary);
    font: inherit;
    font-size: var(--text-xs);
    white-space: nowrap;
    cursor: pointer;
}

@media (hover: hover) {
    .gs-action:hover[b-e8e8jw39oz],
    .gs-row-actions[b-e8e8jw39oz]  .gs-chip:hover {
        background-color: var(--accent);
    }
}

.gs-action:active[b-e8e8jw39oz],
.gs-row-actions[b-e8e8jw39oz]  .gs-chip:active {
    background-color: var(--pressed);
}

.gs-results[b-e8e8jw39oz]  .gs-row-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.gs-results[b-e8e8jw39oz]  .gs-primary,
.gs-results[b-e8e8jw39oz]  .gs-secondary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-results[b-e8e8jw39oz]  .gs-secondary {
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

.gs-results[b-e8e8jw39oz]  .gs-number {
    font-weight: 600;
}

.gs-results[b-e8e8jw39oz]  .gs-stage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
}

.gs-results[b-e8e8jw39oz]  .gs-badge {
    flex: 0 0 auto;
}

/* Touch: every target at least 44 px high, the chip's own target included. */
@media (pointer: coarse) {
    .gs-option[b-e8e8jw39oz] {
        min-height: 2.75rem;
    }

    .gs-action[b-e8e8jw39oz],
    .gs-row-actions[b-e8e8jw39oz]  .gs-chip {
        min-height: 2.75rem;
    }
}
/* /Features/Home/Components/DueVehiclesCard.razor.rz.scp.css */
.due-vehicles-rows[b-fq9cijy41g] {
    display: flex;
    flex-direction: column;
}

/* Remind sits in the row's bottom-right corner, so the plate's line has the row's whole width (a long plate fits at
   360 px); the lines under it keep clear of the button. */
.due-vehicles-row[b-fq9cijy41g] {
    position: relative;
    min-width: 0;
}

.due-vehicles-customer[b-fq9cijy41g],
.due-vehicles-chips[b-fq9cijy41g],
.due-vehicles-reminded[b-fq9cijy41g] {
    padding-inline-end: 3rem;
}

.due-vehicles-row + .due-vehicles-row[b-fq9cijy41g] {
    border-top: 1px solid var(--border-colour);
}

.due-vehicles-main[b-fq9cijy41g] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.625rem 0.5rem;
    color: var(--primary);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .due-vehicles-main:hover[b-fq9cijy41g] {
        background-color: var(--accent);
    }
}

.due-vehicles-main:active[b-fq9cijy41g] {
    background-color: var(--pressed);
}

.due-vehicles-main:focus-visible[b-fq9cijy41g] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

/* A long plate keeps its width: the vehicle's name wraps under it and truncates there. */
.due-vehicles-line[b-fq9cijy41g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

.due-vehicles-vehicle[b-fq9cijy41g] {
    flex: 1 1 8rem;
}

.due-vehicles-text[b-fq9cijy41g] {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.due-vehicles-vehicle[b-fq9cijy41g] {
    font-weight: 600;
    font-size: var(--text-sm);
}

.due-vehicles-customer[b-fq9cijy41g] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

/* The chips never shrink: the row wraps them. */
.due-vehicles-chips[b-fq9cijy41g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.due-vehicles-reminded[b-fq9cijy41g] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
}

.due-vehicles-remind[b-fq9cijy41g] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset-inline-end: 0.5rem;
    bottom: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--background);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    color: var(--primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .due-vehicles-remind:hover[b-fq9cijy41g] {
        background-color: var(--accent);
    }
}

.due-vehicles-remind:active[b-fq9cijy41g] {
    background-color: var(--pressed);
}

.due-vehicles-remind:focus-visible[b-fq9cijy41g] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.due-vehicles-open[b-fq9cijy41g] {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* A long check name (a shop's own, up to 40 characters) wraps inside its chip instead of pushing past the card. */
.due-vehicles-chips[b-fq9cijy41g]  .badge {
    max-width: 100%;
    white-space: normal;
    text-align: left;
}
/* /Features/Home/Components/HomeButtonRow.razor.rz.scp.css */
.home-button-row[b-arw87ndmij] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

/* The buttons are the Button component's own markup, so ::deep (anchored at the row, a raw element here) reaches
   them. On a phone the icon sits above a label that wraps onto two lines: never truncated. */
.home-button-row[b-arw87ndmij]  .home-button {
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    height: auto;
    min-height: 2.25rem;
    padding: 0.5rem 0.375rem;
    text-align: center;
    white-space: normal;
}

.home-button-row[b-arw87ndmij]  .home-button .btn-label {
    overflow-wrap: break-word;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width >= 769px) and (not ((pointer: coarse) and (height < 500px))) {
    .home-button-row[b-arw87ndmij] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }

    .home-button-row[b-arw87ndmij]  .home-button {
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.375rem 1rem;
    }
}
/* /Features/Home/Components/HomeEmptyState.razor.rz.scp.css */
.home-empty[b-m2oh94mhoj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.5rem;
    text-align: center;
}

.home-empty-message[b-m2oh94mhoj] {
    margin: 0;
    color: var(--muted-foreground);
}

.home-empty-hint[b-m2oh94mhoj] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Home/Components/HomeTiles.razor.rz.scp.css */
.home-tiles[b-u95w9ya9pu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

/* A lone last tile (an owner's third tile, or the only one) spans its row. */
.home-tile-cell:last-child:nth-child(odd)[b-u95w9ya9pu] {
    grid-column: 1 / -1;
}

.home-tile-cell[b-u95w9ya9pu] {
    display: flex;
    min-width: 0;
    container-type: inline-size;
}

.home-tile-title[b-u95w9ya9pu] {
    min-width: 0;
    font-size: var(--text-sm);
    line-height: 1.25;
    white-space: normal;
}

/* A value never wraps or truncates (it is .nowrap): the type steps down from 1.5rem as the figure gets longer than the
   tile can hold (--chars is its length; about 0.62em per character, punctuation included). The tile is the container,
   and its content is 2.25rem narrower than it (the card's side padding and borders). */
.home-tile-value[b-u95w9ya9pu] {
    display: block;
    font-size: clamp(0.8125rem, calc((100cqw - 2.25rem) / (var(--chars, 1) * 0.62)), 1.5rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.home-tile-footer[b-u95w9ya9pu] {
    overflow: hidden;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: normal;
}
/* /Features/Home/Components/NeedsAttentionCard.razor.rz.scp.css */
.attention-rows[b-9eqw1jjpf0] {
    display: flex;
    flex-direction: column;
}

.attention-row[b-9eqw1jjpf0] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.625rem 0.5rem;
    color: var(--primary);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.attention-row + .attention-row[b-9eqw1jjpf0] {
    border-top: 1px solid var(--border-colour);
}

@media (hover: hover) {
    .attention-row:hover[b-9eqw1jjpf0] {
        background-color: var(--accent);
    }
}

.attention-row:active[b-9eqw1jjpf0] {
    background-color: var(--pressed);
}

/* The rows sit in cards, so the ring is drawn inside the row. */
.attention-row:focus-visible[b-9eqw1jjpf0] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

.attention-row-line[b-9eqw1jjpf0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.attention-row-reason[b-9eqw1jjpf0] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: var(--text-sm);
}

.attention-row-age[b-9eqw1jjpf0] {
    flex: 0 0 auto;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.attention-row-details[b-9eqw1jjpf0] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.attention-row-number[b-9eqw1jjpf0] {
    flex: 0 0 auto;
    color: var(--primary);
    font-weight: 700;
}

.attention-row-text[b-9eqw1jjpf0] {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Features/Home/Components/NotesDueCard.razor.rz.scp.css */
.notes-due-rows[b-qm13dbzoqy] {
    display: flex;
    flex-direction: column;
}

.notes-due-row[b-qm13dbzoqy] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.625rem 0;
}

.notes-due-row + .notes-due-row[b-qm13dbzoqy] {
    border-top: 1px solid var(--border-colour);
}

.notes-due-body[b-qm13dbzoqy] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.notes-due-text[b-qm13dbzoqy] {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.notes-due-meta[b-qm13dbzoqy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.125rem;
    font-size: var(--text-xs);
}

.notes-due-owner[b-qm13dbzoqy] {
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    color: var(--primary);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notes-due-when[b-qm13dbzoqy] {
    color: var(--muted-foreground);
}

.notes-due-when-overdue[b-qm13dbzoqy] {
    color: var(--warning);
    font-weight: 600;
}
/* /Features/Home/Components/RecentActivity.razor.rz.scp.css */
/* Three rows, the header and a pager of 44 px touch targets: the card is fixed so the Home grid doesn't jump from page to page. */
[b-r8j1ag3ydd] .recent-activity-card {
    box-sizing: border-box;
    height: 17.5rem;
}

[b-r8j1ag3ydd] .recent-activity-header {
    padding: 1rem 1.5rem 0;
}

[b-r8j1ag3ydd] .recent-activity-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0;
}

[b-r8j1ag3ydd] .recent-activity-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    padding: 0.75rem;
}

.recent-activity-list[b-r8j1ag3ydd] {
    display: grid;
}

.recent-activity-item[b-r8j1ag3ydd] {
    min-width: 0;
}

.recent-activity-item-link[b-r8j1ag3ydd] {
    width: 100%;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius);
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
}

@media (hover: hover) {
    .recent-activity-item-link:hover[b-r8j1ag3ydd] {
        background-color: var(--off-white);
    }

    .recent-activity-item-link:not(:disabled):hover .recent-activity-label[b-r8j1ag3ydd] {
        text-underline-offset: 0.1875rem;
    }
}

.recent-activity-item-link:not(:disabled)[b-r8j1ag3ydd] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.recent-activity-item-link:not(:disabled):active[b-r8j1ag3ydd] {
    background-color: var(--pressed);
}

.recent-activity-item-link:not(:disabled):focus-visible .recent-activity-label[b-r8j1ag3ydd] {
    text-underline-offset: 0.1875rem;
}

.recent-activity-item-link:focus-visible[b-r8j1ag3ydd] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

.recent-activity-meta[b-r8j1ag3ydd] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted-foreground, #737373);
    font-size: var(--text-xs);
    line-height: 1rem;
}

.recent-activity-meta span:last-child[b-r8j1ag3ydd] {
    flex: 0 0 auto;
}

.recent-activity-label[b-r8j1ag3ydd] {
    overflow: hidden;
    color: var(--primary, #0a0a0a);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-activity-pagination[b-r8j1ag3ydd] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    color: var(--muted-foreground, #737373);
    font-size: 0.8125rem;
    line-height: 1rem;
}

[b-r8j1ag3ydd] .recent-activity-footer {
    padding-top: 0;
}

/* 44 px touch targets; the first at the start and the last at the end of the grid, the count centred between them. */
.recent-activity-pagination button[b-r8j1ag3ydd] {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.75rem;
    border: 0;
    background: transparent;
    color: var(--primary, #0a0a0a);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* The text stays aligned with the card's content: the target's padding reaches into the footer's own. */
.recent-activity-pagination button:first-child[b-r8j1ag3ydd] {
    justify-self: start;
    margin-inline-start: -0.75rem;
}

.recent-activity-pagination button:last-child[b-r8j1ag3ydd] {
    justify-self: end;
    margin-inline-end: -0.75rem;
}

.recent-activity-pagination button:disabled[b-r8j1ag3ydd] {
    color: var(--muted-foreground, #737373);
    font-weight: 400;
    cursor: default;
}
/* /Features/Home/Components/WorkshopCard.razor.rz.scp.css */
.workshop-card-header[b-kqhijp6un3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* The two scope buttons share the width they get equally (a long Spanish label never makes one fatter than the other); the
   group takes the rest of the header's row, or its own row when the title leaves too little. */
.workshop-card-scope[b-kqhijp6un3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1 14rem;
    max-width: 24rem;
    gap: 0.375rem;
}

.workshop-card-scope[b-kqhijp6un3]  .btn {
    width: 100%;
}

/* Touch (T-23): a segment is 44 px tall. */
@media (pointer: coarse) {
    .workshop-card-scope[b-kqhijp6un3]  .btn {
        min-height: 2.75rem;
    }
}

/* At 360 px the three tabs share the strip: a label shrinks to an ellipsis, the count never does. The trigger is
   TabsTrigger's own button, reached from the raw .workshop-card wrapper. */
.workshop-card[b-kqhijp6un3]  .tabs-trigger.workshop-card-tab-trigger {
    min-width: 0;
    padding-inline: 0.5rem;
    white-space: normal;
}

/* A label that doesn't fit beside its count wraps onto a second line ("In workshop"); neither is ever cut. */
.workshop-card-trigger[b-kqhijp6un3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 0;
    text-align: center;
}

.workshop-card-tab[b-kqhijp6un3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.workshop-card-rows[b-kqhijp6un3] {
    display: flex;
    flex-direction: column;
}

.workshop-card-open[b-kqhijp6un3] {
    align-self: flex-end;
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: 500;
}
/* /Features/Home/Components/WorkshopJobRow.razor.rz.scp.css */
.workshop-row[b-m14bmgrpga] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.625rem 0.5rem;
    color: var(--primary);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.workshop-row + .workshop-row[b-m14bmgrpga] {
    border-top: 1px solid var(--border-colour);
}

@media (hover: hover) {
    .workshop-row:hover[b-m14bmgrpga] {
        background-color: var(--accent);
    }
}

.workshop-row:active[b-m14bmgrpga] {
    background-color: var(--pressed);
}

/* The rows sit in cards, so the ring is drawn inside the row. */
.workshop-row:focus-visible[b-m14bmgrpga] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

.workshop-row-line[b-m14bmgrpga] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* The status badge never shrinks: it wraps to the next line when the row is too narrow. */
.workshop-row-head[b-m14bmgrpga] {
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

.workshop-row-time[b-m14bmgrpga] {
    font-weight: 600;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.workshop-row-number[b-m14bmgrpga] {
    font-weight: 700;
    font-size: var(--text-sm);
}

.workshop-row-spacer[b-m14bmgrpga] {
    flex: 1 1 auto;
}

.workshop-row-age[b-m14bmgrpga] {
    flex: 0 0 auto;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.workshop-row-details[b-m14bmgrpga] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.workshop-row-text[b-m14bmgrpga] {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Features/Home/Pages/Home.razor.rz.scp.css */
.home-page[b-j8t014jm7j] {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

.home-greeting[b-j8t014jm7j] {
    margin: 0;
}

.home-grid[b-j8t014jm7j] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

/* Switching Mine: the old scope's cards stay, dimmed only if the answer takes longer than 150 ms, so a quick one never
   blinks. The class name ends in "-list-content" so app.css's reduced-motion block keeps the 150 ms wait. */
.home-list-content[b-j8t014jm7j] {
    transition: opacity var(--motion-fast) var(--ease-out);
}

.home-list-content.is-refreshing[b-j8t014jm7j] {
    opacity: 0.6;
    transition: opacity var(--motion-fast) var(--ease-out) 150ms;
}

/* Phone and tablet: the column wrappers vanish, so every slot is a direct item of .home-grid and takes its order. */
.home-column[b-j8t014jm7j] {
    display: contents;
}

.home-slot[b-j8t014jm7j] {
    min-width: 0;
}

.home-slot-workshop[b-j8t014jm7j] { order: 1; }
.home-slot-tiles[b-j8t014jm7j] { order: 2; }
.home-slot-attention[b-j8t014jm7j] { order: 3; }
.home-slot-due[b-j8t014jm7j] { order: 4; }
.home-slot-notes[b-j8t014jm7j] { order: 5; }
.home-slot-week[b-j8t014jm7j] { order: 6; }
.home-slot-recent[b-j8t014jm7j] { order: 7; }

/* Wide enough for two columns (the app area, not the window, as app.css's grids): main 2fr, side 1fr. */
@container (width >= 60rem) {
    .home-grid[b-j8t014jm7j] {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }

    .home-column[b-j8t014jm7j] {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        min-width: 0;
    }
}
/* /Features/Home/Pages/HomeSkeletonLoader.razor.rz.scp.css */
.home-skeleton-tiles[b-uq70u87mxg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
/* /Features/Import/Components/ImportColumnsStep.razor.rz.scp.css */
.import-columns-scope[b-znoniycbwo] {
    display: contents;
}

.import-columns-scope[b-znoniycbwo]  .import-columns-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.import-columns-intro[b-znoniycbwo] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.import-columns-pickers[b-znoniycbwo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

/* A select with long options never shares a row with another on a phone (CLAUDE.md, mobile inputs). */
.import-columns-picker[b-znoniycbwo] {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: 28rem;
}

.import-columns-scope[b-znoniycbwo]  .import-columns-header {
    font-weight: 600;
}

.import-columns-scope[b-znoniycbwo]  .import-columns-samples {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.import-columns-cards[b-znoniycbwo] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.import-columns-card[b-znoniycbwo] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.import-columns-options[b-znoniycbwo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.import-step-actions[b-znoniycbwo] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* /Features/Import/Components/ImportCountsGrid.razor.rz.scp.css */
.import-counts[b-8drv2wmkzq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.import-count[b-8drv2wmkzq] {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 0.125rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.import-count dt[b-8drv2wmkzq] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.import-count dd[b-8drv2wmkzq] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}
/* /Features/Import/Components/ImportFilePicker.razor.rz.scp.css */
.import-picker-scope[b-sfs8ayauqk] {
    display: contents;
}

.import-picker-scope[b-sfs8ayauqk]  .import-picker-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.import-drop[b-sfs8ayauqk] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 2rem 1rem;
    border: 2px dashed var(--border-colour-darker);
    border-radius: var(--radius);
    background: var(--off-white);
    text-align: center;
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

.import-drop-compact[b-sfs8ayauqk] {
    padding: 1.25rem 1rem;
}

.import-drop:focus-within[b-sfs8ayauqk] {
    border-color: var(--primary);
}

@media (hover: hover) {
    .import-drop:hover[b-sfs8ayauqk] {
        border-color: var(--primary);
    }
}

.import-drop:focus-within[b-sfs8ayauqk] {
    box-shadow: var(--focus-ring);
}

.import-drop-busy[b-sfs8ayauqk] {
    opacity: 0.7;
}

/* The real input, invisible, over the whole zone: it takes the click, the tap and the drop. */
.import-drop[b-sfs8ayauqk]  .import-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.import-drop[b-sfs8ayauqk]  .import-drop-icon {
    color: var(--muted-foreground);
}

.import-drop-title[b-sfs8ayauqk] {
    margin: 0;
    font-weight: 600;
}

.import-drop-button[b-sfs8ayauqk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 1rem;
    border-radius: var(--radius);
    background-color: var(--primary);
    color: var(--primary-foreground);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
}

.import-drop-hint[b-sfs8ayauqk] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}
/* /Features/Import/Components/ImportInstructionsCard.razor.rz.scp.css */
.import-instructions-scope[b-t8xs2akvxb] {
    display: contents;
}

.import-instructions-scope[b-t8xs2akvxb]  .import-instructions-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.import-instructions-list[b-t8xs2akvxb] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding-left: 1.25rem;
    font-size: var(--text-sm);
}

.import-instructions-save[b-t8xs2akvxb] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.import-instructions-subtitle[b-t8xs2akvxb] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.import-instructions-actions[b-t8xs2akvxb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.import-instructions-help[b-t8xs2akvxb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.import-instructions-mail[b-t8xs2akvxb] {
    overflow-wrap: anywhere;
    color: var(--primary);
    font-weight: 500;
}
/* /Features/Import/Components/ImportPreviewStep.razor.rz.scp.css */
.import-preview-scope[b-k5hexuaob0] {
    display: contents;
}

.import-preview-scope[b-k5hexuaob0]  .import-preview-content {
    min-width: 0;
}

.import-preview-checking[b-k5hexuaob0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.import-preview-body[b-k5hexuaob0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.import-preview-summary[b-k5hexuaob0] {
    margin: 0;
    font-weight: 600;
}

.import-preview-dot[b-k5hexuaob0] {
    color: var(--muted-foreground);
}

.import-preview-promise[b-k5hexuaob0],
.import-preview-empty[b-k5hexuaob0] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.import-preview-chips[b-k5hexuaob0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.import-chip[b-k5hexuaob0] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    color: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

/* Touch (T-23): a filter pill is 44 px tall. */
@media (pointer: coarse) {
    .import-chip[b-k5hexuaob0] {
        min-height: 2.75rem;
    }
}

@media (hover: hover) {
    .import-chip:hover[b-k5hexuaob0] {
        border-color: var(--border-colour-darker);
    }
}

.import-chip:focus-visible[b-k5hexuaob0] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.import-chip-active[b-k5hexuaob0] {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
}

.import-chip-count[b-k5hexuaob0] {
    font-weight: 600;
}

.import-preview-cards[b-k5hexuaob0] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.import-preview-card[b-k5hexuaob0] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.import-preview-card-top[b-k5hexuaob0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.import-preview-rownumber[b-k5hexuaob0] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.import-preview-customer[b-k5hexuaob0] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.import-preview-name[b-k5hexuaob0] {
    font-weight: 600;
}

.import-preview-contacts[b-k5hexuaob0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: 0;
}

.import-preview-contact[b-k5hexuaob0] {
    max-width: 100%;
    padding: 0 0.375rem;
    border-radius: calc(var(--radius) - 0.125rem);
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.import-preview-messages[b-k5hexuaob0] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.import-preview-message[b-k5hexuaob0] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.import-step-actions[b-k5hexuaob0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Each figure wraps as a unit ("1 vehículo ya registrado" never splits after its number). */
.import-preview-part[b-k5hexuaob0] {
    display: inline-block;
}
/* /Features/Import/Components/ImportProgressStep.razor.rz.scp.css */
.import-progress-scope[b-a1tg8cu6kp] {
    display: contents;
}

.import-progress-scope[b-a1tg8cu6kp]  .import-progress-content {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
}

.import-progress[b-a1tg8cu6kp] {
    overflow: hidden;
    height: 0.625rem;
    border-radius: 999px;
    background: var(--muted);
}

.import-progress-bar[b-a1tg8cu6kp] {
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: width var(--motion-base) var(--ease-out);
}

.import-progress-text[b-a1tg8cu6kp] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.import-progress-note[b-a1tg8cu6kp],
.import-progress-alert-text[b-a1tg8cu6kp] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.import-progress-alert-text[b-a1tg8cu6kp] {
    margin-bottom: 0.75rem;
}

.import-step-actions[b-a1tg8cu6kp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.import-step-actions-start[b-a1tg8cu6kp] {
    justify-content: flex-start;
}
/* /Features/Import/Components/ImportVehicleLine.razor.rz.scp.css */
.import-vehicle-line[b-ggdup6bmyi] {
    min-width: 0;
    font-size: var(--text-sm);
}

.import-vehicle-plate[b-ggdup6bmyi] {
    flex-shrink: 0;
    font-weight: 600;
}
/* /Features/Import/Components/LastImportCard.razor.rz.scp.css */
.last-import-scope[b-19s2j9f94t] {
    display: contents;
}

.last-import-scope[b-19s2j9f94t]  .last-import-content {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.last-import-header[b-19s2j9f94t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.last-import-meta[b-19s2j9f94t],
.last-import-note[b-19s2j9f94t] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.last-import-actions[b-19s2j9f94t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* /Features/Import/Pages/ImportPage.razor.rz.scp.css */
.import-page[b-fuvs8lv2yv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 72rem;
    min-width: 0;
}

/* The steps sit inside the stepper's body (QD-W7): the header-to-step distance stays the page's 1rem. `.import-page` is raw
   HTML in ImportPage.razor, the ::deep anchor. */
.import-page[b-fuvs8lv2yv]  .stepper {
    gap: 1rem;
}

.import-header[b-fuvs8lv2yv] {
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
    min-width: 0;
}

.import-title[b-fuvs8lv2yv] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.import-subtitle[b-fuvs8lv2yv] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.import-file-step[b-fuvs8lv2yv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
/* /Features/Inspections/Components/FindingQuoteRow.razor.rz.scp.css */
.build-estimate-row[b-4rapxeyr94] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
}

.build-estimate-row-unticked[b-4rapxeyr94] {
    opacity: 0.6;
}

.build-estimate-body[b-4rapxeyr94] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    min-width: 0;
}

.build-estimate-head[b-4rapxeyr94] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.build-estimate-name[b-4rapxeyr94] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.build-estimate-note[b-4rapxeyr94] {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.build-estimate-muted[b-4rapxeyr94] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.build-estimate-template[b-4rapxeyr94] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    width: 100%;
}

.build-estimate-template-name[b-4rapxeyr94] {
    font-size: var(--text-sm);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.build-estimate-template[b-4rapxeyr94]  .build-estimate-select {
    min-width: 0;
    max-width: 100%;
}
/* /Features/Inspections/Components/InspectionCard.razor.rz.scp.css */
.inspection-card-scope[b-4fpnepcrrq] {
    display: contents;
}

.inspection-card-scope[b-4fpnepcrrq]  .inspection-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.inspection-card-top[b-4fpnepcrrq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.inspection-card-heading[b-4fpnepcrrq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    min-width: 0;
}

.inspection-card-name[b-4fpnepcrrq] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.inspection-card-menu[b-4fpnepcrrq] {
    flex: 0 0 auto;
}

.inspection-card-meta[b-4fpnepcrrq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.inspection-card-action[b-4fpnepcrrq] {
    display: flex;
}

/* The label is long in Spanish ("Armar presupuesto con los hallazgos"): at 360px the button takes the card's width and
   wraps its label instead of running out of the card. */
.inspection-card-action[b-4fpnepcrrq]  .btn {
    max-width: 100%;
    height: auto;
    min-height: 2rem;
    padding-block: 0.375rem;
    white-space: normal;
    text-align: left;
}
/* /Features/Inspections/Components/InspectionCountsPills.razor.rz.scp.css */
.inspection-counts[b-hzssp1zr9u] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.inspection-counts-pill[b-hzssp1zr9u] {
    min-width: 1.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.inspection-counts-urgent[b-hzssp1zr9u] {
    background: var(--destructive);
    color: var(--destructive-foreground);
}

.inspection-counts-attention[b-hzssp1zr9u] {
    background: var(--warning);
    color: var(--warning-foreground);
}

.inspection-counts-good[b-hzssp1zr9u] {
    background: var(--success);
    color: var(--success-foreground);
}

.inspection-counts-notchecked[b-hzssp1zr9u] {
    background: var(--accent);
    color: var(--primary);
}

.inspection-counts-zero[b-hzssp1zr9u] {
    background: var(--accent);
    color: var(--muted-foreground);
}
/* /Features/Inspections/Components/InspectionItemCard.razor.rz.scp.css */
.inspection-item[b-8r02p0xzxb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--border-colour);
    border-left: 4px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--primary-foreground);
}

.inspection-item-good[b-8r02p0xzxb] {
    border-left-color: var(--success);
}

.inspection-item-attention[b-8r02p0xzxb] {
    border-left-color: var(--warning);
}

.inspection-item-urgent[b-8r02p0xzxb] {
    border-left-color: var(--destructive);
}

.inspection-item-na[b-8r02p0xzxb] {
    background: var(--off-white);
}

.inspection-item-na .inspection-item-name[b-8r02p0xzxb] {
    color: var(--muted-foreground);
}

/* Phone: the name and the menu on top, the three buttons across the full width under them. Wider: the buttons join
   the name's line. */
.inspection-item-row[b-8r02p0xzxb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "heading menu"
        "states states";
    align-items: start;
    gap: 0.5rem;
}

.inspection-item-heading[b-8r02p0xzxb] {
    grid-area: heading;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.inspection-item-menu[b-8r02p0xzxb] {
    grid-area: menu;
}

.inspection-item-states[b-8r02p0xzxb] {
    grid-area: states;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.375rem;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width >= 768px) and (not ((pointer: coarse) and (height < 500px))) {
    .inspection-item-row[b-8r02p0xzxb] {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "heading states menu";
        align-items: center;
    }

    .inspection-item-states[b-8r02p0xzxb] {
        grid-template-columns: repeat(3, 7rem);
    }
}

.inspection-item-title[b-8r02p0xzxb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.inspection-item-name[b-8r02p0xzxb] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.inspection-item-meta[b-8r02p0xzxb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-height: 1.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.inspection-item-status[b-8r02p0xzxb] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.inspection-item-status-failed[b-8r02p0xzxb] {
    color: var(--destructive);
    font-weight: 500;
}

.inspection-item-retry[b-8r02p0xzxb] {
    min-height: 2rem;
    padding: 0 0.25rem;
    border: none;
    background: none;
    color: var(--destructive);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* At least 48 px tall: tapped all day, often with gloves. */
.inspection-state-button[b-8r02p0xzxb] {
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 3rem;
    padding: 0 0.5rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--primary-foreground);
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .inspection-state-button:hover:not(:disabled)[b-8r02p0xzxb] {
        background: var(--accent);
    }
}

.inspection-state-button:active:not(:disabled):not(.inspection-state-button-selected)[b-8r02p0xzxb] {
    background: var(--pressed);
}

.inspection-state-button:focus-visible[b-8r02p0xzxb] {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-foreground), 0 0 0 4px var(--ring);
}

.inspection-state-button:disabled[b-8r02p0xzxb] {
    cursor: default;
}

.inspection-state-button:disabled:not(.inspection-state-button-selected)[b-8r02p0xzxb] {
    opacity: 0.45;
}

.inspection-state-button-good[b-8r02p0xzxb] {
    color: var(--success);
}

.inspection-state-button-attention[b-8r02p0xzxb] {
    color: var(--warning);
}

.inspection-state-button-urgent[b-8r02p0xzxb] {
    color: var(--destructive);
}

.inspection-state-button-label[b-8r02p0xzxb] {
    color: var(--primary);
}

.inspection-state-button-selected.inspection-state-button-good[b-8r02p0xzxb] {
    border-color: var(--success);
    background: var(--success);
    color: var(--success-foreground);
}

@media (hover: hover) {
    .inspection-state-button-selected.inspection-state-button-good:hover:not(:disabled)[b-8r02p0xzxb] {
        border-color: var(--success);
        background: var(--success);
        color: var(--success-foreground);
    }
}

.inspection-state-button-selected.inspection-state-button-attention[b-8r02p0xzxb] {
    border-color: var(--warning);
    background: var(--warning);
    color: var(--warning-foreground);
}

@media (hover: hover) {
    .inspection-state-button-selected.inspection-state-button-attention:hover:not(:disabled)[b-8r02p0xzxb] {
        border-color: var(--warning);
        background: var(--warning);
        color: var(--warning-foreground);
    }
}

.inspection-state-button-selected.inspection-state-button-urgent[b-8r02p0xzxb] {
    border-color: var(--destructive);
    background: var(--destructive);
    color: var(--destructive-foreground);
}

@media (hover: hover) {
    .inspection-state-button-selected.inspection-state-button-urgent:hover:not(:disabled)[b-8r02p0xzxb] {
        border-color: var(--destructive);
        background: var(--destructive);
        color: var(--destructive-foreground);
    }
}

.inspection-state-button-selected .inspection-state-button-label[b-8r02p0xzxb] {
    color: inherit;
}

/* Icon only on the narrowest phones; the label stays as aria-label and title. */
@media (width < 400px) {
    .inspection-state-button-label[b-8r02p0xzxb] {
        display: none;
    }
}

.inspection-item-toggle[b-8r02p0xzxb] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0 0.25rem;
    border: none;
    border-radius: calc(var(--radius) / 2);
    background: none;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
}

@media (hover: hover) {
    .inspection-item-toggle:hover[b-8r02p0xzxb] {
        color: var(--primary);
    }
}

.inspection-item-toggle:focus-visible[b-8r02p0xzxb] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.inspection-item-toggle-dot[b-8r02p0xzxb] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--info);
}

.inspection-item-toggle[b-8r02p0xzxb]  .inspection-item-chevron {
    transition: transform var(--motion-fast) var(--ease-out);
}

.inspection-item-toggle[b-8r02p0xzxb]  .inspection-item-chevron-open {
    transform: rotate(180deg);
}

/* The details' Collapse is a flex child of the card, so the card's 0.5rem gap would follow a closed one: a closed one pulls
   it back (and the margin eases with the row). The Collapse is a component, so the rule needs the card as its raw ancestor. */
.inspection-item[b-8r02p0xzxb]  .inspection-item-collapse {
    margin-top: -0.5rem;
    transition: grid-template-rows var(--motion-base) var(--ease-out), opacity var(--motion-fast) var(--ease-out), margin-top var(--motion-base) var(--ease-out);
}

.inspection-item[b-8r02p0xzxb]  .inspection-item-collapse.ui-collapse-open {
    margin-top: 0;
}

.inspection-item-details[b-8r02p0xzxb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.inspection-item-stale[b-8r02p0xzxb] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.inspection-item-stale-theirs[b-8r02p0xzxb] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--warning);
    background: var(--primary-foreground);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.inspection-item-stale-actions[b-8r02p0xzxb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.inspection-item-findings[b-8r02p0xzxb] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.inspection-item-findings-hint[b-8r02p0xzxb] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.inspection-item-findings-list[b-8r02p0xzxb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.inspection-finding[b-8r02p0xzxb] {
    min-height: 2.5rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: 999px;
    background: var(--primary-foreground);
    color: var(--primary);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
}

.inspection-finding-attention[b-8r02p0xzxb] {
    border-color: var(--warning);
    background: var(--warning-foreground);
}

.inspection-finding-urgent[b-8r02p0xzxb] {
    border-color: var(--destructive);
    background: var(--destructive-foreground);
}

.inspection-finding:focus-visible[b-8r02p0xzxb] {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-foreground), 0 0 0 4px var(--ring);
}

.inspection-item-note[b-8r02p0xzxb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Grows with its text where the browser can (field-sizing), within limits. */
.inspection-item-note[b-8r02p0xzxb]  .inspection-item-note-input {
    field-sizing: content;
    min-height: 4.5rem;
    max-height: 16rem;
}

.inspection-item-interim[b-8r02p0xzxb] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    font-style: italic;
}

.inspection-item-note-footer[b-8r02p0xzxb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.inspection-item-note-text[b-8r02p0xzxb] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Features/Inspections/Components/InspectionItemPhotos.razor.rz.scp.css */
.inspection-item-photos[b-nsxps1e63g] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.inspection-item-thumbs[b-nsxps1e63g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inspection-item-thumb[b-nsxps1e63g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--muted-foreground);
    cursor: pointer;
}

.inspection-item-thumb:focus-visible[b-nsxps1e63g] {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-foreground), 0 0 0 4px var(--ring);
}

.inspection-item-thumb img[b-nsxps1e63g] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inspection-item-photos-full[b-nsxps1e63g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.inspection-item-photos-hint[b-nsxps1e63g] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Inspections/Components/InspectionSection.razor.rz.scp.css */
.inspection-section[b-1y5tk5y5ag] {
    display: flex;
    flex-direction: column;
    /* No gap: the items' own top padding is the space under the header, so a closed section (its Collapse is 0 high)
       leaves none. */
    /* Mark the rest Good scrolls the next section to the top: its heading lands under the app's top row and the screen's
       sticky bar (`--sticky-offset` plus the bar's ~3.6rem height while the inspection is open, plus a little air), not behind them. */
    scroll-margin-top: calc(var(--sticky-offset, 0px) + 4.5rem);
}

/* On a phone the open inspection's bar is 4.5rem (72 px: the saving indicator's reserved line, S1t.5), so the heading
   needs the margin plus the same air. */
@media (width < 768px), ((pointer: coarse) and (height < 500px)) {
    .inspection-section[b-1y5tk5y5ag] {
        scroll-margin-top: calc(var(--sticky-offset, 0px) + 5.25rem);
    }
}

.inspection-section-header[b-1y5tk5y5ag] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.inspection-section-toggle[b-1y5tk5y5ag] {
    display: inline-flex;
    flex: 1 1 12rem;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--primary);
    text-align: left;
    cursor: pointer;
}

.inspection-section-toggle:focus-visible[b-1y5tk5y5ag] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: calc(var(--radius) / 2);
}

.inspection-section-toggle[b-1y5tk5y5ag]  .inspection-section-chevron {
    flex: 0 0 auto;
    transition: transform var(--motion-fast) var(--ease-out);
}

.inspection-section-toggle[b-1y5tk5y5ag]  .inspection-section-chevron-collapsed {
    transform: rotate(-90deg);
}

.inspection-section-name[b-1y5tk5y5ag] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.inspection-section-count[b-1y5tk5y5ag] {
    flex: 0 0 auto;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.inspection-section-items[b-1y5tk5y5ag] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
}
/* /Features/Inspections/Components/InspectionStateDot.razor.rz.scp.css */
.inspection-state-dot[b-nc9eex2434] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-sm);
}

.inspection-state-dot-mark[b-nc9eex2434] {
    flex: 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    border: 2px solid transparent;
    border-radius: 50%;
}

.inspection-state-dot-urgent .inspection-state-dot-mark[b-nc9eex2434] {
    background: var(--destructive);
}

.inspection-state-dot-attention .inspection-state-dot-mark[b-nc9eex2434] {
    background: var(--warning);
}

.inspection-state-dot-good .inspection-state-dot-mark[b-nc9eex2434] {
    background: var(--success);
}

.inspection-state-dot-notchecked .inspection-state-dot-mark[b-nc9eex2434] {
    background: var(--off-white-darker);
}

.inspection-state-dot-notapplicable .inspection-state-dot-mark[b-nc9eex2434] {
    border-color: var(--off-white-darker);
}

.inspection-state-dot-notchecked .inspection-state-dot-label[b-nc9eex2434],
.inspection-state-dot-notapplicable .inspection-state-dot-label[b-nc9eex2434] {
    color: var(--muted-foreground);
}
/* /Features/Inspections/Components/InspectionTemplateCard.razor.rz.scp.css */
.inspection-template-card-scope[b-b2cgaf9hz0] {
    display: contents;
}

.inspection-template-card-scope[b-b2cgaf9hz0]  .inspection-template-card-header .card-header-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
}

.inspection-template-card-header-content[b-b2cgaf9hz0] {
    display: flex;
    flex: 1 1 10rem;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.inspection-template-card-name[b-b2cgaf9hz0] {
    font-weight: 600;
    font-size: 1.0625rem;
    overflow-wrap: anywhere;
}

.inspection-template-card-badges[b-b2cgaf9hz0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.inspection-template-card-grid[b-b2cgaf9hz0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.inspection-template-card-tile[b-b2cgaf9hz0] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--off-white);
}

.inspection-template-card-tile-label[b-b2cgaf9hz0] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inspection-template-card-tile-value[b-b2cgaf9hz0] {
    font-weight: 600;
}

.inspection-template-card-actions[b-b2cgaf9hz0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.inspection-template-card-actions[b-b2cgaf9hz0]  .inspection-template-card-view {
    flex: 1 1 auto;
}
/* /Features/Inspections/Components/InspectionTemplateForm.razor.rz.scp.css */
.inspection-template-form-add[b-kpqj128r11] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.inspection-template-form-count[b-kpqj128r11] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.inspection-template-form-actions[b-kpqj128r11] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 480px) {
    .inspection-template-form-actions[b-kpqj128r11] {
        flex-direction: column-reverse;
    }

    .inspection-template-form-actions[b-kpqj128r11]  > * {
        width: 100%;
    }
}
/* /Features/Inspections/Components/InspectionTemplateItemEditor.razor.rz.scp.css */
.inspection-item-editor[b-ev4htxfo90] {
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--background);
}

.inspection-item-editor-toggle[b-ev4htxfo90] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.inspection-item-editor-toggle:focus-visible[b-ev4htxfo90] {
    outline: none;
    border-radius: var(--radius);
    box-shadow: var(--focus-ring);
}

.inspection-item-editor-toggle[b-ev4htxfo90]  .inspection-item-editor-chevron,
.inspection-item-editor-toggle[b-ev4htxfo90]  .inspection-item-editor-chevron-open {
    flex: 0 0 auto;
    margin-top: 0.3125rem;
    color: var(--muted-foreground);
    transition: transform var(--motion-fast) var(--ease-out);
}

.inspection-item-editor-toggle[b-ev4htxfo90]  .inspection-item-editor-chevron {
    transform: rotate(-90deg);
}

.inspection-item-editor-summary[b-ev4htxfo90] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.inspection-item-editor-name[b-ev4htxfo90] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.inspection-item-editor-name-empty[b-ev4htxfo90] {
    color: var(--muted-foreground);
    font-weight: 500;
}

.inspection-item-editor-chips[b-ev4htxfo90] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.inspection-item-editor-body[b-ev4htxfo90] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 0.75rem 0.75rem;
}

.inspection-item-editor-field[b-ev4htxfo90] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.inspection-item-editor-fieldset[b-ev4htxfo90] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.inspection-item-editor-label[b-ev4htxfo90] {
    padding: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.inspection-item-editor-label-amber[b-ev4htxfo90] {
    color: var(--warning);
}

.inspection-item-editor-label-red[b-ev4htxfo90] {
    color: var(--destructive);
}

.inspection-item-editor-hint[b-ev4htxfo90] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.inspection-item-editor-fuels[b-ev4htxfo90] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.5rem 0.75rem;
    padding-left: 0.25rem;
}

.inspection-item-editor-finding[b-ev4htxfo90] {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
}

.inspection-item-editor-finding[b-ev4htxfo90]  .input-container {
    flex: 1 1 auto;
    min-width: 0;
}

.inspection-item-editor-linked[b-ev4htxfo90] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.inspection-item-editor-linked-name[b-ev4htxfo90] {
    font-size: var(--text-sm);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.inspection-item-editor-actions[b-ev4htxfo90] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-colour);
}

/* Touch (T-25): icon buttons get a 44 px hit area, so neighbours sit 8 px apart. */
@media (pointer: coarse) {
    .inspection-item-editor-actions[b-ev4htxfo90] {
        gap: 0.5rem;
    }
}
/* /Features/Inspections/Components/InspectionTemplateSectionEditor.razor.rz.scp.css */
.inspection-section-editor-content[b-23o11z52ml] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inspection-section-editor-head[b-23o11z52ml] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.inspection-section-editor-name[b-23o11z52ml] {
    flex: 1 1 auto;
    min-width: 0;
}

.inspection-section-editor-actions[b-23o11z52ml] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    /* Lines up with the input, below its label. */
    margin-top: 1.5rem;
}

/* Touch (T-25): icon buttons get a 44 px hit area, so neighbours sit 8 px apart. */
@media (pointer: coarse) {
    .inspection-section-editor-actions[b-23o11z52ml] {
        gap: 0.5rem;
    }
}

.inspection-section-editor-items[b-23o11z52ml] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* /Features/Inspections/Components/InspectionTemplateSectionsView.razor.rz.scp.css */
.inspection-sections-view[b-u5nwaru1q3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inspection-sections-view-title[b-u5nwaru1q3] {
    /* The section's name is user data: CardTitle is nowrap with line-height 1 (built for one-line titles), so the name wraps
       here at the card's full width (X4, S1w T-9) with the line height a two-line heading needs. */
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}

.inspection-sections-view-count[b-u5nwaru1q3] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    font-weight: 500;
}

.inspection-sections-view-items[b-u5nwaru1q3] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inspection-sections-view-item[b-u5nwaru1q3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-colour);
}

.inspection-sections-view-item:first-child[b-u5nwaru1q3] {
    padding-top: 0;
    border-top: 0;
}

.inspection-sections-view-item:last-child[b-u5nwaru1q3] {
    padding-bottom: 0;
}

.inspection-sections-view-name[b-u5nwaru1q3] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.inspection-sections-view-chips[b-u5nwaru1q3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.inspection-sections-view-linked[b-u5nwaru1q3] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.inspection-sections-view-heading[b-u5nwaru1q3] {
    margin-top: 0.25rem;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inspection-sections-view-heading-amber[b-u5nwaru1q3] {
    color: var(--warning);
}

.inspection-sections-view-heading-red[b-u5nwaru1q3] {
    color: var(--destructive);
}

.inspection-sections-view-findings[b-u5nwaru1q3] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: var(--text-sm);
}

.inspection-sections-view-findings li[b-u5nwaru1q3] {
    overflow-wrap: anywhere;
}
/* /Features/Inspections/Components/InspectionTemplatesTable.razor.rz.scp.css */
.inspection-templates-table-scope[b-585a85mb8n] {
    display: contents;
}

.inspection-templates-table-scope[b-585a85mb8n]  .inspection-templates-table-center {
    text-align: center;
}

.inspection-templates-table-scope[b-585a85mb8n]  .inspection-templates-table-right {
    text-align: right;
}

.inspection-templates-table-name[b-585a85mb8n] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.inspection-templates-table-action[b-585a85mb8n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}
/* /Features/Inspections/Components/InspectionWearGauge.razor.rz.scp.css */
.wear-gauge[b-4povxu0hib] {
    --wear-thumb-size: 1.75rem;
    --wear-track-height: 0.625rem;
    --wear-thumb-colour: var(--off-white-darker);

    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wear-gauge-good[b-4povxu0hib] {
    --wear-thumb-colour: var(--success);
}

.wear-gauge-attention[b-4povxu0hib] {
    --wear-thumb-colour: var(--warning);
}

.wear-gauge-urgent[b-4povxu0hib] {
    --wear-thumb-colour: var(--destructive);
}

.wear-gauge-header[b-4povxu0hib] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--text-sm);
}

.wear-gauge-title[b-4povxu0hib] {
    color: var(--muted-foreground);
}

.wear-gauge-value[b-4povxu0hib] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wear-gauge-empty .wear-gauge-value[b-4povxu0hib] {
    color: var(--muted-foreground);
    font-weight: 500;
}

.wear-gauge-clear[b-4povxu0hib] {
    margin-left: auto;
    min-height: 2rem;
    padding: 0 0.25rem;
    border: none;
    background: none;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    text-decoration: underline;
    cursor: pointer;
}

.wear-gauge-clear:focus-visible[b-4povxu0hib] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: calc(var(--radius) / 2);
}

/* A tall input keeps a glove-sized touch target around the thin track. The track runs from new (left) to worn (right),
   and the band's stops sit between the steps that change state: ≥ 50% Good, 30–40% Attention, ≤ 20% Urgent
   (InspectionRules.SuggestedState), i.e. at 55% and 75% of the track. */
.wear-gauge-input[b-4povxu0hib] {
    width: 100%;
    height: 2.75rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    touch-action: pan-y;
}

.wear-gauge-input:disabled[b-4povxu0hib] {
    cursor: default;
}

.wear-gauge-input:focus-visible[b-4povxu0hib] {
    outline: none;
}

.wear-gauge-input[b-4povxu0hib]::-webkit-slider-runnable-track {
    height: var(--wear-track-height);
    border-radius: 999px;
    background: linear-gradient(to right,
        color-mix(in srgb, var(--success) 55%, transparent) 0 55%,
        color-mix(in srgb, var(--warning) 55%, transparent) 55% 75%,
        color-mix(in srgb, var(--destructive) 55%, transparent) 75% 100%);
}

.wear-gauge-input[b-4povxu0hib]::-moz-range-track {
    height: var(--wear-track-height);
    border-radius: 999px;
    background: linear-gradient(to right,
        color-mix(in srgb, var(--success) 55%, transparent) 0 55%,
        color-mix(in srgb, var(--warning) 55%, transparent) 55% 75%,
        color-mix(in srgb, var(--destructive) 55%, transparent) 75% 100%);
}

.wear-gauge-empty .wear-gauge-input[b-4povxu0hib]::-webkit-slider-runnable-track {
    background: var(--accent);
}

.wear-gauge-empty .wear-gauge-input[b-4povxu0hib]::-moz-range-track {
    background: var(--accent);
}

.wear-gauge-input[b-4povxu0hib]::-webkit-slider-thumb {
    width: var(--wear-thumb-size);
    height: var(--wear-thumb-size);
    margin-top: calc((var(--wear-track-height) - var(--wear-thumb-size)) / 2);
    border: 3px solid var(--primary-foreground);
    border-radius: 50%;
    background: var(--wear-thumb-colour);
    box-shadow: 0 1px 4px var(--shadow);
    transition: background-color var(--motion-fast) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}

.wear-gauge-input[b-4povxu0hib]::-moz-range-thumb {
    width: var(--wear-thumb-size);
    height: var(--wear-thumb-size);
    border: 3px solid var(--primary-foreground);
    border-radius: 50%;
    background: var(--wear-thumb-colour);
    box-shadow: 0 1px 4px var(--shadow);
    transition: background-color var(--motion-fast) var(--ease-out);
}

.wear-gauge-input:focus-visible[b-4povxu0hib]::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px var(--primary-foreground), 0 0 0 4px var(--ring);
}

.wear-gauge-input:focus-visible[b-4povxu0hib]::-moz-range-thumb {
    box-shadow: 0 0 0 2px var(--primary-foreground), 0 0 0 4px var(--ring);
}

.wear-gauge-input:disabled[b-4povxu0hib]::-webkit-slider-thumb {
    box-shadow: none;
}
/* /Features/Inspections/Components/JobInspectionsTab.razor.rz.scp.css */
.job-inspections-tab[b-m2v1dr41p1] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.job-inspections-tab-refreshing[b-m2v1dr41p1] {
    opacity: 0.6;
}

.job-inspections-header[b-m2v1dr41p1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.job-inspections-title[b-m2v1dr41p1] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.job-inspections-count[b-m2v1dr41p1] {
    color: var(--muted-foreground);
    font-weight: 500;
}

.job-inspections-list[b-m2v1dr41p1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Start inspection and Other template… (S1t.9, Decision 2): side by side at the heading's end; on a phone the pair takes
   the row under the heading in equal halves, stacking full width when two halves can't hold the labels (L4, X6). */
.job-inspections-start[b-m2v1dr41p1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .job-inspections-header .job-inspections-start[b-m2v1dr41p1] {
        flex-basis: 100%;
    }

    /* 11rem holds es-AR's "Iniciar inspección" (173 px): two equal halves, else one full-width column (L4). */
    .job-inspections-start[b-m2v1dr41p1] {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    }
}
/* /Features/Inspections/Components/VehicleInspectionsTab.razor.rz.scp.css */
.vehicle-inspections-tab[b-68ha0yj6u6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.vehicle-inspections-tab-refreshing[b-68ha0yj6u6] {
    opacity: 0.6;
}

.vehicle-inspections-header[b-68ha0yj6u6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.vehicle-inspections-title[b-68ha0yj6u6] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.vehicle-inspections-count[b-68ha0yj6u6] {
    color: var(--muted-foreground);
    font-weight: 500;
}

.vehicle-inspections-list[b-68ha0yj6u6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* /Features/Inspections/Modals/BuildEstimateFromFindingsModal.razor.rz.scp.css */
.build-estimate-list[b-tcfyb1xyo8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* /Features/Inspections/Modals/CompleteInspectionModal.razor.rz.scp.css */
/* As ConfirmModal's text: the footer's own margin spaces the buttons. */
.complete-inspection-text[b-8ovvfpdsxv] {
    margin: 0;
}
/* /Features/Inspections/Modals/StartInspectionModal.razor.rz.scp.css */
.start-inspection-stack[b-tkzx0208jw] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.start-inspection-heading[b-tkzx0208jw] {
    margin: 0 0 0.5rem;
    font-size: var(--text-sm);
    font-weight: 600;
}

.start-inspection-muted[b-tkzx0208jw] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.start-inspection-single-job[b-tkzx0208jw] {
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--accent);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.start-inspection-options[b-tkzx0208jw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.start-inspection-option[b-tkzx0208jw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--background);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .start-inspection-option:hover[b-tkzx0208jw] {
        border-color: var(--border-colour-darker);
    }
}

.start-inspection-option:focus-visible[b-tkzx0208jw] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.start-inspection-option-selected[b-tkzx0208jw] {
    border-color: var(--primary);
}

@media (hover: hover) {
    .start-inspection-option-selected:hover[b-tkzx0208jw] {
        border-color: var(--primary);
    }
}

.start-inspection-option-name[b-tkzx0208jw] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.start-inspection-option-meta[b-tkzx0208jw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
}

.start-inspection-no-job[b-tkzx0208jw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    color: var(--muted-foreground);
    text-align: center;
}

.start-inspection-no-job-title[b-tkzx0208jw] {
    margin: 0;
    color: var(--foreground);
    font-weight: 600;
}
/* /Features/Inspections/Pages/InspectionScreen.razor.rz.scp.css */
/* One column, phone first: a technician works through it on a phone all day. */
.inspection-screen[b-lofrwx2a61] {
    /* The finish scrolls this to the top: clear the sticky top bar (S1t.9 review). */
    scroll-margin-top: var(--sticky-offset, 0px);
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    max-width: 47.5rem;
}

.inspection-screen-back-link[b-lofrwx2a61] {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-decoration: none;
}

@media (hover: hover) {
    .inspection-screen-back-link:hover[b-lofrwx2a61] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.inspection-screen-header[b-lofrwx2a61] {
    display: flex;
    flex-direction: column;
    row-gap: 0.375rem;
}

.inspection-screen-title[b-lofrwx2a61] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.inspection-screen-subtitle[b-lofrwx2a61] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* Docked under the app's top bar (sticky at every width) while the checklist scrolls by. */
.inspection-screen-bar[b-lofrwx2a61] {
    position: sticky;
    top: var(--sticky-offset, 0px);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-inline: -0.25rem;
    padding: 0.625rem 0.25rem;
    border-bottom: 1px solid var(--border-colour);
    background: var(--primary-foreground);
}

/* A short touch screen (a phone in landscape, S1w T-33) has no room for a docked bar: nothing below the top bar is sticky.
   In portrait it stays, one slim solid row. */
@media (pointer: coarse) and (height < 500px) {
    .inspection-screen-bar[b-lofrwx2a61] {
        position: static;
    }
}

.inspection-screen-progress[b-lofrwx2a61] {
    display: flex;
    flex: 1 1 8rem;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

/* The progress text and the saving indicator (S1t.5) share a row, the indicator at its end, so it comes and goes without
   moving anything; a failure wraps under the progress text. */
.inspection-screen-progress-row[b-lofrwx2a61] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    min-width: 0;
    min-height: 1.25rem;
}

/* On a phone the progress has no room beside its text: the indicator gets a line of its own under the track, kept while
   the screen is editable so nothing moves when it comes and goes (the first tap would otherwise push the items down under
   the finger). A failure also gives the progress the bar's whole width. */
@media (width < 768px), ((pointer: coarse) and (height < 500px)) {
    .inspection-screen-progress-row[b-lofrwx2a61] {
        display: contents;
    }

    /* A small basis keeps Complete on the bar's one row while it reads "Completing…" (S1t.9: 158 px in es-AR at 360 px);
       the progress takes what's left, and its text yields (an ellipsis, with its title) rather than wrap the bar. */
    .inspection-screen-progress[b-lofrwx2a61] {
        flex-basis: 4rem;
    }

    .inspection-screen-progress-row[b-lofrwx2a61]  .save-indicator {
        display: flex;
        order: 1;
        min-height: 1rem;
    }

    .inspection-screen-progress-failing[b-lofrwx2a61] {
        flex-basis: 100%;
    }
}

.inspection-screen-progress-text[b-lofrwx2a61] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.inspection-screen-progress-track[b-lofrwx2a61] {
    height: 0.375rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--accent);
}

.inspection-screen-progress-fill[b-lofrwx2a61] {
    height: 100%;
    border-radius: 999px;
    background: var(--success);
}

/* Build estimate from findings, where Complete was. On a phone its long label takes a row of its own under the progress
   and the menu (`order` puts it last), and wraps rather than push anything out; from 768px it is one row again. */
.inspection-screen-bar[b-lofrwx2a61]  .inspection-screen-build {
    order: 1;
    flex: 1 1 100%;
    min-width: 0;
    height: auto;
    min-height: 2.25rem;
    white-space: normal;
    text-align: left;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width >= 768px) and (not ((pointer: coarse) and (height < 500px))) {
    .inspection-screen-bar[b-lofrwx2a61]  .inspection-screen-build {
        order: 0;
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* The pills only fit beside the progress on a wide screen. */
.inspection-screen-bar[b-lofrwx2a61]  .inspection-screen-counts {
    display: none;
}

@media (width >= 768px) and (not ((pointer: coarse) and (height < 500px))) {
    .inspection-screen-bar[b-lofrwx2a61]  .inspection-screen-counts {
        display: inline-flex;
        flex-wrap: nowrap;
    }
}

.inspection-screen-lost[b-lofrwx2a61] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.inspection-screen-lost-note[b-lofrwx2a61] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.inspection-screen-lost-name[b-lofrwx2a61] {
    font-weight: 600;
}

.inspection-screen-lost-text[b-lofrwx2a61] {
    align-self: stretch;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--warning);
    background: var(--primary-foreground);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.inspection-screen-completed[b-lofrwx2a61] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.inspection-screen-completed-actions[b-lofrwx2a61] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.inspection-screen-reopen-hint[b-lofrwx2a61] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.inspection-screen-sections[b-lofrwx2a61] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.inspection-screen[b-lofrwx2a61]  .inspection-screen-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    color: var(--muted-foreground);
}

.inspection-screen-state-title[b-lofrwx2a61] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
}

.inspection-screen-state-text[b-lofrwx2a61] {
    margin: 0 0 0.5rem;
}
/* /Features/Inspections/Pages/InspectionTemplateDetails.razor.rz.scp.css */
.inspection-template-details-content[b-wybe276f7e] {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    max-width: 60rem;
}

.inspection-template-details-back-link[b-wybe276f7e] {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-decoration: none;
}

@media (hover: hover) {
    .inspection-template-details-back-link:hover[b-wybe276f7e] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.inspection-template-details-header[b-wybe276f7e] {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.inspection-template-details-heading[b-wybe276f7e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.inspection-template-details-title[b-wybe276f7e] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.inspection-template-details-subtitle[b-wybe276f7e] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.inspection-template-details-subtitle a[b-wybe276f7e] {
    margin-left: 0.25rem;
    color: var(--primary);
    font-weight: 600;
}

.inspection-template-details-actions[b-wybe276f7e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.inspection-template-details-badges[b-wybe276f7e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.inspection-template-details-archived[b-wybe276f7e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.inspection-template-details-label[b-wybe276f7e] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inspection-template-details-description[b-wybe276f7e] {
    margin: 0.375rem 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.inspection-template-details-content[b-wybe276f7e]  .inspection-template-details-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    color: var(--muted-foreground);
}

.inspection-template-details-state-title[b-wybe276f7e] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
}

.inspection-template-details-state-text[b-wybe276f7e] {
    margin: 0 0 0.5rem;
}
/* /Features/Inspections/Pages/InspectionTemplates.razor.rz.scp.css */
.inspection-templates-page[b-z8mqq284dy] {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

.inspection-templates-back-link[b-z8mqq284dy] {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-decoration: none;
}

@media (hover: hover) {
    .inspection-templates-back-link:hover[b-z8mqq284dy] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.inspection-templates-header[b-z8mqq284dy] {
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
}

.inspection-templates-title[b-z8mqq284dy] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.inspection-templates-subtitle[b-z8mqq284dy] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.inspection-templates-page[b-z8mqq284dy]  .inspection-templates-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.inspection-templates-filters[b-z8mqq284dy] {
    display: grid;
    flex: 1 1 24rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    min-width: 0;
}

/* A long label ("Todas las categorías") stays on one line and ends in an ellipsis instead of growing the select. */
.inspection-templates-filters[b-z8mqq284dy]  select {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.inspection-templates-card-list[b-z8mqq284dy] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (max-width: 768px), ((pointer: coarse) and (height < 500px)) {
    .inspection-templates-page[b-z8mqq284dy]  .inspection-templates-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .inspection-templates-filters[b-z8mqq284dy] {
        flex: 0 0 auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .inspection-templates-page[b-z8mqq284dy]  .inspection-templates-create-button {
        width: 100%;
    }
}
/* /Features/Inventory/Components/InventoryCard.razor.rz.scp.css */
.inventory-card-scope[b-zj915to09d] {
    display: contents;
}

.inventory-card-scope[b-zj915to09d]  .inventory-card-header .card-header-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

/* The badge ("1 low stock") drops under the name when the row is too narrow, instead of squeezing the name. */
.inventory-card-header-content[b-zj915to09d] {
    display: flex;
    flex: 1 1 10rem;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.inventory-card-label[b-zj915to09d] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inventory-card-name[b-zj915to09d] {
    font-weight: 600;
    font-size: 1.0625rem;
    overflow-wrap: anywhere;
}

.inventory-card-grid[b-zj915to09d] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.inventory-card-tile[b-zj915to09d] {
    /* The figure sizes itself from the tile's width (see .inventory-card-tile-figure). */
    container-type: inline-size;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--off-white);
}

.inventory-card-tile-label[b-zj915to09d] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.inventory-card-tile-value[b-zj915to09d] {
    font-weight: 600;
    font-size: 1rem;
}

/* A price, cost or markup never wraps or truncates: the type steps down from 1rem as the figure gets longer than the tile
   can hold (--chars is its length; about 0.6em per character, punctuation included), as StatTile does. */
.inventory-card-tile-figure[b-zj915to09d] {
    font-size: clamp(0.6875rem, calc(100cqw / (var(--chars, 1) * 0.6)), 1rem);
    white-space: nowrap;
}

.inventory-card-tile-value-low[b-zj915to09d] {
    color: var(--warning);
}

.inventory-card-scope[b-zj915to09d]  .inventory-card-view-button {
    justify-content: center;
}

.inventory-card-tile-value-muted[b-zj915to09d] {
    color: var(--muted-foreground);
}

.inventory-card-sku[b-zj915to09d] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}
/* /Features/Inventory/Components/InventoryDescriptionInput.razor.rz.scp.css */
.inventory-suggestion[b-bz8t8zfv2e] {
    min-width: 0;
}

.inventory-suggestion-name[b-bz8t8zfv2e] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.inventory-suggestion-meta[b-bz8t8zfv2e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}
/* /Features/Inventory/Components/InventoryItemDetails/InventoryItemProfileCard.razor.rz.scp.css */
.inventory-profile-skeleton[b-x318rwst6p] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inventory-profile-error[b-x318rwst6p] {
    margin: 0;
    color: var(--muted-foreground);
}

/* The shared profile header: the avatar and the action buttons share the first row, and the name spans the whole card
   (it never sits in a narrow column beside the buttons). The identity wrapper only groups the markup. */
.inventory-profile-header[b-x318rwst6p] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    align-items: start;
    gap: 0.375rem 0.75rem;
}

.inventory-profile-identity[b-x318rwst6p] {
    display: contents;
}

.inventory-profile-avatar[b-x318rwst6p] {
    grid-column: 1;
    grid-row: 1;
}

.inventory-profile-name[b-x318rwst6p],
.inventory-profile-type[b-x318rwst6p],
.inventory-profile-since[b-x318rwst6p] {
    grid-column: 1 / -1;
}

.inventory-profile-name[b-x318rwst6p] {
    justify-self: stretch;
}

.inventory-profile-avatar[b-x318rwst6p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
    color: var(--primary);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

.inventory-profile-name[b-x318rwst6p] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.inventory-profile-since[b-x318rwst6p] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.inventory-profile-icon-button[b-x318rwst6p] {
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius, 0.625rem);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .inventory-profile-icon-button:hover[b-x318rwst6p] {
        background: var(--accent);
        color: var(--primary);
    }
}

.inventory-profile-icon-button:active[b-x318rwst6p] {
    background: var(--pressed);
    color: var(--primary);
}

.inventory-profile-form[b-x318rwst6p] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-colour);
}

[b-x318rwst6p] .inventory-profile-edit-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inventory-profile-form-actions[b-x318rwst6p] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.inventory-profile-actions[b-x318rwst6p] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.375rem;
}

.inventory-profile-archived[b-x318rwst6p] {
    margin-bottom: 1rem;
}

.inventory-profile-archived-content[b-x318rwst6p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* The read view: label and value pairs. */
.inventory-profile-details[b-x318rwst6p] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 1.25rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-colour);
}

.inventory-profile-row[b-x318rwst6p] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-colour);
}

.inventory-profile-row:last-child[b-x318rwst6p] {
    border-bottom: 0;
}

.inventory-profile-row dt[b-x318rwst6p] {
    flex: 0 0 auto;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.inventory-profile-row dd[b-x318rwst6p] {
    min-width: 0;
    margin: 0;
    font-weight: 600;
    text-align: end;
    overflow-wrap: anywhere;
}

/* A code wraps only after a hyphen (BreakableCode); a single segment too long for the row ends in an ellipsis (the title holds the whole SKU). */
.inventory-profile-code[b-x318rwst6p] {
    font-family: ui-monospace, monospace;
    letter-spacing: 0.04em;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-profile-muted[b-x318rwst6p] {
    color: var(--muted-foreground);
    font-weight: 400;
}

.inventory-profile-supplier[b-x318rwst6p] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.inventory-profile-notes[b-x318rwst6p] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1rem;
}

.inventory-profile-notes-label[b-x318rwst6p] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inventory-profile-notes-text[b-x318rwst6p] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Features/Inventory/Components/InventoryItemDetails/InventoryStockCard.razor.rz.scp.css */
.inventory-stock-skeleton[b-blpzhf7n3x] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inventory-stock-error[b-blpzhf7n3x] {
    margin: 0;
    color: var(--muted-foreground);
}

.inventory-stock-level[b-blpzhf7n3x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.inventory-stock-figure[b-blpzhf7n3x] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.inventory-stock-label[b-blpzhf7n3x] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inventory-stock-value[b-blpzhf7n3x] {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.inventory-stock-details[b-blpzhf7n3x] {
    display: flex;
    flex-direction: column;
    margin: 1rem 0 0;
    border-top: 1px solid var(--border-colour);
}

.inventory-stock-row[b-blpzhf7n3x] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-colour);
}

.inventory-stock-row:last-child[b-blpzhf7n3x] {
    border-bottom: 0;
}

.inventory-stock-row dt[b-blpzhf7n3x] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.inventory-stock-row dd[b-blpzhf7n3x] {
    margin: 0;
    font-weight: 600;
    text-align: end;
}

.inventory-stock-muted[b-blpzhf7n3x] {
    color: var(--muted-foreground);
    font-weight: 400;
}

.inventory-stock-hint[b-blpzhf7n3x] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.inventory-stock-actions[b-blpzhf7n3x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.inventory-stock-untracked[b-blpzhf7n3x] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.inventory-stock-untracked-text[b-blpzhf7n3x] {
    margin: 0;
    color: var(--muted-foreground);
}
/* /Features/Inventory/Components/InventoryItemDetails/StockHistoryCard.razor.rz.scp.css */
.stock-history-empty[b-whp1dlvo6t] {
    margin: 0;
    color: var(--muted-foreground);
}

.stock-history-skeleton[b-whp1dlvo6t] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stock-history-error[b-whp1dlvo6t] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--muted-foreground);
}

.stock-history-error p[b-whp1dlvo6t] {
    margin: 0;
}

.stock-history-list[b-whp1dlvo6t] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.stock-history-refreshing[b-whp1dlvo6t] {
    opacity: 0.6;
}

.stock-history-row[b-whp1dlvo6t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-colour);
}

.stock-history-row:first-child[b-whp1dlvo6t] {
    padding-top: 0;
}

.stock-history-row:last-child[b-whp1dlvo6t] {
    border-bottom: 0;
}

.stock-history-main[b-whp1dlvo6t] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.stock-history-reason[b-whp1dlvo6t] {
    font-weight: 600;
}

.stock-history-meta[b-whp1dlvo6t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.stock-history-note[b-whp1dlvo6t] {
    font-style: italic;
}

.stock-history-figures[b-whp1dlvo6t] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}

.stock-history-delta[b-whp1dlvo6t] {
    font-weight: 700;
}

.stock-history-delta-in[b-whp1dlvo6t] {
    color: var(--success);
}

.stock-history-delta-out[b-whp1dlvo6t] {
    color: var(--destructive);
}

.stock-history-after[b-whp1dlvo6t] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.stock-history-more[b-whp1dlvo6t] {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}
/* /Features/Inventory/Components/InventoryItemForm.razor.rz.scp.css */
.inventory-item-form-row[b-wf70mcek7d] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.inventory-item-form-sku[b-wf70mcek7d] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.inventory-item-form-sku-warning[b-wf70mcek7d] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    text-decoration: none;
    overflow-wrap: anywhere;
}

@media (hover: hover) {
    .inventory-item-form-sku-warning:hover[b-wf70mcek7d] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.inventory-item-form-stock[b-wf70mcek7d] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.inventory-item-form-hint[b-wf70mcek7d] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

@media (max-width: 480px) {
    .inventory-item-form-row[b-wf70mcek7d] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Inventory/Components/InventoryTable.razor.rz.scp.css */
.inventory-table-scope[b-e5z0ncoaeq] {
    display: contents;
}

.inventory-table-scope[b-e5z0ncoaeq]  .inventory-table-center {
    text-align: center;
}

.inventory-table-scope[b-e5z0ncoaeq]  .inventory-table-right {
    text-align: right;
}

.inventory-table-scope[b-e5z0ncoaeq]  .inventory-table-muted {
    color: var(--muted-foreground);
}

/* The name truncates (the title holds the whole name); the "Archived" badge keeps its width. */
.inventory-table-name[b-e5z0ncoaeq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* A stock badge never clips: when "Low" and the quantity don't fit side by side, the badge wraps above it. */
.inventory-table-on-hand[b-e5z0ncoaeq] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    max-width: 100%;
    gap: 0.125rem 0.5rem;
}

.inventory-table-action[b-e5z0ncoaeq] {
    display: flex;
    justify-content: center;
}
/* /Features/Inventory/Components/LineInventoryFields.razor.rz.scp.css */
.line-inventory-scope[b-0w7pe0hbqi] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.line-inventory-chip[b-0w7pe0hbqi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--off-white);
    font-size: var(--text-sm);
}

.line-inventory-chip-text[b-0w7pe0hbqi] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.line-inventory-unlink[b-0w7pe0hbqi] {
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

@media (hover: hover) {
    .line-inventory-unlink:hover[b-0w7pe0hbqi] {
        background: var(--accent);
        color: var(--primary);
    }
}

.line-inventory-unlink:active[b-0w7pe0hbqi] {
    background: var(--pressed);
    color: var(--primary);
}

.line-inventory-save[b-0w7pe0hbqi] {
    display: flex;
    flex-direction: column;
}

/* The toggle's fields open and close with the grid-template-rows trick (as CardContent's collapse in app.css). */
.line-inventory-collapse[b-0w7pe0hbqi] {
    display: grid;
    grid-template-rows: 1fr;
    min-height: 0;
    opacity: 1;
    transition: grid-template-rows var(--motion-base) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}

.line-inventory-collapse-collapsed[b-0w7pe0hbqi] {
    grid-template-rows: 0fr;
    opacity: 0;
}

.line-inventory-collapse-content[b-0w7pe0hbqi] {
    min-height: 0;
    overflow: hidden;
}

/* The top padding is the gap under the toggle: inside the clipped box, so the closed state takes no room at all. */
.line-inventory-collapse-fields[b-0w7pe0hbqi] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.75rem;
}

.line-inventory-stock[b-0w7pe0hbqi] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.line-inventory-hint[b-0w7pe0hbqi] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* Cost | Markup %: two columns at every width (360 px included). The markup is short ("15.70 %"), so it gets a fixed
   column and the cost the rest. */
.line-inventory-cost-row[b-0w7pe0hbqi] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem;
    gap: 0.75rem;
}

/* Input reserves 2rem on the right for its invalid-state icon; the markup field has no validation, and at 360 px that
   padding would leave no room for its digits. */
.line-inventory-markup[b-0w7pe0hbqi]  .input {
    padding-right: 0.5rem;
}

/* The scope has nothing in it when a time line has no tax checkbox and nothing to hold: no empty gap in the form. */
.line-inventory-scope:empty[b-0w7pe0hbqi] {
    display: none;
}

/* The inventory section (Spec - Parts & Pricing §4.1): a full-width toggle row that opens a panel continuing its border. */
.line-inventory-section[b-0w7pe0hbqi] {
    display: flex;
    flex-direction: column;
}

.line-inventory-section-toggle[b-0w7pe0hbqi] {
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .line-inventory-section-toggle:hover[b-0w7pe0hbqi] {
        background: var(--accent);
    }
}

.line-inventory-section-toggle:active[b-0w7pe0hbqi] {
    background: var(--pressed);
}

.line-inventory-section-toggle:focus-visible[b-0w7pe0hbqi] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Open, the row and the panel read as one bordered block. */
.line-inventory-section-toggle-open[b-0w7pe0hbqi] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.line-inventory-section-text[b-0w7pe0hbqi] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.line-inventory-section-title[b-0w7pe0hbqi] {
    font-weight: 600;
}

.line-inventory-section-summary[b-0w7pe0hbqi] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* The chevron is IconChevron's own SVG (it has no scope attribute), so ::deep starts from the raw toggle button above. */
.line-inventory-section-toggle[b-0w7pe0hbqi]  svg {
    flex: 0 0 auto;
    transition: transform var(--motion-fast) var(--ease-out);
}

.line-inventory-section-toggle[b-0w7pe0hbqi]  .line-inventory-section-chevron-collapsed {
    transform: rotate(-90deg);
}

/* The panel's border is on the fields, inside the clipped box, so the closed state takes no room at all. */
.line-inventory-section-fields[b-0w7pe0hbqi] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-top: 0;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}
/* /Features/Inventory/Components/LinePriceHint.razor.rz.scp.css */
.line-price-hint[b-zz5zymjglc] {
    margin: -0.5rem 0 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.line-price-hint-link[b-zz5zymjglc] {
    color: var(--primary);
    font-weight: 600;
}
/* /Features/Inventory/Components/OrderMessageComposer.razor.rz.scp.css */
.order-composer[b-75rnlpinwo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-composer-recipient[b-75rnlpinwo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    padding: 0.75rem;
    border-radius: var(--radius);
    background-color: var(--off-white);
}

.order-composer-recipient-name[b-75rnlpinwo] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.order-composer-muted[b-75rnlpinwo] {
    color: var(--muted-foreground);
    font-weight: 400;
}

.order-composer-account[b-75rnlpinwo] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.order-composer-lines[b-75rnlpinwo] {
    display: flex;
    flex-direction: column;
}

.order-composer-group[b-75rnlpinwo] {
    margin: 0.75rem 0 0.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

.order-composer-group:first-child[b-75rnlpinwo] {
    margin-top: 0;
}

.order-composer-line[b-75rnlpinwo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-colour);
}

.order-composer-line:last-child[b-75rnlpinwo] {
    border-bottom: 0;
}

.order-composer-line-main[b-75rnlpinwo] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.order-composer-line-detail[b-75rnlpinwo] {
    padding-inline-start: 1.5rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.order-composer-line-warning[b-75rnlpinwo] {
    padding-inline-start: 1.5rem;
    color: var(--warning);
    font-size: var(--text-xs);
}

.order-composer-line-quantity[b-75rnlpinwo] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.order-composer-line-quantity[b-75rnlpinwo]  .order-composer-quantity-input {
    width: 6.5rem;
    padding-inline: 0.5rem;
    text-align: end;
}

.order-composer-line-unit[b-75rnlpinwo] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.order-composer-hint[b-75rnlpinwo] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.order-composer-preview[b-75rnlpinwo] {
    font-size: var(--text-sm);
}

.order-composer-share[b-75rnlpinwo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* /Features/Inventory/Components/PriceCalculatorFields.razor.rz.scp.css */
.price-calculator-scope[b-loqd48zbdd] {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.price-calculator-row[b-loqd48zbdd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 0.75rem;
}

.price-calculator-hint[b-loqd48zbdd] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.price-calculator-link[b-loqd48zbdd] {
    color: var(--primary);
    text-decoration: underline;
}

.price-calculator-offer[b-loqd48zbdd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

/* The row's width is its card's or modal's, not the window's (the item page's Edit card is 338 px
   wide beside the sidebar at 1280 px): one column when narrow, Cost and Markup side by side with
   Price on its own row in between, three columns only when each input can show a 12-digit price. */
@container (min-width: 26rem) {
    .price-calculator-row[b-loqd48zbdd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .price-calculator-price[b-loqd48zbdd] {
        grid-column: 1 / -1;
    }
}

@container (min-width: 36rem) {
    .price-calculator-row[b-loqd48zbdd] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .price-calculator-price[b-loqd48zbdd] {
        grid-column: auto;
    }
}
/* /Features/Inventory/Modals/AdjustStockModal.razor.rz.scp.css */
.stock-modal-preview[b-2o6yseqd3w] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* Remove / Add: two buttons side by side, the chosen one filled. */
.adjust-stock-direction[b-2o6yseqd3w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
/* /Features/Inventory/Modals/CountStockModal.razor.rz.scp.css */
.stock-modal-preview[b-p7c7iaalhl] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Inventory/Modals/OrderPartsModal.razor.rz.scp.css */
/* The supplier picker and the message composer are two blocks of one form: the gap between them is the forms' field gap
   (app.css .form-container, 1rem). */
.order-parts-modal[b-ew4hqgizrs] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* /Features/Inventory/Modals/ReceiveStockModal.razor.rz.scp.css */
.stock-modal-preview[b-8fj1ojwz3e] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Inventory/Modals/ReorderModal.razor.rz.scp.css */
.reorder-modal-loading[b-nm1i2ndyaj] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.reorder-modal-empty[b-nm1i2ndyaj],
.reorder-modal-intro[b-nm1i2ndyaj] {
    margin: 0 0 1rem;
    color: var(--muted-foreground);
}

.reorder-modal-back[b-nm1i2ndyaj] {
    margin: 0 0 0.5rem -0.5rem;
}

.reorder-modal-groups[b-nm1i2ndyaj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reorder-modal-group[b-nm1i2ndyaj] {
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

@media (hover: hover) {
    .reorder-modal-group:hover[b-nm1i2ndyaj] {
        background-color: var(--off-white);
    }
}

.reorder-modal-group:active[b-nm1i2ndyaj] {
    background-color: var(--pressed);
}

.reorder-modal-group-text[b-nm1i2ndyaj] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.reorder-modal-group-name[b-nm1i2ndyaj] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.reorder-modal-group-items[b-nm1i2ndyaj] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reorder-modal-group-count[b-nm1i2ndyaj] {
    flex-shrink: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Inventory/Modals/StockTrackingModal.razor.rz.scp.css */
.stock-tracking-intro[b-zlnjw50pow] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Inventory/Pages/Inventory.razor.rz.scp.css */
.inventory-page-content[b-g5f797l2z4] {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

[b-g5f797l2z4] .inventory-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.inventory-search-row[b-g5f797l2z4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (min-width: 769px) and (not ((pointer: coarse) and (height < 500px))) {
    .inventory-search-row[b-g5f797l2z4] {
        flex: 1 1 16rem;
    }
}

[b-g5f797l2z4] .inventory-search-input {
    flex: 1 1 auto;
    min-width: 0;
}

[b-g5f797l2z4] .inventory-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.inventory-filter-clear[b-g5f797l2z4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: 1;
    cursor: pointer;
}

[b-g5f797l2z4] .inventory-create-button {
    flex: 0 0 auto;
}

[b-g5f797l2z4] .inventory-list-content {
    transition: opacity var(--motion-fast) var(--ease-out);
}

[b-g5f797l2z4] .inventory-list-content.is-refreshing {
    opacity: 0.6;
    /* Dims only if the reload takes longer than 150 ms, so a quick refresh never blinks. */
    transition: opacity var(--motion-fast) var(--ease-out) 150ms;
    pointer-events: none;
}

.inventory-card-list[b-g5f797l2z4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 768px), ((pointer: coarse) and (height < 500px)) {
    [b-g5f797l2z4] .inventory-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    [b-g5f797l2z4] .inventory-create-button {
        width: 100%;
    }

    .inventory-search-row[b-g5f797l2z4] {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* View archived, Order low-stock items and New item sit together, wrapping under the search on a narrow width. */
.inventory-toolbar-actions[b-g5f797l2z4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 768px), ((pointer: coarse) and (height < 500px)) {
    .inventory-toolbar-actions[b-g5f797l2z4] {
        flex-direction: column;
        align-items: stretch;
    }

    .inventory-toolbar-actions[b-g5f797l2z4]  > * {
        width: 100%;
    }

    .inventory-toolbar-actions[b-g5f797l2z4]  button,
    .inventory-toolbar-actions[b-g5f797l2z4]  a {
        width: 100%;
        justify-content: center;
    }
}

/* The filter chip (S1w, T-7). On the phone layout (viewport.js, T-119) the search keeps the full width and the "Filtrado por …"
   chip goes on its own row under it, its label wrapping inside the chip with the ✕ at the end (B2). The same shape on every
   list page with a chip. */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .inventory-search-row[b-g5f797l2z4] {
        flex-wrap: wrap;
    }

    .inventory-search-row[b-g5f797l2z4]  .inventory-search-input {
        flex: 1 1 100%;
    }

    .inventory-search-row[b-g5f797l2z4]  .inventory-filter-badge {
        flex: 0 1 auto;
        max-width: 100%;
        white-space: normal;
    }
}

/* The chip's ✕ is a small text button: a 44 px tap area on touch without making the chip taller. */
@media (pointer: coarse) {
    .inventory-filter-clear[b-g5f797l2z4] {
        position: relative;
    }

    .inventory-filter-clear[b-g5f797l2z4]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2.75rem;
        height: 2.75rem;
        transform: translate(-50%, -50%);
    }
}
/* /Features/Inventory/Pages/InventoryDetails.razor.rz.scp.css */
.inventory-details-content[b-bsh1szqhgt] {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.inventory-details-back-link[b-bsh1szqhgt] {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-decoration: none;
}

@media (hover: hover) {
    .inventory-details-back-link:hover[b-bsh1szqhgt] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.inventory-details-header[b-bsh1szqhgt] {
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
}

.inventory-details-title[b-bsh1szqhgt] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.inventory-details-subtitle[b-bsh1szqhgt] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.inventory-details-layout[b-bsh1szqhgt] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.inventory-details-profile[b-bsh1szqhgt] {
    min-width: 0;
}

[b-bsh1szqhgt] .inventory-details-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    color: var(--muted-foreground);
}

.inventory-details-not-found-title[b-bsh1szqhgt] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
}

.inventory-details-not-found-text[b-bsh1szqhgt] {
    margin: 0 0 0.5rem;
}

/* Two columns: the page scrolls as a whole. The profile sticks under the top bar, and so does the top of the
   command center card (CardStickyHeader), on the same line as the profile's top edge. */
@media (min-width: 1024px) {
    .inventory-details-layout[b-bsh1szqhgt] {
        grid-template-columns: minmax(18rem, 22rem) 1fr;
    }

    .inventory-details-profile[b-bsh1szqhgt] {
        position: sticky;
        top: calc(var(--sticky-offset) + 0.75rem);
        align-self: start;
        /* A profile taller than the window scrolls on its own instead of hiding its bottom. */
        max-height: calc(100dvh - var(--sticky-offset) - 1.5rem);
        overflow-y: auto;
    }
}

/* The Stock card sits above the Stock history, in the column beside the profile. */
.inventory-details-stock[b-bsh1szqhgt] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}
/* /Features/Invoices/Components/InvoiceActionsMenu.razor.rz.scp.css */
.invoice-actions-void-wrap[b-qtqnareixz]  .tooltip {
    display: block;
}
/* /Features/Invoices/Components/InvoiceCard.razor.rz.scp.css */
.invoice-card[b-uksmpyewjr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius));
    background-color: var(--primary-foreground);
    color: var(--primary);
    text-decoration: none;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.invoice-card-void[b-uksmpyewjr] {
    opacity: 0.6;
}

.invoice-card-header[b-uksmpyewjr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.invoice-card-number[b-uksmpyewjr] {
    font-weight: 700;
}

.invoice-card-line[b-uksmpyewjr] {
    display: flex;
    gap: 0.375rem;
    min-width: 0;
    font-weight: 500;
}

/* The date and the amount never break; when both don't fit, the amount moves to its own line. */
.invoice-card-footer[b-uksmpyewjr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
    font-size: var(--text-sm, 0.875rem);
}

.invoice-card-muted[b-uksmpyewjr] {
    color: var(--muted-foreground);
    white-space: nowrap;
}

.invoice-card-total[b-uksmpyewjr] {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
}

.invoice-card-owing[b-uksmpyewjr] {
    margin-left: auto;
    color: var(--destructive);
    font-weight: 600;
    white-space: nowrap;
}
/* /Features/Invoices/Components/InvoiceDocument.razor.rz.scp.css */
.invoice-document[b-ky9l2rrers] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.invoice-document-header[b-ky9l2rrers] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.invoice-document-title-row[b-ky9l2rrers] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.invoice-document-title[b-ky9l2rrers] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.invoice-document-issued[b-ky9l2rrers] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* Three columns when there's room (the page), fewer in the narrower job tab, stacked on a phone. */
.invoice-document-parties[b-ky9l2rrers] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem 1.5rem;
}

.invoice-document-party[b-ky9l2rrers] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.invoice-document-party-label[b-ky9l2rrers] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.invoice-document-party-name[b-ky9l2rrers] {
    font-weight: 600;
}
/* /Features/Invoices/Components/InvoiceDraftNotices.razor.rz.scp.css */
.invoice-notices[b-u2mbbwde3t] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.invoice-notices-left-out[b-u2mbbwde3t] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Invoices/Components/InvoiceDraftsCard.razor.rz.scp.css */
.invoice-drafts-title[b-1a7aohrew5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.invoice-drafts-list[b-1a7aohrew5] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.invoice-drafts-list li + li[b-1a7aohrew5] {
    border-top: 1px solid var(--border);
}

.invoice-drafts-row[b-1a7aohrew5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem 0;
    color: inherit;
    text-decoration: none;
}

.invoice-drafts-list li:first-child .invoice-drafts-row[b-1a7aohrew5] {
    padding-top: 0;
}

.invoice-drafts-list li:last-child .invoice-drafts-row[b-1a7aohrew5] {
    padding-bottom: 0;
}

@media (hover: hover) {
    .invoice-drafts-row:hover .invoice-drafts-job[b-1a7aohrew5] {
        color: var(--primary);
        text-decoration: underline;
    }
}

/* The codes, the total and the date never break: the customer's name is what shrinks. */
.invoice-drafts-line[b-1a7aohrew5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.invoice-drafts-line > .nowrap[b-1a7aohrew5] {
    flex-shrink: 0;
}

.invoice-drafts-job[b-1a7aohrew5] {
    font-weight: 600;
}

.invoice-drafts-total[b-1a7aohrew5] {
    margin-left: auto;
    font-weight: 600;
}

/* The name keeps at least a few letters: when it and the saved line don't fit side by side, the saved line moves under
   it (whole). */
.invoice-drafts-muted[b-1a7aohrew5] {
    flex-wrap: wrap;
    row-gap: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.invoice-drafts-name[b-1a7aohrew5] {
    flex: 1 1 7rem;
}

.invoice-drafts-saved[b-1a7aohrew5] {
    max-width: 100%;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invoice-drafts-more[b-1a7aohrew5] {
    margin: 0.75rem 0 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Invoices/Components/InvoiceEditor.razor.rz.scp.css */
.invoice-editor[b-a055en27dd] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.invoice-editor-header[b-a055en27dd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.invoice-editor-heading[b-a055en27dd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.invoice-editor-heading h3[b-a055en27dd] {
    margin: 0;
}

/* Four buttons at 719 px overflowed a 533 px column at 800 and 1280 px (es-AR): they wrap, end-aligned. */
.invoice-editor-actions[b-a055en27dd] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* The phone: Add line and Add… share the row equally (L4). */
.invoice-editor-actions-phone[b-a055en27dd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

/* The dropdown's root and the Button inside it are not this file's elements. */
.invoice-editor-actions-phone[b-a055en27dd]  .dm-root,
.invoice-editor-actions-phone[b-a055en27dd]  .dm-trigger-wrapper,
.invoice-editor-actions-phone[b-a055en27dd]  .btn {
    width: 100%;
}
/* /Features/Invoices/Components/InvoiceEditorGroupCard.razor.rz.scp.css */
/* The card's own width is what the heading rule below measures (a narrow side column on a desktop-wide window). */
.invoice-group-card[b-z331y905x4] {
    container-type: inline-size;
}

/* CardTitle is nowrap with line-height 1 (built for one-line titles): let the name and description wrap. */
.invoice-group-card-heading[b-z331y905x4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    line-height: 1.25;
    white-space: normal;
}

.invoice-group-card-description[b-z331y905x4] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The title row: the heading, the total (aside) and the menu side by side. CardTitle renders the h3 (flex, space-between):
   the grid replaces that from the raw wrapper. The heading takes what is left, the others their size. */
.invoice-group-card[b-z331y905x4]  .invoice-group-card-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: auto;
    align-items: center;
    gap: 0.5rem 1rem;
}

/* The total, never truncated. */
.invoice-group-card-aside[b-z331y905x4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* In a narrow card (a phone, or a side column) the heading never sits in a column beside the total: the name takes the
   card's width with the menu at its top right, and the total goes on the row below. */
@container (width < 36rem) {
    .invoice-group-card[b-z331y905x4]  .invoice-group-card-title {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "heading menu"
            "aside aside";
        grid-auto-flow: row;
        align-items: start;
        column-gap: 0.5rem;
    }

    .invoice-group-card-heading[b-z331y905x4] {
        grid-area: heading;
    }

    .invoice-group-card-menu[b-z331y905x4] {
        grid-area: menu;
    }

    .invoice-group-card-aside[b-z331y905x4] {
        grid-area: aside;
        flex-shrink: 1;
        justify-content: flex-start;
    }
}

/* --- Mobile stacked rows --- */

.invoice-items-mobile[b-z331y905x4] {
    display: flex;
    flex-direction: column;
}

.invoice-items-empty[b-z331y905x4] {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-colour);
    color: var(--muted-foreground);
    font-style: italic;
    text-align: center;
}

/* The description (and its badges) take the row's full width; the quantity × price and the line total share the row
   below it, so a long description never ends up in a narrow column beside the amounts. */
.invoice-item-row-mobile[b-z331y905x4] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.75rem;
    align-items: start;
    gap: 0.375rem 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--border-colour);
}

/* The description and badges: the button that opens Edit details. It reaches the row's left and top edges (its padding
   gives them back), so a tap there still opens it, and stops short of the trash's hit area. */
.invoice-item-row-mobile-main[b-z331y905x4] {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    margin: -0.625rem 0 -0.375rem -1rem;
    padding: 0.625rem 0 0.375rem 1rem;
    border: 0;
    border-radius: var(--radius) 0 0 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.invoice-item-row-mobile-main:active[b-z331y905x4] {
    background-color: var(--pressed);
}

.invoice-item-row-mobile-main:focus-visible[b-z331y905x4] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

.invoice-item-row-mobile-description[b-z331y905x4] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.invoice-item-row-mobile-badges[b-z331y905x4] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

/* The trash icon's room in the row's grid. */
.invoice-item-row-mobile-delete-space[b-z331y905x4] {
    grid-column: 2;
    grid-row: 1;
    height: 1.5rem;
}

/* A 44 px hit area over that room (T1): the row's top padding is 0.625rem and its side padding 1rem. */
.invoice-item-row-mobile-delete[b-z331y905x4] {
    position: absolute;
    top: 0;
    right: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.invoice-item-row-mobile-delete:active[b-z331y905x4] {
    background-color: var(--pressed);
}

.invoice-item-row-mobile-delete:focus-visible[b-z331y905x4] {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (hover: hover) {
    .invoice-item-row-mobile-main:hover[b-z331y905x4],
    .invoice-item-row-mobile-delete:hover[b-z331y905x4] {
        background-color: var(--accent);
    }
}

/* Quantity × price and the line total: the total goes under the fields when they don't fit beside it. */
.invoice-item-row-mobile-amount[b-z331y905x4] {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
}

.invoice-item-row-mobile-total[b-z331y905x4] {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
}

/* The quantity and price fields side by side (two short numbers, F1), on the phone's row and the narrow table's subline. */
.invoice-item-fields[b-z331y905x4] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.invoice-item-fields-times[b-z331y905x4] {
    color: var(--muted-foreground);
}

.invoice-item-fields[b-z331y905x4]  .invoice-item-quantity,
.invoice-item-cell-field[b-z331y905x4]  .invoice-item-quantity {
    width: 4.5rem;
}

.invoice-item-fields[b-z331y905x4]  .invoice-item-price,
.invoice-item-cell-field[b-z331y905x4]  .invoice-item-price {
    width: 9rem;
}

.invoice-item-cell-field[b-z331y905x4] {
    display: inline-flex;
}

/* The narrow table's subline holds fields now, not text: Table's subline clips and keeps one line (an ellipsis for text),
   which cut the price's last digits and the fields' focus rings. Here it shows everything, the price drops under the
   quantity when the description column is narrow, and 3 px of room keep the ring whole on every side. */
.invoice-group-card .table-subline.invoice-item-subline[b-z331y905x4] {
    overflow: visible;
    white-space: normal;
}

.table-subline .invoice-item-fields[b-z331y905x4] {
    flex-wrap: wrap;
    margin: calc(0.375rem - 3px) -3px -3px;
    padding: 3px;
}

/* A rule the typed quantity or price breaks, said under the line (the field is red, with the same text as its title); on a
   phone a zero to fill in, in amber (M6: visible text, not only the field icon's title). */
.invoice-item-row-error[b-z331y905x4],
.invoice-item-row-warning[b-z331y905x4] {
    grid-column: 1 / -1;
    font-size: var(--text-xs);
    line-height: 1rem;
}

.invoice-item-row-error[b-z331y905x4] {
    color: var(--destructive);
}

.invoice-item-row-warning[b-z331y905x4] {
    color: var(--warning);
}

/* Same look as the desktop "Add item" row (background-accent + border-radius-bottom). */
.invoice-item-row-mobile-add[b-z331y905x4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border: 0;
    border-top: 1px solid var(--border-colour);
    border-radius: 0 0 var(--radius) var(--radius);
    background: color-mix(in srgb, var(--accent) 50%, transparent);
    font-weight: 600;
    cursor: pointer;
}

.invoice-group-card-warning[b-z331y905x4] {
    width: 100%;
    padding: 0.75rem 1rem;
}
/* /Features/Invoices/Components/InvoiceHowToPayCard.razor.rz.scp.css */
.invoice-how-to-pay[b-h8fqhdvbt6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* One row on desktop: the link, then the Copy button. Stacked on a phone (below). */
.invoice-how-to-pay-link-row[b-h8fqhdvbt6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.invoice-how-to-pay-link[b-h8fqhdvbt6] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.invoice-how-to-pay-copy[b-h8fqhdvbt6] {
    flex: 0 0 auto;
}

.invoice-how-to-pay-instructions[b-h8fqhdvbt6] {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.invoice-how-to-pay-hint[b-h8fqhdvbt6] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

@media (width <= 480px) {
    .invoice-how-to-pay-link-row[b-h8fqhdvbt6] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Features/Invoices/Components/InvoiceItemsSection.razor.rz.scp.css */
/* CardTitle is nowrap with line-height 1 (built for one-line titles): let the name and description wrap. */
.invoice-items-section-heading[b-cgth2dnbpa] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    line-height: 1.25;
    white-space: normal;
}

.invoice-items-section-description[b-cgth2dnbpa] {
    white-space: pre-wrap;
}

.invoice-items-section[b-cgth2dnbpa]  .invoice-items-section-title {
    gap: 0.75rem;
}

/* On a phone the heading never sits in a column beside the subtotal: it takes the full width and the subtotal goes below. */
/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .invoice-items-section[b-cgth2dnbpa]  .invoice-items-section-title {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
}

.invoice-items-section-mobile[b-cgth2dnbpa] {
    display: flex;
    flex-direction: column;
}

/* The description (and its badges) take the row's full width; the quantity × price and the line total share the row below
   it, so a long description never ends up in a narrow column beside the amounts. */
.invoice-items-section-row-mobile[b-cgth2dnbpa] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--border-colour);
}

.invoice-items-section-row-main[b-cgth2dnbpa] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.invoice-items-section-row-description[b-cgth2dnbpa] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.invoice-items-section-row-badges[b-cgth2dnbpa] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.invoice-items-section-row-amount[b-cgth2dnbpa] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

.invoice-items-section-row-qty[b-cgth2dnbpa] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.invoice-items-section-row-total[b-cgth2dnbpa] {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
}
/* /Features/Invoices/Components/InvoicePaymentsCard.razor.rz.scp.css */
.invoice-payments-empty[b-sdau31ioa5] {
    margin: 0;
    color: var(--muted-foreground);
}

.invoice-payments-list[b-sdau31ioa5] {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.invoice-payments-row[b-sdau31ioa5] {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-colour);
}

/* The link and the menu on one line; the receipt offer sits under it. */
.invoice-payments-line[b-sdau31ioa5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.invoice-payments-row:last-child[b-sdau31ioa5] {
    border-bottom: 0;
}

.invoice-payments-row-void[b-sdau31ioa5] {
    color: var(--muted-foreground);
}

.invoice-payments-link[b-sdau31ioa5] {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .invoice-payments-link:hover .invoice-payments-title[b-sdau31ioa5] {
        text-decoration: underline;
    }
}

.invoice-payments-main[b-sdau31ioa5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    min-width: 0;
}

.invoice-payments-title[b-sdau31ioa5] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.invoice-payments-note[b-sdau31ioa5] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.invoice-payments-amount[b-sdau31ioa5] {
    flex-shrink: 0;
    font-weight: 600;
}

.invoice-payments-amount-refund[b-sdau31ioa5] {
    color: var(--destructive);
}

.invoice-payments-amount-void[b-sdau31ioa5] {
    color: var(--muted-foreground);
    text-decoration: line-through;
}

/* In a card as narrow as the job page's side column (~338 px at 1024 px) the title would be squeezed beside the
   amount and the menu. Below ~22 rem the title takes the card's width, and the amount and the menu share the row under
   it (the menu is the row's last child, laid over the right end of that row). The list is the container. */
@container (width < 22rem) {
    .invoice-payments-line[b-sdau31ioa5] {
        position: relative;
    }

    .invoice-payments-link[b-sdau31ioa5] {
        flex-wrap: wrap;
        gap: 0.125rem 1rem;
    }

    .invoice-payments-main[b-sdau31ioa5] {
        flex: 1 1 100%;
    }

    .invoice-payments-amount[b-sdau31ioa5] {
        display: flex;
        align-items: center;
        min-height: 2.25rem;
    }

    .invoice-payments-row[b-sdau31ioa5]  .invoice-payments-menu {
        position: absolute;
        right: 0;
        bottom: 0;
    }
}

/* The row's menu is the shared dropdown, which renders its own root: the raw <li> anchors this rule. */
.invoice-payments-row[b-sdau31ioa5]  .invoice-payments-menu {
    flex-shrink: 0;
}

.invoice-payments-footer[b-sdau31ioa5] {
    display: flex;
    margin-top: 0.75rem;
}

/* The receipt offer under a payment that was just recorded (B-38): its own line, whatever the row's width. */
.invoice-payments-offer[b-sdau31ioa5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}
/* /Features/Invoices/Components/InvoiceProfitCard.razor.rz.scp.css */
.invoice-profit-scope[b-58oll9bpq9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.invoice-profit-figure[b-58oll9bpq9] {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.invoice-profit-detail[b-58oll9bpq9] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.invoice-profit-note[b-58oll9bpq9] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--warning);
    font-size: var(--text-sm);
    font-weight: 600;
}
/* /Features/Invoices/Components/InvoicesTable.razor.rz.scp.css */
.invoices-table-scope[b-qeu3kg6vm0] {
    display: contents;
}

.invoices-table-scope[b-qeu3kg6vm0]  .invoices-table-row-void {
    opacity: 0.6;
}

.invoices-table-invoice-cell[b-qeu3kg6vm0] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.invoices-table-number[b-qeu3kg6vm0] {
    font-weight: 600;
}

.invoices-table-muted[b-qeu3kg6vm0] {
    color: var(--muted-foreground);
}

.invoices-table-total[b-qeu3kg6vm0] {
    font-weight: 600;
}

.invoices-table-owing[b-qeu3kg6vm0] {
    color: var(--destructive);
    font-weight: 600;
}
/* /Features/Invoices/Components/InvoiceTab.razor.rz.scp.css */
.invoice-tab[b-u1xd56lhm0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.invoice-tab-refreshing[b-u1xd56lhm0] {
    opacity: 0.6;
    pointer-events: none;
}

.invoice-tab-heading[b-u1xd56lhm0] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.invoice-tab-heading h3[b-u1xd56lhm0] {
    margin: 0;
}

.invoice-tab-source[b-u1xd56lhm0] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    min-width: 0;
    max-width: 100%;
}

.invoice-tab-alert[b-u1xd56lhm0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    flex-wrap: wrap;
}

/* The current invoice's own column, with the tab's spacing. It takes focus once after Create (tabindex -1), so it shows
   no focus ring of its own. */
.invoice-tab-current[b-u1xd56lhm0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.invoice-tab-current:focus[b-u1xd56lhm0] {
    outline: none;
}

.invoice-tab-preparing[b-u1xd56lhm0] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    text-align: end;
}

.invoice-tab-offer[b-u1xd56lhm0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.invoice-tab-offer-link[b-u1xd56lhm0] {
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    color: var(--foreground);
    font: inherit;
    text-align: start;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .invoice-tab-offer-link:hover:not(:disabled)[b-u1xd56lhm0] {
        color: var(--primary);
    }
}

.invoice-tab-offer-link:active:not(:disabled)[b-u1xd56lhm0] {
    background: var(--pressed);
}

.invoice-tab-offer-link:focus-visible[b-u1xd56lhm0] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.invoice-tab-offer-link:disabled[b-u1xd56lhm0] {
    cursor: default;
    opacity: 0.5;
}

.invoice-tab-header[b-u1xd56lhm0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.invoice-tab-footer[b-u1xd56lhm0] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.invoice-tab-footer-start[b-u1xd56lhm0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.invoice-tab-footer-main[b-u1xd56lhm0] {
    display: flex;
    gap: 0.5rem;
}

.invoice-tab-start[b-u1xd56lhm0] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.invoice-tab-start-option[b-u1xd56lhm0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.invoice-tab-start-hint[b-u1xd56lhm0] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.invoice-tab-voided[b-u1xd56lhm0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.invoice-tab-voided h4[b-u1xd56lhm0] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.invoice-tab-voided ul[b-u1xd56lhm0] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.invoice-tab-voided a[b-u1xd56lhm0] {
    color: inherit;
    overflow-wrap: anywhere;
}

@media (hover: hover) {
    .invoice-tab-voided a:hover[b-u1xd56lhm0] {
        color: var(--primary);
        text-decoration: underline;
    }
}

@media (width <= 480px) {
    .invoice-tab-start[b-u1xd56lhm0],
    .invoice-tab-start-option[b-u1xd56lhm0] {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .invoice-tab-start-option[b-u1xd56lhm0] {
        text-align: center;
    }

    /* Discard alone on the first row, at the left; Save draft and Create invoice share the next one. */
    .invoice-tab-footer[b-u1xd56lhm0] {
        flex-direction: column;
        align-items: flex-start;
    }

    .invoice-tab-footer-main[b-u1xd56lhm0] {
        width: 100%;
    }

    /* They share the row when both labels fit, and each takes its own row when they don't (a long translation): a
       label is never clipped. */
    .invoice-tab-footer-main[b-u1xd56lhm0] {
        flex-wrap: wrap;
    }

    .invoice-tab-footer-main[b-u1xd56lhm0]  .btn {
        flex: 1 1 auto;
        padding-inline: 0.75rem;
    }

    .invoice-tab-start .btn[b-u1xd56lhm0] {
        width: 100%;
    }
}
/* /Features/Invoices/Components/InvoiceTotalsCard.razor.rz.scp.css */
/* A raw wrapper around the Card (a class on the Card itself would carry the Card's scope): full width up to 22rem,
   right-aligned. */
.invoice-totals-card[b-l8i931aebi] {
    width: 100%;
    max-width: 22rem;
    margin-left: auto;
}

.invoice-totals-row[b-l8i931aebi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
}

.invoice-totals-row-muted[b-l8i931aebi] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.invoice-totals-row-indented[b-l8i931aebi] {
    padding-left: 0.75rem;
}

.invoice-totals-row-total[b-l8i931aebi] {
    font-weight: 700;
    font-size: 1.25rem;
}

.invoice-totals-row-balance[b-l8i931aebi] {
    font-weight: 700;
}

.invoice-totals-row-owing[b-l8i931aebi] {
    color: var(--destructive);
}

.invoice-totals-card-void .invoice-totals-row span:last-child[b-l8i931aebi] {
    color: var(--muted-foreground);
    text-decoration: line-through;
}

.invoice-totals-divider[b-l8i931aebi] {
    border: none;
    border-top: 1px solid var(--border-colour);
    margin: 0.5rem 0;
}

@media (width <= 480px) {
    .invoice-totals-card[b-l8i931aebi] {
        max-width: none;
    }
}

/* B-35 a: the settled balance, a check and "Paid in full" in green. Inline so its enter (app.css .invoice-paid-enter)
   scales only the words, the smallest element that explains the change (QD-M4). */
.invoice-totals-paid-in-full[b-l8i931aebi] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--badge-green-fg);
}
/* /Features/Invoices/Modals/InvoiceItemModal.razor.rz.scp.css */
.invoice-item-modal-hint[b-3p6h2c0mex] {
    margin: -0.5rem 0 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.invoice-item-modal-amount[b-3p6h2c0mex] {
    margin: 0;
    font-weight: 600;
}

/* Quantity needs at most "9999.25"; the unit price gets the rest. The modal's form container is the
   inline-size container, so a phone-width modal stacks them instead of squeezing the price. */
.invoice-item-modal-quantity-price[b-3p6h2c0mex] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 0.5rem;
}

@container (width < 20rem) {
    .invoice-item-modal-quantity-price[b-3p6h2c0mex] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Features/Invoices/Modals/VoidInvoiceModal.razor.rz.scp.css */
.void-invoice-modal-text[b-g7lmb0j3y2] {
    margin: 0;
    color: var(--muted-foreground);
}
/* /Features/Invoices/Pages/Invoices.razor.rz.scp.css */
.invoices-page-content[b-hwq6y33ug5] {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

[b-hwq6y33ug5] .invoices-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.invoices-search-row[b-hwq6y33ug5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width >= 769px) and (not ((pointer: coarse) and (height < 500px))) {
    .invoices-search-row[b-hwq6y33ug5] {
        flex: 1 1 16rem;
    }
}

[b-hwq6y33ug5] .invoices-search-input {
    flex: 1 1 auto;
    min-width: 0;
}

[b-hwq6y33ug5] .invoices-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.invoices-filter-clear[b-hwq6y33ug5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: 1;
    cursor: pointer;
}

[b-hwq6y33ug5] .invoices-status-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 10rem;
}

[b-hwq6y33ug5] .invoices-create-button {
    flex: 0 0 auto;
}

[b-hwq6y33ug5] .invoices-list-content {
    transition: opacity var(--motion-fast) var(--ease-out);
}

[b-hwq6y33ug5] .invoices-list-content.is-refreshing {
    opacity: 0.6;
    /* Dims only if the reload takes longer than 150 ms, so a quick refresh never blinks. */
    transition: opacity var(--motion-fast) var(--ease-out) 150ms;
    pointer-events: none;
}

.invoices-card-list[b-hwq6y33ug5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    [b-hwq6y33ug5] .invoices-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    [b-hwq6y33ug5] .invoices-status-select {
        width: 100%;
        min-width: 0;
    }

    [b-hwq6y33ug5] .invoices-create-button {
        width: 100%;
    }

    .invoices-search-row[b-hwq6y33ug5] {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* The filter chip (S1w, T-7). On the phone layout (viewport.js, T-119) the search keeps the full width and the "Filtrado por …"
   chip goes on its own row under it, its label wrapping inside the chip with the ✕ at the end (B2). The same shape on every
   list page with a chip. */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .invoices-search-row[b-hwq6y33ug5] {
        flex-wrap: wrap;
    }

    .invoices-search-row[b-hwq6y33ug5]  .invoices-search-input {
        flex: 1 1 100%;
    }

    .invoices-search-row[b-hwq6y33ug5]  .invoices-filter-badge {
        flex: 0 1 auto;
        max-width: 100%;
        white-space: normal;
    }
}

/* The chip's ✕ is a small text button: a 44 px tap area on touch without making the chip taller. */
@media (pointer: coarse) {
    .invoices-filter-clear[b-hwq6y33ug5] {
        position: relative;
    }

    .invoices-filter-clear[b-hwq6y33ug5]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2.75rem;
        height: 2.75rem;
        transform: translate(-50%, -50%);
    }
}
/* /Features/Invoices/Pages/InvoicesDetails.razor.rz.scp.css */
.invoice-details-content[b-bo1q0vtjta] {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.invoice-details-back-link[b-bo1q0vtjta] {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-decoration: none;
}

@media (hover: hover) {
    .invoice-details-back-link:hover[b-bo1q0vtjta] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.invoice-details-header[b-bo1q0vtjta] {
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
}

.invoice-details-title[b-bo1q0vtjta] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.invoice-details-subtitle[b-bo1q0vtjta] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.invoice-details-layout[b-bo1q0vtjta] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.invoice-details-main[b-bo1q0vtjta],
.invoice-details-rail[b-bo1q0vtjta] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

[b-bo1q0vtjta] .invoice-details-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    color: var(--muted-foreground);
}

.invoice-details-message-title[b-bo1q0vtjta] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
}

.invoice-details-message-text[b-bo1q0vtjta] {
    margin: 0 0 0.5rem;
}

/* --- Hero card: identity, date and job, then the parties --- */

.invoice-hero[b-bo1q0vtjta] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.invoice-hero-top[b-bo1q0vtjta] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.invoice-hero-id[b-bo1q0vtjta] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.invoice-hero-icon[b-bo1q0vtjta] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--off-white);
    color: var(--primary);
}

.invoice-hero-id-text[b-bo1q0vtjta] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.invoice-hero-number[b-bo1q0vtjta] {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.invoice-hero-kind[b-bo1q0vtjta] {
    color: var(--muted-foreground);
}

.invoice-hero-info[b-bo1q0vtjta] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border-colour);
    border-bottom: 1px solid var(--border-colour);
    font-size: var(--text-sm);
}

.invoice-hero-info-label[b-bo1q0vtjta] {
    margin-right: 0.375rem;
    color: var(--muted-foreground);
}

.invoice-hero-job[b-bo1q0vtjta] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* The label keeps its words whole; the linked job's title is the part that wraps. */
.invoice-hero-job .invoice-hero-info-label[b-bo1q0vtjta] {
    flex: none;
    white-space: nowrap;
}

.invoice-hero-job[b-bo1q0vtjta]  svg {
    flex: none;
}

@media (hover: hover) {
    .invoice-hero-job:hover strong[b-bo1q0vtjta] {
        text-decoration: underline;
    }
}

.invoice-hero-parties[b-bo1q0vtjta] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.25rem 1.5rem;
}

.invoice-hero-party[b-bo1q0vtjta] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.invoice-hero-party-label[b-bo1q0vtjta] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.invoice-hero-party-name[b-bo1q0vtjta] {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
}

.invoice-hero-party-line[b-bo1q0vtjta] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* --- Overview and references: label / value rows split by hairlines --- */

.invoice-overview[b-bo1q0vtjta],
.invoice-references[b-bo1q0vtjta] {
    display: flex;
    flex-direction: column;
}

.invoice-overview-row[b-bo1q0vtjta],
.invoice-references-row[b-bo1q0vtjta] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-colour);
}

.invoice-overview-row:last-child[b-bo1q0vtjta],
.invoice-references-row:last-child[b-bo1q0vtjta] {
    border-bottom: 0;
}

.invoice-overview-label[b-bo1q0vtjta] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.invoice-overview-value[b-bo1q0vtjta] {
    font-weight: 600;
}

.invoice-overview-paid[b-bo1q0vtjta] {
    color: var(--success);
}

.invoice-overview-owing[b-bo1q0vtjta] {
    color: var(--warning);
}

.invoice-overview-hint[b-bo1q0vtjta] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.invoice-overview-void[b-bo1q0vtjta] {
    color: var(--muted-foreground);
    text-decoration: line-through;
}

.invoice-overview-row-balance[b-bo1q0vtjta] {
    padding-top: 0.875rem;
}

/* A row's label and value wrap onto two lines instead of overflowing; the balance steps its size down with its length
   (--chars, about 0.62em per character) so a 12-digit amount fits the card's width. Amounts never break. */
.invoice-overview[b-bo1q0vtjta] {
    container-type: inline-size;
}

.invoice-overview-row[b-bo1q0vtjta] {
    flex-wrap: wrap;
}

.invoice-overview-value[b-bo1q0vtjta] {
    white-space: nowrap;
}

.invoice-overview-balance[b-bo1q0vtjta] {
    margin-left: auto;
    font-size: clamp(1.125rem, calc(100cqw / (var(--chars, 1) * 0.62)), 1.75rem);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

/* B-35 a: the settled balance, a check and "Paid in full" in green, in place of the balance figure. Inline so its enter
   (app.css .invoice-paid-enter) scales only the words (QD-M4). */
.invoice-overview-paid-in-full[b-bo1q0vtjta] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--badge-green-fg);
    font-size: 1.125rem;
    font-weight: 700;
}

.invoice-references-row[b-bo1q0vtjta] {
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .invoice-references-row:hover .invoice-references-value[b-bo1q0vtjta] {
        text-decoration: underline;
    }
}

.invoice-references-value[b-bo1q0vtjta] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

/* --- Actions: full-width buttons under the references --- */

.invoice-actions[b-bo1q0vtjta] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-colour);
}

.invoice-actions[b-bo1q0vtjta]  .invoice-action {
    width: 100%;
    justify-content: center;
}

.invoice-actions[b-bo1q0vtjta]  .invoice-action-void:not(:disabled) {
    border-color: var(--destructive);
    color: var(--destructive);
}

.invoice-action-wrap[b-bo1q0vtjta]  .tooltip {
    display: block;
}

/* Two columns: the document, then the overview and payments rail. */
@media (width >= 1024px) {
    .invoice-details-layout[b-bo1q0vtjta] {
        grid-template-columns: 2fr 1fr;
    }
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .invoice-hero-number[b-bo1q0vtjta] {
        font-size: 1.75rem;
    }
}
/* /Features/Jobs/Components/JobAssigneeAvatar.razor.rz.scp.css */
.job-assignee-avatar[b-vphfu6bioz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--accent);
    color: var(--primary);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
}
/* /Features/Jobs/Components/JobBoard.razor.rz.scp.css */
.job-board-shell[b-0reffra1gd] {
    position: relative;
}

.job-board[b-0reffra1gd] {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    cursor: grab;
    /* The mirrored bar below (job-board-scrollbar) is the only horizontal scrollbar shown: this one stays
       fully scrollable (wheel, drag-panning, programmatic scrollLeft), just visually hidden so there
       aren't two bars stacked on top of each other. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.job-board[b-0reffra1gd]::-webkit-scrollbar {
    display: none;
}

.job-board.job-board-panning[b-0reffra1gd] {
    cursor: grabbing;
    user-select: none;
}

/* Mirrors the board's own horizontal scroll, pinned to the bottom of the viewport (position: fixed,
   not sticky — its own containing block is only as tall as the board itself, so sticky would have no
   room to travel) so it stays reachable even when a column's card list runs taller than the screen.
   job-board.js keeps left/width aligned to the board's own rect. Hidden via job-board-scrollbar-hidden
   when the board doesn't overflow, or is scrolled out of view. */
.job-board-scrollbar[b-0reffra1gd] {
    position: fixed;
    bottom: 0.75rem;
    left: 0;
    z-index: 20;
    height: 0.75rem;
    padding-top: 0.25rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.job-board-scrollbar-hidden[b-0reffra1gd] {
    visibility: hidden;
    pointer-events: none;
}

.job-board-scrollbar-track[b-0reffra1gd] {
    height: 1px;
}

.job-board-column[b-0reffra1gd] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 16rem;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: var(--card-radius, var(--radius));
    background-color: var(--accent);
}

.job-board-column-header[b-0reffra1gd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.job-board-column-count[b-0reffra1gd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.375rem;
    border: 1px solid var(--border-colour);
    border-radius: 9999px;
    background-color: var(--primary-foreground);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
}

.job-board-column-subheader[b-0reffra1gd] {
    color: var(--muted-foreground);
    font-size: var(--text-xs, 0.75rem);
}

.job-board-column-body[b-0reffra1gd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 5rem;
    min-width: 0;
    max-height: calc(100vh - 20rem);
    overflow-x: hidden;
    overflow-y: auto;
}

@media (height <= 45rem) {
    .job-board-column-body[b-0reffra1gd] {
        max-height: 20rem;
    }
}

.job-board-empty[b-0reffra1gd] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0.5rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs, 0.75rem);
    text-align: center;
}

.jobs-board-column-over[b-0reffra1gd] {
    outline: 2px dashed var(--border-colour-darker);
    background-color: color-mix(in srgb, var(--accent) 70%, var(--border-colour));
}

.job-board-view-all[b-0reffra1gd] {
    align-self: center;
    color: var(--primary);
    font-size: var(--text-xs, 0.75rem);
    text-decoration: none;
}

@media (hover: hover) {
    .job-board-view-all:hover[b-0reffra1gd] {
        text-decoration: underline;
    }
}
/* /Features/Jobs/Components/JobBoardCard.razor.rz.scp.css */
.job-board-card[b-2tm27d4saq] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--primary-foreground);
    color: var(--primary);
    text-decoration: none;
    cursor: grab;
    transition: box-shadow var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .job-board-card:hover[b-2tm27d4saq] {
        box-shadow: 0 2px 8px rgb(0 0 0 / 0.06);
        border-color: var(--border-colour-darker);
    }
}

.jobs-board-card-dragging[b-2tm27d4saq] {
    opacity: 0.4;
}

.jbc-header[b-2tm27d4saq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    row-gap: 0.25rem;
    min-width: 0;
}

.jbc-number[b-2tm27d4saq] {
    font-weight: 700;
    font-size: var(--text-sm, 0.875rem);
}

.jbc-spacer[b-2tm27d4saq] {
    flex: 1 1 auto;
}

.jbc-title[b-2tm27d4saq] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 600;
}

.jbc-muted[b-2tm27d4saq] {
    color: var(--muted-foreground);
}

.jbc-subline[b-2tm27d4saq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted-foreground);
    font-size: var(--text-xs, 0.75rem);
}

.jbc-row[b-2tm27d4saq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    row-gap: 0.25rem;
}

.jbc-offsite[b-2tm27d4saq] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs, 0.75rem);
}

.jbc-footer[b-2tm27d4saq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.125rem;
}

.jbc-time-in-status[b-2tm27d4saq] {
    color: var(--muted-foreground);
    font-size: var(--text-xs, 0.75rem);
}

.jbc-time-in-status-warning[b-2tm27d4saq] {
    color: var(--warning);
    font-weight: 600;
}

.jbc-total[b-2tm27d4saq] {
    font-weight: 600;
    font-size: var(--text-xs, 0.75rem);
    text-align: right;
}

.jbc-outstanding[b-2tm27d4saq] {
    display: block;
    color: var(--destructive);
    font-weight: 400;
}
/* /Features/Jobs/Components/JobCard.razor.rz.scp.css */
.job-card[b-r6mvhnox8l] {
    /* A card never pushes its grid column wider than the screen (S1w, T-10). */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius));
    background-color: var(--primary-foreground);
    color: var(--primary);
    text-decoration: none;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.job-card-header[b-r6mvhnox8l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.job-card-number[b-r6mvhnox8l] {
    font-weight: 700;
}

.job-card-spacer[b-r6mvhnox8l] {
    flex: 1 1 auto;
}

.job-card-title[b-r6mvhnox8l] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.job-card-muted[b-r6mvhnox8l] {
    color: var(--muted-foreground);
}

.job-card-row[b-r6mvhnox8l] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-sm, 0.875rem);
}

.job-card-offsite[b-r6mvhnox8l] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-inline-start: 0.5rem;
}

.job-card-footer[b-r6mvhnox8l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.job-card-total[b-r6mvhnox8l] {
    font-weight: 600;
    text-align: right;
}

.job-card-outstanding[b-r6mvhnox8l] {
    display: block;
    color: var(--destructive);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 400;
}

/* The icon and the offsite label keep their size; the free text beside them (the customer) is what shrinks. */
.job-card-row[b-r6mvhnox8l]  > svg,
.job-card-offsite[b-r6mvhnox8l] {
    flex-shrink: 0;
}
/* /Features/Jobs/Components/JobCoreFields.razor.rz.scp.css */
.job-core-fields-clear-schedule[b-tz0252r3ka] {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: var(--text-xs);
    text-decoration: underline;
    cursor: pointer;
}

@media (hover: hover) {
    .job-core-fields-clear-schedule:hover[b-tz0252r3ka] {
        color: var(--primary);
    }
}
/* /Features/Jobs/Components/JobDetails/JobActivityTimeline.razor.rz.scp.css */
.job-activity-empty[b-2es2bgz0bu] {
    margin: 0;
    color: var(--muted-foreground);
}

.job-activity-timeline[b-2es2bgz0bu] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    padding-inline-start: 1.25rem;
}

.job-activity-timeline[b-2es2bgz0bu]::before {
    content: "";
    position: absolute;
    top: 0.375rem;
    bottom: 0.375rem;
    left: 0.25rem;
    width: 1px;
    background: var(--border-colour);
}

.job-activity-item[b-2es2bgz0bu] {
    display: flex;
    gap: 0.75rem;
    position: relative;
}

.job-activity-dot[b-2es2bgz0bu] {
    position: absolute;
    left: -1.25rem;
    top: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--border-colour-darker);
}

.job-activity-dot-latest[b-2es2bgz0bu] {
    background: var(--primary);
}

.job-activity-body[b-2es2bgz0bu] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.job-activity-headline[b-2es2bgz0bu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.job-activity-meta[b-2es2bgz0bu] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

/* The cause of an automatic move ("Moved automatically: invoice issued"), under the "by · when" line. */
.job-activity-cause[b-2es2bgz0bu] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.job-activity-note[b-2es2bgz0bu] {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    background: var(--accent);
    font-size: var(--text-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.job-activity-odometer[b-2es2bgz0bu] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}
/* /Features/Jobs/Components/JobDetails/JobEditForm.razor.rz.scp.css */
.job-edit-form-wrap[b-3g1cqwrk66] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-colour);
}

[b-3g1cqwrk66] .job-edit-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.job-edit-location-section[b-3g1cqwrk66] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.job-edit-location-label[b-3g1cqwrk66] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.job-edit-location[b-3g1cqwrk66] {
    display: inline-flex;
    align-self: flex-start;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    overflow: hidden;
}

.job-edit-location-btn[b-3g1cqwrk66] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 0;
    background: transparent;
    padding: 0.5rem 0.75rem;
    color: var(--muted-foreground);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.job-edit-location-btn + .job-edit-location-btn[b-3g1cqwrk66] {
    border-inline-start: 1px solid var(--border-colour);
}

.job-edit-location-btn-active[b-3g1cqwrk66] {
    background: var(--accent);
    color: var(--primary);
    font-weight: 600;
}

.job-edit-location-empty[b-3g1cqwrk66],
.job-edit-location-error[b-3g1cqwrk66] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.job-edit-location-retry[b-3g1cqwrk66] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.job-edit-actions[b-3g1cqwrk66] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* /Features/Jobs/Components/JobDetails/JobProfileCard.razor.rz.scp.css */
.job-profile-skeleton[b-j0hez8pj04] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.job-profile-error[b-j0hez8pj04] {
    margin: 0;
    color: var(--muted-foreground);
}

/* The shared profile header: the icon, the job number and the edit button share the first row, and the title (free text,
   up to 100 characters) spans the whole card instead of sitting in a narrow column. The identity wrapper only groups
   the markup. */
.job-profile-header[b-j0hez8pj04] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    gap: 0.375rem 1rem;
}

.job-profile-identity[b-j0hez8pj04] {
    display: contents;
}

.job-profile-icon[b-j0hez8pj04] {
    grid-column: 1;
    grid-row: 1;
}

.job-profile-title[b-j0hez8pj04] {
    grid-column: 2;
    grid-row: 1;
}

.job-profile-subtitle[b-j0hez8pj04],
.job-profile-status[b-j0hez8pj04] {
    grid-column: 1 / -1;
}

.job-profile-actions[b-j0hez8pj04] {
    grid-column: 3;
    grid-row: 1;
}

.job-profile-icon[b-j0hez8pj04] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
    color: var(--primary);
}

.job-profile-title[b-j0hez8pj04] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.job-profile-subtitle[b-j0hez8pj04] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.job-profile-muted[b-j0hez8pj04] {
    color: var(--muted-foreground);
    font-weight: 400;
}

.job-profile-status[b-j0hez8pj04] {
    margin-top: 0.25rem;
}

.job-profile-actions[b-j0hez8pj04] {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

.job-profile-icon-button[b-j0hez8pj04] {
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius, 0.625rem);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .job-profile-icon-button:hover[b-j0hez8pj04] {
        background: var(--accent);
        color: var(--primary);
    }
}

.job-profile-icon-button:active[b-j0hez8pj04] {
    background: var(--pressed);
    color: var(--primary);
}

.job-profile-section[b-j0hez8pj04] {
    margin-top: 1.5rem;
}

.job-profile-section-title[b-j0hez8pj04] {
    margin: 0 0 0.5rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.job-profile-fields[b-j0hez8pj04] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
}

.job-profile-field[b-j0hez8pj04] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.job-profile-field dt[b-j0hez8pj04] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.job-profile-field dd[b-j0hez8pj04] {
    margin: 0;
    overflow-wrap: anywhere;
}

.job-profile-field a[b-j0hez8pj04] {
    color: var(--primary);
    text-decoration: none;
}

@media (hover: hover) {
    .job-profile-field a:hover[b-j0hez8pj04] {
        text-decoration: underline;
    }
}

.job-profile-vehicle-link[b-j0hez8pj04] {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    align-items: center;
    gap: 0.5rem;
}

.job-profile-location-offsite[b-j0hez8pj04] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.job-profile-address[b-j0hez8pj04] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.job-profile-address-missing[b-j0hez8pj04] {
    color: var(--destructive);
    font-weight: 600;
}

.job-profile-inline-link[b-j0hez8pj04] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: var(--text-sm);
    text-decoration: underline;
    cursor: pointer;
}

.job-profile-assignee-row[b-j0hez8pj04] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.job-profile-assignee-menu[b-j0hez8pj04] {
    margin-inline-start: auto;
}

.job-profile-since[b-j0hez8pj04] {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border-colour);
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.job-profile-pinned-note[b-j0hez8pj04] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 1.25rem;
}

.job-profile-all-notes[b-j0hez8pj04] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: var(--text-xs);
    text-decoration: underline;
    cursor: pointer;
}

@media (hover: hover) {
    .job-profile-all-notes:hover[b-j0hez8pj04] {
        color: var(--primary);
    }
}
/* /Features/Jobs/Components/JobDetails/JobStatusProgress.razor.rz.scp.css */
/* The container the narrow rule below measures: the timeline's own width (the card's), not the
   window's. At 1024 px the job page's left column is ~338 px wide on a desktop-width window. */
.job-status-progress-container[b-in1i2h7ph8] {
    container-type: inline-size;
}

.job-status-progress[b-in1i2h7ph8] {
    display: flex;
    align-items: flex-start;
}

.job-status-progress-cancelled[b-in1i2h7ph8] {
    opacity: 0.6;
}

.job-status-progress-step[b-in1i2h7ph8] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

/* Fixed to the current dot's height so every column's line (and label) sits on the same baseline; otherwise the
   bigger current dot makes its track taller and its line halves drop out of line with the neighbours. */
.job-status-progress-track[b-in1i2h7ph8] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 0.875rem;
}

.job-status-progress-line[b-in1i2h7ph8] {
    flex: 1 1 0;
    height: 2px;
    background: var(--border-colour);
}

.job-status-progress-line-done[b-in1i2h7ph8] {
    background: var(--primary);
}

/* Each column renders a line on both sides of its dot so the dot is centred (and lines up with its label);
   the outer half of the first/last column has nothing to connect to. */
.job-status-progress-step:first-child .job-status-progress-line:first-child[b-in1i2h7ph8],
.job-status-progress-step:last-child .job-status-progress-line:last-child[b-in1i2h7ph8] {
    visibility: hidden;
}

.job-status-progress-dot[b-in1i2h7ph8] {
    flex: 0 0 auto;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--border-colour);
}

.job-status-progress-dot-done[b-in1i2h7ph8] {
    background: var(--primary);
}

.job-status-progress-dot-current[b-in1i2h7ph8] {
    width: 0.875rem;
    height: 0.875rem;
    background: var(--primary);
}

.job-status-progress-label[b-in1i2h7ph8] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    text-align: center;
}

.job-status-progress-label-current[b-in1i2h7ph8] {
    color: var(--primary);
    font-weight: 600;
}

.job-status-progress-visually-hidden[b-in1i2h7ph8] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Only the current step keeps its label when the timeline is as narrow as a phone's. */
@container (width < 30rem) {
    .job-status-progress-label:not(.job-status-progress-label-current)[b-in1i2h7ph8] {
        display: none;
    }
}
/* /Features/Jobs/Components/JobDetails/JobSummaryTab.razor.rz.scp.css */
.job-summary-tab[b-86c8akg3nf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.job-summary-tab-refreshing[b-86c8akg3nf] {
    opacity: 0.6;
}

.job-summary-tab[b-86c8akg3nf]  .job-summary-status {
    background: var(--primary-foreground);
}

.job-summary-tab[b-86c8akg3nf]  .job-summary-status-cancelled {
    background: var(--accent);
}

.job-summary-status-row[b-86c8akg3nf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.job-summary-status-badge-group[b-86c8akg3nf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.job-summary-status-text[b-86c8akg3nf] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.job-summary-status-text-success[b-86c8akg3nf] {
    color: var(--success);
    font-weight: 600;
}

.job-summary-status-actions[b-86c8akg3nf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.job-summary-ready-message[b-86c8akg3nf] {
    margin-top: 0.75rem;
}

.job-summary-reminder[b-86c8akg3nf] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0.75rem 0 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.job-summary-reminder-warning[b-86c8akg3nf] {
    color: var(--warning);
}

/* The bell stays on the first line when the text wraps. */
.job-summary-reminder[b-86c8akg3nf]  .icon {
    flex-shrink: 0;
    margin-top: 0.2em;
}

.job-summary-cancellation-note[b-86c8akg3nf] {
    margin: 0.75rem 0 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    font-style: italic;
}

/* Only rendered on desktop; mobile gets the compact Money card instead. The row's width is its
   column's, not the window's (the job page's side column is ~338 px at 1024 px on a desktop-width
   window), so its wrapper is the container and the tiles stack one per row below ~33 rem. */
.job-summary-stat-container[b-86c8akg3nf] {
    container-type: inline-size;
}

.job-summary-stat-row[b-86c8akg3nf] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@container (width < 33rem) {
    .job-summary-stat-row[b-86c8akg3nf] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.job-summary-overview-content[b-86c8akg3nf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.job-summary-overview-row[b-86c8akg3nf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.job-summary-overview-label[b-86c8akg3nf] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.job-summary-overview-value[b-86c8akg3nf] {
    font-weight: 600;
    font-size: 1.125rem;
}

.job-summary-overview-value-success[b-86c8akg3nf] {
    color: var(--success);
}

.job-summary-overview-value-warning[b-86c8akg3nf] {
    color: var(--destructive);
}

.job-summary-show-all[b-86c8akg3nf] {
    margin-top: 0.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: var(--text-sm);
    text-decoration: underline;
    cursor: pointer;
}

.job-summary-quick-actions[b-86c8akg3nf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.job-summary-quick-actions[b-86c8akg3nf]  .btn {
    width: 100%;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .job-summary-stat-row[b-86c8akg3nf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width <= 480px) {
    /* The ⋮ menu sits top right beside the status badge and text, and the next-step button takes the full row under
       them: the button's label (es: "Siguiente: Listo para retirar") needs the whole width, and the menu never gets a row
       of its own. */
    .job-summary-status-actions[b-86c8akg3nf] {
        display: contents;
    }

    .job-summary-status-badge-group[b-86c8akg3nf] {
        flex: 1 1 0;
        min-width: 0;
    }

    .job-summary-status-actions[b-86c8akg3nf]  .dm-root {
        order: 1;
        align-self: flex-start;
        margin-top: 0.25rem;
    }

    .job-summary-tab[b-86c8akg3nf]  .job-summary-next-button {
        order: 2;
        flex: 0 0 100%;
        min-width: 0;
        padding-inline: 0.75rem;
    }

    .job-summary-quick-actions[b-86c8akg3nf] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Jobs/Components/JobReminderFields.razor.rz.scp.css */
.job-reminder-fields[b-6sbd5jm58e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.job-reminder-timing[b-6sbd5jm58e] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.job-reminder-hint[b-6sbd5jm58e] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.job-reminder-hint-warning[b-6sbd5jm58e] {
    color: var(--warning);
}

/* Create Job's collapsible card (Collapsible): the title on the left, the summary ("Off" or the timing) after it. */
.job-reminder-card-heading[b-6sbd5jm58e] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.job-reminder-card-summary[b-6sbd5jm58e] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* The heading is a row's label, not a page card's title. The h3 is the CardTitle component's, hence ::deep from the raw heading div. */
.job-reminder-card-heading[b-6sbd5jm58e]  .card-title {
    font-size: 1rem;
}
/* /Features/Jobs/Components/JobScheduleLabel.razor.rz.scp.css */
.job-schedule-label[b-69d14aehrz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.job-schedule-label-muted[b-69d14aehrz] {
    color: var(--muted-foreground);
}

.job-schedule-label-today[b-69d14aehrz] {
    color: var(--warning);
    font-weight: 600;
}

.job-schedule-label-overdue[b-69d14aehrz] {
    color: var(--destructive);
    font-weight: 600;
}
/* /Features/Jobs/Components/JobsTable.razor.rz.scp.css */
.jobs-table-scope[b-7zearut08v] {
    display: contents;
}

.jobs-table-scope[b-7zearut08v]  .jobs-table-center {
    text-align: center;
}

.jobs-table-muted[b-7zearut08v] {
    color: var(--muted-foreground);
}

.jobs-table-job-cell[b-7zearut08v] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.jobs-table-number[b-7zearut08v] {
    font-weight: 700;
}

.jobs-table-title-line[b-7zearut08v] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow-wrap: anywhere;
}

.jobs-table-offsite[b-7zearut08v] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs, 0.75rem);
}

.jobs-table-customer[b-7zearut08v] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.jobs-table-customer a[b-7zearut08v] {
    color: var(--primary);
    text-decoration: none;
}

@media (hover: hover) {
    .jobs-table-customer a:hover[b-7zearut08v] {
        text-decoration: underline;
    }
}

.jobs-table-total[b-7zearut08v] {
    font-weight: 600;
}

/* The cell is no-wrap; this caption wraps at its space ("por pagar" moves down), and the amount itself never breaks. */
.jobs-table-outstanding[b-7zearut08v] {
    color: var(--destructive);
    font-size: var(--text-xs, 0.75rem);
    white-space: normal;
}
/* /Features/Jobs/Components/JobStatusMenu.razor.rz.scp.css */
.job-status-menu-scope[b-nyr1sm75jk] {
    display: contents;
}

.job-status-menu-trigger[b-nyr1sm75jk] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: var(--muted-foreground);
}

.job-status-menu-compact-trigger[b-nyr1sm75jk] {
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: var(--radius);
    background: none;
    font: inherit;
    color: var(--muted-foreground);
    cursor: pointer;
}

@media (hover: hover) {
    .job-status-menu-compact-trigger:hover[b-nyr1sm75jk] {
        background-color: var(--accent);
    }
}

.job-status-menu-compact-trigger:active[b-nyr1sm75jk] {
    background-color: var(--pressed);
}

.job-status-menu-scope[b-nyr1sm75jk]  .job-status-menu-next {
    font-weight: 600;
}
/* /Features/Jobs/Components/ReopenJobNotice.razor.rz.scp.css */
.reopen-notice[b-pa5j87t0d8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--off-white);
    color: var(--muted-foreground);
}

.reopen-notice-text[b-pa5j87t0d8] {
    flex: 1 1 14rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (width <= 480px) {
    .reopen-notice-text[b-pa5j87t0d8] {
        flex-basis: 100%;
    }

    .reopen-notice[b-pa5j87t0d8]  .btn {
        width: 100%;
    }
}
/* /Features/Jobs/Modals/ChangeJobStatusModal.razor.rz.scp.css */
.cjs-scope[b-k52fvkjl68] {
    display: contents;
}

.cjs-header[b-k52fvkjl68] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.cjs-subtitle[b-k52fvkjl68] {
    color: var(--muted-foreground);
    font-size: var(--text-sm, 0.875rem);
    margin: 0 0 1rem;
}

.cjs-section[b-k52fvkjl68] {
    margin-bottom: 1rem;
}

.cjs-odometer-hint[b-k52fvkjl68] {
    color: var(--muted-foreground);
    font-size: var(--text-xs, 0.75rem);
    margin: 0.25rem 0 0;
}

.cjs-schedule-row[b-k52fvkjl68] {
    display: flex;
    gap: 0.75rem;
}

.cjs-schedule-row > *[b-k52fvkjl68] {
    flex: 1 1 0;
    min-width: 0;
}


.cjs-muted[b-k52fvkjl68] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs, 0.75rem);
}

.cjs-due-failed[b-k52fvkjl68] {
    margin-top: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs, 0.75rem);
}

.cjs-due[b-k52fvkjl68] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cjs-due-title[b-k52fvkjl68] {
    margin: 0;
    font-weight: 600;
    font-size: var(--text-sm, 0.875rem);
}

.cjs-due-fields[b-k52fvkjl68] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

@media (width <= 480px) {
    .cjs-due-fields[b-k52fvkjl68] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Features/Jobs/Modals/ReadyMessageModal.razor.rz.scp.css */
.ready-message-loading[b-i1ur2sb367] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.ready-message-body[b-i1ur2sb367] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ready-message-recipient[b-i1ur2sb367] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ready-message-name[b-i1ur2sb367] {
    margin: 0;
    font-weight: 600;
}

.ready-message-contact[b-i1ur2sb367] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.ready-message-share[b-i1ur2sb367] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* /Features/Jobs/Modals/RescheduleJobModal.razor.rz.scp.css */
.rjm-scope[b-ill1i6yvp8] {
    display: contents;
}

.rjm-fields[b-ill1i6yvp8] {
    display: flex;
    gap: 0.75rem;
}

/* The pickers' root elements are rendered by their components, so they carry no scope of this file. */
.rjm-fields[b-ill1i6yvp8]  > * {
    flex: 1 1 0;
    min-width: 0;
}

.rjm-section[b-ill1i6yvp8] {
    margin-top: 1rem;
}
/* /Features/Jobs/Pages/Jobs.razor.rz.scp.css */
.jobs-page-content[b-jriphtxqag] {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

[b-jriphtxqag] .jobs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

/* The filters group (search, status select, Mine) and the actions group (List | Board, Calendar, Create job). The
   filters' basis is what they need to keep the search field at about 16rem (16 + the 9.5rem select + Mine at about
   8.5rem in es-AR, "Mis trabajos", + two 0.75rem gaps = 35rem), so the actions wrap onto a second row, right-aligned,
   before the search ever shrinks below that. */
.jobs-toolbar-main[b-jriphtxqag] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 35rem;
    min-width: 0;
}

/* The board has no status select: 9.5rem and a gap less. */
.jobs-toolbar-main-board[b-jriphtxqag] {
    flex-basis: 25rem;
}

.jobs-toolbar-actions[b-jriphtxqag] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.jobs-search-row[b-jriphtxqag] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1 1 16rem;
}

[b-jriphtxqag] .jobs-search-input {
    flex: 1 1 auto;
    min-width: 0;
}

[b-jriphtxqag] .jobs-status-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 9.5rem;
}

[b-jriphtxqag] .jobs-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.jobs-filter-clear[b-jriphtxqag] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: 1;
    cursor: pointer;
}

.jobs-view-toggle[b-jriphtxqag] {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    overflow: hidden;
}

.jobs-view-toggle-btn[b-jriphtxqag] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: none;
    background: none;
    padding: 0.5rem 0.75rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm, 0.875rem);
    cursor: pointer;
}

.jobs-view-toggle-btn + .jobs-view-toggle-btn[b-jriphtxqag] {
    border-inline-start: 1px solid var(--border-colour);
}

/* Touch (T-23): a segment is 44 px tall. */
@media (pointer: coarse) {
    .jobs-view-toggle-btn[b-jriphtxqag] {
        min-height: 2.75rem;
    }
}

.jobs-view-toggle-btn-active[b-jriphtxqag] {
    background-color: var(--accent);
    color: var(--primary);
    font-weight: 600;
}

[b-jriphtxqag] .jobs-create-button {
    flex: 0 0 auto;
}

[b-jriphtxqag] .jobs-list-content {
    transition: opacity var(--motion-fast) var(--ease-out);
}

[b-jriphtxqag] .jobs-list-content.is-refreshing {
    opacity: 0.6;
    /* Dims only if the reload takes longer than 150 ms, so a quick refresh never blinks. */
    transition: opacity var(--motion-fast) var(--ease-out) 150ms;
    pointer-events: none;
}

.jobs-card-list[b-jriphtxqag] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.jobs-board-skeleton[b-jriphtxqag] {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
}

.jobs-board-skeleton-column[b-jriphtxqag] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 15rem;
    gap: 0.75rem;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    [b-jriphtxqag] .jobs-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    /* Search, select and Mine stack at full width; then the icon-only Calendar and Create job share the last row. */
    .jobs-toolbar-main[b-jriphtxqag] {
        flex-direction: column;
        align-items: stretch;
        flex: 0 0 auto;
    }

    .jobs-toolbar-main[b-jriphtxqag]  .jobs-mine-button {
        width: 100%;
    }

    .jobs-toolbar-actions[b-jriphtxqag] {
        margin-inline-start: 0;
    }

    .jobs-toolbar-actions[b-jriphtxqag]  .jobs-calendar-button {
        flex: 0 0 auto;
    }

    .jobs-toolbar-actions[b-jriphtxqag]  .jobs-create-button {
        flex: 1 1 auto;
        width: auto;
    }

    [b-jriphtxqag] .jobs-status-select {
        width: 100%;
        min-width: 0;
    }

    .jobs-search-row[b-jriphtxqag] {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* The filter chip (S1w, T-7). On the phone layout (viewport.js, T-119) the search keeps the full width and the "Filtrado por …"
   chip goes on its own row under it, its label wrapping inside the chip with the ✕ at the end (B2). The same shape on every
   list page with a chip. */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .jobs-search-row[b-jriphtxqag] {
        flex-wrap: wrap;
    }

    .jobs-search-row[b-jriphtxqag]  .jobs-search-input {
        flex: 1 1 100%;
    }

    .jobs-search-row[b-jriphtxqag]  .jobs-filter-badge {
        flex: 0 1 auto;
        max-width: 100%;
        white-space: normal;
    }
}

/* The chip's ✕ is a small text button: a 44 px tap area on touch without making the chip taller. */
@media (pointer: coarse) {
    .jobs-filter-clear[b-jriphtxqag] {
        position: relative;
    }

    .jobs-filter-clear[b-jriphtxqag]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2.75rem;
        height: 2.75rem;
        transform: translate(-50%, -50%);
    }
}
/* /Features/Jobs/Pages/JobsDetails.razor.rz.scp.css */
.job-details-content[b-yeak5bno8r] {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.job-details-back-link[b-yeak5bno8r] {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-decoration: none;
}

@media (hover: hover) {
    .job-details-back-link:hover[b-yeak5bno8r] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.job-details-header[b-yeak5bno8r] {
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
}

.job-details-title[b-yeak5bno8r] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.job-details-subtitle[b-yeak5bno8r] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.job-details-layout[b-yeak5bno8r] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.job-details-profile[b-yeak5bno8r] {
    min-width: 0;
}

.job-details-command-center[b-yeak5bno8r] {
    min-width: 0;
}

/* A link to a tab scrolls the tab card to the top on a phone: under the app's sticky top row, with a little air. */
/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width < 768px), ((pointer: coarse) and (height < 500px)) {
    .job-details-command-center[b-yeak5bno8r] {
        scroll-margin-top: calc(var(--sticky-offset, 0px) + 0.5rem);
    }
}

[b-yeak5bno8r] .job-details-tabs-list {
    flex-wrap: nowrap;
}

[b-yeak5bno8r] .job-details-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    color: var(--muted-foreground);
}

.job-details-not-found-title[b-yeak5bno8r] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
}

.job-details-not-found-text[b-yeak5bno8r] {
    margin: 0 0 0.5rem;
}

/* Two columns: the page scrolls as a whole. The profile sticks under the top bar, and so does the top of the
   command center card (CardStickyHeader), on the same line as the profile's top edge. */
@media (width >= 1024px) {
    .job-details-layout[b-yeak5bno8r] {
        grid-template-columns: minmax(18rem, 22rem) 1fr;
    }

    .job-details-profile[b-yeak5bno8r] {
        position: sticky;
        top: calc(var(--sticky-offset) + 0.75rem);
        align-self: start;
        /* A profile taller than the window scrolls on its own instead of hiding its bottom. Two things are kept free
           below it, so its scrolled-to-the-end bottom (the form's buttons) is never under the footer's fade: the footer
           (4 rem, MainLayout) and the distance the profile starts below where it sticks at the top of the page (the back
           link and the header above the grid, whose height depends on the title: scroll.js measures it into
           --sticky-lead; 4.5 rem until it has). */
        max-height: calc(100dvh - var(--sticky-offset) - 1.5rem - var(--sticky-lead, 4.5rem) - 4rem);
        overflow-y: auto;
    }
}

/* The Invoice trigger's Draft badge sits beside the label and never wraps under it. */
.job-details-tab-with-badge[b-yeak5bno8r] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}
/* /Features/Notes/Components/NoteCard.razor.rz.scp.css */
.note-card[b-crxb3kswbb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius, 0.625rem));
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

.note-card-pinned[b-crxb3kswbb] {
    border-color: var(--border-colour-darker);
    background: var(--accent);
}

.note-card-customer[b-crxb3kswbb] {
    border-inline-start-width: 3px;
    border-inline-start-color: var(--info);
}

.note-card-header[b-crxb3kswbb] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.note-card-header-main[b-crxb3kswbb] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.note-card-avatar[b-crxb3kswbb] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: var(--accent);
    color: var(--primary);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* On a pinned card the accent background is the card's own, so the avatar gets a border to stay visible. */
.note-card-pinned .note-card-avatar[b-crxb3kswbb] {
    background: var(--background);
    border: 1px solid var(--border-colour);
}

.note-card-author[b-crxb3kswbb] {
    font-size: var(--text-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.note-card-time[b-crxb3kswbb],
.note-card-edited[b-crxb3kswbb] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.note-card-pinned-pill[b-crxb3kswbb] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--border-colour-darker);
    border-radius: 9999px;
    color: var(--primary);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* The kebab menu sits at the right end of the header, top-right when the header wraps. */
.note-card-menu[b-crxb3kswbb] {
    flex: 0 0 auto;
}

.note-card-text[b-crxb3kswbb] {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.note-card-text-clamped[b-crxb3kswbb] {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.note-card-done .note-card-text[b-crxb3kswbb] {
    color: var(--muted-foreground);
}

.note-card-toggle[b-crxb3kswbb] {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: var(--text-xs);
    text-decoration: underline;
    cursor: pointer;
}

@media (hover: hover) {
    .note-card-toggle:hover[b-crxb3kswbb] {
        color: var(--primary);
    }
}

.note-card-reminder[b-crxb3kswbb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-colour);
}

.note-card-reminds[b-crxb3kswbb] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    max-width: 100%;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.note-card-done-by[b-crxb3kswbb] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

/* A just-added note shows its highlight statically (the animation's first keyframe holds during its delay), then it fades
   out within one motion step, after --highlight-hold. */
.note-card-new[b-crxb3kswbb] {
    animation: note-card-highlight-b-crxb3kswbb var(--motion-base) var(--ease-out) var(--highlight-hold) backwards;
}

.note-card-new.note-card-pinned[b-crxb3kswbb] {
    outline: 2px solid transparent;
    outline-offset: 2px;
    animation: note-card-outline-b-crxb3kswbb var(--motion-base) var(--ease-out) var(--highlight-hold) backwards;
}

@keyframes note-card-outline-b-crxb3kswbb {
    from {
        outline-color: var(--border-colour-darker);
    }

    to {
        outline-color: transparent;
    }
}

@keyframes note-card-highlight-b-crxb3kswbb {
    from {
        background-color: var(--accent);
    }

    to {
        background-color: transparent;
    }
}

@media (width <= 480px) {
    .note-card[b-crxb3kswbb] {
        padding: 0.875rem 1rem;
    }
}
/* /Features/Notes/Components/NoteForm.razor.rz.scp.css */
/* ::deep needs a genuinely-scoped ancestor element to anchor its descendant selector, and EditForm is a component, so
   its rendered <form> is reached through this raw wrapper. display:contents keeps the wrapper out of layout. */
.note-form-scope[b-pr0cty9nik] {
    display: contents;
}

.note-form-scope[b-pr0cty9nik]  .note-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* One bordered box holds the textarea and the footer, so nothing jumps when typing starts. */
.note-form-box[b-pr0cty9nik] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius, 0.625rem));
    background: var(--background);
    transition: border-color var(--motion-fast) var(--ease-out);
    /* The reminder row lays itself out by the box's own width (a Notes tab, the Quick note modal, a phone). */
    container: note-form / inline-size;
}

.note-form-box:focus-within[b-pr0cty9nik] {
    border-color: var(--border-colour-darker);
}

.note-form-box-customer[b-pr0cty9nik] {
    border-color: var(--info);
    border-inline-start-width: 2px;
    background: var(--info-foreground);
}

.note-form-audience[b-pr0cty9nik] {
    display: inline-flex;
    align-self: flex-start;
    border: 1px solid var(--border-colour);
    border-radius: 9999px;
    overflow: hidden;
}

.note-form-audience-btn[b-pr0cty9nik] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 0;
    background: transparent;
    padding: 0.25rem 0.75rem;
    color: var(--muted-foreground);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
}

.note-form-audience-btn-active[b-pr0cty9nik] {
    background: var(--accent);
    color: var(--primary);
    font-weight: 600;
}

/* Touch (T-23): a segment is 44 px tall. */
@media (pointer: coarse) {
    .note-form-audience-btn[b-pr0cty9nik] {
        min-height: 2.75rem;
    }
}

.note-form-audience-hint[b-pr0cty9nik] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.note-form-audience-badge[b-pr0cty9nik] {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* The box draws the border; the textarea inside it doesn't. */
.note-form-box[b-pr0cty9nik]  textarea.textarea {
    min-height: 4.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.note-form-box[b-pr0cty9nik]  textarea.textarea:focus-visible {
    border: 0;
    box-shadow: none;
}

/* A modal's compact frame (a phone in landscape with the keyboard up, ~96 px; modal.js sets the root class): the box keeps
   its border round two lines of text and one slim row of Discard/Save under them, so it reads as a text box and stays
   usable; Add reminder waits for the keyboard to close. Without its own buttons (the Quick note modal's footer holds them)
   the box is the text alone, and the Internal / Visible switch and its hint wait too (the choice stays), so the box fits the
   ~63 px above the footer's slim row (T-20, D2, L-1a). */
:root.modal-keyboard-compact .note-form-box[b-pr0cty9nik] {
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
}

:root.modal-keyboard-compact .note-form-audience[b-pr0cty9nik],
:root.modal-keyboard-compact .note-form-audience-hint[b-pr0cty9nik],
:root.modal-keyboard-compact .note-form-footer-no-actions[b-pr0cty9nik] {
    display: none;
}

:root.modal-keyboard-compact .note-form-box[b-pr0cty9nik]  textarea.textarea {
    min-height: 0;
    height: 2.5rem;
}

/* The validation message's reserved line, while it holds no message. */
:root.modal-keyboard-compact .note-form-box[b-pr0cty9nik]  .validation-message-container:not(:has(*)) {
    display: none;
}

:root.modal-keyboard-compact .note-form-footer[b-pr0cty9nik] {
    flex-direction: row;
    justify-content: flex-end;
}

:root.modal-keyboard-compact .note-form-footer-start[b-pr0cty9nik] {
    display: none;
}

:root.modal-keyboard-compact .note-form-actions[b-pr0cty9nik] {
    display: flex;
}

:root.modal-keyboard-compact .note-form-actions[b-pr0cty9nik]  .btn {
    width: auto;
    height: 1.75rem;
}

/* Date, time and Remind, then the quick picks and "Remove reminder" on their own lines. By the box's width: stacked
   (a phone), date and time side by side with Remind under them (the Quick note modal), or all three in a row. */
.note-form-due-row[b-pr0cty9nik] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

@container note-form (width >= 24rem) {
    .note-form-due-row[b-pr0cty9nik] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .note-form-due-remind[b-pr0cty9nik] {
        grid-column: 1 / -1;
    }
}

@container note-form (width >= 40rem) {
    .note-form-due-row[b-pr0cty9nik] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .note-form-due-remind[b-pr0cty9nik] {
        grid-column: auto;
    }
}

.note-form-due-field[b-pr0cty9nik] {
    min-width: 0;
}

.note-form-due-row .note-form-clear[b-pr0cty9nik] {
    grid-column: 1 / -1;
    justify-self: start;
}

.note-form-quick-picks[b-pr0cty9nik] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.note-form-quick-pick[b-pr0cty9nik] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid var(--border-colour);
    border-radius: 9999px;
    background: transparent;
    padding: 0.25rem 0.75rem;
    color: inherit;
    font: inherit;
    font-size: var(--text-xs);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .note-form-quick-pick:hover:not(:disabled)[b-pr0cty9nik] {
        border-color: var(--border-colour-darker);
    }
}

.note-form-quick-pick-selected[b-pr0cty9nik] {
    border-color: var(--primary);
    background: var(--accent);
    color: var(--primary);
    font-weight: 600;
}

.note-form-quick-pick:disabled[b-pr0cty9nik] {
    cursor: default;
    opacity: 0.6;
}

@media (pointer: coarse) {
    .note-form-quick-pick[b-pr0cty9nik] {
        min-height: 2.25rem;
    }
}

.note-form-clear[b-pr0cty9nik] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: var(--text-xs);
    text-decoration: underline;
    cursor: pointer;
}

@media (hover: hover) {
    .note-form-clear:hover:not(:disabled)[b-pr0cty9nik] {
        color: var(--primary);
    }
}

.note-form-footer[b-pr0cty9nik] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.note-form-footer-start[b-pr0cty9nik] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.note-form-actions[b-pr0cty9nik] {
    display: flex;
    gap: 0.5rem;
}

.note-form-hint[b-pr0cty9nik] {
    display: none;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (hover: hover) and (width >= 768px) and (not ((pointer: coarse) and (height < 500px))) {
    .note-form-hint[b-pr0cty9nik] {
        display: inline;
    }
}

@media (width <= 480px) {
    .note-form-footer[b-pr0cty9nik] {
        flex-direction: column;
        align-items: stretch;
    }

    .note-form-actions[b-pr0cty9nik] {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }

    .note-form-actions[b-pr0cty9nik]  .btn {
        width: 100%;
    }
}
/* /Features/Notes/Components/NoteOwnerPicker.razor.rz.scp.css */
.note-owner-picker[b-7984oh0fvl] {
    --note-owner-picker-row: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

/* The results keep a steady height while a term loads, dimmed only if it takes longer than 150 ms.
   S1v: the box shows about four rows (the group label, four rows and half of the fifth, so the cut row says it scrolls),
   because on a phone a taller list pushed the note field out of view. Recent and the search results share the box.
   1.375rem is the group label's height (measured in the pane: 22 px). */
.note-owner-picker-list-content[b-7984oh0fvl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: min(calc(1.375rem + 4.5 * var(--note-owner-picker-row)), 45vh);
    overflow-y: auto;
    transition: opacity var(--motion-fast) var(--ease-out);
}

/* A modal's compact frame (a phone in landscape with the keyboard up, ~96 px): the box is one whole row tall, so a second
   row is never cut at the frame's edge (T-120, L-1b); it scrolls inside. The group labels (aria-hidden: each group has its
   aria-label, and each row its type's icon) wait for the keyboard to close, or the first one would take half the row. */
:root.modal-keyboard-compact .note-owner-picker-list-content[b-7984oh0fvl] {
    max-height: var(--note-owner-picker-row);
}

:root.modal-keyboard-compact .note-owner-picker-group-label[b-7984oh0fvl] {
    display: none;
}

.note-owner-picker-list-content.is-refreshing[b-7984oh0fvl] {
    opacity: 0.6;
    transition: opacity var(--motion-fast) var(--ease-out) 150ms;
}

.note-owner-picker-group[b-7984oh0fvl] {
    display: flex;
    flex-direction: column;
}

.note-owner-picker-group-label[b-7984oh0fvl] {
    padding: 0.25rem 0.5rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
}

.note-owner-picker-row[b-7984oh0fvl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    min-height: var(--note-owner-picker-row);
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .note-owner-picker-row:hover[b-7984oh0fvl] {
        background: var(--off-white);
    }
}

.note-owner-picker-row:active[b-7984oh0fvl] {
    background: var(--pressed);
}

.note-owner-picker-row:focus-visible[b-7984oh0fvl] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

.note-owner-picker-icon[b-7984oh0fvl] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--muted-foreground);
}

.note-owner-picker-text[b-7984oh0fvl] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.note-owner-picker-primary[b-7984oh0fvl] {
    font-size: var(--text-sm);
    font-weight: 500;
}

.note-owner-picker-secondary[b-7984oh0fvl] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.note-owner-picker-row[b-7984oh0fvl]  .note-owner-picker-badge {
    flex-shrink: 0;
}

.note-owner-picker-message[b-7984oh0fvl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

@media (pointer: coarse) {
    .note-owner-picker[b-7984oh0fvl] {
        --note-owner-picker-row: 2.75rem;
    }
}
/* /Features/Notes/Components/NotesPanel.razor.rz.scp.css */
.notes-panel[b-6z33wetl45] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.notes-panel-refreshing[b-6z33wetl45] {
    opacity: 0.6;
}

.notes-panel-title[b-6z33wetl45] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.notes-panel-count[b-6z33wetl45] {
    color: var(--muted-foreground);
    font-weight: 500;
}

.notes-panel-list[b-6z33wetl45] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notes-panel-more[b-6z33wetl45] {
    display: flex;
    justify-content: center;
}
/* /Features/Notes/Components/PinnedNotePreview.razor.rz.scp.css */
.pinned-note-preview[b-13wl32qh1p] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-colour-darker);
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
}

.pinned-note-preview-label[b-13wl32qh1p] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--primary);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pinned-note-preview-text[b-13wl32qh1p] {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}
/* /Features/Notes/Modals/QuickNoteModal.razor.rz.scp.css */
.quick-note[b-jtic8v13a8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* "On <record>  Change": the label truncates (with a title), Change never wraps away from it. */
.quick-note-on[b-jtic8v13a8] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.quick-note-on-label[b-jtic8v13a8] {
    flex-shrink: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.quick-note-on-record[b-jtic8v13a8] {
    flex: 0 1 auto;
    font-weight: 600;
}

.quick-note-change[b-jtic8v13a8] {
    flex-shrink: 0;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: var(--text-sm);
    text-decoration: underline;
    cursor: pointer;
}

.quick-note-change:disabled[b-jtic8v13a8] {
    cursor: default;
    opacity: 0.6;
}

@media (pointer: coarse) {
    .quick-note-change[b-jtic8v13a8] {
        min-height: 2.75rem;
    }
}
/* /Features/Notifications/Components/NotificationBell.razor.rz.scp.css */
.notification-bell[b-vx9v7klign] {
    display: inline-flex;
    flex-shrink: 0;
}

.notification-bell-button[b-vx9v7klign] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--primary);
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .notification-bell-button:hover[b-vx9v7klign] {
        background-color: var(--accent);
    }
}

.notification-bell-button:active[b-vx9v7klign] {
    background-color: var(--pressed);
}

.notification-bell-button:focus-visible[b-vx9v7klign] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* The phone's top bar (T-18): 44 px, 20 px icon, like the menu button and the other top-bar buttons. */
.notification-bell-phone[b-vx9v7klign] {
    width: 2.75rem;
    height: 2.75rem;
}

.notification-bell-phone .notification-bell-dot[b-vx9v7klign] {
    top: 0.5rem;
    right: 0.5rem;
}

.notification-bell-dot[b-vx9v7klign] {
    position: absolute;
    top: 0.3125rem;
    right: 0.3125rem;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--destructive);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--background);
}

/* The popover's panel (DropdownMenu's .dm-content, given ContentClass "notification-tray"), anchored on the raw wrapper. */
.notification-bell[b-vx9v7klign]  .notification-tray {
    width: min(24rem, calc(100vw - 2rem));
    padding: 0.25rem;
}
/* /Features/Notifications/Components/NotificationList.razor.rz.scp.css */
.notification-list[b-nnma56k61t] {
    display: flex;
    flex-direction: column;
    row-gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.notification-list > li[b-nnma56k61t] {
    min-width: 0;
}
/* /Features/Notifications/Components/NotificationRow.razor.rz.scp.css */
.notification-row[b-5x7qi9s6t3] {
    -webkit-tap-highlight-color: transparent;
    display: grid;
    grid-template-columns: 0.5rem minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 0.625rem;
    width: 100%;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    font: inherit;
    font-size: var(--text-sm);
    text-align: start;
    color: var(--primary);
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .notification-row:hover[b-5x7qi9s6t3] {
        background-color: var(--accent);
    }
}

.notification-row:active[b-5x7qi9s6t3] {
    background-color: var(--pressed);
}

.notification-row:focus-visible[b-5x7qi9s6t3] {
    outline: none;
    box-shadow: 0 0 0 2px var(--border-colour-darker);
}

.notification-dot[b-5x7qi9s6t3] {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.375rem;
    border-radius: 50%;
}

.unread .notification-dot[b-5x7qi9s6t3] {
    background-color: var(--info);
}

.notification-body[b-5x7qi9s6t3] {
    display: flex;
    flex-direction: column;
    row-gap: 0.125rem;
    min-width: 0;
}

.unread .notification-sentence[b-5x7qi9s6t3] {
    font-weight: 600;
}

.notification-record[b-5x7qi9s6t3] {
    display: flex;
    align-items: baseline;
    column-gap: 0.375rem;
    min-width: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.notification-record > :not(.truncate)[b-5x7qi9s6t3] {
    flex-shrink: 0;
}

.notification-time[b-5x7qi9s6t3] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: 1.25rem;
}

@media (pointer: coarse) {
    .notification-row[b-5x7qi9s6t3] {
        min-height: 2.75rem;
    }
}
/* /Features/Notifications/Components/NotificationTray.razor.rz.scp.css */
.notification-tray-body[b-c9pgo4wurr] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.notification-tray-header[b-c9pgo4wurr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.notification-tray-title[b-c9pgo4wurr] {
    font-size: var(--text-sm);
    font-weight: 600;
}

.notification-tray-hint:not(:empty)[b-c9pgo4wurr] {
    padding: 0.5rem 0.5rem 0;
}

.notification-tray-list[b-c9pgo4wurr] {
    max-height: min(26rem, 60dvh);
    overflow-y: auto;
    padding-block: 0.25rem;
}

.notification-tray-footer[b-c9pgo4wurr] {
    display: flex;
    justify-content: center;
    padding-top: 0.25rem;
    border-top: 1px solid var(--border);
}
/* /Features/Notifications/Pages/NotificationsPage.razor.rz.scp.css */
.notifications-page[b-4wm0a8m9ud] {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    max-width: 48rem;
    min-width: 0;
}

.notifications-header[b-4wm0a8m9ud] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    min-width: 0;
}

.notifications-title[b-4wm0a8m9ud] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.notifications-list[b-4wm0a8m9ud] {
    padding: 0.25rem;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.notifications-retention[b-4wm0a8m9ud] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Onboarding/Components/GettingStartedCard.razor.rz.scp.css */
/* A direct item of the Home grid (the component has no wrapper): it opens the day, or from half done sits after the workshop. */
.getting-started[b-84r0ddz76r] {
    order: 0;
    min-width: 0;
}

.getting-started-after-workshop[b-84r0ddz76r] {
    order: 2;
}

.getting-started-toggle[b-84r0ddz76r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.getting-started-toggle:focus-visible[b-84r0ddz76r] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
    border-radius: var(--radius);
}

.getting-started-title:focus[b-84r0ddz76r] {
    outline: none;
}

@media (hover: hover) {
    .getting-started-toggle:hover .getting-started-toggle-view[b-84r0ddz76r] {
        color: var(--muted-foreground);
    }
}

.getting-started-toggle:active[b-84r0ddz76r] {
    background: var(--pressed);
    -webkit-tap-highlight-color: transparent;
}

.getting-started-toggle-text[b-84r0ddz76r] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
    min-width: 0;
}

.getting-started-toggle-title[b-84r0ddz76r] {
    font-weight: 600;
}

.getting-started-toggle-progress[b-84r0ddz76r] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.getting-started-toggle-view[b-84r0ddz76r] {
    flex-shrink: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: underline;
}

.getting-started-body[b-84r0ddz76r] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.getting-started-header[b-84r0ddz76r] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.getting-started-heading[b-84r0ddz76r] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.getting-started-title[b-84r0ddz76r] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.getting-started-subtitle[b-84r0ddz76r] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.getting-started-dismiss[b-84r0ddz76r] {
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .getting-started-dismiss:hover[b-84r0ddz76r] {
        background: var(--accent);
        color: var(--primary);
    }
}

.getting-started-dismiss:active[b-84r0ddz76r] {
    background: var(--pressed);
    color: var(--primary);
}

.getting-started-progress[b-84r0ddz76r] {
    height: 0.25rem;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--accent);
}

.getting-started-progress-bar[b-84r0ddz76r] {
    height: 100%;
    border-radius: inherit;
    background: var(--success);
}

.getting-started-items[b-84r0ddz76r] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.getting-started-item-wide[b-84r0ddz76r] {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-colour);
    padding-top: 0.5rem;
}

.getting-started-item[b-84r0ddz76r] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
}

@media (hover: hover) {
    .getting-started-item:hover[b-84r0ddz76r] {
        text-decoration: underline;
    }
}

/* The first job opens a wizard, so it's a button: reset it to look like the other items. */
.getting-started-item-button[b-84r0ddz76r] {
    width: 100%;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--primary);
    text-align: start;
    cursor: pointer;
    align-items: flex-start;
}

/* Two lines (the label and its hint): the dot or check sits on the label's line, and only the label is underlined. */
.getting-started-item-button .getting-started-dot[b-84r0ddz76r],
.getting-started-item-button[b-84r0ddz76r]  svg {
    margin-top: 0.125rem;
}

@media (hover: hover) {
    .getting-started-item-button:hover[b-84r0ddz76r] {
        text-decoration: none;
    }
}

@media (hover: hover) {
    .getting-started-item-button:not(.getting-started-item-done):hover .getting-started-item-label[b-84r0ddz76r] {
        text-decoration: underline;
    }
}

.getting-started-item-text[b-84r0ddz76r] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.getting-started-hint[b-84r0ddz76r] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 400;
    overflow-wrap: break-word;
}

.getting-started-item-done[b-84r0ddz76r] {
    color: var(--muted-foreground);
    font-weight: 400;
    text-decoration: line-through;
}

@media (hover: hover) {
    .getting-started-item-done:hover[b-84r0ddz76r] {
        text-decoration: line-through;
    }
}

.getting-started-item-done[b-84r0ddz76r]  svg {
    flex: 0 0 auto;
    color: var(--success);
}

/* The import step: its link, then "I don't need this" (or "Skipped" + Undo) at the row's right end; the actions wrap
   to their own line, still right-aligned, when they don't fit beside the label (S1g). */
.getting-started-import[b-84r0ddz76r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.75rem;
}

.getting-started-import-label[b-84r0ddz76r] {
    flex: 1 1 auto;
    min-width: 0;
}

.getting-started-import-actions[b-84r0ddz76r] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
}

.getting-started-skipped[b-84r0ddz76r] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.getting-started-dot[b-84r0ddz76r] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--border-colour-darker);
    border-radius: 9999px;
}

@media (width >= 640px) {
    .getting-started-items[b-84r0ddz76r] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.getting-started-sr-only[b-84r0ddz76r] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* /Features/Photos/Components/PhotoGallery.razor.rz.scp.css */
/* 5.5rem: 3 columns in the ~294 px a 360 px phone leaves inside the page and card padding, more on wider screens. */
.photo-gallery[b-22g8fsrhh7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: calc(var(--spacing) * 2);
}

.photo-tile[b-22g8fsrhh7] {
    position: relative;
    display: block;
    aspect-ratio: 1;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--accent);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .photo-tile:hover[b-22g8fsrhh7] {
        border-color: var(--border-colour-darker);
    }
}

.photo-tile:focus-visible[b-22g8fsrhh7] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.photo-tile-image[b-22g8fsrhh7] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-tile-placeholder[b-22g8fsrhh7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1);
    width: 100%;
    height: 100%;
    padding: calc(var(--spacing) * 2);
    color: var(--muted-foreground);
}

.photo-tile-placeholder-text[b-22g8fsrhh7] {
    font-size: var(--text-xs);
    text-align: center;
}
/* /Features/Photos/Components/PhotosTab.razor.rz.scp.css */
.photos-tab[b-fly2u7bskz] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.photos-tab-refreshing[b-fly2u7bskz] {
    opacity: 0.6;
}

.photos-tab-count[b-fly2u7bskz] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* Same columns as the gallery. */
.photos-tab-skeleton-grid[b-fly2u7bskz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: calc(var(--spacing) * 2);
}

.photos-tab-skeleton-grid[b-fly2u7bskz]  .skeleton {
    aspect-ratio: 1;
}
/* /Features/Photos/Components/PhotoUploader.razor.rz.scp.css */
.photo-uploader[b-w4r039lh78] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
}

.photo-uploader-bar[b-w4r039lh78] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
}

/* Touch devices render two buttons (Take photo, Choose photos): they sit side by side while they fit, then wrap. */
.photo-uploader-actions[b-w4r039lh78] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
}

.photo-uploader-header[b-w4r039lh78] {
    min-width: 0;
}

.photo-uploader-hint[b-w4r039lh78] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* The strip of photos in flight: one row that scrolls sideways on a phone, wrapping on wider screens. */
.photo-uploader-strip[b-w4r039lh78] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 3);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--off-white);
}

.photo-uploader-status[b-w4r039lh78] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 500;
}

.photo-uploader-items[b-w4r039lh78] {
    display: flex;
    gap: calc(var(--spacing) * 3);
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
}

.photo-upload[b-w4r039lh78] {
    display: flex;
    flex: 0 0 4.5rem;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
    width: 4.5rem;
}

.photo-upload-preview[b-w4r039lh78] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--muted-foreground);
}

.photo-upload-image[b-w4r039lh78] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-upload-failed .photo-upload-preview[b-w4r039lh78] {
    border-color: var(--destructive);
}

.photo-upload-failed .photo-upload-image[b-w4r039lh78] {
    opacity: 0.5;
}

.photo-upload-caption[b-w4r039lh78],
.photo-upload-error[b-w4r039lh78] {
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.3;
}

.photo-upload-caption[b-w4r039lh78] {
    color: var(--muted-foreground);
}

.photo-upload-error[b-w4r039lh78] {
    color: var(--destructive);
}

.photo-upload-actions[b-w4r039lh78] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.photo-upload-action[b-w4r039lh78] {
    min-height: 2rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--primary);
    font-size: var(--text-xs);
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

.photo-upload-action:focus-visible[b-w4r039lh78] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: calc(var(--radius) / 2);
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width >= 768px) and (not ((pointer: coarse) and (height < 500px))) {
    .photo-uploader-items[b-w4r039lh78] {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

@media (width <= 480px) {
    .photo-uploader-bar[b-w4r039lh78] {
        flex-direction: column;
        align-items: stretch;
    }

    /* The Button's own element: anchored on this file's wrapper. Each button takes the row, or shares it with its
       neighbour while both fit. */
    .photo-uploader-actions[b-w4r039lh78]  .btn {
        flex: 1 1 auto;
    }
}
/* /Features/Photos/Modals/LinkJobPhotosModal.razor.rz.scp.css */
.link-job-photos-hint[b-hf8a18fhc8] {
    margin: 0 0 0.75rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* 5.5rem: 3 columns in the space a 360 px phone leaves inside the modal padding. */
.link-job-photos-grid[b-hf8a18fhc8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: calc(var(--spacing) * 2);
}

.link-job-photos-grid[b-hf8a18fhc8]  .link-job-photos-skeleton {
    aspect-ratio: 1;
}

.link-job-photos-tile[b-hf8a18fhc8] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--muted-foreground);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .link-job-photos-tile:hover:not(:disabled)[b-hf8a18fhc8] {
        border-color: var(--border-colour-darker);
    }
}

.link-job-photos-tile:focus-visible[b-hf8a18fhc8] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.link-job-photos-tile:disabled[b-hf8a18fhc8] {
    opacity: 0.4;
    cursor: not-allowed;
}

.link-job-photos-tile-selected[b-hf8a18fhc8] {
    border-color: var(--primary);
}

.link-job-photos-tile img[b-hf8a18fhc8] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.link-job-photos-check[b-hf8a18fhc8] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: flex;
    border-radius: 50%;
    background: var(--primary-foreground);
    color: var(--primary);
}

.link-job-photos-count[b-hf8a18fhc8] {
    margin: 0.75rem 0 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Photos/Modals/PhotoMarkupModal.razor.rz.scp.css */
.markup[b-msn1q1n4hf] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
}

.markup-hint[b-msn1q1n4hf] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    text-align: center;
}

/* Hidden, not removed, so the stage doesn't jump when the first shape is drawn. */
.markup-hint-hidden[b-msn1q1n4hf] {
    visibility: hidden;
}

/* A phone held sideways has no height to spare: the stage gets the line instead. */
@media (max-height: 480px) {
    .markup-hint[b-msn1q1n4hf] {
        display: none;
    }
}

.markup-toolbar[b-msn1q1n4hf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
}

.markup-group[b-msn1q1n4hf] {
    display: flex;
    gap: calc(var(--spacing) * 1);
}

.markup-tool[b-msn1q1n4hf],
.markup-swatch[b-msn1q1n4hf] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--background);
    color: var(--primary);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .markup-tool:hover:not(:disabled)[b-msn1q1n4hf] {
        background: var(--accent);
    }
}

.markup-tool:active:not(:disabled):not([aria-pressed="true"])[b-msn1q1n4hf] {
    background: var(--pressed);
}

.markup-tool[b-msn1q1n4hf] {
    -webkit-tap-highlight-color: transparent;
}

.markup-tool[aria-pressed="true"][b-msn1q1n4hf] {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
}

.markup-tool:disabled[b-msn1q1n4hf],
.markup-swatch:disabled[b-msn1q1n4hf] {
    opacity: 0.5;
    cursor: not-allowed;
}

.markup-tool:focus-visible[b-msn1q1n4hf],
.markup-swatch:focus-visible[b-msn1q1n4hf] {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* The dot is the colour; the button's ring shows which one is selected. A thin dark edge keeps white visible. */
.markup-swatch-dot[b-msn1q1n4hf] {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    border: 1px solid var(--markup-outline);
}

.markup-swatch-red .markup-swatch-dot[b-msn1q1n4hf] {
    background: var(--markup-red);
}

.markup-swatch-yellow .markup-swatch-dot[b-msn1q1n4hf] {
    background: var(--markup-yellow);
}

.markup-swatch-white .markup-swatch-dot[b-msn1q1n4hf] {
    background: var(--markup-white);
}

.markup-swatch[aria-pressed="true"][b-msn1q1n4hf] {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 2px var(--primary);
}

/* The photo is fitted inside the stage at its aspect ratio with CSS only: the stage is a size container, and the frame
   is as wide as the photo can be without overflowing either way. */
.markup-stage[b-msn1q1n4hf] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--markup-stage);
}

.markup-frame[b-msn1q1n4hf] {
    position: relative;
    width: min(100cqw, calc(100cqh * var(--ratio)));
    aspect-ratio: var(--ratio);
}

.markup-canvas[b-msn1q1n4hf] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.markup-ink[b-msn1q1n4hf] {
    /* The drag draws: it must never scroll or zoom the page. */
    touch-action: none;
    cursor: crosshair;
}

.markup-ink-locked[b-msn1q1n4hf] {
    pointer-events: none;
}

.markup-overlay[b-msn1q1n4hf] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing) * 4);
    background: var(--markup-toolbar);
    color: var(--markup-white);
}

.markup-footer[b-msn1q1n4hf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
    border-top: 1px solid var(--border-colour);
}

.markup-footer-group[b-msn1q1n4hf] {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
}

/* The library's buttons top out at 2.5rem; glove-sized targets need 2.75rem. */
.markup-footer[b-msn1q1n4hf]  .btn {
    min-height: 2.75rem;
}

.markup-footer[b-msn1q1n4hf]  .markup-icon-button {
    min-width: 2.75rem;
}
/* /Features/Photos/Modals/PhotoViewerModal.razor.rz.scp.css */
.photo-viewer[b-ha8rguag4x] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
}

.photo-viewer:focus[b-ha8rguag4x] {
    outline: none;
}

.photo-viewer:focus-visible .photo-viewer-stage[b-ha8rguag4x] {
    box-shadow: var(--focus-ring);
}

.photo-viewer-stage[b-ha8rguag4x] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--accent);

    /* Horizontal swipes reach the pointer handlers; vertical ones still scroll the modal. */
    touch-action: pan-y;
    user-select: none;
}

.photo-viewer-image[b-ha8rguag4x] {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 70dvh;
    object-fit: contain;
}

.photo-viewer-placeholder[b-ha8rguag4x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 10) calc(var(--spacing) * 4);
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.photo-viewer-nav[b-ha8rguag4x] {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--border-colour);
    border-radius: 9999px;
    background: var(--photo-viewer-control);
    color: var(--primary);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .photo-viewer-nav:hover[b-ha8rguag4x] {
        background: white;
    }
}

.photo-viewer-nav:focus-visible[b-ha8rguag4x] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.photo-viewer-nav-prev[b-ha8rguag4x] {
    left: calc(var(--spacing) * 2);
}

.photo-viewer-nav-next[b-ha8rguag4x] {
    right: calc(var(--spacing) * 2);
}

.photo-viewer-footer[b-ha8rguag4x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
}

.photo-viewer-meta[b-ha8rguag4x] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.photo-viewer-actions[b-ha8rguag4x] {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
}
/* /Features/Profile/Components/ProfileEmailCard.razor.rz.scp.css */
.profile-email[b-1l3nvvz57i] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-email-address[b-1l3nvvz57i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.profile-email-value[b-1l3nvvz57i] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.profile-email-pending[b-1l3nvvz57i] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--accent);
}

.profile-email-pending-text[b-1l3nvvz57i] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.profile-email-pending-text[b-1l3nvvz57i] >  svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.profile-email-pending-actions[b-1l3nvvz57i] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* /Features/Profile/Modals/ChangeEmailRequestModal.razor.rz.scp.css */
.change-email-request-modal-text[b-m8lxm6edba] {
    margin: 0;
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
}
/* /Features/Profile/Modals/ChangePasswordModal.razor.rz.scp.css */
.change-password-modal-text[b-1rob5cvz7c] {
    margin: 0;
    color: var(--muted-foreground);
}

.change-password-modal-field[b-1rob5cvz7c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.change-password-rules[b-1rob5cvz7c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.change-password-rules li[b-1rob5cvz7c] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.change-password-rules .rule-met[b-1rob5cvz7c] {
    color: var(--success);
}
/* /Features/Profile/Pages/MyProfile.razor.rz.scp.css */
.my-profile-page[b-lkznvp58ly] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 45rem;
}

.my-profile-header[b-lkznvp58ly] {
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.my-profile-title[b-lkznvp58ly] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.my-profile-subtitle[b-lkznvp58ly] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* Getting started's notifications step links to /profile#notifications; the card sits clear of the sticky top bar. */
.my-profile-notifications[b-lkznvp58ly] {
    scroll-margin-top: calc(var(--sticky-offset) + 1rem);
}
/* /Features/Push/Components/PushDeviceSetting.razor.rz.scp.css */
.push-device-setting[b-cji7ir4onp] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}
/* /Features/Push/Components/PushHint.razor.rz.scp.css */
.push-hint[b-pxkg8geu8o] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.75rem;
    background-color: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.push-hint-title[b-pxkg8geu8o] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.push-hint-text[b-pxkg8geu8o] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.push-hint-actions[b-pxkg8geu8o] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* 44 px to tap on touch (Button's default size is 36 px). ::deep: .btn is rendered by Button, under this file's own
   .push-hint-actions. */
@media (pointer: coarse) {
    .push-hint-actions[b-pxkg8geu8o]  .btn {
        min-height: 2.75rem;
    }
}
/* /Features/Push/Components/PushKindSettings.razor.rz.scp.css */
.push-kinds[b-tynd42smoe] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding-block: 0.75rem;
    border-block: 1px solid var(--border);
}

.push-kinds-title[b-tynd42smoe] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.push-kinds-list[b-tynd42smoe] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
}

/* Touch (T-29): each Checkbox row is 44 px tall itself, so the list adds no gap of its own. */
@media (pointer: coarse) {
    .push-kinds-list[b-tynd42smoe] {
        gap: 0;
    }
}
/* /Features/QuickActions/Fragments/ExistingVehicle.razor.rz.scp.css */
.existing-vehicle-heading[b-s6vnl5uxpd] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: var(--text-sm);
    font-weight: 500;
}

.existing-vehicle-options[b-s6vnl5uxpd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* A row: the plate whole, the vehicle's name after it shrinking to one line (X1, X2); 44 px and more on touch (T1). */
.existing-vehicle-option[b-s6vnl5uxpd] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    border: 2px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--background);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .existing-vehicle-option:hover[b-s6vnl5uxpd] {
        border-color: var(--border-colour-darker);
    }

    .existing-vehicle-option-selected:hover[b-s6vnl5uxpd] {
        border-color: var(--primary);
    }
}

.existing-vehicle-option:active[b-s6vnl5uxpd] {
    background-color: var(--pressed);
}

.existing-vehicle-option:focus-visible[b-s6vnl5uxpd] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.existing-vehicle-option-selected[b-s6vnl5uxpd] {
    border-color: var(--primary);
}

.existing-vehicle-plate[b-s6vnl5uxpd] {
    flex: 0 0 auto;
    font-weight: 600;
}

.existing-vehicle-name[b-s6vnl5uxpd] {
    flex: 1 1 auto;
    min-width: 0;
}

.existing-vehicle-empty[b-s6vnl5uxpd] {
    margin: 0;
    padding: 0.75rem 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/QuickActions/Fragments/NewJob.razor.rz.scp.css */
/* "Add details": a full-width row (44 px and more on touch, T1) with the list of what's inside on a muted line under it,
   wrapping when it doesn't fit (a hint, read whole). */
.new-job-details-toggle[b-rus7rj98n3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    border: 1px dashed var(--border-colour-darker);
    border-radius: var(--radius);
    background: var(--background);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .new-job-details-toggle:hover[b-rus7rj98n3] {
        border-color: var(--foreground);
    }
}

.new-job-details-toggle:active[b-rus7rj98n3] {
    background-color: var(--pressed);
}

.new-job-details-toggle:focus-visible[b-rus7rj98n3] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.new-job-details-toggle-text[b-rus7rj98n3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.new-job-details-toggle-label[b-rus7rj98n3] {
    font-weight: 500;
}

.new-job-details-toggle-hint[b-rus7rj98n3] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* The collapsible (the grid-template-rows trick, base tier; app.css's reduced-motion block makes it instant). */
.new-job-details[b-rus7rj98n3] {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    outline: none;
    transition: grid-template-rows var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out);
}

.new-job-details-collapsed[b-rus7rj98n3] {
    grid-template-rows: 0fr;
    opacity: 0;
}

/* The clip leaves room for the fields' focus rings (a few px outside them): padding in, the same margin out. */
.new-job-details-inner[b-rus7rj98n3] {
    min-height: 0;
    overflow: hidden;
    margin: -0.25rem;
    padding: 0.25rem;
}
/* /Features/QuickActions/QuickActionsWizardModal.razor.rz.scp.css */
/* The steps sit inside the stepper's body (QD-W): the header-to-step distance stays the 2rem the wizard's .gap-2 gave when
   the step was the stepper's sibling. `.quick-actions-wizard` is raw HTML in this file, the ::deep anchor. */
.quick-actions-wizard[b-tyje1x9fsx]  .stepper {
    gap: 2rem;
}

.quick-actions-invoice-link[b-tyje1x9fsx] {
    display: block;
    margin-top: 0.25rem;
    font-weight: 600;
    text-decoration: underline;
}

/* Previous on the left; Save draft and the step's main button on the right. */
.quick-actions-footer[b-tyje1x9fsx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.quick-actions-footer-main[b-tyje1x9fsx] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* While the phone's keyboard is up (modal.js sets the root class; Plans/Plan - Phone Keyboard and Landscape.md, D5) the
   step's button(s) share one slim row, so the fields keep the room above the keyboard; a label too long for its share wraps
   inside its button. Previous (Cancel on the first step) hides like the modals' Cancel (Plans/Plan - Mobile UI
   Components.md, T-20, D1 (a)): Back already goes to the previous step and ✕ closes, asking when there are changes. */
:root.modal-keyboard-open .quick-actions-footer[b-tyje1x9fsx] {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}

:root.modal-keyboard-open .quick-actions-footer-main[b-tyje1x9fsx] {
    flex: 2 1 0;
    flex-direction: row;
    width: auto;
    margin-left: 0;
}

:root.modal-keyboard-open .quick-actions-footer[b-tyje1x9fsx]  .btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    min-height: 2.25rem;
    padding-inline: 0.5rem;
    white-space: normal;
}

:root.modal-keyboard-open .quick-actions-footer[b-tyje1x9fsx]  .modal-cancel {
    display: none;
}

/* The compact frame (a phone in landscape, ~96 px above the keyboard; L-18): the form modals' slim size, so the row is 28 px
   inside the slot's 0.125rem padding (Modal.razor.css) and the fields keep the rest. */
:root.modal-keyboard-compact .quick-actions-footer[b-tyje1x9fsx]  .btn {
    min-height: 1.75rem;
    padding-block: 0;
    white-space: nowrap;
}

/* On a phone every button takes the full width, stacked like any modal footer (app.css .modal-footer-content): the step's main
   button (Create job / Continue) on top, Save draft under it when shown, Previous last. The markup lists them the other way
   round, so column-reverse does it. */
@media (width <= 480px) {
    .quick-actions-footer[b-tyje1x9fsx] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .quick-actions-footer-main[b-tyje1x9fsx] {
        flex-direction: column-reverse;
        width: 100%;
        margin-left: 0;
    }

    .quick-actions-footer[b-tyje1x9fsx]  .btn {
        width: 100%;
        justify-content: center;
    }
}
/* /Features/Reports/Components/JobReportsTab.razor.rz.scp.css */
.job-reports-tab[b-qa5lbayv9q] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.job-reports-tab-refreshing[b-qa5lbayv9q] {
    opacity: 0.6;
}

.job-reports-header[b-qa5lbayv9q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.job-reports-title[b-qa5lbayv9q] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.job-reports-count[b-qa5lbayv9q] {
    color: var(--muted-foreground);
    font-weight: 500;
}

.job-reports-list[b-qa5lbayv9q] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* /Features/Reports/Components/ReportCard.razor.rz.scp.css */
.report-card-scope[b-ip145helnn] {
    display: contents;
}

.report-card-scope[b-ip145helnn]  .report-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-card-top[b-ip145helnn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.report-card-heading[b-ip145helnn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    min-width: 0;
}

.report-card-title[b-ip145helnn] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.report-card-menu[b-ip145helnn] {
    flex: 0 0 auto;
}

.report-card-meta[b-ip145helnn] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.report-card-chips[b-ip145helnn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.report-card-chip[b-ip145helnn] {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 500;
}
/* /Features/Reports/Components/ReportSaveStatusText.razor.rz.scp.css */
.report-save-status[b-c2rp4v4n6o] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.report-save-status-failed[b-c2rp4v4n6o] {
    color: var(--destructive);
    font-weight: 500;
}

.report-save-retry[b-c2rp4v4n6o] {
    min-height: 2rem;
    padding: 0 0.25rem;
    border: none;
    background: none;
    color: var(--destructive);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
/* /Features/Reports/Components/ReportSectionCard.razor.rz.scp.css */
.report-section[b-8kvw0qijkt] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--primary-foreground);
}

.report-section-top[b-8kvw0qijkt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.report-section-meta[b-8kvw0qijkt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-width: 0;
    min-height: 2.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.report-section-label[b-8kvw0qijkt] {
    font-size: var(--text-sm);
    font-weight: 600;
}

.report-section-stale[b-8kvw0qijkt] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.report-section-stale-theirs[b-8kvw0qijkt] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--warning);
    background: var(--primary-foreground);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.report-section-stale-actions[b-8kvw0qijkt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.report-section-heading-text[b-8kvw0qijkt] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.report-section-text[b-8kvw0qijkt] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.report-section[b-8kvw0qijkt]  .report-section-heading-input {
    font-weight: 600;
}

.report-section-body[b-8kvw0qijkt] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* The empty report's hint (S1t.9): a field error under the text. */
.report-section-no-content[b-8kvw0qijkt] {
    margin: 0;
}

/* Grows with its text where the browser can (field-sizing), within limits. */
.report-section-body[b-8kvw0qijkt]  .report-section-text-input {
    field-sizing: content;
    min-height: 6rem;
    max-height: 28rem;
}

.report-section-interim[b-8kvw0qijkt] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    font-style: italic;
}

.report-section-footer[b-8kvw0qijkt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.report-section-hint[b-8kvw0qijkt] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

/* A section that was just moved keeps a tint for --highlight-hold (static: the animation's first keyframe holds during its
   delay), then it fades out within one motion step (S1t.22, B-21). Two names, used by turns, so a second move restarts it. */
.report-section-moved-a[b-8kvw0qijkt] {
    animation: report-section-moved-a-b-8kvw0qijkt var(--motion-base) var(--ease-out) var(--highlight-hold) backwards;
}

.report-section-moved-b[b-8kvw0qijkt] {
    animation: report-section-moved-b-b-8kvw0qijkt var(--motion-base) var(--ease-out) var(--highlight-hold) backwards;
}

@keyframes report-section-moved-a-b-8kvw0qijkt {
    from {
        background-color: var(--accent);
    }

    to {
        background-color: var(--primary-foreground);
    }
}

@keyframes report-section-moved-b-b-8kvw0qijkt {
    from {
        background-color: var(--accent);
    }

    to {
        background-color: var(--primary-foreground);
    }
}
/* /Features/Reports/Components/ReportSectionPhotos.razor.rz.scp.css */
.report-section-photos[b-n6svfhydcd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.report-section-thumbs[b-n6svfhydcd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.report-section-thumb[b-n6svfhydcd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--muted-foreground);
    cursor: pointer;
}

.report-section-thumb:focus-visible[b-n6svfhydcd] {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-foreground), 0 0 0 4px var(--ring);
}

.report-section-thumb img[b-n6svfhydcd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.report-section-photos-full[b-n6svfhydcd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.report-section-photos-hint[b-n6svfhydcd] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Reports/Components/ReportTitleField.razor.rz.scp.css */
.report-title-field[b-v0pkbs8s9n] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.report-title-text[b-v0pkbs8s9n] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

/* The title reads as the page's heading while it stays a field. */
.report-title-field[b-v0pkbs8s9n]  .report-title-input {
    height: auto;
    min-height: 3rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.report-title-meta[b-v0pkbs8s9n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    min-height: 1.25rem;
    font-size: var(--text-xs);
}

.report-title-blank[b-v0pkbs8s9n] {
    color: var(--destructive);
    font-weight: 500;
}

.report-title-stale[b-v0pkbs8s9n] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.report-title-stale-theirs[b-v0pkbs8s9n] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--warning);
    background: var(--primary-foreground);
    overflow-wrap: anywhere;
}

.report-title-stale-actions[b-v0pkbs8s9n] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
/* /Features/Reports/Modals/CreateReportModal.razor.rz.scp.css */
.create-report-suggestions[b-y4v4lbr2ss] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.create-report-suggestions-label[b-y4v4lbr2ss] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.create-report-chips[b-y4v4lbr2ss] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.create-report-chip[b-y4v4lbr2ss] {
    position: relative;
    -webkit-tap-highlight-color: transparent;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: 999px;
    background: var(--background);
    color: inherit;
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .create-report-chip:hover:not(:disabled)[b-y4v4lbr2ss] {
        border-color: var(--border-colour-darker);
        background: var(--accent);
    }
}

.create-report-chip:active:not(:disabled)[b-y4v4lbr2ss] {
    background: var(--pressed);
}

.create-report-chip:focus-visible[b-y4v4lbr2ss] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.create-report-chip:disabled[b-y4v4lbr2ss] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* A chip that is creating its report (S1t.9, B-22): the spinner sits over the label, which stays in the box so the chip
   keeps its size. Like Button's, it shows after 150 ms (a quick create never flickers) and the label gives way then. */
.create-report-chip-busy[b-y4v4lbr2ss] {
    cursor: progress;
}

.create-report-chip-spinner[b-y4v4lbr2ss] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    opacity: 0;
    animation: create-report-spin-b-y4v4lbr2ss 600ms linear infinite, create-report-reveal-b-y4v4lbr2ss 1ms linear 150ms forwards;
}

.create-report-chip-busy .create-report-chip-label[b-y4v4lbr2ss] {
    animation: create-report-conceal-b-y4v4lbr2ss 1ms linear 150ms forwards;
}

@keyframes create-report-reveal-b-y4v4lbr2ss {
    to {
        opacity: 1;
    }
}

@keyframes create-report-conceal-b-y4v4lbr2ss {
    to {
        opacity: 0;
    }
}

@keyframes create-report-spin-b-y4v4lbr2ss {
    to {
        transform: rotate(360deg);
    }
}

/* Reduced motion: the spinner is the only sign of progress, so it keeps turning, slowly (as Button's does). */
@media (prefers-reduced-motion: reduce) {
    .create-report-chip-spinner[b-y4v4lbr2ss] {
        animation-duration: 1.5s, 1ms;
    }
}
/* /Features/Reports/Modals/InsertJobNotesModal.razor.rz.scp.css */
.insert-notes-hint[b-4lmqq1lw7u] {
    margin: 0 0 0.75rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.insert-notes-list[b-4lmqq1lw7u] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.insert-notes-row[b-4lmqq1lw7u] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
}

.insert-notes-row-unticked[b-4lmqq1lw7u] {
    opacity: 0.6;
}

.insert-notes-body[b-4lmqq1lw7u] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.insert-notes-date[b-4lmqq1lw7u] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 500;
}

.insert-notes-text[b-4lmqq1lw7u] {
    margin: 0;
    font-size: var(--text-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.insert-notes-error[b-4lmqq1lw7u] {
    margin: 0.75rem 0 0;
    color: var(--destructive);
    font-size: var(--text-sm);
    font-weight: 500;
}
/* /Features/Reports/Pages/ReportScreen.razor.rz.scp.css */
/* One column, phone first: often written on a phone next to the car. */
.report-screen[b-shxokumalr] {
    /* The finish scrolls this to the top: clear the sticky top bar (S1t.9 review). */
    scroll-margin-top: var(--sticky-offset, 0px);
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    max-width: 47.5rem;
}

.report-screen-back-link[b-shxokumalr] {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-decoration: none;
}

@media (hover: hover) {
    .report-screen-back-link:hover[b-shxokumalr] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.report-screen-header[b-shxokumalr] {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.report-screen-subtitle[b-shxokumalr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* Docked under the app's top bar (sticky at every width) while the sections scroll by. */
.report-screen-bar[b-shxokumalr] {
    position: sticky;
    top: var(--sticky-offset, 0px);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-inline: -0.25rem;
    padding: 0.625rem 0.25rem;
    border-bottom: 1px solid var(--border-colour);
    background: var(--primary-foreground);
}

/* A short touch screen (a phone in landscape, S1w T-33) has no room for a docked bar: nothing below the top bar is sticky.
   In portrait it stays, one slim solid row. */
@media (pointer: coarse) and (height < 500px) {
    .report-screen-bar[b-shxokumalr] {
        position: static;
    }
}

/* The section count and the saving indicator (S1t.5) share the bar's free space, the indicator after the count, so it comes
   and goes without moving anything; a failure wraps under the count. Its basis is 0, so what it shows never pushes the
   buttons to a row of their own (the bar wraps only for a failure, below). */
.report-screen-status[b-shxokumalr] {
    display: flex;
    flex: 1 1 0%;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    min-width: 0;
}

/* On a phone there is no room beside the count: the indicator gets a line of its own under it, kept while the report is
   editable so nothing moves when it comes and goes. A failure also gives the status the bar's whole width. */
@media (width < 768px), ((pointer: coarse) and (height < 500px)) {
    .report-screen-status[b-shxokumalr]  .save-indicator {
        display: flex;
        flex-basis: 100%;
        min-height: 1rem;
    }

    .report-screen-status-failing[b-shxokumalr] {
        flex-basis: 100%;
    }
}

.report-screen-count[b-shxokumalr] {
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.report-screen-lost[b-shxokumalr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.report-screen-lost-text[b-shxokumalr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 0.25rem;
}

.report-screen-lost-label[b-shxokumalr] {
    font-weight: 600;
}

.report-screen-lost-quote[b-shxokumalr] {
    align-self: stretch;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--warning);
    background: var(--primary-foreground);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.report-screen-completed[b-shxokumalr] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.report-screen-completed-actions[b-shxokumalr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.report-screen-sections[b-shxokumalr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.report-screen-add[b-shxokumalr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.report-screen-add-actions[b-shxokumalr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.report-screen-add-hint[b-shxokumalr] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.report-screen[b-shxokumalr]  .report-screen-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    color: var(--muted-foreground);
}

.report-screen-state-title[b-shxokumalr] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
}

.report-screen-state-text[b-shxokumalr] {
    margin: 0 0 0.5rem;
}
/* /Features/Settings/Components/SettingsCard.razor.rz.scp.css */
.settings-card-body[b-qkwymgmm8z] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* The header's layout follows the card's own width (the Settings page can put the cards beside a menu), see below. */
    container: settings-card / inline-size;
}

/* The title and the actions share the first row; the description sits below at the card's full width (it never sits
   beside the buttons). The heading wrapper only groups the markup. When the actions (longer in Spanish) would squeeze the
   title below a readable width, they wrap under it instead. */
.settings-card-header[b-qkwymgmm8z] {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

.settings-card-heading[b-qkwymgmm8z] {
    display: contents;
}

.settings-card-title[b-qkwymgmm8z] {
    order: 0;
    flex: 1 1 10rem;
    min-width: 0;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.settings-card-actions[b-qkwymgmm8z] {
    order: 1;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
    gap: 0.5rem;
}

.settings-card-description[b-qkwymgmm8z] {
    order: 2;
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

/* Where the card is too narrow for the Saved note beside the button (the note would make the actions wrap under the title,
   and the whole card would jump for 2 s), the note takes the button's place instead: both share one grid cell, so the
   actions keep their size and nothing moves (QD-F1, nothing jumps). The button is only made invisible and untappable,
   not removed, so it keeps its focus. */
@container settings-card (width < 26rem) {
    .settings-card-actions:has(.flash-note-line)[b-qkwymgmm8z] {
        display: grid;
        align-items: center;
        justify-items: center;
    }

    .settings-card-actions:has(.flash-note-line)[b-qkwymgmm8z]  > * {
        grid-area: 1 / 1;
    }

    .settings-card-actions:has(.flash-note-line)[b-qkwymgmm8z]  > :not(.flash-note) {
        opacity: 0;
        pointer-events: none;
    }
}

/* Shared by the cards' content (their own markup, rendered inside .settings-card-body). */

.settings-card-body[b-qkwymgmm8z]  .settings-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin: 0;
}

.settings-card-body[b-qkwymgmm8z]  .settings-field dt {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.settings-card-body[b-qkwymgmm8z]  .settings-field dd {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0.125rem 0 0;
    overflow-wrap: anywhere;
}

.settings-card-body[b-qkwymgmm8z]  .settings-muted {
    color: var(--muted-foreground);
}

.settings-card-body[b-qkwymgmm8z]  .settings-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-card-body[b-qkwymgmm8z]  .settings-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.settings-card-body[b-qkwymgmm8z]  .settings-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.settings-card-body[b-qkwymgmm8z]  .settings-hint {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.settings-card-body[b-qkwymgmm8z]  .settings-hint-warning {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--warning);
}

@media (width >= 640px) {
    .settings-card-body[b-qkwymgmm8z]  .settings-fields-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width <= 480px) {
    .settings-card-body[b-qkwymgmm8z]  .settings-row {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Features/Settings/Components/SettingsFormActions.razor.rz.scp.css */
.settings-form-actions[b-evk7wcf7u8] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* /Features/Settings/Components/ShopDataCard.razor.rz.scp.css */
.shop-data-sections[b-dti7sezs4o] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.shop-data-section[b-dti7sezs4o] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.shop-data-heading[b-dti7sezs4o] {
    margin: 0;
    font-size: inherit;
    font-weight: 600;
}

.shop-data-export[b-dti7sezs4o] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
}

.shop-data-status[b-dti7sezs4o] {
    margin: 0;
}

@media (width <= 480px) {
    .shop-data-section[b-dti7sezs4o]  .shop-data-button {
        width: 100%;
    }
}
/* /Features/Settings/Components/ShopInvoiceCard.razor.rz.scp.css */
.shop-invoice-hint-row[b-59clqwm0a4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.shop-invoice-counter[b-59clqwm0a4] {
    flex: 0 0 auto;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.shop-invoice-note[b-59clqwm0a4] {
    white-space: pre-line;
}

.shop-invoice-link a[b-59clqwm0a4] {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* /Features/Settings/Components/ShopLogoCard.razor.rz.scp.css */
.shop-logo-frame[b-0s5zbgf19q] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 7rem;
    padding: 1rem;
    border: 1px dashed var(--border-colour);
    border-radius: var(--radius);
    background: var(--off-white);
}

.shop-logo-image[b-0s5zbgf19q] {
    display: block;
    max-width: 100%;
    max-height: 7.5rem;
    object-fit: contain;
}

.shop-logo-placeholder[b-0s5zbgf19q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Settings/Components/ShopPricingCard.razor.rz.scp.css */
/* The markup matrix: one row per band ("Up to" · "Markup" · remove), the open-ended last band reading "Above $200.00". */

.pricing-bands[b-vaamwmnrz8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pricing-band[b-vaamwmnrz8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pricing-band-fields[b-vaamwmnrz8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem;
}

/* The phone layout (viewport.js, T-119; S1w, T-14): "Up to $" takes a row of its own, then "Markup %" and the remove button share
   the next one, so a 12-digit limit and a 3-digit percentage stay readable while typing (three columns left each about 100 px). */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .pricing-band-fields[b-vaamwmnrz8] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pricing-band-fields[b-vaamwmnrz8]  > :first-child {
        grid-column: 1 / -1;
    }
}

/* The height of an input, so the text lines up with the inputs beside it. */
.pricing-band-open[b-vaamwmnrz8] {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    min-width: 0;
}

.pricing-band-open-text[b-vaamwmnrz8] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.pricing-band-errors[b-vaamwmnrz8] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pricing-band-list[b-vaamwmnrz8] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* The read view's band list opens and closes with the grid-template-rows trick (as CardContent's collapse in app.css). */
.pricing-bands-toggle[b-vaamwmnrz8] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted-foreground);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

@media (hover: hover) {
    .pricing-bands-toggle:hover[b-vaamwmnrz8] {
        color: var(--primary);
    }
}

/* The icon is a component's own element: the rule anchors on this raw button. */
.pricing-bands-toggle[b-vaamwmnrz8]  svg {
    transition: transform var(--motion-fast) var(--ease-out);
}

.pricing-bands-toggle[aria-expanded="false"][b-vaamwmnrz8]  svg {
    transform: rotate(-90deg);
}

.pricing-bands-collapse[b-vaamwmnrz8] {
    display: grid;
    flex: 1 1 auto;
    grid-template-rows: 0fr;
    min-height: 0;
    min-width: 0;
    opacity: 0;
    transition: grid-template-rows var(--motion-base) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}

.pricing-bands-collapse-open[b-vaamwmnrz8] {
    grid-template-rows: 1fr;
    opacity: 1;
}

.pricing-bands-collapse-inner[b-vaamwmnrz8] {
    min-height: 0;
    overflow: hidden;
}
/* /Features/Settings/Components/ShopProfileCard.razor.rz.scp.css */
.shop-profile[b-fqmlsk5uw1] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.shop-profile-name[b-fqmlsk5uw1] {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.shop-profile-line[b-fqmlsk5uw1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.shop-profile-socials[b-fqmlsk5uw1] {
    color: var(--muted-foreground);
}
/* /Features/Settings/Components/ShopRegionalCard.razor.rz.scp.css */
.shop-regional-locked-hint[b-fv1ulbrykx] {
    margin-top: -0.5rem;
}

[b-fv1ulbrykx] .shop-regional-lock {
    flex: 0 0 auto;
    color: var(--muted-foreground);
}
/* /Features/Settings/Components/ShopSettingsGroupList.razor.rz.scp.css */
.settings-group-list[b-vxlh2buk49] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-group-list li + li[b-vxlh2buk49] {
    border-top: 1px solid var(--border);
}

.settings-group-row[b-vxlh2buk49] {
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.75rem 1rem;
    color: inherit;
    text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .settings-group-row:hover[b-vxlh2buk49] {
        background: var(--accent);
    }
}

.settings-group-row:active[b-vxlh2buk49] {
    background: var(--pressed);
}

.settings-group-row:focus-visible[b-vxlh2buk49] {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--ring);
}

.settings-group-icon[b-vxlh2buk49],
.settings-group-chevron[b-vxlh2buk49] {
    display: flex;
    flex: 0 0 auto;
    color: var(--muted-foreground);
}

.settings-group-text[b-vxlh2buk49] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.settings-group-title[b-vxlh2buk49] {
    display: flex;
    align-items: center;
    font-weight: 600;
}

/* Running text: it wraps (the list has the phone's full width). */
.settings-group-line[b-vxlh2buk49] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* The section holding the open edit form. The page's tabs have their own copy of this dot. */
.settings-group-dot[b-vxlh2buk49] {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-start: 0.375rem;
    border-radius: 50%;
    background: var(--primary);
}
/* /Features/Settings/Components/ShopTemplatesCard.razor.rz.scp.css */
.shop-templates-links[b-zc6x4754pu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.shop-templates-row[b-zc6x4754pu] {
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .shop-templates-row:hover[b-zc6x4754pu] {
        background: var(--accent);
    }
}

.shop-templates-row:active[b-zc6x4754pu] {
    background: var(--pressed);
}

.shop-templates-row:focus-visible[b-zc6x4754pu] {
    outline: none;
    box-shadow: var(--focus-ring);
}

.shop-templates-icon[b-zc6x4754pu] {
    display: flex;
    flex: 0 0 auto;
    color: var(--muted-foreground);
}

.shop-templates-text[b-zc6x4754pu] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.shop-templates-title[b-zc6x4754pu] {
    font-weight: 600;
}

.shop-templates-line[b-zc6x4754pu] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.shop-templates-row[b-zc6x4754pu]  .shop-templates-chevron {
    flex: 0 0 auto;
    color: var(--muted-foreground);
}
/* /Features/Settings/Pages/BillingSettings.razor.rz.scp.css */
/* /Features/Settings/Pages/IntegrationsSettings.razor.rz.scp.css */
/* /Features/Settings/Pages/ShopSettings.razor.rz.scp.css */
.shop-settings-page[b-c0ulm8kqzf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 45rem;
}

.shop-settings-header[b-c0ulm8kqzf] {
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.shop-settings-title[b-c0ulm8kqzf] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.shop-settings-subtitle[b-c0ulm8kqzf] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* A phone's section view: the way back to the list, padded to a 44px tap target. */
.shop-settings-back[b-c0ulm8kqzf] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.25rem;
    min-height: 2.75rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    text-decoration: none;
}

@media (hover: hover) {
    .shop-settings-back:hover[b-c0ulm8kqzf] {
        color: var(--primary);
    }
}

.shop-settings-back:focus-visible[b-c0ulm8kqzf] {
    outline: none;
    border-radius: var(--radius);
    box-shadow: var(--focus-ring);
}

/* No display rule here: one would override the hidden attribute that hides the sections behind the phone's list. */
.shop-settings-groups[b-c0ulm8kqzf] {
    min-width: 0;
}

/* The section holding the open edit form (its tab's dot). The phone list has its own copy of this dot. */
.shop-settings-dot[b-c0ulm8kqzf] {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-start: 0.375rem;
    border-radius: 50%;
    background: var(--primary);
}

.shop-settings-elsewhere-body[b-c0ulm8kqzf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.shop-settings-elsewhere-text[b-c0ulm8kqzf] {
    flex: 1 1 14rem;
    min-width: 0;
}

/* Deep links scroll to a card by its id: keep it clear of the sticky top bar. */
.shop-settings-section[b-c0ulm8kqzf] {
    scroll-margin-top: calc(var(--sticky-offset) + 1rem);
}

/* The sections' cards stack with the page's own gap. */
.shop-settings-section + .shop-settings-section[b-c0ulm8kqzf] {
    margin-top: 1rem;
}

.shop-settings-elsewhere[b-c0ulm8kqzf] {
    margin-top: 0.75rem;
}
/* /Features/Suppliers/Components/SupplierCard.razor.rz.scp.css */
.supplier-card-scope[b-sqgv52zstp] {
    display: contents;
}

.supplier-card-scope[b-sqgv52zstp]  .supplier-card-header .card-header-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

/* The badge ("1 low stock") drops under the name when the row is too narrow, instead of squeezing the name. */
.supplier-card-header-content[b-sqgv52zstp] {
    display: flex;
    flex: 1 1 10rem;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.supplier-card-label[b-sqgv52zstp] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.supplier-card-name[b-sqgv52zstp] {
    font-weight: 600;
    font-size: 1.0625rem;
    overflow-wrap: anywhere;
}

.supplier-card-grid[b-sqgv52zstp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.supplier-card-tile[b-sqgv52zstp] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--off-white);
}

.supplier-card-tile-label[b-sqgv52zstp] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.supplier-card-tile-value[b-sqgv52zstp] {
    font-weight: 600;
    font-size: 1rem;
}

.supplier-card-tile-value-low[b-sqgv52zstp] {
    color: var(--warning);
}

.supplier-card-scope[b-sqgv52zstp]  .supplier-card-view-button {
    justify-content: center;
}

.supplier-card-tile-value-muted[b-sqgv52zstp] {
    color: var(--muted-foreground);
}
/* /Features/Suppliers/Components/SupplierDetails/SupplierItemsTab.razor.rz.scp.css */
.supplier-items-tab[b-bv7xynot1y] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.supplier-items-tab-refreshing[b-bv7xynot1y] {
    opacity: 0.6;
}

.supplier-items-header[b-bv7xynot1y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.supplier-items-title[b-bv7xynot1y] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.supplier-items-count[b-bv7xynot1y] {
    color: var(--muted-foreground);
    font-weight: 500;
}

.supplier-items-table-scope[b-bv7xynot1y] {
    display: contents;
}

.supplier-items-table-scope[b-bv7xynot1y]  .supplier-items-right {
    text-align: end;
}

.supplier-items-table-scope[b-bv7xynot1y]  .supplier-items-muted,
.supplier-items-muted[b-bv7xynot1y] {
    color: var(--muted-foreground);
}


.supplier-items-link[b-bv7xynot1y] {
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .supplier-items-link:hover[b-bv7xynot1y] {
        text-decoration: underline;
    }
}

.supplier-items-on-hand[b-bv7xynot1y] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.supplier-items-list[b-bv7xynot1y] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.supplier-item-card[b-bv7xynot1y] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius, 0.625rem));
}

.supplier-item-card-top[b-bv7xynot1y],
.supplier-item-card-row[b-bv7xynot1y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.supplier-item-card-name[b-bv7xynot1y] {
    min-width: 0;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.supplier-item-card-sku[b-bv7xynot1y],
.supplier-item-card-label[b-bv7xynot1y] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.supplier-item-card-price[b-bv7xynot1y] {
    font-weight: 600;
}

.supplier-items-empty[b-bv7xynot1y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius, 0.625rem));
}

.supplier-items-empty-icon[b-bv7xynot1y] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.5rem;
    border-radius: 9999px;
    background-color: var(--accent);
    color: var(--muted-foreground);
}

.supplier-items-empty-title[b-bv7xynot1y] {
    margin: 0;
    font-weight: 600;
}

.supplier-items-empty-text[b-bv7xynot1y] {
    margin: 0 0 0.5rem;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.supplier-items-error[b-bv7xynot1y] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--muted-foreground);
}
/* /Features/Suppliers/Components/SupplierDetails/SupplierProfileCard.razor.rz.scp.css */
.supplier-profile-skeleton[b-ac66fli9cw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.supplier-profile-error[b-ac66fli9cw] {
    margin: 0;
    color: var(--muted-foreground);
}

/* The shared profile header: the avatar and the action buttons share the first row, and the name spans the whole card
   (it never sits in a narrow column beside the buttons). The identity wrapper only groups the markup. */
.supplier-profile-header[b-ac66fli9cw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    align-items: start;
    gap: 0.375rem 0.75rem;
}

.supplier-profile-identity[b-ac66fli9cw] {
    display: contents;
}

.supplier-profile-avatar[b-ac66fli9cw] {
    grid-column: 1;
    grid-row: 1;
}

.supplier-profile-name[b-ac66fli9cw],
.supplier-profile-since[b-ac66fli9cw],
[b-ac66fli9cw] .supplier-profile-contact {
    grid-column: 1 / -1;
}

.supplier-profile-name[b-ac66fli9cw] {
    justify-self: stretch;
}

.supplier-profile-avatar[b-ac66fli9cw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
    color: var(--primary);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

.supplier-profile-name[b-ac66fli9cw] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.supplier-profile-since[b-ac66fli9cw] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

[b-ac66fli9cw] .supplier-profile-contact {
    margin-top: 0.125rem;
}

.supplier-profile-icon-button[b-ac66fli9cw] {
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius, 0.625rem);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .supplier-profile-icon-button:hover[b-ac66fli9cw] {
        background: var(--accent);
        color: var(--primary);
    }
}

.supplier-profile-icon-button:active[b-ac66fli9cw] {
    background: var(--pressed);
    color: var(--primary);
}

.supplier-profile-pinned-note[b-ac66fli9cw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 1.5rem;
}

.supplier-profile-all-notes[b-ac66fli9cw] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: var(--text-xs);
    text-decoration: underline;
    cursor: pointer;
}

@media (hover: hover) {
    .supplier-profile-all-notes:hover[b-ac66fli9cw] {
        color: var(--primary);
    }
}

.supplier-profile-form[b-ac66fli9cw] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-colour);
}

[b-ac66fli9cw] .supplier-profile-edit-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.supplier-profile-form-actions[b-ac66fli9cw] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.supplier-profile-actions[b-ac66fli9cw] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.375rem;
}

/* Touch (T-25): the 32 px icon buttons get a 44 px hit area, so they sit 12 px apart. */
@media (pointer: coarse) {
    .supplier-profile-actions[b-ac66fli9cw] {
        gap: 0.75rem;
    }
}

.supplier-profile-archived[b-ac66fli9cw] {
    margin-bottom: 1rem;
}

.supplier-profile-archived-content[b-ac66fli9cw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.supplier-profile-account[b-ac66fli9cw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-colour);
}

.supplier-profile-account-label[b-ac66fli9cw] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.supplier-profile-account-value[b-ac66fli9cw] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, monospace;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: end;
    overflow: hidden;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Features/Suppliers/Components/SupplierDetails/SupplierSummaryTab.razor.rz.scp.css */
.supplier-summary-tab[b-qhe4m9slpv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.supplier-summary-tab-refreshing[b-qhe4m9slpv] {
    opacity: 0.6;
}

.supplier-summary-stat-row[b-qhe4m9slpv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* The raw wrapper anchors the ::deep rule: it colours the Low stock card's value when something is low. */
.supplier-summary-low-stock[b-qhe4m9slpv]  .stat-card-value {
    color: var(--warning);
}

.supplier-summary-touch[b-qhe4m9slpv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.supplier-summary-address[b-qhe4m9slpv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-colour);
}

.supplier-summary-address-text[b-qhe4m9slpv] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    font-size: var(--text-sm);
}

.supplier-summary-muted[b-qhe4m9slpv] {
    color: var(--muted-foreground);
}

.supplier-summary-last-used-value[b-qhe4m9slpv] {
    font-weight: 600;
    font-size: 1.25rem;
}

.supplier-summary-quick-actions[b-qhe4m9slpv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.supplier-summary-quick-actions[b-qhe4m9slpv]  .btn {
    width: 100%;
}

.supplier-summary-error[b-qhe4m9slpv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--muted-foreground);
}

@media (width <= 480px) {
    .supplier-summary-stat-row[b-qhe4m9slpv],
    .supplier-summary-quick-actions[b-qhe4m9slpv] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Suppliers/Components/SuppliersTable.razor.rz.scp.css */
.suppliers-table-scope[b-t08vk4d8m3] {
    display: contents;
}

.suppliers-table-scope[b-t08vk4d8m3]  .suppliers-table-center {
    text-align: center;
}

.suppliers-table-scope[b-t08vk4d8m3]  .suppliers-table-muted {
    color: var(--muted-foreground);
}

/* The name truncates (the title holds the whole name); the "Archived" badge keeps its width. */
.suppliers-table-name[b-t08vk4d8m3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.suppliers-table-action[b-t08vk4d8m3] {
    display: flex;
    justify-content: center;
}
/* /Features/Suppliers/Modals/CreateSupplierModal.razor.rz.scp.css */
.create-supplier-contact-row[b-wkdk41zo2a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (width <= 480px) {
    .create-supplier-contact-row[b-wkdk41zo2a] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Suppliers/Pages/Suppliers.razor.rz.scp.css */
.suppliers-page-content[b-5zkhyccv21] {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

[b-5zkhyccv21] .suppliers-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.suppliers-search-row[b-5zkhyccv21] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width >= 769px) and (not ((pointer: coarse) and (height < 500px))) {
    .suppliers-search-row[b-5zkhyccv21] {
        flex: 1 1 16rem;
    }
}

[b-5zkhyccv21] .suppliers-search-input {
    flex: 1 1 auto;
    min-width: 0;
}

[b-5zkhyccv21] .suppliers-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.suppliers-filter-clear[b-5zkhyccv21] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: 1;
    cursor: pointer;
}

[b-5zkhyccv21] .suppliers-create-button {
    flex: 0 0 auto;
}

[b-5zkhyccv21] .suppliers-list-content {
    transition: opacity var(--motion-fast) var(--ease-out);
}

[b-5zkhyccv21] .suppliers-list-content.is-refreshing {
    opacity: 0.6;
    /* Dims only if the reload takes longer than 150 ms, so a quick refresh never blinks. */
    transition: opacity var(--motion-fast) var(--ease-out) 150ms;
    pointer-events: none;
}

.suppliers-card-list[b-5zkhyccv21] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    [b-5zkhyccv21] .suppliers-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    [b-5zkhyccv21] .suppliers-create-button {
        width: 100%;
    }

    .suppliers-search-row[b-5zkhyccv21] {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* The filter chip (S1w, T-7). On the phone layout (viewport.js, T-119) the search keeps the full width and the "Filtrado por …"
   chip goes on its own row under it, its label wrapping inside the chip with the ✕ at the end (B2). The same shape on every
   list page with a chip. */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .suppliers-search-row[b-5zkhyccv21] {
        flex-wrap: wrap;
    }

    .suppliers-search-row[b-5zkhyccv21]  .suppliers-search-input {
        flex: 1 1 100%;
    }

    .suppliers-search-row[b-5zkhyccv21]  .suppliers-filter-badge {
        flex: 0 1 auto;
        max-width: 100%;
        white-space: normal;
    }
}

/* The chip's ✕ is a small text button: a 44 px tap area on touch without making the chip taller. */
@media (pointer: coarse) {
    .suppliers-filter-clear[b-5zkhyccv21] {
        position: relative;
    }

    .suppliers-filter-clear[b-5zkhyccv21]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2.75rem;
        height: 2.75rem;
        transform: translate(-50%, -50%);
    }
}
/* /Features/Suppliers/Pages/SuppliersDetails.razor.rz.scp.css */
.supplier-details-content[b-8gzm0al4p7] {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.supplier-details-back-link[b-8gzm0al4p7] {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-decoration: none;
}

@media (hover: hover) {
    .supplier-details-back-link:hover[b-8gzm0al4p7] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.supplier-details-header[b-8gzm0al4p7] {
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
}

.supplier-details-title[b-8gzm0al4p7] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.supplier-details-subtitle[b-8gzm0al4p7] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.supplier-details-layout[b-8gzm0al4p7] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.supplier-details-profile[b-8gzm0al4p7] {
    min-width: 0;
}

.supplier-details-command-center[b-8gzm0al4p7] {
    min-width: 0;
}

[b-8gzm0al4p7] .supplier-details-tabs-list {
    flex-wrap: nowrap;
}

[b-8gzm0al4p7] .supplier-details-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    color: var(--muted-foreground);
}

.supplier-details-not-found-title[b-8gzm0al4p7] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
}

.supplier-details-not-found-text[b-8gzm0al4p7] {
    margin: 0 0 0.5rem;
}

/* Two columns: the page scrolls as a whole. The profile sticks under the top bar, and so does the top of the
   command center card (CardStickyHeader), on the same line as the profile's top edge. */
@media (width >= 1024px) {
    .supplier-details-layout[b-8gzm0al4p7] {
        grid-template-columns: minmax(18rem, 22rem) 1fr;
    }

    .supplier-details-profile[b-8gzm0al4p7] {
        position: sticky;
        top: calc(var(--sticky-offset) + 0.75rem);
        align-self: start;
        /* A profile taller than the window scrolls on its own instead of hiding its bottom. */
        max-height: calc(100dvh - var(--sticky-offset) - 1.5rem);
        overflow-y: auto;
    }
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    /* Growing/scrolling behaviour for the tab strip now lives in the shared Tabs component
       (Components/UI/Tabs/Tabs.razor.css) and applies at every breakpoint, not just mobile. */
}
/* /Features/TemplatedJobs/Components/TemplatedJobCard.razor.rz.scp.css */
.templated-job-card-scope[b-m5rrdwxry1] {
    display: contents;
}

.templated-job-card-scope[b-m5rrdwxry1]  .templated-job-card-header .card-header-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.templated-job-card-header-content[b-m5rrdwxry1] {
    display: flex;
    flex: 1 1 10rem;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.templated-job-card-label[b-m5rrdwxry1] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.templated-job-card-name[b-m5rrdwxry1] {
    font-weight: 600;
    font-size: 1.0625rem;
    overflow-wrap: anywhere;
}

.templated-job-card-grid[b-m5rrdwxry1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.templated-job-card-tile[b-m5rrdwxry1] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--off-white);
}

.templated-job-card-tile-label[b-m5rrdwxry1] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.templated-job-card-tile-value[b-m5rrdwxry1] {
    font-weight: 600;
    font-size: 1rem;
}

.templated-job-card-tile-value-muted[b-m5rrdwxry1] {
    color: var(--muted-foreground);
}

.templated-job-card-scope[b-m5rrdwxry1]  .templated-job-card-view-button {
    justify-content: center;
}
/* /Features/TemplatedJobs/Components/TemplatedJobForm.razor.rz.scp.css */
.templated-job-form-row[b-wxq35urr1q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 480px) {
    .templated-job-form-row[b-wxq35urr1q] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.templated-job-form-hint[b-wxq35urr1q] {
    margin: 0.375rem 0 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.templated-job-form-actions[b-wxq35urr1q] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 480px) {
    .templated-job-form-actions[b-wxq35urr1q] {
        flex-direction: column-reverse;
    }

    .templated-job-form-actions[b-wxq35urr1q]  > * {
        width: 100%;
    }
}
/* /Features/TemplatedJobs/Components/TemplatedJobLinesEditor.razor.rz.scp.css */
.templated-job-lines-editor[b-j074devzha] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.templated-job-line-edit[b-j074devzha] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--off-white);
}

.templated-job-line-edit-head[b-j074devzha] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.templated-job-line-edit-number[b-j074devzha] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.templated-job-line-edit-actions[b-j074devzha] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Touch (T-25): icon buttons get a 44 px hit area, so neighbours sit 8 px apart. */
@media (pointer: coarse) {
    .templated-job-line-edit-actions[b-j074devzha] {
        gap: 0.5rem;
    }
}

.templated-job-line-edit-field[b-j074devzha] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.templated-job-line-edit-label[b-j074devzha] {
    font-size: var(--text-sm);
    font-weight: 500;
}

/* Type, quantity and price side by side; stacked on a narrow screen. */
.templated-job-line-edit-grid[b-j074devzha] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
}

.templated-job-line-edit-options[b-j074devzha] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
}

.templated-job-line-edit-chip[b-j074devzha] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background: var(--primary-foreground);
    font-size: var(--text-sm);
}

.templated-job-line-edit-chip-text[b-j074devzha] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.templated-job-line-edit-unlink[b-j074devzha] {
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
}

@media (hover: hover) {
    .templated-job-line-edit-unlink:hover[b-j074devzha] {
        background: var(--accent);
        color: var(--primary);
    }
}

.templated-job-line-edit-unlink:active[b-j074devzha] {
    background: var(--pressed);
    color: var(--primary);
}

.templated-job-line-edit-hint[b-j074devzha] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.templated-job-line-edit-hint-warning[b-j074devzha] {
    color: var(--warning);
}

.templated-job-lines-editor-add[b-j074devzha] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
/* /Features/TemplatedJobs/Components/TemplatedJobLinesView.razor.rz.scp.css */
.templated-job-lines-mobile[b-ihtdl127as] {
    display: flex;
    flex-direction: column;
}

.templated-job-line-row-mobile[b-ihtdl127as] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--border-colour);
}

.templated-job-line-row-mobile:first-child[b-ihtdl127as] {
    border-top: 0;
}

.templated-job-line-row-mobile-main[b-ihtdl127as] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.templated-job-line-row-mobile-description[b-ihtdl127as] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.templated-job-line-row-mobile-badges[b-ihtdl127as] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.templated-job-line-row-mobile-amount[b-ihtdl127as] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.templated-job-line-row-mobile-qty[b-ihtdl127as] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.templated-job-line-row-mobile-total[b-ihtdl127as] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
}

/* The table cell truncates a long description; the name and its marks wrap instead. */
.templated-job-line-description[b-ihtdl127as] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* /Features/TemplatedJobs/Components/TemplatedJobsSelector.razor.rz.scp.css */
/* Full width: in a flex row (Create Job's form) the root would shrink to its scrollbar-wide min-content. */
.templated-jobs-selector[b-iskbscm92s] {
    width: 100%;
}

/* The picker always sits in a modal (Create job, a quick estimate, add from templates, choose a template), whose body is
   the one scroll: the card takes its natural height, so a phone has no second scroll area inside the first (T-38). */

/* The ticked templates' chips wrap in one row, so a second tick sits beside the first when it fits and the list under them
   moves only when a new line is needed (and by the first chip's row, once). */
.templated-jobs-selector-chips[b-iskbscm92s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.templated-jobs-selector-chips[b-iskbscm92s]  .templated-jobs-selector-chip {
    max-width: 100%;
}

/* The toolbar sits above the lists: the search takes the room, the category filter its own width. */
.templated-jobs-selector-toolbar[b-iskbscm92s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 12rem);
    gap: 0.5rem;
}

@media (max-width: 480px) {
    .templated-jobs-selector-toolbar[b-iskbscm92s] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.templated-jobs-selector-heading[b-iskbscm92s] {
    margin: 0.25rem 0 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.templated-jobs-selector-empty[b-iskbscm92s] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.templated-jobs-selector-empty a[b-iskbscm92s] {
    margin-left: 0.25rem;
    color: var(--primary);
    font-weight: 600;
}

/* A selected template's chip: a long name wraps inside it (the Button is nowrap, 2.25rem tall) with the ✕ kept at the end,
   centred on the lines. The Button's own element is reached from the raw root. */
.templated-jobs-selector[b-iskbscm92s]  .templated-jobs-selector-chip {
    height: auto;
    min-height: 2.25rem;
    padding-block: 0.375rem;
    justify-content: space-between;
    text-align: start;
    white-space: normal;
}

.templated-jobs-selector[b-iskbscm92s]  .templated-jobs-selector-chip .btn-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* A list row: the name takes the room left beside the category badge and price, wrapping at its words; when it would
   get less than 9rem the badge and price go under it instead of squeezing it into a thin column. The badge and price
   never shrink or clip. The row's element is CardContent's own, reached from the raw root. */
.templated-jobs-selector[b-iskbscm92s]  .templated-jobs-selector-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
}

.templated-jobs-selector-name[b-iskbscm92s] {
    flex: 1 1 9rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.templated-jobs-selector-meta[b-iskbscm92s] {
    flex-shrink: 0;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
}

.templated-jobs-selector-price[b-iskbscm92s] {
    font-size: var(--text-sm);
    font-weight: 600;
}
/* /Features/TemplatedJobs/Components/TemplatedJobsTable.razor.rz.scp.css */
.templated-jobs-table-scope[b-opti14w93u] {
    display: contents;
}

.templated-jobs-table-scope[b-opti14w93u]  .templated-jobs-table-center {
    text-align: center;
}

.templated-jobs-table-scope[b-opti14w93u]  .templated-jobs-table-right {
    text-align: right;
}

.templated-jobs-table-scope[b-opti14w93u]  .templated-jobs-table-muted {
    color: var(--muted-foreground);
}

.templated-jobs-table-name[b-opti14w93u] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.templated-jobs-table-action[b-opti14w93u] {
    display: flex;
    justify-content: center;
}
/* /Features/TemplatedJobs/Components/TemplatedJobTotals.razor.rz.scp.css */
.templated-job-totals-scope[b-nkcbj4hwzl] {
    display: contents;
}

.templated-job-totals-scope[b-nkcbj4hwzl]  .templated-job-totals-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.templated-job-totals-row[b-nkcbj4hwzl] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.templated-job-totals-total[b-nkcbj4hwzl] {
    font-size: 1.125rem;
    font-weight: 700;
}

.templated-job-totals-note[b-nkcbj4hwzl] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.templated-job-totals-warning[b-nkcbj4hwzl] {
    color: var(--warning);
}
/* /Features/TemplatedJobs/Modals/SaveAsTemplateModal.razor.rz.scp.css */
.save-as-template-hint[b-w8f009ifny] {
    margin: 0.375rem 0 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}
/* /Features/TemplatedJobs/Pages/TemplatedJobDetails.razor.rz.scp.css */
.templated-job-details-content[b-fmz5zwnuoz] {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    max-width: 60rem;
}

.templated-job-details-back-link[b-fmz5zwnuoz] {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-decoration: none;
}

@media (hover: hover) {
    .templated-job-details-back-link:hover[b-fmz5zwnuoz] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.templated-job-details-header[b-fmz5zwnuoz] {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.templated-job-details-heading[b-fmz5zwnuoz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.templated-job-details-title[b-fmz5zwnuoz] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.templated-job-details-subtitle[b-fmz5zwnuoz] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.templated-job-details-subtitle a[b-fmz5zwnuoz] {
    margin-left: 0.25rem;
    color: var(--primary);
    font-weight: 600;
}

.templated-job-details-actions[b-fmz5zwnuoz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.templated-job-details-badges[b-fmz5zwnuoz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.templated-job-details-archived[b-fmz5zwnuoz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.templated-job-details-label[b-fmz5zwnuoz] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.templated-job-details-description[b-fmz5zwnuoz] {
    margin: 0.375rem 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.templated-job-details-content[b-fmz5zwnuoz]  .templated-job-details-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    color: var(--muted-foreground);
}

.templated-job-details-state-title[b-fmz5zwnuoz] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
}

.templated-job-details-state-text[b-fmz5zwnuoz] {
    margin: 0 0 0.5rem;
}
/* /Features/TemplatedJobs/Pages/TemplatedJobs.razor.rz.scp.css */
.templated-jobs-page[b-ayg2pc7xsm] {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

.templated-jobs-back-link[b-ayg2pc7xsm] {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-decoration: none;
}

@media (hover: hover) {
    .templated-jobs-back-link:hover[b-ayg2pc7xsm] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.templated-jobs-header[b-ayg2pc7xsm] {
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
}

.templated-jobs-title[b-ayg2pc7xsm] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.templated-jobs-subtitle[b-ayg2pc7xsm] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.templated-jobs-page[b-ayg2pc7xsm]  .templated-jobs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.templated-jobs-filters[b-ayg2pc7xsm] {
    display: grid;
    flex: 1 1 24rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    min-width: 0;
}

/* A long label ("Todas las categorías") stays on one line and ends in an ellipsis instead of growing the select. */
.templated-jobs-filters[b-ayg2pc7xsm]  select {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.templated-jobs-card-list[b-ayg2pc7xsm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (max-width: 768px), ((pointer: coarse) and (height < 500px)) {
    .templated-jobs-page[b-ayg2pc7xsm]  .templated-jobs-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .templated-jobs-filters[b-ayg2pc7xsm] {
        flex: 0 0 auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .templated-jobs-page[b-ayg2pc7xsm]  .templated-jobs-create-button {
        width: 100%;
    }
}
/* /Features/Transactions/Components/TransactionCard.razor.rz.scp.css */
.transaction-card[b-r6e85ihfr9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius));
    background-color: var(--primary-foreground);
    color: var(--primary);
    text-decoration: none;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.transaction-card-void[b-r6e85ihfr9] {
    opacity: 0.6;
}

.transaction-card-header[b-r6e85ihfr9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.transaction-card-number[b-r6e85ihfr9] {
    font-weight: 700;
}

.transaction-card-line[b-r6e85ihfr9] {
    display: flex;
    gap: 0.375rem;
    min-width: 0;
    font-weight: 500;
}

/* The date and the amount never break; when both don't fit, the amount moves to its own line. */
.transaction-card-footer[b-r6e85ihfr9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
    font-size: var(--text-sm, 0.875rem);
}

.transaction-card-muted[b-r6e85ihfr9] {
    color: var(--muted-foreground);
}

.transaction-card-amount[b-r6e85ihfr9] {
    flex-shrink: 0;
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
}

.transaction-card-amount-refund[b-r6e85ihfr9] {
    color: var(--destructive);
}

.transaction-card-amount-void[b-r6e85ihfr9] {
    color: var(--muted-foreground);
    text-decoration: line-through;
}
/* /Features/Transactions/Components/TransactionsTable.razor.rz.scp.css */
.transactions-table-scope[b-1fmhq8igsg] {
    display: contents;
}

.transactions-table-scope[b-1fmhq8igsg]  .transactions-table-row-void {
    opacity: 0.6;
}

.transactions-table-transaction-cell[b-1fmhq8igsg] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.transactions-table-number[b-1fmhq8igsg] {
    font-weight: 600;
}

.transactions-table-muted[b-1fmhq8igsg] {
    color: var(--muted-foreground);
}

.transactions-table-amount[b-1fmhq8igsg] {
    font-weight: 600;
}

.transactions-table-amount-refund[b-1fmhq8igsg] {
    color: var(--destructive);
}

.transactions-table-amount-void[b-1fmhq8igsg] {
    color: var(--muted-foreground);
    text-decoration: line-through;
}
/* /Features/Transactions/Components/TransactionTypeBadge.razor.rz.scp.css */
.transaction-type-badges[b-wx8kfc6rgo] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
/* /Features/Transactions/Modals/RecordPaymentModal.razor.rz.scp.css */
/* The hint sits close under the chips (and their message) or the note, not a form row away. */
.record-payment-method[b-8oals1yzjh],
.record-payment-note[b-8oals1yzjh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.record-payment-hint[b-8oals1yzjh] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Transactions/Modals/RecordRefundModal.razor.rz.scp.css */
.record-refund-modal-text[b-7b90kjat5r] {
    margin: 0;
    color: var(--muted-foreground);
}

/* The hint sits close under the reason, not a form row away (as Record payment's hint does). */
.record-refund-note[b-7b90kjat5r] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.record-refund-hint[b-7b90kjat5r] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Transactions/Modals/VoidTransactionModal.razor.rz.scp.css */
.void-transaction-modal-text[b-xwkgf84xik] {
    margin: 0;
    color: var(--muted-foreground);
}
/* /Features/Transactions/Pages/Transactions.razor.rz.scp.css */
.transactions-page-content[b-wgsrwesmmy] {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

[b-wgsrwesmmy] .transactions-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.transactions-search-row[b-wgsrwesmmy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width >= 769px) and (not ((pointer: coarse) and (height < 500px))) {
    .transactions-search-row[b-wgsrwesmmy] {
        flex: 1 1 16rem;
    }
}

[b-wgsrwesmmy] .transactions-search-input {
    flex: 1 1 auto;
    min-width: 0;
}

[b-wgsrwesmmy] .transactions-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.transactions-filter-clear[b-wgsrwesmmy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: 1;
    cursor: pointer;
}

[b-wgsrwesmmy] .transactions-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 10rem;
}

[b-wgsrwesmmy] .transactions-list-content {
    transition: opacity var(--motion-fast) var(--ease-out);
}

[b-wgsrwesmmy] .transactions-list-content.is-refreshing {
    opacity: 0.6;
    /* Dims only if the reload takes longer than 150 ms, so a quick refresh never blinks. */
    transition: opacity var(--motion-fast) var(--ease-out) 150ms;
    pointer-events: none;
}

.transactions-card-list[b-wgsrwesmmy] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    [b-wgsrwesmmy] .transactions-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    [b-wgsrwesmmy] .transactions-select {
        width: 100%;
        min-width: 0;
    }

    .transactions-search-row[b-wgsrwesmmy] {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* The filter chip (S1w, T-7). On the phone layout (viewport.js, T-119) the search keeps the full width and the "Filtrado por …"
   chip goes on its own row under it, its label wrapping inside the chip with the ✕ at the end (B2). The same shape on every
   list page with a chip. */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .transactions-search-row[b-wgsrwesmmy] {
        flex-wrap: wrap;
    }

    .transactions-search-row[b-wgsrwesmmy]  .transactions-search-input {
        flex: 1 1 100%;
    }

    .transactions-search-row[b-wgsrwesmmy]  .transactions-filter-badge {
        flex: 0 1 auto;
        max-width: 100%;
        white-space: normal;
    }
}

/* The chip's ✕ is a small text button: a 44 px tap area on touch without making the chip taller. */
@media (pointer: coarse) {
    .transactions-filter-clear[b-wgsrwesmmy] {
        position: relative;
    }

    .transactions-filter-clear[b-wgsrwesmmy]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2.75rem;
        height: 2.75rem;
        transform: translate(-50%, -50%);
    }
}
/* /Features/Transactions/Pages/TransactionsDetails.razor.rz.scp.css */
.transaction-details-content[b-oqer9l447f] {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.transaction-details-back-link[b-oqer9l447f] {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-decoration: none;
}

@media (hover: hover) {
    .transaction-details-back-link:hover[b-oqer9l447f] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.transaction-details-header[b-oqer9l447f] {
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
}

.transaction-details-title[b-oqer9l447f] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.transaction-details-subtitle[b-oqer9l447f] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.transaction-details-layout[b-oqer9l447f] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.transaction-details-main[b-oqer9l447f],
.transaction-details-rail[b-oqer9l447f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

[b-oqer9l447f] .transaction-details-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    color: var(--muted-foreground);
}

.transaction-details-message-title[b-oqer9l447f] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
}

.transaction-details-message-text[b-oqer9l447f] {
    margin: 0 0 0.5rem;
}

/* --- Hero card: identity and the amount, then when, how and who, and the note --- */

.transaction-hero[b-oqer9l447f] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.transaction-hero-top[b-oqer9l447f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.transaction-hero-id[b-oqer9l447f] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.transaction-hero-icon[b-oqer9l447f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--off-white);
    color: var(--primary);
}

.transaction-hero-id-text[b-oqer9l447f] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.transaction-hero-number[b-oqer9l447f] {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.transaction-hero-amount[b-oqer9l447f] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.transaction-hero-amount-refund[b-oqer9l447f] {
    color: var(--destructive);
}

.transaction-hero-amount-void[b-oqer9l447f] {
    color: var(--muted-foreground);
    text-decoration: line-through;
}

.transaction-hero-info[b-oqer9l447f] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--border-colour);
    font-size: var(--text-sm);
}

.transaction-hero-info-label[b-oqer9l447f] {
    margin-right: 0.375rem;
    color: var(--muted-foreground);
}

.transaction-hero-note[b-oqer9l447f] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-wrap: anywhere;
}

/* --- Invoice card and references: label / value rows split by hairlines --- */

.transaction-overview[b-oqer9l447f],
.transaction-references[b-oqer9l447f],
.transaction-links-list[b-oqer9l447f] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.transaction-overview-row[b-oqer9l447f],
.transaction-references-row[b-oqer9l447f],
.transaction-links-row[b-oqer9l447f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border-colour);
}

.transaction-overview-row:last-child[b-oqer9l447f],
.transaction-references-row:last-child[b-oqer9l447f],
.transaction-links-list li:last-child .transaction-links-row[b-oqer9l447f] {
    border-bottom: 0;
}

.transaction-overview-label[b-oqer9l447f] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.transaction-overview-value[b-oqer9l447f] {
    font-weight: 600;
}

.transaction-overview-owing[b-oqer9l447f] {
    color: var(--warning);
}

.transaction-overview-link[b-oqer9l447f] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .transaction-overview-link:hover strong[b-oqer9l447f] {
        text-decoration: underline;
    }
}

.transaction-references-row[b-oqer9l447f],
.transaction-links-row[b-oqer9l447f] {
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .transaction-references-row:hover .transaction-references-value[b-oqer9l447f],
    .transaction-links-row:hover .transaction-links-main strong[b-oqer9l447f] {
        text-decoration: underline;
    }
}

.transaction-references-value[b-oqer9l447f] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

/* --- Refunds / Refund of --- */

.transaction-links-empty[b-oqer9l447f] {
    margin: 0;
    color: var(--muted-foreground);
}

.transaction-links-main[b-oqer9l447f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    min-width: 0;
}

.transaction-links-muted[b-oqer9l447f] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.transaction-links-amount[b-oqer9l447f] {
    flex-shrink: 0;
    font-weight: 600;
}

.transaction-links-amount-refund[b-oqer9l447f] {
    color: var(--destructive);
}

.transaction-links-amount-void[b-oqer9l447f] {
    color: var(--muted-foreground);
    text-decoration: line-through;
}

.transaction-links-row-void[b-oqer9l447f] {
    opacity: 0.7;
}

.transaction-links-left[b-oqer9l447f] {
    margin: 0.75rem 0 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* --- Actions: full-width buttons under the references --- */

.transaction-actions[b-oqer9l447f] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-colour);
}

/* A button with its one-line explanation under it (Refund, Void): never side by side, so the line wraps at the button's width. */
.transaction-action-block[b-oqer9l447f] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.transaction-action-hint[b-oqer9l447f] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: 1.3;
}

.transaction-actions[b-oqer9l447f]  .transaction-action {
    width: 100%;
    justify-content: center;
}

.transaction-actions[b-oqer9l447f]  .transaction-action-void:not(:disabled) {
    border-color: var(--destructive);
    color: var(--destructive);
}

/* Two columns: the hero and links, then the invoice and references rail. */
@media (width >= 1024px) {
    .transaction-details-layout[b-oqer9l447f] {
        grid-template-columns: 2fr 1fr;
    }
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .transaction-hero-number[b-oqer9l447f],
    .transaction-hero-amount[b-oqer9l447f] {
        font-size: 1.75rem;
    }
}
/* /Features/Users/Components/UsersInviteList.razor.rz.scp.css */
.users-invites-empty[b-3g7oxgl2z3] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.users-invite-cards[b-3g7oxgl2z3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.users-invite-card[b-3g7oxgl2z3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
}

.users-invite-main[b-3g7oxgl2z3] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.users-invite-name[b-3g7oxgl2z3] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.users-invite-email[b-3g7oxgl2z3] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.users-invite-status[b-3g7oxgl2z3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    font-size: var(--text-sm);
}

.users-invite-emailed[b-3g7oxgl2z3] {
    color: var(--muted-foreground);
}

.users-invites-table[b-3g7oxgl2z3] {
    display: contents;
}

.users-invites-table[b-3g7oxgl2z3]  .users-invites-actions {
    text-align: end;
}
/* /Features/Users/Components/UsersPeopleList.razor.rz.scp.css */
.users-people-cards[b-emsfgfff9t] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.users-person-card[b-emsfgfff9t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
}

.users-person-main[b-emsfgfff9t] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.users-person-name-row[b-emsfgfff9t],
.users-person-email-row[b-emsfgfff9t],
.users-person-badges[b-emsfgfff9t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    min-width: 0;
}

.users-person-name[b-emsfgfff9t] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.users-person-email[b-emsfgfff9t] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.users-people-table[b-emsfgfff9t] {
    display: contents;
}

.users-people-table[b-emsfgfff9t]  .users-people-actions {
    text-align: end;
}
/* /Features/Users/Components/UsersRemovedList.razor.rz.scp.css */
.users-removed[b-r3r1d90hob] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.users-removed-toggle[b-r3r1d90hob] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border: 0;
    background: none;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

@media (hover: hover) {
    .users-removed-toggle:hover[b-r3r1d90hob] {
        color: var(--primary);
    }
}

.users-removed-chevron-collapsed[b-r3r1d90hob] {
    transform: rotate(-90deg);
}

.users-removed-body[b-r3r1d90hob] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.users-removed-description[b-r3r1d90hob] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.users-removed-list[b-r3r1d90hob] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
}

.users-removed-row[b-r3r1d90hob] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.75rem 1rem;
}

.users-removed-row + .users-removed-row[b-r3r1d90hob] {
    border-top: 1px solid var(--border-colour);
}

.users-removed-name[b-r3r1d90hob] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.users-removed-email[b-r3r1d90hob],
.users-removed-date[b-r3r1d90hob] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.users-removed-date[b-r3r1d90hob] {
    margin-left: auto;
}
/* /Features/Users/Modals/InviteLinkModal.razor.rz.scp.css */
.invite-link-modal-body[b-0mtxne3cih] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.invite-link-modal-text[b-0mtxne3cih] {
    margin: 0;
    color: var(--muted-foreground);
}

.invite-link-modal-emailed[b-0mtxne3cih] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--accent);
    color: var(--primary);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.invite-link-modal-emailed > :first-child[b-0mtxne3cih] {
    flex-shrink: 0;
    margin-top: 0.125rem;
}
/* /Features/Users/Modals/InviteTechnicianModal.razor.rz.scp.css */
.invite-technician-modal-text[b-vfenboc536] {
    margin: 0;
    color: var(--muted-foreground);
}

.invite-technician-modal-row[b-vfenboc536] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.invite-technician-modal-field[b-vfenboc536] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.invite-technician-modal-hint[b-vfenboc536] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

@media (width <= 480px) {
    .invite-technician-modal-row[b-vfenboc536] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Features/Users/Modals/RemoveUserModal.razor.rz.scp.css */
.remove-user-modal-body[b-dutgalhoq0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.remove-user-modal-question[b-dutgalhoq0] {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.remove-user-modal-list[b-dutgalhoq0] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding-left: 1.25rem;
    color: var(--muted-foreground);
}
/* /Features/Users/Pages/Users.razor.rz.scp.css */
.users-page[b-nz5nwf8f9c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 52rem;
}

.users-header[b-nz5nwf8f9c] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.users-heading[b-nz5nwf8f9c] {
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    row-gap: 0.25rem;
    min-width: 0;
}

.users-title[b-nz5nwf8f9c] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.users-subtitle[b-nz5nwf8f9c] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.users-invite[b-nz5nwf8f9c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    margin-left: auto;
}

.users-seats[b-nz5nwf8f9c] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
}

.users-seats-hint[b-nz5nwf8f9c] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--accent);
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.users-seats-hint > :first-child[b-nz5nwf8f9c] {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* The lists (people, invites, removed): the same column the page lays out, dimmed while an action's reload runs, only if it
   takes longer than 150 ms. The class name ends in "-list-content" so app.css's reduced-motion block keeps the 150 ms wait. */
.users-list-content[b-nz5nwf8f9c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.users-list-content.is-refreshing[b-nz5nwf8f9c] {
    opacity: 0.6;
    transition: opacity var(--motion-fast) var(--ease-out) 150ms;
}
/* /Features/Vehicles/Components/VehicleCard.razor.rz.scp.css */
/* The status badge never shrinks: when the vehicle's name leaves it no room, it wraps under it. */
.vehicle-card-scope[b-9kqa1e38le]  .vehicle-card-header .card-header-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.vehicle-card-header-content[b-9kqa1e38le] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.vehicle-card-label[b-9kqa1e38le] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vehicle-card-plate[b-9kqa1e38le] {
    font-size: 1.0625rem;
}

.vehicle-card-name[b-9kqa1e38le] {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-weight: 500;
}

.vehicle-card-muted[b-9kqa1e38le] {
    color: var(--muted-foreground);
    font-weight: 400;
}

.vehicle-card-grid[b-9kqa1e38le] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.vehicle-card-tile[b-9kqa1e38le] {
    /* The mileage sizes itself from the tile's width (see .vehicle-card-tile-figure). */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    background-color: var(--off-white);
}

.vehicle-card-tile-label[b-9kqa1e38le] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Words wrap at their spaces ("Sin registrar", "Hace 3 semanas") instead of ending in an ellipsis; the mileage and the job
   number are marked .nowrap, and the customer's name clamps to two lines. */
.vehicle-card-tile-value[b-9kqa1e38le] {
    overflow: hidden;
    overflow-wrap: anywhere;
    font-weight: 600;
    font-size: 1rem;
}

/* The mileage never wraps or truncates: the type steps down from 1rem as the figure gets longer than the tile can hold
   (--chars is its length; about 0.6em per character), as StatTile does. */
.vehicle-card-tile-figure[b-9kqa1e38le] {
    display: block;
    font-size: clamp(0.6875rem, calc(100cqw / (var(--chars, 1) * 0.6)), 1rem);
    white-space: nowrap;
}

.vehicle-card-tile-link[b-9kqa1e38le] {
    -webkit-tap-highlight-color: transparent;
    color: inherit;
    text-decoration: none;
}

/* The link tile reads as a link by its value's colour; the hover and the press tint belong to the tile. */
.vehicle-card-tile-link .vehicle-card-tile-value[b-9kqa1e38le] {
    color: var(--primary);
}

@media (hover: hover) {
    .vehicle-card-tile-link:hover .vehicle-card-tile-value[b-9kqa1e38le] {
        text-decoration: underline;
    }
}

.vehicle-card-tile-link:active[b-9kqa1e38le] {
    background-color: var(--pressed);
}

.vehicle-card-tile-link:focus-visible[b-9kqa1e38le] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

.vehicle-card-actions[b-9kqa1e38le] {
    margin-top: 0.75rem;
}

.vehicle-card-scope[b-9kqa1e38le]  .vehicle-card-button {
    justify-content: center;
    min-width: 0;
}

.vehicle-card-year[b-9kqa1e38le] {
    margin-inline-start: 0.25rem;
}

.vehicle-card-scope[b-9kqa1e38le] {
    display: contents;
}
/* /Features/Vehicles/Components/VehicleCoreFields.razor.rz.scp.css */
/* The vehicle form's shared fields (T-40, D10). The form's own width decides the layout (a container query: the same form
   is a 278-320 px phone card, a 302 px desktop column and a wide page), over a six-column grid so the rows can split two or
   three ways without a second layout. Every cell is a raw div, so none of this needs ::deep.
   The narrow layout is the default: Marca, Modelo and Patente each take a row (half-width cells cut their placeholders and
   values below 24 rem: "p. ej., Mustang" needs ~181 px with the autocomplete's chrome), Año shares a row with the odometer
   when the edit form gives one (each takes its own row until 48 rem), and takes half a row alone otherwise. The gap between the two short numbers is 0.5 rem: the
   odometer's placeholder needs the 2 px at 360 px. */
.vehicle-core-scope[b-by6nj3uvu1] {
    container-type: inline-size;
}

.vehicle-core-fields[b-by6nj3uvu1] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
    gap: 0.75rem;
    column-gap: 0.5rem;
}

.vehicle-core-make[b-by6nj3uvu1],
.vehicle-core-model[b-by6nj3uvu1],
.vehicle-core-plate[b-by6nj3uvu1] {
    grid-column: 1 / -1;
    min-width: 0;
}

.vehicle-core-year[b-by6nj3uvu1] {
    grid-column: span 3;
    min-width: 0;
}

/* The edit form's odometer ("Kilometraje (km) (opcional)") and the Año beside it each get a row until the cells are
   wide enough for the label on one line: a half-width cell wrapped it to two lines and pushed its input out of line. */
.vehicle-core-beside[b-by6nj3uvu1] {
    grid-column: 1 / -1;
    min-width: 0;
}

.vehicle-core-fields-beside .vehicle-core-year[b-by6nj3uvu1] {
    grid-column: 1 / -1;
}

/* Wide enough for half-width cells that keep their placeholders whole (24 rem = 384 px: 186 px cells), and never on a phone
   (D10: the forms' own 480 px breakpoint, so a wide phone's card or modal stays one field per row): Marca and Modelo share
   a row, then Patente and Año; the edit form's odometer takes the next row's half. */
@container (width >= 24rem) {
    .vehicle-core-fields[b-by6nj3uvu1] {
        column-gap: 0.75rem;
    }

    .vehicle-core-make[b-by6nj3uvu1],
    .vehicle-core-model[b-by6nj3uvu1],
    .vehicle-core-plate[b-by6nj3uvu1] {
        grid-column: span 3;
    }

    .vehicle-core-fields-beside .vehicle-core-year[b-by6nj3uvu1] {
        grid-column: span 3;
    }
}

@media (width <= 480px) {
    .vehicle-core-fields[b-by6nj3uvu1] {
        column-gap: 0.5rem;
    }

    .vehicle-core-make[b-by6nj3uvu1],
    .vehicle-core-model[b-by6nj3uvu1],
    .vehicle-core-plate[b-by6nj3uvu1],
    .vehicle-core-fields-beside .vehicle-core-year[b-by6nj3uvu1] {
        grid-column: 1 / -1;
    }
}

/* Wide enough for three short fields (48 rem: 248 px cells): Patente, Año and the odometer share the row. */
@container (width >= 48rem) {
    .vehicle-core-fields-beside .vehicle-core-plate[b-by6nj3uvu1],
    .vehicle-core-fields-beside .vehicle-core-year[b-by6nj3uvu1],
    .vehicle-core-fields-beside .vehicle-core-beside[b-by6nj3uvu1] {
        grid-column: span 2;
    }
}
/* /Features/Vehicles/Components/VehicleDetails/VehicleDueCard.razor.rz.scp.css */
.due-card-rows[b-lbs49giedl] {
    display: flex;
    flex-direction: column;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.due-card-refreshing[b-lbs49giedl] {
    opacity: 0.6;
}

.due-card-row[b-lbs49giedl] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 0;
}

.due-card-row:first-child[b-lbs49giedl] {
    padding-top: 0;
}

.due-card-row + .due-card-row[b-lbs49giedl] {
    border-top: 1px solid var(--border-colour);
}

.due-card-row-info[b-lbs49giedl] {
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* The badge never shrinks: it wraps under a long check name. */
.due-card-row-head[b-lbs49giedl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
}

.due-card-kind[b-lbs49giedl] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.due-card-value[b-lbs49giedl] {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.375rem;
    font-size: var(--text-sm);
}

.due-card-muted[b-lbs49giedl] {
    color: var(--muted-foreground);
}

.due-card-reminded[b-lbs49giedl] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
}

.due-card-row-actions[b-lbs49giedl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.due-card-actions[b-lbs49giedl] {
    display: flex;
    margin-top: 0.75rem;
}

.due-card-disabled-wrap[b-lbs49giedl] {
    display: inline-flex;
}
/* /Features/Vehicles/Components/VehicleDetails/VehicleEditForm.razor.rz.scp.css */
/* The form's own width decides its rows (a container query, as VehicleCoreFields): this form is also a ~300 px column on a
   wide screen, where two selects or a date and an odometer wrapped their labels ("Tipo de combustible (opcional)"). */
.vehicle-edit-form-wrap[b-7sazvgnr2a] {
    container-type: inline-size;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-colour);
}

[b-7sazvgnr2a] .vehicle-edit-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vehicle-edit-row[b-7sazvgnr2a] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@container (width >= 32rem) {
    .vehicle-edit-row[b-7sazvgnr2a] {
        grid-template-columns: 1fr 1fr;
    }
}

[b-7sazvgnr2a] .vehicle-edit-vin {
    font-family: ui-monospace, monospace;
    letter-spacing: 0.04em;
}

.vehicle-edit-actions[b-7sazvgnr2a] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.vehicle-edit-vin-decode[b-7sazvgnr2a] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
}

.vehicle-edit-vin-row[b-7sazvgnr2a] {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
}

.vehicle-edit-vin-field[b-7sazvgnr2a] {
    flex: 1;
    min-width: 0;
}

/* Mirrors the field's label (FormField: a 0.875rem, weight 500 span, 0.25rem above the input). */
.vehicle-edit-vin-action[b-7sazvgnr2a] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
}

.vehicle-edit-vin-spacer[b-7sazvgnr2a] {
    font-size: var(--text-sm);
    font-weight: 500;
}

.vehicle-edit-vin-status[b-7sazvgnr2a] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

/* At phone widths the Decode button ("Decodificar" in Spanish) leaves the VIN about 140px at 360px: tighten the field
   and the button so all 17 characters stay visible. The right padding only needs room for the warning icon when there
   is one. */
@media (width <= 480px) {
    .vehicle-edit-vin-row[b-7sazvgnr2a] {
        gap: var(--spacing);
    }

    .vehicle-edit-vin-action[b-7sazvgnr2a]  button {
        padding: 0 0.625rem;
    }

    .vehicle-edit-vin-field[b-7sazvgnr2a]  input.vehicle-edit-vin {
        padding-left: 0.5rem;
        letter-spacing: 0;
    }

    .vehicle-edit-vin-field[b-7sazvgnr2a]  input.vehicle-edit-vin:not(.input-warning):not(.input-invalid) {
        padding-right: 0.5rem;
    }
}

/* With a mouse the VIN shrinks to 13px to share the row with Decode. On touch it keeps the 16px every field has there
   (a smaller field makes Safari on iPhone zoom), so Decode goes below it. */
@media (width <= 480px) and (pointer: fine) {
    .vehicle-edit-vin-field[b-7sazvgnr2a]  input.vehicle-edit-vin {
        font-size: 0.8125rem;
    }
}

@media (width <= 480px) and (pointer: coarse) {
    .vehicle-edit-vin-row[b-7sazvgnr2a] {
        flex-direction: column;
        align-items: stretch;
    }

    .vehicle-edit-vin-spacer[b-7sazvgnr2a] {
        display: none;
    }
}

.vehicle-edit-due[b-7sazvgnr2a] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-colour);
}

.vehicle-edit-section-title[b-7sazvgnr2a] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.vehicle-edit-date[b-7sazvgnr2a] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.vehicle-edit-clear-date[b-7sazvgnr2a] {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: var(--text-xs);
    text-decoration: underline;
    cursor: pointer;
}

@media (hover: hover) {
    .vehicle-edit-clear-date:hover[b-7sazvgnr2a] {
        color: var(--primary);
    }
}
/* /Features/Vehicles/Components/VehicleDetails/VehicleInvoicesTab.razor.rz.scp.css */
.vehicle-invoices-tab[b-4ld3xhja6v] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.vehicle-invoices-tab-refreshing[b-4ld3xhja6v] {
    opacity: 0.6;
}

.vehicle-invoices-header[b-4ld3xhja6v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.vehicle-invoices-title[b-4ld3xhja6v] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.vehicle-invoices-count[b-4ld3xhja6v] {
    color: var(--muted-foreground);
    font-weight: 500;
}

.vehicle-invoices-list[b-4ld3xhja6v] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* /Features/Vehicles/Components/VehicleDetails/VehicleJobCard.razor.rz.scp.css */
.vehicle-job-card[b-0qkr7kvksz] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--card-radius, var(--radius, 0.625rem));
    color: inherit;
    text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.vehicle-job-card:active[b-0qkr7kvksz] {
    background: var(--accent);
}

@media (hover: hover) {
    .vehicle-job-card:hover[b-0qkr7kvksz] {
        background: var(--accent);
    }
}

.vehicle-job-card-icon[b-0qkr7kvksz] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
    color: var(--primary);
}

.vehicle-job-card-body[b-0qkr7kvksz] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.vehicle-job-card-head[b-0qkr7kvksz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vehicle-job-card-number[b-0qkr7kvksz] {
    font-weight: 600;
}

.vehicle-job-card-line[b-0qkr7kvksz] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vehicle-job-card-muted[b-0qkr7kvksz] {
    color: var(--muted-foreground);
}

.vehicle-job-card-meta[b-0qkr7kvksz] {
    font-size: var(--text-sm);
}

.vehicle-job-card-amount[b-0qkr7kvksz] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.vehicle-job-card-owing[b-0qkr7kvksz] {
    color: var(--destructive);
    font-weight: 600;
}

.vehicle-job-card-paid[b-0qkr7kvksz] {
    color: var(--success);
    font-weight: 600;
}

.vehicle-job-card-due[b-0qkr7kvksz] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}
/* /Features/Vehicles/Components/VehicleDetails/VehicleJobsTab.razor.rz.scp.css */
.vehicle-jobs-tab[b-r1xqlpzxnv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.vehicle-jobs-tab-refreshing[b-r1xqlpzxnv] {
    opacity: 0.6;
}

.vehicle-jobs-header[b-r1xqlpzxnv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.vehicle-jobs-title[b-r1xqlpzxnv] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.vehicle-jobs-count[b-r1xqlpzxnv] {
    color: var(--muted-foreground);
    font-weight: 500;
}

.vehicle-jobs-list[b-r1xqlpzxnv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* /Features/Vehicles/Components/VehicleDetails/VehicleJobsTable.razor.rz.scp.css */
.vehicle-jobs-job-cell[b-z54xeg5whw] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.vehicle-jobs-icon[b-z54xeg5whw] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
    color: var(--primary);
}

.vehicle-jobs-stack[b-z54xeg5whw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    min-width: 0;
    max-width: 100%;
    /* Table cells don't wrap by default; a long title has to. */
    white-space: normal;
}

.vehicle-jobs-wrap[b-z54xeg5whw] {
    white-space: normal;
    overflow-wrap: normal;
}

.vehicle-jobs-inline-status[b-z54xeg5whw] {
    display: none;
}

@container table-container (width <= 480px) {
    .vehicle-jobs-inline-status[b-z54xeg5whw] {
        display: inline-flex;
    }
}

.vehicle-jobs-number[b-z54xeg5whw],
.vehicle-jobs-total[b-z54xeg5whw] {
    font-weight: 600;
}

.vehicle-jobs-title-text[b-z54xeg5whw] {
    overflow-wrap: anywhere;
}

.vehicle-jobs-subtext[b-z54xeg5whw] {
    overflow-wrap: anywhere;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.vehicle-jobs-owing[b-z54xeg5whw] {
    color: var(--destructive);
    font-weight: 600;
}

.vehicle-jobs-paid[b-z54xeg5whw] {
    color: var(--success);
    font-weight: 600;
}

.vehicle-jobs-muted[b-z54xeg5whw] {
    color: var(--muted-foreground);
}
/* /Features/Vehicles/Components/VehicleDetails/VehiclePrimaryAction.razor.rz.scp.css */
/* A full-width row under the owner line; the pending slot is a button tall (2.25 rem) so the card doesn't jump. */
.vehicle-primary-action[b-2gjvz3aavm] {
    margin-top: 0.75rem;
    min-width: 0;
}

.vehicle-primary-action-pending[b-2gjvz3aavm] {
    min-height: 2.25rem;
}
/* /Features/Vehicles/Components/VehicleDetails/VehicleProfileCard.razor.rz.scp.css */
.vehicle-profile-skeleton[b-qiiiiyim37] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vehicle-profile-error[b-qiiiiyim37] {
    margin: 0;
    color: var(--muted-foreground);
}

/* The shared profile header: the icon and the action buttons share the first row, and the title spans the whole card
   (it never sits in a narrow column beside the buttons). The identity wrapper only groups the markup. */
.vehicle-profile-header[b-qiiiiyim37] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    align-items: start;
    gap: 0.375rem 1rem;
}

.vehicle-profile-identity[b-qiiiiyim37] {
    display: contents;
}

.vehicle-profile-icon[b-qiiiiyim37] {
    grid-column: 1;
    grid-row: 1;
}

.vehicle-profile-title[b-qiiiiyim37],
.vehicle-profile-subtitle[b-qiiiiyim37],
.vehicle-profile-high-voltage[b-qiiiiyim37],
.vehicle-profile-owner-row[b-qiiiiyim37] {
    grid-column: 1 / -1;
}

.vehicle-profile-title[b-qiiiiyim37] {
    justify-self: stretch;
}

.vehicle-profile-icon[b-qiiiiyim37] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius, 0.625rem);
    background: var(--accent);
    color: var(--primary);
}

.vehicle-profile-title[b-qiiiiyim37] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.vehicle-profile-title-plate[b-qiiiiyim37] {
    text-transform: uppercase;
}

.vehicle-profile-subtitle[b-qiiiiyim37] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

/* The owner link and Transfer: Transfer wraps under a long name at 360 px. */
.vehicle-profile-owner-row[b-qiiiiyim37] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.125rem;
    margin-top: 0.25rem;
    min-width: 0;
}

.vehicle-profile-owner[b-qiiiiyim37] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

@media (hover: hover) {
    .vehicle-profile-owner:hover[b-qiiiiyim37] {
        text-decoration: underline;
    }
}

.vehicle-profile-transfer[b-qiiiiyim37] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

@media (hover: hover) {
    .vehicle-profile-transfer:hover[b-qiiiiyim37] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.vehicle-profile-actions[b-qiiiiyim37] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
}

/* The copy button is the shared Button's icon size (2.25 rem): the same 2 rem square as the pencil beside it. */
.vehicle-profile-actions[b-qiiiiyim37]  .btn-size-icon {
    width: 2rem;
    height: 2rem;
}

/* Touch (T-25): the 32 px icon buttons get a 44 px hit area, so they sit 12 px apart. */
@media (pointer: coarse) {
    .vehicle-profile-actions[b-qiiiiyim37] {
        gap: 0.75rem;
    }
}

.vehicle-profile-icon-button[b-qiiiiyim37] {
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius, 0.625rem);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .vehicle-profile-icon-button:hover[b-qiiiiyim37] {
        background: var(--accent);
        color: var(--primary);
    }
}

.vehicle-profile-icon-button:active[b-qiiiiyim37] {
    background: var(--pressed);
    color: var(--primary);
}

.vehicle-profile-section[b-qiiiiyim37] {
    margin-top: 1.5rem;
}

.vehicle-profile-section-title[b-qiiiiyim37] {
    margin: 0 0 0.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Below 1024px the card is full width: two columns, label over value, so it stays short on a phone. The rows are
   VehicleProfileField components, which own their layout. */
.vehicle-profile-fields[b-qiiiiyim37] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    margin: 0;
}

/* In the left column: one field per row. */
@media (width >= 1024px) {
    .vehicle-profile-fields[b-qiiiiyim37] {
        grid-template-columns: 1fr;
    }
}

.vehicle-profile-complete[b-qiiiiyim37] {
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    margin-top: 1rem;
    padding: 0.625rem 0.75rem;
    border: 1px dashed var(--border-colour);
    border-radius: var(--radius, 0.625rem);
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .vehicle-profile-complete:hover[b-qiiiiyim37] {
        background: var(--accent);
        color: var(--primary);
    }
}

.vehicle-profile-complete:active[b-qiiiiyim37] {
    background: var(--pressed);
    color: var(--primary);
}

.vehicle-profile-since[b-qiiiiyim37] {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border-colour);
    color: var(--muted-foreground);
    font-size: var(--text-xs);
}

.vehicle-profile-pinned-note[b-qiiiiyim37] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 1.25rem;
}

.vehicle-profile-all-notes[b-qiiiiyim37] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: var(--text-xs);
    text-decoration: underline;
    cursor: pointer;
}

@media (hover: hover) {
    .vehicle-profile-all-notes:hover[b-qiiiiyim37] {
        color: var(--primary);
    }
}
/* /Features/Vehicles/Components/VehicleDetails/VehicleProfileField.razor.rz.scp.css */
.vehicle-profile-field[b-zazn82mdca] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    min-width: 0;
    margin-inline: -0.5rem;
    padding: 0.75rem 0.5rem;
    border-top: 1px solid var(--border-colour);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.vehicle-profile-field:focus-visible[b-zazn82mdca] {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

@media (hover: hover) {
    .vehicle-profile-field:hover[b-zazn82mdca] {
        background: var(--accent);
    }
}

.vehicle-profile-field:active[b-zazn82mdca] {
    background: var(--pressed);
}

.vehicle-profile-field-wide[b-zazn82mdca] {
    grid-column: 1 / -1;
}

.vehicle-profile-field dt[b-zazn82mdca] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.vehicle-profile-field dd[b-zazn82mdca] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.vehicle-profile-field-mono dd[b-zazn82mdca] {
    font-family: ui-monospace, monospace;
    letter-spacing: 0.04em;
}

.vehicle-profile-field-copy[b-zazn82mdca] {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--muted-foreground);
    opacity: 0;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.vehicle-profile-field:focus-visible .vehicle-profile-field-copy[b-zazn82mdca] {
    opacity: 1;
}

@media (hover: hover) {
    .vehicle-profile-field:hover .vehicle-profile-field-copy[b-zazn82mdca] {
        opacity: 1;
    }
}

/* No hover on touch screens, so the icon stays faintly visible. */
@media (hover: none) {
    .vehicle-profile-field-copy[b-zazn82mdca] {
        opacity: 0.6;
    }
}

/* In the left column: label left, value right, one field per row. */
@media (width >= 1024px) {
    .vehicle-profile-field[b-zazn82mdca] {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
    }

    .vehicle-profile-field dd[b-zazn82mdca] {
        justify-content: flex-end;
        text-align: end;
    }
}

/* The moment after a copy (1.2 s): the check shows whatever the hover and the touch rules say. */
.vehicle-profile-field .vehicle-profile-field-copied[b-zazn82mdca] {
    color: var(--success);
    opacity: 1;
}
/* /Features/Vehicles/Components/VehicleDetails/VehicleSummaryTab.razor.rz.scp.css */
.vehicle-summary-tab[b-tg7asxw8wh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.vehicle-summary-tab-refreshing[b-tg7asxw8wh] {
    opacity: 0.6;
}

/* Only rendered on desktop; mobile gets the compact Overview card instead. */
.vehicle-summary-stat-row[b-tg7asxw8wh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vehicle-summary-muted[b-tg7asxw8wh] {
    color: var(--muted-foreground);
}

.vehicle-summary-overview-content[b-tg7asxw8wh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.vehicle-summary-overview-row[b-tg7asxw8wh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.vehicle-summary-overview-button[b-tg7asxw8wh] {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.vehicle-summary-overview-label[b-tg7asxw8wh] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.vehicle-summary-overview-value[b-tg7asxw8wh] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    font-size: 1.125rem;
}

.vehicle-summary-overview-value-warning[b-tg7asxw8wh] {
    color: var(--destructive);
}

.vehicle-summary-job[b-tg7asxw8wh] {
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
    .vehicle-summary-job:hover[b-tg7asxw8wh] {
        background: var(--accent);
    }
}

.vehicle-summary-job:active[b-tg7asxw8wh] {
    background: var(--pressed);
}

.vehicle-summary-job-text[b-tg7asxw8wh] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.vehicle-summary-job-heading[b-tg7asxw8wh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.vehicle-summary-job-number[b-tg7asxw8wh] {
    font-weight: 700;
}

.vehicle-summary-job-date[b-tg7asxw8wh] {
    font-size: var(--text-sm);
}

.vehicle-summary-job[b-tg7asxw8wh]  .vehicle-summary-job-chevron {
    flex: 0 0 auto;
    color: var(--muted-foreground);
}

.vehicle-summary-no-jobs[b-tg7asxw8wh],
.vehicle-summary-no-inspections[b-tg7asxw8wh] {
    margin: 0;
}

.vehicle-summary-quick-actions[b-tg7asxw8wh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.vehicle-summary-quick-actions[b-tg7asxw8wh]  .btn {
    width: 100%;
}

@media (width <= 480px) {
    .vehicle-summary-quick-actions[b-tg7asxw8wh] {
        grid-template-columns: 1fr;
    }
}

.vehicle-summary-inspection[b-tg7asxw8wh] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.vehicle-summary-inspection-heading[b-tg7asxw8wh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
}

.vehicle-summary-inspection-name[b-tg7asxw8wh] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.vehicle-summary-inspection-actions[b-tg7asxw8wh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* /Features/Vehicles/Components/VehicleDueBadges.razor.rz.scp.css */
.vehicle-due-badges[b-6i5utzegyt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.vehicle-due-badges-spaced[b-6i5utzegyt] {
    margin-top: 0.75rem;
}

/* A long check name (a shop's own, up to 40 characters) wraps inside its badge instead of pushing past a 360 px card. */
.vehicle-due-badges[b-6i5utzegyt]  .badge {
    max-width: 100%;
    white-space: normal;
    text-align: left;
}
/* /Features/Vehicles/Components/VehiclePlate.razor.rz.scp.css */
.vehicle-plate[b-sawcr2krif] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--border-colour);
    border-radius: 0.375rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* A plate is never broken: layouts give it its width. Only when a place truly has less than a plate needs does it
       end in an ellipsis (the title holds the whole plate) rather than spill out. */
    max-width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.vehicle-plate-missing[b-sawcr2krif] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}
/* /Features/Vehicles/Components/VehiclesTable.razor.rz.scp.css */
.vehicles-table-scope[b-9x3k8gdsxr] {
    display: contents;
}

.vehicles-table-scope[b-9x3k8gdsxr]  .vehicles-table-center {
    text-align: center;
}

.vehicles-table-muted[b-9x3k8gdsxr] {
    color: var(--muted-foreground);
}

.vehicles-table-customer[b-9x3k8gdsxr] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.vehicles-table-customer a[b-9x3k8gdsxr] {
    color: var(--primary);
    text-decoration: none;
}

@media (hover: hover) {
    .vehicles-table-customer a:hover[b-9x3k8gdsxr] {
        text-decoration: underline;
    }
}

.vehicles-table-actions[b-9x3k8gdsxr] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
}

.vehicles-table-year[b-9x3k8gdsxr] {
    margin-inline-start: 0.25rem;
}

.vehicles-table-scope[b-9x3k8gdsxr]  .vehicles-table-due {
    margin-top: 0.25rem;
}
/* /Features/Vehicles/Modals/SetVehicleDueItemModal.razor.rz.scp.css */
.set-due-body[b-0q4d40bckn] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.set-due-loading[b-0q4d40bckn] {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

.set-due-intro[b-0q4d40bckn],
.set-due-muted[b-0q4d40bckn] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.set-due-fields[b-0q4d40bckn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (width <= 480px) {
    .set-due-fields[b-0q4d40bckn] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Vehicles/Modals/TransferVehicleModal.razor.rz.scp.css */
.transfer-vehicle-question[b-sy7a62d7ar] {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.transfer-vehicle-notes[b-sy7a62d7ar] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
    margin: 0;
    padding-left: calc(var(--spacing) * 5);
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}
/* /Features/Vehicles/Modals/VehicleDueReminderModal.razor.rz.scp.css */
.due-reminder-loading[b-vbqcf7jpqh] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.due-reminder-body[b-vbqcf7jpqh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.due-reminder-recipient[b-vbqcf7jpqh] {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.due-reminder-already[b-vbqcf7jpqh] {
    display: block;
}

.due-reminder-share[b-vbqcf7jpqh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* /Features/Vehicles/Modals/VinDecodeReplaceModal.razor.rz.scp.css */
.vin-decode-replace[b-g299ju1d1w] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
}

.vin-decode-replace-body[b-g299ju1d1w],
.vin-decode-replace-note[b-g299ju1d1w] {
    margin: 0;
}

.vin-decode-replace-note[b-g299ju1d1w] {
    color: var(--muted-foreground);
    font-size: var(--text-sm);
}

.vin-decode-replace-list[b-g299ju1d1w] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vin-decode-replace-row[b-g299ju1d1w] {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr;
    gap: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
    align-items: baseline;
    min-width: 0;
}

.vin-decode-replace-label[b-g299ju1d1w] {
    font-weight: 500;
    font-size: var(--text-sm);
}

.vin-decode-replace-values[b-g299ju1d1w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
    min-width: 0;
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.vin-decode-replace-current[b-g299ju1d1w] {
    color: var(--muted-foreground);
    text-decoration: line-through;
}

.vin-decode-replace-decoded[b-g299ju1d1w] {
    font-weight: 600;
}

.vin-decode-replace-arrow[b-g299ju1d1w] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--muted-foreground);
}

@media (width <= 480px) {
    .vin-decode-replace-row[b-g299ju1d1w] {
        grid-template-columns: 1fr;
    }
}
/* /Features/Vehicles/Pages/Vehicles.razor.rz.scp.css */
.vehicles-page-content[b-zxaa12ieop] {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

[b-zxaa12ieop] .vehicles-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.vehicles-search-row[b-zxaa12ieop] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width >= 769px) and (not ((pointer: coarse) and (height < 500px))) {
    .vehicles-search-row[b-zxaa12ieop] {
        flex: 1 1 16rem;
    }
}

[b-zxaa12ieop] .vehicles-search-input {
    flex: 1 1 auto;
    min-width: 0;
}

[b-zxaa12ieop] .vehicles-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.vehicles-filter-clear[b-zxaa12ieop] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: 1;
    cursor: pointer;
}

[b-zxaa12ieop] .vehicles-create-button {
    flex: 0 0 auto;
}

[b-zxaa12ieop] .vehicles-list-content {
    transition: opacity var(--motion-fast) var(--ease-out);
}

[b-zxaa12ieop] .vehicles-list-content.is-refreshing {
    opacity: 0.6;
    /* Dims only if the reload takes longer than 150 ms, so a quick refresh never blinks. */
    transition: opacity var(--motion-fast) var(--ease-out) 150ms;
    pointer-events: none;
}

.vehicles-card-list[b-zxaa12ieop] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    [b-zxaa12ieop] .vehicles-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    [b-zxaa12ieop] .vehicles-create-button {
        width: 100%;
    }

    .vehicles-search-row[b-zxaa12ieop] {
        flex: 0 0 auto;
        width: 100%;
    }
}

.vehicles-empty-actions[b-zxaa12ieop] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

/* The filter chip (S1w, T-7). On the phone layout (viewport.js, T-119) the search keeps the full width and the "Filtrado por …"
   chip goes on its own row under it, its label wrapping inside the chip with the ✕ at the end (B2). The same shape on every
   list page with a chip. */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .vehicles-search-row[b-zxaa12ieop] {
        flex-wrap: wrap;
    }

    .vehicles-search-row[b-zxaa12ieop]  .vehicles-search-input {
        flex: 1 1 100%;
    }

    .vehicles-search-row[b-zxaa12ieop]  .vehicles-filter-badge {
        flex: 0 1 auto;
        max-width: 100%;
        white-space: normal;
    }
}

/* The chip's ✕ is a small text button: a 44 px tap area on touch without making the chip taller. */
@media (pointer: coarse) {
    .vehicles-filter-clear[b-zxaa12ieop] {
        position: relative;
    }

    .vehicles-filter-clear[b-zxaa12ieop]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2.75rem;
        height: 2.75rem;
        transform: translate(-50%, -50%);
    }
}
/* /Features/Vehicles/Pages/VehiclesDetails.razor.rz.scp.css */
.vehicle-details-content[b-ev543f45z6] {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

.vehicle-details-back-link[b-ev543f45z6] {
    align-self: flex-start;
    font-size: var(--text-sm);
    color: var(--muted-foreground);
    text-decoration: none;
}

@media (hover: hover) {
    .vehicle-details-back-link:hover[b-ev543f45z6] {
        color: var(--primary);
        text-decoration: underline;
    }
}

.vehicle-details-layout[b-ev543f45z6] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.vehicle-details-profile[b-ev543f45z6] {
    min-width: 0;
}

.vehicle-details-command-center[b-ev543f45z6] {
    min-width: 0;
}

/* A link to a tab scrolls the tab card to the top on a phone: under the app's sticky top row, with a little air. */
/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width < 768px), ((pointer: coarse) and (height < 500px)) {
    .vehicle-details-command-center[b-ev543f45z6] {
        scroll-margin-top: calc(var(--sticky-offset, 0px) + 0.5rem);
    }
}

[b-ev543f45z6] .vehicle-details-tabs-list {
    flex-wrap: nowrap;
}

[b-ev543f45z6] .vehicle-details-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    color: var(--muted-foreground);
}

.vehicle-details-not-found-title[b-ev543f45z6] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
}

.vehicle-details-not-found-text[b-ev543f45z6] {
    margin: 0 0 0.5rem;
}

/* Two columns: the page scrolls as a whole. The profile sticks under the top bar, and so does the top of the
   command center card (CardStickyHeader), on the same line as the profile's top edge. */
@media (width >= 1024px) {
    .vehicle-details-layout[b-ev543f45z6] {
        grid-template-columns: minmax(18rem, 22rem) 1fr;
    }

    .vehicle-details-profile[b-ev543f45z6] {
        position: sticky;
        top: calc(var(--sticky-offset) + 0.75rem);
        align-self: start;
        /* A profile taller than the window scrolls on its own instead of hiding its bottom. Two things are kept free
           below it, so its scrolled-to-the-end bottom (the form's buttons) is never under the footer's fade: the footer
           (4 rem, MainLayout) and the distance the profile starts below where it sticks at the top of the page (the back
           link and the gaps above the grid: scroll.js measures it into --sticky-lead; 3 rem until it has). */
        max-height: calc(100dvh - var(--sticky-offset) - 1.5rem - var(--sticky-lead, 3rem) - 4rem);
        overflow-y: auto;
    }
}
/* /Layout/AuthenticationLayout.razor.rz.scp.css */
.auth-page[b-4hezao7tn6] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--off-white);
    padding: 2rem 1rem;
}

.auth-shell[b-4hezao7tn6] {
    margin: auto;
    width: 100%;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.auth-brand[b-4hezao7tn6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.25rem;
}

.auth-main[b-4hezao7tn6] {
    width: 100%;
}

.auth-footer[b-4hezao7tn6] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    text-align: center;
}
/* /Layout/AuthenticationSplitLayout.razor.rz.scp.css */
.auth-split[b-vt2bkr29ou] {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background-color: var(--primary-foreground);
}

.auth-split-form[b-vt2bkr29ou] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem 1rem;
    min-width: 0;
}

.auth-split-brand[b-vt2bkr29ou] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.25rem;
}

.auth-split-body[b-vt2bkr29ou] {
    width: 100%;
    max-width: 28rem;
    margin: auto; /* centres vertically but still scrolls when the phone keyboard is open */
}

.auth-split-footer[b-vt2bkr29ou] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    text-align: center;
}

/* Hidden on phones: a display:none loading="lazy" image is never downloaded. */
.auth-split-hero[b-vt2bkr29ou] {
    display: none;
}

@media (width >= 64rem) {
    .auth-split[b-vt2bkr29ou] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .auth-split-form[b-vt2bkr29ou] {
        padding: 2rem 3rem;
    }

    .auth-split-footer[b-vt2bkr29ou] {
        text-align: left;
    }

    .auth-split-hero[b-vt2bkr29ou] {
        display: block;
        position: sticky;
        top: 0;
        align-self: start;
        height: 100dvh;
        padding: 1rem;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-4oygzy01zc] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100dvh;
}

main[b-4oygzy01zc] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.main-container[b-4oygzy01zc] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    container-type: inline-size;
}

/* Full-height wrapper inside the scrolling <main>: it is as tall as all the content, so the sticky footer has a
   containing block to travel through (main's own box is only as tall as the visible area). */
.main-content[b-4oygzy01zc] {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-width: 0;
}

/* Pinned to the bottom of the scroll area and overlapping the last rows, so content fades out under it
   instead of being cut off. The article's bottom padding keeps the final content clear of it. */
footer[b-4oygzy01zc] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 4rem;
    margin-top: -4rem;
    padding: 0 1.5rem 0.75rem;
    box-sizing: border-box;
    font-size: 0.7rem;
    color: var(--footer-foreground);
    pointer-events: none;
    /* Solid page colour from 60 % down, so the text line (in the bottom third) always sits on the page colour. */
    background: linear-gradient(to bottom,
        transparent 0%,
        color-mix(in srgb, var(--page-background) 85%, transparent) 35%,
        var(--page-background) 60%);
}

article[b-4oygzy01zc] {
    flex: 1 0 auto;
    padding-bottom: 4rem;
}

.sidebar[b-4oygzy01zc] {
    border-right: 1px solid var(--border-colour);
    background-color: white;
    min-width: 0;
}

.top-row[b-4oygzy01zc] {
    background-color: white;
    border-bottom: 1px solid var(--border-colour);
    min-height: var(--top-row-height);
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
}

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

@media (hover: hover) {
    .top-row[b-4oygzy01zc]  a:hover, .top-row[b-4oygzy01zc]  .btn-link:hover {
        text-decoration: underline;
    }
}

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

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .top-row[b-4oygzy01zc] {
        justify-content: space-between;
        padding: 0 1rem 0 1rem;
    }

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

    article[b-4oygzy01zc] {
        padding: 1rem 1rem 4rem 1rem;
    }

    footer[b-4oygzy01zc] {
        padding-bottom: 0.375rem;
    }

    .sidebar[b-4oygzy01zc] {
        /* Over the page and the backdrop (45): only the phone's navigation sheet needs it. On desktop the sidebar is a
           flex column beside the page, and the page's popovers must not slide under it. */
        z-index: 60;
        position: fixed;
        inset: auto 0 0;
        width: 100%;
        max-height: min(78dvh, 42rem);
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--border-colour);
        border-top-right-radius: var(--card-radius);
        border-top-left-radius: var(--card-radius);
        overflow: hidden;
        box-shadow: 0 -8px 24px rgb(0 0 0 / 0.08);
    }

    /* The sheet moves its own height, so it opens on the spatial tier and leaves at the micro tier with ease-in (a
       transition is taken from the state being entered, so each rule carries its own). `visibility` keeps the same
       duration, so the sheet stays visible while it leaves. */
    .sidebar[b-4oygzy01zc] {
        transition: transform var(--motion-spatial) var(--ease-out), opacity var(--motion-spatial) var(--ease-out), visibility var(--motion-spatial) var(--ease-out);
    }

    .sidebar-hide[b-4oygzy01zc] {
        transition: transform var(--motion-fast) var(--ease-in), opacity var(--motion-fast) var(--ease-in), visibility var(--motion-fast) var(--ease-in);
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
        visibility: hidden;
    }
}

/* A touch screen (S1w, T-33): the © line is static, at the end of the content. A footer that overlaps the last rows with
   a fade covers a field the keyboard scrolled to the page's bottom (landscape, L-15) and the last card's pager. A mouse
   keeps the fading sticky footer above. Declared after the phone layout's article padding so it wins. */
@media (pointer: coarse) {
    footer[b-4oygzy01zc] {
        position: static;
        height: auto;
        margin-top: 0;
        padding: 0 1rem 0.75rem;
        background: none;
    }

    article[b-4oygzy01zc] {
        padding-bottom: 1rem;
    }
}

/* Above the top bar (z-index 40, and the menus opened from it), below the navigation sheet (60): while the sheet is open
   nothing in the top bar can be used or open on top of it. */
.sidebar-backdrop[b-4oygzy01zc] {
    position: fixed;
    inset: 0;
    z-index: 45;
    background-color: rgb(0 0 0 / 0.18);
    opacity: 1;
    transition: opacity var(--motion-spatial) var(--ease-out), visibility var(--motion-spatial) var(--ease-out);
}

.sidebar-backdrop-hide[b-4oygzy01zc] {
    transition: opacity var(--motion-fast) var(--ease-in), visibility var(--motion-fast) var(--ease-in);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* The bell and the user menu, side by side at the row's end (both layouts). */
.top-row-end[b-4oygzy01zc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
}

/* Sticky like the desktop row, so the menu button (its first control) is on screen wherever the page is scrolled. The
   row is exactly --top-row-height tall (the 2.75 rem search button plus the padding fit inside its min-height), which
   is what --sticky-offset (app.css) offsets the sticky elements below it by. */
.mobile-top-row[b-4oygzy01zc] {
    position: sticky;
    top: 0;
    padding-block: 0.5rem;
    gap: 0.5rem;
    display: grid;
    z-index: 40;
    /* Five 44 px buttons (T-18): the menu and the bolt at the start, the search, the bell and the user menu at the end;
       the first column takes the free width, so the search sits where it always did. */
    grid-template-columns: minmax(0, 1fr) auto auto;
}

/* A page field's keyboard in a short area (a phone in landscape, ~96 px above the keyboard; scripts/scroll.js
   followPageFields sets the class): the bar scrolls away with the page so the field has the room, as Chrome's own pan used
   to put it off screen. */
:root.page-keyboard-compact .mobile-top-row[b-4oygzy01zc] {
    position: relative;
}

/* The phone's first column: the menu button, then Quick Actions' bolt. */
.top-row-start[b-4oygzy01zc] {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* The top bar's icon-only menu triggers (Quick Actions, the user menu): 44 px, a 20 px icon. DropdownMenu's own trigger
   (36 px, a 16 px icon) is scoped to it, so these rules reach it through the row, a raw element of this file. */
.mobile-top-row[b-4oygzy01zc]  .top-bar-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
}

.mobile-top-row[b-4oygzy01zc]  .top-bar-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

@media (width >= 769px) and (not ((pointer: coarse) and (height < 500px))) {
    .page[b-4oygzy01zc] {
        flex-direction: row;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    main[b-4oygzy01zc] {
        min-height: 0;
        overflow-x: clip;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .sidebar[b-4oygzy01zc] {
        flex: 0 0 clamp(12rem, 20vw, 15.625rem);
        height: 100%;
        overflow: hidden;
    }

    .sidebar-hide[b-4oygzy01zc] {
        display: block !important;
    }

    .top-row[b-4oygzy01zc] {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .desktop-top-row[b-4oygzy01zc] {
        display: grid;
        grid-template-columns: max-content minmax(0, 34rem) max-content;
        gap: clamp(0.5rem, 2vw, 1.5rem);
        justify-content: space-between;
    }

    .desktop-top-row[b-4oygzy01zc]  .component-container {
        width: 100%;
        min-width: 0;
    }

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

    .top-row[b-4oygzy01zc], article[b-4oygzy01zc] {
        padding-left: clamp(1rem, 3vw, 2rem) !important;
        padding-right: clamp(1rem, 3vw, 1.5rem) !important;
    }

    .sidebar-backdrop[b-4oygzy01zc] {
        display: none;
        opacity: 0;
        pointer-events: none;
    }
}

/* Compact rail between the phone layout and the full sidebar: more room for the content. */
@media (width >= 769px) and (width <= 961px) and (not ((pointer: coarse) and (height < 500px))) {
    .sidebar[b-4oygzy01zc] {
        flex-basis: 6rem;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-zw1cftha60] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-items[b-zw1cftha60] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.top-row[b-zw1cftha60] {
    background-color: white;
    min-height: 4rem;
    border-bottom: 1px solid var(--border-colour);
    display: flex;
    align-items: center;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
}

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

a[b-zw1cftha60] {
    color: inherit;
    text-decoration: none;
}

.text-container[b-zw1cftha60] {
    all: unset;
    font-weight: 600;
    font-size: 1.2rem;
    padding-inline-start: 0.5rem;
}

.nav-item[b-zw1cftha60]  a {
    text-decoration: none;
}

.nav-link-text[b-zw1cftha60] {
    padding-inline-start: 0.5rem;
    font-weight: 600;
}

.nav-item[b-zw1cftha60] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.nav-link-content[b-zw1cftha60] {
    display: flex;
    align-items: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.bottom-items[b-zw1cftha60] {
    border-top: 1px solid var(--border-colour);
}

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

.bi-house-door-fill-nav-menu[b-zw1cftha60] {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWhvbWUiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNNSAxMmwtMiAwbDkgLTlsOSA5bC0yIDAiIC8+PHBhdGggZD0iTTUgMTJ2N2EyIDIgMCAwIDAgMiAyaDEwYTIgMiAwIDAgMCAyIC0ydi03IiAvPjxwYXRoIGQ9Ik05IDIxdi02YTIgMiAwIDAgMSAyIC0yaDJhMiAyIDAgMCAxIDIgMnY2IiAvPjwvc3ZnPg==");
}

.bi-plus-square-fill-nav-menu[b-zw1cftha60] {
    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-zw1cftha60] {
    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:first-of-type[b-zw1cftha60] {
        padding-top: 1rem;
    }

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

    .nav-item[b-zw1cftha60]  a {
        color: #d7d7d7;
        border-radius: calc(var(--radius) - 2px);
        height: 2rem;
        display: flex;
        align-items: center;
    }

.nav-item[b-zw1cftha60]  a.active {
    background-color: black;
    color: white;
}

.nav-item[b-zw1cftha60]  a {
    background-color: white;
    color: black;
}

@media (hover: hover) {
    .nav-item[b-zw1cftha60]  a:hover {
        background-color: var(--off-white);
    }

    .nav-item[b-zw1cftha60]  a.active:hover {
        background-color: var(--active-hover);
    }
}

/* Pressed (S1t.1): the active item is black, so its pressed tint is the lighter --active-hover. */
.nav-item[b-zw1cftha60]  a {
    -webkit-tap-highlight-color: transparent;
}

.nav-item[b-zw1cftha60]  a:active {
    background-color: var(--pressed);
}

.nav-item[b-zw1cftha60]  a.active:active {
    background-color: var(--active-hover);
}

/* Rows: the ring is drawn inside, so the scrolling menu column never clips it; on the black active item it is white. */
.nav-item[b-zw1cftha60]  a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-inset);
}

.nav-item[b-zw1cftha60]  a.active:focus-visible {
    box-shadow: inset 0 0 0 2px var(--primary-foreground);
}

.nav[b-zw1cftha60] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 4rem - 1px);
}

.nav-scrollable[b-zw1cftha60] {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The phone layout (viewport.js, T-119): a width at or under 768px, or a touch screen under 500px tall (a phone in landscape). */
@media (width <= 768px), ((pointer: coarse) and (height < 500px)) {
    .nav[b-zw1cftha60] {
        height: auto;
        min-height: min-content;
    }

    /* T-28: every row is a 44 px target and the rows touch (the padding that used to sit between them is inside the link). */
    .top-items[b-zw1cftha60] {
        gap: 0;
    }

    .nav-item[b-zw1cftha60] {
        padding-bottom: 0;
    }

    .nav-item[b-zw1cftha60]  a {
        height: auto;
        min-height: 2.75rem;
    }

    /* The sheet's close button: 44 x 44, the sheet's own ✕ (a named button, not a clickable div). */
    .nav-close-button[b-zw1cftha60] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border: 0;
        border-radius: var(--radius);
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .top-row[b-zw1cftha60] {
        justify-content: space-between;
    }

    .nav-scrollable[b-zw1cftha60] {
        flex: 1 1 auto;
    }
}

@media (width >= 769px) and (not ((pointer: coarse) and (height < 500px))) {
    .navbar-toggler[b-zw1cftha60] {
        display: none;
    }

    .collapse[b-zw1cftha60] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-zw1cftha60] {
        /* The sidebar remains fixed while only its menu scrolls. */
        height: calc(100vh - 4rem - 1px);
    }
}


/* Compact rail (768px to the full sidebar): logo only, labels under the icons. */
@media (width >= 769px) and (width <= 961px) and (not ((pointer: coarse) and (height < 500px))) {
    .top-row[b-zw1cftha60] {
        justify-content: center;
        padding-inline: 0;
    }

    .text-container[b-zw1cftha60] {
        display: none;
    }

    .nav-item[b-zw1cftha60] {
        padding-inline: 0.375rem;
    }

    .nav-item[b-zw1cftha60]  a {
        height: auto;
        padding-block: 0.5rem;
    }

    .nav-link-content[b-zw1cftha60] {
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem;
        width: 100%;
        padding-inline: 0;
        text-align: center;
    }

    .nav-link-text[b-zw1cftha60] {
        padding-inline-start: 0;
        font-size: 0.65rem;
        line-height: 1.1;
        overflow-wrap: anywhere;
    }
}