/* /Components/Account/ApprovalPinSetting.razor.rz.scp.css */
/* The row on the account page: the same shape as two-step sign-in above it. */
.approval-pin[b-3nr5eiwjag] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.text[b-3nr5eiwjag] {
    display: grid;
    gap: 2px;
    flex: 1 1 260px;
    min-width: 0;
}

.title[b-3nr5eiwjag] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.actions[b-3nr5eiwjag] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pin-form[b-3nr5eiwjag] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
/* /Components/Account/ChangePasswordPage.razor.rz.scp.css */
.account-form[b-6vh3qjsm7a] {
    display: grid;
    gap: 18px;
}

.account-form[b-6vh3qjsm7a]  .form-stack {
    display: grid;
    gap: 16px;
}

.heading[b-6vh3qjsm7a] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.heading h1[b-6vh3qjsm7a],
.finished h1[b-6vh3qjsm7a] {
    margin: 0;
    font-size: 24px;
}

.heading p[b-6vh3qjsm7a],
.finished p[b-6vh3qjsm7a] {
    margin: 6px 0 0;
    color: var(--muted);
}

.field[b-6vh3qjsm7a] {
    display: grid;
    gap: 8px;
}

.field label[b-6vh3qjsm7a] {
    font-size: 13px;
    font-weight: 500;
}

.field[b-6vh3qjsm7a]  input {
    min-height: 44px;
    font-size: 15px;
}

.password-field[b-6vh3qjsm7a] {
    position: relative;
}

.password-field[b-6vh3qjsm7a]  input {
    padding-right: 46px;
}

.reveal[b-6vh3qjsm7a] {
    position: absolute;
    right: 4px;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.reveal:hover[b-6vh3qjsm7a] {
    background: var(--surface-2);
    color: var(--text);
}

.reveal[b-6vh3qjsm7a]  .fa-eye-slash,
.reveal[aria-pressed="true"][b-6vh3qjsm7a]  .fa-eye {
    display: none;
}

.reveal[aria-pressed="true"][b-6vh3qjsm7a]  .fa-eye-slash {
    display: inline-block;
}

.caps[b-6vh3qjsm7a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--status-waiting);
    font-size: 12px;
    font-weight: 600;
}

.match[b-6vh3qjsm7a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
    color: var(--muted);
    font-size: 12px;
}

.match.met[b-6vh3qjsm7a] {
    color: var(--status-done);
    font-weight: 500;
}

.links[b-6vh3qjsm7a] {
    display: flex;
    justify-content: center;
    font-size: 13px;
}

.links a[b-6vh3qjsm7a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.finished[b-6vh3qjsm7a] {
    display: grid;
    justify-items: center;
    text-align: center;
}

.tick[b-6vh3qjsm7a] {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--status-done-soft);
    color: var(--status-done);
    font-size: 34px;
    animation: tick-in-b-6vh3qjsm7a 0.5s var(--ease-spring);
}

@keyframes tick-in-b-6vh3qjsm7a {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
}

@media (max-width: 599px) {
    .field[b-6vh3qjsm7a]  input {
        font-size: 16px;
    }
}
/* /Components/Account/ChooseStorePage.razor.rz.scp.css */
.choose[b-6hb0cw9o51] {
    display: grid;
    gap: 18px;
}

.heading h1[b-6hb0cw9o51] {
    margin: 0;
    font-size: 24px;
}

.heading p[b-6hb0cw9o51] {
    margin: 6px 0 0;
    color: var(--muted);
}

kbd[b-6hb0cw9o51] {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--surface);
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.stores[b-6hb0cw9o51] {
    display: grid;
    gap: 10px;
}

.stores form[b-6hb0cw9o51] {
    animation: fade-up 0.4s var(--ease-out) backwards;
    animation-delay: calc(var(--order, 0) * 70ms);
}

/* Each store is one big card to tap. */
.store-option[b-6hb0cw9o51] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 72px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s var(--ease-out), opacity 0.3s, background-color 0.2s;
}

.store-option:hover[b-6hb0cw9o51],
.store-option:focus-visible[b-6hb0cw9o51] {
    border-color: var(--accent-fill);
    box-shadow: var(--lift-shadow);
    transform: translateY(-2px);
}

.store-option:hover .store-code[b-6hb0cw9o51] {
    animation: bounce 0.5s var(--ease-spring);
}

.store-code[b-6hb0cw9o51] {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 14px;
    font-weight: 800;
}

.store-text[b-6hb0cw9o51] {
    flex: 1;
    display: grid;
    min-width: 0;
    line-height: 1.35;
}

.store-text b[b-6hb0cw9o51] {
    font-size: 15px;
}

.store-text span[b-6hb0cw9o51] {
    color: var(--muted);
    font-size: 13px;
}

.store-meta[b-6hb0cw9o51] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

/* Picking a store says so on the card itself, and the others step back. */
.opening[b-6hb0cw9o51] {
    display: none;
    align-items: center;
    gap: 8px;
    flex: none;
    color: var(--accent-soft-fg);
    font-size: 13px;
    font-weight: 600;
}

.opening[b-6hb0cw9o51]  i {
    animation: spin 0.8s linear infinite;
}

.store-option.going[b-6hb0cw9o51] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
}

.store-option.going .store-meta[b-6hb0cw9o51] {
    display: none;
}

.store-option.going .opening[b-6hb0cw9o51] {
    display: inline-flex;
}

.stores.leaving .store-option:not(.going)[b-6hb0cw9o51] {
    opacity: 0.35;
}

.platform[b-6hb0cw9o51] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

.platform[b-6hb0cw9o51]  .icon-tile {
    background: var(--surface);
}

.platform p[b-6hb0cw9o51] {
    margin: 2px 0 0;
    font-size: 13px;
    opacity: 0.9;
}

.go[b-6hb0cw9o51]  i {
    transition: transform 0.2s var(--ease-spring);
}

.go:hover[b-6hb0cw9o51]  i {
    transform: translateX(3px);
}

.out[b-6hb0cw9o51] {
    justify-self: center;
}

.out .link-button[b-6hb0cw9o51] {
    font-size: 13px;
}

@media (max-width: 480px) {
    .store-option[b-6hb0cw9o51] {
        gap: 12px;
        padding: 12px;
    }

    .key[b-6hb0cw9o51] {
        display: none;
    }
}

/* Keyboard shortcuts mean nothing on a touch screen. */
@media (pointer: coarse), (max-width: 480px) {
    .shortcut[b-6hb0cw9o51],
    .key[b-6hb0cw9o51] {
        display: none;
    }
}

.keys[b-6hb0cw9o51] {
    white-space: nowrap;
}

/* How busy the store is: open service orders, and those assigned to you. */
.store-text .busy[b-6hb0cw9o51] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
}

.busy[b-6hb0cw9o51]  i {
    color: var(--muted);
    font-size: 11px;
}

/* The store chosen last time sits first. */
.store-option.last[b-6hb0cw9o51] {
    border-color: color-mix(in srgb, var(--accent-fill) 45%, var(--border));
}

.notice[b-6hb0cw9o51] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
    font-size: 13px;
    font-weight: 500;
    animation: fade-up 0.25s var(--ease-out);
}

.notice[b-6hb0cw9o51]  i {
    margin-top: 3px;
}

@media (max-width: 480px) {
    .store-meta[b-6hb0cw9o51]  .pill {
        display: none;
    }
}
/* /Components/Account/CodeInput.razor.rz.scp.css */
/* Six boxes, one field over them. The field's digits are spaced to land in the middle of each box:
   a monospaced digit is 1ch wide, so the spacing is the box pitch less 1ch. */
.code-boxes[b-qb6gvyt0u3] {
    --box: 48px;
    --space: 9px;
    --pitch: calc(var(--box) + var(--space));
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, var(--box));
    gap: var(--space);
    justify-content: center;
    width: calc(6 * var(--box) + 5 * var(--space));
    max-width: 100%;
    height: 58px;
    margin: 0 auto;
    overflow: hidden;
}

.box[b-qb6gvyt0u3] {
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.2s;
}

.code-input[b-qb6gvyt0u3] {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(100% + var(--pitch));
    height: 100%;
    padding: 0 0 0 calc((var(--box) - 1ch) / 2);
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    caret-color: var(--accent-fill);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: calc(var(--pitch) - 1ch);
    font-variant-numeric: tabular-nums;
    /* Keep the browser's autofill tint off the boxes. */
    transition: background-color 600000s 0s;
}

/* The box the next digit goes in glows while you type. */
.code-boxes:focus-within .box[b-qb6gvyt0u3] {
    border-color: color-mix(in srgb, var(--accent-fill) 45%, var(--field-border));
}

.code-boxes:focus-within[data-length="0"] .box:nth-child(1)[b-qb6gvyt0u3],
.code-boxes:focus-within[data-length="1"] .box:nth-child(2)[b-qb6gvyt0u3],
.code-boxes:focus-within[data-length="2"] .box:nth-child(3)[b-qb6gvyt0u3],
.code-boxes:focus-within[data-length="3"] .box:nth-child(4)[b-qb6gvyt0u3],
.code-boxes:focus-within[data-length="4"] .box:nth-child(5)[b-qb6gvyt0u3],
.code-boxes:focus-within[data-length="5"] .box:nth-child(6)[b-qb6gvyt0u3] {
    border-color: var(--accent-fill);
    box-shadow: var(--focus-ring);
}

/* Filled boxes pop as each digit lands. */
.code-boxes[data-length="1"] .box:nth-child(-n+1)[b-qb6gvyt0u3],
.code-boxes[data-length="2"] .box:nth-child(-n+2)[b-qb6gvyt0u3],
.code-boxes[data-length="3"] .box:nth-child(-n+3)[b-qb6gvyt0u3],
.code-boxes[data-length="4"] .box:nth-child(-n+4)[b-qb6gvyt0u3],
.code-boxes[data-length="5"] .box:nth-child(-n+5)[b-qb6gvyt0u3],
.code-boxes[data-length="6"] .box[b-qb6gvyt0u3] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
    animation: box-pop-b-qb6gvyt0u3 0.25s var(--ease-spring);
}

.code-boxes[data-length="6"] .box:nth-child(2)[b-qb6gvyt0u3] { animation-delay: 0.03s; }
.code-boxes[data-length="6"] .box:nth-child(3)[b-qb6gvyt0u3] { animation-delay: 0.06s; }
.code-boxes[data-length="6"] .box:nth-child(4)[b-qb6gvyt0u3] { animation-delay: 0.09s; }
.code-boxes[data-length="6"] .box:nth-child(5)[b-qb6gvyt0u3] { animation-delay: 0.12s; }
.code-boxes[data-length="6"] .box:nth-child(6)[b-qb6gvyt0u3] { animation-delay: 0.15s; }

/* A code that didn't match: red, with a shake. */
.code-boxes.bad[b-qb6gvyt0u3] {
    animation: shake 0.45s;
}

.code-boxes.bad .box[b-qb6gvyt0u3] {
    border-color: var(--status-problem);
    background: var(--status-problem-soft);
}

@keyframes box-pop-b-qb6gvyt0u3 {
    50% {
        transform: scale(1.08);
    }
}

@media (max-width: 420px) {
    .code-boxes[b-qb6gvyt0u3] {
        --box: 42px;
        --space: 7px;
        height: 52px;
    }

    .code-input[b-qb6gvyt0u3] {
        font-size: 22px;
    }
}
/* /Components/Account/ErrorPage.razor.rz.scp.css */
.error-page[b-hxopix2mk6] {
    display: grid;
    gap: 18px;
}

/* A wrench that wobbles a little: something is being looked at. */
.art[b-hxopix2mk6] {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
    font-size: 30px;
    animation: tinker-b-hxopix2mk6 2.4s ease-in-out infinite;
}

.words[b-hxopix2mk6] {
    text-align: center;
}

h1[b-hxopix2mk6] {
    margin: 0;
    font-size: 24px;
}

.words p[b-hxopix2mk6] {
    margin: 6px 0 0;
    color: var(--muted);
}

.reference[b-hxopix2mk6] {
    display: grid;
    gap: 8px;
    font-size: 13px;
}

.reference-row[b-hxopix2mk6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reference code[b-hxopix2mk6] {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

@keyframes tinker-b-hxopix2mk6 {
    0%,
    60%,
    100% {
        transform: rotate(0);
    }

    70% {
        transform: rotate(-14deg);
    }

    85% {
        transform: rotate(10deg);
    }
}
/* /Components/Account/ForgotPasswordPage.razor.rz.scp.css */
.account-form[b-1z46jou096] {
    display: grid;
    gap: 18px;
}

.account-form[b-1z46jou096]  .form-stack {
    display: grid;
    gap: 16px;
}

/* Where you are in the flow: email, inbox, new password. They sit beside the OnSite name. */
.dots[b-1z46jou096] {
    position: absolute;
    top: 42px;
    right: 32px;
    display: flex;
    gap: 6px;
}

.dots span[b-1z46jou096] {
    width: 22px;
    height: 5px;
    border-radius: 999px;
    background: var(--border);
    transition: width 0.3s var(--ease-out), background-color 0.3s;
}

.dots span.on[b-1z46jou096] {
    width: 34px;
    background: var(--accent-fill);
}

.heading[b-1z46jou096] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.heading h1[b-1z46jou096],
.center h1[b-1z46jou096] {
    margin: 0;
    font-size: 24px;
}

.heading p[b-1z46jou096],
.center p[b-1z46jou096] {
    margin: 6px 0 0;
    color: var(--muted);
}

.center[b-1z46jou096] {
    text-align: center;
}

.center b[b-1z46jou096] {
    color: var(--text);
    overflow-wrap: anywhere;
}

/* The envelope flies in when the link is on its way. */
.envelope[b-1z46jou096] {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 32px;
    animation: fly-in-b-1z46jou096 0.9s var(--ease-spring);
}

@keyframes fly-in-b-1z46jou096 {
    0% {
        opacity: 0;
        transform: translate(-60px, 30px) rotate(-20deg) scale(0.6);
    }

    60% {
        opacity: 1;
        transform: translate(6px, -6px) rotate(6deg);
    }
}

.field[b-1z46jou096] {
    display: grid;
    gap: 6px;
}

.field label[b-1z46jou096] {
    font-size: 13px;
    font-weight: 500;
}

.with-icon[b-1z46jou096] {
    position: relative;
}

.with-icon[b-1z46jou096]  input {
    min-height: 44px;
    padding-left: 38px;
    font-size: 15px;
}

.with-icon[b-1z46jou096]  i {
    position: absolute;
    left: 13px;
    top: 50%;
    translate: 0 -50%;
    color: var(--muted);
    pointer-events: none;
}

.again[b-1z46jou096] {
    margin-top: -8px;
}

.links[b-1z46jou096] {
    display: flex;
    justify-content: center;
    font-size: 13px;
}

.links a[b-1z46jou096] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dev-link[b-1z46jou096] {
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--radius);
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
    font-size: 13px;
}

.dev-link a[b-1z46jou096] {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .dots[b-1z46jou096] {
        top: 38px;
        right: 20px;
    }
}

@media (max-width: 599px) {
    .with-icon[b-1z46jou096]  input {
        font-size: 16px;
    }
}
/* /Components/Account/NewPasswordPage.razor.rz.scp.css */
.account-form[b-lv1t1cbgy8] {
    display: grid;
    gap: 18px;
}

.account-form[b-lv1t1cbgy8]  .form-stack {
    display: grid;
    gap: 16px;
}

.heading[b-lv1t1cbgy8] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.heading h1[b-lv1t1cbgy8] {
    margin: 0;
    font-size: 24px;
}

.heading p[b-lv1t1cbgy8] {
    margin: 6px 0 0;
    color: var(--muted);
}

.field[b-lv1t1cbgy8] {
    display: grid;
    gap: 8px;
}

.field label[b-lv1t1cbgy8] {
    font-size: 13px;
    font-weight: 500;
}

.field[b-lv1t1cbgy8]  input {
    min-height: 44px;
    font-size: 15px;
}

.match[b-lv1t1cbgy8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
    color: var(--muted);
    font-size: 12px;
}

.match.met[b-lv1t1cbgy8] {
    color: var(--status-done);
    font-weight: 500;
}

.go[b-lv1t1cbgy8]  i {
    transition: transform 0.2s var(--ease-spring);
}

.go:hover[b-lv1t1cbgy8]  i {
    transform: translateX(3px);
}

/* "Not Priya? Sign out", for a shared counter computer. */
.out[b-lv1t1cbgy8] {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}

.out .link-button[b-lv1t1cbgy8] {
    font-size: 13px;
}

@media (max-width: 599px) {
    .field[b-lv1t1cbgy8]  input {
        font-size: 16px;
    }
}
/* /Components/Account/PasswordRules.razor.rz.scp.css */
.rules[b-ara0yq7r4x] {
    display: grid;
    gap: 8px;
}

.meter[b-ara0yq7r4x] {
    height: 6px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.meter span[b-ara0yq7r4x] {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--status-problem);
    transition: width 0.35s var(--ease-out), background-color 0.2s;
}

.rules[data-met="1"] .meter span[b-ara0yq7r4x] { width: 20%; }
.rules[data-met="2"] .meter span[b-ara0yq7r4x] { width: 40%; background: var(--status-waiting); }
.rules[data-met="3"] .meter span[b-ara0yq7r4x] { width: 60%; background: var(--status-waiting); }
.rules[data-met="4"] .meter span[b-ara0yq7r4x] { width: 80%; background: var(--accent-fill); }
.rules[data-met="5"] .meter span[b-ara0yq7r4x] { width: 100%; background: var(--status-done); }

ul[b-ara0yq7r4x] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 12px;
}

li[b-ara0yq7r4x] {
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

li[b-ara0yq7r4x]  .fa-circle-check,
li.met[b-ara0yq7r4x]  .fa-circle {
    display: none;
}

li.met[b-ara0yq7r4x] {
    color: var(--status-done);
    font-weight: 500;
}

li.met[b-ara0yq7r4x]  .fa-circle-check {
    display: inline-block;
    animation: tick-pop-b-ara0yq7r4x 0.3s var(--ease-spring);
}

.verdict[b-ara0yq7r4x] {
    min-height: 18px;
    color: var(--muted);
    font-size: 12px;
}

.rules[data-met="5"] .verdict[b-ara0yq7r4x] {
    color: var(--status-done);
    font-weight: 500;
}

@keyframes tick-pop-b-ara0yq7r4x {
    50% {
        transform: scale(1.3);
    }
}
/* /Components/Account/RecoveryCodeList.razor.rz.scp.css */
.recovery[b-kwowonxcs5] {
    display: grid;
    gap: 12px;
}

.intro[b-kwowonxcs5] {
    margin: 0;
    font-size: 14px;
}

/* The codes, numbered, in two columns on a soft panel. */
.recovery-codes[b-kwowonxcs5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
    margin: 0;
    padding: 16px 16px 16px 40px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    letter-spacing: 0.04em;
}

.recovery-codes li[b-kwowonxcs5] {
    animation: fade-up 0.35s var(--ease-out) backwards;
}

.recovery-codes li[b-kwowonxcs5]::marker {
    color: var(--muted);
    font-size: 12px;
}

.recovery-codes li:nth-child(2)[b-kwowonxcs5] { animation-delay: 0.035s; }
.recovery-codes li:nth-child(3)[b-kwowonxcs5] { animation-delay: 0.07s; }
.recovery-codes li:nth-child(4)[b-kwowonxcs5] { animation-delay: 0.105s; }
.recovery-codes li:nth-child(5)[b-kwowonxcs5] { animation-delay: 0.14s; }
.recovery-codes li:nth-child(6)[b-kwowonxcs5] { animation-delay: 0.175s; }
.recovery-codes li:nth-child(7)[b-kwowonxcs5] { animation-delay: 0.21s; }
.recovery-codes li:nth-child(8)[b-kwowonxcs5] { animation-delay: 0.245s; }
.recovery-codes li:nth-child(9)[b-kwowonxcs5] { animation-delay: 0.28s; }
.recovery-codes li:nth-child(10)[b-kwowonxcs5] { animation-delay: 0.315s; }

.tools[b-kwowonxcs5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 399px) {
    .recovery-codes[b-kwowonxcs5] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Account/ResetPasswordPage.razor.rz.scp.css */
.account-form[b-u42ktu6s6f] {
    display: grid;
    gap: 18px;
}

.account-form[b-u42ktu6s6f]  .form-stack {
    display: grid;
    gap: 16px;
}

/* Where you are in the flow: email, inbox, new password. They sit beside the OnSite name. */
.dots[b-u42ktu6s6f] {
    position: absolute;
    top: 42px;
    right: 32px;
    display: flex;
    gap: 6px;
}

.dots span[b-u42ktu6s6f] {
    width: 34px;
    height: 5px;
    border-radius: 999px;
    background: var(--accent-fill);
}

.heading[b-u42ktu6s6f] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.heading h1[b-u42ktu6s6f],
.finished h1[b-u42ktu6s6f] {
    margin: 0;
    font-size: 24px;
}

.heading p[b-u42ktu6s6f],
.finished p[b-u42ktu6s6f] {
    margin: 6px 0 0;
    color: var(--muted);
}

.field[b-u42ktu6s6f] {
    display: grid;
    gap: 8px;
}

.field label[b-u42ktu6s6f] {
    font-size: 13px;
    font-weight: 500;
}

.field[b-u42ktu6s6f]  input {
    min-height: 44px;
    font-size: 15px;
}

.match[b-u42ktu6s6f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
    color: var(--muted);
    font-size: 12px;
}

.match.met[b-u42ktu6s6f] {
    color: var(--status-done);
    font-weight: 500;
}

.later[b-u42ktu6s6f] {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* All done: a tick that pops in with a little confetti. */
.finished[b-u42ktu6s6f] {
    display: grid;
    justify-items: center;
    text-align: center;
}

.tick[b-u42ktu6s6f] {
    position: relative;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--status-done-soft);
    color: var(--status-done);
    font-size: 34px;
    animation: tick-in-b-u42ktu6s6f 0.5s var(--ease-spring);
}

.tick[b-u42ktu6s6f]  .confetti {
    left: 50%;
}

.go[b-u42ktu6s6f]  i {
    transition: transform 0.2s var(--ease-spring);
}

.go:hover[b-u42ktu6s6f]  i {
    transform: translateX(3px);
}

@keyframes tick-in-b-u42ktu6s6f {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
}

@media (max-width: 480px) {
    .dots[b-u42ktu6s6f] {
        top: 38px;
        right: 20px;
    }
}

@media (max-width: 599px) {
    .field[b-u42ktu6s6f]  input {
        font-size: 16px;
    }
}
/* /Components/Account/SecondFactorPage.razor.rz.scp.css */
.second-factor[b-ek6mailic3] {
    display: grid;
    gap: 18px;
}

.second-factor.shake[b-ek6mailic3] {
    animation: shake 0.45s;
}

.heading[b-ek6mailic3] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.heading h1[b-ek6mailic3] {
    margin: 0;
    font-size: 24px;
}

.heading p[b-ek6mailic3] {
    margin: 4px 0 0;
    color: var(--muted);
}

.notice[b-ek6mailic3] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--status-problem-soft);
    color: var(--status-problem);
    font-size: 13px;
    font-weight: 500;
    animation: fade-up 0.25s var(--ease-out);
}

.notice[b-ek6mailic3]  i {
    margin-top: 3px;
}

.notice a[b-ek6mailic3] {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.notice.waiting[b-ek6mailic3] {
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
}

.form-stack[b-ek6mailic3] {
    display: grid;
    gap: 16px;
}

.field[b-ek6mailic3] {
    display: grid;
    gap: 6px;
}

.field label[b-ek6mailic3] {
    font-size: 13px;
    font-weight: 500;
}

.recovery[b-ek6mailic3] {
    min-height: 48px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: lowercase;
}

/* "New code in 18s": the app's 30-second window as a ring that runs down. */
.ticker[b-ek6mailic3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.ticker b[b-ek6mailic3] {
    color: var(--text);
}

.ring[b-ek6mailic3] {
    width: 20px;
    height: 20px;
    rotate: -90deg;
}

.ring circle[b-ek6mailic3] {
    fill: none;
    stroke-width: 4;
}

.ring .track[b-ek6mailic3] {
    stroke: var(--surface-2);
}

.ring .arc[b-ek6mailic3] {
    stroke: var(--accent-fill);
    stroke-linecap: round;
    stroke-dasharray: 94.25;
    transition: stroke-dashoffset 1s linear, stroke 0.3s;
}

.ticker.low .arc[b-ek6mailic3] {
    stroke: var(--status-waiting);
}

.links[b-ek6mailic3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: 13px;
}

.links a[b-ek6mailic3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.swap[b-ek6mailic3] {
    justify-content: center;
    margin-top: -6px;
}

.foot[b-ek6mailic3] {
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* Whose sign-in this is, with a way out if it isn't yours. */
.who[b-ek6mailic3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.who-text[b-ek6mailic3] {
    flex: 1;
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.who-text b[b-ek6mailic3] {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.who a[b-ek6mailic3] {
    flex: none;
    font-size: 13px;
    font-weight: 500;
}

/* The lock-out's countdown has run out. */
.notice.over[b-ek6mailic3] {
    background: var(--status-done-soft);
    color: var(--status-done);
}
/* /Components/Account/SecondFactorSetupPage.razor.rz.scp.css */
.second-factor[b-v3cqn3qsx1] {
    display: grid;
    gap: 18px;
}

.heading[b-v3cqn3qsx1] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.heading h1[b-v3cqn3qsx1] {
    margin: 0;
    font-size: 24px;
}

.heading p[b-v3cqn3qsx1] {
    margin: 6px 0 0;
    color: var(--muted);
}

.notice[b-v3cqn3qsx1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
    font-size: 13px;
    font-weight: 600;
}

.notice[b-v3cqn3qsx1]  i {
    margin-top: 3px;
}

.notice.problem[b-v3cqn3qsx1] {
    background: var(--status-problem-soft);
    color: var(--status-problem);
    animation: shake 0.4s;
}

/* Two numbered steps, each with its number in a soft circle. */
.steps[b-v3cqn3qsx1] {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps > li[b-v3cqn3qsx1] {
    position: relative;
    display: grid;
    gap: 12px;
    padding-left: 40px;
    counter-increment: step;
}

.steps > li[b-v3cqn3qsx1]::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -3px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 13px;
    font-weight: 700;
}

.scan[b-v3cqn3qsx1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* The QR code stays black on white in both themes, so every phone can read it. */
.qr[b-v3cqn3qsx1] {
    flex: none;
    width: 156px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #ffffff;
    animation: qr-in-b-v3cqn3qsx1 0.5s var(--ease-spring);
}

.qr[b-v3cqn3qsx1]  svg {
    display: block;
    width: 100%;
    height: auto;
}

.key-box[b-v3cqn3qsx1] {
    flex: 1 1 200px;
    display: grid;
    justify-items: start;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
}

.mono[b-v3cqn3qsx1] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.key[b-v3cqn3qsx1] {
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 14px;
    letter-spacing: 0.05em;
    word-spacing: 0.2em;
    overflow-wrap: anywhere;
}

.form-stack[b-v3cqn3qsx1] {
    display: grid;
    gap: 14px;
}

.out[b-v3cqn3qsx1] {
    justify-self: center;
}

.out .link-button[b-v3cqn3qsx1] {
    font-size: 13px;
}

/* The codes, numbered, in two columns on a soft panel. */
.recovery-codes[b-v3cqn3qsx1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
    margin: 0;
    padding: 16px 16px 16px 40px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    font-size: 15px;
    letter-spacing: 0.04em;
}

.recovery-codes li[b-v3cqn3qsx1] {
    animation: fade-up 0.35s var(--ease-out) backwards;
}

.recovery-codes li[b-v3cqn3qsx1]::marker {
    color: var(--muted);
    font-size: 12px;
}

.recovery-codes li:nth-child(2)[b-v3cqn3qsx1] { animation-delay: 0.035s; }
.recovery-codes li:nth-child(3)[b-v3cqn3qsx1] { animation-delay: 0.07s; }
.recovery-codes li:nth-child(4)[b-v3cqn3qsx1] { animation-delay: 0.105s; }
.recovery-codes li:nth-child(5)[b-v3cqn3qsx1] { animation-delay: 0.14s; }
.recovery-codes li:nth-child(6)[b-v3cqn3qsx1] { animation-delay: 0.175s; }
.recovery-codes li:nth-child(7)[b-v3cqn3qsx1] { animation-delay: 0.21s; }
.recovery-codes li:nth-child(8)[b-v3cqn3qsx1] { animation-delay: 0.245s; }
.recovery-codes li:nth-child(9)[b-v3cqn3qsx1] { animation-delay: 0.28s; }
.recovery-codes li:nth-child(10)[b-v3cqn3qsx1] { animation-delay: 0.315s; }

.tools[b-v3cqn3qsx1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.check[b-v3cqn3qsx1] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 500;
    cursor: pointer;
}

.check .form-check-input[b-v3cqn3qsx1] {
    width: 18px;
    height: 18px;
    margin: 0;
}

.check .form-check-input:checked[b-v3cqn3qsx1] {
    background-color: var(--status-done);
    border-color: var(--status-done);
}

/* Continue waits for the tick, because the codes are never shown again. */
.go[aria-disabled="true"][b-v3cqn3qsx1] {
    opacity: 0.5;
    pointer-events: none;
}

.go[b-v3cqn3qsx1]  i {
    transition: transform 0.2s var(--ease-spring);
}

.go:hover[b-v3cqn3qsx1]  i {
    transform: translateX(3px);
}

/* Set-up is done: a burst of confetti from the button on the way to Platform. */
.go[b-v3cqn3qsx1] {
    position: relative;
    overflow: visible;
}

.go[b-v3cqn3qsx1]  .confetti {
    display: none;
    left: 50%;
}

.go.celebrating[b-v3cqn3qsx1]  .confetti {
    display: block;
}

@keyframes qr-in-b-v3cqn3qsx1 {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
}

@media (max-width: 480px) {
    .steps > li[b-v3cqn3qsx1] {
        padding-left: 0;
    }

    .steps > li[b-v3cqn3qsx1]::before {
        position: static;
    }

    .qr[b-v3cqn3qsx1] {
        width: 100%;
        max-width: 220px;
        margin: 0 auto;
    }
}

/* Printing the codes prints just the codes. */
@media print {
    .tools[b-v3cqn3qsx1],
    .check[b-v3cqn3qsx1],
    .go[b-v3cqn3qsx1],
    .notice[b-v3cqn3qsx1] {
        display: none;
    }
}
/* /Components/Account/SetupPage.razor.rz.scp.css */
.setup[b-ymja6kb6gi] {
    display: grid;
    gap: 18px;
}

.heading[b-ymja6kb6gi] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.heading h1[b-ymja6kb6gi] {
    margin: 0;
    font-size: 24px;
}

.heading p[b-ymja6kb6gi] {
    margin: 6px 0 0;
    color: var(--muted);
}

.intro[b-ymja6kb6gi] {
    margin: 0;
}

.form-stack[b-ymja6kb6gi] {
    display: grid;
    gap: 16px;
}

.pair[b-ymja6kb6gi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.field[b-ymja6kb6gi] {
    display: grid;
    align-content: start;
    gap: 6px;
}

.field label[b-ymja6kb6gi] {
    font-size: 13px;
    font-weight: 500;
}

.field input[b-ymja6kb6gi] {
    min-height: 44px;
    font-size: 15px;
}

.mono[b-ymja6kb6gi] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.06em;
}

.hint[b-ymja6kb6gi] {
    font-size: 12px;
    color: var(--muted);
}

.go[b-ymja6kb6gi]  i {
    transition: transform 0.2s var(--ease-spring);
}

.go:hover[b-ymja6kb6gi]  i {
    transform: translateX(3px);
}

@media (max-width: 599px) {
    .pair[b-ymja6kb6gi] {
        grid-template-columns: minmax(0, 1fr);
    }

    .field input[b-ymja6kb6gi] {
        font-size: 16px;
    }
}
/* /Components/Account/SetupSteps.razor.rz.scp.css */
.setup-steps[b-03plbujqs4] {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--border);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

li[b-03plbujqs4] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 12px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

li.current[b-03plbujqs4] {
    color: var(--text);
    font-weight: 600;
}

li.current[b-03plbujqs4]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-fill);
    animation: grow-b-03plbujqs4 0.4s var(--ease-out);
}

.number[b-03plbujqs4] {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--status-neutral-soft);
    color: var(--status-neutral);
    font-size: 12px;
    font-weight: 600;
}

li.current .number[b-03plbujqs4] {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

li.done .number[b-03plbujqs4] {
    background: var(--status-done-soft);
    color: var(--status-done);
    animation: tick-pop-b-03plbujqs4 0.35s var(--ease-spring);
}

/* Phones: the steps still to come show just their number. */
@media (max-width: 480px) {
    .setup-steps[b-03plbujqs4] {
        gap: 12px;
    }

    li:not(.current) .label[b-03plbujqs4] {
        display: none;
    }
}

@keyframes grow-b-03plbujqs4 {
    from {
        transform: scaleX(0);
    }
}

@keyframes tick-pop-b-03plbujqs4 {
    50% {
        transform: scale(1.25);
    }
}
/* /Components/Account/SignedInDevices.razor.rz.scp.css */
.devices[b-seois8zquo] {
    display: grid;
    gap: 10px;
    padding-top: 18px;
}

.devices-head[b-seois8zquo] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 14px;
}

.devices-head h3[b-seois8zquo] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.devices-head p[b-seois8zquo] {
    margin: 2px 0 0;
}

.device-list[b-seois8zquo] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.device[b-seois8zquo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
    border-radius: 6px;
    animation: fade-up 0.3s var(--ease-out) backwards;
    transition: background-color 0.15s, padding 0.2s var(--ease-out), opacity 0.2s;
}

.device:last-child[b-seois8zquo] {
    border-bottom: 0;
}

.device:hover[b-seois8zquo] {
    background: var(--surface-2);
    padding-inline: 10px;
}

.device.leaving[b-seois8zquo] {
    opacity: 0.5;
}

.device-text[b-seois8zquo] {
    display: grid;
    gap: 2px;
    flex: 1 1 240px;
    min-width: 0;
}

.name[b-seois8zquo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.name b[b-seois8zquo] {
    font-size: 14px;
    font-weight: 600;
}

.device-text .small[b-seois8zquo] {
    overflow-wrap: anywhere;
}

.only[b-seois8zquo] {
    margin: 0;
}
/* /Components/Account/SignInPage.razor.rz.scp.css */
/* ---------- The branded panel beside the form (wide screens) ---------- */

.side[b-312abbzenu] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
    height: 100%;
    min-height: 100vh;
    padding: 36px 44px;
    overflow: hidden;
    color: var(--on-accent);
    background: linear-gradient(155deg, var(--accent-fill), color-mix(in srgb, var(--accent-fill) 50%, var(--status-progress)));
}

[data-bs-theme="dark"] .side[b-312abbzenu] {
    background: linear-gradient(155deg, color-mix(in srgb, var(--accent-fill) 80%, var(--bg)), color-mix(in srgb, var(--accent-fill) 35%, var(--bg)));
}

/* A faint dot grid over the colour. */
.side[b-312abbzenu]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--on-accent) 22%, transparent) 1px, transparent 0) 0 0 / 22px 22px;
    pointer-events: none;
}

.side-brand[b-312abbzenu] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.side-mark[b-312abbzenu] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-fill);
    box-shadow: 0 0 0 2px var(--on-accent);
    display: grid;
    place-items: center;
}

.side-mark[b-312abbzenu]::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 3px solid #ffffff;
}

.side-brand:hover .side-mark[b-312abbzenu] {
    animation: wobble-b-312abbzenu 0.6s var(--ease-spring);
}

.hero[b-312abbzenu] {
    position: relative;
    z-index: 1;
}

.hero h2[b-312abbzenu] {
    margin: 0;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.hero p[b-312abbzenu] {
    max-width: 380px;
    margin: 12px 0 0;
    font-size: 16px;
    opacity: 0.9;
}

.floats[b-312abbzenu] {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 280px;
}

.float[b-312abbzenu] {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 260px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--overlay-shadow);
    animation: drift-b-312abbzenu 7s ease-in-out infinite;
}

.float div[b-312abbzenu] {
    display: grid;
    justify-items: start;
    gap: 2px;
    min-width: 0;
}

.float b[b-312abbzenu] {
    font-size: 14px;
}

.float span:not([class])[b-312abbzenu] {
    font-size: 12px;
    color: var(--muted);
}

.float[b-312abbzenu]  .pill {
    margin-top: 4px;
}

.float:nth-child(1)[b-312abbzenu] {
    top: 4%;
    left: 2%;
    rotate: -3deg;
}

.float:nth-child(2)[b-312abbzenu] {
    top: 36%;
    left: 28%;
    rotate: 2deg;
    animation-delay: -2.3s;
}

.float:nth-child(3)[b-312abbzenu] {
    top: 68%;
    left: 6%;
    rotate: -1deg;
    animation-delay: -4.6s;
}

.quip[b-312abbzenu] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    opacity: 0.88;
}

@keyframes drift-b-312abbzenu {
    50% {
        translate: 0 -10px;
    }
}

@keyframes wobble-b-312abbzenu {
    25% {
        transform: rotate(-14deg);
    }

    60% {
        transform: rotate(10deg);
    }
}

/* ---------- The form ---------- */

.sign-in[b-312abbzenu] {
    display: grid;
    gap: 18px;
}

.sign-in.shake[b-312abbzenu] {
    animation: shake 0.45s;
}

.heading h1[b-312abbzenu] {
    margin: 0;
    font-size: 26px;
}

.heading p[b-312abbzenu] {
    margin: 6px 0 0;
    color: var(--muted);
}

/* What happened on the last try, in its tone: a problem, a pause or good news. */
.notice[b-312abbzenu] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--status-problem-soft);
    color: var(--status-problem);
    font-size: 13px;
    font-weight: 500;
    animation: fade-up 0.25s var(--ease-out);
}

.notice[b-312abbzenu]  i {
    margin-top: 3px;
}

.notice a[b-312abbzenu] {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.notice.waiting[b-312abbzenu] {
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
}

.notice.done[b-312abbzenu] {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.sign-in[b-312abbzenu]  .form-stack {
    display: grid;
    gap: 16px;
}

.field[b-312abbzenu] {
    display: grid;
    gap: 6px;
}

.field label[b-312abbzenu] {
    font-size: 13px;
    font-weight: 500;
}

.label-row[b-312abbzenu] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.forgot[b-312abbzenu] {
    font-size: 13px;
}

/* Fields are a little taller here: it's the first thing everyone touches. */
.with-icon[b-312abbzenu],
.password-field[b-312abbzenu] {
    position: relative;
}

.with-icon[b-312abbzenu]  input,
.password-field[b-312abbzenu]  input {
    min-height: 44px;
    font-size: 15px;
}

.with-icon[b-312abbzenu]  i {
    position: absolute;
    left: 13px;
    top: 50%;
    translate: 0 -50%;
    color: var(--muted);
    pointer-events: none;
}

.with-icon[b-312abbzenu]  input {
    padding-left: 38px;
}

.password-field[b-312abbzenu]  input {
    padding-right: 46px;
}

.reveal[b-312abbzenu] {
    position: absolute;
    right: 4px;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.reveal:hover[b-312abbzenu] {
    background: var(--surface-2);
    color: var(--text);
}

.reveal[b-312abbzenu]  .fa-eye-slash,
.reveal[aria-pressed="true"][b-312abbzenu]  .fa-eye {
    display: none;
}

.reveal[aria-pressed="true"][b-312abbzenu]  .fa-eye-slash {
    display: inline-block;
}

.caps[b-312abbzenu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--status-waiting);
    font-size: 12px;
    font-weight: 600;
    animation: fade-up 0.2s var(--ease-out);
}

.check[b-312abbzenu] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    cursor: pointer;
}

.check[b-312abbzenu]  .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.go[b-312abbzenu]  i {
    transition: transform 0.2s var(--ease-spring);
}

.go:hover[b-312abbzenu]  i {
    transform: translateX(3px);
}

@media (max-width: 599px) {
    .with-icon[b-312abbzenu]  input,
    .password-field[b-312abbzenu]  input {
        font-size: 16px;
    }
}

/* The lock-out's countdown has run out. */
.notice.over[b-312abbzenu] {
    background: var(--status-done-soft);
    color: var(--status-done);
}
/* /Components/Account/TwoStepSetting.razor.rz.scp.css */
/* The row on the account page: the same shape as the page's other sign-in settings. */
.two-step[b-sdvc35fx1n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.text[b-sdvc35fx1n] {
    display: grid;
    gap: 2px;
    flex: 1 1 260px;
    min-width: 0;
}

.title[b-sdvc35fx1n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.actions[b-sdvc35fx1n] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.body[b-sdvc35fx1n] {
    margin: 0;
}

.proof-form[b-sdvc35fx1n] {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

/* Two numbered steps, each with its number in a soft circle. */
.steps[b-sdvc35fx1n] {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps > li[b-sdvc35fx1n] {
    position: relative;
    display: grid;
    gap: 12px;
    padding-left: 40px;
    counter-increment: step;
}

.steps > li[b-sdvc35fx1n]::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -3px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 13px;
    font-weight: 700;
}

.scan[b-sdvc35fx1n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* The QR code stays black on white in both themes, so every phone can read it. */
.qr[b-sdvc35fx1n] {
    flex: none;
    width: 156px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #ffffff;
    animation: count-in 0.5s var(--ease-spring);
}

.qr[b-sdvc35fx1n]  svg {
    display: block;
    width: 100%;
    height: auto;
}

.key-box[b-sdvc35fx1n] {
    flex: 1 1 200px;
    display: grid;
    justify-items: start;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
}

.key[b-sdvc35fx1n] {
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    letter-spacing: 0.05em;
    word-spacing: 0.2em;
    overflow-wrap: anywhere;
}

.code-form[b-sdvc35fx1n] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.code-form input[type=password][b-sdvc35fx1n] {
    max-width: 260px;
}

/* One wide field for the six digits, spaced out like the code in the app. */
.code[b-sdvc35fx1n] {
    max-width: 200px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.code.is-invalid[b-sdvc35fx1n] {
    border-color: var(--status-problem);
    animation: shake 0.4s;
}

@media (max-width: 599px) {
    .steps > li[b-sdvc35fx1n] {
        padding-left: 36px;
    }

    .qr[b-sdvc35fx1n] {
        width: 140px;
    }
}
/* /Components/Communications/CustomerMessagesPanel.razor.rz.scp.css */
.conversation-panel[b-c2vinnlyed] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.conversation-panel.fill[b-c2vinnlyed] {
    flex: 1;
    height: 100%;
}

/* Column-reverse keeps the scroll at the newest message. */
.thread[b-c2vinnlyed] {
    display: flex;
    flex-direction: column-reverse;
    max-height: 480px;
    min-height: 160px;
    overflow-y: auto;
    padding: 18px var(--pad);
}

.fill .thread[b-c2vinnlyed] {
    flex: 1;
    max-height: none;
}

.compose[b-c2vinnlyed] {
    display: grid;
    gap: 10px;
    padding: 14px var(--pad);
    border-top: 1px solid var(--border);
    background: var(--surface);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.compose-head[b-c2vinnlyed] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.small[b-c2vinnlyed] {
    font-size: 12px;
}

.compose-row[b-c2vinnlyed] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.compose-row textarea[b-c2vinnlyed] {
    flex: 1;
    min-height: 44px;
    resize: vertical;
}

.quick[b-c2vinnlyed] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.quick .chip[b-c2vinnlyed] {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
}

.quick .chip:active[b-c2vinnlyed] {
    transform: scale(0.95);
}

.meter[b-c2vinnlyed] {
    margin-left: auto;
}

.meter.long[b-c2vinnlyed] {
    color: var(--status-waiting);
    font-weight: 600;
}

@media (max-width: 599px) {
    .compose-row[b-c2vinnlyed] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Notify customer's switch: the message starts with the standard words for the repair's status. */
.status-row[b-c2vinnlyed] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: 13px;
    cursor: pointer;
}

.status-row .form-check[b-c2vinnlyed] {
    margin: 0;
    min-height: 0;
}

.status-row .form-check-input[b-c2vinnlyed] {
    margin-top: 1px;
}

.status-text[b-c2vinnlyed] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.status-words[b-c2vinnlyed] {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-style: italic;
    animation: fade-up 0.2s var(--ease-out);
}


.text-only[b-c2vinnlyed] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-weight: 600;
}
/* /Components/Communications/MessageList.razor.rz.scp.css */
/* ---------- The list: newest first ---------- */

.messages[b-fwpmpch53o] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.messages li[b-fwpmpch53o] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    animation: fade-up 0.3s var(--ease-out);
}

.channel[b-fwpmpch53o] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
}

.inbound .channel[b-fwpmpch53o] {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

.unread .body[b-fwpmpch53o] {
    font-weight: 600;
}

.unread .channel[b-fwpmpch53o] {
    background: var(--accent-fill);
    color: var(--on-accent);
}

.body[b-fwpmpch53o] {
    display: grid;
    gap: 3px;
    min-width: 0;
    font-size: 14px;
}

.meta[b-fwpmpch53o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 12px;
    color: var(--muted);
}

.meta b[b-fwpmpch53o] {
    color: var(--text);
}

.meta a[b-fwpmpch53o] {
    text-decoration: none;
    font-weight: 600;
}

.subject[b-fwpmpch53o] {
    font-weight: 600;
}

.text[b-fwpmpch53o] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text);
}

.nothing[b-fwpmpch53o] {
    margin: 0;
    font-size: 13px;
}

/* ---------- The conversation: bubbles, oldest first ---------- */

.conversation[b-fwpmpch53o] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.day[b-fwpmpch53o] {
    align-self: center;
}

.day span[b-fwpmpch53o] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
}

.message[b-fwpmpch53o] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    max-width: min(80%, 540px);
    animation: fade-up 0.3s var(--ease-out);
}

.message.out[b-fwpmpch53o] {
    align-self: flex-end;
    align-items: flex-end;
}

.message .bubble[b-fwpmpch53o] {
    display: grid;
    gap: 4px;
    padding: 10px 14px;
    border: 1px solid var(--bubble-border);
    border-radius: 16px 16px 16px 4px;
    background: var(--bubble);
    color: var(--text);
}

.message .bubble .text[b-fwpmpch53o] {
    color: inherit;
}

.message.out .bubble[b-fwpmpch53o] {
    border-color: transparent;
    border-radius: 16px 16px 4px 16px;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

.message.unread .bubble[b-fwpmpch53o] {
    box-shadow: inset 3px 0 0 var(--accent-fill);
    font-weight: 500;
}

.message.failed .bubble[b-fwpmpch53o] {
    border-color: transparent;
    background: var(--status-problem-soft);
    color: var(--status-problem);
}

.message .meta[b-fwpmpch53o] {
    flex-wrap: wrap;
    gap: 4px 6px;
}

.message .meta[b-fwpmpch53o]  i {
    font-size: 11px;
}

.message.out .meta[b-fwpmpch53o] {
    justify-content: flex-end;
}

.sent[b-fwpmpch53o] {
    color: var(--status-done);
}

.sent.delivered[b-fwpmpch53o] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
}

.retry[b-fwpmpch53o] {
    font-size: 12px;
    font-weight: 600;
}

.retry:disabled[b-fwpmpch53o] {
    opacity: 0.7;
    cursor: default;
}

.event[b-fwpmpch53o] {
    align-self: center;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: min(90%, 540px);
    padding: 8px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--muted);
    font-size: 13px;
    animation: fade-up 0.3s var(--ease-out);
}

.event[b-fwpmpch53o]  i {
    margin-top: 3px;
}

.event b[b-fwpmpch53o] {
    color: var(--text);
}

@media (max-width: 599px) {
    .message[b-fwpmpch53o] {
        max-width: 92%;
    }
}
/* /Components/Communications/NotifyForm.razor.rz.scp.css */
.notify[b-7q629q38mm] {
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    animation: fade-up 0.25s var(--ease-out);
}

.small[b-7q629q38mm] {
    margin: 0;
    font-size: 12px;
}

/* A switch with its words beside it (DESIGN.md §8 Toggle). */
.switch-row[b-7q629q38mm] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
}

.switch-row .form-check[b-7q629q38mm] {
    margin: 0;
    min-height: 0;
}

/* The message as the customer will read it: an outgoing bubble. */
.preview[b-7q629q38mm] {
    display: grid;
    gap: 6px;
    justify-self: end;
    max-width: min(100%, 520px);
}

.preview .sub-head[b-7q629q38mm] {
    justify-content: flex-end;
    color: var(--muted);
}

.preview p[b-7q629q38mm] {
    margin: 0;
    padding: 10px 14px;
    border-radius: 16px 16px 4px 16px;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Components/Customers/CustomerAccountCard.razor.rz.scp.css */
.small[b-woh0bp6v5j] {
    font-size: 13px;
}

.nothing[b-woh0bp6v5j] {
    margin: 0;
}

/* What they can spend: green when there's something to spend. */
.credit-balance[b-woh0bp6v5j] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 13px;
    color: var(--muted);
}

.credit-balance b[b-woh0bp6v5j] {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    animation: count-in 0.5s var(--ease-out);
}

.credit-balance.has-credit[b-woh0bp6v5j] {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.credit-balance.has-credit b[b-woh0bp6v5j] {
    color: var(--status-done);
}

.two[b-woh0bp6v5j] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.entries[b-woh0bp6v5j] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.entries li[b-woh0bp6v5j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    animation: fade-up 0.3s var(--ease-out);
}

.entries li:last-child[b-woh0bp6v5j] {
    border-bottom: 0;
}

.entries li.spent[b-woh0bp6v5j] {
    opacity: 0.55;
}

.entries li.spent .left[b-woh0bp6v5j] {
    text-decoration: line-through;
}

.what[b-woh0bp6v5j] {
    flex: 1 1 160px;
    display: grid;
    min-width: 0;
}

.what .muted[b-woh0bp6v5j] {
    font-size: 12px;
}

.left[b-woh0bp6v5j] {
    font-weight: 600;
    white-space: nowrap;
}

.sub-head[b-woh0bp6v5j] {
    margin-top: 4px;
    color: var(--muted);
}

/* A switch with a bold title and a line under it (DESIGN.md §8 Toggle). */
.switch-row[b-woh0bp6v5j] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    cursor: pointer;
}

.switch-row .form-check[b-woh0bp6v5j] {
    margin: 2px 0 0;
    min-height: 0;
}

.switch-row > span:last-child[b-woh0bp6v5j] {
    display: grid;
    gap: 2px;
}

.void-text[b-woh0bp6v5j] {
    margin: 0;
}

.void-entry[b-woh0bp6v5j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

@media (max-width: 520px) {
    .two[b-woh0bp6v5j] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Customers/CustomerActivityList.razor.rz.scp.css */
.activity-panel[b-zvnblxlqpz] {
    display: grid;
    gap: 6px;
    padding: 8px var(--pad) 8px;
}

.pad[b-zvnblxlqpz] {
    margin: 0;
    padding: 12px 0;
}

.chips[b-zvnblxlqpz] {
    flex: none;
    margin-bottom: 4px;
}

.chip[b-zvnblxlqpz]  i {
    font-size: 12px;
}

.activity[b-zvnblxlqpz] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.activity li[b-zvnblxlqpz] {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    animation: fade-up 0.3s var(--ease-out) both;
}

.activity li:nth-child(2)[b-zvnblxlqpz] { animation-delay: 30ms; }
.activity li:nth-child(3)[b-zvnblxlqpz] { animation-delay: 60ms; }
.activity li:nth-child(4)[b-zvnblxlqpz] { animation-delay: 90ms; }
.activity li:nth-child(5)[b-zvnblxlqpz] { animation-delay: 120ms; }

.activity li:last-child[b-zvnblxlqpz] {
    border-bottom: 0;
}

.kind[b-zvnblxlqpz] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tile-bg);
    color: var(--tile-fg);
    font-size: 12px;
}

.what[b-zvnblxlqpz] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.what a[b-zvnblxlqpz],
.what b[b-zvnblxlqpz] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    overflow-wrap: anywhere;
}

.what a[b-zvnblxlqpz] {
    text-decoration: none;
}

.what a:hover[b-zvnblxlqpz] {
    color: var(--accent);
    text-decoration: underline;
}

.what span[b-zvnblxlqpz] {
    font-size: 12px;
    color: var(--muted);
}
/* /Components/Customers/CustomerFields.razor.rz.scp.css */
.customer-fields[b-1ao09cihxs] {
    display: grid;
    gap: 14px;
}

.field-grid[b-1ao09cihxs] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 14px;
}

.field-grid[b-1ao09cihxs]  .span-2 {
    grid-column: span 2;
}

.address[b-1ao09cihxs] {
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    animation: fade-up 0.3s var(--ease-out);
}

.add-address[b-1ao09cihxs] {
    justify-self: start;
    font-size: 13px;
}

.add-address[b-1ao09cihxs]  i {
    font-size: 11px;
    transition: transform 0.3s var(--ease-spring);
}

.add-address:hover[b-1ao09cihxs]  i {
    transform: rotate(90deg);
}

/* Someone already has this number: say who, and offer their profile instead. */
.duplicate[b-1ao09cihxs] {
    display: block;
    margin-top: 4px;
    color: var(--status-waiting);
    font-size: 12px;
    font-weight: 600;
    animation: fade-up 0.25s var(--ease-out);
}

.duplicate[b-1ao09cihxs]  i {
    margin-right: 4px;
}

.duplicate a[b-1ao09cihxs] {
    margin-left: 4px;
    font-weight: 500;
}

@media (max-width: 899px) {
    .field-grid[b-1ao09cihxs] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .field-grid[b-1ao09cihxs] {
        grid-template-columns: minmax(0, 1fr);
    }

    .field-grid[b-1ao09cihxs]  .span-2 {
        grid-column: auto;
    }
}
/* /Components/Customers/DeviceFields.razor.rz.scp.css */
.device-fields[b-2exuoqe8cu] {
    display: grid;
    gap: 14px;
}

.field-grid[b-2exuoqe8cu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

@media (max-width: 520px) {
    .field-grid[b-2exuoqe8cu] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Customers/FeedbackPanel.razor.rz.scp.css */
.feedback[b-03f8uny8j4] {
    display: grid;
    gap: 14px;
    padding: 18px var(--pad) var(--pad);
}

/* The summary: the average, a bar per star, and the counts. */
.tiles[b-03f8uny8j4] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.score[b-03f8uny8j4] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.big[b-03f8uny8j4] {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    animation: count-in 0.6s var(--ease-out);
}

.score-text[b-03f8uny8j4] {
    display: grid;
    gap: 3px;
}

.of[b-03f8uny8j4] {
    font-size: 13px;
    font-weight: 600;
}

.bars[b-03f8uny8j4] {
    display: grid;
    gap: 4px;
    max-width: 420px;
}

.bar-row[b-03f8uny8j4] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    gap: 8px;
    align-items: center;
}

.track[b-03f8uny8j4] {
    height: 8px;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}

.fill[b-03f8uny8j4] {
    display: block;
    height: 100%;
    width: var(--fill);
    border-radius: 999px;
    background: var(--status-waiting);
    animation: grow-b-03f8uny8j4 0.9s var(--ease-out) both;
}

.figures[b-03f8uny8j4] {
    display: flex;
    gap: 24px;
}

.figures > div[b-03f8uny8j4] {
    display: grid;
}

.figures b[b-03f8uny8j4] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.how[b-03f8uny8j4] {
    margin: 0;
}

.chips[b-03f8uny8j4] {
    flex: none;
}

.chip[b-03f8uny8j4]  i {
    font-size: 12px;
}

.list[b-03f8uny8j4] {
    display: grid;
}

.item[b-03f8uny8j4] {
    display: flex;
    gap: 12px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
    animation: fade-up 0.3s var(--ease-out);
}

.item:last-child[b-03f8uny8j4] {
    border-bottom: 0;
}

.item-body[b-03f8uny8j4] {
    flex: 1;
    display: grid;
    gap: 6px;
    min-width: 0;
}

.who[b-03f8uny8j4] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.who > a[b-03f8uny8j4] {
    color: var(--text);
}

.who > a:hover[b-03f8uny8j4] {
    color: var(--accent);
}

.when[b-03f8uny8j4] {
    margin-left: auto;
}

.comments[b-03f8uny8j4] {
    margin: 0;
    padding: 10px 14px;
    border-radius: 4px 14px 14px 14px;
    background: var(--bubble);
    border: 1px solid var(--bubble-border);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.no-comment[b-03f8uny8j4] {
    margin: 0;
}

.look[b-03f8uny8j4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.look[b-03f8uny8j4]  .pill i {
    font-size: 11px;
}

.asked[b-03f8uny8j4] {
    display: flex;
    align-items: center;
    gap: 6px;
}

@keyframes grow-b-03f8uny8j4 {
    from {
        width: 0;
    }
}

@media (max-width: 899px) {
    .tiles[b-03f8uny8j4] {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}
/* /Components/Customers/MergeCustomerPanel.razor.rz.scp.css */
.merge[b-rrm6ra3eu8] {
    display: grid;
    gap: 14px;
}

.find[b-rrm6ra3eu8] {
    width: 100%;
}

.matches[b-rrm6ra3eu8] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.match[b-rrm6ra3eu8] {
    gap: 12px;
}

.match-text[b-rrm6ra3eu8] {
    flex: 1;
    display: grid;
    min-width: 0;
}

.chev[b-rrm6ra3eu8] {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring);
}

.match:hover .chev[b-rrm6ra3eu8] {
    transform: translateX(3px);
}

.hint[b-rrm6ra3eu8] {
    margin: 0;
}

.form-actions[b-rrm6ra3eu8] {
    justify-content: flex-end;
}

/* Step two: exactly what moves where, before it happens. */
.confirm[b-rrm6ra3eu8] {
    display: grid;
    gap: 14px;
    animation: fade-up 0.3s var(--ease-out);
}

.confirm p[b-rrm6ra3eu8] {
    margin: 0;
    max-width: 70ch;
}

.pair[b-rrm6ra3eu8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.pair > div[b-rrm6ra3eu8] {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    text-align: center;
}

.avatar.keep[b-rrm6ra3eu8] {
    border: 0;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

.arrow[b-rrm6ra3eu8] {
    color: var(--accent);
    animation: nudge-b-rrm6ra3eu8 1.4s ease-in-out infinite;
}

.warn[b-rrm6ra3eu8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--status-problem-soft);
    color: var(--status-problem);
    font-weight: 500;
}

@keyframes nudge-b-rrm6ra3eu8 {
    50% {
        transform: translateX(5px);
    }
}
/* /Components/Customers/Stars.razor.rz.scp.css */
.stars[b-18tpvaaqj9] {
    position: relative;
    display: inline-block;
    width: max-content;
    color: var(--border);
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
}

.on[b-18tpvaaqj9] {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    color: var(--status-waiting);
    animation: fill-in-b-18tpvaaqj9 0.9s var(--ease-out);
}

@keyframes fill-in-b-18tpvaaqj9 {
    from {
        width: 0;
    }
}
/* /Components/Inventory/MobileSentrixSearch.razor.rz.scp.css */
.ms-search[b-zzlva1oiz1] {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.ms-search .form-control[b-zzlva1oiz1] {
    flex: 1;
    min-width: 0;
}

.ms-results[b-zzlva1oiz1] {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ms-result[b-zzlva1oiz1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    align-items: center;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
}

.ms-result:first-child[b-zzlva1oiz1] {
    border-top: 0;
}

.ms-result.out .ms-what b[b-zzlva1oiz1] {
    color: var(--muted);
}

.ms-what[b-zzlva1oiz1] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ms-price[b-zzlva1oiz1] {
    font-weight: 700;
    text-align: right;
}

.ms-actions[b-zzlva1oiz1] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ms-order[b-zzlva1oiz1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.ms-order input[b-zzlva1oiz1] {
    width: 72px;
}

.ms-add[b-zzlva1oiz1] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr) minmax(140px, 1fr);
    gap: 10px 12px;
    align-items: end;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--bg);
}

.ms-add-actions[b-zzlva1oiz1] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 640px) {
    .ms-add[b-zzlva1oiz1] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Inventory/PartForm.razor.rz.scp.css */
/* The form sizes itself to the dialog or drawer it sits in, not to the window. */
.part-form[b-vn7gnoan8r] {
    container-type: inline-size;
}

.fields[b-vn7gnoan8r] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px;
}

.fields[b-vn7gnoan8r]  .span-all {
    grid-column: 1 / -1;
}

/* Cost, price and stock together, with the margin worked out as you go. */
.money[b-vn7gnoan8r] {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.money .fields[b-vn7gnoan8r] {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.margin[b-vn7gnoan8r] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.margin b[b-vn7gnoan8r] {
    color: var(--text);
}

.margin.loss[b-vn7gnoan8r] {
    color: var(--status-problem);
    font-weight: 600;
}

.form-actions[b-vn7gnoan8r] {
    justify-content: flex-end;
    padding-top: 4px;
}

@container (max-width: 620px) {
    .fields[b-vn7gnoan8r] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (max-width: 380px) {
    .fields[b-vn7gnoan8r],
    .money .fields[b-vn7gnoan8r] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Inventory/PartPanel.razor.rz.scp.css */
.panel-body[b-66okou13en] {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
}

.title-row[b-66okou13en] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.loading[b-66okou13en] {
    display: grid;
    align-content: start;
    gap: 12px;
}

.hero-skeleton[b-66okou13en] {
    height: 96px;
    border-radius: var(--radius-lg);
}

.tab-panel[b-66okou13en] {
    padding-top: 4px;
}

/* The big count on hand, with how it's doing beside it. */
.stock-hero[b-66okou13en] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.stock-figure[b-66okou13en] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.big[b-66okou13en] {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    animation: land-number-b-66okou13en 0.45s var(--ease-spring);
}

.big.low[b-66okou13en],
.big.out[b-66okou13en] {
    color: var(--status-problem);
}

.stock-state[b-66okou13en] {
    display: grid;
    justify-items: start;
    gap: 6px;
}

.small[b-66okou13en] {
    font-size: 13px;
}

.stock-forms[b-66okou13en] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.inline[b-66okou13en] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.inline[b-66okou13en]  .form-field {
    width: 96px;
}

.facts[b-66okou13en] {
    grid-template-columns: 110px minmax(0, 1fr);
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.description[b-66okou13en] {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    white-space: pre-line;
}

.foot[b-66okou13en] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.spacer[b-66okou13en] {
    flex: 1;
}

@keyframes land-number-b-66okou13en {
    from {
        opacity: 0.4;
        transform: scale(1.25);
    }
}
/* /Components/Inventory/UsedDeviceForm.razor.rz.scp.css */
/* The form sizes itself to the dialog or drawer it sits in, not to the window. */
.used-form[b-okgi29wm2i] {
    container-type: inline-size;
}

.fields[b-okgi29wm2i] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 14px;
}

.fields[b-okgi29wm2i]  .span-all {
    grid-column: 1 / -1;
}

/* Cost and price together, with the margin worked out as you go. */
.money[b-okgi29wm2i] {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.money .fields[b-okgi29wm2i] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.margin[b-okgi29wm2i] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.margin b[b-okgi29wm2i] {
    color: var(--text);
}

.margin.loss[b-okgi29wm2i] {
    color: var(--status-problem);
    font-weight: 600;
}

.form-actions[b-okgi29wm2i] {
    justify-content: flex-end;
    padding-top: 4px;
}

@container (max-width: 620px) {
    .fields[b-okgi29wm2i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (max-width: 380px) {
    .fields[b-okgi29wm2i],
    .money .fields[b-okgi29wm2i] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Inventory/UsedDevicePanel.razor.rz.scp.css */
.panel-body[b-tk8hmlzqbv] {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
}

.title-row[b-tk8hmlzqbv] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.loading[b-tk8hmlzqbv] {
    display: grid;
    align-content: start;
    gap: 12px;
}

.hero-skeleton[b-tk8hmlzqbv] {
    height: 110px;
    border-radius: var(--radius-lg);
}

.tab-panel[b-tk8hmlzqbv] {
    padding-top: 4px;
}

/* The device's picture beside its price. */
.hero[b-tk8hmlzqbv] {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 20px 22px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.hero[b-tk8hmlzqbv]  .thumb {
    transform: scale(1.35);
    margin: 8px 6px;
    animation: tilt-b-tk8hmlzqbv 0.7s var(--ease-spring) 0.15s;
}

.price[b-tk8hmlzqbv] {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    animation: count-in 0.5s var(--ease-out);
}

.small[b-tk8hmlzqbv] {
    font-size: 13px;
}

.callout[b-tk8hmlzqbv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 13px;
}

.callout.aging[b-tk8hmlzqbv] {
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
}

.facts[b-tk8hmlzqbv] {
    grid-template-columns: 120px minmax(0, 1fr);
}

.battery[b-tk8hmlzqbv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.meter[b-tk8hmlzqbv] {
    display: inline-block;
    width: 80px;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.meter span[b-tk8hmlzqbv] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--status-done);
    animation: fill-b-tk8hmlzqbv 0.8s var(--ease-out) both;
}

.meter span.weak[b-tk8hmlzqbv] {
    background: var(--status-waiting);
}

.notes[b-tk8hmlzqbv] {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    white-space: pre-wrap;
}

.foot[b-tk8hmlzqbv] {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.spacer[b-tk8hmlzqbv] {
    flex: 1;
}

@keyframes tilt-b-tk8hmlzqbv {
    30% {
        transform: scale(1.35) rotate(-8deg);
    }

    60% {
        transform: scale(1.35) rotate(5deg);
    }
}

@keyframes fill-b-tk8hmlzqbv {
    from {
        width: 0;
    }
}
/* /Components/Invoices/InvoiceActivity.razor.rz.scp.css */
.activity[b-dt136tw38g] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity li[b-dt136tw38g] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 14px;
    animation: fade-up 0.3s var(--ease-out);
}

/* A thin line joins the events, oldest at the bottom. */
.activity li:not(:last-child)[b-dt136tw38g]::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 36px;
    bottom: -9px;
    width: 2px;
    border-radius: 2px;
    background: var(--border);
}

/* Above the joining line, which a taller entry (a message with a second line) would otherwise cross. */
.dot[b-dt136tw38g] {
    position: relative;
    z-index: 1;
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    color: var(--tile-fg);
    background: var(--tile-bg);
}

.text[b-dt136tw38g] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.text[b-dt136tw38g]  .pill {
    margin-left: 4px;
    vertical-align: 1px;
}

/* Why a message didn't go out, under its line. */
.detail[b-dt136tw38g] {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.when[b-dt136tw38g] {
    flex: none;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

@media (max-width: 599px) {
    .activity li[b-dt136tw38g] {
        flex-wrap: wrap;
    }

    .when[b-dt136tw38g] {
        flex-basis: 100%;
        padding-left: 40px;
        margin-top: -6px;
    }
}
/* /Components/Invoices/InvoiceBalanceCard.razor.rz.scp.css */
.balance-card[b-tmnlolvw16] {
    display: grid;
    gap: 14px;
    padding: var(--pad);
}

.balance[b-tmnlolvw16] {
    display: grid;
    gap: 2px;
}

.label[b-tmnlolvw16] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.balance b[b-tmnlolvw16] {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    animation: count-in 0.6s var(--ease-out);
}

.balance .muted[b-tmnlolvw16] {
    font-size: 13px;
}

/* How much of the total is in: violet while it fills, green once it's all there. */
.meter[b-tmnlolvw16] {
    display: block;
    height: 8px;
    margin-top: 10px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.meter > span[b-tmnlolvw16] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--status-progress);
    transition: width 0.9s var(--ease-out), background-color 0.3s;
    animation: fill-b-tmnlolvw16 0.9s var(--ease-out);
}

.settled .label[b-tmnlolvw16],
.settled b[b-tmnlolvw16] {
    color: var(--status-done);
}

.settled .meter > span[b-tmnlolvw16] {
    background: var(--status-done);
}

.owed-back .label[b-tmnlolvw16],
.owed-back b[b-tmnlolvw16] {
    color: var(--status-problem);
}

.cancelled .label[b-tmnlolvw16],
.cancelled b[b-tmnlolvw16] {
    color: var(--status-neutral);
}

.cancelled .meter > span[b-tmnlolvw16] {
    background: var(--status-neutral);
}

.settle[b-tmnlolvw16] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

@keyframes fill-b-tmnlolvw16 {
    from {
        width: 0;
    }
}
/* /Components/Invoices/InvoiceLinesCard.razor.rz.scp.css */
.lines-card[b-0nlq0b3tl4] {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.lines-head[b-0nlq0b3tl4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ---------- Lines ---------- */

.lines tbody tr[b-0nlq0b3tl4] {
    cursor: default;
}

.lines td[b-0nlq0b3tl4] {
    vertical-align: top;
}

.lines small[b-0nlq0b3tl4] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lines .actions-cell[b-0nlq0b3tl4] {
    width: 1%;
    padding: 4px 6px;
    white-space: nowrap;
    vertical-align: middle;
}

.remove:hover[b-0nlq0b3tl4] {
    color: var(--status-problem);
}

.discounted[b-0nlq0b3tl4] {
    color: var(--status-done) !important;
    font-weight: 500;
}

/* ---------- Money ---------- */

.totals[b-0nlq0b3tl4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 6px 24px;
    align-items: center;
    width: min(360px, 100%);
    margin-left: auto;
    font-size: 14px;
}

.totals .num[b-0nlq0b3tl4] {
    text-align: right;
}

.discount-line[b-0nlq0b3tl4] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.icon-button.small[b-0nlq0b3tl4] {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.icon-button.small:hover[b-0nlq0b3tl4] {
    color: var(--status-problem);
}

.total[b-0nlq0b3tl4] {
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 18px;
    font-weight: 700;
}

/* ---------- The add, change and discount dialogs ---------- */

.adder[b-0nlq0b3tl4] {
    gap: 14px;
}

.two[b-0nlq0b3tl4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.presets[b-0nlq0b3tl4] {
    display: grid;
    gap: 6px;
}

.form-actions.end[b-0nlq0b3tl4] {
    justify-content: flex-end;
}

@media (max-width: 599px) {
    .two[b-0nlq0b3tl4] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Phones: each line is a small card. Name and actions on top, "qty × price" and amount below. */
    table.lines[b-0nlq0b3tl4],
    .lines tbody[b-0nlq0b3tl4] {
        display: block;
    }

    .lines thead[b-0nlq0b3tl4] {
        display: none;
    }

    .lines tbody tr[b-0nlq0b3tl4] {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        column-gap: 8px;
        row-gap: 2px;
        align-items: center;
        padding: 10px 4px;
        border-bottom: 1px solid var(--border);
    }

    .lines tbody tr:last-child[b-0nlq0b3tl4] {
        border-bottom: 0;
    }

    .lines tbody td[b-0nlq0b3tl4] {
        display: block;
        padding: 0;
        border: 0;
    }

    .lines tbody td:first-child[b-0nlq0b3tl4] {
        grid-column: 1 / 4;
    }

    .lines tbody td.actions-cell[b-0nlq0b3tl4] {
        grid-column: 4;
        grid-row: 1 / 3;
        padding: 0;
    }

    /* Placed explicitly, so rows without an actions cell (a locked list) line up the same. */
    .lines tbody td:nth-child(2)[b-0nlq0b3tl4] {
        grid-row: 2;
        grid-column: 1;
    }

    .lines tbody td:nth-child(2)[b-0nlq0b3tl4]::after {
        content: " ×";
    }

    .lines tbody td:nth-child(3)[b-0nlq0b3tl4] {
        grid-row: 2;
        grid-column: 2;
    }

    .lines tbody td:nth-child(4)[b-0nlq0b3tl4] {
        grid-row: 2;
        grid-column: 3;
    }
}
/* /Components/Invoices/InvoicePaymentPanel.razor.rz.scp.css */
.payments-panel[b-px0rqummia] {
    display: grid;
    gap: 12px;
}

.transactions[b-px0rqummia] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.transactions > li[b-px0rqummia] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    animation: fade-up 0.3s var(--ease-out);
}

.transactions > li:last-child[b-px0rqummia] {
    border-bottom: 0;
}

.transactions > li.removed[b-px0rqummia] {
    opacity: 0.6;
}

.transactions > li.removed .amount[b-px0rqummia] {
    text-decoration: line-through;
}

.what[b-px0rqummia] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.what .muted[b-px0rqummia] {
    font-size: 13px;
}

.tags[b-px0rqummia] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.amount[b-px0rqummia] {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.amount.refund[b-px0rqummia] {
    color: var(--status-problem);
}

.row-actions[b-px0rqummia] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.remove:hover[b-px0rqummia] {
    color: var(--status-problem);
}

/* ---------- The confirm dialogs ---------- */

.warn[b-px0rqummia] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--status-problem-soft);
    color: var(--status-problem);
    font-size: 13px;
    font-weight: 500;
}

.warn[b-px0rqummia]  i {
    margin-top: 2px;
}

.what-happens[b-px0rqummia] {
    margin: 0;
}

.two[b-px0rqummia] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.form-actions.end[b-px0rqummia] {
    justify-content: flex-end;
}

@media (max-width: 599px) {
    .two[b-px0rqummia] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Phones: the actions drop under the entry. */
    .transactions > li[b-px0rqummia] {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .row-actions[b-px0rqummia] {
        grid-column: 2 / -1;
    }
}

.to-card[b-px0rqummia] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    cursor: pointer;
}

.to-card > span[b-px0rqummia] {
    display: grid;
    gap: 2px;
}
/* /Components/Invoices/PayOnlineCard.razor.rz.scp.css */
.body[b-4elzu3e9on] {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

/* The code keeps a white quiet zone in dark mode too, or phones can't read it. */
.code[b-4elzu3e9on] {
    display: block;
    width: 104px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #ffffff;
}

.words[b-4elzu3e9on] {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.words p[b-4elzu3e9on] {
    margin: 0;
    font-size: 13px;
}

.actions[b-4elzu3e9on] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 380px) {
    .body[b-4elzu3e9on] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Invoices/ReaderChargePanel.razor.rz.scp.css */
.reader-wait[b-smmoxpbz3s] {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 24px 8px 4px;
    text-align: center;
}

.reader-wait > b[b-smmoxpbz3s] {
    font-size: 34px;
    letter-spacing: -0.02em;
}

.reader-pulse[b-smmoxpbz3s] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 26px;
    animation: reader-pulse-b-smmoxpbz3s 1.6s infinite;
}

.actions[b-smmoxpbz3s] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

@keyframes reader-pulse-b-smmoxpbz3s {
    50% {
        box-shadow: 0 0 0 6px var(--accent-soft);
        transform: scale(0.94);
    }
}
/* /Components/Invoices/SpotApprovalFields.razor.rz.scp.css */
.spot-approval[b-wayfet0w4p] {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--status-waiting, var(--border));
    border-radius: var(--radius);
    background: var(--status-waiting-soft, var(--surface-2));
}

.ask[b-wayfet0w4p] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.fields[b-wayfet0w4p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
/* /Components/Invoices/TakePaymentDialog.razor.rz.scp.css */
/* What's left to pay, big enough to read from across the counter. */
.to-pay[b-a488f1ntdn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.to-pay b[b-a488f1ntdn] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    animation: count-in 0.45s var(--ease-spring);
}

.taken[b-a488f1ntdn] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.taken li[b-a488f1ntdn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    animation: fade-up 0.3s var(--ease-out);
}

.taken[b-a488f1ntdn]  i {
    color: var(--status-done);
}

.taken .num[b-a488f1ntdn] {
    margin-left: auto;
}

.payment-form[b-a488f1ntdn] {
    display: grid;
    gap: 14px;
}

/* Tender tiles: a big target each, the chosen one in accent-soft. */
.methods[b-a488f1ntdn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.method[b-a488f1ntdn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 68px;
    padding: 8px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, transform 0.15s var(--ease-spring);
}

.method[b-a488f1ntdn]  i {
    font-size: 17px;
    color: var(--muted);
}

.method:hover[b-a488f1ntdn] {
    border-color: var(--field-border);
}

.method:active[b-a488f1ntdn] {
    transform: scale(0.95);
}

.method.on[b-a488f1ntdn] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    box-shadow: inset 0 0 0 1px var(--accent-fill);
}

.method.on[b-a488f1ntdn]  i {
    color: var(--accent-soft-fg);
}

.method small[b-a488f1ntdn] {
    font-size: 11px;
    font-weight: 600;
    color: var(--status-done);
}

.method.on small[b-a488f1ntdn] {
    color: inherit;
}

.two[b-a488f1ntdn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.big[b-a488f1ntdn] {
    height: 48px;
    font-size: 20px;
    font-weight: 600;
}

.quick-cash[b-a488f1ntdn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: -6px;
}

/* Change due, in large type (DESIGN.md §18.4). */
.change-due[b-a488f1ntdn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    background: var(--status-done-soft);
    color: var(--status-done);
}

.change-due span[b-a488f1ntdn] {
    font-weight: 600;
}

.change-due b[b-a488f1ntdn] {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    animation: pop-b-a488f1ntdn 0.45s var(--ease-spring);
}

.earlier[b-a488f1ntdn] {
    justify-self: start;
    font-size: 13px;
}

.pay-actions[b-a488f1ntdn] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

/* ---------- Paid: a moment to enjoy, then the receipt ---------- */

.done[b-a488f1ntdn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 6px 0 2px;
    text-align: center;
}

.done h3[b-a488f1ntdn] {
    margin: 4px 0 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.done p[b-a488f1ntdn] {
    margin: 0;
}

.done .change-due b[b-a488f1ntdn] {
    font-size: 40px;
}

.done-check[b-a488f1ntdn] {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--status-done);
    color: var(--surface);
    font-size: 34px;
    animation: pop-b-a488f1ntdn 0.6s var(--ease-spring);
}

.done-check[b-a488f1ntdn]  .confetti {
    left: 50%;
}

.receipt[b-a488f1ntdn] {
    display: grid;
    justify-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.receipt .chips-row[b-a488f1ntdn] {
    justify-content: center;
}

.receipt-head[b-a488f1ntdn] {
    display: grid;
    justify-items: center;
    gap: 2px;
}

.receipt .chip[b-a488f1ntdn]  i {
    font-size: 12px;
}

.done-actions[b-a488f1ntdn] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding-top: 6px;
}

@keyframes pop-b-a488f1ntdn {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    60% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@media (max-width: 599px) {
    .two[b-a488f1ntdn] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pay-actions .btn-primary[b-a488f1ntdn],
    .done-actions .btn[b-a488f1ntdn] {
        flex: 1 1 100%;
    }
}
/* /Components/Layout/AccountLayout.razor.rz.scp.css */
.account-stage[b-p2uzlwu0a9] {
    display: flex;
    min-height: 100vh;
    background: radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0 / 22px 22px, var(--bg);
}

/* The branded panel, when the page gives it one: the left side on wide screens only. */
.account-side[b-p2uzlwu0a9] {
    flex: 1 1 0;
    min-width: 0;
}

.account-side:empty[b-p2uzlwu0a9] {
    display: none;
}

.account-column[b-p2uzlwu0a9] {
    flex: 1.05 1 0;
    min-width: 0;
    display: grid;
    place-items: center;
    padding: max(32px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px));
}

.account-card[b-p2uzlwu0a9] {
    position: relative;
    width: min(440px, 100%);
    display: grid;
    gap: 18px;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: var(--overlay-shadow);
    animation: card-in-b-p2uzlwu0a9 0.45s var(--ease-spring);
}

/* Pages with more to show (picking a store, first-run setup) ask for a wider card. */
.account-card:has(.wide-card)[b-p2uzlwu0a9] {
    width: min(540px, 100%);
}

.brand[b-p2uzlwu0a9] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    justify-self: start;
    color: var(--text);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* The OnSite mark: a ring on the accent. It wobbles when you point at it. */
.brand-mark[b-p2uzlwu0a9] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-fill);
    display: grid;
    place-items: center;
}

.brand-mark[b-p2uzlwu0a9]::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 3px solid #ffffff;
}

.brand:hover .brand-mark[b-p2uzlwu0a9] {
    animation: wobble-b-p2uzlwu0a9 0.6s var(--ease-spring);
}

@keyframes card-in-b-p2uzlwu0a9 {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }
}

@keyframes wobble-b-p2uzlwu0a9 {
    25% {
        transform: rotate(-14deg);
    }

    60% {
        transform: rotate(10deg);
    }
}

@media (min-width: 900px) {
    /* The panel carries the name, so the card doesn't repeat it. */
    .account-side:not(:empty) + .account-column .brand[b-p2uzlwu0a9] {
        display: none;
    }
}

@media (max-width: 899px) {
    .account-side[b-p2uzlwu0a9] {
        display: none;
    }
}

/* Phones: the card is the page. */
@media (max-width: 480px) {
    .account-stage[b-p2uzlwu0a9] {
        background: var(--surface);
    }

    .account-column[b-p2uzlwu0a9] {
        place-items: stretch;
        align-content: start;
        padding: 0;
    }

    .account-card[b-p2uzlwu0a9],
    .account-card:has(.wide-card)[b-p2uzlwu0a9] {
        width: 100%;
        padding: max(28px, env(safe-area-inset-top, 0px)) 20px 32px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        animation: none;
    }
}
/* /Components/Layout/BillingBanner.razor.rz.scp.css */
.billing-banner[b-ys24j71jox] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: var(--radius);
    font-size: 13.5px;
}

.past-due[b-ys24j71jox] {
    background: var(--status-waiting-soft);
    color: var(--text);
}

.past-due[b-ys24j71jox]  i {
    color: var(--status-waiting);
}

.read-only[b-ys24j71jox] {
    background: var(--status-problem-soft);
    color: var(--text);
}

.read-only[b-ys24j71jox]  i {
    color: var(--status-problem);
}

.billing-banner[b-ys24j71jox]  i {
    margin-top: 2px;
}

.billing-banner > span:not(.links)[b-ys24j71jox] {
    flex: 1;
    min-width: 0;
}

.links[b-ys24j71jox] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* /Components/Layout/CounterLayout.razor.rz.scp.css */
/* The page fills the screen; it lays out its own top bar and margins. */
.counter-shell[b-da8km5muz8] {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
}
/* /Components/Layout/GlobalSearch.razor.rz.scp.css */
.search[b-w0nsxzaafv] {
    position: relative;
    flex: 1;
    max-width: 440px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: var(--surface-2);
    color: var(--muted);
    min-width: 0;
}

.search:focus-within[b-w0nsxzaafv] {
    border-color: var(--accent-fill);
    box-shadow: var(--focus-ring);
}

.search input[b-w0nsxzaafv] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 14px;
}

.search:hover[b-w0nsxzaafv] {
    border-color: var(--border);
}

.shortcut[b-w0nsxzaafv] {
    flex: none;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--surface);
    color: var(--muted);
    font-family: inherit;
    font-size: 11px;
}

.search:focus-within .shortcut[b-w0nsxzaafv] {
    display: none;
}

@media (max-width: 899px) {
    .shortcut[b-w0nsxzaafv] {
        display: none;
    }
}

.search input[b-w0nsxzaafv]::placeholder {
    color: var(--muted);
}

.results[b-w0nsxzaafv] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1030;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--overlay-shadow);
}

.result[b-w0nsxzaafv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
}

.result.highlighted[b-w0nsxzaafv],
.result:hover[b-w0nsxzaafv] {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

.kind[b-w0nsxzaafv] {
    flex: none;
    width: 20px;
    color: var(--muted);
    text-align: center;
}

.text[b-w0nsxzaafv] {
    display: grid;
    min-width: 0;
    font-size: 13.5px;
}

.text b[b-w0nsxzaafv],
.text span[b-w0nsxzaafv] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text span[b-w0nsxzaafv] {
    color: var(--muted);
    font-size: 12.5px;
}

.result.all[b-w0nsxzaafv] {
    justify-content: center;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
}

.heading[b-w0nsxzaafv] {
    padding: 6px 10px 4px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.shell[b-nt2d0hluqy] {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    min-height: 100vh;
}

.shell-main[b-nt2d0hluqy] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Each page slides up into place as it opens. */
.shell-content[b-nt2d0hluqy] {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    max-width: 1480px;
    padding: 28px 32px 64px;
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
    animation: page-in 0.35s var(--ease-out);
}

.shell-content[b-nt2d0hluqy] >  * {
    min-width: 0;
    max-width: 100%;
}

.navigation-scrim[b-nt2d0hluqy],
.tab-bar[b-nt2d0hluqy] {
    display: none;
}

@media (max-width: 899px) {
    .shell[b-nt2d0hluqy] {
        grid-template-columns: minmax(0, 1fr);
    }

    .shell[b-nt2d0hluqy]  .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: 264px;
        height: 100%;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform 0.25s var(--ease-out);
    }

    .shell.navigation-open[b-nt2d0hluqy]  .sidebar {
        transform: none;
        box-shadow: var(--overlay-shadow);
    }

    .shell.navigation-open .navigation-scrim[b-nt2d0hluqy] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1030;
        background: var(--scrim);
    }

    .shell-content[b-nt2d0hluqy] {
        padding: 20px 16px 110px;
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .tab-bar[b-nt2d0hluqy] {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1025;
        padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
        background: var(--surface);
        border-top: 1px solid var(--border);
    }

    .tab-bar[b-nt2d0hluqy]  a,
    .tab-bar button[b-nt2d0hluqy] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 4px;
        border: 0;
        background: none;
        color: var(--muted);
        font-size: 11px;
        text-decoration: none;
    }

    .tab-bar[b-nt2d0hluqy]  a i,
    .tab-bar button[b-nt2d0hluqy]  i {
        font-size: 20px;
    }

    .tab-bar[b-nt2d0hluqy]  a.active {
        color: var(--accent);
    }

    .tab-new span[b-nt2d0hluqy] {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        margin-top: -22px;
        border-radius: 50%;
        background: var(--accent-fill);
        color: var(--on-accent);
        box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-fill) 40%, transparent);
        transition: transform 0.2s var(--ease-spring);
    }

    .tab-new:active span[b-nt2d0hluqy] {
        transform: scale(0.9);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shell[b-nt2d0hluqy]  .sidebar {
        transition: none;
    }
}

.no-store[b-nt2d0hluqy] {
    padding: 40px 20px;
}

.no-store .btn[b-nt2d0hluqy] {
    margin-top: 6px;
}
/* /Components/Layout/NotificationBell.razor.rz.scp.css */
.bell[b-dbtg9jiqcp] {
    position: relative;
}

.icon-button[b-dbtg9jiqcp] {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.icon-button:hover[b-dbtg9jiqcp] {
    background: var(--surface-2);
    color: var(--text);
}

.icon-button:hover[b-dbtg9jiqcp]  i {
    animation: ring-b-dbtg9jiqcp 0.7s ease;
    transform-origin: 50% 0;
}

@keyframes ring-b-dbtg9jiqcp {
    15% { transform: rotate(16deg); }
    35% { transform: rotate(-14deg); }
    55% { transform: rotate(8deg); }
    75% { transform: rotate(-4deg); }
}

.unread[b-dbtg9jiqcp] {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--status-problem-solid);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

.backdrop[b-dbtg9jiqcp] {
    position: fixed;
    inset: 0;
    z-index: 1029;
}

.panel-pop[b-dbtg9jiqcp] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1030;
    width: min(380px, calc(100vw - 24px));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--overlay-shadow);
}

.pop-head[b-dbtg9jiqcp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 8px;
}

.pop-head h2[b-dbtg9jiqcp] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.nothing[b-dbtg9jiqcp] {
    margin: 0;
    padding: 4px 14px 16px;
    font-size: 13px;
}

ul[b-dbtg9jiqcp] {
    margin: 0;
    padding: 0 6px 6px;
    list-style: none;
}

li button[b-dbtg9jiqcp] {
    display: flex;
    gap: 10px;
    width: 100%;
    padding: 10px 8px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

li button:hover[b-dbtg9jiqcp] {
    background: var(--surface-2);
}

.dot[b-dbtg9jiqcp] {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
}

li.new .dot[b-dbtg9jiqcp] {
    background: var(--accent-fill);
}

li.new .text[b-dbtg9jiqcp] {
    font-weight: 600;
}

.text[b-dbtg9jiqcp] {
    display: grid;
    gap: 2px;
}

.text .small[b-dbtg9jiqcp] {
    font-size: 12px;
    font-weight: 400;
}

@media (max-width: 599px) {
    .panel-pop[b-dbtg9jiqcp] {
        position: fixed;
        top: calc(56px + env(safe-area-inset-top, 0px));
        left: 12px;
        right: 12px;
        width: auto;
    }
}
/* /Components/Layout/ShiftClock.razor.rz.scp.css */
.time-clock[b-hccrqd5ll6] {
    position: relative;
}

/* A top-bar chip (DESIGN.md §8): a full pill, hairline outline, a coloured dot when it says something. */
.clock-chip[b-hccrqd5ll6] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, transform 0.15s var(--ease-spring);
}

.clock-chip:hover[b-hccrqd5ll6] {
    background: var(--surface-2);
}

.clock-chip:active[b-hccrqd5ll6] {
    transform: scale(0.96);
}

.clock-chip:disabled[b-hccrqd5ll6] {
    cursor: progress;
    opacity: 0.7;
}

.clock-chip.off[b-hccrqd5ll6] {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent-fill) 35%, var(--border));
}

.clock-chip.off:hover[b-hccrqd5ll6] {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

.clock-chip[b-hccrqd5ll6]  .timer {
    font-weight: 600;
    min-width: 7.5ch;
    text-align: left;
}

.dot[b-hccrqd5ll6] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-done);
}

.clock-chip.on .dot[b-hccrqd5ll6] {
    animation: clock-pulse-b-hccrqd5ll6 2.4s infinite;
}

.clock-chip.break .dot[b-hccrqd5ll6] {
    background: var(--status-waiting);
}

.clock-chip.forgotten[b-hccrqd5ll6] {
    border-color: color-mix(in srgb, var(--status-problem) 45%, var(--border));
    color: var(--status-problem);
}

.clock-chip.forgotten .dot[b-hccrqd5ll6] {
    background: var(--status-problem-solid);
    animation: clock-pulse-problem-b-hccrqd5ll6 2.4s infinite;
}

/* The dot says it on a wide screen; on a phone the chip is just the icon. */
.clock-chip.forgotten[b-hccrqd5ll6]  i {
    display: none;
}

/* The timesheet page's main button (the approved mockup): Clock in, or the running shift. */
.clock-big[b-hccrqd5ll6] {
    min-width: 196px;
    justify-content: center;
    gap: 8px;
}

.clock-big[b-hccrqd5ll6]  .timer {
    font-weight: 600;
}

.clock-big.on .dot[b-hccrqd5ll6] {
    animation: clock-pulse-b-hccrqd5ll6 2.4s infinite;
}

.clock-big.break .dot[b-hccrqd5ll6] {
    background: var(--status-waiting);
}

.clock-big.forgotten[b-hccrqd5ll6] {
    color: var(--status-problem);
}

.clock-big.forgotten .dot[b-hccrqd5ll6] {
    background: var(--status-problem-solid);
}

.clock-scrim[b-hccrqd5ll6] {
    position: fixed;
    inset: 0;
    z-index: 1050;
}

.clock-pop[b-hccrqd5ll6] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1060;
    display: grid;
    gap: 10px;
    width: min(300px, calc(100vw - 24px));
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--overlay-shadow);
    animation: clock-pop-in-b-hccrqd5ll6 0.2s var(--ease-spring);
    transform-origin: top right;
}

.clock-pop p[b-hccrqd5ll6] {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

.pop-title[b-hccrqd5ll6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.pop-title.forgotten[b-hccrqd5ll6] {
    color: var(--status-problem);
}

.worked[b-hccrqd5ll6] {
    display: grid;
    gap: 2px;
}

.worked[b-hccrqd5ll6]  .big {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.on-break[b-hccrqd5ll6] {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--radius);
    background: var(--status-waiting-soft);
    color: var(--status-waiting) !important;
}

.pop-actions[b-hccrqd5ll6] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pop-actions .btn[b-hccrqd5ll6] {
    flex: 1 1 auto;
}

.end-form[b-hccrqd5ll6] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.end-form input[b-hccrqd5ll6] {
    width: 8.5em;
}

.error[b-hccrqd5ll6] {
    color: var(--status-problem) !important;
}

.link-more[b-hccrqd5ll6] {
    justify-self: start;
}

@keyframes clock-pulse-b-hccrqd5ll6 {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-done) 55%, transparent);
    }

    70%,
    100% {
        box-shadow: 0 0 0 7px transparent;
    }
}

@keyframes clock-pulse-problem-b-hccrqd5ll6 {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-problem) 55%, transparent);
    }

    70%,
    100% {
        box-shadow: 0 0 0 7px transparent;
    }
}

@keyframes clock-pop-in-b-hccrqd5ll6 {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(-4px);
    }
}

@media (max-width: 899px) {
    .clock-chip .label[b-hccrqd5ll6] {
        display: none;
    }

    .clock-chip[b-hccrqd5ll6] {
        padding: 0 10px;
        gap: 6px;
    }

    .clock-chip.off[b-hccrqd5ll6],
    .clock-chip.forgotten[b-hccrqd5ll6] {
        width: 34px;
        padding: 0;
        justify-content: center;
    }

    .clock-chip.forgotten .dot[b-hccrqd5ll6] {
        display: none;
    }

    .clock-chip.forgotten[b-hccrqd5ll6]  i {
        display: inline-block;
    }
}

@media (max-width: 599px) {
    .clock-pop[b-hccrqd5ll6] {
        position: fixed;
        top: calc(56px + env(safe-area-inset-top, 0px));
        left: 12px;
        right: 12px;
        width: auto;
    }
}
/* /Components/Layout/Sidebar.razor.rz.scp.css */
.sidebar[b-snp12ft4l4] {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 18px 12px;
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

.brand[b-snp12ft4l4] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 10px 18px;
    color: var(--text);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.brand:hover[b-snp12ft4l4] {
    text-decoration: none;
}

/* The OnSite mark: a ring on the accent. It wobbles when you point at it. */
.brand-mark[b-snp12ft4l4] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-fill);
    display: grid;
    place-items: center;
}

.brand-mark[b-snp12ft4l4]::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 3px solid #ffffff;
}

.brand:hover .brand-mark[b-snp12ft4l4] {
    animation: wobble-b-snp12ft4l4 0.6s var(--ease-spring);
}

.navigation-group[b-snp12ft4l4] {
    display: grid;
    gap: 2px;
}

.navigation-group h2[b-snp12ft4l4] {
    margin: 0;
    padding: 2px 10px 4px;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
}

.navigation-rule[b-snp12ft4l4] {
    height: 1px;
    margin: 10px 8px;
    background: var(--border);
}

.navigation-group[b-snp12ft4l4]  .navigation-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s, color 0.15s;
}

.navigation-group[b-snp12ft4l4]  .navigation-item i {
    width: 18px;
    text-align: center;
    color: var(--muted);
    transition: transform 0.2s var(--ease-spring), color 0.15s;
}

.navigation-group[b-snp12ft4l4]  .navigation-item:hover {
    background: var(--surface-2);
}

.navigation-group[b-snp12ft4l4]  .navigation-item:hover i {
    transform: scale(1.12) rotate(-6deg);
}

.navigation-group[b-snp12ft4l4]  .navigation-item.active {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

.navigation-group[b-snp12ft4l4]  .navigation-item.active i {
    color: var(--accent-soft-fg);
}

.navigation-group[b-snp12ft4l4]  .count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.navigation-group[b-snp12ft4l4]  .navigation-item.active .count {
    color: inherit;
}

.sidebar-foot[b-snp12ft4l4] {
    margin-top: auto;
    padding: 16px 10px 0;
    font-size: 12px;
    color: var(--muted);
}

@keyframes wobble-b-snp12ft4l4 {
    25% {
        transform: rotate(-14deg);
    }

    60% {
        transform: rotate(10deg);
    }
}
/* /Components/Layout/StatusChips.razor.rz.scp.css */
.status-chip[b-jz228xs7a0] {
    position: relative;
}

.chip-button[b-jz228xs7a0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s;
}

.chip-button:hover[b-jz228xs7a0] {
    background: var(--surface-2);
}

.dot[b-jz228xs7a0] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot.support[b-jz228xs7a0] {
    background: var(--status-progress);
}

.dot.waiting[b-jz228xs7a0] {
    background: var(--status-waiting);
}

.dot.pulse[b-jz228xs7a0] {
    animation: pulse-b-jz228xs7a0 2.4s infinite;
}

.chip-scrim[b-jz228xs7a0] {
    position: fixed;
    inset: 0;
    z-index: 1050;
}

.chip-pop[b-jz228xs7a0] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1060;
    display: grid;
    gap: 6px;
    justify-items: start;
    width: min(320px, calc(100vw - 24px));
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--overlay-shadow);
    animation: pop-in-b-jz228xs7a0 0.2s var(--ease-spring);
    transform-origin: top right;
}

.chip-pop p[b-jz228xs7a0] {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--muted);
}

.chip-pop p b[b-jz228xs7a0] {
    color: var(--text);
}

@keyframes pulse-b-jz228xs7a0 {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-waiting) 55%, transparent);
    }

    70%,
    100% {
        box-shadow: 0 0 0 7px transparent;
    }
}

@keyframes pop-in-b-jz228xs7a0 {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(-4px);
    }
}

@media (max-width: 899px) {
    .label[b-jz228xs7a0] {
        display: none;
    }

    .chip-button[b-jz228xs7a0] {
        width: 30px;
        padding: 0;
        justify-content: center;
    }
}
/* /Components/Layout/TopBar.razor.rz.scp.css */
.topbar[b-jiejth3chc] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 0 24px;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.topbar-end[b-jiejth3chc] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-button[b-jiejth3chc] {
    display: none;
}

@media (max-width: 899px) {
    .topbar[b-jiejth3chc] {
        gap: 8px;
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }

    .menu-button[b-jiejth3chc] {
        display: inline-grid;
    }

    .topbar-end[b-jiejth3chc] {
        gap: 4px;
    }
}
/* /Components/Layout/UserMenu.razor.rz.scp.css */
.user-menu[b-y0fj3t7a1z] {
    position: relative;
}

.store-button[b-y0fj3t7a1z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    text-align: left;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.15s;
}

.store-button:hover[b-y0fj3t7a1z],
.store-button[aria-expanded="true"][b-y0fj3t7a1z] {
    background: var(--surface-2);
}

.store-button[b-y0fj3t7a1z] >  i {
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.25s var(--ease-spring);
}

.store-button[aria-expanded="true"][b-y0fj3t7a1z] >  i {
    transform: rotate(180deg);
}

.who[b-y0fj3t7a1z] {
    display: grid;
    min-width: 0;
}

.who b[b-y0fj3t7a1z] {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.who span[b-y0fj3t7a1z] {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.avatar[b-y0fj3t7a1z] {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    background: var(--navy);
    color: #ffffff;
}

.avatar.photo[b-y0fj3t7a1z] {
    object-fit: cover;
}

.menu-scrim[b-y0fj3t7a1z] {
    position: fixed;
    inset: 0;
    z-index: 1050;
}

.menu-panel[b-y0fj3t7a1z] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1060;
    width: min(340px, calc(100vw - 24px));
    max-height: min(80vh, 640px);
    overflow-y: auto;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--overlay-shadow);
    transform-origin: top right;
    animation: pop-in-b-y0fj3t7a1z 0.2s var(--ease-spring);
}

.menu-title[b-y0fj3t7a1z],
.business[b-y0fj3t7a1z] {
    padding: 6px 10px 4px;
    font-size: 12px;
    color: var(--muted);
}

.business[b-y0fj3t7a1z] {
    font-weight: 600;
}

.menu-rule[b-y0fj3t7a1z] {
    height: 1px;
    margin: 6px 0;
    background: var(--border);
}

.store-option[b-y0fj3t7a1z],
.menu-item[b-y0fj3t7a1z] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.store-option:hover:not(:disabled)[b-y0fj3t7a1z],
.menu-item:hover[b-y0fj3t7a1z] {
    background: var(--surface-2);
    text-decoration: none;
}

.store-option.current[b-y0fj3t7a1z] {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    cursor: default;
}

.store-option[b-y0fj3t7a1z] >  i {
    margin-left: auto;
}

.menu-item[b-y0fj3t7a1z] >  i {
    width: 18px;
    color: var(--muted);
    text-align: center;
}

.menu-item .meta[b-y0fj3t7a1z] {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
}

.store-code[b-y0fj3t7a1z] {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 12px;
    font-weight: 700;
}

.store-option.current .store-code[b-y0fj3t7a1z] {
    background: var(--accent-fill);
    color: var(--on-accent);
}

.store-text[b-y0fj3t7a1z] {
    display: grid;
    min-width: 0;
}

.store-text b[b-y0fj3t7a1z] {
    font-size: 14px;
    font-weight: 600;
}

.store-text span[b-y0fj3t7a1z] {
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.store-option.current .store-text span[b-y0fj3t7a1z] {
    color: inherit;
    opacity: 0.85;
}

/* Every store on the server, for a platform administrator: it can be a long list. */
.support-list[b-y0fj3t7a1z] {
    max-height: min(40vh, 360px);
    overflow-y: auto;
}

@keyframes pop-in-b-y0fj3t7a1z {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(-4px);
    }
}

@media (max-width: 899px) {
    .who[b-y0fj3t7a1z] {
        display: none;
    }

    .store-button[b-y0fj3t7a1z] {
        padding-right: 4px;
    }

    .store-button[b-y0fj3t7a1z] >  i {
        display: none;
    }
}
/* /Components/Loaners/LendLoanerForm.razor.rz.scp.css */
.lend-form[b-z7fxhrj0ss] {
    gap: 14px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.lend-form.in-dialog[b-z7fxhrj0ss] {
    gap: 16px;
    padding: 0;
    background: none;
}

.form-field[b-z7fxhrj0ss] {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.field-label[b-z7fxhrj0ss] {
    font-size: 13px;
    font-weight: 500;
}

.required[b-z7fxhrj0ss] {
    color: var(--status-problem);
}

.field-error[b-z7fxhrj0ss] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--status-problem);
}

.small[b-z7fxhrj0ss] {
    font-size: 12.5px;
}

.none[b-z7fxhrj0ss] {
    margin: 0;
}

/* The free loaners as tiles: tap one. */
.loaner-tiles[b-z7fxhrj0ss] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.loaner-tile[b-z7fxhrj0ss] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, transform 0.15s var(--ease-spring);
}

.loaner-tile:hover[b-z7fxhrj0ss] {
    border-color: var(--field-border);
}

.loaner-tile:active[b-z7fxhrj0ss] {
    transform: scale(0.97);
}

.loaner-tile.on[b-z7fxhrj0ss] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent-fill);
}

.loaner-tile.on b[b-z7fxhrj0ss] {
    color: var(--accent-soft-fg);
}

.loaner-tile[b-z7fxhrj0ss]  .thumb {
    transition: transform 0.3s var(--ease-spring);
}

.loaner-tile:hover[b-z7fxhrj0ss]  .thumb {
    transform: rotate(-8deg) scale(0.75);
}

.tile-text[b-z7fxhrj0ss] {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.tile-text .muted[b-z7fxhrj0ss] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.search-box[b-z7fxhrj0ss] {
    position: relative;
}

.search-box[b-z7fxhrj0ss] >  i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 13px;
    pointer-events: none;
}

.search-box .form-control[b-z7fxhrj0ss] {
    padding-left: 34px;
}

.matches[b-z7fxhrj0ss] {
    display: grid;
    gap: 2px;
    max-height: 240px;
    padding: 4px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--overlay-shadow);
    animation: fade-up 0.2s var(--ease-out);
}

.match[b-z7fxhrj0ss] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.match:hover[b-z7fxhrj0ss],
.match:focus-visible[b-z7fxhrj0ss] {
    background: var(--accent-soft);
}

.flag[b-z7fxhrj0ss] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: var(--status-problem);
    font-size: 12px;
    font-weight: 600;
}

.picked[b-z7fxhrj0ss] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    animation: land 0.35s var(--ease-spring);
}

.picked-text[b-z7fxhrj0ss] {
    flex: 1;
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.picked-text .muted[b-z7fxhrj0ss] {
    font-size: 12px;
}

.flag-warning[b-z7fxhrj0ss] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--radius);
    background: var(--status-problem-soft);
    color: var(--status-problem);
    font-size: 13px;
    font-weight: 500;
    animation: shake 0.4s;
}

.flag-warning a[b-z7fxhrj0ss] {
    color: inherit;
    text-decoration: underline;
}

.dialog-actions[b-z7fxhrj0ss] {
    position: sticky;
    bottom: -20px;
    z-index: 2;
    justify-content: flex-end;
    margin: 4px -22px -20px;
    padding: 14px 22px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--surface);
}

@media (max-width: 599px) {
    .dialog-actions .btn-primary[b-z7fxhrj0ss] {
        flex: 1;
    }
}

.print-row[b-z7fxhrj0ss] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    cursor: pointer;
}

.print-row > span:last-child[b-z7fxhrj0ss] {
    display: grid;
    gap: 2px;
}

.print-row .form-check[b-z7fxhrj0ss] {
    margin: 0;
    min-height: 0;
}

.print-row .form-check-input[b-z7fxhrj0ss] {
    margin-top: 2px;
}
/* /Components/Loaners/LoanerPhonePanel.razor.rz.scp.css */
.loaner-panel[b-ta6k6oqeo8] {
    display: grid;
    gap: 18px;
    align-content: start;
}

.title-row[b-ta6k6oqeo8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.identity[b-ta6k6oqeo8] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.identity[b-ta6k6oqeo8]  .thumb {
    transition: transform 0.3s var(--ease-spring);
}

.identity:hover[b-ta6k6oqeo8]  .thumb {
    animation: buzz-b-ta6k6oqeo8 0.4s linear;
}

.ids[b-ta6k6oqeo8] {
    flex: 1;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 14px;
    margin: 0;
    font-size: 13.5px;
}

.ids dt[b-ta6k6oqeo8] {
    color: var(--muted);
    font-weight: 400;
}

.ids dd[b-ta6k6oqeo8] {
    margin: 0;
    overflow-wrap: anywhere;
}

.section[b-ta6k6oqeo8] {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.section .sub-head[b-ta6k6oqeo8] {
    margin: 0;
    align-items: center;
}

.on-loan[b-ta6k6oqeo8] {
    border-color: color-mix(in srgb, var(--status-progress) 35%, var(--border));
    background: color-mix(in srgb, var(--status-progress-soft) 45%, var(--surface));
}

.facts a.muted[b-ta6k6oqeo8] {
    margin-left: 4px;
    color: var(--muted);
}

.actions[b-ta6k6oqeo8] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.actions.quiet[b-ta6k6oqeo8] {
    justify-content: flex-start;
}

.actions .retire[b-ta6k6oqeo8] {
    margin-left: auto;
}

.reason[b-ta6k6oqeo8] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
}

.reason[b-ta6k6oqeo8] >  i {
    margin-top: 3px;
}

.reason.problem[b-ta6k6oqeo8] {
    background: var(--status-problem-soft);
    color: var(--status-problem);
}

.confirm[b-ta6k6oqeo8] {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--status-problem-soft);
    color: var(--status-problem);
    font-size: 13px;
    font-weight: 500;
    animation: fade-up 0.25s var(--ease-out);
}

.confirm-actions[b-ta6k6oqeo8] {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.prints[b-ta6k6oqeo8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.prints .link-more[b-ta6k6oqeo8] {
    margin-left: auto;
}

.small[b-ta6k6oqeo8] {
    font-size: 12.5px;
}

.never[b-ta6k6oqeo8] {
    margin: 0;
}

.history[b-ta6k6oqeo8] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.history li[b-ta6k6oqeo8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--border);
    font-size: 13.5px;
}

.history li:first-child[b-ta6k6oqeo8] {
    border-top: 0;
    padding-top: 2px;
}

.history-text[b-ta6k6oqeo8] {
    display: grid;
    min-width: 0;
}

.history-text a[b-ta6k6oqeo8] {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.history-text a:hover[b-ta6k6oqeo8] {
    text-decoration: underline;
}

@keyframes buzz-b-ta6k6oqeo8 {
    25% { transform: rotate(-6deg) translateX(-1px); }
    75% { transform: rotate(6deg) translateX(1px); }
}

/* Lending: the form brings its own tinted box. */
.lend-section[b-ta6k6oqeo8] {
    display: grid;
    gap: 10px;
}

.lend-section .sub-head[b-ta6k6oqeo8] {
    margin: 0;
}
/* /Components/Pages/Account/MyAccountPage.razor.rz.scp.css */
.layout[b-q0qzany3ym] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
    margin-top: 20px;
}

/* ---------- You: photo, name and your role at each store ---------- */

.me[b-q0qzany3ym] {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 24px var(--pad) var(--pad);
    text-align: center;
}

.photo-row[b-q0qzany3ym] {
    position: relative;
}

.photo[b-q0qzany3ym] {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--border);
    animation: count-in 0.5s var(--ease-spring);
}

.photo.initials[b-q0qzany3ym] {
    display: grid;
    place-items: center;
    background: var(--navy);
    color: var(--on-accent);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* The little camera on the photo: tap it to choose a new one. */
.camera[b-q0qzany3ym] {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.25s var(--ease-spring);
}

.camera:hover[b-q0qzany3ym] {
    transform: scale(1.12) rotate(-10deg);
}

.camera:focus-within[b-q0qzany3ym] {
    outline: 2px solid var(--accent-fill);
    outline-offset: 2px;
}

.me-name[b-q0qzany3ym] {
    display: grid;
    gap: 2px;
    max-width: 100%;
}

.me-name b[b-q0qzany3ym] {
    font-size: 18px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.me-name .small[b-q0qzany3ym] {
    overflow-wrap: anywhere;
}

.stores[b-q0qzany3ym] {
    display: grid;
    gap: 6px;
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    text-align: left;
}

.stores ul[b-q0qzany3ym] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stores li[b-q0qzany3ym] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--border);
}

.stores li:last-child[b-q0qzany3ym] {
    border-bottom: 0;
}

.stores li[b-q0qzany3ym]  i {
    color: var(--muted);
}

.stores li.here[b-q0qzany3ym]  .fa-store {
    color: var(--accent);
}

.store-name[b-q0qzany3ym] {
    display: grid;
    flex: 1;
    min-width: 0;
}

.store-name b[b-q0qzany3ym] {
    font-size: 14px;
    font-weight: 600;
}

.why[b-q0qzany3ym] {
    margin: 0;
}

/* ---------- The tabs ---------- */

.panel[b-q0qzany3ym] {
    display: grid;
    gap: 18px;
    padding: 8px var(--pad) var(--pad);
}

.tab-panel[b-q0qzany3ym] {
    display: grid;
    gap: 16px;
}

.tab-panel[hidden][b-q0qzany3ym] {
    display: none;
}

.photo-actions[b-q0qzany3ym] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.upload[b-q0qzany3ym] {
    cursor: pointer;
}

.uploading[b-q0qzany3ym] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.uploading[b-q0qzany3ym]  i {
    animation: spin 0.8s linear infinite;
}

.two[b-q0qzany3ym] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.form-control[readonly][b-q0qzany3ym] {
    background: var(--surface-2);
    color: var(--muted);
}

.setting-row[b-q0qzany3ym] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.setting-row:last-child[b-q0qzany3ym] {
    border-bottom: 0;
}

.setting-text[b-q0qzany3ym] {
    display: grid;
    gap: 2px;
    flex: 1 1 260px;
    min-width: 0;
}

.setting-text .changed[b-q0qzany3ym] {
    color: var(--text);
}

.look-hint[b-q0qzany3ym] {
    margin: 0;
}

/* Three big theme choices that apply at once. */
.themes[b-q0qzany3ym] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.theme[b-q0qzany3ym] {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 20px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s var(--ease-spring), border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.theme:hover[b-q0qzany3ym] {
    transform: translateY(-2px);
    border-color: var(--field-border);
}

.theme:active[b-q0qzany3ym] {
    transform: scale(0.97);
}

.theme-icon[b-q0qzany3ym] {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 22px;
    transition: transform 0.4s var(--ease-spring), background-color 0.15s, color 0.15s;
}

.theme:hover .theme-icon[b-q0qzany3ym] {
    transform: rotate(-20deg) scale(1.08);
}

.theme.on[b-q0qzany3ym] {
    border-color: transparent;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    box-shadow: inset 0 0 0 2px var(--accent-fill);
}

.theme.on .theme-icon[b-q0qzany3ym] {
    background: var(--surface);
    color: var(--accent);
}

@media (max-width: 899px) {
    .layout[b-q0qzany3ym] {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 14px;
    }
}

@media (max-width: 599px) {
    .two[b-q0qzany3ym] {
        grid-template-columns: minmax(0, 1fr);
    }

    .themes[b-q0qzany3ym] {
        grid-template-columns: minmax(0, 1fr);
    }

    .theme[b-q0qzany3ym] {
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: start;
        align-items: center;
        gap: 2px 14px;
        padding: 12px 14px;
        text-align: left;
    }

    .theme-icon[b-q0qzany3ym] {
        grid-row: span 2;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* The notification switches: the whole row toggles. */
.notify-choice[b-q0qzany3ym] {
    cursor: pointer;
}

/* The end-of-day email, after the bell's switches. */
.by-email[b-q0qzany3ym] {
    margin: 10px 0 -10px;
    font-size: 13px;
    font-weight: 600;
}
/* /Components/Pages/Appointments/AppointmentDetailsPage.razor.rz.scp.css */
/* An appointment: what was done beside when, where, who and the repair. */
.title-row[b-zdulo371yc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.title-row h1[b-zdulo371yc] {
    margin: 0;
    text-wrap: balance;
}

.sub[b-zdulo371yc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 6px 0 0;
    color: var(--muted);
}

.head-actions[b-zdulo371yc] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.appointment-grid[b-zdulo371yc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--gap);
    align-items: start;
    margin-top: 16px;
}

.done-card[b-zdulo371yc],
.side-card[b-zdulo371yc] {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 18px var(--pad) var(--pad);
}

.done-card h2[b-zdulo371yc],
.side-card h2[b-zdulo371yc] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.done-card > p[b-zdulo371yc] {
    margin: -6px 0 0;
}

.side[b-zdulo371yc] {
    display: grid;
    gap: var(--gap);
    min-width: 0;
}

.composer[b-zdulo371yc] {
    display: grid;
    gap: 8px;
}

.composer-row[b-zdulo371yc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.notes[b-zdulo371yc] {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.note[b-zdulo371yc] {
    display: grid;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.note-head[b-zdulo371yc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.note-head .icon-button[b-zdulo371yc] {
    margin-left: auto;
}

.note-text[b-zdulo371yc] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.nothing[b-zdulo371yc] {
    margin: 0;
}

dl[b-zdulo371yc] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 14px;
    margin: 0;
    font-size: 14px;
}

dt[b-zdulo371yc] {
    color: var(--muted);
    font-weight: 500;
}

dd[b-zdulo371yc] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.booking-notes[b-zdulo371yc] {
    white-space: pre-wrap;
}

.where[b-zdulo371yc] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.repair p[b-zdulo371yc] {
    margin: 0;
}

.history ul[b-zdulo371yc] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    font-size: 13.5px;
    color: var(--muted);
}

.row-text[b-zdulo371yc] {
    flex: 1;
    display: grid;
    min-width: 0;
    line-height: 1.35;
}

.charge[b-zdulo371yc] {
    display: grid;
    gap: 14px;
}

.charge p[b-zdulo371yc] {
    margin: 0;
}

.charge .minutes[b-zdulo371yc],
.charge .price[b-zdulo371yc] {
    max-width: 180px;
}

.charge-total[b-zdulo371yc] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.charge-total b[b-zdulo371yc] {
    font-size: 22px;
}

@media (max-width: 1099px) {
    .appointment-grid[b-zdulo371yc] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The cancel dialog's "tell the customer" switch. */
.tell-row[b-zdulo371yc] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-top: 12px;
    cursor: pointer;
}

.tell-row > span:last-child[b-zdulo371yc] {
    display: grid;
    gap: 2px;
}

.tell-row .form-check[b-zdulo371yc] {
    margin: 0;
    min-height: 0;
}

.tell-row .form-check-input[b-zdulo371yc] {
    margin-top: 2px;
}

/* The customer's own page for the appointment, as they see it. */
.page-link[b-zdulo371yc] {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    justify-self: start;
}

/* The house call's street, under the facts (MapPreview). */
.side-card[b-zdulo371yc]  .map-preview {
    margin-top: 12px;
}
/* /Components/Pages/Appointments/AppointmentsPage.razor.rz.scp.css */
/* Each kind of booking keeps one colour: in store in the accent, on site in teal. */
.type-instore[b-jnmlm8tz3y] { --type-fg: var(--accent-soft-fg); --type-bg: var(--accent-soft); --type-line: var(--accent-fill); }
.type-onsite[b-jnmlm8tz3y] { --type-fg: var(--teal); --type-bg: var(--teal-soft); --type-line: var(--teal); }

.small[b-jnmlm8tz3y] {
    font-size: 12px;
}

/* Next up: who's coming and how soon. */
.next-up[b-jnmlm8tz3y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding: 14px 18px;
    animation: fade-up 0.35s var(--ease-out);
}

.next-text[b-jnmlm8tz3y] {
    flex: 1 1 260px;
    min-width: 0;
}

.next-actions[b-jnmlm8tz3y] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.countdown[b-jnmlm8tz3y] {
    color: var(--status-waiting);
    font-weight: 600;
}

.next-up:hover[b-jnmlm8tz3y]  .icon-tile {
    animation: bounce 0.5s var(--ease-spring);
}

.calendar-bar[b-jnmlm8tz3y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 18px 0 14px;
}

.week-nav[b-jnmlm8tz3y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.range[b-jnmlm8tz3y] {
    margin-left: 6px;
    font-size: 15px;
}

.filters[b-jnmlm8tz3y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.filters .chips[b-jnmlm8tz3y] {
    flex: none;
}

.type-chip:not(.on)[b-jnmlm8tz3y] {
    opacity: 0.6;
    text-decoration: line-through;
}

.swatch[b-jnmlm8tz3y] {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--type-line);
}

.technician[b-jnmlm8tz3y] {
    width: auto;
    min-width: 150px;
}

.view-seg button[b-jnmlm8tz3y] {
    height: calc(var(--control-h) - 8px);
}

.layout[b-jnmlm8tz3y] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--gap);
    align-items: start;
}

.layout[data-view="week"] .agenda[b-jnmlm8tz3y],
.layout[data-view="agenda"] .calendar[b-jnmlm8tz3y],
.layout[data-view="week"] .people-day[b-jnmlm8tz3y],
.layout[data-view="day"] .week-view[b-jnmlm8tz3y],
.layout[data-view="day"] .agenda[b-jnmlm8tz3y] {
    display: none;
}

/* ---------- The day, by person: a column each, their hours, time off and travel ---------- */

.day-picker[b-jnmlm8tz3y] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px var(--pad);
    border-bottom: 1px solid var(--border);
}

.day-picker .chip.today:not(.on)[b-jnmlm8tz3y] {
    border-color: var(--accent-fill);
    color: var(--accent);
}

.week.people[b-jnmlm8tz3y] {
    grid-template-columns: 52px repeat(var(--columns), minmax(150px, 1fr));
    min-width: calc(52px + var(--columns) * 150px);
}

.person-column .day-head[b-jnmlm8tz3y] {
    gap: 2px;
}

.person-name[b-jnmlm8tz3y] {
    max-width: 100%;
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Time off: striped in the waiting colour, labelled. */
.off-block[b-jnmlm8tz3y] {
    position: absolute;
    left: 2px;
    right: 2px;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding-top: 6px;
    border-radius: var(--radius);
    background: repeating-linear-gradient(45deg, var(--status-waiting-soft) 0 8px, transparent 8px 16px);
    color: var(--status-waiting);
    font-size: 12px;
    font-weight: 600;
}

/* Travel to and from an on-site visit: a faint band either side of it. */
.travel[b-jnmlm8tz3y] {
    position: absolute;
    left: 10px;
    right: 10px;
    border-left: 2px dashed var(--teal);
    background: color-mix(in srgb, var(--teal-soft) 60%, transparent);
    opacity: 0.8;
}

/* ---------- The week: a time grid, bookings at their time ---------- */

.calendar[b-jnmlm8tz3y] {
    overflow: hidden;
}

.calendar > .table-wrap[b-jnmlm8tz3y] {
    padding: 0;
}

.week[b-jnmlm8tz3y] {
    display: grid;
    grid-template-columns: 52px repeat(7, minmax(92px, 1fr));
    min-width: 720px;
}

.gutter-head[b-jnmlm8tz3y],
.day-head[b-jnmlm8tz3y] {
    height: 72px;
    border-bottom: 1px solid var(--border);
}

.times[b-jnmlm8tz3y] {
    position: relative;
    height: calc(var(--hours) * var(--hour-h));
}

.times span[b-jnmlm8tz3y] {
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

.times span:first-child[b-jnmlm8tz3y] {
    transform: none;
}

.day[b-jnmlm8tz3y] {
    min-width: 0;
    border-left: 1px solid var(--border);
}

.day-head[b-jnmlm8tz3y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 6px 4px;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
}

.day-head .date[b-jnmlm8tz3y] {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
}

.day-head small[b-jnmlm8tz3y] {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.day.today .weekday[b-jnmlm8tz3y] {
    color: var(--accent);
    font-weight: 600;
}

.day.today .date[b-jnmlm8tz3y] {
    border-radius: 50%;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-size: 15px;
    animation: land 0.5s var(--ease-spring);
}

.day.closed .day-head[b-jnmlm8tz3y] {
    opacity: 0.7;
}

.day-body[b-jnmlm8tz3y] {
    position: relative;
    height: calc(var(--hours) * var(--hour-h));
    background-image: linear-gradient(var(--border) 1px, transparent 1px);
    background-size: 100% var(--hour-h);
}

.day.today .day-body[b-jnmlm8tz3y] {
    background-color: color-mix(in srgb, var(--accent-soft) 35%, transparent);
}

.day.closed .day-body[b-jnmlm8tz3y] {
    background-color: var(--surface-2);
}

/* Hours the store is shut: hatched, not hidden. */
.shut[b-jnmlm8tz3y] {
    position: absolute;
    left: 0;
    right: 0;
    background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, transparent 6px 12px);
}

.closed-label[b-jnmlm8tz3y] {
    position: absolute;
    top: 38%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
}

.booking[b-jnmlm8tz3y] {
    position: absolute;
    left: 4px;
    right: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 8px;
    overflow: hidden;
    border: 0;
    border-left: 3px solid var(--type-line);
    border-radius: var(--radius);
    background: var(--type-bg);
    color: var(--type-fg);
    font-size: 12px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s;
    animation: fade-up 0.35s var(--ease-out) backwards;
}

.booking:hover[b-jnmlm8tz3y],
.booking:focus-visible[b-jnmlm8tz3y] {
    z-index: 3;
    transform: translateY(-1px) scale(1.02);
    box-shadow: var(--lift-shadow);
}

.booking.selected[b-jnmlm8tz3y] {
    z-index: 2;
    box-shadow: 0 0 0 2px var(--accent-fill);
}

.booking.past[b-jnmlm8tz3y],
.booking.status-done[b-jnmlm8tz3y] {
    opacity: 0.6;
}

/* Asked for online and not yet confirmed: it holds the time, drawn as a dashed outline. */
.booking.request[b-jnmlm8tz3y] {
    background: var(--surface);
    outline: 1px dashed var(--type-line);
    outline-offset: -1px;
}

/* Someone who didn't come stays on the calendar, struck through. */
.booking.status-noshow b[b-jnmlm8tz3y],
.agenda-row.status-noshow b[b-jnmlm8tz3y] {
    text-decoration: line-through;
}

.booking.landed[b-jnmlm8tz3y] {
    animation: land 0.6s var(--ease-spring);
}

.booking .time[b-jnmlm8tz3y] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-right: 22px;
    font-weight: 600;
    white-space: nowrap;
}

.booking .time[b-jnmlm8tz3y]  i {
    font-size: 9px;
}

.booking b[b-jnmlm8tz3y],
.booking .job[b-jnmlm8tz3y] {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.booking b[b-jnmlm8tz3y] {
    color: var(--text);
}

.booking .avatar[b-jnmlm8tz3y] {
    position: absolute;
    top: 4px;
    right: 4px;
}

.booking.short[b-jnmlm8tz3y] {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding-block: 2px;
}

.booking.short .job[b-jnmlm8tz3y],
.booking.short .avatar[b-jnmlm8tz3y] {
    display: none;
}

.booking.short .time[b-jnmlm8tz3y] {
    padding-right: 0;
}

/* The red "now" line, with the time at its end. */
.now[b-jnmlm8tz3y] {
    position: absolute;
    left: -1px;
    right: 0;
    z-index: 4;
    height: 2px;
    background: var(--status-problem-solid);
    pointer-events: none;
}

.now[b-jnmlm8tz3y]::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--status-problem-solid);
    animation: pulse-dot 1.8s infinite;
}

.now span[b-jnmlm8tz3y] {
    position: absolute;
    right: 4px;
    top: -18px;
    padding: 0 4px;
    border-radius: 4px;
    background: var(--surface);
    color: var(--status-problem);
    font-size: 11px;
    font-weight: 600;
}

/* ---------- Agenda: the same week, day by day ---------- */

.agenda[b-jnmlm8tz3y] {
    display: grid;
    gap: 18px;
    padding: var(--pad);
}

.agenda-head[b-jnmlm8tz3y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.agenda-day.today .agenda-head b[b-jnmlm8tz3y] {
    color: var(--accent);
}

.quiet[b-jnmlm8tz3y] {
    margin: 0;
}

.agenda-row.past[b-jnmlm8tz3y] {
    opacity: 0.65;
}

.agenda-time[b-jnmlm8tz3y] {
    flex: none;
    width: 76px;
    white-space: nowrap;
}

.agenda-text[b-jnmlm8tz3y] {
    display: grid;
    min-width: 0;
    text-align: left;
}

.agenda-row[b-jnmlm8tz3y] >  .fa-chevron-right {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring);
}

.agenda-row:hover[b-jnmlm8tz3y] >  .fa-chevron-right {
    transform: translateX(3px);
}

/* ---------- The chosen booking ---------- */

.detail[b-jnmlm8tz3y] {
    position: sticky;
    top: 76px;
    padding: var(--pad);
}

.detail-body[b-jnmlm8tz3y] {
    display: grid;
    gap: 14px;
    animation: fade-up 0.3s var(--ease-out);
}

.detail-type[b-jnmlm8tz3y] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--type-bg);
    color: var(--type-fg);
    font-size: 13px;
    font-weight: 600;
}

.reason[b-jnmlm8tz3y] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    text-wrap: balance;
}

.list-row.static[b-jnmlm8tz3y] {
    cursor: default;
}

.when[b-jnmlm8tz3y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
}

.where[b-jnmlm8tz3y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--teal-soft);
    color: var(--teal);
    font-weight: 500;
    text-decoration: none;
}

.where span[b-jnmlm8tz3y] {
    flex: 1;
}

.where:hover[b-jnmlm8tz3y] {
    text-decoration: underline;
}

.detail-rows[b-jnmlm8tz3y] {
    display: grid;
}

.detail-rows .list-row[b-jnmlm8tz3y] {
    border-top: 1px solid var(--border);
}

.detail-rows .list-row:last-child[b-jnmlm8tz3y] {
    border-bottom: 1px solid var(--border);
}

.detail-rows .list-row[b-jnmlm8tz3y] >  .fa-chevron-right {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring);
}

.detail-rows .list-row:hover[b-jnmlm8tz3y] >  .fa-chevron-right {
    transform: translateX(3px);
}

.row-text[b-jnmlm8tz3y] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.order-line[b-jnmlm8tz3y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.problem[b-jnmlm8tz3y] {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.who[b-jnmlm8tz3y] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

.detail-actions[b-jnmlm8tz3y] {
    display: grid;
    gap: 8px;
}

.detail-actions > .btn-primary[b-jnmlm8tz3y] {
    width: 100%;
}

.detail-actions[b-jnmlm8tz3y]  .fa-arrow-right {
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring);
}

.detail-actions .btn-primary:hover[b-jnmlm8tz3y]  .fa-arrow-right {
    transform: translateX(3px);
}

.detail-more[b-jnmlm8tz3y] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.detail-more .btn-outline-secondary[b-jnmlm8tz3y] {
    flex: 1;
}

/* The drawer only below 1200px; the side panel only above it. */
.narrow-only[b-jnmlm8tz3y] {
    display: none;
}

@media (max-width: 1199px) {
    .layout[b-jnmlm8tz3y] {
        grid-template-columns: minmax(0, 1fr);
    }

    .wide-only[b-jnmlm8tz3y] {
        display: none;
    }

    .narrow-only[b-jnmlm8tz3y] {
        display: contents;
    }
}

/* Phones: always the agenda. */
@media (max-width: 759px) {
    .layout[data-view] .calendar[b-jnmlm8tz3y] {
        display: none;
    }

    .layout[data-view] .agenda[b-jnmlm8tz3y] {
        display: grid;
    }

    .view-seg[b-jnmlm8tz3y] {
        display: none;
    }

    .filters[b-jnmlm8tz3y] {
        margin-left: 0;
    }

    .range[b-jnmlm8tz3y] {
        flex-basis: 100%;
        margin: 4px 0 0;
    }
}

/* ---------- Reminder ---------- */

.reminder[b-jnmlm8tz3y] {
    display: grid;
    gap: 8px;
}

.reminder p[b-jnmlm8tz3y] {
    margin: 0;
}

.reminder-text[b-jnmlm8tz3y] {
    padding: 12px 14px;
    border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    white-space: pre-line;
    animation: fade-up 0.25s var(--ease-out);
}

/* Arrivals: Here until they are, then when they came in and Check in. */
.next-actions[b-jnmlm8tz3y] {
    align-items: center;
}

.arrival-row[b-jnmlm8tz3y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.arrival-row .check-in[b-jnmlm8tz3y],
.arrival-row .here[b-jnmlm8tz3y] {
    flex: 1 1 auto;
}

.detail-actions > .btn-outline-secondary:first-child[b-jnmlm8tz3y] {
    width: 100%;
}

/* ---------- The day's house calls, under the day by person ---------- */
.house-calls[b-jnmlm8tz3y] {
    display: grid;
    gap: 12px;
    padding: 16px 18px 18px;
    border-top: 1px solid var(--border);
}

.house-calls-head[b-jnmlm8tz3y] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.house-calls-head h3[b-jnmlm8tz3y] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.route-map[b-jnmlm8tz3y] {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}

.stops[b-jnmlm8tz3y] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
}

.stops li[b-jnmlm8tz3y] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.stop-label[b-jnmlm8tz3y] {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
}

.stop-text[b-jnmlm8tz3y] {
    flex: 1 1 220px;
    min-width: 0;
}

.routes[b-jnmlm8tz3y] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* /Components/Pages/Appointments/BookAppointmentDialog.razor.rz.scp.css */
.book[b-1zc2c15zho] {
    display: grid;
    gap: 16px;
}

.form-field[b-1zc2c15zho] {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.field-label[b-1zc2c15zho] {
    font-size: 13px;
    font-weight: 500;
}

.search-box[b-1zc2c15zho] {
    position: relative;
}

.search-box[b-1zc2c15zho] >  i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 13px;
    pointer-events: none;
}

.search-box .form-control[b-1zc2c15zho] {
    padding-left: 34px;
}

.services[b-1zc2c15zho] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.service-choice[b-1zc2c15zho] {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: inherit;
    text-align: left;
    transition: border-color 0.15s, background-color 0.15s, transform 0.15s var(--ease-spring);
}

.service-choice:hover[b-1zc2c15zho] {
    border-color: var(--accent-fill);
}

.service-choice:active[b-1zc2c15zho] {
    transform: scale(0.98);
}

.service-choice.on[b-1zc2c15zho] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent-fill);
}

.matches[b-1zc2c15zho] {
    display: grid;
    gap: 2px;
}

.match[b-1zc2c15zho] {
    padding-inline: 8px;
}

.new-customer[b-1zc2c15zho] {
    color: var(--accent);
    font-weight: 500;
}

.new-customer-head[b-1zc2c15zho] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.address[b-1zc2c15zho] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 12px;
}

.address[b-1zc2c15zho]  .street {
    grid-column: 1 / 2;
}

.address[b-1zc2c15zho] >  .form-field:nth-child(n + 3) {
    grid-column: auto;
}

.person.anyone .avatar[b-1zc2c15zho] {
    background: var(--accent-soft);
    color: var(--accent);
}

.row-text[b-1zc2c15zho] {
    flex: 1;
    display: grid;
    min-width: 0;
    line-height: 1.35;
}

.row-text b[b-1zc2c15zho] {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.row-text .muted[b-1zc2c15zho] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.picked[b-1zc2c15zho] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    animation: land 0.35s var(--ease-spring);
}

.small[b-1zc2c15zho] {
    font-size: 12.5px;
}

.nothing[b-1zc2c15zho] {
    margin: 0;
}

.slot-chip[b-1zc2c15zho] {
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s var(--ease-spring);
}

.slot-chip:active[b-1zc2c15zho] {
    transform: scale(0.95);
}

.slot-chip.on[b-1zc2c15zho] {
    background: var(--accent-fill);
    border-color: var(--accent-fill);
    color: var(--on-accent);
    animation: land 0.35s var(--ease-spring);
}

.slot-chip[b-1zc2c15zho]  .fa-bolt {
    color: var(--status-waiting);
    font-size: 11px;
}

.slot-chip.on[b-1zc2c15zho]  .fa-bolt {
    color: inherit;
}

.chip-skeleton[b-1zc2c15zho] {
    width: 150px;
    height: 32px;
    border-radius: 999px;
}

.divider[b-1zc2c15zho] {
    height: 1px;
    background: var(--border);
}

.two[b-1zc2c15zho] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* The day's free times: a band for each person and a column for each time (--times), so one time lines
   up all the way down. A long day scrolls sideways with the names held in place. */
.people[b-1zc2c15zho] {
    --who: 176px;
    --column: 84px;
    --row-min: calc(var(--who) + 36px + var(--times) * (var(--column) + 6px));
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.person[b-1zc2c15zho] {
    display: grid;
    grid-template-columns: var(--who) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: var(--row-min);
    padding: 10px 12px;
    background: var(--surface);
    transition: background-color 0.15s;
}

.person + .person[b-1zc2c15zho] {
    border-top: 1px solid var(--border);
}

.person:hover[b-1zc2c15zho] {
    background: var(--bg);
}

/* Anyone free is the usual choice: its own band, above the people. */
.person.anyone[b-1zc2c15zho] {
    background: var(--bg);
}

.person.chosen[b-1zc2c15zho] {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
}

.who[b-1zc2c15zho] {
    position: sticky;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    align-self: stretch;
    background: inherit;
}

.who-text[b-1zc2c15zho] {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.who-text b[b-1zc2c15zho] {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.people-label[b-1zc2c15zho] {
    display: block;
    min-width: var(--row-min);
    padding: 10px 12px 4px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.slots[b-1zc2c15zho] {
    display: grid;
    grid-template-columns: repeat(var(--times), minmax(var(--column), 1fr));
    gap: 6px;
}

.slots .slot-chip[b-1zc2c15zho] {
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding-inline: 6px;
}

.dialog-actions[b-1zc2c15zho] {
    position: sticky;
    bottom: -20px;
    z-index: 2;
    justify-content: flex-end;
    margin: 0 -22px -20px;
    padding: 14px 22px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--surface);
}

@media (max-width: 599px) {
    .two[b-1zc2c15zho],
    .address[b-1zc2c15zho] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* On a phone each name sits over its times, and all the times scroll sideways together. */
    .people[b-1zc2c15zho] {
        --column: 76px;
        --row-min: calc(24px + var(--times) * (var(--column) + 6px));
    }

    .person[b-1zc2c15zho] {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .who[b-1zc2c15zho] {
        justify-self: start;
        width: max-content;
        max-width: calc(100vw - 72px);
    }

    .dialog-actions .btn-primary[b-1zc2c15zho] {
        flex: 1;
        white-space: normal;
    }
}

.go-anyway[b-1zc2c15zho] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}
/* /Components/Pages/Appointments/EditAppointmentDialog.razor.rz.scp.css */
.edit-appointment[b-9ns2qm27vi] {
    display: grid;
    gap: 16px;
}

.two[b-9ns2qm27vi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.address[b-9ns2qm27vi] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 12px;
}

.address[b-9ns2qm27vi]  .street {
    grid-column: 1 / 2;
}

.form-field[b-9ns2qm27vi] {
    display: grid;
    gap: 6px;
    align-content: start;
}

.stays[b-9ns2qm27vi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--control-h);
    color: var(--muted);
    font-size: 14px;
}

/* What switching where it is means, said before it's saved. */
.switch-note[b-9ns2qm27vi] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 13.5px;
    line-height: 1.45;
}

.switch-note[b-9ns2qm27vi]  i {
    margin-top: 3px;
}

@media (max-width: 599px) {
    .two[b-9ns2qm27vi],
    .address[b-9ns2qm27vi] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.services[b-9ns2qm27vi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.service-choice[b-9ns2qm27vi] {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: inherit;
    text-align: left;
    transition: border-color 0.15s, background-color 0.15s;
}

.service-choice:hover[b-9ns2qm27vi] {
    border-color: var(--accent-fill);
}

.service-choice.on[b-9ns2qm27vi] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent-fill);
}

.go-anyway[b-9ns2qm27vi] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}
/* /Components/Pages/Buying/BuyCorrectPage.razor.rz.scp.css */
.loading[b-slf2d7ypqc] {
    display: grid;
    gap: 12px;
    padding: var(--pad);
}

.correct[b-slf2d7ypqc] {
    display: grid;
    gap: var(--gap);
    max-width: 900px;
}

.step-card[b-slf2d7ypqc] {
    display: grid;
    gap: 14px;
    padding: var(--pad);
}

.step-card h2[b-slf2d7ypqc] {
    margin: 0;
    font-size: 17px;
}

.step-card p[b-slf2d7ypqc] {
    margin: 0;
}

.grid[b-slf2d7ypqc] {
    display: grid;
    gap: 12px 14px;
}

.grid.two[b-slf2d7ypqc] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.grid.three[b-slf2d7ypqc] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.field-group[b-slf2d7ypqc] {
    display: grid;
    gap: 8px;
    align-content: start;
}

.choices[b-slf2d7ypqc] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.actions[b-slf2d7ypqc] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
/* /Components/Pages/Buying/BuyDetailsPage.razor.rz.scp.css */
.loading[b-r4kxjjt73a] {
    display: grid;
    gap: 12px;
    padding: var(--pad);
}

.title-row[b-r4kxjjt73a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.title-row h1[b-r4kxjjt73a] {
    margin: 0;
}

.layout[b-r4kxjjt73a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: flex-start;
}

.main[b-r4kxjjt73a] {
    flex: 999 1 560px;
    min-width: 0;
    display: grid;
    gap: var(--gap);
}

.side[b-r4kxjjt73a] {
    flex: 1 1 280px;
    display: grid;
    gap: var(--gap);
}

.card-head[b-r4kxjjt73a] {
    margin: 0;
    padding: 14px var(--pad) 10px;
    font-size: 16px;
}

.facts[b-r4kxjjt73a] {
    padding: 0 var(--pad) var(--pad);
    grid-template-columns: 150px minmax(0, 1fr);
}

.notes[b-r4kxjjt73a] {
    white-space: pre-line;
}

.photos[b-r4kxjjt73a] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 var(--pad) var(--pad);
}

.photos img[b-r4kxjjt73a] {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* The signature sits on white in both themes, as it was drawn. */
.signature[b-r4kxjjt73a] {
    margin: 0 var(--pad) var(--pad);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #ffffff;
}

.signature img[b-r4kxjjt73a] {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 640px) {
    .facts[b-r4kxjjt73a] {
        grid-template-columns: 1fr;
    }
}

.history[b-r4kxjjt73a] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0 var(--pad) var(--pad) calc(var(--pad) + 16px);
    font-size: 14px;
}

.history span[b-r4kxjjt73a] {
    display: block;
}
/* /Components/Pages/Buying/BuyDevicePage.razor.rz.scp.css */
.loading[b-9h763uec4g] {
    display: grid;
    gap: 12px;
    padding: var(--pad);
}

.buy[b-9h763uec4g] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: flex-start;
}

.steps[b-9h763uec4g] {
    flex: 999 1 620px;
    min-width: 0;
    display: grid;
    gap: var(--gap);
}

.step-card[b-9h763uec4g] {
    display: grid;
    gap: 14px;
    padding: var(--pad);
}

.step-card h2[b-9h763uec4g] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 17px;
}

.step[b-9h763uec4g] {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-size: 13px;
    font-weight: 700;
}

.grid[b-9h763uec4g] {
    display: grid;
    gap: 12px 14px;
}

.grid.two[b-9h763uec4g] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.grid.three[b-9h763uec4g] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.checks[b-9h763uec4g] {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--bg);
}

.check-line[b-9h763uec4g] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 14px;
}

.check-line.ok[b-9h763uec4g] {
    color: var(--status-done);
    font-weight: 600;
}

.check-line.warn[b-9h763uec4g] {
    color: var(--status-waiting);
}

.stolen[b-9h763uec4g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    font-size: 14px;
}

.stolen span[b-9h763uec4g] {
    flex: 1 1 240px;
}

.stolen select[b-9h763uec4g] {
    width: auto;
    min-width: 200px;
}

.field-group[b-9h763uec4g] {
    display: grid;
    gap: 8px;
}

.grades[b-9h763uec4g] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.grade[b-9h763uec4g] {
    display: grid;
    gap: 2px;
    justify-items: center;
    padding: 10px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}

.grade b[b-9h763uec4g] {
    font-size: 17px;
}

.grade .price[b-9h763uec4g] {
    color: var(--muted);
    font-weight: 600;
}

.grade.on[b-9h763uec4g] {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
    background: var(--accent-soft);
}

.grade.on .price[b-9h763uec4g] {
    color: var(--accent-soft-fg);
}

.choices[b-9h763uec4g] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.seller[b-9h763uec4g] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.seller-text[b-9h763uec4g] {
    display: grid;
    flex: 1;
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
}

.seller-text b[b-9h763uec4g] {
    color: var(--text);
    font-size: 15px;
}

.seller-search[b-9h763uec4g] {
    width: 100%;
}

.matches[b-9h763uec4g] {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.match[b-9h763uec4g] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border: 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.match:first-child[b-9h763uec4g] {
    border-top: 0;
}

.match:hover[b-9h763uec4g],
.match:focus-visible[b-9h763uec4g] {
    background: var(--accent-soft);
}

.match.new[b-9h763uec4g] {
    color: var(--accent);
}

.match-text[b-9h763uec4g] {
    display: grid;
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
}

.match-text b[b-9h763uec4g] {
    color: var(--text);
    font-size: 14px;
}

.link-button[b-9h763uec4g] {
    justify-self: start;
}

.confirms[b-9h763uec4g] {
    display: grid;
    gap: 8px;
}

.check[b-9h763uec4g] {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.check.invalid[b-9h763uec4g] {
    color: var(--status-problem);
}

/* White paper in both themes: the signature prints in black. */
.signature-area[b-9h763uec4g] {
    position: relative;
}

.pad[b-9h763uec4g] {
    display: block;
    width: 100%;
    height: 160px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    background: #ffffff;
    touch-action: none;
    cursor: crosshair;
}

.baseline[b-9h763uec4g] {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 28px;
    padding-top: 4px;
    border-top: 1px solid #9aa0aa;
    color: #6b7180;
    font-size: 11px;
    pointer-events: none;
}

.signature-foot[b-9h763uec4g] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.signature-foot .field-error[b-9h763uec4g] {
    margin-right: auto;
}

.summary[b-9h763uec4g] {
    flex: 1 1 300px;
    position: sticky;
    top: 16px;
    display: grid;
    gap: 14px;
    padding: var(--pad);
}

.summary h2[b-9h763uec4g] {
    margin: 0;
    font-size: 17px;
}

.summary ul[b-9h763uec4g] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
}

.buy-button[b-9h763uec4g] {
    width: 100%;
    min-height: 44px;
}

@media (max-width: 640px) {
    .grades[b-9h763uec4g] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary[b-9h763uec4g] {
        position: static;
    }
}
/* /Components/Pages/Buying/BuyLogPage.razor.rz.scp.css */
.list-head[b-9nyy27sujw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 14px var(--pad);
    border-bottom: 1px solid var(--border);
}

.list-head .filter[b-9nyy27sujw] {
    flex: 1 1 260px;
}

.date[b-9nyy27sujw] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.date .form-control[b-9nyy27sujw] {
    width: auto;
}

.spacer[b-9nyy27sujw] {
    flex: 1 1 0;
}

.loading[b-9nyy27sujw] {
    display: grid;
    gap: 10px;
    padding: var(--pad);
}

.grid small[b-9nyy27sujw] {
    display: block;
    color: var(--muted);
    font-size: 12px;
}
/* /Components/Pages/Buying/BuyLogPrintPage.razor.rz.scp.css */
/* Paper: black on white only (DESIGN.md §12). */
.sheet[b-91isypcvd2] {
    width: 100%;
    max-width: 10in;
    padding: 0.4in;
    background: #ffffff;
    color: #111111;
    font-family: "IBM Plex Sans", Arial, sans-serif;
    font-size: 11px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
}

header h1[b-91isypcvd2] {
    margin: 0;
    font-size: 18px;
}

header p[b-91isypcvd2] {
    margin: 4px 0 14px;
    color: #4a4f5c;
}

table[b-91isypcvd2] {
    width: 100%;
    border-collapse: collapse;
}

th[b-91isypcvd2],
td[b-91isypcvd2] {
    padding: 6px 6px 6px 0;
    border-bottom: 1px solid #c9cdd4;
    text-align: left;
    vertical-align: top;
}

th[b-91isypcvd2] {
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.r[b-91isypcvd2] {
    text-align: right;
}

.mono[b-91isypcvd2] {
    font-family: "IBM Plex Mono", Consolas, monospace;
}

tr[b-91isypcvd2] {
    break-inside: avoid;
}

@media print {
    .sheet[b-91isypcvd2] {
        max-width: none;
        padding: 0;
        box-shadow: none;
    }
}
/* /Components/Pages/Buying/PhotoList.razor.rz.scp.css */
.photo-list[b-why0mvlg9d] {
    display: grid;
    gap: 8px;
}

.photos[b-why0mvlg9d] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.photo[b-why0mvlg9d] {
    position: relative;
    width: 110px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}

.photo img[b-why0mvlg9d] {
    display: block;
    width: 100%;
    height: 92px;
    object-fit: cover;
}

.photo.removed img[b-why0mvlg9d] {
    opacity: 0.3;
}

.toggle[b-why0mvlg9d] {
    width: 100%;
    padding: 4px 0;
    border: 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.photo.removed .toggle[b-why0mvlg9d] {
    color: var(--status-problem);
}
/* /Components/Pages/Buying/PhotoPicker.razor.rz.scp.css */
.photo-picker[b-lxrze2zhzn] {
    display: grid;
    gap: 8px;
}

.photos[b-lxrze2zhzn] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.photo[b-lxrze2zhzn] {
    position: relative;
    width: 92px;
    height: 92px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}

.photo img[b-lxrze2zhzn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo .remove[b-lxrze2zhzn] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.add[b-lxrze2zhzn] {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 4px;
    width: 92px;
    height: 92px;
    border: 1px dashed var(--field-border);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.add:hover[b-lxrze2zhzn] {
    border-color: var(--accent);
    color: var(--accent);
}
/* /Components/Pages/Communications/MessagesPage.razor.rz.scp.css */
/* A two-pane inbox: conversations on the left, the open one on the right. Phones show one at a time. */

.page-head[b-6m0nj2ls6v] {
    margin-bottom: var(--gap);
}

.inbox[b-6m0nj2ls6v] {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    height: min(760px, calc(100vh - 200px));
    min-height: 520px;
    overflow: hidden;
}

.list-pane[b-6m0nj2ls6v] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    border-right: 1px solid var(--border);
}

.list-pane[b-6m0nj2ls6v]  .pane-tabs {
    flex: none;
    gap: 14px;
    padding: 4px 14px 0;
}

/* Three tabs with counts share the narrow list pane. */
.list-pane[b-6m0nj2ls6v]  .pane-tabs .tab {
    gap: 6px;
    font-size: 13.5px;
}

.search[b-6m0nj2ls6v] {
    padding: 12px 12px 6px;
}

.search .filter[b-6m0nj2ls6v] {
    width: 100%;
}

.loading[b-6m0nj2ls6v] {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.conversations[b-6m0nj2ls6v] {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 4px 8px 8px;
    list-style: none;
}

.convo[b-6m0nj2ls6v] {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 10px;
    border-radius: var(--radius-lg);
    color: var(--text);
    text-decoration: none;
    transition: background-color 0.15s;
}

a.convo:hover[b-6m0nj2ls6v] {
    background: var(--surface-2);
    text-decoration: none;
}

.selected .convo[b-6m0nj2ls6v] {
    background: var(--accent-soft);
}

.arrived .convo[b-6m0nj2ls6v] {
    animation: drop-b-6m0nj2ls6v 0.6s var(--ease-spring), flash 2.6s ease;
}

.convo-avatar[b-6m0nj2ls6v] {
    position: relative;
    flex: none;
}

.dot[b-6m0nj2ls6v] {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--accent-fill);
    animation: pulse-dot 1.8s infinite;
}

.convo-text[b-6m0nj2ls6v] {
    flex: 1;
    display: grid;
    gap: 3px;
    min-width: 0;
}

.convo-top[b-6m0nj2ls6v] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.convo-top b[b-6m0nj2ls6v] {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.unread .convo-top b[b-6m0nj2ls6v] {
    font-weight: 700;
}

.when[b-6m0nj2ls6v] {
    flex: none;
}

.snippet[b-6m0nj2ls6v] {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
}

.snippet[b-6m0nj2ls6v]  i {
    flex: none;
    font-size: 11px;
}

.snippet span[b-6m0nj2ls6v] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.unread .snippet[b-6m0nj2ls6v] {
    color: var(--text);
    font-weight: 500;
}

.selected .snippet[b-6m0nj2ls6v] {
    color: var(--accent-soft-fg);
}

.convo-tags[b-6m0nj2ls6v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* ---------- The open conversation ---------- */

.thread-pane[b-6m0nj2ls6v] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    animation: fade-up 0.25s var(--ease-out);
}

.thread-pane[b-6m0nj2ls6v] >  .empty {
    margin: auto;
}

.thread-head[b-6m0nj2ls6v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 14px var(--pad);
    border-bottom: 1px solid var(--border);
}

.who[b-6m0nj2ls6v] {
    flex: 1 1 200px;
    display: grid;
    min-width: 0;
}

.who a[b-6m0nj2ls6v] {
    color: var(--text);
}

.who a:hover[b-6m0nj2ls6v] {
    color: var(--accent);
}

.order-link[b-6m0nj2ls6v] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.order-link:hover[b-6m0nj2ls6v] {
    text-decoration: none;
    filter: brightness(0.97);
}

.stranger[b-6m0nj2ls6v] {
    background: var(--surface-2);
    color: var(--muted);
}

.who b[b-6m0nj2ls6v] {
    font-weight: 600;
}

.back[b-6m0nj2ls6v] {
    display: none;
    align-self: flex-start;
    margin: 10px 12px 0;
}

/* ---------- New message ---------- */

.find[b-6m0nj2ls6v] {
    width: 100%;
}

.matches[b-6m0nj2ls6v] {
    display: grid;
}

.match-text[b-6m0nj2ls6v] {
    flex: 1;
    display: grid;
    min-width: 0;
}

.chev[b-6m0nj2ls6v] {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring);
}

.list-row:hover .chev[b-6m0nj2ls6v] {
    transform: translateX(3px);
}

@keyframes drop-b-6m0nj2ls6v {
    from {
        opacity: 0;
        transform: translateY(-14px) scale(0.97);
    }
}

@media (max-width: 899px) {
    .inbox[b-6m0nj2ls6v] {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .list-pane[b-6m0nj2ls6v] {
        border-right: 0;
    }

    .show-list .thread-pane[b-6m0nj2ls6v],
    .show-thread .list-pane[b-6m0nj2ls6v] {
        display: none;
    }

    .show-thread .thread-pane[b-6m0nj2ls6v] {
        min-height: min(80vh, 680px);
    }

    .back[b-6m0nj2ls6v] {
        display: inline-flex;
    }
}
/* /Components/Pages/Customers/CustomerDetailsPage.razor.rz.scp.css */
/* The customer hub (DESIGN.md §10 Record hub): who they are up top, contact and devices on the left,
   their history in tabs on the right. */

.crumb[b-oibe0twtts]  i {
    font-size: 10px;
}

.loading[b-oibe0twtts] {
    display: grid;
    gap: var(--gap);
}

/* ---------- Header ---------- */

.head[b-oibe0twtts] {
    align-items: center;
    margin-bottom: var(--gap);
}

.identity[b-oibe0twtts] {
    display: flex;
    gap: 16px;
    align-items: center;
    min-width: 0;
}

.avatar.xl[b-oibe0twtts] {
    width: 60px;
    height: 60px;
    border: 0;
    font-size: 20px;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    transition: transform 0.3s var(--ease-spring);
}

.avatar.xl:hover[b-oibe0twtts] {
    transform: rotate(-8deg) scale(1.05);
}

.identity-text[b-oibe0twtts] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.identity-text h1[b-oibe0twtts] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.flag-pill[b-oibe0twtts] {
    display: inline-flex;
    animation: land 0.5s var(--ease-spring);
}

.tags[b-oibe0twtts] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.tag-link:hover[b-oibe0twtts] {
    text-decoration: none;
    filter: brightness(0.97);
}

/* The "…" menu: Edit, Flag and Merge, out of the way until wanted. */
.more[b-oibe0twtts] {
    position: relative;
}

.more-button[b-oibe0twtts] {
    padding-inline: 11px;
}

.menu-scrim[b-oibe0twtts] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.menu[b-oibe0twtts] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    display: grid;
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--overlay-shadow);
    animation: pop-b-oibe0twtts 0.18s var(--ease-out);
    transform-origin: top right;
}

.menu[hidden][b-oibe0twtts] {
    display: none;
}

.menu button[b-oibe0twtts],
.menu a[b-oibe0twtts] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu button:hover[b-oibe0twtts],
.menu a:hover[b-oibe0twtts],
.menu button:focus-visible[b-oibe0twtts],
.menu a:focus-visible[b-oibe0twtts] {
    background: var(--surface-2);
}

.menu button[b-oibe0twtts]  i,
.menu a[b-oibe0twtts]  i {
    width: 16px;
    color: var(--muted);
    text-align: center;
}

/* ---------- The four figures ---------- */

.stats[b-oibe0twtts] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.stat[b-oibe0twtts] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.stat > span:last-child[b-oibe0twtts] {
    display: grid;
    min-width: 0;
}

.stat .figure[b-oibe0twtts] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    animation: count-in 0.6s var(--ease-out);
}

.stat .label[b-oibe0twtts] {
    color: var(--muted);
    font-size: 13px;
}

.stat:hover[b-oibe0twtts]  .icon-tile {
    animation: bounce 0.5s var(--ease-spring);
}

/* ---------- Left column ---------- */

.hub[b-oibe0twtts] {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
}

.contact[b-oibe0twtts] {
    display: grid;
    gap: 2px;
}

.contact > a[b-oibe0twtts],
.contact > div[b-oibe0twtts] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 8px;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact > a:hover[b-oibe0twtts] {
    background: var(--surface-2);
}

.contact > div.muted[b-oibe0twtts] {
    color: var(--muted);
}

.contact[b-oibe0twtts]  i {
    width: 16px;
    margin-top: 3px;
    color: var(--muted);
    text-align: center;
}

.contact > a:hover[b-oibe0twtts]  i {
    color: var(--accent);
}

.contact span[b-oibe0twtts] {
    min-width: 0;
}

.contact small[b-oibe0twtts] {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.devices:focus[b-oibe0twtts] {
    outline: none;
}

.device[b-oibe0twtts] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.device[b-oibe0twtts] >  .thumb {
    justify-self: center;
    transition: transform 0.25s var(--ease-spring);
}

.device:hover[b-oibe0twtts] >  .thumb {
    transform: rotate(-6deg);
}

.device-text[b-oibe0twtts] {
    display: grid;
    gap: 2px;
    min-width: 0;
    font-size: 13px;
    color: var(--muted);
}

.device-text b[b-oibe0twtts] {
    font-size: 14px;
    color: var(--text);
}

.warranty[b-oibe0twtts] {
    margin-top: 2px;
}

.device-links[b-oibe0twtts] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
}

.device-links a[b-oibe0twtts],
.device-links .link-button[b-oibe0twtts] {
    font-size: 13px;
}

.device-links[b-oibe0twtts]  i {
    font-size: 10px;
    margin-right: 3px;
}

.repairs[b-oibe0twtts] {
    padding: 0 8px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* ---------- The work: tabs ---------- */

.work[b-oibe0twtts] {
    padding-top: 4px;
    padding-bottom: 8px;
}

.work:focus[b-oibe0twtts] {
    outline: none;
}

.work .tab-panel[b-oibe0twtts] {
    padding-top: 8px;
}

.work .table-wrap[b-oibe0twtts] {
    padding: 4px 8px 0;
}

.problem-cell[b-oibe0twtts] {
    min-width: 220px;
}

.tech[b-oibe0twtts] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tab-actions[b-oibe0twtts] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 6px;
}

/* The appointments tab: what they are, and any no-shows. */
.appointments-line[b-oibe0twtts] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rows[b-oibe0twtts] {
    display: grid;
    padding-bottom: 8px;
}

.number[b-oibe0twtts] {
    flex: none;
    min-width: 84px;
    font-size: 13px;
}

.what[b-oibe0twtts] {
    flex: 1;
    display: grid;
    min-width: 0;
}

.what span[b-oibe0twtts] {
    font-size: 13px;
    color: var(--muted);
}

.chev[b-oibe0twtts] {
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring), color 0.15s;
}

.list-row:hover .chev[b-oibe0twtts] {
    transform: translateX(3px);
    color: var(--text);
}

/* Notes: speech bubbles with avatars, pinned ones tinted (DESIGN.md §8 Activity feed). */
.composer[b-oibe0twtts] {
    display: flex;
    gap: 12px;
    padding: 12px var(--pad) 16px;
    border-bottom: 1px solid var(--border);
}

.composer-box[b-oibe0twtts] {
    flex: 1;
    display: grid;
    gap: 8px;
    min-width: 0;
}

.composer-row[b-oibe0twtts] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.composer-files[b-oibe0twtts] {
    flex: 1 1 200px;
    min-width: 0;
}

.notes[b-oibe0twtts] {
    display: grid;
    gap: 14px;
    padding: 16px var(--pad) 12px;
}

.note[b-oibe0twtts] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    animation: fade-up 0.3s var(--ease-out);
}

.bubble[b-oibe0twtts] {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--bubble-border);
    border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg);
    background: var(--bubble);
}

.bubble.pinned[b-oibe0twtts] {
    border-color: color-mix(in srgb, var(--status-waiting) 30%, transparent);
    background: var(--status-waiting-soft);
}

.bubble p[b-oibe0twtts] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.meta[b-oibe0twtts] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 13px;
    color: var(--muted);
}

.meta b[b-oibe0twtts] {
    color: var(--text);
    font-weight: 600;
}

.pinned-label[b-oibe0twtts] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--status-waiting);
    font-size: 12px;
    font-weight: 600;
}

.note-actions[b-oibe0twtts] {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
    opacity: 0.45;
    transition: opacity 0.15s;
}

.note:hover .note-actions[b-oibe0twtts],
.note:focus-within .note-actions[b-oibe0twtts] {
    opacity: 1;
}

.note-actions .icon-button[b-oibe0twtts] {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.is-pinned .note-actions .icon-button.on[b-oibe0twtts] {
    color: var(--status-waiting);
}

.confirm-remove[b-oibe0twtts] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius);
    background: var(--status-problem-soft);
    color: var(--status-problem);
    font-size: 13px;
    font-weight: 500;
    animation: fade-up 0.2s var(--ease-out);
}

.confirm-remove > span[b-oibe0twtts] {
    flex: 1 1 180px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.form-actions[b-oibe0twtts] {
    justify-content: flex-end;
}

.bubble .form-actions[b-oibe0twtts] {
    justify-content: flex-start;
}

@keyframes pop-b-oibe0twtts {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
}

@media (max-width: 1199px) {
    .stats[b-oibe0twtts] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hub[b-oibe0twtts] {
        grid-template-columns: 300px minmax(0, 1fr);
    }
}

@media (max-width: 899px) {
    .hub[b-oibe0twtts] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 599px) {
    .identity[b-oibe0twtts] {
        align-items: flex-start;
    }

    .avatar.xl[b-oibe0twtts] {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }

    .stat[b-oibe0twtts] {
        gap: 10px;
        padding: 12px;
    }

    .stat .figure[b-oibe0twtts] {
        font-size: 20px;
    }

    .stat[b-oibe0twtts]  .icon-tile {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .head .head-actions[b-oibe0twtts] {
        width: 100%;
    }

    .head .head-actions .btn-primary[b-oibe0twtts] {
        flex: 1;
    }

    /* The "…" sits near the left on a phone, so its menu opens rightwards. */
    .menu[b-oibe0twtts] {
        right: auto;
        left: 0;
        transform-origin: top left;
    }
}

/* The customer's street, drawn small under their contact details (MapPreview). */
.panel[b-oibe0twtts]  .contact-map {
    margin: 10px 8px 2px;
}
/* /Components/Pages/Customers/CustomerListPage.razor.rz.scp.css */
/* Shared list styles (toolbar, data table, pager) live in app.css. */

.page-head[b-gh919zg14b] {
    margin-bottom: var(--gap);
}

.customers[b-gh919zg14b] {
    padding-top: 4px;
}

.toolbar[b-gh919zg14b] {
    margin: 14px 0 6px;
}

.toolbar .filter[b-gh919zg14b] {
    flex: 1 1 260px;
    max-width: 380px;
    width: auto;
}

.live[b-gh919zg14b] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.live-dot[b-gh919zg14b] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-done);
    animation: live-b-gh919zg14b 2.4s infinite;
}

.loading[b-gh919zg14b] {
    display: grid;
    gap: 14px;
    padding-top: 12px;
    padding-bottom: var(--pad);
}

/* Relative, so the hidden "Peek" header stays inside the scrolling box on phones. */
.table-wrap[b-gh919zg14b] {
    position: relative;
    padding: 0 8px;
}

.who[b-gh919zg14b] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.who-text[b-gh919zg14b] {
    display: grid;
    min-width: 0;
}

.name-line[b-gh919zg14b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.name[b-gh919zg14b] {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.name:hover[b-gh919zg14b] {
    color: var(--accent);
}

tbody tr:hover .avatar[b-gh919zg14b] {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    border-color: transparent;
}

.avatar[b-gh919zg14b] {
    transition: background-color 0.15s, color 0.15s;
}

.chev-cell[b-gh919zg14b] {
    width: 28px;
}

.chev[b-gh919zg14b] {
    display: inline-block;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring), color 0.15s;
}

tbody tr:hover .chev[b-gh919zg14b] {
    transform: translateX(3px);
    color: var(--text);
}

/* A customer a co-worker just added slides in at the top. */
tr.arrived td[b-gh919zg14b] {
    animation: arrive-b-gh919zg14b 0.6s var(--ease-spring);
}

.pager[b-gh919zg14b] {
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

/* ---------- Peek drawer ---------- */

.peek[b-gh919zg14b] {
    display: grid;
    gap: 16px;
    align-content: start;
    min-width: 0;
}

.peek > *[b-gh919zg14b],
.peek-section > *[b-gh919zg14b] {
    min-width: 0;
}

.peek .list-row[b-gh919zg14b] {
    gap: 10px;
}

.peek-loading[b-gh919zg14b] {
    display: grid;
    gap: 12px;
}

.peek-note[b-gh919zg14b] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
    font-size: 13px;
    font-weight: 500;
}

.peek-note[b-gh919zg14b]  i {
    margin-top: 3px;
}

.peek-stats[b-gh919zg14b] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.peek-stats > div[b-gh919zg14b] {
    display: grid;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--surface-2);
    animation: count-in 0.5s var(--ease-out) both;
}

.peek-stats > div:nth-child(2)[b-gh919zg14b] { animation-delay: 50ms; }
.peek-stats > div:nth-child(3)[b-gh919zg14b] { animation-delay: 100ms; }
.peek-stats > div:nth-child(4)[b-gh919zg14b] { animation-delay: 150ms; }

.peek-stats b[b-gh919zg14b] {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.peek-stats span[b-gh919zg14b] {
    font-size: 12px;
    color: var(--muted);
}

.peek-section[b-gh919zg14b] {
    display: grid;
    gap: 6px;
}

.peek-section h3[b-gh919zg14b] {
    margin: 0;
    color: var(--muted);
}

.peek-order[b-gh919zg14b] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.peek-devices[b-gh919zg14b] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.peek-device[b-gh919zg14b] {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
    width: 88px;
    text-align: center;
}

.peek-device[b-gh919zg14b]  .thumb {
    transition: transform 0.25s var(--ease-spring);
}

.peek-device:hover[b-gh919zg14b]  .thumb {
    transform: rotate(-8deg) scale(1.06);
}

.form-actions[b-gh919zg14b] {
    justify-content: flex-end;
}

@keyframes live-b-gh919zg14b {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-done) 55%, transparent); }
    70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

@keyframes arrive-b-gh919zg14b {
    from { opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 599px) {
    .live[b-gh919zg14b] {
        display: none;
    }

    .toolbar .filter[b-gh919zg14b] {
        max-width: none;
    }

    .who .avatar[b-gh919zg14b] {
        display: none;
    }

    .peek-stats[b-gh919zg14b] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Pages/HomePage.razor.rz.scp.css */
/* Option 1 (owner, 2026-10-30): the work on the left, the numbers to glance at in a rail on the right. */
.overview[b-ovw1ony8sw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--gap);
    align-items: start;
}

.work[b-ovw1ony8sw],
.rail[b-ovw1ony8sw] {
    display: grid;
    gap: var(--gap);
    align-content: start;
    min-width: 0;
}

.needs-action[b-ovw1ony8sw] {
    padding: 18px 0 8px;
}

.needs-action .card-head[b-ovw1ony8sw] {
    margin-bottom: 4px;
}

/* Team workload (DESIGN.md §8): each person's open repairs as a bar in their own colour. */
.workload-rows[b-ovw1ony8sw] {
    display: grid;
}

/* The name over its bar, so a row fits the rail. */
.workload-row[b-ovw1ony8sw] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px 12px;
}

.workload-row > .avatar[b-ovw1ony8sw] {
    grid-row: 1 / span 2;
}

.workload-row .who[b-ovw1ony8sw] {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Not on the staff here: their repairs are waiting to be given to someone else. */
.workload-row .former[b-ovw1ony8sw] {
    margin-left: 8px;
    color: var(--status-waiting);
    font-size: 11.5px;
    font-weight: 500;
}

.bar-track[b-ovw1ony8sw] {
    grid-column: 2;
    grid-row: 2;
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.bar[b-ovw1ony8sw] {
    display: block;
    height: 100%;
    width: var(--fill);
    border-radius: 999px;
    background: var(--bar);
    animation: grow-b-ovw1ony8sw 0.9s var(--ease-out) both;
}

.open[b-ovw1ony8sw] {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    text-align: right;
    white-space: nowrap;
}

/* Today (DESIGN.md §10): the takings and how they compare, in the rail. */
.revenue-today[b-ovw1ony8sw] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px 12px;
}

.hero[b-ovw1ony8sw] {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    animation: count-in 0.6s var(--ease-out);
}

.revenue-trend[b-ovw1ony8sw] {
    display: grid;
    justify-items: end;
    gap: 2px;
}

.trend[b-ovw1ony8sw] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
}

.trend.up[b-ovw1ony8sw] {
    color: var(--status-done);
    background: var(--status-done-soft);
}

.trend.down[b-ovw1ony8sw] {
    color: var(--status-problem);
    background: var(--status-problem-soft);
}

/* Today's figures and the period totals, two by two. */
.revenue-figures[b-ovw1ony8sw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--border);
    overflow: hidden;
}

.revenue-figures > div[b-ovw1ony8sw] {
    padding: 10px 12px;
    background: var(--surface);
}

.revenue-figures .figure[b-ovw1ony8sw] {
    font-size: 18px;
    font-weight: 700;
}

.new-customers[b-ovw1ony8sw] {
    margin: 0;
}

/* Part requests: the three queues at a glance, each opening its list. */
.part-counts[b-ovw1ony8sw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.part-count[b-ovw1ony8sw] {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 10px 6px;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--muted);
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s var(--ease-spring), background-color 0.15s;
}

.part-count:hover[b-ovw1ony8sw] {
    transform: translateY(-2px);
    text-decoration: none;
}

.part-count .figure[b-ovw1ony8sw] {
    color: var(--text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.part-count.to-order.has[b-ovw1ony8sw] {
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
}

.part-count.on-order.has[b-ovw1ony8sw] {
    background: var(--status-progress-soft);
    color: var(--status-progress);
}

.part-count.arrived.has[b-ovw1ony8sw] {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.part-count.has .figure[b-ovw1ony8sw] {
    color: inherit;
}

.parts .sub-head[b-ovw1ony8sw] {
    margin-bottom: -8px;
}

.appointment-time[b-ovw1ony8sw] {
    width: 72px;
    flex: none;
}

.appointment-text[b-ovw1ony8sw] {
    display: grid;
    min-width: 0;
}

.list-row[b-ovw1ony8sw] >  .fa-chevron-right {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring);
}

.list-row:hover[b-ovw1ony8sw] >  .fa-chevron-right {
    transform: translateX(3px);
}

@keyframes grow-b-ovw1ony8sw {
    from {
        width: 0;
    }
}

/* Narrower: the rail drops under the work, two cards across, then one. */
@media (max-width: 1199px) {
    .overview[b-ovw1ony8sw] {
        grid-template-columns: minmax(0, 1fr);
    }

    .rail[b-ovw1ony8sw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 899px) {
    .rail[b-ovw1ony8sw] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Inventory/PartsPage.razor.rz.scp.css */
/* Shared list styles (tabs, toolbar, data table, pager, KPI tiles) live in app.css. */

.page-head[b-asgqwvpw7y] {
    margin-bottom: var(--gap);
}

.kpis[b-asgqwvpw7y] {
    margin-bottom: var(--gap);
}

.parts[b-asgqwvpw7y] {
    padding-top: 6px;
    animation: page-in 0.35s var(--ease-out);
}

.toolbar[b-asgqwvpw7y] {
    margin: 14px 0 6px;
}

.category-filter[b-asgqwvpw7y] {
    width: auto;
    min-width: 170px;
}

.table-wrap[b-asgqwvpw7y] {
    padding: 4px 8px 0;
}

.loading[b-asgqwvpw7y] {
    display: grid;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: var(--pad);
}

.part-name[b-asgqwvpw7y] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.name[b-asgqwvpw7y] {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.name:hover[b-asgqwvpw7y] {
    color: var(--accent);
    text-decoration: underline;
}

.stock[b-asgqwvpw7y] {
    font-weight: 600;
}

.stock.low[b-asgqwvpw7y],
.stock.out[b-asgqwvpw7y] {
    color: var(--status-problem);
    font-size: 15px;
    font-weight: 700;
}

.grid tr.selected td[b-asgqwvpw7y] {
    background: var(--accent-soft);
}

.action[b-asgqwvpw7y] {
    width: 1%;
    white-space: nowrap;
}

/* The quantity picker that opens by Receive. */
.receive-form[b-asgqwvpw7y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: pop-b-asgqwvpw7y 0.25s var(--ease-spring);
}

.stepper-field[b-asgqwvpw7y] {
    display: inline-flex;
    align-items: center;
    height: 32px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    background: var(--surface);
}

.stepper-field:focus-within[b-asgqwvpw7y] {
    border-color: var(--accent-fill);
    box-shadow: var(--focus-ring);
}

.stepper-field .icon-button[b-asgqwvpw7y] {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.stepper-field input[b-asgqwvpw7y] {
    width: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}

.stepper-field input[b-asgqwvpw7y]::-webkit-outer-spin-button,
.stepper-field input[b-asgqwvpw7y]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Low stock: a heads-up, then the parts under their vendor. */
.low-banner[b-asgqwvpw7y] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px var(--pad) 6px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--status-problem-soft);
    color: var(--status-problem);
    font-size: 13px;
}

.low-banner b[b-asgqwvpw7y] {
    font-weight: 600;
}

.grid tr.vendor-group[b-asgqwvpw7y] {
    cursor: default;
}

.grid tr.vendor-group td[b-asgqwvpw7y] {
    padding-top: 9px;
    padding-bottom: 9px;
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
    font-size: 13px;
    font-weight: 600;
}

.vendor-group td[b-asgqwvpw7y]  i {
    margin-right: 8px;
    color: var(--muted);
}

.vendor-group .muted[b-asgqwvpw7y] {
    font-weight: 400;
}

.panel-hint[b-asgqwvpw7y] {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
}

/* Quick sell: the big buttons staff tap at the register. */
.quick-tiles[b-asgqwvpw7y] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 8px;
}

.quick-tile[b-asgqwvpw7y] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 124px;
    padding: 14px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s, border-color 0.2s;
}

.quick-tile:hover[b-asgqwvpw7y] {
    transform: translateY(-3px) rotate(-0.6deg);
    border-color: color-mix(in srgb, var(--accent-fill) 35%, var(--card-border));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-fill) 14%, transparent);
    text-decoration: none;
}

.quick-tile:hover[b-asgqwvpw7y]  .icon-tile {
    animation: bounce 0.5s var(--ease-spring);
}

.quick-tile.selected[b-asgqwvpw7y] {
    border-color: var(--accent-fill);
}

.quick-name[b-asgqwvpw7y] {
    font-weight: 600;
    line-height: 1.3;
}

.quick-price[b-asgqwvpw7y] {
    margin-top: auto;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.quick-stock[b-asgqwvpw7y] {
    color: var(--muted);
    font-size: 12px;
}

.quick-stock.low[b-asgqwvpw7y] {
    color: var(--status-problem);
    font-weight: 600;
}

@keyframes pop-b-asgqwvpw7y {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
}

@media (max-width: 599px) {
    .toolbar .filter[b-asgqwvpw7y] {
        width: 100%;
    }

    .category-filter[b-asgqwvpw7y] {
        flex: 1;
    }

    .quick-tiles[b-asgqwvpw7y] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A row that just changed glows accent-soft for a moment (DESIGN.md §9). */
.grid tr.glow td[b-asgqwvpw7y] {
    animation: glow-b-asgqwvpw7y 2.6s ease;
}

@keyframes glow-b-asgqwvpw7y {
    0%,
    30% {
        background-color: var(--accent-soft);
    }
}
/* /Components/Pages/Inventory/UsedDevicesPage.razor.rz.scp.css */
/* Shared list styles (tabs, chips, data table, pager, KPI tiles) live in app.css. */

.page-head[b-kk6rusmzgr] {
    margin-bottom: var(--gap);
}

.kpis[b-kk6rusmzgr] {
    margin-bottom: var(--gap);
}

.devices[b-kk6rusmzgr] {
    padding-top: 6px;
    animation: page-in 0.35s var(--ease-out);
}

.toolbar[b-kk6rusmzgr] {
    margin: 14px 0 6px;
}

.chips[b-kk6rusmzgr]  i {
    font-size: 12px;
    color: var(--muted);
}

.chip.on[b-kk6rusmzgr]  i {
    color: inherit;
}

.table-wrap[b-kk6rusmzgr] {
    padding: 4px 8px 0;
}

.loading[b-kk6rusmzgr] {
    display: grid;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: var(--pad);
}

.grid tr.selected td[b-kk6rusmzgr] {
    background: var(--accent-soft);
}

.invoice-link[b-kk6rusmzgr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    white-space: nowrap;
}

/* In stock: a shop window of cards. */
.device-grid[b-kk6rusmzgr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 8px;
}

.device-card[b-kk6rusmzgr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s, border-color 0.2s;
    animation: fade-up 0.35s var(--ease-out) both;
}

.device-card:hover[b-kk6rusmzgr] {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent-fill) 35%, var(--card-border));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-fill) 14%, transparent);
    text-decoration: none;
}

.device-card:hover[b-kk6rusmzgr]  .thumb {
    animation: tilt-b-kk6rusmzgr 0.6s var(--ease-spring);
}

.device-card.selected[b-kk6rusmzgr] {
    border-color: var(--accent-fill);
}

.top[b-kk6rusmzgr] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.who[b-kk6rusmzgr] {
    display: grid;
    min-width: 0;
}

.who b[b-kk6rusmzgr] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.small[b-kk6rusmzgr] {
    font-size: 12px;
}

.price-row[b-kk6rusmzgr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.price[b-kk6rusmzgr] {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.foot[b-kk6rusmzgr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

@keyframes tilt-b-kk6rusmzgr {
    30% {
        transform: rotate(-8deg);
    }

    60% {
        transform: rotate(5deg);
    }
}

@media (max-width: 599px) {
    .toolbar .filter[b-kk6rusmzgr] {
        width: 100%;
    }

    .chips[b-kk6rusmzgr] {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        min-width: 0;
        max-width: 100%;
    }

    .chip[b-kk6rusmzgr] {
        flex: none;
    }
}
/* /Components/Pages/Invoices/InvoiceDetailsPage.razor.rz.scp.css */
.crumb[b-r714j8yrbs]  i {
    font-size: 10px;
}

.loading[b-r714j8yrbs] {
    display: grid;
    gap: 10px;
    padding: 8px 0;
}

.title-row[b-r714j8yrbs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.page-head .sub[b-r714j8yrbs] {
    margin-top: 4px;
}

.page-head .sub a[b-r714j8yrbs] {
    font-weight: 500;
}

.late[b-r714j8yrbs] {
    color: var(--status-problem);
    font-weight: 600;
}

/* The page's banner: why its lines are locked, or that it was cancelled. */
.closed-note[b-r714j8yrbs] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--gap);
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 14px;
    animation: fade-up 0.3s var(--ease-out);
}

.closed-note.done[b-r714j8yrbs] {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.form-alert[b-r714j8yrbs] {
    margin-top: var(--gap);
}

.cols-side-main[b-r714j8yrbs] {
    margin-top: var(--gap);
}

/* ---------- The "…" menu ---------- */

.more[b-r714j8yrbs] {
    position: relative;
}

.more-button[b-r714j8yrbs] {
    width: var(--control-h);
    padding: 0;
}

.menu[b-r714j8yrbs],
.menu-catcher[b-r714j8yrbs] {
    display: none;
}

.more.open .menu-catcher[b-r714j8yrbs] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
}

.more.open .menu[b-r714j8yrbs] {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 31;
    display: grid;
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--overlay-shadow);
    animation: menu-in-b-r714j8yrbs 0.18s var(--ease-out);
}

.menu-item[b-r714j8yrbs] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.menu-item:hover[b-r714j8yrbs],
.menu-item:focus-visible[b-r714j8yrbs] {
    background: var(--surface-2);
}

.menu-item.danger[b-r714j8yrbs] {
    color: var(--status-problem);
}

/* ---------- The left column ---------- */

.person[b-r714j8yrbs] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.person-tags[b-r714j8yrbs] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.small[b-r714j8yrbs] {
    font-size: 13px;
}

.order-link[b-r714j8yrbs] {
    border-bottom: 0;
}

.order-text[b-r714j8yrbs] {
    display: grid;
    min-width: 0;
}

.order-link[b-r714j8yrbs] >  .fa-chevron-right {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring);
}

.order-link:hover[b-r714j8yrbs] >  .fa-chevron-right {
    transform: translateX(3px);
}

.hint[b-r714j8yrbs] {
    margin: 0;
}

/* ---------- The work: items, payments and activity in tabs ---------- */

.work[b-r714j8yrbs] {
    padding: 8px 0 0;
}

.work .tab-panel[b-r714j8yrbs] {
    padding: 18px var(--pad) var(--pad);
}

.cancel-confirm[b-r714j8yrbs] {
    display: grid;
    gap: 14px;
}

.cancel-confirm p[b-r714j8yrbs] {
    margin: 0;
}

.warn[b-r714j8yrbs] {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--status-problem-soft);
    color: var(--status-problem);
    font-size: 13px;
    font-weight: 500;
}

.form-actions.end[b-r714j8yrbs] {
    justify-content: flex-end;
}

@keyframes menu-in-b-r714j8yrbs {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
}
/* /Components/Pages/Invoices/InvoiceListPage.razor.rz.scp.css */
/* Shared list styles (tabs, filter box, data table, pager) live in app.css. */

/* ---------- Owing, overdue and taken today ---------- */

.money-tiles[b-6qbaxw91k2] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--gap);
}

/* Phones: two a row (DESIGN.md §10), with Taken today across the bottom. */
@media (max-width: 599px) {
    .money-tiles[b-6qbaxw91k2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .money-tiles[b-6qbaxw91k2]  .kpi:last-child {
        grid-column: 1 / -1;
    }
}

/* ---------- Quick pay: a slim scan bar ---------- */

.quick-pay[b-6qbaxw91k2] {
    display: grid;
    gap: 10px;
    margin-top: var(--gap);
    padding: 14px var(--pad);
}

.quick-pay-form[b-6qbaxw91k2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.quick-pay-form label[b-6qbaxw91k2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.quick-pay-form label[b-6qbaxw91k2]  i {
    color: var(--status-waiting);
}

.scan-field[b-6qbaxw91k2] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 260px;
    max-width: 440px;
}

.scan-field[b-6qbaxw91k2]  i {
    position: absolute;
    left: 12px;
    color: var(--muted);
    pointer-events: none;
}

.scan-field input[b-6qbaxw91k2] {
    padding-left: 36px;
}

.quick-note[b-6qbaxw91k2] {
    margin: 0;
}

.matches[b-6qbaxw91k2] {
    display: grid;
}

.match[b-6qbaxw91k2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 4px;
    border-top: 1px solid var(--border);
    animation: fade-up 0.3s var(--ease-out);
}

.match-text[b-6qbaxw91k2] {
    flex: 1 1 200px;
    min-width: 0;
}

/* ---------- The list ---------- */

.list-card[b-6qbaxw91k2] {
    margin-top: var(--gap);
}

.list-head[b-6qbaxw91k2] {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: flex-end;
    gap: 10px 16px;
    padding: 8px var(--pad) 0;
    border-bottom: 1px solid var(--border);
}

.list-head[b-6qbaxw91k2]  .tabs {
    flex: 1 1 auto;
    border-bottom: 0;
}

.list-head .filter[b-6qbaxw91k2] {
    flex: 0 1 280px;
    margin-bottom: 8px;
}

.list-head[b-6qbaxw91k2]  .columns {
    margin-bottom: 8px;
}

.list-card > .table-wrap[b-6qbaxw91k2] {
    padding: 8px;
}

.loading[b-6qbaxw91k2] {
    display: grid;
    gap: 14px;
    padding: 20px var(--pad);
}

.owing[b-6qbaxw91k2] {
    font-weight: 700;
}

.zero[b-6qbaxw91k2] {
    color: var(--muted);
}

.late[b-6qbaxw91k2] {
    color: var(--status-problem);
    font-weight: 600;
}

.grid tbody tr.selected td[b-6qbaxw91k2] {
    background: var(--accent-soft);
}

/* ---------- The peek drawer ---------- */

/* The drawer's body stretches to its full height; keep its parts at their own size, top first. */
.drawer-stack[b-6qbaxw91k2] {
    display: grid;
    gap: 16px;
    align-content: start;
}

.peek-head[b-6qbaxw91k2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.small[b-6qbaxw91k2] {
    font-size: 13px;
}

.peek-balance[b-6qbaxw91k2] {
    display: grid;
    gap: 2px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.peek-balance b[b-6qbaxw91k2] {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.peek-balance.settled .strong[b-6qbaxw91k2],
.peek-balance.settled b[b-6qbaxw91k2] {
    color: var(--status-done);
}

.peek-lines[b-6qbaxw91k2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    font-size: 14px;
}

.peek-lines small[b-6qbaxw91k2] {
    display: block;
    font-size: 12px;
}

.peek-lines .num[b-6qbaxw91k2] {
    text-align: right;
}

.peek-lines .sum[b-6qbaxw91k2] {
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-weight: 700;
}

.discounted[b-6qbaxw91k2] {
    color: var(--status-done);
}

.peek-payments[b-6qbaxw91k2] {
    display: grid;
    gap: 4px;
}

.peek-what[b-6qbaxw91k2] {
    display: grid;
    min-width: 0;
}

.amount[b-6qbaxw91k2] {
    margin-left: auto;
}

.peek-payments .removed[b-6qbaxw91k2] {
    opacity: 0.6;
}

.peek-payments .removed .amount[b-6qbaxw91k2] {
    text-decoration: line-through;
}

@media (max-width: 599px) {
    .list-head[b-6qbaxw91k2] {
        padding: 12px 12px 0;
    }

    .list-head .filter[b-6qbaxw91k2] {
        flex: 1 1 100%;
        width: 100%;
    }

    .quick-pay-form label[b-6qbaxw91k2] {
        flex: 1 1 100%;
    }

    .quick-pay-form .btn[b-6qbaxw91k2] {
        flex: 1 1 auto;
    }
}
/* /Components/Pages/Invoices/InvoicePrintPage.razor.rz.scp.css */
/* Letter paper, light-only, ink-saving: greys and black, no colour fills (DESIGN.md §12). */
.sheet[b-n57et58kwk] {
    --edge: 0.45in;
    width: 8.5in;
    max-width: 100%;
    min-height: 11in;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 0.35in;
    background: #ffffff;
    color: #16181f;
    font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.mono[b-n57et58kwk],
.number[b-n57et58kwk] {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

h4[b-n57et58kwk] {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.band[b-n57et58kwk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding: 0.3in var(--edge) 0.24in;
    background: #ececec;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.shop[b-n57et58kwk] {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.shop .mark[b-n57et58kwk] {
    flex: none;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #3a3d45;
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
}

.shop b[b-n57et58kwk] {
    display: block;
    font-size: 18px;
    line-height: 1.2;
}

.shop span[b-n57et58kwk] {
    display: block;
    color: #3d404a;
    font-size: 11.5px;
}

.title[b-n57et58kwk] {
    display: grid;
    justify-items: end;
    text-align: right;
}

.title small[b-n57et58kwk] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #50545f;
}

.title .number[b-n57et58kwk] {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.title .when[b-n57et58kwk] {
    font-size: 11.5px;
    color: #3d404a;
}

.journey[b-n57et58kwk] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: start;
    margin: 0 var(--edge);
    padding-bottom: 14px;
    border-bottom: 1px solid #d9d9d9;
}

.step[b-n57et58kwk] {
    position: relative;
    padding-top: 18px;
    font-size: 11px;
    color: #50545f;
}

.step[b-n57et58kwk]::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    height: 2px;
    background: #16181f;
}

.step:nth-child(3)[b-n57et58kwk]::before {
    right: auto;
    width: 12px;
}

.step[b-n57et58kwk]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #16181f;
}

.step b[b-n57et58kwk] {
    display: block;
    color: #16181f;
    font-size: 12px;
}

.turnaround[b-n57et58kwk] {
    display: grid;
    justify-items: end;
    padding-left: 20px;
}

.turnaround b[b-n57et58kwk] {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 18px;
    line-height: 1.1;
}

.turnaround span[b-n57et58kwk] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #50545f;
}

.people[b-n57et58kwk] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0 var(--edge);
}

.people > div[b-n57et58kwk] {
    display: grid;
    align-content: start;
}

.people b[b-n57et58kwk] {
    font-size: 13px;
}

table.lines[b-n57et58kwk] {
    width: calc(100% - 2 * var(--edge));
    margin: 0 var(--edge);
    border-collapse: collapse;
}

.lines th[b-n57et58kwk] {
    padding: 0 0 6px;
    border-bottom: 2px solid #16181f;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.lines td[b-n57et58kwk] {
    padding: 7px 0;
    border-bottom: 1px solid #d9d9d9;
    vertical-align: top;
}

.lines small[b-n57et58kwk] {
    display: block;
    color: #5a5e69;
    font-size: 11px;
}

.lines .r[b-n57et58kwk],
.totals .r[b-n57et58kwk] {
    text-align: right;
}

.bottom[b-n57et58kwk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.1in;
    gap: 32px;
    align-items: start;
    margin: 0 var(--edge);
}

.notes p[b-n57et58kwk] {
    margin: 0 0 10px;
    color: #2e3139;
}

.signature[b-n57et58kwk] {
    display: grid;
    gap: 4px;
    margin-top: 4px;
    font-size: 10.5px;
    color: #50545f;
}

.signature .line[b-n57et58kwk] {
    height: 30px;
    border-bottom: 1px solid #16181f;
}

.totals[b-n57et58kwk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
}

.totals .label[b-n57et58kwk] {
    color: #50545f;
}

.totals .strong[b-n57et58kwk] {
    padding-top: 5px;
    border-top: 1px solid #16181f;
    font-weight: 700;
    font-size: 13.5px;
}

.paid-box[b-n57et58kwk],
.due-box[b-n57et58kwk] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-top: 10px;
    padding: 11px 13px;
    border: 2px solid #16181f;
    border-radius: 12px;
}

.due-box[b-n57et58kwk] {
    grid-template-columns: minmax(0, 1fr) auto;
}

.paid-box .tick[b-n57et58kwk] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #16181f;
    color: #ffffff;
    font-weight: 700;
    font-size: 17px;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.paid-box b[b-n57et58kwk],
.due-box b[b-n57et58kwk] {
    display: block;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.paid-box span span[b-n57et58kwk],
.due-box span span[b-n57et58kwk] {
    font-size: 11px;
    color: #50545f;
}

.paid-box .amount[b-n57et58kwk],
.due-box .amount[b-n57et58kwk] {
    font-size: 21px;
    font-weight: 600;
}

.coupon[b-n57et58kwk] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin: 6px var(--edge) 0;
    padding: 14px 18px;
    border: 2px dashed #16181f;
    border-radius: 14px;
}

.coupon[b-n57et58kwk]::before {
    content: "✂";
    position: absolute;
    top: -12px;
    left: 22px;
    padding: 0 6px;
    background: #ffffff;
    font-size: 15px;
}

.coupon small[b-n57et58kwk] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #50545f;
}

.coupon > div > b[b-n57et58kwk] {
    display: block;
    margin: 2px 0 4px;
    font-size: 19px;
    line-height: 1.2;
}

.coupon p[b-n57et58kwk] {
    margin: 0;
    max-width: 56ch;
    color: #2e3139;
    font-size: 11.5px;
}

.code[b-n57et58kwk] {
    display: block;
    width: 0.8in;
    height: 0.8in;
}

.code[b-n57et58kwk]  svg,
.foot-code[b-n57et58kwk]  svg {
    display: block;
    width: 100%;
    height: 100%;
}

.foot[b-n57et58kwk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin: auto var(--edge) 0;
    font-size: 11px;
    color: #50545f;
}

.foot-code[b-n57et58kwk] {
    display: grid;
    justify-items: center;
    gap: 3px;
    width: 0.65in;
    flex: none;
}

.foot-code[b-n57et58kwk]  .qr-code {
    display: block;
    width: 0.65in;
    height: 0.65in;
}

.missing[b-n57et58kwk] {
    font-size: 15px;
}

@media print {
    .sheet[b-n57et58kwk] {
        --edge: 0.15in;
        width: auto;
        min-height: 0;
        padding-bottom: 0;
        box-shadow: none;
    }
}

@media (max-width: 699px) {
    .band[b-n57et58kwk],
    .bottom[b-n57et58kwk] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .people[b-n57et58kwk],
    .journey[b-n57et58kwk] {
        grid-template-columns: minmax(0, 1fr);
    }

    .title[b-n57et58kwk] {
        justify-items: start;
        text-align: left;
    }
}

/* What was done spans the row under the customer and device. */
.people .work[b-n57et58kwk] {
    grid-column: 1 / -1;
}

.work-text[b-n57et58kwk] {
    white-space: pre-line;
}
/* /Components/Pages/Invoices/PointOfSalePage.razor.rz.scp.css */
/* The register: the shelf on the left, the cart on the right (DESIGN.md §10). */
.register[b-2j854n9tb5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: var(--gap);
    align-items: start;
    margin-top: var(--gap);
}

.shelf[b-2j854n9tb5] {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-width: 0;
}

.small[b-2j854n9tb5] {
    font-size: 13px;
}

/* ---------- The scan box: big, focused on load, and it looks alive when it is ---------- */

.scan-card[b-2j854n9tb5] {
    display: grid;
    gap: 8px;
    padding: 16px var(--pad) 12px;
}

.scan[b-2j854n9tb5] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding: 0 8px 0 16px;
    border: 1.5px solid var(--field-border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    cursor: text;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.scan:focus-within[b-2j854n9tb5] {
    border-color: var(--accent-fill);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-fill) 18%, transparent);
}

.scan[b-2j854n9tb5] >  .fa-barcode {
    color: var(--accent);
    font-size: 20px;
}

.scan:focus-within[b-2j854n9tb5] >  .fa-barcode {
    animation: scanning-b-2j854n9tb5 1.4s ease-in-out infinite;
}

.scan input[b-2j854n9tb5] {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 16px;
}

.scan input[b-2j854n9tb5]::placeholder {
    color: var(--muted);
}

.scan-hint[b-2j854n9tb5] {
    margin: 0;
}

/* Category chips: every one in view, wrapping when there are many. */
.shelf-chips[b-2j854n9tb5] {
    gap: 6px 8px;
    margin-top: 4px;
}

.shelf-chips .chip[b-2j854n9tb5] {
    flex: none;
}

.skeleton-tile[b-2j854n9tb5] {
    padding: 14px;
}

.shelf-head[b-2j854n9tb5] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: -4px;
}

.shelf-head h2[b-2j854n9tb5] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

/* ---------- Item tiles ---------- */

.tiles[b-2j854n9tb5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
    gap: 12px;
}

.tile[b-2j854n9tb5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: 140px;
    padding: 14px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    animation: fade-up 0.3s var(--ease-out);
    transition: transform 0.18s var(--ease-spring), border-color 0.15s, box-shadow 0.2s;
}

.tile:hover[b-2j854n9tb5] {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent-fill) 35%, var(--card-border));
    box-shadow: var(--lift-shadow);
}

.tile:active[b-2j854n9tb5] {
    transform: scale(0.95);
}

.tile.in-cart[b-2j854n9tb5] {
    border-color: color-mix(in srgb, var(--accent-fill) 45%, var(--card-border));
}

.tile.nope[b-2j854n9tb5] {
    animation: shake 0.4s;
}

.art[b-2j854n9tb5] {
    display: block;
}

.art.wiggle[b-2j854n9tb5] {
    animation: wiggle-b-2j854n9tb5 0.5s var(--ease-spring);
}

.art[b-2j854n9tb5]  .icon-tile {
    width: 40px;
    height: 40px;
    font-size: 17px;
}

.tile-name[b-2j854n9tb5] {
    flex: 1;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.tile-detail[b-2j854n9tb5] {
    margin-top: -6px;
    font-size: 12px;
}

.tile-foot[b-2j854n9tb5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}

.tile-foot b[b-2j854n9tb5] {
    font-size: 15px;
}

.extra[b-2j854n9tb5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

/* ---------- The cart ---------- */

.summary[b-2j854n9tb5] {
    position: sticky;
    top: 72px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--pad);
}

.customer-search[b-2j854n9tb5] {
    position: relative;
    display: flex;
    align-items: center;
}

.customer-search[b-2j854n9tb5] >  i {
    position: absolute;
    left: 12px;
    color: var(--muted);
    pointer-events: none;
}

.customer-search input[b-2j854n9tb5] {
    padding-left: 38px;
}

.customer-matches[b-2j854n9tb5] {
    display: grid;
    margin-top: 6px;
}

/* Customer search results (the stock tiles found by a search are .tile.match too). */
.customer-matches .match[b-2j854n9tb5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    animation: fade-up 0.25s var(--ease-out);
}

.customer-matches .match:hover[b-2j854n9tb5],
.customer-matches .match:focus-visible[b-2j854n9tb5] {
    background: var(--surface-2);
}

.match-text[b-2j854n9tb5] {
    min-width: 0;
}

.customer-matches p[b-2j854n9tb5] {
    margin: 6px 8px;
}

.add-customer .match-text[b-2j854n9tb5] {
    color: var(--accent);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.new-customer-form[b-2j854n9tb5] {
    display: grid;
    gap: 14px;
}

.picked[b-2j854n9tb5] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    animation: fade-up 0.3s var(--ease-out);
}

.picked-text[b-2j854n9tb5] {
    display: grid;
    min-width: 0;
}

.picked-tags[b-2j854n9tb5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.cart-head[b-2j854n9tb5] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cart-head h2[b-2j854n9tb5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 0 0;
    font-size: 16px;
    font-weight: 600;
}

.bump[b-2j854n9tb5] {
    animation: bump-b-2j854n9tb5 0.45s var(--ease-spring);
}

.cart[b-2j854n9tb5] {
    display: flex;
    flex-direction: column;
    max-height: min(44vh, 440px);
    margin: 0 -6px;
    padding: 0 6px;
    overflow-y: auto;
    list-style: none;
}

.cart li[b-2j854n9tb5] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto 30px;
    grid-template-areas: "art what qty amount remove";
    align-items: center;
    gap: 4px 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    animation: slide-in-b-2j854n9tb5 0.45s var(--ease-spring);
}

.cart li:last-child[b-2j854n9tb5] {
    border-bottom: 0;
}

.cart li[b-2j854n9tb5] >  .icon-tile {
    grid-area: art;
}

.what[b-2j854n9tb5] {
    grid-area: what;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.35;
}

.what b[b-2j854n9tb5] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.what .muted[b-2j854n9tb5] {
    font-size: 12px;
}

.stock-tag[b-2j854n9tb5] {
    align-self: flex-start;
    margin-top: 2px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--status-neutral-soft);
    color: var(--status-neutral);
    font-size: 11px;
    font-weight: 600;
}

.discounted[b-2j854n9tb5] {
    color: var(--status-done) !important;
}

.what .discounted[b-2j854n9tb5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}

.qty[b-2j854n9tb5] {
    grid-area: qty;
}

.stepper-box[b-2j854n9tb5] {
    display: inline-flex;
    align-items: center;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 999px;
}

.stepper-box button[b-2j854n9tb5] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    font-size: 11px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, transform 0.15s var(--ease-spring);
}

.stepper-box button:hover[b-2j854n9tb5] {
    background: var(--surface-2);
    color: var(--text);
}

.stepper-box button:active[b-2j854n9tb5] {
    transform: scale(0.85);
}

.stepper-box .num[b-2j854n9tb5] {
    min-width: 20px;
    font-weight: 600;
    text-align: center;
}

.amount[b-2j854n9tb5] {
    grid-area: amount;
    min-width: 64px;
    font-weight: 600;
    text-align: right;
}

.cart li > .remove[b-2j854n9tb5] {
    grid-area: remove;
    width: 30px;
    height: 30px;
}

.remove:hover[b-2j854n9tb5] {
    color: var(--status-problem);
}

.totals[b-2j854n9tb5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.totals .num[b-2j854n9tb5] {
    text-align: right;
}

.total-label[b-2j854n9tb5] {
    align-self: end;
    padding-bottom: 4px;
    font-weight: 600;
}

.total-figure[b-2j854n9tb5] {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    animation: count-in 0.45s var(--ease-out);
}

/* ---------- Tenders and the charge button ---------- */

.tenders[b-2j854n9tb5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.tender[b-2j854n9tb5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, transform 0.15s var(--ease-spring);
}

.tender span[b-2j854n9tb5] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tender:hover[b-2j854n9tb5] {
    border-color: var(--field-border);
}

.tender:active[b-2j854n9tb5] {
    transform: scale(0.95);
}

.tender.on[b-2j854n9tb5] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

.more[b-2j854n9tb5] {
    position: relative;
}

.menu[b-2j854n9tb5],
.menu-catcher[b-2j854n9tb5] {
    display: none;
}

.more.open .menu-catcher[b-2j854n9tb5] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
}

/* Opens upwards: the cart sits low on the screen. */
.more.open .menu[b-2j854n9tb5] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 31;
    display: grid;
    width: 240px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--overlay-shadow);
    animation: menu-in-b-2j854n9tb5 0.18s var(--ease-out);
}

.menu-title[b-2j854n9tb5] {
    padding: 6px 10px 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.menu-item[b-2j854n9tb5] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 4px 10px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.menu-item[b-2j854n9tb5] >  i {
    width: 16px;
    color: var(--muted);
}

.menu-item small[b-2j854n9tb5] {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.menu-item:hover:not(:disabled)[b-2j854n9tb5],
.menu-item:focus-visible[b-2j854n9tb5] {
    background: var(--surface-2);
}

.menu-item:disabled[b-2j854n9tb5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.menu-divider[b-2j854n9tb5] {
    height: 1px;
    margin: 4px 6px;
    background: var(--border);
}

.charge[b-2j854n9tb5] {
    width: 100%;
    min-height: 56px;
    font-size: 16px;
}

.charge:disabled[b-2j854n9tb5] {
    opacity: 0.55;
    box-shadow: none;
}

.hint[b-2j854n9tb5] {
    margin: -4px 0 0;
    text-align: center;
}

/* ---------- The dialogs ---------- */

.entry[b-2j854n9tb5],
.discount-form[b-2j854n9tb5] {
    gap: 14px;
}

.two[b-2j854n9tb5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.presets[b-2j854n9tb5] {
    display: grid;
    gap: 6px;
}

.form-actions.end[b-2j854n9tb5] {
    justify-content: flex-end;
}

/* ---------- Today's sales ---------- */

/* The drawer's body stretches to its full height; keep its parts at their own size, top first. */
.drawer-stack[b-2j854n9tb5] {
    display: grid;
    gap: 16px;
    align-content: start;
}

.today-sum[b-2j854n9tb5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.today-sum b[b-2j854n9tb5] {
    font-size: 24px;
    font-weight: 700;
}

.today-list[b-2j854n9tb5] {
    display: grid;
}

.today-text[b-2j854n9tb5] {
    display: grid;
    min-width: 0;
}

.today-amount[b-2j854n9tb5] {
    margin-left: auto;
}

.today-list .list-row[b-2j854n9tb5] >  .fa-chevron-right {
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring);
}

.today-list .list-row:hover[b-2j854n9tb5] >  .fa-chevron-right {
    transform: translateX(3px);
}

@keyframes scanning-b-2j854n9tb5 {
    50% {
        opacity: 0.5;
        transform: scaleY(0.75);
    }
}

@keyframes wiggle-b-2j854n9tb5 {
    30% {
        transform: rotate(-10deg) scale(1.12);
    }

    60% {
        transform: rotate(6deg);
    }
}

@keyframes bump-b-2j854n9tb5 {
    40% {
        transform: scale(1.35);
    }
}

@keyframes slide-in-b-2j854n9tb5 {
    from {
        opacity: 0;
        transform: translateX(24px) scale(0.96);
    }
}

@keyframes menu-in-b-2j854n9tb5 {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.98);
    }
}

@media (max-width: 1199px) {
    .register[b-2j854n9tb5] {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
}

@media (max-width: 999px) {
    .register[b-2j854n9tb5] {
        grid-template-columns: minmax(0, 1fr);
    }

    .summary[b-2j854n9tb5] {
        position: static;
    }

    .cart[b-2j854n9tb5] {
        max-height: none;
    }
}

@media (max-width: 599px) {
    .tiles[b-2j854n9tb5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .tile[b-2j854n9tb5] {
        min-height: 128px;
        padding: 12px;
    }

    .two[b-2j854n9tb5] {
        grid-template-columns: minmax(0, 1fr);
    }

    .summary[b-2j854n9tb5] {
        padding: 16px;
    }

    /* Phones: name on top, the stepper and amount under it. */
    .cart li[b-2j854n9tb5] {
        grid-template-columns: 34px minmax(0, 1fr) auto 30px;
        grid-template-areas:
            "art what what remove"
            "art qty amount amount";
    }

    .qty[b-2j854n9tb5] {
        justify-self: start;
    }

    .tender[b-2j854n9tb5] {
        font-size: 12px;
        gap: 4px;
    }
}
/* /Components/Pages/Invoices/QuickBooksSyncPage.razor.rz.scp.css */
.crumb[b-hyhf8sz1dm]  i {
    font-size: 10px;
}

.small[b-hyhf8sz1dm] {
    font-size: 13px;
}

/* ---------- The connection, or the way to make one ---------- */

.connection[b-hyhf8sz1dm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    margin-top: var(--gap);
    padding: 16px var(--pad);
}

.connection-text[b-hyhf8sz1dm] {
    flex: 1 1 260px;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.connection.off[b-hyhf8sz1dm] {
    border-color: color-mix(in srgb, var(--status-waiting) 40%, var(--card-border));
    background: color-mix(in srgb, var(--status-waiting-soft) 45%, var(--surface));
}

.live-dot[b-hyhf8sz1dm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-done);
    animation: pulse-dot 1.8s infinite;
}

/* ---------- Tiles ---------- */

.tiles[b-hyhf8sz1dm],
.skeleton-tiles[b-hyhf8sz1dm] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
    margin-top: var(--gap);
}

.tile[b-hyhf8sz1dm] {
    width: 100%;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s, border-color 0.2s;
}

.tile:hover[b-hyhf8sz1dm] {
    transform: translateY(-2px);
    box-shadow: var(--lift-shadow);
    border-color: color-mix(in srgb, var(--accent-fill) 30%, var(--card-border));
}

.tile > span[b-hyhf8sz1dm] {
    display: grid;
    min-width: 0;
}

.tile .figure[b-hyhf8sz1dm] {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    animation: count-in 0.6s var(--ease-out);
}

/* ---------- The work: waiting, needs a look, the log ---------- */

.work[b-hyhf8sz1dm] {
    margin-top: var(--gap);
    padding-top: 8px;
}

.work .tab-panel[b-hyhf8sz1dm] {
    padding: 12px 8px 8px;
}

.work[b-hyhf8sz1dm]  .fa-spinner {
    animation: spin 0.8s linear infinite;
}

.progress[b-hyhf8sz1dm] {
    display: grid;
    gap: 8px;
    padding: 14px var(--pad) 0;
    font-size: 13px;
    color: var(--muted);
}

.bar[b-hyhf8sz1dm] {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

/* We don't know how far along it is, so a band sweeps across while it works. */
.bar > span[b-hyhf8sz1dm] {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: var(--status-done);
    animation: sweep-b-hyhf8sz1dm 1.3s ease-in-out infinite;
}

.looks[b-hyhf8sz1dm] {
    display: grid;
    margin: 0;
    padding: 0 6px;
    list-style: none;
}

.looks li[b-hyhf8sz1dm] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 14px 6px;
    border-bottom: 1px solid var(--border);
    animation: fade-up 0.3s var(--ease-out);
}

.looks li:last-child[b-hyhf8sz1dm] {
    border-bottom: 0;
}

.look-text[b-hyhf8sz1dm] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.look-title[b-hyhf8sz1dm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.why[b-hyhf8sz1dm],
.look-text p[b-hyhf8sz1dm] {
    margin: 0;
}

.look-actions[b-hyhf8sz1dm] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.filters[b-hyhf8sz1dm] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 6px 12px;
}

.filters select[b-hyhf8sz1dm] {
    width: auto;
    min-width: 180px;
}

.number-filter[b-hyhf8sz1dm] {
    position: relative;
    display: flex;
    align-items: center;
}

.number-filter[b-hyhf8sz1dm]  i {
    position: absolute;
    left: 11px;
    color: var(--muted);
    font-size: 12px;
    pointer-events: none;
}

.number-filter input[b-hyhf8sz1dm] {
    width: 190px;
    padding-left: 30px;
}

.log tbody tr[b-hyhf8sz1dm] {
    cursor: pointer;
}

.match-ok[b-hyhf8sz1dm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--status-done);
    font-weight: 600;
}

.late[b-hyhf8sz1dm] {
    color: var(--status-problem);
}

.problem-note[b-hyhf8sz1dm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    color: var(--status-problem);
    font-weight: 600;
}

/* ---------- The log entry drawer ---------- */

/* The drawer's body stretches to its full height; keep its parts at their own size, top first. */
.drawer-stack[b-hyhf8sz1dm] {
    display: grid;
    gap: 16px;
    align-content: start;
}

.drawer-stack p[b-hyhf8sz1dm] {
    margin: 0;
}

.problems[b-hyhf8sz1dm] {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--status-problem-soft);
    color: var(--status-problem);
    font-size: 14px;
}

.problems[b-hyhf8sz1dm]  i {
    margin-top: 3px;
}

@keyframes sweep-b-hyhf8sz1dm {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(250%);
    }
}

@media (max-width: 899px) {
    .tiles[b-hyhf8sz1dm],
    .skeleton-tiles[b-hyhf8sz1dm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .tiles[b-hyhf8sz1dm],
    .skeleton-tiles[b-hyhf8sz1dm] {
        gap: 10px;
    }

    .looks li[b-hyhf8sz1dm] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .look-actions[b-hyhf8sz1dm] {
        grid-column: 2;
        justify-content: flex-start;
    }

    .filters select[b-hyhf8sz1dm],
    .number-filter[b-hyhf8sz1dm],
    .number-filter input[b-hyhf8sz1dm] {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Sync all knows how far along it is: the bar fills row by row. */
.bar.counted > span[b-hyhf8sz1dm] {
    width: 0;
    animation: none;
    transition: width 0.4s var(--ease-out);
}

/* A row's pill pops as its invoice finishes. */
.flipped[b-hyhf8sz1dm] {
    display: inline-block;
    animation: count-in 0.35s var(--ease-spring);
}

tr.finished td[b-hyhf8sz1dm] {
    background: color-mix(in srgb, var(--status-done-soft) 45%, transparent);
    transition: background-color 0.3s;
}
/* /Components/Pages/Loaners/LoanerAgreementPage.razor.rz.scp.css */
/* Letter paper, light-only, ink-saving: greys and black, no colour fills (DESIGN.md §12). */
.sheet[b-m4h89hlalz] {
    --edge: 0.5in;
    width: 8.5in;
    max-width: 100%;
    min-height: 11in;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 0 0.4in;
    background: #ffffff;
    color: #16181f;
    font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.mono[b-m4h89hlalz],
.number[b-m4h89hlalz] {
    font-family: "IBM Plex Mono", Consolas, monospace;
}

h4[b-m4h89hlalz] {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.band[b-m4h89hlalz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 0.25in var(--edge) 0.22in;
    background: #ececec;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.shop[b-m4h89hlalz] {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.shop .mark[b-m4h89hlalz] {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: #3a3d45;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.shop b[b-m4h89hlalz] {
    display: block;
    font-size: 17px;
}

.shop span[b-m4h89hlalz] {
    display: block;
    color: #3d404a;
    font-size: 11.5px;
}

.title[b-m4h89hlalz] {
    display: grid;
    justify-items: end;
    text-align: right;
}

.title small[b-m4h89hlalz] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #50545f;
}

.number[b-m4h89hlalz] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.people[b-m4h89hlalz] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0 var(--edge);
}

.people div[b-m4h89hlalz] {
    display: grid;
    align-content: start;
    gap: 1px;
}

.block[b-m4h89hlalz] {
    margin: 0 var(--edge);
}

.condition[b-m4h89hlalz] {
    min-height: 44px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #b9bcc4;
    border-radius: 6px;
}

.terms[b-m4h89hlalz] {
    margin: 0 var(--edge);
    font-size: 10.5px;
    line-height: 1.45;
    color: #2e3139;
}

.terms p[b-m4h89hlalz] {
    margin: 0 0 6px;
}

.signature[b-m4h89hlalz] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 28px;
    margin: 8px var(--edge) 0;
}

.signature div[b-m4h89hlalz] {
    display: grid;
    gap: 4px;
    font-size: 10.5px;
    color: #50545f;
}

.signature .line[b-m4h89hlalz] {
    height: 32px;
    border-bottom: 1px solid #16181f;
}

.missing[b-m4h89hlalz] {
    font-size: 15px;
}

@media print {
    .sheet[b-m4h89hlalz] {
        box-shadow: none;
    }
}
/* /Components/Pages/Loaners/LoanerPhonePage.razor.rz.scp.css */
.crumb[b-2sn34yzusd]  i {
    font-size: 10px;
}

.loading[b-2sn34yzusd] {
    display: grid;
    gap: 14px;
}

.title-row[b-2sn34yzusd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.page-head p b[b-2sn34yzusd] {
    color: var(--text);
    font-weight: 600;
}

.panel-card[b-2sn34yzusd] {
    max-width: 760px;
    margin-top: 20px;
    padding: var(--pad);
    animation: page-in 0.35s var(--ease-out);
}
/* /Components/Pages/Loaners/LoanersPage.razor.rz.scp.css */
.loaner-tabs[b-vxhtd0zaf2] {
    margin-top: 16px;
}

.tab-panel[b-vxhtd0zaf2] {
    padding-top: var(--gap);
}

.loaner-grid[b-vxhtd0zaf2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gap);
    align-items: stretch;
}

.loaner-skeleton[b-vxhtd0zaf2] {
    display: grid;
    gap: 12px;
    padding: 16px;
}

/* Each loaner is a card you tap to open its drawer. */
.loaner[b-vxhtd0zaf2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 16px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s, border-color 0.2s;
    animation: fade-up 0.35s var(--ease-out) backwards;
}

.loaner:hover[b-vxhtd0zaf2],
.loaner:focus-visible[b-vxhtd0zaf2] {
    transform: translateY(-2px);
    box-shadow: var(--lift-shadow);
    border-color: color-mix(in srgb, var(--accent-fill) 30%, var(--card-border));
}

.loaner.unavailable[b-vxhtd0zaf2] {
    background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
}

.loaner.flash[b-vxhtd0zaf2] {
    animation: flash 2.6s ease;
}

.loaner-head[b-vxhtd0zaf2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tag-number[b-vxhtd0zaf2] {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.loaner-body[b-vxhtd0zaf2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.loaner-body[b-vxhtd0zaf2]  .thumb {
    transition: transform 0.3s var(--ease-spring);
}

.loaner:hover .loaner-body[b-vxhtd0zaf2]  .thumb {
    transform: rotate(-10deg) translateY(-2px);
}

.loaner.available:hover .loaner-body[b-vxhtd0zaf2]  .thumb {
    animation: buzz-b-vxhtd0zaf2 0.4s linear;
}

.loaner-text[b-vxhtd0zaf2] {
    display: grid;
    min-width: 0;
}

.loaner-text b[b-vxhtd0zaf2] {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.small[b-vxhtd0zaf2] {
    font-size: 12.5px;
}

.loaner-foot[b-vxhtd0zaf2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.with[b-vxhtd0zaf2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    color: var(--muted);
}

.with b[b-vxhtd0zaf2] {
    color: var(--text);
    font-weight: 600;
}

.with[b-vxhtd0zaf2]  i {
    font-size: 11px;
}

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

.loaner-foot[b-vxhtd0zaf2]  .tag + .note {
    text-align: right;
}

/* Add a loaner. */
.two[b-vxhtd0zaf2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dialog-actions[b-vxhtd0zaf2] {
    position: sticky;
    bottom: -20px;
    z-index: 2;
    justify-content: flex-end;
    margin: 4px -22px -20px;
    padding: 14px 22px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--surface);
}

@keyframes buzz-b-vxhtd0zaf2 {
    25% { transform: rotate(-6deg) translateX(-1px); }
    75% { transform: rotate(6deg) translateX(1px); }
}

@media (max-width: 599px) {
    .loaner-grid[b-vxhtd0zaf2] {
        grid-template-columns: minmax(0, 1fr);
    }

    .two[b-vxhtd0zaf2] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/PartRequests/NewPartRequestPage.razor.rz.scp.css */
.crumb[b-vkbp1j57bg]  i {
    font-size: 10px;
}

.sheet-card[b-vkbp1j57bg] {
    display: grid;
    gap: 18px;
    max-width: 780px;
    margin-top: 20px;
    padding: var(--pad);
    animation: page-in 0.35s var(--ease-out);
}

.sheet-head[b-vkbp1j57bg] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.sheet-head p[b-vkbp1j57bg] {
    margin: 2px 0 0;
    font-size: 13px;
}
/* /Components/Pages/PartRequests/PartRequestDetailsPage.razor.rz.scp.css */
.crumb[b-upjayivg34]  i {
    font-size: 10px;
}

.loading[b-upjayivg34] {
    display: grid;
    gap: 14px;
}

.title-row[b-upjayivg34] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sub[b-upjayivg34] {
    font-size: 14px;
}

.sub b[b-upjayivg34] {
    color: var(--text);
    font-weight: 600;
}

/* Pin and Flag: quiet toggles that fill in when they're on. */
.toggle.on[b-upjayivg34] {
    --bs-btn-bg: var(--accent-soft);
    --bs-btn-color: var(--accent-soft-fg);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--accent-soft);
    --bs-btn-hover-color: var(--accent-soft-fg);
    --bs-btn-hover-border-color: transparent;
}

.flag-toggle.on[b-upjayivg34] {
    --bs-btn-bg: var(--status-problem-soft);
    --bs-btn-color: var(--status-problem);
    --bs-btn-hover-bg: var(--status-problem-soft);
    --bs-btn-hover-color: var(--status-problem);
}

.toggle.on[b-upjayivg34]  i {
    animation: bounce 0.45s var(--ease-spring);
}

/* The "…" menu for the rare actions. */
.more[b-upjayivg34] {
    position: relative;
}

.more-button[b-upjayivg34] {
    width: var(--control-h);
    padding: 0;
}

.menu-catcher[b-upjayivg34] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.menu[b-upjayivg34] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    display: grid;
    min-width: 230px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--overlay-shadow);
    animation: menu-in-b-upjayivg34 0.18s var(--ease-out);
    transform-origin: top right;
}

.menu button[b-upjayivg34],
.menu a[b-upjayivg34] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.menu button:hover[b-upjayivg34],
.menu a:hover[b-upjayivg34] {
    background: var(--surface-2);
}

.menu[b-upjayivg34]  i {
    width: 16px;
    color: var(--muted);
    text-align: center;
}

.banner[b-upjayivg34] {
    margin-top: 16px;
}

/* The five steps, and in words where it's at. */
.progress-card[b-upjayivg34] {
    display: grid;
    gap: 16px;
    margin-top: 20px;
    padding: 20px var(--pad) 16px;
}

.where[b-upjayivg34] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 13.5px;
    font-weight: 500;
    animation: fade-up 0.3s var(--ease-out);
}

.where > span[b-upjayivg34] {
    flex: 1 1 200px;
}

.where-progress[b-upjayivg34] >  i { color: var(--status-progress); }
.where-waiting[b-upjayivg34] >  i { color: var(--status-waiting); }
.where-done[b-upjayivg34] >  i { color: var(--status-done); }

.where-problem[b-upjayivg34] {
    background: var(--status-problem-soft);
    color: var(--status-problem);
}

.where-done[b-upjayivg34] {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.hub[b-upjayivg34] {
    margin-top: var(--gap);
}

.for-order[b-upjayivg34] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    margin: 0 -10px;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    transition: background-color 0.15s;
}

.for-order:hover[b-upjayivg34] {
    background: var(--surface-2);
    text-decoration: none;
}

.for-order:hover[b-upjayivg34]  .thumb {
    transform: rotate(-8deg);
}

.for-order[b-upjayivg34]  .thumb {
    transition: transform 0.3s var(--ease-spring);
}

.for-text[b-upjayivg34] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.person[b-upjayivg34] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.for-order + .person[b-upjayivg34] {
    margin-top: 2px;
}

.panel-head + .person[b-upjayivg34] {
    padding-top: 0;
    border-top: 0;
}

.person-text[b-upjayivg34] {
    display: grid;
    min-width: 0;
}

.person-text a[b-upjayivg34] {
    color: var(--text);
}

.person-text a.muted[b-upjayivg34] {
    color: var(--muted);
}

.stock-note[b-upjayivg34] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
}

.facts[b-upjayivg34]  .fa-arrow-up-right-from-square {
    font-size: 10px;
}

.copyable[b-upjayivg34] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.copyable .icon-button[b-upjayivg34] {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.small[b-upjayivg34] {
    font-size: 12px;
}

/* The work: pricing, notes and history in tabs. */
.work[b-upjayivg34] {
    padding-top: 6px;
    min-height: 260px;
}

.work .tab-panel[b-upjayivg34] {
    padding: 16px var(--pad) var(--pad);
}

.two[b-upjayivg34] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.switch-row[b-upjayivg34] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.switch-row .form-check-input[b-upjayivg34] {
    margin: 2px 0 0;
    float: none;
}

.switch-row > span[b-upjayivg34] {
    display: grid;
    gap: 1px;
}

/* Change status: each status as a choice, with its legacy name. */
.status-list[b-upjayivg34] {
    display: grid;
    gap: 6px;
}

.status-choice[b-upjayivg34] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.status-choice:hover[b-upjayivg34] {
    border-color: var(--field-border);
}

.status-choice.on[b-upjayivg34] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
}

.status-choice .now[b-upjayivg34] {
    margin-left: auto;
    color: var(--muted);
    font-weight: 600;
}

@keyframes menu-in-b-upjayivg34 {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
}

@media (max-width: 599px) {
    .two[b-upjayivg34] {
        grid-template-columns: minmax(0, 1fr);
    }

    .head-actions .btn-primary[b-upjayivg34] {
        flex: 1 1 100%;
    }
}
/* /Components/Pages/PartRequests/PartRequestListPage.razor.rz.scp.css */
/* Shared list styles (tabs, data table, pager, empty states) live in app.css. */

.requests[b-fduw44e8hd] {
    margin-top: 20px;
    padding-bottom: 4px;
}

.requests-head[b-fduw44e8hd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 16px var(--pad) 4px;
}

.requests-head h2[b-fduw44e8hd] {
    margin-right: auto;
}

.vendor-filter[b-fduw44e8hd] {
    width: auto;
    min-width: 160px;
}

.tab-panel[b-fduw44e8hd] {
    padding: 12px 8px 4px;
}

.loading[b-fduw44e8hd] {
    display: grid;
    gap: 14px;
    padding: 12px 14px;
}

.flag[b-fduw44e8hd] {
    margin-left: 6px;
    color: var(--status-problem);
    font-size: 12px;
}

.record[b-fduw44e8hd] {
    color: var(--accent);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.select-cell[b-fduw44e8hd] {
    width: 34px;
    padding-right: 0 !important;
}

.select-cell .form-check-input[b-fduw44e8hd] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.grid tbody tr.picked td[b-fduw44e8hd] {
    background: var(--accent-soft);
}

.grid small a[b-fduw44e8hd] {
    color: var(--muted);
}

/* To order: one card per vendor, so each vendor gets one order. */
.groups[b-fduw44e8hd] {
    display: grid;
    gap: 14px;
    padding: 4px 6px 10px;
}

.group[b-fduw44e8hd] {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: fade-up 0.35s var(--ease-out) backwards;
}

.group:nth-child(2)[b-fduw44e8hd] { animation-delay: 60ms; }
.group:nth-child(3)[b-fduw44e8hd] { animation-delay: 120ms; }
.group:nth-child(n + 4)[b-fduw44e8hd] { animation-delay: 180ms; }

.group-head[b-fduw44e8hd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-2);
}

.group-title[b-fduw44e8hd] {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.group-actions[b-fduw44e8hd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.group-row[b-fduw44e8hd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-top: 1px solid var(--border);
    cursor: pointer;
    transition: background-color 0.15s;
}

.group-row:hover[b-fduw44e8hd] {
    background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.group-row.picked[b-fduw44e8hd] {
    background: var(--accent-soft);
}

.row-text[b-fduw44e8hd] {
    flex: 1;
    display: grid;
    min-width: 0;
    line-height: 1.35;
}

.row-text b[b-fduw44e8hd] {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.row-end[b-fduw44e8hd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.small[b-fduw44e8hd] {
    font-size: 12px;
}

/* Ticking rows slides up a bar with what to do with them. */
.bulk[b-fduw44e8hd] {
    position: sticky;
    bottom: 16px;
    z-index: 15;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 10px 12px 10px 18px;
    border-radius: var(--radius-lg);
    background: var(--toast-bg);
    color: var(--toast-fg);
    box-shadow: var(--overlay-shadow);
    animation: bulk-up-b-fduw44e8hd 0.35s var(--ease-spring);
}

.bulk-actions[b-fduw44e8hd] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.bulk .btn-ghost[b-fduw44e8hd] {
    --bs-btn-color: var(--toast-fg);
    --bs-btn-hover-color: var(--toast-fg);
    --bs-btn-hover-bg: color-mix(in srgb, var(--toast-fg) 14%, transparent);
    --bs-btn-active-color: var(--toast-fg);
    --bs-btn-active-bg: color-mix(in srgb, var(--toast-fg) 20%, transparent);
}

/* The Mark ordered dialog. */
.order-list[b-fduw44e8hd] {
    display: grid;
    gap: 2px;
    max-height: 180px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    border-radius: var(--radius);
    background: var(--surface-2);
}

.order-list li[b-fduw44e8hd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    font-size: 13px;
}

.order-list li[b-fduw44e8hd] >  i {
    color: var(--muted);
}

.order-list span[b-fduw44e8hd] {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.two[b-fduw44e8hd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@keyframes bulk-up-b-fduw44e8hd {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
}

@media (max-width: 599px) {
    .requests-head .vendor-filter[b-fduw44e8hd],
    .requests-head .filter[b-fduw44e8hd] {
        flex: 1 1 100%;
        width: 100%;
    }

    /* The number and status on the first line, the part under them. */
    .group-row[b-fduw44e8hd] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "check record end"
            "check text text";
        gap: 4px 12px;
    }

    .group-row > .select-cell[b-fduw44e8hd] {
        grid-area: check;
    }

    .group-row > .record[b-fduw44e8hd] {
        grid-area: record;
    }

    .group-row > .row-text[b-fduw44e8hd] {
        grid-area: text;
    }

    .group-row > .row-end[b-fduw44e8hd] {
        grid-area: end;
    }

    .two[b-fduw44e8hd] {
        grid-template-columns: minmax(0, 1fr);
    }

    .bulk[b-fduw44e8hd] {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}
/* /Components/Pages/PartRequests/PartRequestPrintPage.razor.rz.scp.css */
/* Letter paper, light-only, ink-saving: greys and black, no colour fills (DESIGN.md §12). */
.sheet[b-ul9i9x81fh] {
    --edge: 0.5in;
    width: 8.5in;
    max-width: 100%;
    min-height: 11in;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 0 0.4in;
    background: #ffffff;
    color: #16181f;
    font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.mono[b-ul9i9x81fh],
.number[b-ul9i9x81fh] {
    font-family: "IBM Plex Mono", Consolas, monospace;
}

h4[b-ul9i9x81fh] {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.band[b-ul9i9x81fh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 0.25in var(--edge) 0.22in;
    background: #ececec;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.shop[b-ul9i9x81fh] {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.shop .mark[b-ul9i9x81fh] {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: #3a3d45;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.shop b[b-ul9i9x81fh] {
    display: block;
    font-size: 17px;
}

.shop span[b-ul9i9x81fh] {
    display: block;
    color: #3d404a;
    font-size: 11.5px;
}

.title[b-ul9i9x81fh] {
    display: grid;
    justify-items: end;
    text-align: right;
}

.title small[b-ul9i9x81fh] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #50545f;
}

.number[b-ul9i9x81fh] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.people[b-ul9i9x81fh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0 var(--edge);
}

.people div[b-ul9i9x81fh] {
    display: grid;
    align-content: start;
    gap: 1px;
}

.block[b-ul9i9x81fh] {
    margin: 0 var(--edge);
}

.condition[b-ul9i9x81fh] {
    min-height: 44px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #b9bcc4;
    border-radius: 6px;
}

.terms[b-ul9i9x81fh] {
    margin: 0 var(--edge);
    font-size: 10.5px;
    line-height: 1.45;
    color: #2e3139;
}

.terms p[b-ul9i9x81fh] {
    margin: 0 0 6px;
}

.signature[b-ul9i9x81fh] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 28px;
    margin: 8px var(--edge) 0;
}

.signature div[b-ul9i9x81fh] {
    display: grid;
    gap: 4px;
    font-size: 10.5px;
    color: #50545f;
}

.signature .line[b-ul9i9x81fh] {
    height: 32px;
    border-bottom: 1px solid #16181f;
}

.missing[b-ul9i9x81fh] {
    font-size: 15px;
}

@media print {
    .sheet[b-ul9i9x81fh] {
        box-shadow: none;
    }
}

table.lines[b-ul9i9x81fh] {
    width: 100%;
    border-collapse: collapse;
}

.lines th[b-ul9i9x81fh] {
    padding: 0 8px 6px 0;
    border-bottom: 2px solid #16181f;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.lines td[b-ul9i9x81fh] {
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid #d9d9d9;
}

.lines .r[b-ul9i9x81fh] {
    text-align: right;
}

.note[b-ul9i9x81fh] {
    margin: 6px 0 0;
    font-size: 10.5px;
    color: #50545f;
}
/* /Components/Pages/PartRequests/VendorsPage.razor.rz.scp.css */
.vendor-tabs[b-0a8jdbhxgj] {
    margin-top: 16px;
}

.tab-panel[b-0a8jdbhxgj] {
    padding-top: var(--gap);
}

.vendor-grid[b-0a8jdbhxgj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--gap);
    align-items: start;
}

.vendor[b-0a8jdbhxgj] {
    display: grid;
    gap: 14px;
    padding: var(--pad);
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s, border-color 0.2s;
    animation: fade-up 0.35s var(--ease-out) backwards;
}

.vendor:hover[b-0a8jdbhxgj] {
    transform: translateY(-2px);
    box-shadow: var(--lift-shadow);
}

.vendor.retired[b-0a8jdbhxgj] {
    background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
}

.vendor.landed[b-0a8jdbhxgj] {
    animation: land 0.5s var(--ease-spring), flash 2.6s ease;
}

.vendor-head[b-0a8jdbhxgj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The vendor's initials in a soft tile; each vendor keeps its colour. */
.vendor-mark[b-0a8jdbhxgj] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tile-fg);
    background: var(--tile-bg);
    transition: transform 0.3s var(--ease-spring);
}

.vendor:hover .vendor-mark[b-0a8jdbhxgj] {
    transform: rotate(-6deg) scale(1.05);
}

.vendor-name[b-0a8jdbhxgj] {
    flex: 1;
    display: grid;
    min-width: 0;
}

.vendor-name h2[b-0a8jdbhxgj] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vendor-name[b-0a8jdbhxgj]  i {
    font-size: 10px;
}

.small[b-0a8jdbhxgj] {
    font-size: 12px;
}

.open-count[b-0a8jdbhxgj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.open-count[b-0a8jdbhxgj]  .fa-chevron-right {
    font-size: 10px;
    color: var(--muted);
    transition: transform 0.2s var(--ease-spring);
}

.open-count:hover[b-0a8jdbhxgj]  .fa-chevron-right {
    transform: translateX(3px);
}

.facts[b-0a8jdbhxgj] {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 6px 12px;
    font-size: 13px;
}

.facts[b-0a8jdbhxgj]  .fa-arrow-up-right-from-square {
    font-size: 10px;
}

.notes[b-0a8jdbhxgj] {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
    white-space: pre-wrap;
}

.vendor-foot[b-0a8jdbhxgj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.vendor-foot .retire[b-0a8jdbhxgj] {
    margin-left: auto;
}

.empty-card[b-0a8jdbhxgj] {
    padding: 8px;
}

/* The add and edit dialog. */
.two[b-0a8jdbhxgj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.preview[b-0a8jdbhxgj] {
    font-size: 12px;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.preview b[b-0a8jdbhxgj] {
    color: var(--accent);
    font-weight: 500;
}

.dialog-actions[b-0a8jdbhxgj] {
    position: sticky;
    bottom: -20px;
    z-index: 2;
    justify-content: flex-end;
    margin: 4px -22px -20px;
    padding: 14px 22px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--surface);
}

@media (max-width: 599px) {
    .vendor-grid[b-0a8jdbhxgj] {
        grid-template-columns: minmax(0, 1fr);
    }

    .two[b-0a8jdbhxgj] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Platform/AddBusinessDialog.razor.rz.scp.css */
.card-form[b-m82x4dx97t] {
    gap: 20px;
}

.card-form p[b-m82x4dx97t] {
    margin: 0;
}

/* Three numbered parts: the business, its first store, its owner. */
.part[b-m82x4dx97t] {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.part legend[b-m82x4dx97t] {
    display: flex;
    align-items: center;
    gap: 8px;
    float: none;
    width: auto;
    margin: 0 0 4px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
}

.step[b-m82x4dx97t] {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 12px;
    font-weight: 700;
}

.pair[b-m82x4dx97t] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Done: a tick, the owner's link, and a Copy button. */
.ready[b-m82x4dx97t] {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 8px 0;
    text-align: center;
}

.ready h3[b-m82x4dx97t] {
    margin: 4px 0 0;
    font-size: 20px;
    font-weight: 700;
}

.ready p[b-m82x4dx97t] {
    margin: 0;
}

.tick[b-m82x4dx97t] {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--status-done-soft);
    color: var(--status-done);
    font-size: 30px;
    animation: tick-in-b-m82x4dx97t 0.5s var(--ease-spring);
}

.added[b-m82x4dx97t] {
    display: grid;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--status-done-soft);
    color: var(--status-done);
    font-size: 13px;
    text-align: left;
}

.link-row[b-m82x4dx97t] {
    display: flex;
    gap: 8px;
}

.link-row input[b-m82x4dx97t] {
    min-width: 0;
    color: var(--text);
    font-size: 12px;
}

.mono[b-m82x4dx97t] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@keyframes tick-in-b-m82x4dx97t {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
}

@media (max-width: 599px) {
    .pair[b-m82x4dx97t] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Platform/AddStoreDialog.razor.rz.scp.css */
.card-form[b-jfd4pocer7] {
    gap: 16px;
}

.card-form p[b-jfd4pocer7] {
    margin: 0;
}
/* /Components/Pages/Platform/BusinessDialog.razor.rz.scp.css */
.block[b-1anyk88d9o] {
    display: grid;
    gap: 14px;
    align-content: start;
}

.block p[b-1anyk88d9o] {
    margin: 0;
}

/* The plan and its users, with a switch that asks first. */
.plan[b-1anyk88d9o],
.confirm-plan[b-1anyk88d9o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.plan-text[b-1anyk88d9o] {
    flex: 1 1 220px;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.confirm-plan[b-1anyk88d9o] {
    background: var(--accent-soft);
    font-size: 13.5px;
}

.confirm-plan > span[b-1anyk88d9o] {
    flex: 1 1 260px;
}

.facts[b-1anyk88d9o] {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px 18px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.facts dd[b-1anyk88d9o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.mono[b-1anyk88d9o] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.mismatch[b-1anyk88d9o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--status-waiting);
    font-weight: 600;
}

.warn[b-1anyk88d9o] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
    font-size: 13px;
}

.warn.ahead[b-1anyk88d9o] {
    flex-wrap: wrap;
    align-items: center;
}

.warn.ahead > span:first-of-type[b-1anyk88d9o] {
    flex: 1 1 260px;
}

.confirm-row[b-1anyk88d9o] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.warn[b-1anyk88d9o]  i {
    margin-top: 3px;
}

/* Starting billing or linking a customer opens in place, on a soft panel. */
.subform[b-1anyk88d9o] {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    animation: fade-up 0.25s var(--ease-out);
}

.inline-form[b-1anyk88d9o] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.code-row[b-1anyk88d9o] {
    display: flex;
    gap: 8px;
}

.code-row input[b-1anyk88d9o] {
    min-width: 0;
}

.owners[b-1anyk88d9o] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.owners li[b-1anyk88d9o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.owners li:last-child[b-1anyk88d9o] {
    border-bottom: 0;
}

.owner-text[b-1anyk88d9o] {
    flex: 1 1 180px;
    display: grid;
    min-width: 0;
    line-height: 1.35;
}

/* A new link, ready to pass on. */
.added[b-1anyk88d9o] {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--status-done-soft);
    color: var(--status-done);
    font-size: 13px;
    animation: fade-up 0.25s var(--ease-out);
}

.link-row[b-1anyk88d9o] {
    display: flex;
    gap: 8px;
}

.link-row input[b-1anyk88d9o] {
    min-width: 0;
    color: var(--text);
    font-size: 12px;
}

@media (max-width: 599px) {
    .inline-form[b-1anyk88d9o] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Platform/BuyNumberForm.razor.rz.scp.css */
.buy-number[b-t7ai6jbmhj] {
    display: grid;
    gap: 12px;
}

/* Country, area code and digits on one line, the search button level with the boxes. */
.number-search[b-t7ai6jbmhj] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.search-button[b-t7ai6jbmhj] {
    height: var(--control-h);
}

.no-numbers[b-t7ai6jbmhj] {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
}

/* The numbers for sale: pick one, like a segmented control laid out as tiles. */
.number-grid[b-t7ai6jbmhj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    max-height: 264px;
    overflow-y: auto;
    padding: 2px;
}

.number-option[b-t7ai6jbmhj] {
    display: grid;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, transform 0.12s var(--ease-spring);
}

.number-option:hover:not(:disabled)[b-t7ai6jbmhj] {
    background: var(--surface-2);
}

.number-option:active:not(:disabled)[b-t7ai6jbmhj] {
    transform: scale(0.97);
}

.number-option.on[b-t7ai6jbmhj],
.number-option.on:hover:not(:disabled)[b-t7ai6jbmhj] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

.number[b-t7ai6jbmhj] {
    font-family: var(--font-num);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.place[b-t7ai6jbmhj] {
    color: var(--muted);
    font-size: 12px;
}

.number-option.on .place[b-t7ai6jbmhj] {
    color: inherit;
}

.buy-row[b-t7ai6jbmhj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cost[b-t7ai6jbmhj] {
    flex: 1 1 220px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.enter-instead[b-t7ai6jbmhj] {
    justify-self: start;
}

@media (max-width: 599px) {
    .number-search[b-t7ai6jbmhj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-button[b-t7ai6jbmhj] {
        grid-column: 1 / -1;
    }
}
/* /Components/Pages/Platform/PlatformActivityPage.razor.rz.scp.css */
/* Today at a glance: four counts that each open their tab. */
.glance[b-i79j9n2dp9] {
    display: grid;
    gap: 4px;
    padding: 6px;
}

.glance-row[b-i79j9n2dp9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.glance-item[b-i79j9n2dp9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s;
}

.glance-item:hover[b-i79j9n2dp9] {
    background: var(--surface-2);
}

.glance-item:hover[b-i79j9n2dp9]  .icon-tile {
    animation: bounce 0.5s var(--ease-spring);
}

.glance-item > span[b-i79j9n2dp9] {
    display: grid;
    line-height: 1.25;
}

.glance-item b[b-i79j9n2dp9] {
    font-size: 20px;
    font-weight: 700;
    animation: count-in 0.5s var(--ease-out);
}

.digest[b-i79j9n2dp9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 14px 6px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
}

.list-card[b-i79j9n2dp9] {
    padding-bottom: 8px;
}

/* Sections as tabs on the left, the store and the search on the right. */
.list-toolbar[b-i79j9n2dp9] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 16px;
    padding: 6px var(--pad) 0;
    border-bottom: 1px solid var(--border);
}

/* With a count on every tab they need their full width; the filters move under them when it runs out. */
.list-toolbar[b-i79j9n2dp9]  .tabs {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 20px;
    border-bottom: 0;
}

.filters[b-i79j9n2dp9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    margin-left: auto;
}

.store-filter[b-i79j9n2dp9] {
    width: auto;
    min-width: 160px;
}

.filters .filter[b-i79j9n2dp9] {
    width: 260px;
}

.tab-panel[b-i79j9n2dp9] {
    padding: 8px;
}

.tab-panel[b-i79j9n2dp9]  .table-wrap {
    padding: 0;
}

.loading[b-i79j9n2dp9] {
    display: grid;
    gap: 12px;
    padding: 14px 8px;
}

.older[b-i79j9n2dp9] {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
}

.older[b-i79j9n2dp9]  .fa-spinner {
    animation: spin 0.8s linear infinite;
}

.detail-summary[b-i79j9n2dp9] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.detail-facts[b-i79j9n2dp9] {
    grid-template-columns: 84px minmax(0, 1fr);
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    font-size: 13px;
}

.mono[b-i79j9n2dp9] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The error's own words and trace, as it was written. */
.details[b-i79j9n2dp9] {
    max-height: 420px;
    margin: 0;
    padding: 12px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .filters[b-i79j9n2dp9],
    .store-filter[b-i79j9n2dp9],
    .filters .filter[b-i79j9n2dp9] {
        width: 100%;
    }
}

.detail[b-i79j9n2dp9] {
    display: grid;
    gap: 16px;
    align-content: start;
}

.digest > span[b-i79j9n2dp9] {
    flex: 1;
    min-width: 0;
}

.digest .link-button[b-i79j9n2dp9] {
    flex: none;
    font-size: 13px;
}

/* This morning's digest: what the email said, each line a way into the log. */
.digest-body[b-i79j9n2dp9] {
    display: grid;
    gap: 12px;
}

.digest-body > p[b-i79j9n2dp9] {
    margin: 0;
}

.digest-body .sub-head[b-i79j9n2dp9] {
    margin: 4px 0 0;
}

.digest-items[b-i79j9n2dp9] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.digest-items button[b-i79j9n2dp9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    transition: background-color 0.15s, transform 0.2s var(--ease-out);
}

.digest-items button:hover[b-i79j9n2dp9] {
    background: var(--surface-2);
    transform: translateX(2px);
}

.digest-items button > span[b-i79j9n2dp9] {
    display: grid;
    min-width: 0;
    line-height: 1.35;
}

.digest-items b[b-i79j9n2dp9] {
    overflow-wrap: anywhere;
}

.digest-items[b-i79j9n2dp9]  .pill {
    flex: none;
    margin-top: 1px;
}
/* /Components/Pages/Platform/PlatformBackupsPage.razor.rz.scp.css */
.head-actions[b-4k8b10xmmw]  .fa-spinner,
.one[b-4k8b10xmmw]  .fa-spinner {
    animation: spin 0.8s linear infinite;
}

/* Four small cards: last night, the restore check, the streak, and where they go. */
.summary[b-4k8b10xmmw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-items: start;
    gap: var(--gap);
}

.summary-card[b-4k8b10xmmw] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
}

.summary-card > div[b-4k8b10xmmw] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.summary-card b[b-4k8b10xmmw] {
    font-size: 15px;
    font-weight: 600;
}

.summary-card:hover[b-4k8b10xmmw]  .icon-tile {
    animation: bounce 0.5s var(--ease-spring);
}

.summary-card.off[b-4k8b10xmmw] {
    border-color: color-mix(in srgb, var(--status-waiting) 40%, var(--card-border));
    background: color-mix(in srgb, var(--status-waiting-soft) 55%, var(--surface));
}

.off-text[b-4k8b10xmmw] {
    color: var(--status-waiting);
}

.folder[b-4k8b10xmmw] {
    display: block;
    max-width: 100%;
    margin: 2px 0;
    padding: 3px 6px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The last fortnight of nights as squares: green for a good night, red for one with a failure. */
.streak[b-4k8b10xmmw] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.streak span[b-4k8b10xmmw] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--status-done);
    animation: square-in-b-4k8b10xmmw 0.35s var(--ease-spring) backwards;
}

.streak span.bad[b-4k8b10xmmw] {
    background: var(--status-problem-solid);
}

.list-card[b-4k8b10xmmw] {
    padding-top: 6px;
}

.tab-panel[b-4k8b10xmmw] {
    padding: 8px;
}

.what[b-4k8b10xmmw] {
    color: var(--text);
}

.what[b-4k8b10xmmw]  i {
    margin-right: 6px;
    color: var(--muted);
    font-size: 12px;
}

.details[b-4k8b10xmmw] {
    max-width: 420px;
    color: var(--muted);
    overflow-wrap: anywhere;
}

/* A failed run is tinted, and opens what happened. */
tr.failed td[b-4k8b10xmmw] {
    background: color-mix(in srgb, var(--status-problem-soft) 50%, transparent);
}

tr:not(.failed)[b-4k8b10xmmw] {
    cursor: default;
}

.problem[b-4k8b10xmmw] {
    margin: 0;
    padding: 10px 14px;
    border-left: 3px solid var(--status-problem);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--status-problem-soft);
    color: var(--status-problem);
    font-size: 13px;
    font-weight: 500;
}

@keyframes square-in-b-4k8b10xmmw {
    from {
        opacity: 0;
        transform: scale(0.4);
    }
}

.failed-body[b-4k8b10xmmw] {
    display: grid;
    gap: 12px;
}

.failed-body p[b-4k8b10xmmw] {
    margin: 0;
}
/* /Components/Pages/Platform/PlatformIntegrationsPage.razor.rz.scp.css */
/* The three services side by side, each saying where its keys come from. */
.services[b-4hnxkan5ge] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    align-items: start;
    gap: var(--gap);
}

.service[b-4hnxkan5ge] {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: var(--pad);
}

.service-head[b-4hnxkan5ge] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-title[b-4hnxkan5ge] {
    display: grid;
    flex: 1;
    min-width: 0;
}

.service-title h2[b-4hnxkan5ge] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.service:hover[b-4hnxkan5ge]  .icon-tile {
    animation: bounce 0.5s var(--ease-spring);
}

/* What's in use, on a quiet panel; the global .facts lays out the label and value columns. */
.facts[b-4hnxkan5ge] {
    gap: 6px 14px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 13.5px;
}

.facts dd[b-4hnxkan5ge] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note[b-4hnxkan5ge] {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.incoming[b-4hnxkan5ge] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
}

.incoming summary[b-4hnxkan5ge] {
    color: var(--accent);
    font-weight: 500;
    cursor: pointer;
}

.incoming p[b-4hnxkan5ge] {
    margin: 8px 0 0;
}

.incoming .set-webhooks[b-4hnxkan5ge] {
    margin-top: 10px;
}

code[b-4hnxkan5ge] {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* Each store and what it sends through; a row opens its dialog. */
.stores[b-4hnxkan5ge] {
    margin-top: var(--gap);
}

.stores-head[b-4hnxkan5ge] {
    display: grid;
    gap: 2px;
    padding: 16px var(--pad) 4px;
}

.stores-head h2[b-4hnxkan5ge] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.stores-head p[b-4hnxkan5ge] {
    max-width: 70ch;
    margin: 0;
}

.store-name[b-4hnxkan5ge] {
    display: block;
    font-weight: 600;
}

.uses[b-4hnxkan5ge] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

tr.unreadable td[b-4hnxkan5ge] {
    background: color-mix(in srgb, var(--status-problem-soft) 50%, transparent);
}

.remove-body[b-4hnxkan5ge] {
    margin: 0;
}

/* Removing saved keys is rarer than changing or testing them: a bin at the end of the row. */
.remove-keys[b-4hnxkan5ge] {
    margin-left: auto;
}

.remove-keys:hover[b-4hnxkan5ge] {
    color: var(--status-problem);
}
/* /Components/Pages/Platform/PlatformMessagesPage.razor.rz.scp.css */
/* KPI tiles that open their tab of the log. */
.tile[b-qmk5a6cfoa] {
    width: 100%;
    font: inherit;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s, border-color 0.2s;
}

.tile:hover[b-qmk5a6cfoa] {
    transform: translateY(-2px);
    box-shadow: var(--lift-shadow);
    border-color: color-mix(in srgb, var(--accent-fill) 30%, var(--card-border));
}

.tile:hover[b-qmk5a6cfoa]  .icon-tile {
    animation: bounce 0.5s var(--ease-spring);
}

.usage[b-qmk5a6cfoa],
.log[b-qmk5a6cfoa] {
    margin-top: var(--gap);
}

.section-head[b-qmk5a6cfoa] {
    display: grid;
    gap: 2px;
    padding: 16px var(--pad) 4px;
}

.section-head h2[b-qmk5a6cfoa] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.section-head p[b-qmk5a6cfoa] {
    margin: 0;
}

.usage > .skeleton[b-qmk5a6cfoa] {
    margin: 8px var(--pad) var(--pad);
}

.store-cell[b-qmk5a6cfoa] {
    font-weight: 600;
}

td.bad[b-qmk5a6cfoa] {
    color: var(--status-problem);
    font-weight: 600;
}

/* Tabs on the left, the store and search on the right, wrapping on narrow screens. */
.list-toolbar[b-qmk5a6cfoa] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 16px;
    padding: 6px var(--pad) 0;
    border-bottom: 1px solid var(--border);
}

.list-toolbar[b-qmk5a6cfoa]  .tabs {
    flex: 1 1 auto;
    border-bottom: 0;
}

.filters[b-qmk5a6cfoa] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    margin-left: auto;
}

.store-filter[b-qmk5a6cfoa] {
    width: auto;
    min-width: 160px;
}

.filters .filter[b-qmk5a6cfoa] {
    width: 240px;
}

.tab-panel[b-qmk5a6cfoa] {
    padding: 8px;
}

.loading[b-qmk5a6cfoa] {
    display: grid;
    gap: 12px;
    padding: 14px 8px;
}

.loading .skeleton[b-qmk5a6cfoa] {
    height: 18px;
}

.what[b-qmk5a6cfoa] {
    color: var(--text);
}

.what[b-qmk5a6cfoa]  i {
    margin-right: 6px;
    color: var(--muted);
    font-size: 12px;
}

.details[b-qmk5a6cfoa] {
    max-width: 360px;
    color: var(--muted);
    overflow-wrap: anywhere;
}

/* The provider's id, to look the message up in SendGrid or Twilio. */
.provider-id[b-qmk5a6cfoa] {
    display: block;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    opacity: 0.8;
}

tr.failed td[b-qmk5a6cfoa] {
    background: color-mix(in srgb, var(--status-problem-soft) 50%, transparent);
}

.log tbody tr[b-qmk5a6cfoa] {
    cursor: default;
}

.older[b-qmk5a6cfoa] {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
}

.older[b-qmk5a6cfoa]  .fa-spinner {
    animation: spin 0.8s linear infinite;
}

@media (max-width: 599px) {
    .filters[b-qmk5a6cfoa],
    .filters .filter[b-qmk5a6cfoa],
    .store-filter[b-qmk5a6cfoa] {
        width: 100%;
        margin-left: 0;
    }
}

.store-cell .small[b-qmk5a6cfoa] {
    display: block;
    font-weight: 400;
}
/* /Components/Pages/Platform/PlatformStoresPage.razor.rz.scp.css */
/* KPI tiles that open their tab. */
.tile[b-rt71k4b94a] {
    width: 100%;
    font: inherit;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s, border-color 0.2s;
}

.tile:hover[b-rt71k4b94a] {
    transform: translateY(-2px);
    box-shadow: var(--lift-shadow);
    border-color: color-mix(in srgb, var(--accent-fill) 30%, var(--card-border));
}

.tile:hover[b-rt71k4b94a]  .icon-tile {
    animation: bounce 0.5s var(--ease-spring);
}

.list-card[b-rt71k4b94a] {
    padding-bottom: 6px;
}

/* Tabs on the left, the search on the right, wrapping on narrow screens. */
.list-toolbar[b-rt71k4b94a] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 16px;
    padding: 6px var(--pad) 0;
    border-bottom: 1px solid var(--border);
}

.list-toolbar[b-rt71k4b94a]  .tabs {
    flex: 1 1 380px;
    border-bottom: 0;
}

.find[b-rt71k4b94a] {
    width: 260px;
    margin-bottom: 8px;
}

.businesses[b-rt71k4b94a] {
    display: grid;
    gap: 14px;
    padding: 16px var(--pad) var(--pad);
}

/* One business: its billing in a band at the top, its stores as rows under it. */
.business[b-rt71k4b94a] {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: fade-up 0.35s var(--ease-out) backwards;
    animation-delay: calc(var(--order, 0) * 60ms);
}

.business-head[b-rt71k4b94a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 14px 16px;
    background: var(--surface-2);
}

.business-mark[b-rt71k4b94a] {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    background: var(--accent-fill);
    color: var(--on-accent);
    font-size: 13px;
    font-weight: 700;
}

.business-text[b-rt71k4b94a] {
    flex: 1 1 200px;
    min-width: 0;
}

.business-text h2[b-rt71k4b94a] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.business-text p[b-rt71k4b94a] {
    margin: 2px 0 0;
}

.end[b-rt71k4b94a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.end[b-rt71k4b94a]  .fa-spinner {
    animation: spin 0.8s linear infinite;
}

.stores[b-rt71k4b94a] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stores li[b-rt71k4b94a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    transition: background-color 0.12s;
}

.stores li:hover[b-rt71k4b94a] {
    background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

.stores li:hover .store-code[b-rt71k4b94a] {
    animation: bounce 0.5s var(--ease-spring);
}

.store-code[b-rt71k4b94a] {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 13px;
    font-weight: 700;
}

.stores li.closed .store-code[b-rt71k4b94a] {
    background: var(--status-neutral-soft);
    color: var(--status-neutral);
}

.stores li.closed .store-text b[b-rt71k4b94a] {
    color: var(--muted);
}

.store-text[b-rt71k4b94a] {
    flex: 1 1 200px;
    display: grid;
    min-width: 0;
    line-height: 1.35;
}

.badges[b-rt71k4b94a],
.actions[b-rt71k4b94a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.open-form[b-rt71k4b94a] {
    display: inline;
}

.show-closed[b-rt71k4b94a] {
    gap: 6px;
    margin: 10px 16px 12px;
    font-size: 13px;
}

.show-closed[b-rt71k4b94a]  i {
    font-size: 11px;
}

@media (max-width: 700px) {
    .find[b-rt71k4b94a] {
        width: 100%;
    }

    .actions[b-rt71k4b94a] {
        width: 100%;
    }

    .actions .open-form[b-rt71k4b94a],
    .actions > .btn[b-rt71k4b94a] {
        flex: 1;
    }

    .actions .open-form .btn[b-rt71k4b94a] {
        width: 100%;
    }
}

@media (max-width: 599px) {
    .businesses[b-rt71k4b94a] {
        padding: 12px;
    }

    .end[b-rt71k4b94a] {
        width: 100%;
    }
}
/* /Components/Pages/Platform/ResetDemoDialog.razor.rz.scp.css */
.reset-demo[b-c3up4hr726] {
    display: grid;
    gap: 16px;
}

/* What the reset does, one line each, before the button that can't be taken back. */
.what-happens[b-c3up4hr726] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.what-happens li[b-c3up4hr726] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: 14px;
}

.what-happens[b-c3up4hr726]  i {
    margin-top: 3px;
    color: var(--muted);
}
/* /Components/Pages/Platform/StoreDialog.razor.rz.scp.css */
.block[b-uxknnyrwen] {
    display: grid;
    gap: 12px;
    align-content: start;
}

.block p[b-uxknnyrwen] {
    margin: 0;
}

/* The date, big, with its state beside it. */
.paid[b-uxknnyrwen] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.paid > div[b-uxknnyrwen] {
    display: grid;
    gap: 2px;
}

.paid-date[b-uxknnyrwen] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.warn[b-uxknnyrwen] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
    font-size: 13px;
}

.warn[b-uxknnyrwen]  i {
    margin-top: 3px;
}

.by-hand[b-uxknnyrwen] {
    justify-self: start;
    gap: 6px;
    font-size: 13px;
}

.extend[b-uxknnyrwen] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.date[b-uxknnyrwen] {
    width: 170px;
}

/* Billing can't be undone with a click, so a move asks first and names both dates. */
.confirm[b-uxknnyrwen] {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--accent-fill);
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 13.5px;
    animation: pop-in-b-uxknnyrwen 0.25s var(--ease-spring);
}

/* Test mode: a switch with a bold title and a line of explanation. */
.switch-row[b-uxknnyrwen] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    cursor: pointer;
}

.switch-row > span:last-child[b-uxknnyrwen] {
    display: grid;
    gap: 2px;
}

.switch-row .form-check[b-uxknnyrwen] {
    min-height: 0;
    margin: 2px 0 0;
}

.live-note[b-uxknnyrwen] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.form-actions[b-uxknnyrwen]  .fa-spinner {
    animation: spin 0.8s linear infinite;
}

.closed-note[b-uxknnyrwen] {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 14px;
}

.pair[b-uxknnyrwen] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@keyframes pop-in-b-uxknnyrwen {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(6px);
    }
}

@media (max-width: 599px) {
    .pair[b-uxknnyrwen] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Platform/StoreIntegrationsDialog.razor.rz.scp.css */
.store-integration[b-xfvjp96koa] {
    display: grid;
    gap: 14px;
    padding-top: 14px;
}

.explain[b-xfvjp96koa] {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
}

.pair[b-xfvjp96koa] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Where Twilio should post the store's incoming texts, ready to copy. */
.incoming-address[b-xfvjp96koa] {
    display: grid;
    gap: 4px;
}

.url-row[b-xfvjp96koa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.hook-name[b-xfvjp96koa] {
    flex: 0 0 auto;
    min-width: 10em;
    white-space: nowrap;
    color: var(--muted);
    font-size: 12.5px;
}

.set-webhooks[b-xfvjp96koa] {
    justify-self: start;
    margin-top: 4px;
}

.url-row code[b-xfvjp96koa] {
    flex: 0 1 auto;
    min-width: 0;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 12.5px;
    overflow-wrap: anywhere;
    user-select: all;
}

.buy-instead[b-xfvjp96koa] {
    justify-self: start;
}

/* Giving the store's number back to Twilio: a quiet offer, then a plain confirmation. */
.release-number[b-xfvjp96koa] {
    display: grid;
    gap: 8px;
    justify-items: start;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.release-number p[b-xfvjp96koa] {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
}

.release-number b[b-xfvjp96koa] {
    color: var(--text);
}

.release-actions[b-xfvjp96koa] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 599px) {
    .pair[b-xfvjp96koa] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Platform/SupportLogDialog.razor.rz.scp.css */
p[b-7kwq0ujqyl] {
    margin: 0;
}

.visits[b-7kwq0ujqyl] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.visits li[b-7kwq0ujqyl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    animation: fade-up 0.3s var(--ease-out) backwards;
}

.visits li:last-child[b-7kwq0ujqyl] {
    border-bottom: 0;
}

.store-code[b-7kwq0ujqyl] {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 13px;
    font-weight: 700;
}

.visit-text[b-7kwq0ujqyl] {
    flex: 1;
    display: grid;
    min-width: 0;
    line-height: 1.35;
}

.visit-text span[b-7kwq0ujqyl] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nowrap[b-7kwq0ujqyl] {
    white-space: nowrap;
}

.log[b-7kwq0ujqyl] {
    display: grid;
    gap: 12px;
    align-content: start;
}
/* /Components/Pages/Platform/TestMessageForm.razor.rz.scp.css */
.test-form[b-szxy5szhzs] {
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.test-row[b-szxy5szhzs] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.test-row .form-control[b-szxy5szhzs] {
    flex: 1 1 180px;
    min-width: 0;
}
/* /Components/Pages/PurchaseOrders/PurchaseOrderDetailsPage.razor.rz.scp.css */
.title-row[b-1k1rsmkfcu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.title-row h1[b-1k1rsmkfcu] {
    margin: 0;
}

.loading[b-1k1rsmkfcu] {
    display: grid;
    gap: 14px;
    padding: var(--pad);
}

/* Where it's at: four steps, filled as each happens. */
.steps[b-1k1rsmkfcu] {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 var(--gap);
    padding: 0;
    font-size: 13px;
}

.steps li[b-1k1rsmkfcu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--muted);
}

.steps .bar[b-1k1rsmkfcu] {
    height: 6px;
    border-radius: 3px;
    background: var(--border);
}

.steps li.done .bar[b-1k1rsmkfcu] {
    background: var(--accent-fill);
}

.steps li.done b[b-1k1rsmkfcu] {
    color: var(--text);
}

.layout[b-1k1rsmkfcu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: flex-start;
}

.items[b-1k1rsmkfcu] {
    flex: 999 1 640px;
    min-width: 0;
    padding-bottom: 8px;
}

.items .table-wrap[b-1k1rsmkfcu] {
    padding: 0 8px;
}

.lines tr.settled td[b-1k1rsmkfcu] {
    color: var(--muted);
}

.lines .qty[b-1k1rsmkfcu] {
    width: 76px;
    margin-left: auto;
}

.lines .sku[b-1k1rsmkfcu] {
    width: 150px;
}

.lines[b-1k1rsmkfcu]  .cost {
    width: 104px;
    margin-left: auto;
}

.lines .actions[b-1k1rsmkfcu] {
    white-space: nowrap;
}

.totals[b-1k1rsmkfcu] {
    display: grid;
    gap: 6px;
    width: min(300px, 100%);
    margin: 8px var(--pad) 8px auto;
    font-size: 14px;
}

.totals > div[b-1k1rsmkfcu] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.totals .grand[b-1k1rsmkfcu] {
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 16px;
    font-weight: 700;
}

.side[b-1k1rsmkfcu] {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.card-head[b-1k1rsmkfcu] {
    padding: 14px var(--pad) 10px;
}

.side-card[b-1k1rsmkfcu] {
    padding-bottom: 14px;
}

.side-card dl[b-1k1rsmkfcu] {
    padding: 0 var(--pad);
}

.tracking[b-1k1rsmkfcu] {
    display: block;
}

.notes[b-1k1rsmkfcu] {
    white-space: pre-line;
}

.repairs[b-1k1rsmkfcu] {
    padding: 0 8px;
}

.hint[b-1k1rsmkfcu] {
    margin: 8px 0 0;
}

.history[b-1k1rsmkfcu] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0 var(--pad);
    list-style: none;
    font-size: 13px;
    color: var(--muted);
}

.history b[b-1k1rsmkfcu] {
    color: var(--text);
}

/* The "…" menu for the rare actions. */
.more[b-1k1rsmkfcu] {
    position: relative;
}

.more-button[b-1k1rsmkfcu] {
    width: var(--control-h);
    padding: 0;
}

.menu-catcher[b-1k1rsmkfcu] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.menu[b-1k1rsmkfcu] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    display: grid;
    min-width: 230px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--overlay-shadow);
}

.menu button[b-1k1rsmkfcu],
.menu a[b-1k1rsmkfcu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.menu button:hover[b-1k1rsmkfcu],
.menu a:hover[b-1k1rsmkfcu] {
    background: var(--surface-2);
}

.menu[b-1k1rsmkfcu]  i {
    width: 16px;
    color: var(--muted);
    text-align: center;
}

.dialog-form[b-1k1rsmkfcu] {
    display: grid;
    gap: 14px;
}

.dialog-form p[b-1k1rsmkfcu] {
    margin: 0;
}

.field[b-1k1rsmkfcu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.pair[b-1k1rsmkfcu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.check[b-1k1rsmkfcu] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

@media (max-width: 640px) {
    .steps[b-1k1rsmkfcu] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Pages/PurchaseOrders/PurchaseOrderListPage.razor.rz.scp.css */
.kpis[b-shrq8444x4] {
    margin-bottom: var(--gap);
}

.ready[b-shrq8444x4] {
    margin-bottom: var(--gap);
    padding-bottom: var(--pad);
}

.ready-grid[b-shrq8444x4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 0 var(--pad);
}

.ready-card[b-shrq8444x4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.ready-card.no-vendor[b-shrq8444x4] {
    border-style: dashed;
}

.ready-card .btn[b-shrq8444x4] {
    align-self: flex-start;
    margin-top: 4px;
}

.ready-title[b-shrq8444x4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.list-head[b-shrq8444x4] {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: flex-end;
    gap: 10px 16px;
    padding: 8px var(--pad) 0;
    border-bottom: 1px solid var(--border);
}

.list-head[b-shrq8444x4]  .tabs {
    flex: 1 1 auto;
    border-bottom: 0;
}

.list-head .filter[b-shrq8444x4] {
    flex: 0 1 280px;
    margin-bottom: 8px;
}

.list-head[b-shrq8444x4]  .columns {
    margin-bottom: 8px;
}

.orders > .table-wrap[b-shrq8444x4] {
    padding: 8px;
}

.loading[b-shrq8444x4] {
    display: grid;
    gap: 14px;
    padding: 20px var(--pad);
}

@media (max-width: 640px) {
    .list-head[b-shrq8444x4] {
        padding: 12px 12px 0;
    }
}

.card-head[b-shrq8444x4] {
    padding: 14px var(--pad) 10px;
}
/* /Components/Pages/PurchaseOrders/PurchaseOrderPrintPage.razor.rz.scp.css */
/* Letter paper, light-only, ink-saving: greys and black, no colour fills (DESIGN.md §12). */
.sheet[b-6zrpupe2nd] {
    --edge: 0.5in;
    width: 8.5in;
    max-width: 100%;
    min-height: 11in;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 0 0.4in;
    background: #ffffff;
    color: #16181f;
    font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.mono[b-6zrpupe2nd],
.number[b-6zrpupe2nd] {
    font-family: "IBM Plex Mono", Consolas, monospace;
}

h4[b-6zrpupe2nd] {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.band[b-6zrpupe2nd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 0.25in var(--edge) 0.22in;
    background: #ececec;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.shop[b-6zrpupe2nd] {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.shop .mark[b-6zrpupe2nd] {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: #3a3d45;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.shop b[b-6zrpupe2nd] {
    display: block;
    font-size: 17px;
}

.shop span[b-6zrpupe2nd] {
    display: block;
    color: #3d404a;
    font-size: 11.5px;
}

.title[b-6zrpupe2nd] {
    display: grid;
    justify-items: end;
    text-align: right;
}

.title small[b-6zrpupe2nd] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #50545f;
}

.number[b-6zrpupe2nd] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.people[b-6zrpupe2nd] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0 var(--edge);
}

.people div[b-6zrpupe2nd] {
    display: grid;
    align-content: start;
    gap: 1px;
}

.block[b-6zrpupe2nd] {
    margin: 0 var(--edge);
}


.terms[b-6zrpupe2nd] {
    margin: 0 var(--edge);
    font-size: 10.5px;
    line-height: 1.45;
    color: #2e3139;
}

.terms p[b-6zrpupe2nd] {
    margin: 0 0 6px;
}




.missing[b-6zrpupe2nd] {
    font-size: 15px;
}

@media print {
    .sheet[b-6zrpupe2nd] {
        box-shadow: none;
    }
}

table.lines[b-6zrpupe2nd] {
    width: 100%;
    border-collapse: collapse;
}

.lines th[b-6zrpupe2nd] {
    padding: 0 8px 6px 0;
    border-bottom: 2px solid #16181f;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.lines td[b-6zrpupe2nd] {
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid #d9d9d9;
}

.lines .r[b-6zrpupe2nd] {
    text-align: right;
}

.note[b-6zrpupe2nd] {
    margin: 6px 0 0;
    font-size: 10.5px;
    color: #50545f;
}

.totals[b-6zrpupe2nd] {
    display: grid;
    gap: 3px;
    width: 2.6in;
    margin: 8px 0 0 auto;
}

.totals div[b-6zrpupe2nd] {
    display: flex;
    justify-content: space-between;
}

.totals .grand[b-6zrpupe2nd] {
    padding-top: 4px;
    border-top: 1px solid #16181f;
    font-weight: 700;
}
/* /Components/Pages/PurchaseOrders/ReceivePage.razor.rz.scp.css */
/* The scan box: where a scanner's code lands, ready for the next one. */
.scan[b-990yg4kpei] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--gap);
    padding: 12px 16px;
    border: 2px solid var(--accent-fill);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.scan-label[b-990yg4kpei] {
    font-weight: 700;
    color: var(--accent-soft-fg);
}

.scan-input[b-990yg4kpei] {
    flex: 1 1 220px;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 16px;
}

.scan-note[b-990yg4kpei] {
    font-size: 13px;
    font-weight: 600;
}

.scan-note.matched[b-990yg4kpei] {
    color: var(--status-done);
}

.scan-note.missed[b-990yg4kpei] {
    color: var(--status-problem);
}

.layout[b-990yg4kpei] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: flex-start;
}

.rows[b-990yg4kpei] {
    flex: 999 1 640px;
    min-width: 0;
    padding: 8px 0 4px;
}

.rows .table-wrap[b-990yg4kpei] {
    padding: 0 8px;
}

.receive-grid tr.done td[b-990yg4kpei] {
    background: color-mix(in srgb, var(--status-done-soft) 55%, transparent);
}

.receive-grid tr.settled td[b-990yg4kpei] {
    color: var(--muted);
}

.receive-grid[b-990yg4kpei]  .cost {
    width: 104px;
    margin-left: auto;
}

.step[b-990yg4kpei] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.step button[b-990yg4kpei] {
    width: 36px;
    height: 36px;
    border: 0;
    background: var(--surface-2);
    color: var(--text);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

.step button:disabled[b-990yg4kpei] {
    opacity: 0.4;
    cursor: default;
}

.step input[b-990yg4kpei] {
    width: 52px;
    height: 36px;
    border: 0;
    background: var(--surface);
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}

.step input[b-990yg4kpei]::-webkit-outer-spin-button,
.step input[b-990yg4kpei]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.all-in[b-990yg4kpei] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--status-done);
    font-weight: 600;
    font-size: 13px;
}

.effects[b-990yg4kpei] {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--pad);
    position: sticky;
    top: 80px;
}

.effects h2[b-990yg4kpei] {
    margin: 0;
}

.effects ul[b-990yg4kpei] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.effects li[b-990yg4kpei] {
    position: relative;
    padding-left: 18px;
}

.effects li[b-990yg4kpei]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-done);
}

.effects li.wait[b-990yg4kpei]::before {
    background: var(--status-waiting);
}

.note[b-990yg4kpei] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

.receive[b-990yg4kpei] {
    justify-content: center;
    height: var(--action-h);
}

@media (max-width: 899px) {
    .effects[b-990yg4kpei] {
        position: static;
    }
}

/* On a phone: the part, how many were ordered, and the counter. */
@media (max-width: 640px) {
    .roomy[b-990yg4kpei] {
        display: none;
    }
}
/* /Components/Pages/PurchaseOrders/StartOrderPage.razor.rz.scp.css */
.vendor-pick[b-r3z7bstad3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vendor-pick select[b-r3z7bstad3] {
    min-width: 220px;
}

.vendor-grid[b-r3z7bstad3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--gap);
}

.vendor-card[b-r3z7bstad3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    color: var(--text);
    text-decoration: none;
}

.vendor-card small[b-r3z7bstad3] {
    display: block;
}

.layout[b-r3z7bstad3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: flex-start;
}

.lists[b-r3z7bstad3] {
    flex: 999 1 640px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.lists .card-surface[b-r3z7bstad3] {
    padding-bottom: 8px;
}

.lists .table-wrap[b-r3z7bstad3] {
    padding: 0 8px;
}

.none[b-r3z7bstad3] {
    margin: 0 0 12px;
}

.order-grid tr.off td[b-r3z7bstad3] {
    color: var(--muted);
}

.order-grid .qty[b-r3z7bstad3] {
    width: 76px;
}

.order-grid[b-r3z7bstad3]  .cost {
    width: 104px;
}

.order-grid .sku[b-r3z7bstad3] {
    width: 140px;
}

.part-link[b-r3z7bstad3] {
    margin-top: 6px;
    max-width: 320px;
}

.add-row[b-r3z7bstad3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.add-row select[b-r3z7bstad3] {
    flex: 1 1 260px;
    max-width: 480px;
}

.summary[b-r3z7bstad3] {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--pad);
    position: sticky;
    top: 80px;
}

.summary h2[b-r3z7bstad3] {
    margin: 0;
}

.summary-rows[b-r3z7bstad3] {
    display: grid;
    gap: 8px;
    font-size: 14px;
}

.summary-rows > div[b-r3z7bstad3] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.draft-note[b-r3z7bstad3] {
    margin: 0;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 899px) {
    .summary[b-r3z7bstad3] {
        position: static;
    }
}

.card-head[b-r3z7bstad3] {
    padding: 14px var(--pad) 10px;
}
/* /Components/Pages/Quotes/QuoteDetailsPage.razor.rz.scp.css */
/* A quote: its lines and total beside where it stands with the customer. */
.quote-grid[b-7zspjsyrgr] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--gap);
    align-items: start;
    margin-top: 16px;
}

.quote-lines-card[b-7zspjsyrgr],
.quote-history[b-7zspjsyrgr] {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px var(--pad) var(--pad);
}

.quote-history h2[b-7zspjsyrgr] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.lines[b-7zspjsyrgr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.lines th[b-7zspjsyrgr] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}

.lines td[b-7zspjsyrgr] {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.lines small[b-7zspjsyrgr] {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.lines .r[b-7zspjsyrgr] {
    text-align: right;
    white-space: nowrap;
}

.totals[b-7zspjsyrgr] {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 24px;
    justify-content: end;
    font-size: 14px;
}

.totals .num[b-7zspjsyrgr] {
    text-align: right;
}

.totals .discounted[b-7zspjsyrgr] {
    color: var(--status-done);
    font-weight: 500;
}

.totals .all-in[b-7zspjsyrgr] {
    grid-column: 1 / -1;
    text-align: right;
}

/* A line the customer didn't want stays listed, struck through. */
.lines tr.left-out b[b-7zspjsyrgr],
.lines tr.left-out .num[b-7zspjsyrgr] {
    color: var(--muted);
    text-decoration: line-through;
}

.lines td[b-7zspjsyrgr]  .tag {
    margin-left: 6px;
    vertical-align: 1px;
}

.totals .due[b-7zspjsyrgr] {
    padding-top: 6px;
    border-top: 1px solid var(--border);
    font-size: 17px;
    font-weight: 700;
}

.quote-notes[b-7zspjsyrgr] {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--surface-2);
}

.quote-notes p[b-7zspjsyrgr] {
    margin: 0;
    white-space: pre-line;
}

/* ---------- Where it stands: made, sent, opened, answered ---------- */

.history[b-7zspjsyrgr] {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.history li[b-7zspjsyrgr] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    font-size: 14px;
}

.history li[b-7zspjsyrgr]  i {
    margin-top: 3px;
    color: var(--muted);
}

.history li.yes[b-7zspjsyrgr]  i {
    color: var(--status-done);
}

.history li.no[b-7zspjsyrgr]  i {
    color: var(--status-problem);
}

.history small[b-7zspjsyrgr] {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.history q[b-7zspjsyrgr] {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-style: italic;
}

.link-row[b-7zspjsyrgr],
.answer-actions[b-7zspjsyrgr] {
    display: grid;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.link-copy[b-7zspjsyrgr] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.link-copy code[b-7zspjsyrgr] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 12px;
    overflow-wrap: anywhere;
    user-select: all;
}

.row-buttons[b-7zspjsyrgr] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.confirm-row[b-7zspjsyrgr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

@media (max-width: 1000px) {
    .quote-grid[b-7zspjsyrgr] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Quotes/QuoteEditPage.razor.rz.scp.css */
/* A quote: customer, device and lines on the left, the running total on the right (as at intake). */
.quote-layout[b-ao41zmud19] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--gap);
    align-items: start;
    margin-top: 20px;
}

.quote-steps[b-ao41zmud19] {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.quote-card[b-ao41zmud19] {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 18px var(--pad) var(--pad);
}

.quote-card h2[b-ao41zmud19],
.quote-summary h2[b-ao41zmud19] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

/* ---------- Customer ---------- */

.customer-search[b-ao41zmud19] {
    width: 100%;
    height: 44px;
}

.matches[b-ao41zmud19] {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    animation: fade-up 0.2s var(--ease-out);
}

.match[b-ao41zmud19] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border: 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s;
}

.match:first-child[b-ao41zmud19] {
    border-top: 0;
}

.match:hover[b-ao41zmud19],
.match:focus-visible[b-ao41zmud19] {
    background: var(--accent-soft);
}

.match-text[b-ao41zmud19] {
    display: grid;
    min-width: 0;
}

.match.new-customer[b-ao41zmud19] {
    display: flex;
    gap: 8px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
}

.picked[b-ao41zmud19] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
}

.picked .avatar[b-ao41zmud19] {
    background: var(--surface);
}

.picked-text[b-ao41zmud19] {
    display: grid;
    flex: 1;
    min-width: 0;
}

.new-customer-head[b-ao41zmud19] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.link-button[b-ao41zmud19] {
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Device ---------- */

.device-choices[b-ao41zmud19] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
}

.device-option[b-ao41zmud19] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.device-option:hover[b-ao41zmud19] {
    border-color: var(--field-border);
}

.device-option.on[b-ao41zmud19] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent-fill);
}

/* ---------- Lines ---------- */

.sub-head[b-ao41zmud19] {
    font-size: 13px;
    font-weight: 600;
}

.sub-head .hint[b-ao41zmud19] {
    margin-left: 6px;
    color: var(--muted);
    font-weight: 400;
}

.book-services[b-ao41zmud19] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.book-service[b-ao41zmud19] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.book-service:hover[b-ao41zmud19],
.book-service:focus-visible[b-ao41zmud19] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
}

.book-service[b-ao41zmud19]  i {
    color: var(--accent);
    font-size: 11px;
}

.book-service .num[b-ao41zmud19] {
    font-weight: 600;
}

.quote[b-ao41zmud19] {
    color: var(--status-waiting);
}

.quote-lines[b-ao41zmud19] {
    display: grid;
    gap: 10px;
}

.quote-line[b-ao41zmud19] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 80px 120px auto auto auto;
    gap: 8px 10px;
    align-items: end;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    animation: fade-up 0.2s var(--ease-out);
}

.line-tax[b-ao41zmud19],
.line-optional[b-ao41zmud19] {
    padding-bottom: 8px;
}

.line-remove[b-ao41zmud19] {
    margin-bottom: 2px;
}

.line-note[b-ao41zmud19] {
    grid-column: 1 / -1;
    margin-top: -4px;
    font-size: 12px;
}

.add-line[b-ao41zmud19] {
    justify-self: start;
}

/* ---------- The running total ---------- */

.quote-summary[b-ao41zmud19] {
    position: sticky;
    top: 76px;
    display: grid;
    gap: 12px;
    padding: 18px var(--pad) var(--pad);
}

.lines[b-ao41zmud19] {
    display: grid;
    gap: 6px;
}

.line[b-ao41zmud19] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
}

.line.discount .num[b-ao41zmud19] {
    color: var(--status-done);
    font-weight: 500;
}

.line.total[b-ao41zmud19] {
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 17px;
    font-weight: 700;
}

.summary-actions[b-ao41zmud19] {
    display: grid;
    gap: 8px;
}

@media (max-width: 1000px) {
    .quote-layout[b-ao41zmud19] {
        grid-template-columns: minmax(0, 1fr);
    }

    .quote-summary[b-ao41zmud19] {
        position: static;
    }
}

@media (max-width: 599px) {
    .quote-line[b-ao41zmud19] {
        grid-template-columns: minmax(0, 1fr) 72px;
    }

    .line-price[b-ao41zmud19] {
        grid-column: 1;
    }

    .line-tax[b-ao41zmud19],
    .line-optional[b-ao41zmud19],
    .line-remove[b-ao41zmud19] {
        align-self: center;
    }
}
/* /Components/Pages/Quotes/QuotePrintPage.razor.rz.scp.css */
/* Letter paper, light-only, ink-saving: greys and black, no colour fills (DESIGN.md §12). */
.sheet[b-q9ltmoc155] {
    --edge: 0.45in;
    width: 8.5in;
    max-width: 100%;
    min-height: 11in;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 0.35in;
    background: #ffffff;
    color: #16181f;
    font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.mono[b-q9ltmoc155],
.number[b-q9ltmoc155] {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

h4[b-q9ltmoc155] {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.band[b-q9ltmoc155] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding: 0.3in var(--edge) 0.24in;
    background: #ececec;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.shop[b-q9ltmoc155] {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.shop .mark[b-q9ltmoc155] {
    flex: none;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #3a3d45;
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
}

.shop b[b-q9ltmoc155] {
    display: block;
    font-size: 18px;
    line-height: 1.2;
}

.shop span[b-q9ltmoc155] {
    display: block;
    color: #3d404a;
    font-size: 11.5px;
}

.title[b-q9ltmoc155] {
    display: grid;
    justify-items: end;
    text-align: right;
}

.title small[b-q9ltmoc155] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #50545f;
}

.title .number[b-q9ltmoc155] {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.title .when[b-q9ltmoc155] {
    font-size: 11.5px;
    color: #3d404a;
}

.journey[b-q9ltmoc155] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: start;
    margin: 0 var(--edge);
    padding-bottom: 14px;
    border-bottom: 1px solid #d9d9d9;
}

.step[b-q9ltmoc155] {
    position: relative;
    padding-top: 18px;
    font-size: 11px;
    color: #50545f;
}

.step[b-q9ltmoc155]::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    height: 2px;
    background: #16181f;
}

.step:nth-child(3)[b-q9ltmoc155]::before {
    right: auto;
    width: 12px;
}

.step[b-q9ltmoc155]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #16181f;
}

.step b[b-q9ltmoc155] {
    display: block;
    color: #16181f;
    font-size: 12px;
}

.turnaround[b-q9ltmoc155] {
    display: grid;
    justify-items: end;
    padding-left: 20px;
}

.turnaround b[b-q9ltmoc155] {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-size: 18px;
    line-height: 1.1;
}

.turnaround span[b-q9ltmoc155] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #50545f;
}

.people[b-q9ltmoc155] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0 var(--edge);
}

.people > div[b-q9ltmoc155] {
    display: grid;
    align-content: start;
}

.people b[b-q9ltmoc155] {
    font-size: 13px;
}

table.lines[b-q9ltmoc155] {
    width: calc(100% - 2 * var(--edge));
    margin: 0 var(--edge);
    border-collapse: collapse;
}

.lines th[b-q9ltmoc155] {
    padding: 0 0 6px;
    border-bottom: 2px solid #16181f;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.lines td[b-q9ltmoc155] {
    padding: 7px 0;
    border-bottom: 1px solid #d9d9d9;
    vertical-align: top;
}

.lines small[b-q9ltmoc155] {
    display: block;
    color: #5a5e69;
    font-size: 11px;
}

.lines .r[b-q9ltmoc155],
.totals .r[b-q9ltmoc155] {
    text-align: right;
}

.bottom[b-q9ltmoc155] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.1in;
    gap: 32px;
    align-items: start;
    margin: 0 var(--edge);
}

.notes p[b-q9ltmoc155] {
    margin: 0 0 10px;
    color: #2e3139;
}

.signature[b-q9ltmoc155] {
    display: grid;
    gap: 4px;
    margin-top: 4px;
    font-size: 10.5px;
    color: #50545f;
}

.signature .line[b-q9ltmoc155] {
    height: 30px;
    border-bottom: 1px solid #16181f;
}

.totals[b-q9ltmoc155] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
}

.totals .label[b-q9ltmoc155] {
    color: #50545f;
}

.totals .strong[b-q9ltmoc155] {
    padding-top: 5px;
    border-top: 1px solid #16181f;
    font-weight: 700;
    font-size: 13.5px;
}

.paid-box[b-q9ltmoc155],
.due-box[b-q9ltmoc155] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-top: 10px;
    padding: 11px 13px;
    border: 2px solid #16181f;
    border-radius: 12px;
}

.due-box[b-q9ltmoc155] {
    grid-template-columns: minmax(0, 1fr) auto;
}

.paid-box .tick[b-q9ltmoc155] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #16181f;
    color: #ffffff;
    font-weight: 700;
    font-size: 17px;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.paid-box b[b-q9ltmoc155],
.due-box b[b-q9ltmoc155] {
    display: block;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.paid-box span span[b-q9ltmoc155],
.due-box span span[b-q9ltmoc155] {
    font-size: 11px;
    color: #50545f;
}

.paid-box .amount[b-q9ltmoc155],
.due-box .amount[b-q9ltmoc155] {
    font-size: 21px;
    font-weight: 600;
}

.coupon[b-q9ltmoc155] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin: 6px var(--edge) 0;
    padding: 14px 18px;
    border: 2px dashed #16181f;
    border-radius: 14px;
}

.coupon[b-q9ltmoc155]::before {
    content: "✂";
    position: absolute;
    top: -12px;
    left: 22px;
    padding: 0 6px;
    background: #ffffff;
    font-size: 15px;
}

.coupon small[b-q9ltmoc155] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #50545f;
}

.coupon > div > b[b-q9ltmoc155] {
    display: block;
    margin: 2px 0 4px;
    font-size: 19px;
    line-height: 1.2;
}

.coupon p[b-q9ltmoc155] {
    margin: 0;
    max-width: 56ch;
    color: #2e3139;
    font-size: 11.5px;
}

.code[b-q9ltmoc155] {
    display: block;
    width: 0.8in;
    height: 0.8in;
}

.code[b-q9ltmoc155]  svg,
.foot-code[b-q9ltmoc155]  svg {
    display: block;
    width: 100%;
    height: 100%;
}

.foot[b-q9ltmoc155] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin: auto var(--edge) 0;
    font-size: 11px;
    color: #50545f;
}

.foot-code[b-q9ltmoc155] {
    display: grid;
    justify-items: center;
    gap: 3px;
    width: 0.65in;
    flex: none;
}

.foot-code[b-q9ltmoc155]  .qr-code {
    display: block;
    width: 0.65in;
    height: 0.65in;
}

.missing[b-q9ltmoc155] {
    font-size: 15px;
}

@media print {
    .sheet[b-q9ltmoc155] {
        --edge: 0.15in;
        width: auto;
        min-height: 0;
        padding-bottom: 0;
        box-shadow: none;
    }
}

@media (max-width: 699px) {
    .band[b-q9ltmoc155],
    .bottom[b-q9ltmoc155] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .people[b-q9ltmoc155],
    .journey[b-q9ltmoc155] {
        grid-template-columns: minmax(0, 1fr);
    }

    .title[b-q9ltmoc155] {
        justify-items: start;
        text-align: left;
    }
}

/* What was done spans the row under the customer and device. */
.people .work[b-q9ltmoc155] {
    grid-column: 1 / -1;
}

.work-text[b-q9ltmoc155] {
    white-space: pre-line;
}
/* /Components/Pages/Reports/EndOfDayPrintPage.razor.rz.scp.css */
/* Letter paper, light-only, ink-saving: greys and black, no colour fills (DESIGN.md §12). */
.sheet[b-gppk9e2qp7] {
    --edge: 0.5in;
    width: 8.5in;
    max-width: 100%;
    min-height: 11in;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 0 0.4in;
    background: #ffffff;
    color: #16181f;
    font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.mono[b-gppk9e2qp7],
.number[b-gppk9e2qp7] {
    font-family: "IBM Plex Mono", Consolas, monospace;
}

h4[b-gppk9e2qp7] {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.band[b-gppk9e2qp7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 0.25in var(--edge) 0.22in;
    background: #ececec;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.shop[b-gppk9e2qp7] {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.shop .mark[b-gppk9e2qp7] {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: #3a3d45;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.shop b[b-gppk9e2qp7] {
    display: block;
    font-size: 17px;
}

.shop span[b-gppk9e2qp7] {
    display: block;
    color: #3d404a;
    font-size: 11.5px;
}

.title[b-gppk9e2qp7] {
    display: grid;
    justify-items: end;
    text-align: right;
}

.title small[b-gppk9e2qp7] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #50545f;
}

.number[b-gppk9e2qp7] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}



.block[b-gppk9e2qp7] {
    margin: 0 var(--edge);
}


.block h4[b-gppk9e2qp7] {
    margin-bottom: 8px;
}

table.lines[b-gppk9e2qp7] {
    width: 100%;
    border-collapse: collapse;
}

.lines th[b-gppk9e2qp7] {
    padding: 0 8px 6px 0;
    border-bottom: 2px solid #16181f;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.lines td[b-gppk9e2qp7] {
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid #d9d9d9;
    vertical-align: top;
}

.lines tfoot td[b-gppk9e2qp7] {
    border-bottom: 0;
    border-top: 2px solid #16181f;
    font-weight: 700;
}

.lines .r[b-gppk9e2qp7] {
    text-align: right;
}

.lines .notes[b-gppk9e2qp7] {
    white-space: pre-line;
    color: #3d404a;
    font-size: 11px;
}

.note[b-gppk9e2qp7] {
    margin: 6px 0 0;
    font-size: 10.5px;
    color: #50545f;
}

.person[b-gppk9e2qp7] {
    break-inside: avoid;
}

.missing[b-gppk9e2qp7] {
    font-size: 15px;
}

@media print {
    .sheet[b-gppk9e2qp7] {
        box-shadow: none;
    }
}

/* Each person's table lines up with the next one's. */
.person .lines[b-gppk9e2qp7] {
    table-layout: fixed;
}

.person .lines th:nth-child(1)[b-gppk9e2qp7] { width: 1.2in; }
.person .lines th:nth-child(2)[b-gppk9e2qp7] { width: 1.6in; }
.person .lines th:nth-child(3)[b-gppk9e2qp7] { width: 0.6in; }
.person .lines th:nth-child(4)[b-gppk9e2qp7] { width: 1.1in; }

.columns[b-gppk9e2qp7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.count[b-gppk9e2qp7] {
    color: #5a5e69;
    font-size: 11px;
}

.counted[b-gppk9e2qp7] {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: end;
    gap: 8px;
    margin-top: 14px;
    font-size: 11.5px;
    color: #3d404a;
}

.counted .line[b-gppk9e2qp7] {
    height: 20px;
    border-bottom: 1px solid #16181f;
}

.signature[b-gppk9e2qp7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin: 18px var(--edge) 0;
}

.signature div[b-gppk9e2qp7] {
    display: grid;
    gap: 4px;
    font-size: 10.5px;
    color: #50545f;
}

.signature .line[b-gppk9e2qp7] {
    height: 28px;
    border-bottom: 1px solid #16181f;
}
/* /Components/Pages/Reports/ReportsPage.razor.rz.scp.css */
/* The report tabs use the shared .tabs and .tab styles (app.css); this adds their icons. */

.page-head[b-6uouvwcywp] {
    margin-bottom: 8px;
}

.sections[b-6uouvwcywp] {
    margin-bottom: var(--gap);
}

.section-link[b-6uouvwcywp]  i {
    font-size: 13px;
    color: var(--muted);
    transition: color 0.15s, transform 0.25s var(--ease-spring);
}

.section-link:hover[b-6uouvwcywp]  i {
    transform: translateY(-1px) scale(1.1);
}

.section-link.active[b-6uouvwcywp]  i {
    color: var(--accent);
}

.section-body[b-6uouvwcywp] {
    display: grid;
    gap: var(--gap);
    min-width: 0;
}
/* /Components/Pages/ServiceOrders/CounterTabletPage.razor.rz.scp.css */
.tablet[b-fxik2098b1] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 16px;
}

/* The store's name across the top, and a bigger-text switch for anyone who needs it. */
.top[b-fxik2098b1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: max(14px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 14px max(24px, env(safe-area-inset-left, 0px));
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.mark[b-fxik2098b1] {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-weight: 800;
}

.who[b-fxik2098b1] {
    flex: 1;
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

.who span[b-fxik2098b1] {
    color: var(--muted);
    font-size: 13px;
}

.text-size[b-fxik2098b1] {
    min-width: 44px;
    font-size: 15px;
    font-weight: 700;
}

.text-size[aria-pressed="true"][b-fxik2098b1] {
    border-color: transparent;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

/* ---------- Waiting, and the thank-you ---------- */

.idle[b-fxik2098b1] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 24px 96px;
    text-align: center;
}

/* The store's mark, gently breathing, with ripples going out. */
.orb[b-fxik2098b1] {
    position: relative;
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    animation: breathe-b-fxik2098b1 4.5s ease-in-out infinite;
}

.orb[b-fxik2098b1]::before,
.orb[b-fxik2098b1]::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent-fill) 25%, transparent);
    animation: ripple-b-fxik2098b1 4.5s ease-out infinite;
}

.orb[b-fxik2098b1]::after {
    animation-delay: 2.25s;
}

.orb span[b-fxik2098b1] {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.idle h1[b-fxik2098b1] {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.idle p[b-fxik2098b1] {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    text-wrap: balance;
}

/* A small note for staff, out of the customer's way. */
.staff[b-fxik2098b1] {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    color: var(--muted);
    font-size: 12px;
    text-align: left;
}

.staff[b-fxik2098b1]  i {
    margin-right: 6px;
}

.exit[b-fxik2098b1] {
    color: var(--muted);
}

.tick[b-fxik2098b1] {
    position: relative;
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--status-done-soft);
    color: var(--status-done);
    font-size: 54px;
    animation: tick-in-b-fxik2098b1 0.6s var(--ease-spring);
}

.tick[b-fxik2098b1]  .confetti {
    left: 50%;
}

.back[b-fxik2098b1] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 14px;
}

.ring[b-fxik2098b1] {
    width: 40px;
    height: 40px;
    rotate: -90deg;
}

.ring circle[b-fxik2098b1] {
    fill: none;
    stroke-width: 4;
}

.ring .track[b-fxik2098b1] {
    stroke: var(--surface-2);
}

.ring .arc[b-fxik2098b1] {
    stroke: var(--status-done);
    stroke-linecap: round;
    stroke-dasharray: 113.1;
    animation: run-down-b-fxik2098b1 8s linear forwards;
}

/* ---------- Read and sign ---------- */

.sign[b-fxik2098b1] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-content: start;
    gap: 20px;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px;
    animation: rise-b-fxik2098b1 0.45s var(--ease-out);
}

.panel[b-fxik2098b1] {
    display: grid;
    align-content: start;
    gap: 16px;
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.read[b-fxik2098b1] {
    timeline-scope: --terms;
}

.read-head[b-fxik2098b1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.read-head > div[b-fxik2098b1] {
    display: grid;
    gap: 2px;
}

.read-head h1[b-fxik2098b1] {
    margin: 0;
    font-size: 26px;
}

.number[b-fxik2098b1] {
    flex: none;
    padding: 4px 10px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 18px;
    font-weight: 700;
}

.summary[b-fxik2098b1] {
    grid-template-columns: 90px minmax(0, 1fr);
    padding: 14px;
    border-radius: 12px;
    background: var(--surface-2);
    font-size: 15px;
}

.summary dd[b-fxik2098b1] {
    font-weight: 500;
}

/* A thin bar that fills as the terms are scrolled through. */
.reading[b-fxik2098b1] {
    display: none;
    height: 4px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.reading span[b-fxik2098b1] {
    display: block;
    height: 100%;
    background: var(--accent-fill);
    transform-origin: left;
}

@supports (animation-timeline: scroll()) {
    .reading[b-fxik2098b1] {
        display: block;
    }

    .reading span[b-fxik2098b1] {
        animation: read-b-fxik2098b1 linear both;
        animation-timeline: --terms;
    }
}

.terms[b-fxik2098b1] {
    display: grid;
    gap: 12px;
    max-height: 42vh;
    margin: 0;
    padding: 0 6px 0 24px;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.6;
    scroll-timeline: --terms block;
}

.terms li[b-fxik2098b1]::marker {
    color: var(--accent);
    font-weight: 700;
}

.large .summary[b-fxik2098b1],
.large .terms[b-fxik2098b1] {
    font-size: 20px;
}

.signing h2[b-fxik2098b1] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.signing p[b-fxik2098b1] {
    margin: -8px 0 0;
}

/* A bigger pad to sign on, with the actions large enough for a finger. */
.pad-wrap[b-fxik2098b1] {
    position: relative;
}

.hint[b-fxik2098b1] {
    position: absolute;
    top: 14px;
    left: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-fill);
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
    animation: hint-b-fxik2098b1 2.4s ease-in-out infinite;
}

.pad-wrap[b-fxik2098b1]  .pad {
    height: 300px;
    border: 2px dashed var(--field-border);
    border-radius: 16px;
}

.pad-wrap[b-fxik2098b1]  .form-actions {
    gap: 10px;
}

.pad-wrap[b-fxik2098b1]  .btn {
    min-height: var(--action-h);
    padding-inline: 20px;
    font-size: 16px;
}

.pad-wrap[b-fxik2098b1]  .btn-primary {
    flex: 1 1 260px;
}

@keyframes breathe-b-fxik2098b1 {
    50% {
        transform: scale(1.05);
    }
}

@keyframes ripple-b-fxik2098b1 {
    from {
        opacity: 1;
        transform: scale(0.9);
    }

    to {
        opacity: 0;
        transform: scale(1.35);
    }
}

@keyframes tick-in-b-fxik2098b1 {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
}

@keyframes run-down-b-fxik2098b1 {
    to {
        stroke-dashoffset: 113.1;
    }
}

@keyframes rise-b-fxik2098b1 {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
}

@keyframes read-b-fxik2098b1 {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes hint-b-fxik2098b1 {
    50% {
        opacity: 0.45;
    }
}

@media (max-width: 900px) {
    .sign[b-fxik2098b1] {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px;
    }

    .terms[b-fxik2098b1] {
        max-height: none;
    }
}

@media (max-width: 480px) {
    .top[b-fxik2098b1] {
        padding-inline: 16px;
    }

    .idle h1[b-fxik2098b1] {
        font-size: 28px;
    }

    .orb[b-fxik2098b1] {
        width: 120px;
        height: 120px;
    }

    .pad-wrap[b-fxik2098b1]  .pad {
        height: 240px;
    }
}

/* The time in the corner, so nobody reaches for a phone to check it. */
.clock[b-fxik2098b1] {
    flex: none;
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
}

/* "Scroll to read all 7 terms" turns into "All read" once the end has been seen (wwwroot/js/admin.js). */
.read-hint[b-fxik2098b1] {
    margin: -6px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.read-hint span[b-fxik2098b1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.read-hint .to-read[b-fxik2098b1]  i {
    animation: nudge-b-fxik2098b1 1.6s ease-in-out infinite;
}

.read-hint .all-read[b-fxik2098b1] {
    display: none;
    color: var(--status-done);
    animation: fade-up 0.3s var(--ease-out);
}

.read[data-read] .read-hint .to-read[b-fxik2098b1] {
    display: none;
}

.read[data-read] .read-hint .all-read[b-fxik2098b1] {
    display: inline-flex;
}

@keyframes nudge-b-fxik2098b1 {
    50% {
        transform: translateY(3px);
    }
}

@media (max-width: 480px) {
    .clock[b-fxik2098b1] {
        display: none;
    }
}
/* /Components/Pages/ServiceOrders/NewServiceOrderPage.razor.rz.scp.css */
/* Intake (DESIGN.md §10 Create form): one card per step, only the current one open, and the summary
   always beside them. */

.crumb[b-67hjjxg6c1] {
    margin-bottom: -6px;
}

.crumb[b-67hjjxg6c1]  i {
    font-size: 10px;
}

.intake[b-67hjjxg6c1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--gap);
    align-items: start;
}

.steps[b-67hjjxg6c1] {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
    gap: 12px;
    min-width: 0;
}

/* ---------- Steps ---------- */

.intake-step[b-67hjjxg6c1] {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    display: grid;
    padding: 0;
    transition: box-shadow 0.25s, border-color 0.25s;
}

.intake-step.current[b-67hjjxg6c1] {
    border-color: var(--accent-fill);
    box-shadow: 0 0 0 1px var(--accent-fill), var(--lift-shadow);
}

.intake-step.has-errors[b-67hjjxg6c1] {
    border-color: color-mix(in srgb, var(--status-problem) 50%, var(--card-border));
}

.step-head[b-67hjjxg6c1] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px var(--pad);
    border-radius: var(--radius-lg);
    text-align: left;
    cursor: pointer;
}

.intake-step:not(.current) .step-head:hover[b-67hjjxg6c1] {
    background: var(--surface-2);
}

.intake-step.current .step-head[b-67hjjxg6c1] {
    padding-bottom: 6px;
    cursor: default;
}

.step-number[b-67hjjxg6c1] {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.25s, color 0.25s, transform 0.35s var(--ease-spring);
}

.intake-step.current .step-number[b-67hjjxg6c1] {
    background: var(--accent-fill);
    color: var(--on-accent);
    transform: scale(1.06);
}

.intake-step.done .step-number[b-67hjjxg6c1] {
    background: var(--status-done);
    color: #ffffff;
}

.intake-step.done .step-number[b-67hjjxg6c1]  i {
    animation: land 0.45s var(--ease-spring);
}

.intake-step.has-errors .step-number[b-67hjjxg6c1] {
    background: var(--status-problem-soft);
    color: var(--status-problem);
}

.step-title[b-67hjjxg6c1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    flex: 1;
    min-width: 0;
}

.step-title h2[b-67hjjxg6c1] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.step-summary[b-67hjjxg6c1] {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.intake-step.done .step-summary[b-67hjjxg6c1] {
    color: var(--text);
}

.step-errors[b-67hjjxg6c1] {
    color: var(--status-problem);
    font-size: 13px;
    font-weight: 600;
}

.change[b-67hjjxg6c1] {
    flex: none;
    font-size: 13px;
}

.step-body[b-67hjjxg6c1] {
    display: grid;
    gap: 16px;
    padding: 10px var(--pad) var(--pad) calc(var(--pad) + 40px);
    animation: fade-up 0.3s var(--ease-out);
}

.step-actions[b-67hjjxg6c1] {
    display: flex;
    justify-content: flex-end;
}

.step-actions .btn[b-67hjjxg6c1]  i {
    transition: transform 0.25s var(--ease-spring);
}

.step-actions .btn:hover[b-67hjjxg6c1]  i {
    transform: translateX(3px);
}

.hint[b-67hjjxg6c1] {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.hint-line[b-67hjjxg6c1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.waiting[b-67hjjxg6c1] {
    margin: 0;
}

.small[b-67hjjxg6c1] {
    font-size: 13px;
}

/* ---------- 1. Customer ---------- */

.customer-search[b-67hjjxg6c1] {
    width: 100%;
    height: 44px;
}

.matches[b-67hjjxg6c1] {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    animation: fade-up 0.2s var(--ease-out);
}

.match[b-67hjjxg6c1] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border: 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s, padding 0.2s var(--ease-out);
}

.match:first-child[b-67hjjxg6c1] {
    border-top: 0;
}

.match:hover[b-67hjjxg6c1],
.match:focus-visible[b-67hjjxg6c1] {
    background: var(--accent-soft);
    padding-left: 18px;
}

.match-text[b-67hjjxg6c1] {
    display: grid;
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
}

.match-text b[b-67hjjxg6c1] {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.match-tags[b-67hjjxg6c1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.match.new-customer[b-67hjjxg6c1] {
    display: flex;
    gap: 8px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
}

.picked[b-67hjjxg6c1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
    animation: land 0.45s var(--ease-spring);
}

.picked .avatar[b-67hjjxg6c1] {
    background: var(--surface);
}

.picked-text[b-67hjjxg6c1] {
    display: grid;
    flex: 1;
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
}

.picked-text b[b-67hjjxg6c1] {
    font-size: 15px;
}

.picked-text a[b-67hjjxg6c1] {
    color: var(--text);
    text-decoration: none;
}

.picked-tags[b-67hjjxg6c1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.new-customer-head[b-67hjjxg6c1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.link-button[b-67hjjxg6c1] {
    font-size: 13px;
    font-weight: 600;
}

/* ---------- 2. Device ---------- */

.devices-on-file[b-67hjjxg6c1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
}

.device-option[b-67hjjxg6c1] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, transform 0.2s var(--ease-spring);
}

.device-option:hover[b-67hjjxg6c1] {
    border-color: var(--field-border);
    transform: translateY(-1px);
}

.device-text[b-67hjjxg6c1] {
    display: grid;
    gap: 1px;
    justify-items: start;
    min-width: 0;
}

.device-option b[b-67hjjxg6c1] {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.device-option.on[b-67hjjxg6c1] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent-fill);
}

.device-option.add[b-67hjjxg6c1] {
    justify-content: center;
    gap: 8px;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
}

.device-option.add[b-67hjjxg6c1]  .fa-plus {
    transition: transform 0.3s var(--ease-spring);
}

.device-option.add:hover[b-67hjjxg6c1]  .fa-plus {
    transform: rotate(90deg);
}

.sub-section[b-67hjjxg6c1] {
    display: grid;
    gap: 8px;
}

.sub-section.two[b-67hjjxg6c1] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.chips-row[b-67hjjxg6c1] {
    margin-top: 8px;
}

.sub-section > .chips-row[b-67hjjxg6c1] {
    margin-top: 0;
}

/* A device repaired here lately: the green Covered banner (DESIGN.md §10). */
.warranty-banner[b-67hjjxg6c1] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--status-done-soft);
    font-size: 13px;
    animation: land 0.45s var(--ease-spring);
}

.warranty-banner.on[b-67hjjxg6c1] {
    box-shadow: inset 0 0 0 2px var(--status-done);
}

.warranty-icon[b-67hjjxg6c1] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--status-done);
    color: var(--surface);
}

.warranty-banner b[b-67hjjxg6c1] {
    display: block;
    color: var(--status-done);
    font-size: 14px;
}

/* ---------- 3. Problem and services ---------- */

.services[b-67hjjxg6c1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.service[b-67hjjxg6c1] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, transform 0.15s var(--ease-spring);
}

.service:hover[b-67hjjxg6c1] {
    border-color: var(--field-border);
}

.service:active[b-67hjjxg6c1] {
    transform: scale(0.98);
}

.service.on[b-67hjjxg6c1] {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: var(--accent-soft);
}

.box[b-67hjjxg6c1] {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--field-border);
    border-radius: 5px;
    background: var(--surface);
    font-size: 11px;
}

.service.on .box[b-67hjjxg6c1] {
    border-color: var(--accent-fill);
    background: var(--accent-fill);
    color: var(--on-accent);
    animation: land 0.35s var(--ease-spring);
}

.service-text[b-67hjjxg6c1] {
    display: grid;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
}

.service-text b[b-67hjjxg6c1] {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.common[b-67hjjxg6c1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
    color: var(--accent);
    font-weight: 600;
}

.common[b-67hjjxg6c1]  i {
    font-size: 10px;
}

.price[b-67hjjxg6c1] {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.price s[b-67hjjxg6c1] {
    margin-right: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

/* No price for this model: the technician quotes it. */
.quote[b-67hjjxg6c1] {
    color: var(--status-waiting);
    font-weight: 600;
}

.service-choice[b-67hjjxg6c1] {
    display: grid;
    gap: 6px;
    align-content: start;
}

/* Quality tiers sit under their service; picking one ticks it. */
.tiers[b-67hjjxg6c1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 34px;
}

.tier[b-67hjjxg6c1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.tier:hover[b-67hjjxg6c1] {
    border-color: var(--field-border);
    color: var(--text);
}

.tier.on[b-67hjjxg6c1] {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-weight: 600;
}

.tier .num[b-67hjjxg6c1] {
    color: var(--text);
    font-weight: 600;
}

/* ---------- 4. Job ---------- */

.job-row[b-67hjjxg6c1] {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 14px 28px;
}

.job-row[b-67hjjxg6c1] >  .form-field {
    min-width: 220px;
}

/* ---------- Summary ---------- */

.summary[b-67hjjxg6c1] {
    position: sticky;
    top: 76px;
    display: grid;
    gap: 10px;
    padding: 18px var(--pad) var(--pad);
}

.summary h2[b-67hjjxg6c1] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.summary-who[b-67hjjxg6c1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.summary-who > span:last-child[b-67hjjxg6c1] {
    display: grid;
    min-width: 0;
}

.summary-who b[b-67hjjxg6c1] {
    font-weight: 600;
}

.summary-tags[b-67hjjxg6c1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.divider[b-67hjjxg6c1] {
    height: 1px;
    background: var(--border);
}

.lines[b-67hjjxg6c1] {
    display: grid;
    gap: 6px;
}

.line[b-67hjjxg6c1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
}

.line.small[b-67hjjxg6c1] {
    font-size: 13px;
}

.quote-discount-note[b-67hjjxg6c1] {
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin: 0;
}

.line.discount .num[b-67hjjxg6c1] {
    color: var(--status-done);
    font-weight: 500;
}

.line.total[b-67hjjxg6c1] {
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 17px;
    font-weight: 700;
}

.routing[b-67hjjxg6c1] {
    margin-top: -6px;
    text-align: right;
}

.summary p[b-67hjjxg6c1] {
    margin: 0;
}

.before-they-leave[b-67hjjxg6c1] {
    display: grid;
    gap: 10px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px dashed var(--field-border);
}

.checklist[b-67hjjxg6c1] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.checklist li[b-67hjjxg6c1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tick[b-67hjjxg6c1] {
    display: grid;
    place-items: center;
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--field-border);
    border-radius: 50%;
    color: transparent;
    font-size: 9px;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.checklist li.done[b-67hjjxg6c1] {
    color: var(--status-done);
    font-weight: 600;
}

.checklist li.done .tick[b-67hjjxg6c1] {
    border-color: var(--status-done);
    background: var(--status-done);
    color: #ffffff;
    animation: land 0.4s var(--ease-spring);
}

.checklist li.later[b-67hjjxg6c1] {
    color: var(--muted);
}

.checklist li.later .tick[b-67hjjxg6c1] {
    border-style: dashed;
    color: var(--muted);
}

.confirm-switch[b-67hjjxg6c1] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.confirm-switch .form-check-input[b-67hjjxg6c1] {
    margin: 0;
}

@media (max-width: 1199px) {
    .intake[b-67hjjxg6c1] {
        grid-template-columns: minmax(0, 1fr);
    }

    .summary[b-67hjjxg6c1] {
        position: static;
    }
}

@media (max-width: 640px) {
    .services[b-67hjjxg6c1],
    .sub-section.two[b-67hjjxg6c1] {
        grid-template-columns: minmax(0, 1fr);
    }

    .step-body[b-67hjjxg6c1] {
        padding: 6px 16px 16px;
    }

    .step-head[b-67hjjxg6c1] {
        padding: 14px 16px;
    }

    .warranty-banner[b-67hjjxg6c1] {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .warranty-banner .btn[b-67hjjxg6c1] {
        grid-column: 1 / -1;
    }

    .step-actions .btn[b-67hjjxg6c1] {
        flex: 1;
    }
}

/* Bootstrap's switch look, without its float layout. */
.switch[b-67hjjxg6c1] {
    display: inline-flex;
    margin: 0;
    padding: 0;
    min-height: 0;
}

.switch .form-check-input[b-67hjjxg6c1] {
    float: none;
    margin: 2px 0 0;
    cursor: pointer;
}

/* ---------- Drafts: check-ins someone can pick up again ---------- */

.head-actions .draft-state[b-67hjjxg6c1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    animation: fade-up 0.3s var(--ease-out);
}

.head-actions .draft-state.failed[b-67hjjxg6c1] {
    color: var(--status-waiting);
}

.drafts[b-67hjjxg6c1] {
    display: grid;
    gap: 10px;
    padding: 14px var(--pad);
    border-color: color-mix(in srgb, var(--accent-fill) 35%, var(--card-border));
    animation: fade-up 0.3s var(--ease-out);
}

.drafts-head[b-67hjjxg6c1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.drafts-head h2[b-67hjjxg6c1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.drafts-head h2[b-67hjjxg6c1]  i {
    color: var(--accent);
}

.drafts-head .hint[b-67hjjxg6c1] {
    flex-basis: 100%;
}

.draft-list[b-67hjjxg6c1] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.draft-row[b-67hjjxg6c1] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    transition: background-color 0.12s;
}

.draft-row:first-child[b-67hjjxg6c1] {
    border-top: 0;
}

.draft-row:hover[b-67hjjxg6c1] {
    background: var(--surface-2);
}

.draft-text[b-67hjjxg6c1] {
    display: grid;
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
}

.draft-text b[b-67hjjxg6c1] {
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draft-actions[b-67hjjxg6c1] {
    display: flex;
    align-items: center;
    gap: 4px;
}

@media (max-width: 640px) {
    .draft-row[b-67hjjxg6c1] {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .draft-actions[b-67hjjxg6c1] {
        grid-column: 2;
    }

    .head-actions .draft-state[b-67hjjxg6c1] {
        font-size: 12px;
    }
}

/* Checking in an enquiry's quote: its lines, read-only, at the prices quoted. */
.quote-lines[b-67hjjxg6c1] {
    display: grid;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.quote-line[b-67hjjxg6c1] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.quote-line:last-child[b-67hjjxg6c1] {
    border-bottom: 0;
}
/* /Components/Pages/ServiceOrders/PickupListPage.razor.rz.scp.css */
/* Letter paper, light-only, ink-saving: greys and black, no colour fills (DESIGN.md §12). */
.sheet[b-j1ec439ic3] {
    --edge: 0.5in;
    width: 8.5in;
    max-width: 100%;
    min-height: 11in;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 0 0.4in;
    background: #ffffff;
    color: #16181f;
    font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.mono[b-j1ec439ic3],
.number[b-j1ec439ic3] {
    font-family: "IBM Plex Mono", Consolas, monospace;
}

h4[b-j1ec439ic3] {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.band[b-j1ec439ic3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 0.25in var(--edge) 0.22in;
    background: #ececec;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.shop[b-j1ec439ic3] {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.shop .mark[b-j1ec439ic3] {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: #3a3d45;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.shop b[b-j1ec439ic3] {
    display: block;
    font-size: 17px;
}

.shop span[b-j1ec439ic3] {
    display: block;
    color: #3d404a;
    font-size: 11.5px;
}

.title[b-j1ec439ic3] {
    display: grid;
    justify-items: end;
    text-align: right;
}

.title small[b-j1ec439ic3] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #50545f;
}

.number[b-j1ec439ic3] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}



.block[b-j1ec439ic3] {
    margin: 0 var(--edge);
}


table.lines[b-j1ec439ic3] {
    width: calc(100% - 2 * var(--edge));
    margin: 0 var(--edge);
    border-collapse: collapse;
}

.lines th[b-j1ec439ic3] {
    padding: 0 8px 6px 0;
    border-bottom: 2px solid #16181f;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.lines td[b-j1ec439ic3] {
    padding: 7px 8px 7px 0;
    border-bottom: 1px solid #d9d9d9;
    vertical-align: top;
}

.lines tr[b-j1ec439ic3] {
    break-inside: avoid;
}

.lines small[b-j1ec439ic3] {
    display: block;
    color: #5a5e69;
    font-size: 10.5px;
}

.lines .r[b-j1ec439ic3] {
    text-align: right;
}

.tick[b-j1ec439ic3] {
    width: 22px;
}

.box[b-j1ec439ic3] {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 1.5px solid #16181f;
    border-radius: 3px;
}

.missing[b-j1ec439ic3] {
    font-size: 15px;
}

@media print {
    .sheet[b-j1ec439ic3] {
        box-shadow: none;
    }
}
/* /Components/Pages/ServiceOrders/RemediationCertificatePage.razor.rz.scp.css */
/* Letter paper, light-only, ink-saving: greys and black, no colour fills (DESIGN.md §12). */
.sheet[b-hor9opvr6f] {
    --edge: 0.5in;
    width: 8.5in;
    max-width: 100%;
    min-height: 11in;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 0 0.4in;
    background: #ffffff;
    color: #16181f;
    font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.mono[b-hor9opvr6f],
.number[b-hor9opvr6f] {
    font-family: "IBM Plex Mono", Consolas, monospace;
}

h4[b-hor9opvr6f] {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.band[b-hor9opvr6f] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 0.25in var(--edge) 0.22in;
    background: #ececec;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.shop[b-hor9opvr6f] {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.shop .mark[b-hor9opvr6f] {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: #3a3d45;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.shop b[b-hor9opvr6f] {
    display: block;
    font-size: 17px;
}

.shop span[b-hor9opvr6f] {
    display: block;
    color: #3d404a;
    font-size: 11.5px;
}

.title[b-hor9opvr6f] {
    display: grid;
    justify-items: end;
    text-align: right;
}

.title small[b-hor9opvr6f] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #50545f;
}

.number[b-hor9opvr6f] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.people[b-hor9opvr6f] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0 var(--edge);
}

.people div[b-hor9opvr6f] {
    display: grid;
    align-content: start;
    gap: 1px;
}

.block[b-hor9opvr6f] {
    margin: 0 var(--edge);
}

.condition[b-hor9opvr6f] {
    min-height: 44px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #b9bcc4;
    border-radius: 6px;
}

.terms[b-hor9opvr6f] {
    margin: 0 var(--edge);
    font-size: 10.5px;
    line-height: 1.45;
    color: #2e3139;
}

.terms p[b-hor9opvr6f] {
    margin: 0 0 6px;
}

.signature[b-hor9opvr6f] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 28px;
    margin: 8px var(--edge) 0;
}

.signature div[b-hor9opvr6f] {
    display: grid;
    gap: 4px;
    font-size: 10.5px;
    color: #50545f;
}

.signature .line[b-hor9opvr6f] {
    height: 32px;
    border-bottom: 1px solid #16181f;
}

.missing[b-hor9opvr6f] {
    font-size: 15px;
}

@media print {
    .sheet[b-hor9opvr6f] {
        box-shadow: none;
    }
}

.heading[b-hor9opvr6f] {
    margin: 10px var(--edge) 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
}

.title span[b-hor9opvr6f] {
    font-size: 13px;
}

.terms[b-hor9opvr6f] {
    font-size: 12px;
    line-height: 1.6;
}

.work[b-hor9opvr6f] {
    margin: 0;
    padding-left: 18px;
}

.work-text[b-hor9opvr6f] {
    margin: 4px 0 0;
    white-space: pre-line;
}
/* /Components/Pages/ServiceOrders/ServiceOrderDetailsPage.razor.rz.scp.css */
/* The record hub (DESIGN.md §10): a header with the next step and the stepper, who and what on the
   left, the work in tabs on the right. */

.crumb[b-aow6z2qpcc] {
    margin-bottom: -6px;
}

.crumb[b-aow6z2qpcc]  i {
    font-size: 10px;
}

/* ---------- Header ---------- */

/* Thumb | number and pills | actions, then the device and who across the rest. */
.so-head[b-aow6z2qpcc] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px 18px;
    align-items: center;
    padding: var(--pad);
}

.head-thumb[b-aow6z2qpcc] {
    display: flex;
    grid-row: 1 / span 2;
    align-self: start;
    padding-top: 4px;
}

.title-row[b-aow6z2qpcc] {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.head-text[b-aow6z2qpcc] {
    grid-column: 2 / -1;
    display: grid;
    gap: 4px;
    min-width: 0;
}

.sub.when[b-aow6z2qpcc]  .fa-clock {
    margin-right: 5px;
    font-size: 11px;
}

.icon-only[b-aow6z2qpcc] {
    width: var(--control-h);
    padding: 0;
}

.title-row h1[b-aow6z2qpcc] {
    margin: 0 4px 0 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tag-link[b-aow6z2qpcc] {
    text-decoration: none;
}

.device-line[b-aow6z2qpcc] {
    display: -webkit-box;
    overflow: hidden;
    font-size: 16px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.device-line b[b-aow6z2qpcc] {
    font-weight: 600;
}

.device-line .problem[b-aow6z2qpcc] {
    color: var(--muted);
}

.sub[b-aow6z2qpcc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    color: var(--muted);
    font-size: 13px;
}

.sub > span + span[b-aow6z2qpcc]::before {
    content: "·";
    margin: 0 8px;
    color: var(--border);
    font-weight: 700;
}

.sub .who[b-aow6z2qpcc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sub .who[b-aow6z2qpcc]  .fa-user {
    font-size: 11px;
}

.sub .late[b-aow6z2qpcc] {
    color: var(--status-problem);
    font-weight: 600;
}

.head-actions[b-aow6z2qpcc] {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    align-self: start;
}

.next-step[b-aow6z2qpcc]  .fa-circle-check {
    transition: transform 0.3s var(--ease-spring);
}

.next-step:hover[b-aow6z2qpcc]  .fa-circle-check {
    transform: scale(1.2) rotate(-8deg);
}

.track[b-aow6z2qpcc] {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* Marked ready: celebrate, then offer the text. */
.ready-offer[b-aow6z2qpcc] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--status-done-soft);
    color: var(--status-done);
    font-size: 14px;
    animation: land 0.5s var(--ease-spring);
}

.ready-offer > span:nth-child(2)[b-aow6z2qpcc] {
    flex: 1 1 220px;
}

.ready-offer b[b-aow6z2qpcc] {
    color: var(--text);
}

.burst[b-aow6z2qpcc] {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface);
    animation: bounce 0.6s var(--ease-spring) 2;
}

/* Print menu */
.menu[b-aow6z2qpcc] {
    position: relative;
}

.menu .btn[b-aow6z2qpcc]  .fa-chevron-down {
    font-size: 10px;
    opacity: 0.7;
}

.menu-scrim[b-aow6z2qpcc] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.menu-panel[b-aow6z2qpcc] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    display: grid;
    width: 300px;
    max-width: calc(100vw - 32px);
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--overlay-shadow);
    transform-origin: top right;
    animation: pop-b-aow6z2qpcc 0.2s var(--ease-spring);
}

.menu-item[b-aow6z2qpcc] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
}

.menu-item:hover[b-aow6z2qpcc] {
    background: var(--surface-2);
    text-decoration: none;
}

.menu-item > span[b-aow6z2qpcc] {
    display: grid;
}

.menu-item b[b-aow6z2qpcc] {
    font-weight: 600;
}

.menu-item small[b-aow6z2qpcc] {
    color: var(--muted);
    font-size: 12px;
}

.menu-item[b-aow6z2qpcc] >  i {
    width: 16px;
    margin-top: 3px;
    color: var(--muted);
    text-align: center;
}

/* ---------- Notes about the whole order ---------- */

.banner[b-aow6z2qpcc],
.closed-note[b-aow6z2qpcc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
}

.banner[b-aow6z2qpcc] {
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
    animation: shake 0.4s;
}

.closed-note[b-aow6z2qpcc] {
    background: var(--status-neutral-soft);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--border);
}

.banner span[b-aow6z2qpcc],
.closed-note span[b-aow6z2qpcc] {
    flex: 1;
}

/* ---------- Before they leave ---------- */

.leave[b-aow6z2qpcc] {
    display: grid;
    gap: 14px;
    padding: 16px var(--pad);
    border-color: color-mix(in srgb, var(--status-done) 35%, var(--card-border));
    animation: fade-up 0.4s var(--ease-out);
}

.leave-head[b-aow6z2qpcc] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.leave-head > div[b-aow6z2qpcc] {
    flex: 1;
    min-width: 0;
}

.leave-head h2[b-aow6z2qpcc] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.leave-head p[b-aow6z2qpcc] {
    margin: 0;
    font-size: 13px;
}

.leave-list[b-aow6z2qpcc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.leave-list li[b-aow6z2qpcc] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: background-color 0.3s, border-color 0.3s;
}

.leave-list .what[b-aow6z2qpcc] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
}

.tick[b-aow6z2qpcc] {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--field-border);
    border-radius: 50%;
    color: transparent;
    font-size: 10px;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.4s var(--ease-spring);
}

.leave-list li.done[b-aow6z2qpcc] {
    border-color: transparent;
    background: var(--status-done-soft);
}

.leave-list li.done .tick[b-aow6z2qpcc] {
    border-color: var(--status-done);
    background: var(--status-done);
    color: #ffffff;
    transform: scale(1.1);
}

.leave-list li.done .what[b-aow6z2qpcc] {
    color: var(--status-done);
    font-weight: 600;
}

.leave-list li.optional:not(.done) .what[b-aow6z2qpcc] {
    color: var(--muted);
}

/* ---------- Who and what beside the work ---------- */

.hub[b-aow6z2qpcc] {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
}

.side[b-aow6z2qpcc] {
    display: grid;
    gap: var(--gap);
    min-width: 0;
}

.person[b-aow6z2qpcc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.person-text[b-aow6z2qpcc] {
    display: grid;
    flex: 1;
    min-width: 0;
}

.person-text b[b-aow6z2qpcc] {
    font-size: 15px;
    font-weight: 600;
}

.contact[b-aow6z2qpcc] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px 8px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 14px;
}

.contact dt[b-aow6z2qpcc] {
    color: var(--muted);
    font-size: 12px;
    padding-top: 2px;
}

.contact dd[b-aow6z2qpcc] {
    margin: 0;
    overflow-wrap: anywhere;
}

.contact dd[b-aow6z2qpcc]  .tag {
    margin-left: 6px;
    vertical-align: 1px;
}

.credit b[b-aow6z2qpcc] {
    margin-left: 4px;
    color: var(--status-done);
    font-weight: 600;
}

.add-photos[b-aow6z2qpcc] {
    margin-left: auto;
    cursor: pointer;
}

.add-photos.disabled[b-aow6z2qpcc] {
    pointer-events: none;
    opacity: 0.65;
}

.add-photos[b-aow6z2qpcc]  .fa-spinner {
    animation: spin 1s linear infinite;
}

.small[b-aow6z2qpcc] {
    font-size: 13px;
}

.device-page[b-aow6z2qpcc]  i {
    font-size: 10px;
}

.passcode[b-aow6z2qpcc] {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
    font-weight: 600;
    letter-spacing: 0.08em;
}

.dots[b-aow6z2qpcc] {
    letter-spacing: 0.12em;
}

.facts .link-button[b-aow6z2qpcc] {
    margin-left: 8px;
    font-size: 13px;
}

.logged[b-aow6z2qpcc] {
    display: block;
}

/* ---------- The work, in tabs ---------- */

.work[b-aow6z2qpcc] {
    padding: 6px 0 var(--pad);
    min-width: 0;
}

.work .tab-panel[b-aow6z2qpcc] {
    display: grid;
    gap: 14px;
    padding: 18px var(--pad) 0;
}

.work .tab-panel[hidden][b-aow6z2qpcc] {
    display: none;
}

.activity-switch[b-aow6z2qpcc] {
    justify-self: start;
    flex: none;
}

.activity-switch .chip[b-aow6z2qpcc]  i {
    font-size: 12px;
    opacity: 0.8;
}

.activity-switch .badge-count[b-aow6z2qpcc] {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
}

.checks-tab[b-aow6z2qpcc] {
    gap: 26px;
}

.sub-section[b-aow6z2qpcc] {
    display: grid;
    gap: 10px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.sub-title[b-aow6z2qpcc] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
}

.sub-title h3[b-aow6z2qpcc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.sub-title .btn[b-aow6z2qpcc] {
    margin-left: auto;
}

.none[b-aow6z2qpcc] {
    margin: 0;
}

.start-work[b-aow6z2qpcc] {
    justify-self: start;
}

.work-text[b-aow6z2qpcc] {
    margin: 0;
    font-size: 14px;
    white-space: pre-line;
}

.checks-tab[b-aow6z2qpcc] >  .signature-card {
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.photos[b-aow6z2qpcc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.photo[b-aow6z2qpcc] {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.photo img[b-aow6z2qpcc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s var(--ease-out);
}

.photo:hover img[b-aow6z2qpcc] {
    transform: scale(1.06);
}

@keyframes pop-b-aow6z2qpcc {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(-4px);
    }
}

@media (max-width: 1099px) {
    .so-head[b-aow6z2qpcc] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .head-actions[b-aow6z2qpcc] {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-content: flex-start;
        margin-top: 8px;
    }

    .head-text[b-aow6z2qpcc] {
        grid-column: 2;
    }

}

@media (max-width: 899px) {
    .hub[b-aow6z2qpcc] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The work first on a tablet or phone; who and what follow. */
    .side[b-aow6z2qpcc] {
        order: 2;
    }
}

@media (max-width: 599px) {
    .so-head[b-aow6z2qpcc] {
        padding: 16px;
    }

    .title-row h1[b-aow6z2qpcc] {
        font-size: 22px;
    }

    .head-actions .next-step[b-aow6z2qpcc] {
        flex: 1 1 100%;
        min-height: var(--action-h);
    }

    .work .tab-panel[b-aow6z2qpcc] {
        padding: 16px 16px 0;
    }

    .activity-switch[b-aow6z2qpcc] {
        justify-self: stretch;
    }

    .activity-switch .chip[b-aow6z2qpcc] {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Charges at a glance: what the customer owes, without opening the tab. */
.money-card .balance[b-aow6z2qpcc] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--surface-2);
}

.money-card .balance b[b-aow6z2qpcc] {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.money-card .facts dd[b-aow6z2qpcc] {
    text-align: right;
}

.tag-link[b-aow6z2qpcc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tag-link .of[b-aow6z2qpcc] {
    color: var(--muted);
    font-size: 13px;
}

.tag-link:hover .of[b-aow6z2qpcc] {
    color: var(--accent);
    text-decoration: underline;
}

/* Phones: the who and when lines stack, one fact a line. */
@media (max-width: 599px) {
    .sub[b-aow6z2qpcc] {
        flex-direction: column;
        align-items: flex-start;
    }

    .sub > span + span[b-aow6z2qpcc]::before {
        content: none;
    }

    .head-thumb[b-aow6z2qpcc] {
        grid-row: 1;
    }

    .head-text[b-aow6z2qpcc] {
        grid-column: 1 / -1;
    }
}
/* /Components/Pages/ServiceOrders/ServiceOrderLabelPage.razor.rz.scp.css */
.missing[b-h5e74dtnea] {
    font-size: 15px;
}
/* /Components/Pages/ServiceOrders/ServiceOrderLabelsPage.razor.rz.scp.css */
.missing[b-xm9k10xh1d] {
    font-size: 15px;
}

/* On screen, one under another; printed, one label each (print.css). */
.labels[b-xm9k10xh1d] {
    display: grid;
    justify-items: center;
    gap: 24px;
}

@media print {
    .labels[b-xm9k10xh1d] {
        display: block;
    }
}
/* /Components/Pages/ServiceOrders/ServiceOrderListPage.razor.rz.scp.css */
/* Shared list styles (tabs, chips, data table, pager) live in app.css. This is the board (DESIGN.md §8
   Board column and Board card), the toolbar and the menus. */

.filters-button .badge-count[b-qw3mto4u9b] {
    margin-left: 2px;
}

.view-switch[b-qw3mto4u9b] {
    flex-wrap: nowrap;
}

.more[b-qw3mto4u9b] {
    position: relative;
}

.more-button[b-qw3mto4u9b] {
    width: var(--control-h);
    padding: 0;
}

.more-scrim[b-qw3mto4u9b] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.more-menu[b-qw3mto4u9b] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    display: grid;
    min-width: 280px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--overlay-shadow);
    transform-origin: top right;
    animation: pop-b-qw3mto4u9b 0.2s var(--ease-spring);
}

.menu-item[b-qw3mto4u9b] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
}

.menu-item:hover[b-qw3mto4u9b] {
    background: var(--surface-2);
    text-decoration: none;
}

.menu-item > span[b-qw3mto4u9b] {
    display: grid;
}

.menu-item b[b-qw3mto4u9b] {
    font-weight: 600;
}

.menu-item small[b-qw3mto4u9b] {
    color: var(--muted);
    font-size: 12px;
}

.menu-item[b-qw3mto4u9b] >  i {
    margin-top: 3px;
    color: var(--muted);
}

/* ---------- Toolbar ---------- */

.toolbar[b-qw3mto4u9b] {
    margin: 0;
}

.toolbar .filter[b-qw3mto4u9b] {
    width: min(340px, 100%);
}

.active-filters[b-qw3mto4u9b] {
    align-items: center;
}

.active-filters .chip[b-qw3mto4u9b]  i,
.active-filters a.chip[b-qw3mto4u9b]  i {
    font-size: 11px;
    opacity: 0.7;
}

.showing[b-qw3mto4u9b] {
    margin-left: auto;
    white-space: nowrap;
}

/* ---------- Board ---------- */

.board[b-qw3mto4u9b] {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr));
    gap: var(--gap);
    align-items: start;
    overflow-x: auto;
    padding-bottom: 6px;
}

.board.single[b-qw3mto4u9b] {
    grid-template-columns: minmax(0, 1fr);
}

.board.single .col-body[b-qw3mto4u9b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    align-items: start;
}

.column[b-qw3mto4u9b] {
    min-width: 0;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
    transition: box-shadow 0.2s, background-color 0.2s;
}

.column.drag-over[b-qw3mto4u9b] {
    background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
    box-shadow: inset 0 0 0 2px var(--accent-fill);
}

.col-head[b-qw3mto4u9b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--tile-bg);
}

.col-icon[b-qw3mto4u9b] {
    display: grid;
    place-items: center;
    width: 22px;
    color: var(--tile-fg);
    font-size: 16px;
}

.col-title[b-qw3mto4u9b] {
    display: grid;
    min-width: 0;
}

.col-title h2[b-qw3mto4u9b] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.col-title .n[b-qw3mto4u9b] {
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.add[b-qw3mto4u9b] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    border-radius: var(--radius);
    color: var(--tile-fg);
    text-decoration: none;
    transition: background-color 0.15s, transform 0.25s var(--ease-spring);
}

.add:hover[b-qw3mto4u9b] {
    background: color-mix(in srgb, currentColor 14%, transparent);
    transform: rotate(90deg);
}

.col-body[b-qw3mto4u9b] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
    padding: 10px;
}

.col-empty[b-qw3mto4u9b] {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 22px 12px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.col-empty[b-qw3mto4u9b]  i {
    font-size: 20px;
    color: var(--tile-fg);
    opacity: 0.7;
    animation: float 3s ease-in-out infinite;
}

.dragging-on .column:not(.drag-over) .col-empty[b-qw3mto4u9b] {
    border-color: color-mix(in srgb, var(--accent-fill) 35%, var(--border));
}

/* A board card: number and how late, the device and who it's for, then why it's waiting. */
.card-wrap[b-qw3mto4u9b] {
    position: relative;
    display: grid;
}

.bcard[b-qw3mto4u9b] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
    text-decoration: none;
    cursor: grab;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s, border-color 0.2s, opacity 0.2s;
}

.bcard:hover[b-qw3mto4u9b] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent-fill) 30%, var(--card-border));
    box-shadow: var(--lift-shadow);
    text-decoration: none;
}

.bcard:active[b-qw3mto4u9b] {
    cursor: grabbing;
}

.bcard.dragging[b-qw3mto4u9b] {
    opacity: 0.45;
    transform: rotate(2deg) scale(0.98);
}

.bcard.landed[b-qw3mto4u9b] {
    animation: land 0.55s var(--ease-spring);
}

/* Touch screens: a long press picks a card up (wwwroot/js/orders.js), so it mustn't select text
   or open the link's menu instead. */
@media (pointer: coarse) {
    .bcard[b-qw3mto4u9b] {
        -webkit-touch-callout: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        user-select: none;
    }
}

/* The copy of a card that follows a finger while it's dragged. */
.bcard.touch-ghost[b-qw3mto4u9b] {
    position: fixed;
    z-index: 2000;
    margin: 0;
    pointer-events: none;
    box-shadow: var(--overlay-shadow);
    opacity: 0.95;
    transform: rotate(2deg) scale(1.03);
    transition: none;
}

.flagged[b-qw3mto4u9b] {
    display: inline-grid;
    place-items: center;
    margin-left: 6px;
    color: var(--status-problem);
    font-size: 11px;
    vertical-align: 1px;
}

.top[b-qw3mto4u9b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.number[b-qw3mto4u9b] {
    font-weight: 600;
}

.corner[b-qw3mto4u9b] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    white-space: nowrap;
}

.corner[b-qw3mto4u9b]  i {
    font-size: 11px;
}

.body[b-qw3mto4u9b] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.text[b-qw3mto4u9b] {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.device[b-qw3mto4u9b] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.problem[b-qw3mto4u9b] {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.who-line[b-qw3mto4u9b] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    min-width: 0;
}

.text .who-line + .who-line[b-qw3mto4u9b] {
    margin-top: 3px;
}

.who-line[b-qw3mto4u9b]  .fa-user {
    width: 20px;
    font-size: 11px;
    text-align: center;
}

.avatar.unassigned[b-qw3mto4u9b] {
    border-style: dashed;
    background: transparent;
    color: var(--muted);
}

.avatar.unassigned[b-qw3mto4u9b]  i {
    font-size: 8px;
}

.foot[b-qw3mto4u9b] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Dropped on Ready for pickup: offer to tell the customer, right under the card. */
.offer[b-qw3mto4u9b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: -8px;
    padding: 16px 10px 10px 12px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--status-done-soft);
    color: var(--status-done);
    font-size: 13px;
    font-weight: 600;
    animation: fade-up 0.3s var(--ease-out);
}

.offer > span[b-qw3mto4u9b] {
    flex: 1 1 140px;
}

.offer .icon-button[b-qw3mto4u9b] {
    color: var(--status-done);
}

.board-hint[b-qw3mto4u9b] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.skeleton-board .column[b-qw3mto4u9b] {
    min-height: 300px;
}

/* ---------- List ---------- */

/* Clipped, not hidden: hidden would stop the selection bar sticking to the bottom of the screen. */
.list-card[b-qw3mto4u9b] {
    overflow: clip;
}

.tags[b-qw3mto4u9b] {
    display: inline-flex;
    gap: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.device-cell[b-qw3mto4u9b] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
}

.device-cell > span[b-qw3mto4u9b] {
    display: grid;
    min-width: 0;
}

.device-cell b[b-qw3mto4u9b] {
    font-weight: 600;
}

.grid .problem[b-qw3mto4u9b] {
    display: -webkit-box;
}

.who[b-qw3mto4u9b] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.age[b-qw3mto4u9b] {
    white-space: nowrap;
}

.status-cell[b-qw3mto4u9b] {
    white-space: nowrap;
}

.status-cell .waiting[b-qw3mto4u9b] {
    display: block;
    margin-top: 3px;
    color: var(--status-waiting);
    font-size: 12px;
    font-weight: 500;
}

.status-cell .waiting.good[b-qw3mto4u9b] {
    color: var(--status-done);
}

.status-cell .waiting.stuck[b-qw3mto4u9b] {
    color: var(--status-problem);
}

/* ---------- Filters and the hold reasons ---------- */

.filters[b-qw3mto4u9b] {
    align-content: start;
    display: grid;
    gap: 22px;
}

.filter-group[b-qw3mto4u9b] {
    align-content: start;
    justify-items: start;
    display: grid;
    gap: 8px;
}

.filter-group .chip[b-qw3mto4u9b] {
    gap: 6px;
}

.switch-row[b-qw3mto4u9b] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    cursor: pointer;
}

.switch-row > span[b-qw3mto4u9b] {
    display: grid;
    gap: 2px;
}

.switch-row .form-check-input[b-qw3mto4u9b] {
    margin-top: 2px;
}

.reasons[b-qw3mto4u9b] {
    display: grid;
}

.reason[b-qw3mto4u9b] {
    gap: 12px;
    padding: 12px 6px;
}

.reason-text[b-qw3mto4u9b] {
    display: grid;
    text-align: left;
}

.reason[b-qw3mto4u9b] >  .fa-chevron-right {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring);
}

.reason:hover[b-qw3mto4u9b] >  .fa-chevron-right {
    transform: translateX(3px);
}

.small[b-qw3mto4u9b] {
    font-size: 13px;
}

@keyframes pop-b-qw3mto4u9b {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(-4px);
    }
}

/* Phones: one column at a time, swiped sideways. */
@media (max-width: 599px) {
    .board[b-qw3mto4u9b] {
        grid-template-columns: repeat(4, minmax(82%, 1fr));
        scroll-snap-type: x mandatory;
    }

    .board.single[b-qw3mto4u9b] {
        grid-template-columns: minmax(0, 1fr);
    }

    .column[b-qw3mto4u9b] {
        scroll-snap-align: start;
    }

    .toolbar .filter[b-qw3mto4u9b] {
        width: 100%;
    }

    .showing[b-qw3mto4u9b] {
        margin-left: 0;
    }

    .board-hint[b-qw3mto4u9b] {
        display: none;
    }
}

/* Bootstrap's switch look, without its float layout. */
.switch[b-qw3mto4u9b] {
    display: inline-flex;
    margin: 0;
    padding: 0;
    min-height: 0;
}

.switch .form-check-input[b-qw3mto4u9b] {
    float: none;
    margin: 2px 0 0;
    cursor: pointer;
}

/* ---------- Late ---------- */

/* The Late count in the header: a tap shows only the late ones. */
.late-tile[b-qw3mto4u9b] {
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 8px;
    border: 1px solid var(--card-border);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s var(--ease-out);
}

.late-tile:hover[b-qw3mto4u9b] {
    transform: translateY(-1px);
    box-shadow: var(--lift-shadow);
}

.late-tile.on[b-qw3mto4u9b] {
    border-color: var(--status-problem);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-problem) 18%, transparent);
}

.late-tile .tile-text[b-qw3mto4u9b] {
    display: grid;
}

.late-tile .tile-top[b-qw3mto4u9b] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.late-tile .figure[b-qw3mto4u9b] {
    font-size: 20px;
}

.late-tile .label[b-qw3mto4u9b] {
    font-size: 14px;
    font-weight: 600;
}

.late-tile.has-late .figure[b-qw3mto4u9b] {
    color: var(--status-problem);
}

.late-tile .delta[b-qw3mto4u9b] {
    white-space: nowrap;
}

/* A late card or row carries a red edge as well as its "2d late" pill. */
.bcard.is-late[b-qw3mto4u9b] {
    box-shadow: inset 3px 0 0 var(--status-problem), var(--shadow);
}

.bcard.is-late:hover[b-qw3mto4u9b] {
    box-shadow: inset 3px 0 0 var(--status-problem), var(--lift-shadow);
}

.grid tbody tr.is-late td:first-child[b-qw3mto4u9b] {
    box-shadow: inset 3px 0 0 var(--status-problem);
}

.age[b-qw3mto4u9b]  .pill {
    margin-left: 6px;
}

/* ---------- Picking rows for a bulk change ---------- */

.pick[b-qw3mto4u9b] {
    width: 44px;
    padding-right: 0;
}

.pick .form-check-input[b-qw3mto4u9b],
.pick-box .form-check-input[b-qw3mto4u9b] {
    float: none;
    margin: 0;
    cursor: pointer;
}

.pick-box[b-qw3mto4u9b] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: -6px;
    cursor: pointer;
}

.grid tbody tr.picked td[b-qw3mto4u9b] {
    background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
}

/* The bar for what's picked: stays at the bottom of the screen while the list scrolls, on the
   left, clear of the toasts at the bottom right. */
.bulk-bar[b-qw3mto4u9b] {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    display: flex;
    width: fit-content;
    max-width: calc(100% - 20px);
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 10px;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--overlay-shadow);
    animation: fade-up 0.25s var(--ease-spring);
}

.bulk-count[b-qw3mto4u9b] {
    font-size: 14px;
}

.bulk-count b[b-qw3mto4u9b] {
    font-weight: 700;
}

.bulk-actions[b-qw3mto4u9b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
}

.bulk-actions .busy[b-qw3mto4u9b]  i {
    margin-right: 6px;
    animation: spin 1s linear infinite;
}

/* What a bulk change couldn't do, until dismissed. */
.bulk-report[b-qw3mto4u9b] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--status-problem-soft);
    color: var(--text);
    font-size: 14px;
    animation: fade-up 0.25s var(--ease-out);
}

.bulk-report[b-qw3mto4u9b] >  i {
    margin-top: 3px;
    color: var(--status-problem);
}

.bulk-report ul[b-qw3mto4u9b] {
    display: grid;
    gap: 2px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.bulk-report .record[b-qw3mto4u9b] {
    margin-right: 4px;
    font-weight: 600;
}

@media (max-width: 899px) {
    .bulk-bar[b-qw3mto4u9b] {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 599px) {
    .bulk-actions[b-qw3mto4u9b] {
        margin-left: 0;
    }

    .bulk-report[b-qw3mto4u9b] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .bulk-report > .btn[b-qw3mto4u9b] {
        grid-column: 2;
        justify-self: start;
    }
}
/* /Components/Pages/ServiceOrders/ServiceOrderTicketPage.razor.rz.scp.css */
/* Letter paper, light-only, ink-saving: greys and black, no colour fills (DESIGN.md §12). */
.sheet[b-11ghtu6128] {
    --edge: 0.45in;
    width: 8.5in;
    max-width: 100%;
    min-height: 11in;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 0 0 0.35in;
    background: #ffffff;
    color: #16181f;
    font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    font-size: 11.5px;
    line-height: 1.4;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.mono[b-11ghtu6128],
.number[b-11ghtu6128] {
    font-family: "IBM Plex Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

h4[b-11ghtu6128] {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.band[b-11ghtu6128] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 20px;
    align-items: center;
    padding: 0.22in var(--edge) 0.2in;
    background: #ececec;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.shop[b-11ghtu6128] {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

/* Scoped under .shop so the address-line rule (.shop span) can't override it. */
.shop .mark[b-11ghtu6128] {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: #3a3d45;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.shop b[b-11ghtu6128] {
    display: block;
    font-size: 17px;
    line-height: 1.2;
}

.shop span[b-11ghtu6128] {
    display: block;
    color: #3d404a;
    font-size: 11.5px;
}

.title[b-11ghtu6128] {
    display: grid;
    justify-items: end;
    text-align: right;
}

.title small[b-11ghtu6128] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #50545f;
}

.title .number[b-11ghtu6128] {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.checked-in[b-11ghtu6128] {
    font-size: 11.5px;
    color: #3d404a;
}

.code[b-11ghtu6128] {
    display: block;
    width: 0.75in;
    height: 0.75in;
    padding: 4px;
    background: #ffffff;
}

.code[b-11ghtu6128]  svg {
    display: block;
    width: 100%;
    height: 100%;
}

.flags[b-11ghtu6128] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
}

.flag[b-11ghtu6128] {
    padding: 1px 8px;
    border: 2px solid #16181f;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.people[b-11ghtu6128],
.dropoff[b-11ghtu6128] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0 var(--edge);
}

/* Checks get the wide column, so two fit on a line. */
.dropoff[b-11ghtu6128] {
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
}

.people > div[b-11ghtu6128],
.dropoff > div[b-11ghtu6128] {
    display: grid;
    align-content: start;
}

.people b[b-11ghtu6128] {
    font-size: 13px;
}

.block[b-11ghtu6128],
.terms[b-11ghtu6128] {
    margin: 0 var(--edge);
}

.block p[b-11ghtu6128] {
    margin: 0;
}

.problem[b-11ghtu6128] {
    padding: 6px 12px;
    border-left: 3px solid #16181f;
    background: #f4f4f4;
    font-size: 13px;
    white-space: pre-wrap;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.checks[b-11ghtu6128] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checks li[b-11ghtu6128] {
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.checks .result[b-11ghtu6128] {
    color: #50545f;
}

table.lines[b-11ghtu6128] {
    width: 100%;
    border-collapse: collapse;
}

.lines th[b-11ghtu6128] {
    padding: 0 0 6px;
    border-bottom: 2px solid #16181f;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.lines td[b-11ghtu6128] {
    padding: 4px 0;
    border-bottom: 1px solid #d9d9d9;
    vertical-align: top;
}

.lines small[b-11ghtu6128] {
    display: block;
    color: #5a5e69;
    font-size: 11px;
}

.lines .r[b-11ghtu6128] {
    text-align: right;
}

.estimate-foot[b-11ghtu6128] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3in;
    gap: 28px;
    align-items: start;
    margin: -4px var(--edge) 0;
}

.privacy[b-11ghtu6128] {
    font-size: 9.5px;
    line-height: 1.35;
    color: #2e3139;
}

.privacy p[b-11ghtu6128] {
    margin: 0;
}

.totals[b-11ghtu6128] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 16px;
}

.totals span:nth-child(even)[b-11ghtu6128] {
    text-align: right;
}

.totals .strong[b-11ghtu6128] {
    padding-top: 3px;
    border-top: 1px solid #16181f;
    font-weight: 700;
    font-size: 12.5px;
}

.terms[b-11ghtu6128] {
    display: grid;
    gap: 3px;
    font-size: 9.5px;
    line-height: 1.35;
    color: #2e3139;
}

.terms p[b-11ghtu6128] {
    margin: 0 0 4px;
}

.terms ol[b-11ghtu6128] {
    margin: 0;
    padding-left: 16px;
    columns: 2;
    column-gap: 28px;
}

.terms li[b-11ghtu6128] {
    margin-bottom: 3px;
    break-inside: avoid;
}

.signature[b-11ghtu6128] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 28px;
    margin: 4px var(--edge) 0;
}

.signature div[b-11ghtu6128] {
    display: grid;
    gap: 4px;
    font-size: 10.5px;
    color: #50545f;
}

.signature .line[b-11ghtu6128] {
    height: 26px;
    border-bottom: 1px solid #16181f;
}

.foot[b-11ghtu6128] {
    margin: auto var(--edge) 0;
    font-size: 11px;
    color: #50545f;
}

.missing[b-11ghtu6128] {
    font-size: 15px;
}

@media print {
    .sheet[b-11ghtu6128] {
        --edge: 0.15in;
        width: auto;
        min-height: 0;
        padding-bottom: 0;
        box-shadow: none;
    }
}

@media (max-width: 699px) {
    .band[b-11ghtu6128],
    .people[b-11ghtu6128],
    .dropoff[b-11ghtu6128],
    .estimate-foot[b-11ghtu6128],
    .signature[b-11ghtu6128] {
        grid-template-columns: minmax(0, 1fr);
    }

    .title[b-11ghtu6128] {
        justify-items: start;
        text-align: left;
    }

    .flags[b-11ghtu6128] {
        justify-content: flex-start;
    }
}

/* The signature taken on the counter tablet, sitting on the line where a pen would. */
.signature .signed[b-11ghtu6128] {
    display: block;
    height: 46px;
    max-width: 100%;
    object-fit: contain;
    object-position: left bottom;
    border-bottom: 1px solid #16181f;
}

.signature .line.date[b-11ghtu6128] {
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
    color: #16181f;
    font-size: 12px;
}
/* /Components/Pages/Settings/ServicePricesPage.razor.rz.scp.css */
/* One service's prices: the standard price, then each manufacturer and, opened, its models. */
.price-list[b-otbfsrq4ox] {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.upload[b-otbfsrq4ox] {
    cursor: pointer;
}

.list-bar[b-otbfsrq4ox] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.find[b-otbfsrq4ox] {
    flex: 1 1 260px;
    height: 36px;
}

.import-result[b-otbfsrq4ox] {
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 13px;
    animation: fade-up 0.3s var(--ease-out);
}

.import-result ul[b-otbfsrq4ox] {
    margin: 6px 0 0;
    padding-left: 18px;
    color: var(--muted);
}

.prices[b-otbfsrq4ox] {
    display: grid;
}

.price-row[b-otbfsrq4ox] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(var(--tiers, 1), minmax(96px, 128px));
    gap: 8px 12px;
    align-items: center;
    min-height: 44px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border);
}

.price-row.head[b-otbfsrq4ox] {
    min-height: 32px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.price-row.head .r[b-otbfsrq4ox] {
    text-align: right;
}

.price-row.standard[b-otbfsrq4ox] {
    background: var(--accent-soft);
    border-radius: var(--radius);
    border-bottom: 0;
    margin-bottom: 6px;
    padding-inline: 10px;
}

.price-row.maker[b-otbfsrq4ox] {
    margin-top: 6px;
}

.price-row.model[b-otbfsrq4ox] {
    padding-left: 34px;
    font-size: 14px;
    animation: fade-up 0.2s var(--ease-out);
}

.price-row.model:hover[b-otbfsrq4ox] {
    background: var(--surface-2);
}

.price-row.none[b-otbfsrq4ox] {
    min-height: 36px;
}

.who[b-otbfsrq4ox] {
    display: grid;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.who small[b-otbfsrq4ox] {
    color: var(--muted);
    font-size: 12px;
}

.maker .who small[b-otbfsrq4ox] {
    padding-left: 26px;
}

.expand[b-otbfsrq4ox] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.expand[b-otbfsrq4ox]  i {
    width: 18px;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s var(--ease-out);
}

.maker.open .expand[b-otbfsrq4ox]  i {
    transform: rotate(90deg);
}

.price-box[b-otbfsrq4ox] {
    height: 34px;
    text-align: right;
    padding-inline: 10px;
}

/* A blank box shows the price it falls back to, faintly. */
.price-box.inherits[b-otbfsrq4ox]::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

.nothing[b-otbfsrq4ox] {
    margin: 0;
}

@media (max-width: 599px) {
    .price-row[b-otbfsrq4ox] {
        grid-template-columns: minmax(0, 1fr) repeat(var(--tiers, 1), minmax(92px, 108px));
        gap: 6px 8px;
    }

    .price-row.model[b-otbfsrq4ox] {
        padding-left: 16px;
    }
}
/* /Components/Pages/Settings/SettingsPage.razor.rz.scp.css */
/* Settings (DESIGN.md §10): the sections in four groups on the left, one section's cards on the right. */
.settings[b-b78s9hrpd3] {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
    margin-top: 20px;
}

.sections[b-b78s9hrpd3] {
    position: sticky;
    top: 76px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.find[b-b78s9hrpd3] {
    width: 100%;
    height: 34px;
    margin-bottom: 4px;
}

.find input[b-b78s9hrpd3]::-webkit-search-cancel-button {
    cursor: pointer;
}

.group[b-b78s9hrpd3] {
    padding: 12px 10px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.section-link[b-b78s9hrpd3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.section-link[b-b78s9hrpd3]  i {
    width: 16px;
    color: var(--muted);
    text-align: center;
    transition: transform 0.25s var(--ease-spring), color 0.15s;
}

.section-link:hover[b-b78s9hrpd3] {
    background: var(--surface-2);
    text-decoration: none;
}

.section-link:hover[b-b78s9hrpd3]  i {
    transform: rotate(-8deg) scale(1.15);
}

.section-link.on[b-b78s9hrpd3] {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-weight: 600;
}

.section-link.on[b-b78s9hrpd3]  i {
    color: var(--accent-soft-fg);
}

.section-link .label[b-b78s9hrpd3] {
    flex: 1;
    min-width: 0;
}

.section-link.on .badge-count[b-b78s9hrpd3] {
    background: var(--surface);
    color: var(--accent-soft-fg);
}

.nothing[b-b78s9hrpd3] {
    margin: 8px 10px;
    font-size: 13px;
    color: var(--muted);
}

.section-body[b-b78s9hrpd3] {
    min-width: 0;
}

.section-panel[b-b78s9hrpd3] {
    display: grid;
    gap: var(--gap);
    min-width: 0;
    animation: fade-up 0.3s var(--ease-out);
}

.locked[b-b78s9hrpd3] {
    margin-top: 20px;
}

/* A co-worker's change: the open section's cards glow for a moment (DESIGN.md §9). */
.live-flash[b-b78s9hrpd3]  .settings-card {
    animation: flash 2.6s ease;
}

/* ---------- What every settings card shares (the cards are this page's own components) ---------- */

.section-body[b-b78s9hrpd3]  .settings-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px var(--pad) var(--pad);
}

.section-body[b-b78s9hrpd3]  .settings-card + .settings-card {
    margin-top: 0;
}

/* The card's title, what it's for, and its own action at the right. */
.section-body[b-b78s9hrpd3]  .settings-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 16px;
}

.section-body[b-b78s9hrpd3]  .settings-head > div:first-child {
    flex: 1 1 300px;
    min-width: 0;
}

.section-body[b-b78s9hrpd3]  .settings-head h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.section-body[b-b78s9hrpd3]  .settings-head .lede {
    margin: 4px 0 0;
    max-width: 72ch;
    color: var(--muted);
    font-size: 13px;
}

.section-body[b-b78s9hrpd3]  .settings-head .end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* A smaller heading inside a card, such as Holidays or Discount presets. */
.section-body[b-b78s9hrpd3]  .sub {
    display: grid;
    gap: 2px;
}

.section-body[b-b78s9hrpd3]  .sub b {
    font-size: 14px;
    font-weight: 600;
}

.section-body[b-b78s9hrpd3]  .sub p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.section-body[b-b78s9hrpd3]  .divider {
    margin: 2px 0;
}

/* Toggles (DESIGN.md §8): a switch, a bold title and a one-line explanation. */
.section-body[b-b78s9hrpd3]  .switch-row.form-switch {
    padding: 8px 0;
    padding-left: 0;
    gap: 14px;
}

.section-body[b-b78s9hrpd3]  .switch-row.form-switch + .switch-row.form-switch {
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.section-body[b-b78s9hrpd3]  .switch-row.form-switch .form-check-input {
    float: none;
    margin: 1px 0 0;
    cursor: pointer;
}

.section-body[b-b78s9hrpd3]  .switch-row.form-switch .form-check-input:focus {
    box-shadow: var(--focus-ring);
}

/* A link that resets something, such as "Use the standard terms". */
.section-body[b-b78s9hrpd3]  .reset {
    justify-self: start;
    font-size: 13px;
}

.section-body[b-b78s9hrpd3]  .reset i {
    font-size: 12px;
    transition: transform 0.4s var(--ease-spring);
}

.section-body[b-b78s9hrpd3]  .reset:hover i {
    transform: rotate(-200deg);
}

/* "Connected to …": the green box on Card payments and QuickBooks. */
.section-body[b-b78s9hrpd3]  .connected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--surface-2);
}

.section-body[b-b78s9hrpd3]  .connected .what {
    display: grid;
    gap: 2px;
    flex: 1 1 220px;
    min-width: 0;
}

.section-body[b-b78s9hrpd3]  .connected .title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* A form in a dialog keeps its buttons in the dialog's foot. */
.section-body[b-b78s9hrpd3]  .modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 4px -22px -20px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
}

/* Tablets and phones: the sections become a row that swipes sideways. */
@media (max-width: 899px) {
    .settings[b-b78s9hrpd3] {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 14px;
    }

    .sections[b-b78s9hrpd3] {
        position: static;
        flex-direction: row;
        gap: 4px;
        max-height: none;
        padding: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .find[b-b78s9hrpd3],
    .group[b-b78s9hrpd3],
    .nothing[b-b78s9hrpd3] {
        display: none;
    }

    .section-link[b-b78s9hrpd3] {
        flex: none;
        white-space: nowrap;
    }

    /* Opening a section by its address starts the row at that section. */
    .section-link.on[b-b78s9hrpd3] {
        scroll-initial-target: nearest;
    }
}

@media (max-width: 599px) {
    .section-body[b-b78s9hrpd3]  .settings-card {
        padding: 18px 16px;
    }

    .section-body[b-b78s9hrpd3]  .modal-actions {
        margin-inline: -22px;
    }
}

/* Copy settings from another store: where from, which sections, and what it replaces. */
.copy-open:hover[b-b78s9hrpd3]  i {
    animation: bounce 0.5s var(--ease-spring);
}

.copy-form[b-b78s9hrpd3] {
    display: grid;
    gap: 16px;
}

.copy-source[b-b78s9hrpd3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.copy-source[b-b78s9hrpd3]  i {
    color: var(--muted);
}

.copy-sections[b-b78s9hrpd3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.copy-note[b-b78s9hrpd3] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.copy-note[b-b78s9hrpd3]  i {
    margin-top: 3px;
    color: var(--status-waiting);
}
/* /Components/Pages/TimeSheets/MyTimeSheetPage.razor.rz.scp.css */
.page-head[b-dxdus2e49s] {
    margin-bottom: var(--gap);
}

.loading[b-dxdus2e49s] {
    display: grid;
    gap: 14px;
    padding: var(--pad);
}

.loading .tall[b-dxdus2e49s] {
    height: 64px;
}

.history[b-dxdus2e49s] {
    margin-top: var(--gap);
    padding-top: 16px;
}

.history .table-wrap[b-dxdus2e49s] {
    padding: 8px;
}

.period-link[b-dxdus2e49s] {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.period-link:hover[b-dxdus2e49s] {
    color: var(--accent);
    text-decoration: underline;
}
/* /Components/Pages/TimeSheets/PayrollPrintPage.razor.rz.scp.css */
/* Letter paper, light-only, ink-saving: greys and black, no colour fills (DESIGN.md §12). */
.sheet[b-ww44az1ro3] {
    --edge: 0.5in;
    width: 8.5in;
    max-width: 100%;
    min-height: 11in;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 0 0.4in;
    background: #ffffff;
    color: #16181f;
    font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.mono[b-ww44az1ro3],
.number[b-ww44az1ro3] {
    font-family: "IBM Plex Mono", Consolas, monospace;
}

h4[b-ww44az1ro3] {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.band[b-ww44az1ro3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    padding: 0.25in var(--edge) 0.22in;
    background: #ececec;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.shop[b-ww44az1ro3] {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.shop .mark[b-ww44az1ro3] {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: #3a3d45;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.shop b[b-ww44az1ro3] {
    display: block;
    font-size: 17px;
}

.shop span[b-ww44az1ro3] {
    display: block;
    color: #3d404a;
    font-size: 11.5px;
}

.title[b-ww44az1ro3] {
    display: grid;
    justify-items: end;
    text-align: right;
}

.title small[b-ww44az1ro3] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #50545f;
}

.number[b-ww44az1ro3] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}



.block[b-ww44az1ro3] {
    margin: 0 var(--edge);
}


.block h4[b-ww44az1ro3] {
    margin-bottom: 8px;
}

table.lines[b-ww44az1ro3] {
    width: 100%;
    border-collapse: collapse;
}

.lines th[b-ww44az1ro3] {
    padding: 0 8px 6px 0;
    border-bottom: 2px solid #16181f;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #50545f;
}

.lines td[b-ww44az1ro3] {
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid #d9d9d9;
    vertical-align: top;
}

.lines tfoot td[b-ww44az1ro3] {
    border-bottom: 0;
    border-top: 2px solid #16181f;
    font-weight: 700;
}

.lines .r[b-ww44az1ro3] {
    text-align: right;
}

.lines .notes[b-ww44az1ro3] {
    white-space: pre-line;
    color: #3d404a;
    font-size: 11px;
}

.note[b-ww44az1ro3] {
    margin: 6px 0 0;
    font-size: 10.5px;
    color: #50545f;
}

.person[b-ww44az1ro3] {
    break-inside: avoid;
}

.missing[b-ww44az1ro3] {
    font-size: 15px;
}

@media print {
    .sheet[b-ww44az1ro3] {
        box-shadow: none;
    }
}

/* Each person's table lines up with the next one's. */
.person .lines[b-ww44az1ro3] {
    table-layout: fixed;
}

.person .lines th:nth-child(1)[b-ww44az1ro3] { width: 1.2in; }
.person .lines th:nth-child(2)[b-ww44az1ro3] { width: 1.6in; }
.person .lines th:nth-child(3)[b-ww44az1ro3] { width: 0.6in; }
.person .lines th:nth-child(4)[b-ww44az1ro3] { width: 1.1in; }
/* /Components/Pages/TimeSheets/TeamTimeSheetsPage.razor.rz.scp.css */
.page-head[b-4mwslte8o9] {
    margin-bottom: var(--gap);
}

.loading[b-4mwslte8o9] {
    display: grid;
    gap: 14px;
    padding: var(--pad);
}

.period-bar[b-4mwslte8o9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 16px;
    margin-bottom: var(--gap);
}

.period[b-4mwslte8o9] {
    display: grid;
}

.period b[b-4mwslte8o9] {
    font-size: 16px;
}

.spacer[b-4mwslte8o9] {
    flex: 1;
}

.summary[b-4mwslte8o9] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: 13px;
    color: var(--muted);
}

.summary b[b-4mwslte8o9] {
    color: var(--text);
    font-size: 16px;
}

.team .table-wrap[b-4mwslte8o9],
.payroll .table-wrap[b-4mwslte8o9] {
    padding: 8px;
}

.team-tools[b-4mwslte8o9] {
    padding: 10px 16px 0;
}

.person[b-4mwslte8o9] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.person > span:last-child[b-4mwslte8o9] {
    display: grid;
}

.name[b-4mwslte8o9] {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.name:hover[b-4mwslte8o9] {
    color: var(--accent);
    text-decoration: underline;
}

.review-note[b-4mwslte8o9] {
    max-width: 260px;
}

/* Who's on the clock, under their timesheet's status. */
.clock-state[b-4mwslte8o9] {
    display: block;
    margin-top: 4px;
}

.grid tr.none[b-4mwslte8o9] {
    cursor: default;
}

.grid tr.none td[b-4mwslte8o9] {
    color: var(--muted);
}

.grid tr.selected td[b-4mwslte8o9] {
    background: var(--accent-soft);
}

.action[b-4mwslte8o9] {
    width: 1%;
    white-space: nowrap;
}

/* Payroll: a checklist of who's ready, then the send. */
.payroll[b-4mwslte8o9] {
    display: grid;
    gap: 14px;
    padding: 18px var(--pad) var(--pad);
}

.progress-row[b-4mwslte8o9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.progress[b-4mwslte8o9] {
    flex: 1;
    min-width: 160px;
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.progress span[b-4mwslte8o9] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--status-done);
    animation: fill-b-4mwslte8o9 0.9s var(--ease-out) both;
    transition: width 0.8s var(--ease-out);
}

.payroll .table-wrap[b-4mwslte8o9] {
    margin: 0 calc(-1 * var(--pad) + 8px);
}

.check[b-4mwslte8o9] {
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border);
    border-radius: 50%;
    font-size: 11px;
}

.check.done[b-4mwslte8o9] {
    border-color: var(--status-done);
    background: var(--status-done);
    color: var(--surface);
    animation: land 0.4s var(--ease-spring);
}

/* Marking paid without emailing asks first, in a dialog. */
.confirm-text[b-4mwslte8o9] {
    margin: 0 0 8px;
}

.going-out .who[b-4mwslte8o9] {
    flex: 1;
    min-width: 0;
}

.going-out .hours[b-4mwslte8o9],
.going-out .pay[b-4mwslte8o9] {
    text-align: right;
    white-space: nowrap;
}

.going-out .pay[b-4mwslte8o9] {
    width: 96px;
}

.going-out .total-row[b-4mwslte8o9] {
    font-weight: 600;
    border-top: 1px solid var(--border);
}

.drawer-foot[b-4mwslte8o9] {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}

@keyframes fill-b-4mwslte8o9 {
    from {
        width: 0;
    }
}

/* Phones: the arrows stay either side of the period, the totals go underneath. */
@media (max-width: 599px) {
    .summary[b-4mwslte8o9] {
        width: 100%;
    }

    .period[b-4mwslte8o9] {
        flex: 1 1 0;
        min-width: 0;
    }

    .period-bar .spacer[b-4mwslte8o9] {
        display: none;
    }
}
/* /Components/Pages/Workday/SearchPage.razor.rz.scp.css */
.search-again[b-wiyki6iyat] {
    display: flex;
    gap: 10px;
    max-width: 720px;
    margin: 18px 0 var(--gap);
}

.filter.big[b-wiyki6iyat] {
    flex: 1;
    width: auto;
    height: var(--action-h);
    padding: 0 14px;
    gap: 10px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.filter.big input[b-wiyki6iyat] {
    font-size: 16px;
}

.summary[b-wiyki6iyat] {
    margin: 0 0 10px;
    font-size: 13px;
}

.summary b[b-wiyki6iyat] {
    color: var(--text);
    font-weight: 600;
}

.results[b-wiyki6iyat] {
    display: grid;
    gap: var(--gap);
}

.group[b-wiyki6iyat] {
    animation: fade-up 0.3s var(--ease-out) both;
}

.group:nth-child(2)[b-wiyki6iyat] { animation-delay: 60ms; }
.group:nth-child(3)[b-wiyki6iyat] { animation-delay: 120ms; }
.group:nth-child(4)[b-wiyki6iyat] { animation-delay: 180ms; }
.group:nth-child(5)[b-wiyki6iyat] { animation-delay: 240ms; }

.hit[b-wiyki6iyat] {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.hit b[b-wiyki6iyat] {
    font-weight: 600;
}

.hit span[b-wiyki6iyat] {
    font-size: 13px;
    overflow-wrap: anywhere;
}

.list-row:hover .hit b[b-wiyki6iyat] {
    color: var(--accent);
}

.chev[b-wiyki6iyat] {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring), color 0.15s;
}

.list-row:hover .chev[b-wiyki6iyat] {
    transform: translateX(3px);
    color: var(--text);
}

@media (max-width: 599px) {
    .search-again .btn span[b-wiyki6iyat] {
        display: none;
    }
}
/* /Components/Pages/Workday/WorkdayPage.razor.rz.scp.css */
/* My workday: the front counter (DESIGN.md §10, reference screen 03) and the technician's bench. */

.page-head[b-abkifakigi] {
    margin-bottom: var(--gap);
}

.person[b-abkifakigi] {
    width: auto;
    min-width: 170px;
    max-width: 240px;
}

.seg a[b-abkifakigi] {
    min-height: calc(var(--control-h) - 8px);
}

/* ---------- Counter ---------- */

.counter-actions[b-abkifakigi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.counter-actions .btn[b-abkifakigi] {
    justify-content: flex-start;
    padding-inline: 18px;
    font-size: 15px;
}

.counter-actions .btn[b-abkifakigi]  i {
    font-size: 18px;
}

.counter-actions .btn:hover[b-abkifakigi]  i {
    animation: bounce 0.5s var(--ease-spring);
}

.counter-grid[b-abkifakigi] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--gap);
    align-items: start;
}

.time[b-abkifakigi] {
    width: 72px;
    flex: none;
}

.two[b-abkifakigi] {
    flex: 1;
    display: grid;
    min-width: 0;
    line-height: 1.35;
}

.two > span[b-abkifakigi] {
    font-size: 13px;
    color: var(--muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.two .record[b-abkifakigi] {
    margin-left: 4px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
}

.chev[b-abkifakigi] {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring), color 0.15s;
}

.list-row:hover .chev[b-abkifakigi] {
    transform: translateX(3px);
    color: var(--text);
}

.more[b-abkifakigi] {
    justify-self: start;
    font-size: 13px;
}

/* The chosen pickup: everything needed to hand it over without leaving the page. */
.detail-card[b-abkifakigi] {
    display: grid;
    gap: 16px;
    animation: fade-up 0.3s var(--ease-out);
}

.detail-head[b-abkifakigi] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.detail-head[b-abkifakigi]  .thumb {
    transition: transform 0.25s var(--ease-spring);
}

.detail-head:hover[b-abkifakigi]  .thumb {
    transform: rotate(-6deg);
}

.detail-title[b-abkifakigi] {
    flex: 1;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.title-row[b-abkifakigi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.title-row a[b-abkifakigi] {
    color: var(--text);
}

.device[b-abkifakigi] {
    font-size: 15px;
}

.who-line[b-abkifakigi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    color: var(--muted);
    font-size: 13px;
}

.who-line a[b-abkifakigi] {
    color: inherit;
}

.who-line[b-abkifakigi]  i {
    font-size: 11px;
}

.detail-actions[b-abkifakigi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.block[b-abkifakigi] {
    width: 100%;
}

/* What was done, as chips for the completion codes and the words after them. */
.work-code[b-abkifakigi] {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--status-done-soft);
    color: var(--status-done);
    font-size: 12px;
    font-weight: 600;
}

.work-text[b-abkifakigi] {
    display: block;
    white-space: pre-line;
}

/* The customer still has a loaner: get it back before the device goes (DESIGN.md §18.4). */
.loaner-back[b-abkifakigi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    border-left-color: var(--status-waiting);
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
    font-weight: 600;
}

.loaner-back > span[b-abkifakigi] {
    flex: 1 1 180px;
}

.loaner-back .link-more[b-abkifakigi] {
    color: inherit;
}

/* ---------- Bench: three board columns ---------- */

.board[b-abkifakigi] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    align-items: start;
    margin-bottom: var(--gap);
}

.column[b-abkifakigi] {
    min-width: 0;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}

.col-head[b-abkifakigi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--tile-bg);
}

.col-head h2[b-abkifakigi] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

.col-head .n[b-abkifakigi] {
    font-size: 12px;
    color: var(--muted);
}

.col-head[b-abkifakigi]  .icon-tile {
    background: var(--surface);
}

.col-body[b-abkifakigi] {
    display: grid;
    gap: 10px;
    padding: 10px;
    min-height: 110px;
    align-content: start;
}

.col-empty[b-abkifakigi] {
    margin: 0;
    padding: 18px 8px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.bcard[b-abkifakigi] {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    animation: fade-up 0.3s var(--ease-out);
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}

.bcard:hover[b-abkifakigi] {
    transform: translateY(-2px);
    box-shadow: var(--lift-shadow);
}

.bcard.landed[b-abkifakigi] {
    animation: land 0.5s var(--ease-spring), flash 2.6s ease;
}

.bcard .top[b-abkifakigi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.bcard .number[b-abkifakigi] {
    color: var(--text);
    font-weight: 600;
}

.bcard .body[b-abkifakigi] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text);
    text-decoration: none;
}

.bcard .text[b-abkifakigi] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.bcard .body[b-abkifakigi]  .thumb {
    flex: none;
    transition: transform 0.25s var(--ease-spring);
}

.bcard:hover .body[b-abkifakigi]  .thumb {
    transform: rotate(-6deg);
}

.bcard .body:hover .dev[b-abkifakigi] {
    color: var(--accent);
}

.dev[b-abkifakigi] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    transition: color 0.15s;
}

.problem[b-abkifakigi] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
}

.bcard .who-line[b-abkifakigi] {
    margin-top: 4px;
}

.unread-dot[b-abkifakigi] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-fill);
    animation: pulse-dot 1.8s infinite;
}

.tags[b-abkifakigi] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.foot[b-abkifakigi] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* Just marked ready: offer to text the customer (the board does the same under its card). */
.offer[b-abkifakigi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--gap);
    padding: 10px 10px 10px 14px;
    border-radius: var(--radius-lg);
    background: var(--status-done-soft);
    color: var(--status-done);
    font-size: 14px;
    font-weight: 600;
    animation: fade-up 0.3s var(--ease-out);
}

.offer > span[b-abkifakigi] {
    flex: 1 1 200px;
}

.offer .icon-button[b-abkifakigi] {
    color: var(--status-done);
}

/* What else is on the plate: tabs, so the bench stays the focus. */
.extras[b-abkifakigi] {
    padding: 18px 0 12px;
}

.extras .card-head[b-abkifakigi] {
    margin-bottom: 4px;
}

.extras .tab-panel[b-abkifakigi] {
    padding-top: 6px;
}

/* ---------- Arrange a pickup ---------- */

.find[b-abkifakigi] {
    width: 100%;
}

.pickup-list[b-abkifakigi] {
    display: grid;
}

.amount[b-abkifakigi] {
    margin-left: auto;
    white-space: nowrap;
}

.amount + .chev[b-abkifakigi] {
    margin-left: 0;
}

@media (max-width: 1199px) {
    .counter-grid[b-abkifakigi] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .detail[b-abkifakigi] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 899px) {
    .counter-grid[b-abkifakigi],
    .board[b-abkifakigi] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 599px) {
    .counter-actions[b-abkifakigi] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .head-actions[b-abkifakigi] {
        width: 100%;
    }

    .person[b-abkifakigi] {
        flex: 1;
        max-width: none;
    }

    .col-body[b-abkifakigi] {
        min-height: 0;
    }
}
/* /Components/PartRequests/NewPartRequestForm.razor.rz.scp.css */
.new-request[b-01rx2uhlnn] {
    gap: 16px;
}

/* The same shape as FormField, for the choices that aren't a single input. */
.form-field[b-01rx2uhlnn] {
    display: grid;
    gap: 5px;
    align-content: start;
    min-width: 0;
}

.field-label[b-01rx2uhlnn] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.for-order[b-01rx2uhlnn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-left: 3px solid var(--accent-fill);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 13px;
    font-weight: 500;
}

.for-order a[b-01rx2uhlnn] {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.for-choice[b-01rx2uhlnn] {
    width: max-content;
    max-width: 100%;
}

.for-choice button[b-01rx2uhlnn] {
    height: calc(var(--control-h) - 8px);
}

.search-box[b-01rx2uhlnn] {
    position: relative;
}

.search-box[b-01rx2uhlnn] >  i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 13px;
    pointer-events: none;
}

.search-box .form-control[b-01rx2uhlnn] {
    padding-left: 34px;
}

.matches[b-01rx2uhlnn] {
    display: grid;
    gap: 2px;
    margin-top: -8px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--overlay-shadow);
    animation: fade-up 0.2s var(--ease-out);
}

.match[b-01rx2uhlnn],
.picked[b-01rx2uhlnn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius);
    color: var(--text);
    text-align: left;
}

.match[b-01rx2uhlnn] {
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    transition: background-color 0.12s;
}

.match:hover[b-01rx2uhlnn],
.match:focus-visible[b-01rx2uhlnn] {
    background: var(--accent-soft);
}

.picked[b-01rx2uhlnn] {
    background: var(--accent-soft);
    animation: land 0.35s var(--ease-spring);
}

.match-text[b-01rx2uhlnn] {
    flex: 1;
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.match-text .muted[b-01rx2uhlnn] {
    font-size: 12px;
}

.nobody[b-01rx2uhlnn] {
    margin: 0;
    padding: 6px 8px;
}

.small[b-01rx2uhlnn] {
    font-size: 12px;
}

/* A customer's devices: tap one instead of picking from a list. */
.device-tiles[b-01rx2uhlnn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}

.device-tile[b-01rx2uhlnn] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, transform 0.15s var(--ease-spring);
}

.device-tile:hover[b-01rx2uhlnn] {
    border-color: var(--field-border);
}

.device-tile:active[b-01rx2uhlnn] {
    transform: scale(0.97);
}

.device-tile.on[b-01rx2uhlnn] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent-fill);
}

.device-tile.on b[b-01rx2uhlnn] {
    color: var(--accent-soft-fg);
}

.device-tile:hover[b-01rx2uhlnn]  .thumb {
    transform: rotate(-8deg) scale(0.75);
}

.device-tile[b-01rx2uhlnn]  .thumb {
    transition: transform 0.3s var(--ease-spring);
}

.device-text[b-01rx2uhlnn] {
    display: grid;
    min-width: 0;
    font-size: 13px;
    line-height: 1.3;
}

.device-text b[b-01rx2uhlnn] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.other-icon[b-01rx2uhlnn] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 40px;
    color: var(--muted);
    font-size: 18px;
}

.three[b-01rx2uhlnn] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* A switch with a bold title and a one-line explanation (DESIGN.md §8 Toggle). */
.switch-row[b-01rx2uhlnn] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.switch-row .form-check-input[b-01rx2uhlnn] {
    margin: 2px 0 0;
    float: none;
}

.switch-row > span[b-01rx2uhlnn] {
    display: grid;
    gap: 1px;
    font-size: 14px;
}

.switch-row b[b-01rx2uhlnn] {
    font-weight: 600;
}

/* In a dialog the buttons stay at the bottom, in reach, while the fields scroll. */
.dialog-actions[b-01rx2uhlnn] {
    position: sticky;
    bottom: -20px;
    z-index: 2;
    justify-content: flex-end;
    margin: 4px -22px -20px;
    padding: 14px 22px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--surface);
}

@media (max-width: 699px) {
    .three[b-01rx2uhlnn] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 599px) {
    .dialog-actions .btn-primary[b-01rx2uhlnn] {
        flex: 1;
    }
}
/* /Components/PartRequests/PartRequestHistory.razor.rz.scp.css */
ul[b-53y3q3q6j0] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

li[b-53y3q3q6j0] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
    animation: fade-up 0.3s var(--ease-out) backwards;
}

li:last-child[b-53y3q3q6j0] {
    border-bottom: 0;
}

li:nth-child(2)[b-53y3q3q6j0] { animation-delay: 40ms; }
li:nth-child(3)[b-53y3q3q6j0] { animation-delay: 80ms; }
li:nth-child(n + 4)[b-53y3q3q6j0] { animation-delay: 120ms; }

.text[b-53y3q3q6j0] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.when[b-53y3q3q6j0] {
    font-size: 12.5px;
    white-space: nowrap;
}

@media (max-width: 599px) {
    li[b-53y3q3q6j0] {
        flex-wrap: wrap;
    }

    .text[b-53y3q3q6j0] {
        flex-basis: calc(100% - 50px);
    }

    .when[b-53y3q3q6j0] {
        margin-left: 46px;
    }
}
/* /Components/PartRequests/PartRequestLinesCard.razor.rz.scp.css */
.lines-card[b-vkjn3rmfd5] {
    display: grid;
    gap: 14px;
}

.lines-head[b-vkjn3rmfd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.small[b-vkjn3rmfd5] {
    font-size: 12.5px;
}

.lines[b-vkjn3rmfd5] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lines li[b-vkjn3rmfd5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    animation: fade-up 0.3s var(--ease-out);
}

.lines li:last-child[b-vkjn3rmfd5] {
    border-bottom: 0;
}

.what[b-vkjn3rmfd5] {
    flex: 1;
    display: grid;
    min-width: 0;
}

.what b[b-vkjn3rmfd5] {
    font-weight: 600;
}

.what .muted[b-vkjn3rmfd5] {
    font-size: 12.5px;
}

.row-actions[b-vkjn3rmfd5] {
    display: flex;
}

/* The money: what the customer pays, what it costs, and what's left. */
.totals[b-vkjn3rmfd5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 6px 24px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    font-size: 14px;
}

.totals .num[b-vkjn3rmfd5] {
    text-align: right;
}

.margin[b-vkjn3rmfd5] {
    color: var(--status-done);
}

.margin.loss[b-vkjn3rmfd5] {
    color: var(--status-problem);
}

.margin-bar[b-vkjn3rmfd5] {
    grid-column: 1 / -1;
    height: 8px;
    margin-top: 2px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.margin-bar span[b-vkjn3rmfd5] {
    display: block;
    width: var(--fill);
    height: 100%;
    border-radius: 999px;
    background: var(--status-done);
    animation: grow-b-vkjn3rmfd5 0.9s var(--ease-out) both;
}

.billing[b-vkjn3rmfd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.billed-box[b-vkjn3rmfd5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    font-size: 14px;
}

.billed-box[b-vkjn3rmfd5] >  i {
    color: var(--muted);
}

.billed-box .btn[b-vkjn3rmfd5] {
    margin-left: auto;
}

/* The line dialog. */
.editor[b-vkjn3rmfd5] {
    gap: 14px;
}

.two[b-vkjn3rmfd5],
.three[b-vkjn3rmfd5] {
    display: grid;
    gap: 12px;
}

.two[b-vkjn3rmfd5] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.three[b-vkjn3rmfd5] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.switch-row[b-vkjn3rmfd5] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.switch-row .form-check-input[b-vkjn3rmfd5] {
    margin: 2px 0 0;
    float: none;
}

.switch-row > span[b-vkjn3rmfd5] {
    display: grid;
    gap: 1px;
}

.dialog-actions[b-vkjn3rmfd5] {
    position: sticky;
    bottom: -20px;
    z-index: 2;
    justify-content: flex-end;
    margin: 4px -22px -20px;
    padding: 14px 22px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--surface);
}

@keyframes grow-b-vkjn3rmfd5 {
    from {
        width: 0;
    }
}

@media (max-width: 599px) {
    .two[b-vkjn3rmfd5],
    .three[b-vkjn3rmfd5] {
        grid-template-columns: minmax(0, 1fr);
    }

    .lines li[b-vkjn3rmfd5] {
        flex-wrap: wrap;
    }

    .what[b-vkjn3rmfd5] {
        flex-basis: calc(100% - 60px);
    }

    .lines li > .num[b-vkjn3rmfd5] {
        margin-left: 46px;
    }

    .row-actions[b-vkjn3rmfd5] {
        margin-left: auto;
    }
}
/* /Components/PartRequests/PartRequestNotes.razor.rz.scp.css */
.notes[b-y460idfm09] {
    display: grid;
    gap: 12px;
}

.composer[b-y460idfm09] {
    display: grid;
    gap: 8px;
}

.composer textarea[b-y460idfm09] {
    resize: vertical;
}

.composer-actions[b-y460idfm09] {
    display: flex;
    justify-content: flex-end;
}

.field-error[b-y460idfm09] {
    color: var(--status-problem);
    font-size: 12.5px;
    font-weight: 600;
}

.feed[b-y460idfm09] {
    display: grid;
    gap: 4px;
}

.note[b-y460idfm09] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    padding: 6px 0;
    animation: fade-up 0.3s var(--ease-out);
}

.bubble[b-y460idfm09] {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 7px 8px 11px 13px;
    border: 1px solid var(--bubble-border);
    border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg);
    background: var(--bubble);
}

.bubble.pinned[b-y460idfm09] {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.bubble.fresh[b-y460idfm09] {
    animation: fresh-b-y460idfm09 3.2s ease-out;
}

@keyframes fresh-b-y460idfm09 {
    0%, 35% { background: var(--accent-soft); border-color: var(--accent-fill); }
}

.bubble p[b-y460idfm09] {
    margin: 0;
    padding-right: 5px;
    font-size: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.meta[b-y460idfm09] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    min-height: 30px;
    font-size: 12.5px;
    color: var(--muted);
}

.meta b[b-y460idfm09] {
    color: var(--text);
    font-size: 13.5px;
}

.pinned-label[b-y460idfm09] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-soft-fg);
}

.note-actions[b-y460idfm09] {
    display: inline-flex;
    margin-left: auto;
}

.editor[b-y460idfm09] {
    display: grid;
    gap: 8px;
    padding-right: 5px;
}

.editor textarea[b-y460idfm09] {
    resize: vertical;
}

@media (prefers-reduced-motion: reduce) {
    .bubble.fresh[b-y460idfm09] {
        animation: none;
        background: var(--accent-soft);
    }
}
/* /Components/PartRequests/PartRequestPeek.razor.rz.scp.css */
/* A column that fills the drawer, so the next step sits at its foot. */
.peek[b-lexu60lk1o] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
    animation: fade-up 0.3s var(--ease-out);
}

.peek-loading[b-lexu60lk1o] {
    display: grid;
    gap: 12px;
}

.peek-pills[b-lexu60lk1o] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.peek-what[b-lexu60lk1o] {
    display: grid;
    gap: 2px;
}

.peek-what b[b-lexu60lk1o] {
    font-size: 16px;
    font-weight: 600;
}

.peek-what .muted[b-lexu60lk1o] {
    font-size: 13px;
}

.facts[b-lexu60lk1o] {
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    font-size: 13px;
}

.facts[b-lexu60lk1o]  i {
    font-size: 10px;
}

/* The next step stays in reach at the bottom of the drawer (DESIGN.md §18.3). */
.peek-actions[b-lexu60lk1o] {
    position: sticky;
    bottom: -20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: auto -22px -20px;
    padding: 14px 22px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.peek-actions[b-lexu60lk1o]  .fa-arrow-right {
    font-size: 11px;
    transition: transform 0.2s var(--ease-spring);
}

.peek-actions a:hover[b-lexu60lk1o]  .fa-arrow-right {
    transform: translateX(3px);
}

@media (max-width: 599px) {
    .peek-actions > *[b-lexu60lk1o] {
        flex: 1;
    }
}
/* /Components/PartRequests/PartRequestSteps.razor.rz.scp.css */
/* The shared .stepper (app.css) draws the line and the circles; this adds the on-hold reason. */
.part-steps .step[b-k19ekuegt6] {
    min-width: 0;
}

.part-steps .node[b-k19ekuegt6]  i {
    font-size: 10px;
}

.part-steps .step.current.held .node[b-k19ekuegt6] {
    border-color: var(--status-problem);
    background: var(--status-problem-soft);
    color: var(--status-problem);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-problem) 16%, transparent);
}

.part-steps .step.current.held .node[b-k19ekuegt6]::after {
    display: none;
}

.part-steps .held-reason[b-k19ekuegt6] {
    color: var(--status-problem);
    font-weight: 600;
}

.part-steps.compact .step[b-k19ekuegt6] {
    font-size: 11.5px;
}

.part-steps.compact .when[b-k19ekuegt6] {
    font-size: 10.5px;
}

@media (max-width: 599px) {
    .part-steps .step[b-k19ekuegt6] {
        font-size: 11px;
    }

    .part-steps .when[b-k19ekuegt6] {
        font-size: 10px;
    }
}
/* /Components/Public/AppointmentPage.razor.rz.scp.css */
.page[b-9dq14vltxo] {
    display: grid;
    gap: 14px;
    max-width: 480px;
    margin: 0 auto;
}

/* The store's mark and name: these pages are the shop's, never OnSite's. */
.shop[b-9dq14vltxo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop .mark[b-9dq14vltxo] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-fill) 30%, transparent);
}

.shop div[b-9dq14vltxo] {
    display: grid;
    line-height: 1.3;
}

.shop b[b-9dq14vltxo] {
    font-size: 16px;
}

.shop div > span[b-9dq14vltxo] {
    color: var(--muted);
    font-size: 13px;
}

.card-surface[b-9dq14vltxo] {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
    animation: fade-up 0.35s var(--ease-out);
}

h1[b-9dq14vltxo] {
    margin: 0;
    font-size: 22px;
    text-wrap: balance;
}

p[b-9dq14vltxo] {
    margin: 0;
}

.center[b-9dq14vltxo] {
    justify-items: center;
    text-align: center;
}

.art[b-9dq14vltxo] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 24px;
    animation: float 3s ease-in-out infinite;
}

.art.good[b-9dq14vltxo] {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.title[b-9dq14vltxo] {
    display: grid;
    gap: 6px;
}

.card-form[b-9dq14vltxo] {
    display: grid;
}

.notice[b-9dq14vltxo] {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--status-done-soft);
    color: var(--text);
    font-size: 14px;
    animation: fade-up 0.35s var(--ease-out);
}

.notice[b-9dq14vltxo]  i {
    color: var(--status-done);
}

/* ---------- When: a calendar leaf beside the day and time ---------- */
.when[b-9dq14vltxo] {
    display: flex;
    gap: 14px;
    align-items: center;
    width: 100%;
    text-align: left;
}

.when.faded[b-9dq14vltxo] {
    opacity: 0.7;
}

.when .date[b-9dq14vltxo] {
    flex: none;
    display: grid;
    width: 64px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    text-align: center;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--text) 8%, transparent);
}

.when .date small[b-9dq14vltxo] {
    padding: 3px 0;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.when .date b[b-9dq14vltxo] {
    padding: 6px 0 8px;
    font-size: 26px;
    line-height: 1;
}

.when .moment[b-9dq14vltxo] {
    display: grid;
    gap: 2px;
}

.when .moment b[b-9dq14vltxo] {
    font-size: 18px;
}

.when .moment span[b-9dq14vltxo] {
    color: var(--muted);
    font-size: 15px;
}

/* What, where and with whom. */
.about[b-9dq14vltxo] {
    display: grid;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
    text-align: left;
}

.about div[b-9dq14vltxo] {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}

.about dt[b-9dq14vltxo] {
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.about dt[b-9dq14vltxo]  i {
    width: 14px;
    color: var(--accent);
    text-align: center;
}

.about dd[b-9dq14vltxo] {
    margin: 0;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.directions[b-9dq14vltxo] {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Move and cancel, under Add to calendar. */
.change[b-9dq14vltxo] {
    display: grid;
    gap: 10px;
}

.cancel-it summary[b-9dq14vltxo] {
    color: var(--muted);
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}

.cancel-form[b-9dq14vltxo] {
    gap: 8px;
    margin-top: 10px;
}

.cancel-form label[b-9dq14vltxo] {
    font-size: 14px;
}

.until[b-9dq14vltxo] {
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* ---------- Moving: two weeks of days, then that day's free times ---------- */
.days[b-9dq14vltxo] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.day[b-9dq14vltxo] {
    display: grid;
    justify-items: center;
    padding: 6px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.day span[b-9dq14vltxo],
.day small[b-9dq14vltxo] {
    color: var(--muted);
    font-size: 11px;
}

.day b[b-9dq14vltxo] {
    font-size: 18px;
    line-height: 1.2;
}

.day:hover[b-9dq14vltxo] {
    border-color: var(--accent);
}

.day.on[b-9dq14vltxo] {
    border-color: var(--accent-fill);
    background: var(--accent-fill);
    color: var(--on-accent);
}

.day.on span[b-9dq14vltxo],
.day.on small[b-9dq14vltxo] {
    color: inherit;
}

.day.none:not(.on)[b-9dq14vltxo] {
    border-style: dashed;
    opacity: 0.5;
}

.none-free[b-9dq14vltxo] {
    font-size: 14px;
}

.move-form[b-9dq14vltxo] {
    gap: 14px;
}

.times[b-9dq14vltxo] {
    margin: 0;
    padding: 0;
    border: 0;
}

.times legend[b-9dq14vltxo] {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.slots[b-9dq14vltxo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.slot[b-9dq14vltxo] {
    position: relative;
    cursor: pointer;
}

.slot input[b-9dq14vltxo] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.slot span[b-9dq14vltxo] {
    display: block;
    padding: 10px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}

.slot:hover span[b-9dq14vltxo] {
    border-color: var(--accent);
}

.slot input:checked + span[b-9dq14vltxo] {
    border-color: var(--accent-fill);
    background: var(--accent-fill);
    color: var(--on-accent);
    font-weight: 600;
}

.slot input:focus-visible + span[b-9dq14vltxo] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.back[b-9dq14vltxo] {
    font-size: 14px;
    text-align: center;
}

.foot[b-9dq14vltxo] {
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.foot b[b-9dq14vltxo] {
    color: var(--text);
}

@media (max-width: 480px) {
    .card-surface[b-9dq14vltxo] {
        padding: 20px;
    }
}
/* /Components/Public/BookingPage.razor.rz.scp.css */
.page[b-mbvgaq2g92] {
    display: grid;
    gap: 14px;
    max-width: 520px;
    margin: 0 auto;
}

/* The store's mark and name: the page is the shop's, never OnSite's. */
.shop[b-mbvgaq2g92] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop .mark[b-mbvgaq2g92] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-fill) 30%, transparent);
}

.shop div[b-mbvgaq2g92] {
    display: grid;
    line-height: 1.3;
}

.shop b[b-mbvgaq2g92] {
    font-size: 16px;
}

.shop div > span[b-mbvgaq2g92] {
    color: var(--muted);
    font-size: 13px;
}

.card-surface[b-mbvgaq2g92] {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
    animation: fade-up 0.35s var(--ease-out);
}

h1[b-mbvgaq2g92] {
    margin: 0;
    font-size: 22px;
    text-wrap: balance;
}

p[b-mbvgaq2g92] {
    margin: 0;
}

.center[b-mbvgaq2g92] {
    justify-items: center;
    text-align: center;
}

.art[b-mbvgaq2g92] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 24px;
    animation: float 3s ease-in-out infinite;
}

.title[b-mbvgaq2g92] {
    display: grid;
    gap: 6px;
}

/* ---------- What: each service with where it can be done ---------- */
.services[b-mbvgaq2g92] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service[b-mbvgaq2g92] {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.service-text[b-mbvgaq2g92] {
    display: grid;
    gap: 3px;
}

.service-text b[b-mbvgaq2g92] {
    font-size: 16px;
}

.service-text span[b-mbvgaq2g92] {
    font-size: 14px;
}

.service-text .meta[b-mbvgaq2g92] {
    color: var(--muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.choose[b-mbvgaq2g92] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.choose .btn[b-mbvgaq2g92] {
    flex: 1 1 140px;
}

/* ---------- When: two weeks of days, then that day's free times ---------- */
.days[b-mbvgaq2g92] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.day[b-mbvgaq2g92] {
    display: grid;
    justify-items: center;
    padding: 6px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.day span[b-mbvgaq2g92],
.day small[b-mbvgaq2g92] {
    color: var(--muted);
    font-size: 11px;
}

.day b[b-mbvgaq2g92] {
    font-size: 18px;
    line-height: 1.2;
}

.day:hover[b-mbvgaq2g92] {
    border-color: var(--accent);
}

.day.on[b-mbvgaq2g92] {
    border-color: var(--accent-fill);
    background: var(--accent-fill);
    color: var(--on-accent);
}

.day.on span[b-mbvgaq2g92],
.day.on small[b-mbvgaq2g92] {
    color: inherit;
}

.day.none:not(.on)[b-mbvgaq2g92] {
    border-style: dashed;
    opacity: 0.5;
}

.weeks[b-mbvgaq2g92] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.weeks a[b-mbvgaq2g92] {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.weeks .later[b-mbvgaq2g92] {
    margin-left: auto;
}

.day-name[b-mbvgaq2g92] {
    margin: 0;
    font-size: 15px;
}

.none-free[b-mbvgaq2g92] {
    font-size: 14px;
}

.slots[b-mbvgaq2g92] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.slot-link[b-mbvgaq2g92] {
    display: block;
    padding: 10px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.slot-link:hover[b-mbvgaq2g92],
.slot-link:focus-visible[b-mbvgaq2g92] {
    border-color: var(--accent-fill);
    background: var(--accent-fill);
    color: var(--on-accent);
}

/* ---------- Details: the time chosen, then who it's for ---------- */
.when[b-mbvgaq2g92] {
    display: flex;
    gap: 14px;
    align-items: center;
}

.when .date[b-mbvgaq2g92] {
    flex: none;
    display: grid;
    width: 64px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    text-align: center;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--text) 8%, transparent);
}

.when .date small[b-mbvgaq2g92] {
    padding: 3px 0;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.when .date b[b-mbvgaq2g92] {
    padding: 6px 0 8px;
    font-size: 26px;
    line-height: 1;
}

.when .moment[b-mbvgaq2g92] {
    display: grid;
    gap: 2px;
}

.when .moment b[b-mbvgaq2g92] {
    font-size: 18px;
}

.when .moment span[b-mbvgaq2g92] {
    color: var(--muted);
    font-size: 15px;
}

.about[b-mbvgaq2g92] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
}

.about div[b-mbvgaq2g92] {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}

.about dt[b-mbvgaq2g92] {
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.about dt[b-mbvgaq2g92]  i {
    width: 14px;
    color: var(--accent);
    text-align: center;
}

.about dd[b-mbvgaq2g92] {
    margin: 0;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.back-link[b-mbvgaq2g92] {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 14px;
}

.details-form[b-mbvgaq2g92] {
    display: grid;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.pair[b-mbvgaq2g92] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.postal[b-mbvgaq2g92] {
    max-width: 160px;
    text-transform: uppercase;
}

/* Off the page for people; there for bots that fill in every field. */
.trap[b-mbvgaq2g92] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.fine[b-mbvgaq2g92] {
    text-align: center;
}

.foot[b-mbvgaq2g92] {
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.foot b[b-mbvgaq2g92] {
    color: var(--text);
}

@media (max-width: 480px) {
    .card-surface[b-mbvgaq2g92] {
        padding: 20px;
    }
}

/* Where the store is, under the booking's facts (MapPreview). */
#details[b-mbvgaq2g92]  .find-us {
    margin: 4px 0 6px;
}
/* /Components/Public/DevicePage.razor.rz.scp.css */
.page[b-fatdcc5oqn] {
    display: grid;
    gap: 14px;
    max-width: 480px;
    margin: 0 auto;
}

/* The store's mark and name: these pages are the shop's, never OnSite's. */
.shop[b-fatdcc5oqn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 2px;
}

.shop .mark[b-fatdcc5oqn] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-fill) 30%, transparent);
}

.shop div[b-fatdcc5oqn] {
    display: grid;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.shop b[b-fatdcc5oqn] {
    font-size: 16px;
}

.shop div span[b-fatdcc5oqn] {
    color: var(--muted);
    font-size: 13px;
}

.staff-link[b-fatdcc5oqn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.staff-link span[b-fatdcc5oqn] {
    flex: 1;
}

.card-surface[b-fatdcc5oqn] {
    display: grid;
    gap: 14px;
    padding: 20px;
    border-radius: 16px;
    animation: fade-up 0.35s var(--ease-out) backwards;
}

h2[b-fatdcc5oqn] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.card-surface p[b-fatdcc5oqn] {
    margin: 0;
}

/* The device, drawn a little larger. */
.device[b-fatdcc5oqn] {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.device[b-fatdcc5oqn]  .thumb {
    margin: 4px 6px;
    transform: scale(1.2);
}

.device h1[b-fatdcc5oqn] {
    margin: 0;
    font-size: 21px;
    text-wrap: balance;
}

.device .muted[b-fatdcc5oqn] {
    font-size: 13px;
}

/* Where the repair is: the same four steps the staff see, in customer words. */
.now-head[b-fatdcc5oqn] {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.now-head h2[b-fatdcc5oqn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.now-head[b-fatdcc5oqn]  .confetti {
    left: 40px;
    top: 10px;
}

.stepper .when.hold[b-fatdcc5oqn] {
    color: var(--status-waiting);
    font-weight: 600;
}

.since[b-fatdcc5oqn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.dot[b-fatdcc5oqn] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--status-progress);
    animation: pulse-dot 1.8s infinite;
}

.dot.done[b-fatdcc5oqn] {
    background: var(--status-done);
}

.dot.waiting[b-fatdcc5oqn] {
    background: var(--status-waiting);
}

.now.ready[b-fatdcc5oqn] {
    border-color: transparent;
    background: var(--status-done-soft);
}

.now.ready h2[b-fatdcc5oqn] {
    color: var(--status-done);
}

/* The warranty: green, with the end date and a bar of the time left. */
.warranty[b-fatdcc5oqn] {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    border-color: transparent;
    background: var(--status-done-soft);
    color: var(--status-done);
    font-size: 14px;
}

.warranty > div[b-fatdcc5oqn] {
    display: grid;
    gap: 4px;
}

.warranty b[b-fatdcc5oqn] {
    color: var(--text);
}

.shield[b-fatdcc5oqn] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    font-size: 18px;
}

.bar[b-fatdcc5oqn] {
    height: 6px;
    margin-top: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--status-done) 20%, transparent);
    overflow: hidden;
}

.bar span[b-fatdcc5oqn] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--status-done);
    animation: fill-b-fatdcc5oqn 1s var(--ease-out) 0.2s backwards;
    transform-origin: left;
}

/* What the customer can do: one primary action, the rest quieter. */
.actions[b-fatdcc5oqn] {
    display: grid;
    gap: 8px;
}

.actions .btn:not(.btn-lg)[b-fatdcc5oqn] {
    min-height: 44px;
}

.start[b-fatdcc5oqn] {
    animation: fade-up 0.3s var(--ease-out);
}

.start h2[b-fatdcc5oqn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.start p[b-fatdcc5oqn] {
    color: var(--muted);
}

.start p b[b-fatdcc5oqn] {
    color: var(--text);
}

.stacked[b-fatdcc5oqn] {
    display: grid;
    gap: 8px;
}

.stacked .btn-ghost[b-fatdcc5oqn] {
    min-height: 44px;
}

.code-form[b-fatdcc5oqn] {
    display: grid;
    gap: 14px;
}

.code-links[b-fatdcc5oqn] {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 13px;
}

.code-links .link-button[b-fatdcc5oqn] {
    font-size: 13px;
}

.code-links .link-button:disabled[b-fatdcc5oqn] {
    color: var(--muted);
    cursor: default;
    text-decoration: none;
}

.dev-code[b-fatdcc5oqn] {
    padding: 8px 10px;
    border-radius: var(--radius);
    background: var(--status-waiting-soft);
    color: var(--status-waiting) !important;
    font-size: 13px;
}

.quick[b-fatdcc5oqn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quick .chip.on[b-fatdcc5oqn] {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    border-color: transparent;
}

textarea[b-fatdcc5oqn] {
    font-size: 16px;
}

/* Sent: a tick with a little confetti, and the new number. */
.done[b-fatdcc5oqn] {
    position: relative;
    justify-items: center;
    text-align: center;
}

.tick[b-fatdcc5oqn] {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--status-done-soft);
    color: var(--status-done);
    font-size: 30px;
    animation: tick-in-b-fatdcc5oqn 0.5s var(--ease-spring);
}

.tick[b-fatdcc5oqn]  .confetti {
    left: 50%;
}

.done p[b-fatdcc5oqn] {
    color: var(--muted);
}

.history ol[b-fatdcc5oqn] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.history li[b-fatdcc5oqn] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.history li:last-child[b-fatdcc5oqn] {
    border-bottom: 0;
}

.history li div[b-fatdcc5oqn] {
    display: grid;
}

.when[b-fatdcc5oqn] {
    color: var(--muted);
    font-size: 13px;
}

.private[b-fatdcc5oqn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.foot[b-fatdcc5oqn] {
    display: grid;
    gap: 4px;
    padding: 6px 8px 0;
    font-size: 12px;
    text-align: center;
    color: var(--muted);
}

.foot p[b-fatdcc5oqn] {
    margin: 0;
}

.foot b[b-fatdcc5oqn] {
    color: var(--text);
}

.found[b-fatdcc5oqn] {
    margin-bottom: 6px !important;
    font-size: 13px;
    color: var(--text);
}

.missing[b-fatdcc5oqn] {
    justify-items: center;
    text-align: center;
}

.missing h1[b-fatdcc5oqn] {
    margin: 0;
    font-size: 22px;
}

.missing p[b-fatdcc5oqn] {
    color: var(--muted);
}

.art[b-fatdcc5oqn] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 24px;
    animation: float 3s ease-in-out infinite;
}

@keyframes tick-in-b-fatdcc5oqn {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
}

@keyframes fill-b-fatdcc5oqn {
    from {
        transform: scaleX(0);
    }
}

@media (max-width: 480px) {
    .card-surface[b-fatdcc5oqn] {
        padding: 18px;
    }
}

/* An expired code just needs a new one: amber, not a red shake. */
.form-alert.waits[b-fatdcc5oqn] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
    animation: fade-up 0.25s var(--ease-out);
}

.form-alert.waits[b-fatdcc5oqn]  i {
    margin-top: 3px;
}

.missing .btn[b-fatdcc5oqn] {
    margin-top: 4px;
}

/* Where to pick it up, over the directions button (MapPreview). */
.card-surface[b-fatdcc5oqn]  .pickup-map {
    margin-top: 4px;
}
/* /Components/Public/FeedbackPage.razor.rz.scp.css */
.page[b-ypoz57hu4t] {
    display: grid;
    gap: 14px;
    max-width: 480px;
    margin: 0 auto;
}

/* The store's mark and name: these pages are the shop's, never OnSite's. */
.shop[b-ypoz57hu4t] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop .mark[b-ypoz57hu4t] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-fill) 30%, transparent);
}

.shop div[b-ypoz57hu4t] {
    display: grid;
    line-height: 1.3;
}

.shop b[b-ypoz57hu4t] {
    font-size: 16px;
}

.shop div span[b-ypoz57hu4t] {
    color: var(--muted);
    font-size: 13px;
}

.card-surface[b-ypoz57hu4t] {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
    animation: fade-up 0.35s var(--ease-out);
}

h1[b-ypoz57hu4t] {
    margin: 0;
    font-size: 22px;
    text-wrap: balance;
}

p[b-ypoz57hu4t] {
    margin: 0;
}

.center[b-ypoz57hu4t] {
    justify-items: center;
    text-align: center;
}

.intro[b-ypoz57hu4t] {
    display: grid;
    gap: 6px;
}

.card-form[b-ypoz57hu4t] {
    gap: 14px;
}

/* ---------- The stars ---------- */

.stars[b-ypoz57hu4t] {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.stars.nudge .row[b-ypoz57hu4t] {
    animation: shake 0.45s;
}

/* A face that changes with the rating. */
.face[b-ypoz57hu4t] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 30px;
    transition: background-color 0.25s, color 0.25s;
}

.face[b-ypoz57hu4t]  i {
    display: none;
    animation: face-in-b-ypoz57hu4t 0.3s var(--ease-spring);
}

.face[b-ypoz57hu4t]  .fa-face-smile {
    display: block;
}

.stars:has(input:checked) .face[b-ypoz57hu4t]  .fa-face-smile {
    display: none;
}

.stars:has(input[value="1"]:checked, input[value="2"]:checked) .face[b-ypoz57hu4t] {
    background: var(--status-problem-soft);
    color: var(--status-problem);
}

.stars:has(input[value="1"]:checked, input[value="2"]:checked) .face[b-ypoz57hu4t]  .fa-face-frown {
    display: block;
}

.stars:has(input[value="3"]:checked) .face[b-ypoz57hu4t] {
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
}

.stars:has(input[value="3"]:checked) .face[b-ypoz57hu4t]  .fa-face-meh {
    display: block;
}

.stars:has(input[value="4"]:checked, input[value="5"]:checked) .face[b-ypoz57hu4t] {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.stars:has(input[value="4"]:checked, input[value="5"]:checked) .face[b-ypoz57hu4t]  .fa-face-laugh-beam {
    display: block;
}

.row[b-ypoz57hu4t] {
    display: flex;
    justify-content: center;
    gap: 4px;
}

/* Each star is a radio button wearing a star: big enough for a thumb. */
.star[b-ypoz57hu4t] {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    color: color-mix(in srgb, var(--field-border) 50%, var(--surface));
    font-size: 36px;
    cursor: pointer;
    transition: color 0.15s, transform 0.2s var(--ease-spring);
}

.star input[b-ypoz57hu4t] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.star:hover[b-ypoz57hu4t] {
    transform: scale(1.12);
}

.star:has(input:focus-visible)[b-ypoz57hu4t] {
    outline: 2px solid var(--accent-fill);
    outline-offset: 2px;
}

/* Lit up to the one chosen, and up to the one you point at. */
.row:has(.star:nth-child(1) input:checked) .star:nth-child(-n+1)[b-ypoz57hu4t],
.row:has(.star:nth-child(2) input:checked) .star:nth-child(-n+2)[b-ypoz57hu4t],
.row:has(.star:nth-child(3) input:checked) .star:nth-child(-n+3)[b-ypoz57hu4t],
.row:has(.star:nth-child(4) input:checked) .star:nth-child(-n+4)[b-ypoz57hu4t],
.row:has(.star:nth-child(5) input:checked) .star:nth-child(-n+5)[b-ypoz57hu4t],
.row:has(.star:nth-child(1):hover) .star:nth-child(-n+1)[b-ypoz57hu4t],
.row:has(.star:nth-child(2):hover) .star:nth-child(-n+2)[b-ypoz57hu4t],
.row:has(.star:nth-child(3):hover) .star:nth-child(-n+3)[b-ypoz57hu4t],
.row:has(.star:nth-child(4):hover) .star:nth-child(-n+4)[b-ypoz57hu4t],
.row:has(.star:nth-child(5):hover) .star:nth-child(-n+5)[b-ypoz57hu4t] {
    color: var(--status-waiting);
}

.star:has(input:checked)[b-ypoz57hu4t]  i {
    animation: boing-b-ypoz57hu4t 0.45s var(--ease-spring);
}

.words[b-ypoz57hu4t] {
    min-height: 22px;
    font-weight: 600;
}

.words span[b-ypoz57hu4t] {
    display: none;
}

.words .w0[b-ypoz57hu4t] {
    display: inline;
    color: var(--muted);
    font-weight: 500;
}

.stars:has(input:checked) .words .w0[b-ypoz57hu4t] {
    display: none;
}

.stars:has(input[value="1"]:checked) .words .w1[b-ypoz57hu4t],
.stars:has(input[value="2"]:checked) .words .w2[b-ypoz57hu4t],
.stars:has(input[value="3"]:checked) .words .w3[b-ypoz57hu4t],
.stars:has(input[value="4"]:checked) .words .w4[b-ypoz57hu4t],
.stars:has(input[value="5"]:checked) .words .w5[b-ypoz57hu4t] {
    display: inline;
    animation: fade-up 0.2s var(--ease-out);
}

/* After a rating, a few words to start the comment, in the rating's mood. */
.quick[b-ypoz57hu4t] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.quick .chip[b-ypoz57hu4t] {
    display: none;
    animation: fade-up 0.25s var(--ease-out);
}

.card-form:has(input[value="1"]:checked, input[value="2"]:checked) .quick .chip.low[b-ypoz57hu4t],
.card-form:has(input[value="3"]:checked) .quick .chip.mid[b-ypoz57hu4t],
.card-form:has(input[value="4"]:checked, input[value="5"]:checked) .quick .chip.high[b-ypoz57hu4t] {
    display: inline-flex;
}

.quick .chip.on[b-ypoz57hu4t] {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    border-color: transparent;
}

textarea[b-ypoz57hu4t] {
    font-size: 16px;
}

/* ---------- Thanks ---------- */

.tick[b-ypoz57hu4t] {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 30px;
    animation: tick-in-b-ypoz57hu4t 0.5s var(--ease-spring);
}

.tick.happy[b-ypoz57hu4t] {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.tick[b-ypoz57hu4t]  .confetti {
    left: 50%;
}

.thanks .btn[b-ypoz57hu4t]  i:last-child {
    font-size: 12px;
}

.art[b-ypoz57hu4t] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 24px;
    animation: float 3s ease-in-out infinite;
}

@keyframes boing-b-ypoz57hu4t {
    40% {
        transform: scale(1.35) rotate(-8deg);
    }
}

@keyframes face-in-b-ypoz57hu4t {
    from {
        transform: scale(0.6);
    }
}

@keyframes tick-in-b-ypoz57hu4t {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
}

@media (max-width: 400px) {
    .star[b-ypoz57hu4t] {
        width: 48px;
        height: 48px;
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .card-surface[b-ypoz57hu4t] {
        padding: 20px;
    }
}

/* "You've already told us": the stars given, small and settled. */
.given[b-ypoz57hu4t] {
    display: inline-flex;
    gap: 4px;
    color: color-mix(in srgb, var(--field-border) 50%, var(--surface));
    font-size: 20px;
}

.given .lit[b-ypoz57hu4t] {
    color: var(--status-waiting);
}

.told .btn[b-ypoz57hu4t]  i:last-child {
    font-size: 12px;
}
/* /Components/Public/PayPage.razor.rz.scp.css */
.page[b-l1w6hp7d9u] {
    display: grid;
    gap: 14px;
    max-width: 480px;
    margin: 0 auto;
}

/* The store's mark and name: these pages are the shop's, never OnSite's. */
.shop[b-l1w6hp7d9u] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop .mark[b-l1w6hp7d9u] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-fill) 30%, transparent);
}

.shop div[b-l1w6hp7d9u] {
    display: grid;
    line-height: 1.3;
}

.shop b[b-l1w6hp7d9u] {
    font-size: 16px;
}

.shop div > span[b-l1w6hp7d9u] {
    color: var(--muted);
    font-size: 13px;
}

.card-surface[b-l1w6hp7d9u] {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
    animation: fade-up 0.35s var(--ease-out);
}

h1[b-l1w6hp7d9u] {
    margin: 0;
    font-size: 22px;
    text-wrap: balance;
}

p[b-l1w6hp7d9u] {
    margin: 0;
}

.center[b-l1w6hp7d9u] {
    justify-items: center;
    text-align: center;
}

.art[b-l1w6hp7d9u] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 24px;
    animation: float 3s ease-in-out infinite;
}

/* A clean receipt: lines, then the totals, then a big Owing. */
.lines[b-l1w6hp7d9u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.lines td[b-l1w6hp7d9u] {
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.lines .r[b-l1w6hp7d9u] {
    padding-left: 12px;
    text-align: right;
    white-space: nowrap;
}

.lines tfoot td[b-l1w6hp7d9u] {
    padding: 5px 0;
    border-bottom: 0;
    color: var(--muted);
}

.lines tfoot tr:first-child td[b-l1w6hp7d9u] {
    padding-top: 12px;
}

.lines tfoot .owing td[b-l1w6hp7d9u] {
    padding-top: 12px;
    border-top: 2px solid var(--text);
    color: var(--text);
    font-size: 20px;
    font-weight: 700;
}

.card-form[b-l1w6hp7d9u] {
    display: grid;
}

.secure[b-l1w6hp7d9u] {
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.secure[b-l1w6hp7d9u]  i {
    margin-right: 6px;
}

/* Back from Stripe: a soft pulse while the store hears about it. */
.wait[b-l1w6hp7d9u] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 14px;
}

.dot[b-l1w6hp7d9u] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-fill);
    animation: pulse-dot 1.6s infinite;
}

/* Paid: a stamp lands. */
.stamp[b-l1w6hp7d9u] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 3px solid var(--status-done);
    border-radius: 10px;
    color: var(--status-done);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.06em;
    transform: rotate(-6deg);
    animation: stamp-b-l1w6hp7d9u 0.6s var(--ease-spring);
}

.done[b-l1w6hp7d9u]  .confetti {
    left: 50%;
    top: 60px;
}

.done b[b-l1w6hp7d9u] {
    color: var(--text);
}

.foot[b-l1w6hp7d9u] {
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.foot b[b-l1w6hp7d9u] {
    color: var(--text);
}

@keyframes stamp-b-l1w6hp7d9u {
    0% {
        opacity: 0;
        transform: scale(2.2) rotate(-14deg);
    }

    70% {
        opacity: 1;
        transform: scale(0.94) rotate(-6deg);
    }

    100% {
        transform: rotate(-6deg);
    }
}

@media (max-width: 480px) {
    .card-surface[b-l1w6hp7d9u] {
        padding: 20px;
    }
}

/* What the invoice is for: the repair's device and order number. */
.title[b-l1w6hp7d9u] {
    display: grid;
    gap: 6px;
}

.for[b-l1w6hp7d9u] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
}

.for[b-l1w6hp7d9u]  i {
    color: var(--accent);
}
/* /Components/Public/PublicLayout.razor.rz.scp.css */
.public-stage[b-gcg33dz4tu] {
    min-height: 100vh;
    padding: max(32px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px));
    background: var(--bg);
    color: var(--text);
}

@media (max-width: 480px) {
    .public-stage[b-gcg33dz4tu] {
        padding: max(16px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 40px max(12px, env(safe-area-inset-left, 0px));
    }
}
/* /Components/Public/QuotePage.razor.rz.scp.css */
.page[b-66xe62gllm] {
    display: grid;
    gap: 14px;
    max-width: 480px;
    margin: 0 auto;
}

/* The store's mark and name: these pages are the shop's, never OnSite's. */
.shop[b-66xe62gllm] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop .mark[b-66xe62gllm] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-fill) 30%, transparent);
}

.shop div[b-66xe62gllm] {
    display: grid;
    line-height: 1.3;
}

.shop b[b-66xe62gllm] {
    font-size: 16px;
}

.shop div > span[b-66xe62gllm] {
    color: var(--muted);
    font-size: 13px;
}

.card-surface[b-66xe62gllm] {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 24px;
    border-radius: 16px;
    animation: fade-up 0.35s var(--ease-out);
}

h1[b-66xe62gllm] {
    margin: 0;
    font-size: 22px;
    text-wrap: balance;
}

p[b-66xe62gllm] {
    margin: 0;
}

.center[b-66xe62gllm] {
    justify-items: center;
    text-align: center;
}

.art[b-66xe62gllm] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 24px;
    animation: float 3s ease-in-out infinite;
}

/* The lines, then the taxes, then a big Total. */
.lines[b-66xe62gllm] {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.lines td[b-66xe62gllm] {
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.lines .r[b-66xe62gllm] {
    padding-left: 12px;
    text-align: right;
    white-space: nowrap;
}

.lines tfoot td[b-66xe62gllm] {
    padding: 5px 0;
    border-bottom: 0;
    color: var(--muted);
}

.lines tfoot tr:first-child td[b-66xe62gllm] {
    padding-top: 12px;
}

.lines tfoot .owing td[b-66xe62gllm] {
    padding-top: 12px;
    border-top: 2px solid var(--text);
    color: var(--text);
    font-size: 20px;
    font-weight: 700;
}

.card-form[b-66xe62gllm] {
    display: grid;
}

/* Approved: a stamp lands. */
.stamp[b-66xe62gllm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 3px solid var(--status-done);
    border-radius: 10px;
    color: var(--status-done);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.06em;
    transform: rotate(-6deg);
    animation: stamp-b-66xe62gllm 0.6s var(--ease-spring);
}

.done[b-66xe62gllm]  .confetti {
    left: 50%;
    top: 60px;
}

.done b[b-66xe62gllm] {
    color: var(--text);
}

.foot[b-66xe62gllm] {
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.foot b[b-66xe62gllm] {
    color: var(--text);
}

@keyframes stamp-b-66xe62gllm {
    0% {
        opacity: 0;
        transform: scale(2.2) rotate(-14deg);
    }

    70% {
        opacity: 1;
        transform: scale(0.94) rotate(-6deg);
    }

    100% {
        transform: rotate(-6deg);
    }
}

@media (max-width: 480px) {
    .card-surface[b-66xe62gllm] {
        padding: 20px;
    }
}

/* What the quote is for: the device. */
.title[b-66xe62gllm] {
    display: grid;
    gap: 6px;
}

.for[b-66xe62gllm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
}

.for[b-66xe62gllm]  i {
    color: var(--accent);
}

/* ---------- A quote: its lines, then Approve, with Decline tucked under ---------- */

.lines small[b-66xe62gllm] {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.notes[b-66xe62gllm] {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-2);
    font-size: 14px;
    white-space: pre-line;
}

.good-until[b-66xe62gllm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
}

.good-until[b-66xe62gllm]  i {
    color: var(--accent);
}

.decline summary[b-66xe62gllm] {
    color: var(--muted);
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}

.decline-form[b-66xe62gllm] {
    gap: 8px;
    margin-top: 10px;
}

.decline-form label[b-66xe62gllm] {
    font-size: 14px;
}

.terms[b-66xe62gllm] {
    color: var(--muted);
    font-size: 12px;
}

/* Optional lines: a tick to keep each one, struck through when unticked or left out. */
.pick-note[b-66xe62gllm] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 14px;
}

.keep[b-66xe62gllm] {
    display: inline-flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}

.keep .form-check-input[b-66xe62gllm] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
}

.lines small.optional[b-66xe62gllm] {
    color: var(--accent);
    font-weight: 600;
}

.lines tr.left-out td[b-66xe62gllm] {
    color: var(--muted);
}

.lines tr.left-out .keep .name[b-66xe62gllm],
.lines tr.left-out td.num[b-66xe62gllm] {
    text-decoration: line-through;
}

.lines tfoot .discount td[b-66xe62gllm] {
    color: var(--status-done);
}
/* /Components/Public/SellPage.razor.rz.scp.css */
.page[b-jqa3xf30gl] {
    display: grid;
    gap: 14px;
    max-width: 480px;
    margin: 0 auto;
}

/* The store's mark and name: these pages are the shop's, never OnSite's. */
.shop[b-jqa3xf30gl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 2px;
}

.shop .mark[b-jqa3xf30gl] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-fill) 30%, transparent);
}

.shop div[b-jqa3xf30gl] {
    display: grid;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.shop b[b-jqa3xf30gl] {
    font-size: 16px;
}

.shop div span[b-jqa3xf30gl] {
    color: var(--muted);
    font-size: 13px;
}


.card-surface[b-jqa3xf30gl] {
    display: grid;
    gap: 14px;
    padding: 20px;
    border-radius: 16px;
    animation: fade-up 0.35s var(--ease-out) backwards;
}

h2[b-jqa3xf30gl] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.card-surface p[b-jqa3xf30gl] {
    margin: 0;
}

.lookup[b-jqa3xf30gl] {
    display: grid;
    gap: 16px;
}

h1[b-jqa3xf30gl] {
    margin: 0;
    font-size: 24px;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.lede[b-jqa3xf30gl] {
    color: var(--muted);
}

.lookup .form-select[b-jqa3xf30gl] {
    height: 48px;
    font-size: 17px;
}

.lookup .btn-primary[b-jqa3xf30gl] {
    min-height: 48px;
}

/* The four conditions as big choices, each with what it means. */
.grades[b-jqa3xf30gl] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.grade[b-jqa3xf30gl] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
}

.grade:has(input:checked)[b-jqa3xf30gl] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.grade input[b-jqa3xf30gl] {
    margin-top: 3px;
    accent-color: var(--accent);
}

.grade > span[b-jqa3xf30gl] {
    display: grid;
    gap: 2px;
}

/* The offer: the money big, the store credit as the better deal. */
.offer .eyebrow[b-jqa3xf30gl] {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.offer h1[b-jqa3xf30gl] {
    font-size: 30px;
}

.credit[b-jqa3xf30gl] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--status-done-soft);
    color: var(--status-done);
}

.credit span[b-jqa3xf30gl] {
    color: var(--text);
}

.bring[b-jqa3xf30gl] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.bring li[b-jqa3xf30gl] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.bring li[b-jqa3xf30gl]  svg,
.bring li[b-jqa3xf30gl]  i {
    margin-top: 3px;
    color: var(--muted);
}

.again[b-jqa3xf30gl] {
    justify-self: center;
    font-size: 14px;
}

.help[b-jqa3xf30gl] {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}
/* /Components/Public/StatusPage.razor.rz.scp.css */
.page[b-aviuq6watn] {
    display: grid;
    gap: 14px;
    max-width: 480px;
    margin: 0 auto;
}

/* The store's mark and name: these pages are the shop's, never OnSite's. */
.shop[b-aviuq6watn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 2px;
}

.shop .mark[b-aviuq6watn] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-fill) 30%, transparent);
}

.shop div[b-aviuq6watn] {
    display: grid;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.shop b[b-aviuq6watn] {
    font-size: 16px;
}

.shop div span[b-aviuq6watn] {
    color: var(--muted);
    font-size: 13px;
}


.card-surface[b-aviuq6watn] {
    display: grid;
    gap: 14px;
    padding: 20px;
    border-radius: 16px;
    animation: fade-up 0.35s var(--ease-out) backwards;
}

h2[b-aviuq6watn] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.card-surface p[b-aviuq6watn] {
    margin: 0;
}

/* The device, drawn a little larger. */

/* Where the repair is: the same four steps the staff see, in customer words. */
.now-head[b-aviuq6watn] {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.now-head h2[b-aviuq6watn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.now-head[b-aviuq6watn]  .confetti {
    left: 40px;
    top: 10px;
}

.stepper .when.hold[b-aviuq6watn] {
    color: var(--status-waiting);
    font-weight: 600;
}

.since[b-aviuq6watn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.dot[b-aviuq6watn] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--status-progress);
    animation: pulse-dot 1.8s infinite;
}

.dot.done[b-aviuq6watn] {
    background: var(--status-done);
}

.dot.waiting[b-aviuq6watn] {
    background: var(--status-waiting);
}

.now.ready[b-aviuq6watn] {
    border-color: transparent;
    background: var(--status-done-soft);
}

.now.ready h2[b-aviuq6watn] {
    color: var(--status-done);
}

/* The warranty: green, with the end date and a bar of the time left. */

.lookup[b-aviuq6watn] {
    display: grid;
    gap: 16px;
}

.lookup h1[b-aviuq6watn] {
    margin: 0;
    font-size: 24px;
    letter-spacing: -0.02em;
}

.lookup .lede[b-aviuq6watn] {
    color: var(--muted);
}

.lookup .form-control[b-aviuq6watn] {
    height: 48px;
    font-size: 17px;
}

.lookup .btn-primary[b-aviuq6watn],
.now .btn[b-aviuq6watn] {
    min-height: 48px;
}

.device-name[b-aviuq6watn] {
    margin: 0;
    font-size: 21px;
    text-wrap: balance;
}

.promised[b-aviuq6watn] {
    font-size: 14px;
}

.links[b-aviuq6watn] {
    display: grid;
    gap: 10px;
}

.again[b-aviuq6watn] {
    justify-self: center;
    font-size: 14px;
}

.help[b-aviuq6watn] {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}
/* /Components/PurchaseOrders/MobileSentrixOrderCard.razor.rz.scp.css */
.ms-card[b-jmk9ivtcg5] {
    display: grid;
    gap: 12px;
    padding: 14px var(--pad, 20px) 16px;
}

.card-head[b-jmk9ivtcg5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ms-card h2[b-jmk9ivtcg5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ms-lines[b-jmk9ivtcg5] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ms-lines li[b-jmk9ivtcg5] {
    display: grid;
    gap: 2px;
    font-size: 14px;
}

.ms-line-name[b-jmk9ivtcg5] {
    font-weight: 600;
}

.ms-line-problem[b-jmk9ivtcg5] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--status-problem);
    font-size: 13.5px;
}

.ms-order[b-jmk9ivtcg5] {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.ms-order-head[b-jmk9ivtcg5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ms-waiting[b-jmk9ivtcg5] {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--status-waiting-soft, var(--bg));
}

.ms-waiting b[b-jmk9ivtcg5] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ms-candidates[b-jmk9ivtcg5] {
    display: grid;
    gap: 6px;
}

.ms-candidate[b-jmk9ivtcg5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
/* /Components/PurchaseOrders/OrderNowDialog.razor.rz.scp.css */
.order-now[b-o7jygugdqo] {
    display: grid;
    gap: 14px;
}

.field[b-o7jygugdqo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.hint[b-o7jygugdqo] {
    font-weight: 400;
    color: var(--muted);
}

.trio[b-o7jygugdqo] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.choices[b-o7jygugdqo] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.choices legend[b-o7jygugdqo] {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
}

.choice[b-o7jygugdqo] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 14px;
    cursor: pointer;
}

.choice.on[b-o7jygugdqo] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
}

.choice input[b-o7jygugdqo] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent-fill);
}

.choice small[b-o7jygugdqo] {
    display: block;
    color: var(--muted);
}

@media (max-width: 640px) {
    .trio[b-o7jygugdqo] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Quotes/QuoteDiscountField.razor.rz.scp.css */
.add-discount[b-l4jcyfmta0] {
    justify-self: start;
}

.quote-discount[b-l4jcyfmta0] {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.discount-head[b-l4jcyfmta0] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.discount-head b[b-l4jcyfmta0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.discount-head .link-button[b-l4jcyfmta0] {
    margin-left: auto;
}

/* Name, amount and percent-or-dollars on one line; stacked on a phone. */
.discount-fields[b-l4jcyfmta0] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(90px, 0.7fr) auto;
    gap: 10px 12px;
    align-items: end;
}

@media (max-width: 599px) {
    .discount-fields[b-l4jcyfmta0] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .discount-fields[b-l4jcyfmta0]  .discount-name {
        grid-column: 1 / -1;
    }
}
/* /Components/Quotes/RecordAnswerDialog.razor.rz.scp.css */
.answer-form[b-sflclj4o13] {
    display: grid;
    gap: 12px;
}

.answer-form p[b-sflclj4o13] {
    margin: 0;
}

.answer-form .modal-actions[b-sflclj4o13] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 4px -22px -20px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
}

.optional-picks[b-sflclj4o13] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}
/* /Components/Quotes/SendQuoteDialog.razor.rz.scp.css */
.send-quote[b-ifgt12q8oe] {
    display: grid;
    gap: 12px;
}

.send-quote p[b-ifgt12q8oe] {
    margin: 0;
}

/* Text and email side by side, each with where it goes. */
.channels[b-ifgt12q8oe] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.channel[b-ifgt12q8oe] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.channel:has(input:checked)[b-ifgt12q8oe] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
}

.channel.off[b-ifgt12q8oe] {
    opacity: 0.6;
    cursor: default;
}

.channel > span[b-ifgt12q8oe] {
    display: grid;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.channel b[b-ifgt12q8oe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.channel .form-check-input[b-ifgt12q8oe] {
    margin-top: 3px;
}

@media (max-width: 599px) {
    .channels[b-ifgt12q8oe] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The buttons sit in the dialog's foot. */
.modal-actions[b-ifgt12q8oe] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 4px -22px -20px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
}
/* /Components/Reports/AccountantView.razor.rz.scp.css */
.accountant[b-8qf7m0ph2g] {
    display: grid;
    gap: 14px;
}

.accountant p[b-8qf7m0ph2g] {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.dates[b-8qf7m0ph2g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.presets[b-8qf7m0ph2g] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.actions[b-8qf7m0ph2g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

@media (max-width: 599px) {
    .dates[b-8qf7m0ph2g] {
        grid-template-columns: minmax(0, 1fr);
    }

    .actions .btn[b-8qf7m0ph2g] {
        width: 100%;
    }
}
/* /Components/Reports/ActivityView.razor.rz.scp.css */
.columns[b-grq1zfzwcy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--gap);
    align-items: start;
}

.table-card[b-grq1zfzwcy] {
    padding-top: 16px;
}

.card-head[b-grq1zfzwcy] {
    margin-bottom: 6px;
}

.table-wrap[b-grq1zfzwcy] {
    padding: 4px 8px 8px;
}

.grid tbody tr[b-grq1zfzwcy] {
    cursor: default;
}

.person[b-grq1zfzwcy] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.foot-note[b-grq1zfzwcy] {
    margin: 0 0 14px;
}

@media (max-width: 599px) {
    .columns[b-grq1zfzwcy] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Reports/BarList.razor.rz.scp.css */
.bar-list[b-j28wq3h6iq] {
    display: grid;
    gap: 10px;
}

.bar-list + .bar-list[b-j28wq3h6iq] {
    margin-top: 10px;
}

.title[b-j28wq3h6iq] {
    font-size: 13px;
    font-weight: 600;
}

.row[b-j28wq3h6iq] {
    display: grid;
    grid-template-columns: minmax(90px, 36%) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.label[b-j28wq3h6iq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A rounded 8px bar on surface-2, like the workload bars on Overview. */
.track[b-j28wq3h6iq] {
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.fill[b-j28wq3h6iq] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent-fill);
    transform-origin: left;
    animation: slide-b-j28wq3h6iq 0.8s var(--ease-out) both;
    transition: filter 0.15s;
}

.row:hover .fill[b-j28wq3h6iq] {
    filter: brightness(1.2);
}

.value[b-j28wq3h6iq] {
    min-width: 76px;
    font-weight: 500;
    text-align: right;
}

.bar-list p[b-j28wq3h6iq] {
    margin: 0;
}

@keyframes slide-b-j28wq3h6iq {
    from {
        transform: scaleX(0);
    }
}

@media (max-width: 479px) {
    .row[b-j28wq3h6iq] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .track[b-j28wq3h6iq] {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}
/* /Components/Reports/BusinessHealthView.razor.rz.scp.css */
.period[b-xditftovd6] {
    margin: -6px 0 0;
}

.tiles[b-xditftovd6] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

.columns[b-xditftovd6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap);
    align-items: start;
}

.owing[b-xditftovd6] {
    display: grid;
    gap: 14px;
}

@media (max-width: 899px) {
    .tiles[b-xditftovd6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .tiles[b-xditftovd6] {
        gap: 10px;
    }
}
/* /Components/Reports/ColumnChart.razor.rz.scp.css */
.column-chart[b-r0pwujwm0p] {
    display: grid;
    gap: 10px;
    margin: 0;
}

figcaption[b-r0pwujwm0p] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.title[b-r0pwujwm0p] {
    font-size: 16px;
    font-weight: 600;
}

.total[b-r0pwujwm0p] {
    font-size: 15px;
    font-weight: 700;
}

.total .muted[b-r0pwujwm0p] {
    font-size: 13px;
    font-weight: 400;
}

.plot[b-r0pwujwm0p] {
    position: relative;
    display: grid;
    gap: 6px;
}

.top[b-r0pwujwm0p] {
    color: var(--muted);
    font-size: 12px;
}

/* A hairline at the top marks the highest value; the baseline sits under the columns. */
.bars[b-r0pwujwm0p] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 170px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(var(--border), var(--border)) 0 0 / 100% 1px no-repeat;
}

.bar-slot[b-r0pwujwm0p] {
    position: relative;
    display: flex;
    flex: 1;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    min-width: 0;
    border-radius: 4px;
    cursor: default;
}

.bar[b-r0pwujwm0p] {
    width: min(70%, 16px);
    min-width: 2px;
    border-radius: 4px 4px 1px 1px;
    background: var(--accent-fill);
    transform-origin: bottom;
    animation: grow-b-r0pwujwm0p 0.7s var(--ease-out) both;
    transition: filter 0.15s;
}

.bar-slot:hover .bar[b-r0pwujwm0p] {
    filter: brightness(1.2);
}

/* The value for each column, on hover. */
.bar-slot:hover[b-r0pwujwm0p]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    z-index: 2;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--toast-bg);
    color: var(--toast-fg);
    box-shadow: var(--overlay-shadow);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
    animation: fade-up 0.15s var(--ease-out);
}

/* Near the edges the tip leans inwards so it stays on screen. */
.bar-slot:nth-child(-n + 3):hover[b-r0pwujwm0p]::after {
    left: 0;
    transform: none;
}

.bar-slot:nth-last-child(-n + 3):hover[b-r0pwujwm0p]::after {
    left: auto;
    right: 0;
    transform: none;
}

.axis[b-r0pwujwm0p] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
}

.numbers summary[b-r0pwujwm0p] {
    width: max-content;
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.numbers .table-wrap[b-r0pwujwm0p] {
    max-height: 240px;
    margin-top: 8px;
    overflow-y: auto;
}

.numbers tbody tr[b-r0pwujwm0p] {
    cursor: default;
}

.nothing[b-r0pwujwm0p] {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 36px 16px;
    color: var(--muted);
    font-size: 14px;
}

.nothing[b-r0pwujwm0p]  i {
    font-size: 26px;
    color: var(--border);
    animation: float 3s ease-in-out infinite;
}

@keyframes grow-b-r0pwujwm0p {
    from {
        transform: scaleY(0);
    }
}

@media (max-width: 599px) {
    .bars[b-r0pwujwm0p] {
        height: 130px;
        gap: 1px;
    }
}
/* /Components/Reports/CustomersReportView.razor.rz.scp.css */
.tiles[b-4s5fixzjhx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}

.table-card[b-4s5fixzjhx] {
    padding-top: 16px;
}

.lapsed-head[b-4s5fixzjhx] {
    flex-wrap: wrap;
}

/* How overdue counts as overdue, in a sentence you can change. */
.tune[b-4s5fixzjhx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 10px 0 4px;
    font-size: 13px;
    color: var(--muted);
}

.tune input[b-4s5fixzjhx] {
    width: 76px;
    min-height: 30px;
}

.table-wrap[b-4s5fixzjhx] {
    padding: 8px 8px 8px;
}

@media (max-width: 1199px) {
    .tiles[b-4s5fixzjhx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .tiles[b-4s5fixzjhx] {
        gap: 10px;
    }
}
/* /Components/Reports/DateSpanForm.razor.rz.scp.css */
.date-span[b-aoyfjkauj3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

.date-span input[b-aoyfjkauj3] {
    width: 150px;
    min-height: 32px;
}

@media (max-width: 599px) {
    .date-span[b-aoyfjkauj3] {
        width: 100%;
    }

    .date-span input[b-aoyfjkauj3] {
        flex: 1 1 120px;
        width: auto;
        min-width: 0;
    }
}
/* /Components/Reports/EndOfDayView.razor.rz.scp.css */
.day-bar[b-mofv4gvd57] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* A day back or forward with the arrows, or any day from the picker. */
.day-step[b-mofv4gvd57] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.step[b-mofv4gvd57] {
    width: 32px;
    padding: 0;
}

.step.disabled[b-mofv4gvd57] {
    opacity: 0.45;
    pointer-events: none;
}

.day-name[b-mofv4gvd57] {
    min-width: 190px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    animation: fade-up 0.25s var(--ease-out);
}

.day-form[b-mofv4gvd57] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.day-form input[b-mofv4gvd57] {
    width: 150px;
    min-height: 32px;
}

.tiles[b-mofv4gvd57] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}

.columns[b-mofv4gvd57] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--gap);
    align-items: start;
}

.money[b-mofv4gvd57] {
    padding-top: 16px;
}

.money .table-wrap[b-mofv4gvd57] {
    padding: 8px;
}

.stack-card[b-mofv4gvd57] {
    display: grid;
    gap: 14px;
}

.grid tbody tr[b-mofv4gvd57] {
    cursor: default;
}

.grid tfoot td[b-mofv4gvd57] {
    padding: 11px 14px;
    border-top: 1px solid var(--border);
    font-weight: 600;
}

.facts[b-mofv4gvd57] {
    grid-template-columns: 130px minmax(0, 1fr);
}

.small[b-mofv4gvd57] {
    font-size: 13px;
}

@media (max-width: 1199px) {
    .tiles[b-mofv4gvd57] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .tiles[b-mofv4gvd57] {
        gap: 10px;
    }

    .day-name[b-mofv4gvd57] {
        min-width: 0;
        flex: 1;
    }

    .day-form[b-mofv4gvd57] {
        width: 100%;
    }

    .day-form input[b-mofv4gvd57] {
        flex: 1;
        width: auto;
    }
}
/* /Components/Reports/LabourView.razor.rz.scp.css */
.tiles[b-3qmh9ckmz2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

.table-card[b-3qmh9ckmz2] {
    padding-top: 16px;
}

.card-head[b-3qmh9ckmz2] {
    margin-bottom: 6px;
}

.table-wrap[b-3qmh9ckmz2] {
    padding: 4px 8px 8px;
}

.grid tbody tr[b-3qmh9ckmz2] {
    cursor: default;
}

.person[b-3qmh9ckmz2] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.who[b-3qmh9ckmz2] {
    color: var(--muted);
    font-size: 13px;
}

.running[b-3qmh9ckmz2] {
    margin-left: 4px;
    color: var(--status-done);
    font-size: 12px;
}

@media (max-width: 899px) {
    .tiles[b-3qmh9ckmz2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .tiles[b-3qmh9ckmz2] {
        gap: 10px;
    }
}
/* /Components/Reports/ReceivablesView.razor.rz.scp.css */
.buckets[b-uz65vsdrj1] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

/* An age band you can tap; the chosen one fills accent-soft. */
.bucket[b-uz65vsdrj1] {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    color: var(--text);
    text-decoration: none;
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring), background-color 0.15s, border-color 0.15s, box-shadow 0.2s;
}

.bucket:hover[b-uz65vsdrj1] {
    transform: translateY(-2px);
    box-shadow: var(--lift-shadow);
    text-decoration: none;
}

.bucket span[b-uz65vsdrj1] {
    color: var(--muted);
    font-weight: 500;
}

.bucket b[b-uz65vsdrj1] {
    font-size: 17px;
    font-weight: 700;
}

.bucket.zero b[b-uz65vsdrj1] {
    color: var(--muted);
    font-weight: 600;
}

.bucket.on[b-uz65vsdrj1] {
    border-color: transparent;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

.bucket.on span[b-uz65vsdrj1],
.bucket.on b[b-uz65vsdrj1] {
    color: var(--accent-soft-fg);
}

.table-card[b-uz65vsdrj1] {
    padding-top: 16px;
}

.head[b-uz65vsdrj1] {
    flex-wrap: wrap;
}

.as-of[b-uz65vsdrj1] {
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
}

.table-wrap[b-uz65vsdrj1] {
    padding: 8px;
}

@media (max-width: 1199px) {
    .buckets[b-uz65vsdrj1] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    .buckets[b-uz65vsdrj1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Reports/ReportLoading.razor.rz.scp.css */
.report-loading[b-r340wcpla3] {
    display: grid;
    gap: var(--gap);
}

.tiles[b-r340wcpla3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--gap);
}

.tile[b-r340wcpla3] {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.short[b-r340wcpla3] {
    width: 50%;
}

.tall[b-r340wcpla3] {
    height: 26px;
}

.chart[b-r340wcpla3] {
    padding: var(--pad);
}

.chart .skeleton[b-r340wcpla3] {
    height: 180px;
    border-radius: var(--radius);
}
/* /Components/Reports/ReportRangeBar.razor.rz.scp.css */
.range-bar[b-quoiwj2n7v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.chips[b-quoiwj2n7v] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.custom[b-quoiwj2n7v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.custom input[b-quoiwj2n7v] {
    width: 150px;
    min-height: 32px;
}

@media (max-width: 599px) {
    .custom[b-quoiwj2n7v] {
        width: 100%;
    }

    .custom input[b-quoiwj2n7v] {
        flex: 1 1 120px;
        width: auto;
        min-width: 0;
    }
}
/* /Components/Reports/StatTile.razor.rz.scp.css */
.stat-tile[b-9tbzvkb3i2] {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 16px 18px;
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}

.stat-tile:hover[b-9tbzvkb3i2] {
    transform: translateY(-2px);
    box-shadow: var(--lift-shadow);
}

.stat-tile:hover[b-9tbzvkb3i2]  .icon-tile {
    animation: bounce 0.5s var(--ease-spring);
}

.label[b-9tbzvkb3i2] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.label[b-9tbzvkb3i2]  .icon-tile.sm {
    width: 30px;
    height: 30px;
    font-size: 13px;
}

.value[b-9tbzvkb3i2] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    animation: count-in 0.6s var(--ease-out);
}

.change[b-9tbzvkb3i2],
.note[b-9tbzvkb3i2] {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
}

.change[b-9tbzvkb3i2]  i {
    font-size: 11px;
}

.change.better[b-9tbzvkb3i2] {
    color: var(--status-done);
    font-weight: 500;
}

.change.worse[b-9tbzvkb3i2] {
    color: var(--status-problem);
    font-weight: 500;
}
/* /Components/Reports/TaxReportView.razor.rz.scp.css */
.bar[b-aqcb01h8pl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

p[b-aqcb01h8pl] {
    margin: -6px 0 0;
}

.table-card[b-aqcb01h8pl] {
    padding-top: 16px;
}

.table-wrap[b-aqcb01h8pl] {
    padding: 8px;
}

.grid tbody tr[b-aqcb01h8pl] {
    cursor: default;
}

.grid tfoot td[b-aqcb01h8pl] {
    padding: 11px 14px;
    border-top: 1px solid var(--border);
    font-weight: 600;
}

.foot-note[b-aqcb01h8pl] {
    margin: 0 0 16px;
}
/* /Components/ServiceOrders/ServiceOrderActivity.razor.rz.scp.css */
.activity[b-chwqrom17k] {
    display: grid;
    gap: 14px;
}

/* The note box: write, attach, flag, add. */
.composer[b-chwqrom17k] {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.composer:focus-within[b-chwqrom17k] {
    border-color: var(--accent-fill);
    box-shadow: var(--focus-ring);
}

.composer textarea[b-chwqrom17k] {
    resize: vertical;
    min-height: 64px;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 4px 6px;
}

.composer textarea:focus[b-chwqrom17k] {
    box-shadow: none;
    background: transparent;
}

.composer-row[b-chwqrom17k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.composer-files[b-chwqrom17k] {
    flex: 1 1 180px;
    min-width: 0;
}

.flag-chip.on[b-chwqrom17k] {
    background: var(--status-problem-soft);
    color: var(--status-problem);
}

.flag-chip[b-chwqrom17k]  i {
    font-size: 11px;
}

.field-error[b-chwqrom17k] {
    color: var(--status-problem);
    font-size: 13px;
    font-weight: 600;
}

.feed[b-chwqrom17k] {
    display: grid;
    gap: 12px;
}

/* Notes as speech bubbles; your own sit on the right in the accent (DESIGN.md §8 Activity feed). */
.note[b-chwqrom17k] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: end;
    max-width: 760px;
    animation: fade-up 0.3s var(--ease-out);
}

.note .avatar[b-chwqrom17k] {
    width: 32px;
    height: 32px;
}

.note.mine[b-chwqrom17k] {
    grid-template-columns: minmax(0, 1fr) 32px;
    justify-self: end;
}

.note.mine .avatar[b-chwqrom17k] {
    grid-column: 2;
    grid-row: 1;
}

.note.mine .bubble[b-chwqrom17k] {
    grid-column: 1;
    grid-row: 1;
    border-color: transparent;
    border-radius: 14px 14px 4px 14px;
    background: var(--accent-soft);
}

.bubble[b-chwqrom17k] {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 6px 8px 11px 13px;
    border: 1px solid var(--bubble-border);
    border-radius: 14px 14px 14px 4px;
    background: var(--bubble);
}

/* Pinned stays on top, tinted, so nobody misses it. */
.bubble.pinned[b-chwqrom17k],
.note.mine .bubble.pinned[b-chwqrom17k] {
    border-color: color-mix(in srgb, var(--status-waiting) 35%, transparent);
    background: var(--status-waiting-soft);
}

.bubble.fresh[b-chwqrom17k] {
    animation: fresh-b-chwqrom17k 3.2s ease-out;
}

@keyframes fresh-b-chwqrom17k {
    0%, 35% { background: var(--accent-soft); border-color: var(--accent-fill); }
}

.bubble p[b-chwqrom17k] {
    margin: 0;
    padding-right: 5px;
    font-size: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.meta[b-chwqrom17k] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    min-height: 30px;
    font-size: 12px;
    color: var(--muted);
}

.meta b[b-chwqrom17k] {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.pinned-label[b-chwqrom17k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--status-waiting);
}

.new-label[b-chwqrom17k] {
    font-size: 11px;
    font-weight: 700;
    color: var(--on-accent);
    background: var(--accent-fill);
    border-radius: 999px;
    padding: 1px 7px;
    animation: bounce 0.5s var(--ease-spring);
}

.note-actions[b-chwqrom17k] {
    display: inline-flex;
    margin-left: auto;
}

.note-actions .icon-button[b-chwqrom17k] {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.note-editor[b-chwqrom17k] {
    display: grid;
    gap: 8px;
    padding-right: 5px;
}

.note-editor textarea[b-chwqrom17k] {
    resize: vertical;
}

.note-editor .field-error[b-chwqrom17k] {
    padding-top: 0;
}

.confirm-row[b-chwqrom17k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-right: 5px;
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 13px;
}

.confirm-row > span[b-chwqrom17k] {
    flex: 1 1 180px;
}

@media (prefers-reduced-motion: reduce) {
    .bubble.fresh[b-chwqrom17k] {
        animation: none;
        background: var(--accent-soft);
    }
}

/* A flagged note keeps the order on Needs action until the flag is cleared. */
.bubble.flagged[b-chwqrom17k] {
    border-left: 3px solid var(--status-problem);
}

.flagged-label[b-chwqrom17k] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--status-problem);
}

.icon-button.on[b-chwqrom17k] {
    color: var(--status-waiting);
}

.icon-button.flag.on[b-chwqrom17k] {
    color: var(--status-problem);
}

@media (max-width: 599px) {
    .note[b-chwqrom17k],
    .note.mine[b-chwqrom17k] {
        max-width: none;
    }
}

/* Messages with the customer and status changes, between the notes (DESIGN.md §8 Activity feed). */
.entry[b-chwqrom17k] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    max-width: 760px;
    animation: fade-up 0.3s var(--ease-out);
}

.entry-icon[b-chwqrom17k] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
}

/* A message is a dashed bubble, labelled with how it went and who sent it. */
.said[b-chwqrom17k] {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 4px 12px 10px 13px;
    border: 1.5px dashed var(--border);
    border-radius: 14px 14px 14px 4px;
}

.said.unread[b-chwqrom17k] {
    border-color: var(--accent-fill);
    background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

.said .subject[b-chwqrom17k] {
    font-size: 13px;
    font-weight: 600;
}

/* Long emails stay short here; Messages shows them in full. */
.said p[b-chwqrom17k] {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* A status change is one compact line with a small coloured icon. */
.entry.event[b-chwqrom17k] {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    font-size: 13px;
}

.entry.event[b-chwqrom17k]  .icon-tile {
    justify-self: center;
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.event-text[b-chwqrom17k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
}

.event-text b[b-chwqrom17k] {
    font-weight: 600;
}

.event .when[b-chwqrom17k] {
    white-space: nowrap;
}

.entry.earlier[b-chwqrom17k] {
    grid-template-columns: 32px minmax(0, 1fr);
}

@media (max-width: 599px) {
    .entry[b-chwqrom17k] {
        max-width: none;
    }

    .entry.event[b-chwqrom17k] {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .event .when[b-chwqrom17k] {
        grid-column: 2;
        margin-top: -6px;
    }
}
/* /Components/ServiceOrders/ServiceOrderAppointmentCard.razor.rz.scp.css */
.booked[b-3s8ynhhhy8] {
    display: grid;
    gap: 2px;
}

.when[b-3s8ynhhhy8] {
    font-size: 15px;
    font-weight: 700;
}

.time[b-3s8ynhhhy8] {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
}

.booked .muted[b-3s8ynhhhy8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.cancel[b-3s8ynhhhy8] {
    justify-self: start;
    font-size: 12.5px;
}

.small[b-3s8ynhhhy8] {
    margin: 0;
    font-size: 12.5px;
}

.book[b-3s8ynhhhy8] {
    padding: 12px;
    border-radius: var(--radius);
    background: var(--surface-2);
}

.book-fields[b-3s8ynhhhy8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.people[b-3s8ynhhhy8] {
    display: grid;
    gap: 10px;
}

.person[b-3s8ynhhhy8] {
    display: grid;
    gap: 4px;
    font-size: 13.5px;
}

.slots[b-3s8ynhhhy8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.slot[b-3s8ynhhhy8] {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 12.5px;
    cursor: pointer;
}

.slot:hover[b-3s8ynhhhy8] {
    border-color: var(--accent-fill);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}
/* /Components/ServiceOrders/ServiceOrderItemsCard.razor.rz.scp.css */
.items[b-w7yjymaxa5] {
    display: grid;
    gap: 12px;
}

.panel-head[b-w7yjymaxa5] {
    justify-content: space-between;
}

.lead[b-w7yjymaxa5] {
    margin-right: auto;
}

.small[b-w7yjymaxa5] {
    font-size: 13px;
}

/* ---------- Adding: the price book as tappable rows, or a line typed by hand ---------- */

.adder[b-w7yjymaxa5] {
    display: grid;
    gap: 14px;
}

.wide-filter[b-w7yjymaxa5] {
    width: 100%;
}

.service-list[b-w7yjymaxa5] {
    display: grid;
    gap: 6px;
    max-height: min(420px, 50vh);
    overflow-y: auto;
    padding: 2px;
}

.service[b-w7yjymaxa5] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 30px;
    gap: 12px;
    align-items: center;
    min-height: 52px;
    padding: 8px 10px 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, transform 0.15s var(--ease-spring);
}

.service:hover[b-w7yjymaxa5],
.service:focus-visible[b-w7yjymaxa5] {
    border-color: var(--accent-fill);
    background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
}

.service:active[b-w7yjymaxa5] {
    transform: scale(0.98);
}

.service:disabled[b-w7yjymaxa5] {
    opacity: 0.6;
    cursor: wait;
}

.service-icon[b-w7yjymaxa5] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 14px;
}

.service-text[b-w7yjymaxa5] {
    display: grid;
    min-width: 0;
}

.service-text b[b-w7yjymaxa5] {
    font-size: 14px;
    font-weight: 600;
}

.service-text span[b-w7yjymaxa5] {
    font-size: 12px;
    color: var(--muted);
}

.price[b-w7yjymaxa5] {
    font-size: 14px;
    font-weight: 600;
}

.add-icon[b-w7yjymaxa5] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 12px;
    transition: transform 0.25s var(--ease-spring);
}

.service:hover .add-icon[b-w7yjymaxa5] {
    transform: rotate(90deg);
}

/* A service priced by quality tier: added at the tier picked, so the row itself isn't a button. */
.service.tiered[b-w7yjymaxa5] {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    cursor: default;
}

.service.tiered:hover[b-w7yjymaxa5] {
    border-color: var(--border);
    background: var(--surface);
}

.service.tiered:active[b-w7yjymaxa5] {
    transform: none;
}

.tier-buttons[b-w7yjymaxa5] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.tier-buttons .num[b-w7yjymaxa5] {
    font-weight: 600;
}

/* No price for this model: it goes on to be quoted. */
.quote[b-w7yjymaxa5] {
    color: var(--status-waiting);
}

.save-for-model .form-check-label[b-w7yjymaxa5] {
    display: grid;
    gap: 2px;
}

.save-for-model small[b-w7yjymaxa5] {
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 599px) {
    .service.tiered[b-w7yjymaxa5] {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .tier-buttons[b-w7yjymaxa5] {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

.number-fields[b-w7yjymaxa5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* ---------- Lines ---------- */

.table-wrap[b-w7yjymaxa5] {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

table.lines[b-w7yjymaxa5] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.lines th[b-w7yjymaxa5] {
    text-align: left;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    padding: 9px 14px;
    background: var(--surface-2);
    white-space: nowrap;
}

.lines th:first-child[b-w7yjymaxa5] {
    border-radius: var(--radius-lg) 0 0 0;
}

.lines th:last-child[b-w7yjymaxa5] {
    border-radius: 0 var(--radius-lg) 0 0;
}

.lines td[b-w7yjymaxa5] {
    padding: 11px 14px;
    border-top: 1px solid var(--border);
    vertical-align: top;
}

.lines td b[b-w7yjymaxa5] {
    font-weight: 600;
}

.lines .r[b-w7yjymaxa5] {
    text-align: right;
}

.lines .amount[b-w7yjymaxa5] {
    font-weight: 600;
}

.lines small[b-w7yjymaxa5] {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.lines .actions-cell[b-w7yjymaxa5] {
    width: 1%;
    padding: 4px 8px 4px 0;
    white-space: nowrap;
    vertical-align: middle;
}

.lines tr.editing td[b-w7yjymaxa5] {
    background: var(--surface-2);
}

.line-editor[b-w7yjymaxa5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.line-editor[b-w7yjymaxa5]  .wide,
.line-editor .wide[b-w7yjymaxa5] {
    grid-column: 1 / -1;
}

.confirm-row[b-w7yjymaxa5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.confirm-row > span[b-w7yjymaxa5] {
    flex: 1 1 220px;
}

/* ---------- Money: what to do on the left, the sums on the right ---------- */

.money[b-w7yjymaxa5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.money-side[b-w7yjymaxa5] {
    display: grid;
    gap: 10px;
    flex: 1 1 260px;
    min-width: 0;
}

.money-actions[b-w7yjymaxa5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.totals[b-w7yjymaxa5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 5px 24px;
    align-items: center;
    flex: 0 1 380px;
    margin-left: auto;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    font-size: 14px;
}

.totals .num[b-w7yjymaxa5] {
    text-align: right;
}

.deposit[b-w7yjymaxa5] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.deposit .icon-button[b-w7yjymaxa5] {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.totals .confirm-row[b-w7yjymaxa5] {
    grid-column: 1 / -1;
    padding: 8px 10px;
    border-radius: var(--radius);
    background: var(--surface);
}

.due[b-w7yjymaxa5] {
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.deposit-fields[b-w7yjymaxa5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.deposit-fields[b-w7yjymaxa5]  .wide {
    grid-column: 1 / -1;
}

/* ---------- Billing ---------- */

.billed[b-w7yjymaxa5] {
    display: grid;
    gap: 4px;
}

.billed-box[b-w7yjymaxa5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 14px;
    font-weight: 600;
}

.billed-text[b-w7yjymaxa5] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

@media (max-width: 599px) {
    .line-editor[b-w7yjymaxa5],
    .number-fields[b-w7yjymaxa5],
    .deposit-fields[b-w7yjymaxa5] {
        grid-template-columns: minmax(0, 1fr);
    }

    .service[b-w7yjymaxa5] {
        grid-template-columns: minmax(0, 1fr) auto 30px;
    }

    .service-icon[b-w7yjymaxa5] {
        display: none;
    }

    .totals[b-w7yjymaxa5] {
        flex-basis: 100%;
    }

    /* Phones: each line is a small card. Name and actions on top, "qty × price" and amount below. */
    .table-wrap[b-w7yjymaxa5] {
        border: 0;
    }

    table.lines[b-w7yjymaxa5],
    .lines tbody[b-w7yjymaxa5] {
        display: block;
    }

    .lines thead[b-w7yjymaxa5] {
        display: none;
    }

    .lines tbody tr[b-w7yjymaxa5] {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        column-gap: 8px;
        row-gap: 2px;
        align-items: center;
        padding: 10px 2px;
        border-bottom: 1px solid var(--border);
    }

    .lines tbody td[b-w7yjymaxa5] {
        display: block;
        padding: 0;
        border: 0;
    }

    .lines tbody td:first-child[b-w7yjymaxa5] {
        grid-column: 1 / 4;
    }

    .lines tbody td.actions-cell[b-w7yjymaxa5] {
        grid-column: 4;
        grid-row: 1 / 3;
        padding: 0;
    }

    /* Placed explicitly, so rows without an actions cell (a locked list) line up the same. */
    .lines tbody td:nth-child(2)[b-w7yjymaxa5] {
        grid-row: 2;
        grid-column: 1;
    }

    .lines tbody td:nth-child(2)[b-w7yjymaxa5]::after {
        content: " ×";
    }

    .lines tbody td:nth-child(3)[b-w7yjymaxa5] {
        grid-row: 2;
        grid-column: 2;
    }

    .lines tbody td:nth-child(4)[b-w7yjymaxa5] {
        grid-row: 2;
        grid-column: 3;
    }

    .lines tbody tr.editing[b-w7yjymaxa5] {
        display: block;
        padding: 0;
    }

    .lines tbody tr.editing td[b-w7yjymaxa5] {
        padding: 10px;
    }
}

/* ---------- The approval asked for: waiting, approved, declined or expired ---------- */

.approval[b-w7yjymaxa5] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 14px;
}

.approval[b-w7yjymaxa5]  i {
    margin-top: 3px;
}

.approval-waiting[b-w7yjymaxa5] {
    background: var(--status-waiting-soft);
}

.approval-waiting[b-w7yjymaxa5] >  i {
    color: var(--status-waiting);
}

.approval-done[b-w7yjymaxa5] {
    background: var(--status-done-soft);
}

.approval-done[b-w7yjymaxa5] >  i {
    color: var(--status-done);
}

.approval-problem[b-w7yjymaxa5] {
    background: var(--status-problem-soft);
}

.approval-problem[b-w7yjymaxa5] >  i {
    color: var(--status-problem);
}

.approval-text[b-w7yjymaxa5] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.approval-text q[b-w7yjymaxa5] {
    font-style: italic;
}

.approval .changed[b-w7yjymaxa5],
.approval .with-icon[b-w7yjymaxa5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.approval .changed[b-w7yjymaxa5] {
    color: var(--status-waiting);
}

/* Record the customer's answer when they gave it at the counter or on the phone. */
.approval-answer[b-w7yjymaxa5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 6px;
}

.approval-answer[b-w7yjymaxa5]  i {
    margin-top: 0;
}

/* Ask for approval: the lines the customer may leave out. */
.ask-optional[b-w7yjymaxa5] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}
/* /Components/ServiceOrders/ServiceOrderJobPanel.razor.rz.scp.css */
/* The job inside the Checks & photos tab: no card of its own. */
.job[b-tjoaignsrm] {
    display: grid;
    gap: 12px;
    padding: 0;
}

.job-title[b-tjoaignsrm] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
}

.job-title h3[b-tjoaignsrm] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.job-title .btn[b-tjoaignsrm],
.job-title .small[b-tjoaignsrm] {
    margin-left: auto;
}

.checks-title[b-tjoaignsrm] {
    margin-top: 6px;
}

.problem[b-tjoaignsrm] {
    margin: 0;
    padding: 10px 14px;
    border-left: 3px solid var(--border);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--surface-2);
    font-size: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.job-facts[b-tjoaignsrm] {
    grid-template-columns: max-content minmax(0, 1fr);
}

.late[b-tjoaignsrm] {
    color: var(--status-problem);
    font-weight: 600;
}

.small[b-tjoaignsrm] {
    font-size: 13px;
}

/* Drop-off checks: problems in red with a cross, working ones in green with a tick. */
.check[b-tjoaignsrm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.check.working[b-tjoaignsrm] {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.check.not-working[b-tjoaignsrm] {
    background: var(--status-problem-soft);
    color: var(--status-problem);
}

.check[b-tjoaignsrm]  i {
    font-size: 10px;
}

.card-form textarea[b-tjoaignsrm] {
    resize: vertical;
}

.two[b-tjoaignsrm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.chip-field[b-tjoaignsrm] {
    display: grid;
    gap: 8px;
    align-content: start;
}

.form-actions.end[b-tjoaignsrm] {
    justify-content: flex-end;
}

@media (max-width: 599px) {
    .two[b-tjoaignsrm] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/ServiceOrders/ServiceOrderLabourCard.razor.rz.scp.css */
.card-head[b-w44on006qd]  .labour-total {
    font-size: 15px;
    font-weight: 700;
}

/* The viewer's own running timer: the thing to stop when the repair goes down. */
.my-timer[b-w44on006qd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    animation: fade-up 0.25s var(--ease-out);
}

.my-timer .what[b-w44on006qd] {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.my-timer .what .muted[b-w44on006qd] {
    color: inherit;
    opacity: 0.85;
}

.my-timer[b-w44on006qd]  .big {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.dot[b-w44on006qd] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-done);
    animation: labour-pulse-b-w44on006qd 2.4s infinite;
}

.start-row[b-w44on006qd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.small[b-w44on006qd] {
    font-size: 13px;
}

.none[b-w44on006qd] {
    margin: 0;
}

.people[b-w44on006qd] {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

summary[b-w44on006qd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-radius: var(--radius);
    cursor: pointer;
    list-style: none;
}

summary[b-w44on006qd]::-webkit-details-marker {
    display: none;
}

summary:hover[b-w44on006qd] {
    background: var(--surface-2);
}

.who[b-w44on006qd] {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

summary[b-w44on006qd]  .person-total {
    font-weight: 600;
}

.entries[b-w44on006qd] {
    display: grid;
    gap: 2px;
    margin: 2px 0 6px 38px;
    padding: 0;
    list-style: none;
}

.entries li[b-w44on006qd] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    font-size: 13px;
}

.entries .when[b-w44on006qd] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--muted);
}

.entries li.running .when[b-w44on006qd] {
    color: var(--status-done);
    font-weight: 500;
}

.entries[b-w44on006qd]  .length {
    font-weight: 500;
}

@keyframes labour-pulse-b-w44on006qd {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-done) 55%, transparent);
    }

    70%,
    100% {
        box-shadow: 0 0 0 7px transparent;
    }
}
/* /Components/ServiceOrders/ServiceOrderLoanerCard.razor.rz.scp.css */
.loan[b-1v8ytw7dib] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
    transition: background-color 0.15s;
}

.loan:hover[b-1v8ytw7dib] {
    background: var(--accent-soft);
    text-decoration: none;
}

.tag-number[b-1v8ytw7dib] {
    color: var(--status-progress);
    font-weight: 700;
}

.what[b-1v8ytw7dib] {
    display: grid;
    min-width: 0;
}

.small[b-1v8ytw7dib] {
    font-size: 13px;
}

.none[b-1v8ytw7dib] {
    margin: 0;
}

.print[b-1v8ytw7dib] {
    justify-self: start;
    gap: 6px;
    font-size: 13px;
}
/* /Components/ServiceOrders/ServiceOrderMessagesCard.razor.rz.scp.css */
.messages-card[b-26t9o8z2ja] {
    display: grid;
    gap: 12px;
}

.panel-head[b-26t9o8z2ja] {
    flex-wrap: wrap;
}

.lead[b-26t9o8z2ja] {
    flex: 1 1 200px;
    margin-right: auto;
}

/* Notify customer: the channel, the standard words and a note, with a preview of what they'll get. */
.notify[b-26t9o8z2ja] {
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--border);
    animation: fade-up 0.25s var(--ease-out);
}

.small[b-26t9o8z2ja] {
    margin: 0;
    font-size: 13px;
}

.switch-row[b-26t9o8z2ja] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

/* The message as the customer will read it: a speech bubble from the shop. */
.preview[b-26t9o8z2ja] {
    display: grid;
    gap: 4px;
    justify-self: end;
    max-width: min(520px, 100%);
    padding: 10px 14px;
    border-radius: 14px 14px 4px 14px;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

.preview p[b-26t9o8z2ja] {
    margin: 0;
    font-size: 14px;
    white-space: pre-wrap;
}

.preview .sub-head[b-26t9o8z2ja] {
    color: inherit;
    opacity: 0.8;
}

.list[b-26t9o8z2ja] {
    max-height: 520px;
    overflow-y: auto;
}
/* /Components/ServiceOrders/ServiceOrderPartsCard.razor.rz.scp.css */
.parts[b-b8a5dd99n1] {
    display: grid;
    gap: 12px;
}

.parts-head[b-b8a5dd99n1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 30px;
}

.small[b-b8a5dd99n1] {
    font-size: 13px;
}

.adder[b-b8a5dd99n1] {
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--border);
    animation: fade-up 0.25s var(--ease-out);
}

.three[b-b8a5dd99n1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
}

.requests[b-b8a5dd99n1] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.requests li:last-child .list-row[b-b8a5dd99n1] {
    border-bottom: 0;
}

.what[b-b8a5dd99n1] {
    flex: 1;
    display: grid;
    min-width: 0;
    font-size: 14px;
}

.what .muted[b-b8a5dd99n1] {
    font-size: 13px;
}

.number[b-b8a5dd99n1] {
    font-weight: 600;
}

.list-row[b-b8a5dd99n1] >  .fa-chevron-right {
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s var(--ease-spring);
}

.list-row:hover[b-b8a5dd99n1] >  .fa-chevron-right {
    transform: translateX(3px);
}

@media (max-width: 599px) {
    .three[b-b8a5dd99n1] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/ServiceOrders/ServiceOrderSignatureCard.razor.rz.scp.css */
/* Inside the Checks & photos tab: no card of its own. */
.signature-card[b-6qb5h2aq3z] {
    padding: 0;
    gap: 10px;
}

.sign-title[b-6qb5h2aq3z] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
}

.sign-title h3[b-6qb5h2aq3z] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.small[b-6qb5h2aq3z] {
    font-size: 13px;
}

/* White behind the black ink in both themes, as on paper. */
.signature[b-6qb5h2aq3z] {
    width: 100%;
    max-width: 360px;
    height: 110px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #ffffff;
}
/* /Components/ServiceOrders/ServiceOrderStatusDialog.razor.rz.scp.css */
.status-dialog[b-plkq9dz56x] {
    display: grid;
    gap: 16px;
}

.moved[b-plkq9dz56x] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
    font-size: 13px;
    font-weight: 600;
    animation: shake 0.4s;
}

.moved[b-plkq9dz56x]  i {
    margin-top: 3px;
}

/* Work performed: asked for when a repair goes on the pickup shelf. */
.work-editor[b-plkq9dz56x] {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--surface-2);
    animation: fade-up 0.25s var(--ease-out);
}

.work-editor textarea[b-plkq9dz56x] {
    resize: vertical;
}

.two[b-plkq9dz56x] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.switch-row[b-plkq9dz56x] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.switch-row > span[b-plkq9dz56x] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.switch-row .form-check-input[b-plkq9dz56x] {
    margin-top: 2px;
}

.preview[b-plkq9dz56x] {
    color: var(--muted);
    font-size: 13px;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.status-row[b-plkq9dz56x] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    width: 100%;
}

.field-error[b-plkq9dz56x] {
    color: var(--status-problem);
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 599px) {
    .two[b-plkq9dz56x] {
        grid-template-columns: minmax(0, 1fr);
    }

    .status-row .btn-primary[b-plkq9dz56x] {
        flex: 1;
    }
}

/* Bootstrap's switch look, without its float layout. */
.switch[b-plkq9dz56x] {
    display: inline-flex;
    margin: 0;
    padding: 0;
    min-height: 0;
}

.switch .form-check-input[b-plkq9dz56x] {
    float: none;
    margin: 2px 0 0;
    cursor: pointer;
}
/* /Components/ServiceOrders/ServiceOrderWarrantyCard.razor.rz.scp.css */
/* Inside the Warranty tab: no card of its own. */
.warranty-card[b-evzssyc0q2] {
    padding: 0;
    gap: 14px;
}

.covered[b-evzssyc0q2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--status-done-soft);
}

.covered-text[b-evzssyc0q2] {
    display: grid;
    flex: 1 1 220px;
    min-width: 0;
    font-size: 13px;
    color: var(--status-done);
}

.covered-text b[b-evzssyc0q2] {
    color: var(--text);
    font-size: 15px;
}

.claim[b-evzssyc0q2] {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.claim-head[b-evzssyc0q2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
}

.small[b-evzssyc0q2] {
    font-size: 13px;
}

.claims[b-evzssyc0q2] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.claims li[b-evzssyc0q2] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "number what pill"
        "number when pill";
    gap: 0 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.claims li:last-child[b-evzssyc0q2] {
    border-bottom: 0;
}

.claims .num[b-evzssyc0q2] {
    grid-area: number;
    font-weight: 600;
}

.claims .what[b-evzssyc0q2] {
    grid-area: what;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.claims .small[b-evzssyc0q2] {
    grid-area: when;
}

.claims li > :last-child[b-evzssyc0q2] {
    grid-area: pill;
}
/* /Components/ServiceOrders/SignaturePad.razor.rz.scp.css */
.signature-pad[b-n8grbce69a] {
    display: grid;
    gap: 8px;
}

.pad-area[b-n8grbce69a] {
    position: relative;
}

/* White paper in both themes: the signature prints in black. */
.pad[b-n8grbce69a] {
    display: block;
    width: 100%;
    height: 180px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    background: #ffffff;
    touch-action: none;
    cursor: crosshair;
}

.baseline[b-n8grbce69a] {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 31px;
    padding-top: 4px;
    border-top: 1px solid #9aa0aa;
    color: #6b7180;
    font-size: 11px;
    pointer-events: none;
}

/* The × at the end of the line, in the paper's own greys. */
.line-clear[b-n8grbce69a] {
    position: absolute;
    right: 10px;
    bottom: 40px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #d5d8de;
    border-radius: 50%;
    background: #ffffff;
    color: #6b7180;
    font-size: 15px;
    animation: pop-in-b-n8grbce69a 0.25s var(--ease-spring);
}

.line-clear:hover[b-n8grbce69a] {
    color: #111318;
    border-color: #9aa0aa;
}

.save[b-n8grbce69a]  .fa-spinner {
    animation: spin 0.8s linear infinite;
}

@keyframes pop-in-b-n8grbce69a {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
}

.clear-on-line .baseline[b-n8grbce69a] {
    right: 56px;
}
/* /Components/Settings/AppointmentSettingsCard.razor.rz.scp.css */
.services td[b-ktsrg2sxbx] {
    vertical-align: middle;
}

.services td.num[b-ktsrg2sxbx] {
    white-space: nowrap;
}

.services tr.retired td[b-ktsrg2sxbx] {
    opacity: 0.55;
}

.services tr.retired td.actions[b-ktsrg2sxbx] {
    opacity: 1;
}

.description[b-ktsrg2sxbx] {
    display: block;
    max-width: 48ch;
}

.where-tags[b-ktsrg2sxbx] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.actions[b-ktsrg2sxbx] {
    width: 1%;
}

.row-actions[b-ktsrg2sxbx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}

.divider[b-ktsrg2sxbx] {
    height: 1px;
    margin: 4px 0;
    background: var(--border);
}

.step-row[b-ktsrg2sxbx] {
    max-width: 420px;
}

.customers-heading[b-ktsrg2sxbx] {
    margin: 0;
}

/* Reminders and the customer's own changes, side by side where there's room. */
.customer-row[b-ktsrg2sxbx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    align-items: start;
}

/* The booking page's address, to copy or open. */
.booking-link[b-ktsrg2sxbx] {
    display: grid;
    gap: 6px;
}

.link-row[b-ktsrg2sxbx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.link-row code[b-ktsrg2sxbx] {
    padding: 6px 10px;
    border-radius: var(--radius);
    background: var(--surface-2);
    overflow-wrap: anywhere;
}

.services[b-ktsrg2sxbx]  .tag {
    margin-left: 6px;
    vertical-align: 2px;
}

.service-form[b-ktsrg2sxbx] {
    display: grid;
    gap: 14px;
}

.where-choices[b-ktsrg2sxbx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.who-choices[b-ktsrg2sxbx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.check[b-ktsrg2sxbx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.two[b-ktsrg2sxbx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.price[b-ktsrg2sxbx] {
    max-width: 180px;
}

.switch-row[b-ktsrg2sxbx] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.switch-row > span[b-ktsrg2sxbx] {
    display: grid;
    gap: 2px;
}

@media (max-width: 599px) {
    .two[b-ktsrg2sxbx] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The places on-site visits go: a chip each, removed one at a time, and a box to add the next. Or the area,
   drawn on a map. */
.area-places[b-ktsrg2sxbx],
.area-outline[b-ktsrg2sxbx] {
    display: grid;
    gap: 10px;
}

.place-list[b-ktsrg2sxbx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.place[b-ktsrg2sxbx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: 14px;
    font-weight: 500;
}

.place[b-ktsrg2sxbx]  .fa-location-dot {
    color: var(--accent);
    font-size: 12px;
}

.place-remove[b-ktsrg2sxbx] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
}

.place-remove:hover:not(:disabled)[b-ktsrg2sxbx] {
    background: var(--status-problem-soft);
    color: var(--status-problem);
}

.place-remove:disabled[b-ktsrg2sxbx] {
    opacity: 0.35;
    cursor: default;
}

.add-place[b-ktsrg2sxbx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 12px;
}

.add-place[b-ktsrg2sxbx]  .form-field {
    flex: 1 1 260px;
    max-width: 420px;
}

/* Level with the box, under its label. */
.add-place .btn[b-ktsrg2sxbx] {
    margin-top: 27px;
}
/* /Components/Settings/BillingCard.razor.rz.scp.css */
.summary[b-5fu8b0p786] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.facts[b-5fu8b0p786] {
    flex: 1;
    grid-template-columns: 110px minmax(0, 1fr);
}

.facts > div[b-5fu8b0p786] {
    display: contents;
}

.manage[b-5fu8b0p786] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.note-callout[b-5fu8b0p786] {
    margin: 0;
}

.code[b-5fu8b0p786] {
    display: grid;
    gap: 8px;
    max-width: 440px;
}

.code-row[b-5fu8b0p786] {
    display: flex;
    gap: 8px;
}

.code-row input[b-5fu8b0p786] {
    min-width: 0;
    text-transform: uppercase;
}

.code-row input[b-5fu8b0p786]::placeholder {
    text-transform: none;
}

/* What a code gives, before it's applied. */
.preview[b-5fu8b0p786] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 13px;
    animation: fade-up 0.3s var(--ease-spring);
}

.preview span[b-5fu8b0p786] {
    flex: 1 1 200px;
}

/* The other plan, and the switch to it. */
.switch[b-5fu8b0p786] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 14px;
}

.switch > span[b-5fu8b0p786] {
    flex: 1 1 260px;
}

.full[b-5fu8b0p786] {
    color: var(--status-waiting);
    font-weight: 600;
}

@media (max-width: 599px) {
    .summary[b-5fu8b0p786] {
        flex-direction: column;
        padding: 14px;
    }

    .facts[b-5fu8b0p786] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px 0;
    }

    .facts dd[b-5fu8b0p786] {
        margin-bottom: 8px;
    }
}
/* /Components/Settings/BusinessSettingsCard.razor.rz.scp.css */
.split[b-x639mx1gct] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 20px;
    align-items: start;
}

/* A little printed sheet that fills in as you type, tilted until you point at it. */
.paper[b-x639mx1gct] {
    margin: 0;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.paper figcaption[b-x639mx1gct] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
}

.sheet[b-x639mx1gct] {
    display: flex;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    transform: rotate(-1.2deg);
    transition: transform 0.35s var(--ease-spring), box-shadow 0.2s;
}

.paper:hover .sheet[b-x639mx1gct] {
    transform: none;
    box-shadow: var(--lift-shadow);
}

.mark[b-x639mx1gct] {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--navy);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
}

.lines[b-x639mx1gct] {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.lines b[b-x639mx1gct] {
    color: var(--text);
    font-size: 15px;
    line-height: 1.25;
}

.tax em[b-x639mx1gct] {
    font-style: normal;
    opacity: 0.7;
}

@media (max-width: 1199px) {
    .split[b-x639mx1gct] {
        grid-template-columns: minmax(0, 1fr);
    }

    .paper[b-x639mx1gct] {
        max-width: 360px;
    }
}

/* The logo: add, change or remove it, under the preview. */
.logo-row[b-x639mx1gct] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.logo-row .muted[b-x639mx1gct] {
    flex: 1 1 260px;
}

/* Where customers find the store (MapPreview), from the saved address. */
[b-x639mx1gct] .store-map {
    max-width: 360px;
    margin-top: 12px;
}
/* /Components/Settings/BusinessStoresCard.razor.rz.scp.css */
.stores[b-rd06pve55p] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stores li[b-rd06pve55p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
    border-radius: 6px;
    transition: background-color 0.15s, padding 0.2s var(--ease-out);
}

.stores li:last-child[b-rd06pve55p] {
    border-bottom: 0;
}

.stores li:hover[b-rd06pve55p] {
    background: var(--surface-2);
    padding-inline: 10px;
}

.stores li.closed[b-rd06pve55p] {
    opacity: 0.6;
}

/* The store's short code in a soft tile, like WS on WS-1042. */
.store-code[b-rd06pve55p] {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: transform 0.25s var(--ease-spring);
}

.stores li:hover .store-code[b-rd06pve55p] {
    transform: rotate(-6deg) scale(1.05);
}

.closed .store-code[b-rd06pve55p] {
    background: var(--surface-2);
    color: var(--muted);
}

.store-text[b-rd06pve55p] {
    display: grid;
    gap: 2px;
    flex: 1 1 140px;
    min-width: 0;
}

.name[b-rd06pve55p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.closed-stores summary[b-rd06pve55p] {
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.closed-stores[open] summary[b-rd06pve55p] {
    margin-bottom: 6px;
}

.closed-stores .stores li[b-rd06pve55p] {
    padding-block: 8px;
}

.closed-stores .store-code[b-rd06pve55p] {
    width: 54px;
    height: 36px;
}

.body[b-rd06pve55p] {
    margin: 0;
}

/* The cost of one more location, in the dialog's foot, before the store is made. */
.cost[b-rd06pve55p] {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 14px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--text);
    font-size: 13px;
    animation: fade-up 0.25s var(--ease-out);
}

.cost-text[b-rd06pve55p] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 260px;
}

.cost-text[b-rd06pve55p]  i {
    color: var(--accent-soft-fg);
}
/* /Components/Settings/BuyingSettingsCard.razor.rz.scp.css */
.price-table[b-nt7evph9rh] {
    display: grid;
    gap: 8px;
    overflow-x: auto;
}

.price-row[b-nt7evph9rh] {
    display: grid;
    grid-template-columns: 130px minmax(90px, 1fr) minmax(120px, 1.4fr) 100px repeat(4, 84px) 36px;
    gap: 6px;
    align-items: center;
    min-width: 820px;
}

.price-row.head[b-nt7evph9rh] {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.price-row.head .grade[b-nt7evph9rh] {
    text-align: center;
}

.price-row.invalid[b-nt7evph9rh]  .form-control,
.price-row.invalid .form-select[b-nt7evph9rh] {
    border-color: var(--status-problem);
}

.switch-row[b-nt7evph9rh] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.switch-row > span[b-nt7evph9rh] {
    display: grid;
    gap: 2px;
}
/* /Components/Settings/CardPaymentsCard.razor.rz.scp.css */
.note-callout[b-xlo5v80sgh] {
    margin: 0;
}

.body[b-xlo5v80sgh] {
    margin: 0;
}
/* /Components/Settings/CardReadersCard.razor.rz.scp.css */
.readers[b-g5zyown4tu] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.readers li[b-g5zyown4tu] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.reader-icon[b-g5zyown4tu] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

.reader-text[b-g5zyown4tu] {
    display: grid;
    flex: 1;
    min-width: 0;
}

.add[b-g5zyown4tu] {
    display: grid;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.add h3[b-g5zyown4tu] {
    margin: 0;
    font-size: 15px;
}

.add p[b-g5zyown4tu] {
    margin: 0;
}

.address[b-g5zyown4tu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 12px;
}
/* /Components/Settings/CommunicationSettingsCard.razor.rz.scp.css */
.channels[b-7i6kr9vivk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Whether email and texting can go out: green when set up, amber when not yet. */
.channel[b-7i6kr9vivk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
    font-size: 12px;
    font-weight: 600;
}

.channel.ready[b-7i6kr9vivk] {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.switches[b-7i6kr9vivk] {
    display: grid;
}

.split[b-7i6kr9vivk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

.fields[b-7i6kr9vivk] {
    display: grid;
    gap: 14px;
}

/* How a text reads: the real wording in a chat bubble, signed as typed. */
.phone[b-7i6kr9vivk] {
    margin: 0;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.phone figcaption[b-7i6kr9vivk] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
}

.bubble[b-7i6kr9vivk] {
    padding: 10px 12px;
    border-radius: 16px 16px 4px 16px;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-size: 13px;
    line-height: 1.45;
    animation: bubble-in-b-7i6kr9vivk 0.4s var(--ease-spring);
}

.signature[b-7i6kr9vivk] {
    display: block;
    margin-top: 4px;
    opacity: 0.85;
    animation: bubble-in-b-7i6kr9vivk 0.3s var(--ease-spring);
}

@keyframes bubble-in-b-7i6kr9vivk {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.96);
    }
}

@media (max-width: 1199px) {
    .split[b-7i6kr9vivk] {
        grid-template-columns: minmax(0, 1fr);
    }

    .phone[b-7i6kr9vivk] {
        max-width: 380px;
    }
}

/* Which statuses email or text the customer: a status per row, a switch per way. */
.status-table[b-7i6kr9vivk] {
    display: grid;
    margin: 4px 0 4px 46px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: opacity 0.2s;
}

.status-table.off[b-7i6kr9vivk] {
    opacity: 0.5;
}

.status-row[b-7i6kr9vivk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px 72px;
    gap: 8px;
    align-items: center;
    padding: 6px 14px;
    border-top: 1px solid var(--border);
    font-size: 14px;
}

.status-row.head[b-7i6kr9vivk] {
    border-top: 0;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.status-row > span:not(:first-child)[b-7i6kr9vivk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-left: 0;
}

.status-row .form-check-input[b-7i6kr9vivk] {
    margin: 0;
}

.status-hint[b-7i6kr9vivk] {
    margin: 0;
    padding: 8px 14px 10px;
    border-top: 1px solid var(--border);
}

@media (max-width: 560px) {
    .status-table[b-7i6kr9vivk] {
        margin-left: 0;
    }

    .status-row[b-7i6kr9vivk] {
        grid-template-columns: minmax(0, 1fr) 52px 52px;
        padding: 6px 10px;
    }
}

/* When pickup reminders go, under their switch. */
.pickup-row[b-7i6kr9vivk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    align-items: start;
    margin-left: 46px;
}

.pickup-row.off[b-7i6kr9vivk] {
    opacity: 0.5;
}

@media (max-width: 640px) {
    .pickup-row[b-7i6kr9vivk] {
        margin-left: 0;
    }
}
/* /Components/Settings/CompletionCodesEditor.razor.rz.scp.css */
.codes td[b-m7yxqyc1ik] {
    vertical-align: middle;
}

.codes tr.retired td[b-m7yxqyc1ik] {
    opacity: 0.55;
}

.codes tr.retired td.actions[b-m7yxqyc1ik] {
    opacity: 1;
}

/* The number staff look it up by, in a soft tile. */
.code-number[b-m7yxqyc1ik] {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 13px;
    font-weight: 700;
    transition: transform 0.25s var(--ease-spring);
}

.codes tbody tr:hover .code-number[b-m7yxqyc1ik] {
    transform: scale(1.08) rotate(-4deg);
}

.actions[b-m7yxqyc1ik] {
    width: 1%;
}

.row-actions[b-m7yxqyc1ik] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}

.code-form[b-m7yxqyc1ik] {
    display: grid;
    gap: 14px;
}

.code-fields[b-m7yxqyc1ik] {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px 14px;
}

.rate[b-m7yxqyc1ik] {
    max-width: 180px;
}

@media (max-width: 599px) {
    /* The table scrolls sideways inside its card rather than squeezing the names. */
    .codes[b-m7yxqyc1ik] {
        min-width: 560px;
    }

    .code-fields[b-m7yxqyc1ik] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .rate[b-m7yxqyc1ik] {
        max-width: none;
    }
}
/* /Components/Settings/ImportCard.razor.rz.scp.css */
.connect[b-kyfxbrsxsl],
.preview[b-kyfxbrsxsl],
.outcome[b-kyfxbrsxsl] {
    display: grid;
    gap: 14px;
}

h3[b-kyfxbrsxsl] {
    margin: 6px 0 0;
    font-size: 15px;
}

.working[b-kyfxbrsxsl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--bg);
    font-size: 15px;
}

.map[b-kyfxbrsxsl] {
    display: grid;
    gap: 8px;
}

.map-row[b-kyfxbrsxsl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
    gap: 12px;
    align-items: center;
}

.matches[b-kyfxbrsxsl],
.differs[b-kyfxbrsxsl] {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
}

.matches[b-kyfxbrsxsl] {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.differs[b-kyfxbrsxsl] {
    background: var(--status-problem-soft);
    color: var(--status-problem);
}

.todo[b-kyfxbrsxsl] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
}

@media (max-width: 560px) {
    .map-row[b-kyfxbrsxsl] {
        grid-template-columns: 1fr;
    }
}

.source[b-kyfxbrsxsl] {
    justify-self: start;
}
/* /Components/Settings/InvoicingSettingsCard.razor.rz.scp.css */
.rows[b-lvv0ufv00e] {
    display: grid;
    gap: 8px;
}

.row-edit[b-lvv0ufv00e] {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    animation: fade-up 0.25s var(--ease-out);
}

.remove:hover[b-lvv0ufv00e] {
    color: var(--status-problem);
}

.none[b-lvv0ufv00e] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* Who besides owners refunds and cancels: a switch per role. */
.limit[b-lvv0ufv00e] {
    max-width: 260px;
}

.role-grid[b-lvv0ufv00e] {
    display: grid;
    grid-template-columns: 150px repeat(2, 96px);
    justify-content: start;
    gap: 10px 12px;
    align-items: center;
}

.role-grid b[b-lvv0ufv00e] {
    font-size: 13px;
    color: var(--muted);
}

.role-grid .form-switch[b-lvv0ufv00e] {
    margin: 0;
}

/* Ways to pay: on or off, and what the store calls each. */
.methods[b-lvv0ufv00e] {
    display: grid;
    gap: 8px;
}

.method-row[b-lvv0ufv00e] {
    display: grid;
    grid-template-columns: auto 150px minmax(0, 260px);
    justify-content: start;
    gap: 12px;
    align-items: center;
}

.method-row .form-switch[b-lvv0ufv00e] {
    margin: 0;
}

.method-name[b-lvv0ufv00e] {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-weight: 600;
}

.method-name[b-lvv0ufv00e]  i {
    width: 16px;
    color: var(--muted);
    text-align: center;
}

.method-row.off .method-name[b-lvv0ufv00e] {
    color: var(--muted);
}

@media (max-width: 560px) {
    .method-row[b-lvv0ufv00e] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .method-row input.form-control[b-lvv0ufv00e] {
        grid-column: 2;
    }
}
/* /Components/Settings/LabelPrinterCard.razor.rz.scp.css */
.state[b-ulcjrd143v] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}

.dot[b-ulcjrd143v] {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--muted);
}

.dot.on[b-ulcjrd143v] {
    background: var(--status-done);
}

.actions[b-ulcjrd143v] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* /Components/Settings/LabelSettingsCard.razor.rz.scp.css */
.label-kinds[b-jcak947fyb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 20px 24px;
}

.label-kind[b-jcak947fyb] {
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
}

.kind-head[b-jcak947fyb] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kind-head b[b-jcak947fyb] {
    flex: 1;
}

/* The label as it prints: white with a hairline edge, in either theme. Wider than the column, it shrinks. */
.preview[b-jcak947fyb]  svg {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid #b9bcc4;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.12);
}
/* /Components/Settings/MessageWordingCard.razor.rz.scp.css */
/* Each message as it reads now, grouped, with Change. */
.group[b-5geymlzga4] {
    margin: 4px 0 0;
}

.wordings[b-5geymlzga4] {
    display: grid;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    list-style: none;
    overflow: hidden;
}

.wordings li[b-5geymlzga4] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
}

.wordings li + li[b-5geymlzga4] {
    border-top: 1px solid var(--border);
}

.what[b-5geymlzga4] {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.words[b-5geymlzga4] {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* The editor: the words and their placeholders beside a phone's view of the text. */
.editor[b-5geymlzga4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
    align-items: start;
}

.write[b-5geymlzga4] {
    display: grid;
    gap: 10px;
}

.placeholders[b-5geymlzga4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.placeholder[b-5geymlzga4] {
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-num);
    font-size: 12px;
    cursor: pointer;
}

.placeholder:hover[b-5geymlzga4] {
    border-color: var(--accent);
}

.phone[b-5geymlzga4] {
    display: grid;
    gap: 8px;
    margin: 0;
}

.phone figcaption[b-5geymlzga4] {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    color: var(--muted);
    font-size: 13px;
}

.bubble[b-5geymlzga4] {
    padding: 10px 12px;
    border-radius: 16px 16px 16px 4px;
    background: var(--accent-fill);
    color: var(--on-accent);
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.count[b-5geymlzga4] {
    margin: 0;
}

@media (max-width: 760px) {
    .editor[b-5geymlzga4] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Settings/MobileSentrixCard.razor.rz.scp.css */
/* Not connected: what connecting does, and the one button that does it. */
.connect[b-mye76748dk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 16px;
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}

.connect-text[b-mye76748dk] {
    display: grid;
    gap: 2px;
    flex: 1 1 260px;
    min-width: 0;
}

.find[b-mye76748dk] {
    margin-left: auto;
}

.find-unused[b-mye76748dk]  i {
    transition: transform 0.5s var(--ease-spring);
}

.find-unused:hover[b-mye76748dk]  i {
    transform: rotate(180deg);
}

.reading[b-mye76748dk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.reading[b-mye76748dk]  i {
    animation: spin 0.8s linear infinite;
}

.grid-map[b-mye76748dk] {
    display: grid;
    grid-template-columns: minmax(120px, 200px) minmax(0, 340px);
    gap: 8px 14px;
    align-items: center;
}

.grid-map .field-label[b-mye76748dk] {
    margin: 0;
}

.disconnect[b-mye76748dk] {
    display: flex;
    justify-content: flex-start;
}

.disconnect .btn:hover[b-mye76748dk] {
    color: var(--status-problem);
}

.body[b-mye76748dk] {
    margin: 0;
}

code[b-mye76748dk] {
    font-size: 12px;
}

@media (max-width: 599px) {
    .grid-map[b-mye76748dk] {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .grid-map select[b-mye76748dk] {
        margin-bottom: 8px;
    }

    .sync[b-mye76748dk] {
        margin-left: 0;
    }
}

.narrow[b-mye76748dk] {
    max-width: 320px;
}
/* /Components/Settings/PriceBookEditor.razor.rz.scp.css */
.tab-panel[b-f29joln76l] {
    display: grid;
    gap: 12px;
    padding-top: 2px;
}

/* Only the chosen tab shows; the others keep what was typed in them. */
.tab-panel[hidden][b-f29joln76l] {
    display: none;
}

.panel-bar[b-f29joln76l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-height: 32px;
}

.panel-bar h3[b-f29joln76l] {
    flex: 1 1 240px;
    margin: 0;
    font-weight: 400;
}

.import[b-f29joln76l] {
    cursor: pointer;
}

.book[b-f29joln76l],
.checks[b-f29joln76l],
.models[b-f29joln76l] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- Services ---------- */

.book li[b-f29joln76l] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
    border-radius: 6px;
    transition: background-color 0.15s, padding 0.2s var(--ease-out);
}

.book li:last-child[b-f29joln76l] {
    border-bottom: 0;
}

.book li:hover[b-f29joln76l] {
    background: var(--surface-2);
    padding-inline: 10px;
}

.book li.retired[b-f29joln76l] {
    opacity: 0.6;
}

.what[b-f29joln76l] {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.what .small[b-f29joln76l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.price[b-f29joln76l] {
    display: grid;
    justify-items: end;
    font-weight: 600;
}

.price .small[b-f29joln76l] {
    font-weight: 400;
}

.row-actions[b-f29joln76l] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ---------- Drop-off checks: numbered, in the order the counter asks them ---------- */

.checks[b-f29joln76l] {
    counter-reset: check;
}

.checks li[b-f29joln76l] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 4px;
    border-bottom: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    transition: background-color 0.15s;
}

.checks li:hover[b-f29joln76l] {
    background: var(--surface-2);
}

.checks li[b-f29joln76l]::before {
    counter-increment: check;
    content: counter(check);
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.checks li:hover[b-f29joln76l]::before {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

.checks .what[b-f29joln76l] {
    flex: 1;
    display: block;
}

.checks .inline-form[b-f29joln76l] {
    flex: 1;
}

.add-row[b-f29joln76l] {
    display: flex;
    gap: 8px;
}

.add-row .form-control[b-f29joln76l] {
    flex: 1 1 160px;
    min-width: 0;
}

.retired-list[b-f29joln76l] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.retired-list .link-button[b-f29joln76l] {
    font-size: 13px;
}

/* ---------- Device models: chips you can take away ---------- */

.model-search[b-f29joln76l] {
    width: 100%;
}

.models[b-f29joln76l] {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.models li[b-f29joln76l] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 2px 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
    animation: fade-up 0.25s var(--ease-out);
}

.models li.nothing[b-f29joln76l] {
    padding: 0;
    border: 0;
}

.models .what[b-f29joln76l] {
    display: block;
    white-space: nowrap;
}

.models .icon-button[b-f29joln76l] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
}

.models .icon-button:hover[b-f29joln76l] {
    color: var(--status-problem);
    background: var(--status-problem-soft);
}

.import-result[b-f29joln76l] {
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 13px;
    animation: fade-up 0.3s var(--ease-out);
}

.import-result ul[b-f29joln76l] {
    margin: 6px 0 0;
    padding-left: 18px;
    color: var(--muted);
}

.tab-panel > p[b-f29joln76l] {
    margin: 0;
}

/* ---------- The service dialog ---------- */

.service-form[b-f29joln76l] {
    display: grid;
    gap: 14px;
}

.tier-prices[b-f29joln76l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px 14px;
}

/* ---------- Pricing options: a one-line summary, changed in a dialog ---------- */

.pricing-options[b-f29joln76l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--surface-2);
}

.pricing-options .small[b-f29joln76l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pricing-form[b-f29joln76l] {
    display: grid;
    gap: 12px;
}

.pricing-form .switch-row[b-f29joln76l] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 4px 0;
    cursor: pointer;
}

.pricing-form .switch-row > span[b-f29joln76l] {
    display: grid;
    gap: 2px;
}

.pricing-form .switch-row .form-check-input[b-f29joln76l] {
    margin-top: 2px;
}

.pricing-form p[b-f29joln76l] {
    margin: 0;
}

.tier-names[b-f29joln76l] {
    display: grid;
    gap: 8px;
    justify-items: start;
    padding-left: 44px;
}

.tier-name[b-f29joln76l] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 320px;
}

.tier-name .form-control[b-f29joln76l] {
    flex: 1 1 auto;
    min-width: 0;
}

.tier-number[b-f29joln76l] {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.model-prices[b-f29joln76l] {
    white-space: nowrap;
}

.two[b-f29joln76l] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

@media (max-width: 599px) {
    .book li[b-f29joln76l] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .book .row-actions[b-f29joln76l] {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .two[b-f29joln76l] {
        grid-template-columns: minmax(0, 1fr);
    }

    .models .what[b-f29joln76l] {
        white-space: normal;
    }
}
/* /Components/Settings/QuickBooksCard.razor.rz.scp.css */
/* Not connected: what connecting does, and the one button that does it. */
.connect[b-3l1te4wnva] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 16px;
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}

.connect-text[b-3l1te4wnva] {
    display: grid;
    gap: 2px;
    flex: 1 1 260px;
    min-width: 0;
}

.sync[b-3l1te4wnva] {
    margin-left: auto;
}

.sync[b-3l1te4wnva]  i {
    transition: transform 0.5s var(--ease-spring);
}

.sync:hover[b-3l1te4wnva]  i {
    transform: rotate(180deg);
}

.reading[b-3l1te4wnva] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.reading[b-3l1te4wnva]  i {
    animation: spin 0.8s linear infinite;
}

.grid-map[b-3l1te4wnva] {
    display: grid;
    grid-template-columns: minmax(120px, 200px) minmax(0, 340px);
    gap: 8px 14px;
    align-items: center;
}

.grid-map .field-label[b-3l1te4wnva] {
    margin: 0;
}

.disconnect[b-3l1te4wnva] {
    display: flex;
    justify-content: flex-start;
}

.disconnect .btn:hover[b-3l1te4wnva] {
    color: var(--status-problem);
}

.body[b-3l1te4wnva] {
    margin: 0;
}

code[b-3l1te4wnva] {
    font-size: 12px;
}

@media (max-width: 599px) {
    .grid-map[b-3l1te4wnva] {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .grid-map select[b-3l1te4wnva] {
        margin-bottom: 8px;
    }

    .sync[b-3l1te4wnva] {
        margin-left: 0;
    }
}
/* /Components/Settings/SaveBar.razor.rz.scp.css */
.save-bar[b-bnzsaz7zqa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.dirty[b-bnzsaz7zqa] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px;
    border-radius: var(--radius-pill);
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
    font-size: 12px;
    font-weight: 600;
    animation: pop-b-bnzsaz7zqa 0.3s var(--ease-spring);
}

.dirty[b-bnzsaz7zqa]  i {
    font-size: 10px;
    animation: pulse-dot 1.8s infinite;
}

.tick[b-bnzsaz7zqa] {
    display: inline-grid;
    animation: pop-b-bnzsaz7zqa 0.35s var(--ease-spring);
}

@keyframes pop-b-bnzsaz7zqa {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
}

@media (max-width: 599px) {
    .save-bar .btn-primary[b-bnzsaz7zqa],
    .save-bar .btn-success[b-bnzsaz7zqa] {
        flex: 1 1 auto;
    }
}
/* /Components/Settings/ServiceAreaMap.razor.rz.scp.css */
.area-drawing[b-mfrt9gd5r3] {
    display: grid;
    gap: 10px;
}

.area-map[b-mfrt9gd5r3] {
    height: 380px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-2);
    font-family: var(--font-ui);
    /* Leaflet's panes and controls stack up to 1000: keep them under the app's menus and dialogs. */
    isolation: isolate;
    z-index: 0;
}

.area-map.drawing[b-mfrt9gd5r3] {
    cursor: crosshair;
}

.area-help[b-mfrt9gd5r3] {
    margin: 0;
}

.area-drawing .form-actions[b-mfrt9gd5r3] {
    margin-top: 0;
}

/* The corners and the dots halfway along each side, made by the script inside the map. */
.area-map[b-mfrt9gd5r3]  .area-corner {
    border: 3px solid var(--accent);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow);
    cursor: move;
}

.area-map[b-mfrt9gd5r3]  .area-midpoint {
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--surface);
    opacity: 0.75;
    cursor: copy;
}

.area-map[b-mfrt9gd5r3]  .area-midpoint:hover {
    opacity: 1;
}

@media (max-width: 640px) {
    .area-map[b-mfrt9gd5r3] {
        height: 300px;
    }
}
/* /Components/Settings/ServiceOrderSettingsCard.razor.rz.scp.css */
.routes[b-b342lt4cee] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px 20px;
    transition: opacity 0.2s;
}

/* Routing off: the routes stay in view, greyed, so it's clear what turning it on does. */
.routes.off[b-b342lt4cee] {
    opacity: 0.5;
}

.route[b-b342lt4cee] {
    display: grid;
    grid-template-columns: 30px 100px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    font-size: 14px;
}

.type[b-b342lt4cee] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
    transition: transform 0.25s var(--ease-spring), color 0.15s, background-color 0.15s;
}

.routes:not(.off) .route:hover .type[b-b342lt4cee] {
    transform: rotate(-8deg) scale(1.08);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

@media (max-width: 599px) {
    .routes[b-b342lt4cee] {
        grid-template-columns: minmax(0, 1fr);
    }

    .route[b-b342lt4cee] {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .route select[b-b342lt4cee] {
        grid-column: 1 / -1;
    }
}

/* Turnaround targets: one short number per kind of job. */
.turnarounds[b-b342lt4cee] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px 20px;
    max-width: 760px;
}

.turnaround[b-b342lt4cee] {
    display: grid;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
}

.days[b-b342lt4cee] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.days input[b-b342lt4cee] {
    width: 84px;
    text-align: right;
}
/* /Components/Settings/SpreadsheetImportCard.razor.rz.scp.css */
.connect[b-xteasff2rg],
.preview[b-xteasff2rg],
.outcome[b-xteasff2rg] {
    display: grid;
    gap: 14px;
}

h3[b-xteasff2rg] {
    margin: 6px 0 0;
    font-size: 15px;
}

.working[b-xteasff2rg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--bg);
    font-size: 15px;
}

.map[b-xteasff2rg] {
    display: grid;
    gap: 8px;
}

.map-row[b-xteasff2rg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
    gap: 12px;
    align-items: center;
}

.matches[b-xteasff2rg],
.differs[b-xteasff2rg] {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
}

.matches[b-xteasff2rg] {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.differs[b-xteasff2rg] {
    background: var(--status-problem-soft);
    color: var(--status-problem);
}

.todo[b-xteasff2rg] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
}

@media (max-width: 560px) {
    .map-row[b-xteasff2rg] {
        grid-template-columns: 1fr;
    }
}

.kind[b-xteasff2rg] {
    justify-self: start;
}

.file-row[b-xteasff2rg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.narrow[b-xteasff2rg] {
    max-width: 280px;
}

.map-row > span[b-xteasff2rg] {
    display: grid;
    gap: 1px;
}

.sample[b-xteasff2rg],
.problems[b-xteasff2rg] {
    display: grid;
    gap: 4px;
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 14px;
}

.problems .num[b-xteasff2rg] {
    margin-right: 6px;
}
/* /Components/Settings/StaffEditor.razor.rz.scp.css */
.staff[b-m2e624yc7e] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.staff li[b-m2e624yc7e] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 160px auto;
    gap: 8px 14px;
    align-items: center;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
    border-radius: 6px;
    transition: background-color 0.15s, padding 0.2s var(--ease-out);
}

.staff li:last-child[b-m2e624yc7e] {
    border-bottom: 0;
}

/* Not while the row's own dialog is open over it. */
.staff li:hover:not(.removing)[b-m2e624yc7e] {
    background: var(--surface-2);
    padding-inline: 10px;
}

.staff li:hover:not(.removing) .avatar[b-m2e624yc7e] {
    animation: bounce 0.5s var(--ease-spring);
}

.who[b-m2e624yc7e] {
    display: grid;
    justify-items: start;
    gap: 2px;
    min-width: 0;
}

.who b[b-m2e624yc7e] {
    font-size: 14px;
}

.email[b-m2e624yc7e] {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Locked out, two-step sign-in: side by side, wrapping on a narrow row. */
.tags[b-m2e624yc7e] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.role[b-m2e624yc7e] {
    display: flex;
    justify-content: flex-end;
}

.row-actions[b-m2e624yc7e] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.icon-button.danger:hover[b-m2e624yc7e] {
    color: var(--status-problem);
    background: var(--status-problem-soft);
}

.body[b-m2e624yc7e] {
    margin: 0;
}

.staff-form[b-m2e624yc7e],
.edit-form[b-m2e624yc7e] {
    display: grid;
    gap: 14px;
}

.form-control[readonly][b-m2e624yc7e] {
    background: var(--surface-2);
    color: var(--muted);
}

.edit-form .divider[b-m2e624yc7e] {
    height: 1px;
    background: var(--border);
}

.two[b-m2e624yc7e] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

@media (max-width: 599px) {
    .staff li[b-m2e624yc7e] {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .role[b-m2e624yc7e] {
        grid-column: 2 / 3;
        justify-content: flex-start;
    }

    .role select[b-m2e624yc7e] {
        max-width: 180px;
    }

    .row-actions[b-m2e624yc7e] {
        grid-column: 3;
        grid-row: 1 / span 2;
        flex-direction: column;
    }

    .two[b-m2e624yc7e] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* What happens to their appointments when they go. */
.bookings[b-m2e624yc7e] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-top: 10px;
}

/* The plan's users in use; amber once they're all used. */
.users[b-m2e624yc7e] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.users[b-m2e624yc7e]  i {
    margin-top: 3px;
}

.users.full[b-m2e624yc7e] {
    color: var(--status-waiting);
    font-weight: 500;
}
/* /Components/Settings/StaffScheduleCard.razor.rz.scp.css */
.schedules td[b-ff5rn02kse] {
    vertical-align: middle;
}

.role[b-ff5rn02kse] {
    display: block;
}

.inline-switch[b-ff5rn02kse] {
    display: inline-flex;
    align-items: center;
}

.hours[b-ff5rn02kse] {
    color: var(--muted);
    font-size: 13.5px;
}

.actions[b-ff5rn02kse] {
    width: 1%;
    white-space: nowrap;
}

.divider[b-ff5rn02kse] {
    height: 1px;
    margin: 4px 0;
    background: var(--border);
}

.time-off[b-ff5rn02kse] {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.time-off .list-row[b-ff5rn02kse] {
    padding-inline: 8px;
}

.time-off .declined .row-text[b-ff5rn02kse] {
    opacity: 0.6;
}

.row-text[b-ff5rn02kse] {
    flex: 1;
    display: grid;
    min-width: 0;
    line-height: 1.35;
}

.row-actions[b-ff5rn02kse] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hours-form[b-ff5rn02kse] {
    display: grid;
    gap: 14px;
}

.days[b-ff5rn02kse] {
    display: grid;
    gap: 8px;
}

.day-row[b-ff5rn02kse] {
    display: grid;
    grid-template-columns: 110px 70px 130px auto 130px;
    align-items: center;
    gap: 10px;
}

.check[b-ff5rn02kse] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.switch-row[b-ff5rn02kse] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.switch-row > span[b-ff5rn02kse] {
    display: grid;
    gap: 2px;
}

@media (max-width: 599px) {
    .day-row[b-ff5rn02kse] {
        grid-template-columns: 1fr auto;
    }
}
/* /Components/Settings/StoreActivityCard.razor.rz.scp.css */
.toolbar[b-yfpoewx9d6] {
    margin: 0;
}

.chips button[b-yfpoewx9d6] {
    cursor: pointer;
}

.chip[b-yfpoewx9d6]  i {
    font-size: 12px;
    color: inherit;
    opacity: 0.8;
}

.older[b-yfpoewx9d6] {
    display: flex;
    justify-content: center;
}

@media (max-width: 599px) {
    .filter[b-yfpoewx9d6] {
        width: 100%;
    }
}
/* /Components/Settings/StoreHoursCard.razor.rz.scp.css */
.hours[b-155f1r9yqo] {
    display: grid;
}

.hours-row[b-155f1r9yqo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-height: 54px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.hours-row:last-child[b-155f1r9yqo] {
    border-bottom: 0;
}

.form-switch[b-155f1r9yqo] {
    padding-left: 0;
}

.form-switch .form-check-input[b-155f1r9yqo] {
    float: none;
    margin: 0;
    flex: none;
    cursor: pointer;
}

.day[b-155f1r9yqo] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 150px;
    font-weight: 600;
    cursor: pointer;
}

.times[b-155f1r9yqo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.times .form-control[b-155f1r9yqo] {
    width: 130px;
}

.closed[b-155f1r9yqo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    animation: fade-up 0.25s var(--ease-out);
}

.is-closed .day span[b-155f1r9yqo] {
    color: var(--muted);
}

.slot[b-155f1r9yqo] {
    display: grid;
    gap: 6px;
    justify-items: start;
}

.holidays[b-155f1r9yqo] {
    display: grid;
    gap: 8px;
}

.holiday-row[b-155f1r9yqo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    animation: fade-up 0.25s var(--ease-out);
}

.holiday-row .date[b-155f1r9yqo] {
    width: 160px;
}

.holiday-row .name[b-155f1r9yqo] {
    flex: 1 1 180px;
    width: auto;
}

.holiday-row .times .form-control[b-155f1r9yqo] {
    width: 115px;
}

.inline-check[b-155f1r9yqo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.remove[b-155f1r9yqo] {
    margin-left: auto;
}

.remove:hover[b-155f1r9yqo] {
    color: var(--status-problem);
}

.none[b-155f1r9yqo] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

@media (max-width: 599px) {
    .day[b-155f1r9yqo] {
        width: 100%;
    }

    .times[b-155f1r9yqo] {
        flex: 1;
    }

    .times .form-control[b-155f1r9yqo],
    .holiday-row .times .form-control[b-155f1r9yqo] {
        flex: 1;
        width: auto;
        min-width: 0;
    }

    .holiday-row .date[b-155f1r9yqo],
    .holiday-row .name[b-155f1r9yqo] {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Bookings the new hours would leave outside them. */
.outside-list[b-155f1r9yqo] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.outside-list a[b-155f1r9yqo] {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
}

.outside-list a:hover[b-155f1r9yqo] {
    border-color: var(--accent);
}

.outside-list span[b-155f1r9yqo] {
    color: var(--muted);
    font-size: 0.875rem;
}
/* /Components/Settings/TicketSettingsCard.razor.rz.scp.css */
.warranty[b-fgdjubw978] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 20px;
}

.warranty .short[b-fgdjubw978] {
    width: 140px;
}

/* When a repair picked up today stops being covered, worked out as the days are typed. */
.covered[b-fgdjubw978] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--control-h);
    margin: 0;
    padding: 6px 12px;
    border-radius: var(--radius);
    background: var(--status-done-soft);
    color: var(--text);
    font-size: 13px;
}

.covered[b-fgdjubw978]  i {
    color: var(--status-done);
}
/* /Components/Settings/TimeSheetSettingsCard.razor.rz.scp.css */
.period[b-vwwqzpn6x9] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 24px;
}

.form-field[b-vwwqzpn6x9] {
    display: grid;
    gap: 6px;
    justify-items: start;
    min-width: 0;
}

.anchor[b-vwwqzpn6x9] {
    width: 200px;
}

.rates[b-vwwqzpn6x9] {
    display: grid;
}

.rate[b-vwwqzpn6x9] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 210px;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    cursor: pointer;
}

.rate:last-child[b-vwwqzpn6x9] {
    border-bottom: 0;
}

.name[b-vwwqzpn6x9] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.money-input[b-vwwqzpn6x9] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.money-input input[b-vwwqzpn6x9] {
    flex: 1;
    min-width: 0;
    text-align: right;
}

.money-input span[b-vwwqzpn6x9] {
    flex: none;
    white-space: nowrap;
}

@media (max-width: 599px) {
    .rate[b-vwwqzpn6x9] {
        grid-template-columns: auto minmax(0, 1fr) 160px;
    }

    .anchor[b-vwwqzpn6x9] {
        width: 100%;
    }
}
/* /Components/Settings/WebhookSteps.razor.rz.scp.css */
.webhook[b-4p998eraqy] {
    display: grid;
    gap: 10px;
}

.address[b-4p998eraqy] {
    display: grid;
    gap: 4px;
}

.url-row[b-4p998eraqy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

code[b-4p998eraqy] {
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 12.5px;
}

.url-row code[b-4p998eraqy] {
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    user-select: all;
}

.steps[b-4p998eraqy] {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13.5px;
}

.steps summary[b-4p998eraqy] {
    color: var(--accent);
    font-weight: 500;
    cursor: pointer;
}

.steps ol[b-4p998eraqy] {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
    padding-left: 20px;
}
/* /Components/Settings/WebsiteCard.razor.rz.scp.css */
.link-block[b-kzvfgnezlb] {
    display: grid;
    gap: 8px;
}

.link-row[b-kzvfgnezlb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.link-row code[b-kzvfgnezlb] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.snippet[b-kzvfgnezlb] {
    margin: 0;
    padding: 12px 14px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    font-size: 12px;
    white-space: pre;
}
/* /Components/Shared/ActivityList.razor.rz.scp.css */
.activity .who[b-5k1orb0aja] {
    white-space: nowrap;
}

.activity .summary[b-5k1orb0aja] {
    min-width: 260px;
}

.activity tr.openable[b-5k1orb0aja] {
    cursor: pointer;
}

.activity .more[b-5k1orb0aja] {
    white-space: nowrap;
}

/* Today, Yesterday and each earlier day head their first row. The heading is drawn above the row's
   cells, so hovering the row leaves it alone. */
.activity tbody tr.day-start td[b-5k1orb0aja] {
    position: relative;
    padding-top: 42px;
}

.activity tbody tr.day-start td.when[b-5k1orb0aja]::before {
    content: attr(data-day);
    position: absolute;
    top: 14px;
    left: 14px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.activity tbody tr.day-start:hover td[b-5k1orb0aja] {
    background: linear-gradient(transparent 32px, color-mix(in srgb, var(--surface-2) 70%, transparent) 32px);
}

/* New lines slide in with a flash that fades by itself. */
.activity tbody tr.flash td[b-5k1orb0aja] {
    animation: arrive-b-5k1orb0aja 0.45s var(--ease-out), glow-b-5k1orb0aja 2.6s ease-out;
}

.activity tbody tr.flash:not(:hover) td[b-5k1orb0aja] {
    background: transparent;
}

@keyframes arrive-b-5k1orb0aja {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@keyframes glow-b-5k1orb0aja {
    0%,
    30% {
        background-color: var(--accent-soft);
    }
}
/* /Components/Shared/Autocomplete.razor.rz.scp.css */
.autocomplete[b-wwxtgk1vhp] {
    position: relative;
}

.suggestions[b-wwxtgk1vhp] {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1010;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--overlay-shadow);
    max-height: 280px;
    overflow-y: auto;
}

.suggestion[b-wwxtgk1vhp] {
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--text);
    cursor: pointer;
}

/* The <mark> is built in code, so CSS isolation doesn't tag it: reach it with ::deep. */
.suggestion[b-wwxtgk1vhp]  mark {
    background: none;
    padding: 0;
    color: var(--accent);
    font-weight: 700;
}

.suggestion.highlighted[b-wwxtgk1vhp] {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
}

.suggestion.highlighted[b-wwxtgk1vhp]  mark {
    color: var(--accent-soft-fg);
}

.add-new[b-wwxtgk1vhp] {
    color: var(--accent);
    font-weight: 600;
    border-top: 1px solid var(--border);
    border-radius: 0 0 6px 6px;
    margin-top: 2px;
}
/* /Components/Shared/CheckChip.razor.rz.scp.css */
.check-chip[b-z1e1b5he61] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.check-chip.working[b-z1e1b5he61] {
    background: var(--status-done-soft);
    color: var(--status-done);
    border-color: color-mix(in srgb, var(--status-done) 40%, transparent);
}

.check-chip.not-working[b-z1e1b5he61] {
    background: var(--status-problem-soft);
    color: var(--status-problem);
    border-color: color-mix(in srgb, var(--status-problem) 40%, transparent);
}
/* /Components/Shared/ChoiceGroup.razor.rz.scp.css */
/* Segmented choice (DESIGN.md §8): an outlined group; the chosen segment is accent-soft. Priority
   options fill with their status colour. */
.choice-group[b-dgrg3tach6] {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: var(--control-h);
    width: max-content;
    max-width: 100%;
    background: var(--surface);
}

.choice-group.wrap[b-dgrg3tach6] {
    display: flex;
    flex-wrap: wrap;
    width: auto;
}

.choice[b-dgrg3tach6] {
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, transform 0.12s var(--ease-spring);
}

.wrap .choice[b-dgrg3tach6] {
    min-height: calc(var(--control-h) - 8px);
}

.choice:hover:not(:disabled)[b-dgrg3tach6] {
    color: var(--text);
    background: var(--surface-2);
}

.choice:active:not(:disabled)[b-dgrg3tach6] {
    transform: scale(0.95);
}

.choice.on[b-dgrg3tach6],
.choice.on:hover:not(:disabled)[b-dgrg3tach6] {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-weight: 600;
}

.choice.on.waiting[b-dgrg3tach6],
.choice.on.waiting:hover:not(:disabled)[b-dgrg3tach6] {
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
}

.choice.on.problem[b-dgrg3tach6],
.choice.on.problem:hover:not(:disabled)[b-dgrg3tach6] {
    background: var(--status-problem-soft);
    color: var(--status-problem);
}

.choice.on.done[b-dgrg3tach6],
.choice.on.done:hover:not(:disabled)[b-dgrg3tach6] {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.choice:disabled[b-dgrg3tach6] {
    cursor: not-allowed;
    opacity: 0.6;
}
/* /Components/Shared/ColumnChooser.razor.rz.scp.css */
.columns[b-6hecevs6lw] {
    position: relative;
}

.scrim[b-6hecevs6lw] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.panel[b-6hecevs6lw] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    display: grid;
    width: 240px;
    max-height: min(420px, 70vh);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--overlay-shadow);
    animation: pop 0.18s var(--ease-out);
}

.panel-head[b-6hecevs6lw] {
    padding: 6px 10px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.choice[b-6hecevs6lw] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}

.choice:hover[b-6hecevs6lw] {
    background: var(--surface-2);
}

.choice input[b-6hecevs6lw] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.choice.fixed[b-6hecevs6lw] {
    color: var(--muted);
    cursor: default;
}

.panel-foot[b-6hecevs6lw] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    padding: 8px 4px 2px;
    border-top: 1px solid var(--border);
}

/* On a phone the button is just its icon. */
@media (max-width: 640px) {
    .label[b-6hecevs6lw] {
        display: none;
    }
}
/* /Components/Shared/Confetti.razor.rz.scp.css */
.confetti[b-rnnx14r2m5] {
    position: absolute;
    left: 30px;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.confetti i[b-rnnx14r2m5] {
    position: absolute;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    opacity: 0;
    animation: confetti-b-rnnx14r2m5 1.1s var(--ease-out) forwards;
}

@keyframes confetti-b-rnnx14r2m5 {
    0% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) rotate(var(--r));
    }
}

@media (prefers-reduced-motion: reduce) {
    .confetti[b-rnnx14r2m5] {
        display: none;
    }
}
/* /Components/Shared/FieldMessage.razor.rz.scp.css */
.field-message[b-edswikt01s] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--status-problem);
}
/* /Components/Shared/FormField.razor.rz.scp.css */
.form-field[b-wqer8l680b] {
    display: grid;
    gap: 5px;
    align-content: start;
    min-width: 0;
}

.field-label[b-wqer8l680b] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.required[b-wqer8l680b] {
    color: var(--status-problem);
}

.field-hint[b-wqer8l680b] {
    font-size: 12px;
    color: var(--muted);
}

.field-error[b-wqer8l680b] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--status-problem);
}
/* /Components/Shared/MapPreview.razor.rz.scp.css */
.map-preview[b-7pn03dd39y] {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    text-decoration: none;
}

.map-preview img[b-7pn03dd39y] {
    display: block;
    width: 100%;
    height: auto;
}

/* Over the corner of the map, like Google's own button. */
.map-directions[b-7pn03dd39y] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: var(--shadow);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
}

.map-preview:hover .map-directions[b-7pn03dd39y] {
    background: var(--accent);
    color: var(--on-accent);
}

/* Google couldn't draw it: the link alone is left. */
.map-preview.no-picture[b-7pn03dd39y] {
    border: 0;
    background: none;
}

.map-preview.no-picture img[b-7pn03dd39y] {
    display: none;
}

.map-preview.no-picture .map-directions[b-7pn03dd39y] {
    position: static;
    box-shadow: none;
    padding: 0;
    background: none;
}

.map-directions-only[b-7pn03dd39y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}
/* /Components/Shared/Modal.razor.rz.scp.css */
.modal-scrim[b-4tk2l9sohm] {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: var(--scrim);
    backdrop-filter: blur(3px);
    animation: fade-b-4tk2l9sohm 0.2s;
}

.modal-panel[b-4tk2l9sohm] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100vw - 32px));
    max-height: min(88vh, 900px);
    transform: translate(-50%, -50%);
    background: var(--surface);
    color: var(--text);
    border-radius: 16px;
    box-shadow: var(--overlay-shadow);
    outline: none;
    animation: modal-in-b-4tk2l9sohm 0.28s var(--ease-spring);
}

.modal-panel.wide[b-4tk2l9sohm] {
    width: min(880px, calc(100vw - 32px));
}

/* A side panel: the full height at the right edge. */
.modal-panel.drawer[b-4tk2l9sohm] {
    top: 0;
    right: 0;
    left: auto;
    height: 100vh;
    max-height: 100vh;
    width: min(520px, 100vw);
    transform: none;
    border-radius: 16px 0 0 16px;
    animation: drawer-in-b-4tk2l9sohm 0.32s var(--ease-out);
}

.modal-panel.drawer.wide[b-4tk2l9sohm] {
    width: min(720px, 100vw);
}

.modal-head[b-4tk2l9sohm] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 18px 22px;
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--border);
}

.modal-panel:not(.drawer) .modal-head[b-4tk2l9sohm] {
    padding-top: 18px;
}

.modal-title[b-4tk2l9sohm] {
    flex: 1;
    min-width: 0;
}

.modal-head h2[b-4tk2l9sohm] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.modal-head p[b-4tk2l9sohm] {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--muted);
}

.icon-tile[b-4tk2l9sohm] {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    font-size: 17px;
}

.modal-body[b-4tk2l9sohm] {
    display: grid;
    gap: 16px;
    align-content: start;
    padding: 20px 22px;
    overflow-y: auto;
    flex: 1;
}

.modal-foot[b-4tk2l9sohm] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    padding: 14px 22px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
}

@keyframes modal-in-b-4tk2l9sohm {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.94) translateY(8px);
    }
}

@keyframes drawer-in-b-4tk2l9sohm {
    from {
        transform: translateX(100%);
    }
}

@keyframes fade-b-4tk2l9sohm {
    from {
        opacity: 0;
    }
}

/* Phones: a sheet from the bottom, the full width. */
@media (max-width: 599px) {
    .modal-panel[b-4tk2l9sohm],
    .modal-panel.wide[b-4tk2l9sohm],
    .modal-panel.drawer[b-4tk2l9sohm] {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        max-height: 92vh;
        transform: none;
        border-radius: 16px 16px 0 0;
        animation: sheet-in-b-4tk2l9sohm 0.32s var(--ease-out);
    }

    .modal-panel .modal-head[b-4tk2l9sohm] {
        padding-top: 18px;
    }
}

@keyframes sheet-in-b-4tk2l9sohm {
    from {
        transform: translateY(100%);
    }
}
/* /Components/Shared/NoteAttachmentList.razor.rz.scp.css */
.attachments[b-scjathuxlu] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.attachment[b-scjathuxlu] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.photo img[b-scjathuxlu] {
    display: block;
    width: 96px;
    height: 72px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    object-fit: cover;
    background: var(--surface-2);
}

.chip-link[b-scjathuxlu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 12.5px;
    text-decoration: none;
}

.chip-link span[b-scjathuxlu] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-link small[b-scjathuxlu] {
    color: var(--muted);
}

.tools[b-scjathuxlu] {
    display: grid;
    gap: 2px;
}

.photo .tools[b-scjathuxlu] {
    position: absolute;
    top: 4px;
    right: 4px;
}

.tool[b-scjathuxlu] {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--text);
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}

.tool:hover[b-scjathuxlu] {
    background: var(--surface);
    color: var(--accent);
}
/* /Components/Shared/NoteFilesPicker.razor.rz.scp.css */
.files-picker[b-g0yiv6aey5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 12.5px;
}

.attach[b-g0yiv6aey5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
}

.picked[b-g0yiv6aey5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 2px 8px;
    border-radius: 999px;
    background: var(--surface-2);
}

.remove[b-g0yiv6aey5] {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.remove:hover[b-g0yiv6aey5] {
    background: var(--border);
    color: var(--text);
}
/* /Components/Shared/Pill.razor.rz.scp.css */
/* Soft fill, strong text, no dot and no outline (DESIGN.md §8). */
.pill[b-pc4snrt9ir] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--pill-fg);
    background: var(--pill-bg);
}

.pill-neutral[b-pc4snrt9ir] { --pill-fg: var(--status-neutral); --pill-bg: var(--status-neutral-soft); }
.pill-progress[b-pc4snrt9ir] { --pill-fg: var(--status-progress); --pill-bg: var(--status-progress-soft); }
.pill-waiting[b-pc4snrt9ir] { --pill-fg: var(--status-waiting); --pill-bg: var(--status-waiting-soft); }
.pill-done[b-pc4snrt9ir] { --pill-fg: var(--status-done); --pill-bg: var(--status-done-soft); }
.pill-problem[b-pc4snrt9ir] { --pill-fg: var(--status-problem); --pill-bg: var(--status-problem-soft); }
/* /Components/Shared/PriorityPill.razor.rz.scp.css */
.priority-pill[b-b6yqytj658] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.problem[b-b6yqytj658] { color: var(--status-problem); background: var(--status-problem-soft); }
.waiting[b-b6yqytj658] { color: var(--status-waiting); background: var(--status-waiting-soft); }
.done[b-b6yqytj658] { color: var(--status-done); background: var(--status-done-soft); }
/* /Components/Shared/ScanButton.razor.rz.scp.css */
/* Hidden until scanning.js finds a touch screen with a camera (it marks <html data-camera-scan>). */
.scan-button[b-bqe9xs8m5t] {
    display: none;
}

:root[data-camera-scan] .scan-button[b-bqe9xs8m5t] {
    display: inline-grid;
    place-items: center;
}

.scan-button.icon-button[b-bqe9xs8m5t] {
    width: 36px;
    height: 36px;
    margin-right: -6px;
    color: var(--accent);
    font-size: 16px;
}

.scan-with-camera[b-bqe9xs8m5t] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.scan-with-camera[b-bqe9xs8m5t]  input {
    flex: 1;
    min-width: 0;
}

.scan-button.btn[b-bqe9xs8m5t] {
    flex: none;
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    color: var(--accent);
    font-size: 16px;
}
/* /Components/Shared/SortHeader.razor.rz.scp.css */
/* The heading stays a quiet label; the arrow only darkens on the column sorted by. */
.sort-button[b-5c3y4nh5x8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -4px -6px;
    padding: 4px 6px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: inherit;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

th.r .sort-button[b-5c3y4nh5x8] {
    flex-direction: row-reverse;
}

.sort-button:hover[b-5c3y4nh5x8],
.sort-button:focus-visible[b-5c3y4nh5x8] {
    background: color-mix(in srgb, var(--border) 60%, transparent);
    color: var(--text);
}

.sort-button[b-5c3y4nh5x8]  i {
    font-size: 11px;
    opacity: 0.45;
}

.sort-button.sorted[b-5c3y4nh5x8] {
    color: var(--text);
}

.sort-button.sorted[b-5c3y4nh5x8]  i {
    color: var(--accent);
    opacity: 1;
}
/* /Components/Shared/StoreFields.razor.rz.scp.css */
.three[b-mcaarfoi5u] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);
    gap: 12px;
}

@media (max-width: 700px) {
    .three[b-mcaarfoi5u] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/TablePager.razor.rz.scp.css */
.table-pager[b-jzaywmpl2k] {
    flex-wrap: wrap;
    row-gap: 8px;
}

.showing[b-jzaywmpl2k] {
    font-variant-numeric: tabular-nums;
}

.size[b-jzaywmpl2k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.size select[b-jzaywmpl2k] {
    width: auto;
    min-width: 72px;
}

.pages[b-jzaywmpl2k] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.page[b-jzaywmpl2k] {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
}

.page:hover[b-jzaywmpl2k],
.page:focus-visible[b-jzaywmpl2k] {
    background: var(--surface-2);
}

.page.current[b-jzaywmpl2k] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.page.disabled[b-jzaywmpl2k] {
    color: var(--muted);
    opacity: 0.4;
    cursor: default;
}

.page.disabled:hover[b-jzaywmpl2k] {
    background: none;
}

.gap[b-jzaywmpl2k] {
    padding: 0 4px;
    color: var(--muted);
}

/* On a phone: the count, then previous, this page and next. */
@media (max-width: 640px) {
    .size span[b-jzaywmpl2k] {
        display: none;
    }

    .page:not(.step):not(.current)[b-jzaywmpl2k],
    .gap[b-jzaywmpl2k] {
        display: none;
    }
}
/* /Components/Shared/Tag.razor.rz.scp.css */
/* Neutral by default: secondary facts such as "Customer notified" (DESIGN.md §8). A tone tints it. */
.tag[b-no1x242p4a] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--tag-fg);
    background: var(--tag-bg);
}

.tag[b-no1x242p4a]  i {
    font-size: 11px;
}

.tag-accent[b-no1x242p4a] { --tag-fg: var(--accent-soft-fg); --tag-bg: var(--accent-soft); }
.tag-neutral[b-no1x242p4a] { --tag-fg: var(--muted); --tag-bg: var(--surface-2); }
.tag-progress[b-no1x242p4a] { --tag-fg: var(--status-progress); --tag-bg: var(--status-progress-soft); }
.tag-waiting[b-no1x242p4a] { --tag-fg: var(--status-waiting); --tag-bg: var(--status-waiting-soft); font-weight: 600; }
.tag-done[b-no1x242p4a] { --tag-fg: var(--status-done); --tag-bg: var(--status-done-soft); }
.tag-problem[b-no1x242p4a] { --tag-fg: var(--status-problem); --tag-bg: var(--status-problem-soft); font-weight: 600; }
/* /Components/Shared/TaxChips.razor.rz.scp.css */
.tax-chips[b-za3hqt1cko] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.label[b-za3hqt1cko] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    margin-right: 2px;
}

.none[b-za3hqt1cko] {
    font-size: 12.5px;
    color: var(--muted);
}
/* /Components/Shared/ToastHost.razor.rz.scp.css */
.toast-host[b-e5j8unv83s] {
    position: fixed;
    right: max(20px, env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    z-index: 1090;
}

.toast-card[b-e5j8unv83s] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 420px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--toast-bg);
    color: var(--toast-fg);
    box-shadow: var(--overlay-shadow);
    animation: toast-in-b-e5j8unv83s 0.4s var(--ease-spring);
}

.toast-icon[b-e5j8unv83s] {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--toast-fg) 14%, transparent);
    font-size: 13px;
}

.toast-text[b-e5j8unv83s] {
    display: grid;
    min-width: 0;
}

.toast-text b[b-e5j8unv83s] {
    font-size: 14px;
    font-weight: 600;
}

.toast-text span[b-e5j8unv83s] {
    font-size: 13px;
    opacity: 0.8;
}

.toast-action[b-e5j8unv83s] {
    margin-left: auto;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: color-mix(in srgb, var(--toast-fg) 14%, transparent);
    color: inherit;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.toast-action:hover[b-e5j8unv83s] {
    background: color-mix(in srgb, var(--toast-fg) 24%, transparent);
    color: inherit;
}

.toast-timer[b-e5j8unv83s] {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    border-radius: 0 0 0 var(--radius-lg);
    background: var(--accent-fill);
    animation: shrink-b-e5j8unv83s linear forwards;
}

@keyframes toast-in-b-e5j8unv83s {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.9);
    }
}

@keyframes shrink-b-e5j8unv83s {
    from {
        width: 100%;
    }

    to {
        width: 0;
    }
}

@media (max-width: 899px) {
    .toast-host[b-e5j8unv83s] {
        left: max(16px, env(safe-area-inset-left, 0px));
        right: max(16px, env(safe-area-inset-right, 0px));
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        align-items: stretch;
    }

    .toast-card[b-e5j8unv83s] {
        min-width: 0;
        max-width: none;
    }
}
/* /Components/Shared/ToggleChip.razor.rz.scp.css */
.toggle-chip[b-quj0qbwtlj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.toggle-chip:hover[b-quj0qbwtlj] {
    border-color: var(--accent);
}

.toggle-chip.on[b-quj0qbwtlj] {
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.toggle-chip.on.problem[b-quj0qbwtlj] {
    background: var(--status-problem-soft);
    color: var(--status-problem);
    border-color: color-mix(in srgb, var(--status-problem) 40%, transparent);
}

.toggle-chip.on.done[b-quj0qbwtlj] {
    background: var(--status-done-soft);
    color: var(--status-done);
    border-color: color-mix(in srgb, var(--status-done) 40%, transparent);
}
/* /Components/TimeSheets/ClockOutDialog.razor.rz.scp.css */
.clock-out-form[b-xtmk2nwk2n] {
    display: grid;
    gap: 14px;
}

.flag[b-xtmk2nwk2n] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--status-problem-soft);
    color: var(--status-problem);
    font-size: 13px;
}

.flag[b-xtmk2nwk2n]  i {
    margin-top: 2px;
}

.worked[b-xtmk2nwk2n] {
    margin: 0;
}

.worked b[b-xtmk2nwk2n] {
    color: var(--text);
}
/* /Components/TimeSheets/MyTimeOffCard.razor.rz.scp.css */
.my-time-off[b-8g6u0t2p2m] {
    display: grid;
    gap: 8px;
    padding-bottom: 12px;
}

.time-off[b-8g6u0t2p2m] {
    display: grid;
    gap: 2px;
    margin: 0;
    list-style: none;
}

.row-text[b-8g6u0t2p2m] {
    flex: 1;
    display: grid;
    min-width: 0;
    line-height: 1.35;
}
/* /Components/TimeSheets/TimeOffDialog.razor.rz.scp.css */
.time-off-form[b-lpraqnn194] {
    display: grid;
    gap: 14px;
}

.two[b-lpraqnn194] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 599px) {
    .two[b-lpraqnn194] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/TimeSheets/TimeSheetCard.razor.rz.scp.css */
.sheet-card[b-5xsdfbw7bv] {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 18px var(--pad) var(--pad);
    min-width: 0;
}

/* Inside a drawer: the drawer is the card. */
.sheet-card.bare[b-5xsdfbw7bv] {
    padding: 0;
}

.sheet-head[b-5xsdfbw7bv] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 24px;
}

.title[b-5xsdfbw7bv] {
    display: grid;
    gap: 4px;
}

.title h2[b-5xsdfbw7bv] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* The period, with arrows to the ones either side when the page steps between them. */
.period-row[b-5xsdfbw7bv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.period-row .link-button[b-5xsdfbw7bv] {
    margin-left: 6px;
    font-size: 13px;
}

.title .small[b-5xsdfbw7bv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.totals[b-5xsdfbw7bv] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.total[b-5xsdfbw7bv] {
    display: grid;
    justify-items: end;
}

.total b[b-5xsdfbw7bv] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    animation: count-in 0.5s var(--ease-out);
}

.total small[b-5xsdfbw7bv] {
    color: var(--muted);
    font-size: 12px;
}

/* The period strip: one column per day, filled with that day's hours. */
.strip[b-5xsdfbw7bv] {
    display: grid;
    grid-template-columns: repeat(var(--days), minmax(0, 1fr));
    gap: 6px;
    align-items: end;
}

.day[b-5xsdfbw7bv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--muted);
    font-size: 11px;
}

.column[b-5xsdfbw7bv] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    max-width: 28px;
    height: 64px;
    border-radius: 6px;
    background: var(--surface-2);
    overflow: hidden;
}

.paid[b-5xsdfbw7bv] {
    display: block;
    background: var(--accent-fill);
    border-radius: 6px 6px 0 0;
    transform-origin: bottom;
    animation: grow-b-5xsdfbw7bv 0.7s var(--ease-out) both;
}

/* Unpaid time off sits above the day's paid hours, in grey. */
.off[b-5xsdfbw7bv] {
    display: block;
    background: var(--field-border);
}

.day.today[b-5xsdfbw7bv] {
    color: var(--text);
    font-weight: 700;
}

.day.today .column[b-5xsdfbw7bv] {
    box-shadow: 0 0 0 2px var(--accent-fill);
}

.day.ahead .column[b-5xsdfbw7bv] {
    background: color-mix(in srgb, var(--surface-2) 50%, transparent);
    outline: 1px dashed var(--border);
    outline-offset: -1px;
}

.review[b-5xsdfbw7bv] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    animation: fade-up 0.3s var(--ease-out);
}

.review[b-5xsdfbw7bv]  i {
    margin-top: 3px;
}

.review.problem[b-5xsdfbw7bv] {
    background: var(--status-problem-soft);
    color: var(--status-problem);
}

.review.waiting[b-5xsdfbw7bv] {
    background: var(--status-waiting-soft);
    color: var(--status-waiting);
}

.review.done[b-5xsdfbw7bv] {
    background: var(--status-done-soft);
    color: var(--status-done);
}

.entries-head[b-5xsdfbw7bv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.entries-head h3[b-5xsdfbw7bv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.add-time-open:hover[b-5xsdfbw7bv]  i {
    animation: bounce 0.5s var(--ease-spring);
}

/* Adding time, in its dialog: day and kind, then start and end, then notes. */
.add-time[b-5xsdfbw7bv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    align-items: start;
}

.add-time[b-5xsdfbw7bv]  .notes,
.add-time .form-alert[b-5xsdfbw7bv] {
    grid-column: 1 / -1;
}

.add-actions[b-5xsdfbw7bv] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.add-actions .spacer[b-5xsdfbw7bv] {
    flex: 1;
}

.that[b-5xsdfbw7bv] {
    font-size: 13px;
}

.preview[b-5xsdfbw7bv] {
    min-width: 46px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    animation: count-in 0.3s var(--ease-out);
}

.table-wrap[b-5xsdfbw7bv] {
    margin: 0 -8px;
}

.entries .note[b-5xsdfbw7bv] {
    white-space: pre-line;
    color: var(--muted);
    font-size: 13px;
}

.entries tbody tr[b-5xsdfbw7bv] {
    cursor: default;
}

.entries tr.unpaid td[b-5xsdfbw7bv] {
    color: var(--muted);
}

.entries tr.glow td[b-5xsdfbw7bv] {
    animation: glow-b-5xsdfbw7bv 2.6s ease;
}

.sheet-actions[b-5xsdfbw7bv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.reject[b-5xsdfbw7bv] {
    max-width: 560px;
    animation: fade-up 0.25s var(--ease-out);
}

.confirm-text[b-5xsdfbw7bv] {
    margin: 0;
}

/* ---------- The time clock ---------- */

/* The column of a day with a shift on the clock runs (the mockup's moving stripes). */
.day.running .paid[b-5xsdfbw7bv] {
    background: repeating-linear-gradient(-45deg, var(--accent-fill) 0 6px, color-mix(in srgb, var(--accent-fill) 70%, transparent) 6px 12px);
    background-size: 200% 100%;
    animation: grow-b-5xsdfbw7bv 0.7s var(--ease-out) both, run-b-5xsdfbw7bv 1.2s linear infinite;
}

.clock-flag[b-5xsdfbw7bv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--status-problem-soft);
    color: var(--status-problem);
    font-size: 13px;
    animation: fade-up 0.3s var(--ease-out);
}

.clock-flag > span[b-5xsdfbw7bv] {
    flex: 1 1 220px;
}

.clock-flag .btn[b-5xsdfbw7bv] {
    margin-left: auto;
}

.entries tr.running td[b-5xsdfbw7bv] {
    background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

.entries tr.running.forgotten td[b-5xsdfbw7bv] {
    background: color-mix(in srgb, var(--status-problem-soft) 65%, transparent);
}

.break-note[b-5xsdfbw7bv] {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.clocked[b-5xsdfbw7bv] {
    margin-left: 4px;
    color: var(--muted);
    font-size: 12px;
}

@keyframes run-b-5xsdfbw7bv {
    to {
        background-position: 100% 0;
    }
}

@keyframes grow-b-5xsdfbw7bv {
    from {
        transform: scaleY(0);
    }
}

@keyframes glow-b-5xsdfbw7bv {
    0%,
    30% {
        background-color: var(--accent-soft);
    }
}

@media (max-width: 599px) {
    .strip[b-5xsdfbw7bv] {
        gap: 2px;
    }

    .day[b-5xsdfbw7bv] {
        font-size: 10px;
    }

    .totals[b-5xsdfbw7bv] {
        width: 100%;
        justify-content: space-between;
    }

    .total[b-5xsdfbw7bv] {
        justify-items: start;
    }
}

@media (max-width: 359px) {
    .add-time[b-5xsdfbw7bv] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Date and time fields can be wider than their column on a phone; let them shrink. */
.add-time[b-5xsdfbw7bv]  .form-field {
    min-width: 0;
}

.add-time input[b-5xsdfbw7bv],
.add-time select[b-5xsdfbw7bv] {
    min-width: 0;
}
/* /Components/TimeSheets/TimeSheetTabs.razor.rz.scp.css */
.tab-row[b-35lglhli1p] {
    margin-bottom: var(--gap);
}
/* /Components/Workday/NudgeDialog.razor.rz.scp.css */
/* The nudge: where it goes and what it says, before anything is sent. */
.nudge[b-r6awqfm6xq] {
    display: grid;
    gap: 14px;
}

.to[b-r6awqfm6xq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.to[b-r6awqfm6xq]  i {
    color: var(--muted);
}

.small[b-r6awqfm6xq] {
    margin: 0;
    font-size: 13px;
}

.preview[b-r6awqfm6xq] {
    display: grid;
    gap: 4px;
    justify-self: end;
    max-width: min(460px, 100%);
    padding: 10px 14px;
    border-radius: 14px 14px 4px 14px;
    background: var(--accent-soft);
    color: var(--accent-soft-fg);
    animation: fade-up 0.25s var(--ease-out);
}

.preview p[b-r6awqfm6xq] {
    margin: 0;
    font-size: 14px;
    white-space: pre-wrap;
}

.preview .sub-head[b-r6awqfm6xq] {
    color: inherit;
    opacity: 0.8;
}
/* /Components/Workday/WorkList.razor.rz.scp.css */
/* A row with its own button: the order link fills the row and the button sits at its end. */
li.with-action[b-a3ve7k5dg0] {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--border);
}

.bare li.with-action:first-child[b-a3ve7k5dg0] {
    border-top: 0;
}

li.with-action > a[b-a3ve7k5dg0] {
    flex: 1;
    min-width: 0;
    border-top: 0;
}

.row-action[b-a3ve7k5dg0] {
    flex: none;
}

/* Paged: where you are, and previous and next, at the foot of the list. */
.pager[b-a3ve7k5dg0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding-top: 10px;
}

.pager > span[b-a3ve7k5dg0] {
    margin-right: 6px;
}

.pager .btn[b-a3ve7k5dg0] {
    min-width: 32px;
    padding-inline: 8px;
    justify-content: center;
}