/* Back-office staff shell (Razor Pages — no Blazor circuit). */
html:has(.bo-root),
html:has(.bo-root) body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.bo-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-family-ui, var(--font-family-sans));
}

.bo-header {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-shrink: 0;
    min-height: 3.5rem;
    padding: 0 var(--space-4, 16px);
    background: var(--color-surface);
    color: var(--color-text-strong, var(--color-text));
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--elevation-0, none);
}

.bo-header__lead {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    flex-shrink: 0;
    min-width: 0;
}

.bo-header__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-left: auto;
    flex-shrink: 0;
}


.bo-menu-btn {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    line-height: 1;
    padding: 0;
    cursor: pointer;
    border-radius: var(--radius-2, 8px);
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        background var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
        color var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease);
}

.bo-menu-btn__icon {
    display: block;
}

.bo-menu-btn:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
    color: var(--color-text-strong, var(--color-text));
}

.bo-menu-btn:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
}

.bo-brand {
    font-weight: 650;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    color: var(--color-text-strong, var(--color-text));
    text-decoration: none;
    padding: 0.35rem 0.45rem;
    border-radius: var(--radius-1, 4px);
    white-space: nowrap;
    line-height: 1.2;
    transition: background var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease);
}

.bo-brand:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
}

.bo-brand:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
}

.bo-user {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-culture {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface-muted));
    border: 1px solid var(--color-border);
}

.bo-culture .ga-culture-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 1.75rem;
    padding: 0 0.55rem;
    border-radius: calc(var(--radius-2, 8px) - 2px);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    line-height: 1;
    transition:
        background var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
        color var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
        box-shadow var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease);
}

.bo-culture .ga-culture-link:hover {
    color: var(--color-text-strong, var(--color-text));
}

.bo-culture .ga-culture-link.is-active {
    background: var(--color-surface);
    color: var(--color-text-strong, var(--color-text));
    box-shadow: var(--elevation-1);
}

.bo-culture .ga-culture-link:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
}

.bo-culture .ga-culture-sep {
    display: none;
}

.bo-header-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-primary-container, #E8EEF4);
    color: var(--color-primary-ink, var(--color-primary));
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    text-decoration: none;
    flex-shrink: 0;
    border: 1px solid transparent;
    transition:
        background var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
        border-color var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
        box-shadow var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease);
    overflow: hidden;
}

.bo-header-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bo-header-avatar:hover {
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 22%, var(--color-surface));
    border-color: var(--color-border-strong, var(--color-border));
}

.bo-header-avatar:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
}


.bo-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.bo-aside {
    display: flex;
    flex-direction: column;
    width: 260px;
    flex-shrink: 0;
    align-self: stretch;
    height: auto;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--color-drawer-background, var(--color-surface));
    border-right: 1px solid var(--color-border);
    z-index: 20;
}

.bo-aside--hidden {
    display: none;
}

.bo-aside--overlay {
    position: fixed;
    top: 3.5rem;
    left: 0;
    bottom: 0;
    width: min(19.5rem, 86vw);
    border-right: none;
    border-radius: 0 var(--radius-4, 16px) var(--radius-4, 16px) 0;
    background: var(--color-surface);
    box-shadow: var(--elevation-3, 0 10px 28px rgba(15, 23, 42, 0.2));
    padding-bottom: env(safe-area-inset-bottom, 0);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: bo-drawer-in 180ms var(--motion-ease-standard, ease) both;
}

.bo-drawer-backdrop {
    position: fixed;
    inset: 3.5rem 0 0 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(15, 23, 42, 0.42);
    z-index: 15;
    cursor: pointer;
    animation: bo-backdrop-in 160ms var(--motion-ease-standard, ease) both;
}

.bo-root--drawer-open {
    overflow: hidden;
}

@keyframes bo-drawer-in {
    from {
        opacity: 0.72;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bo-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .bo-aside--overlay,
    .bo-drawer-backdrop {
        animation: none;
    }
}

.bo-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    padding: 12px;
    min-height: 100%;
}

.bo-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-text);
    padding: 8px 12px;
    border-radius: var(--radius-1);
    font-size: 0.9375rem;
    line-height: 1.35;
    position: relative;
}

.bo-nav-link__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--color-text-subtle);
}

.bo-nav-link__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.bo-nav-link__label {
    min-width: 0;
}

.bo-nav-link:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
}

.bo-nav-link:hover .bo-nav-link__icon {
    color: var(--color-text);
}

.bo-nav-link:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
}

.bo-nav-link--logout {
    color: var(--color-text-muted);
}

.bo-nav-link--logout:hover {
    color: var(--color-danger);
    background: var(--color-danger-surface, #FFEBEE);
}

.bo-nav-link--logout:hover .bo-nav-link__icon {
    color: var(--color-danger);
}

/* Mobile overlay drawer — denser, touch-first polish */
.bo-aside--overlay .bo-nav {
    gap: 10px;
    padding: 14px 12px calc(28px + env(safe-area-inset-bottom, 0));
}

.bo-aside--overlay .bo-nav > .bo-nav-rule {
    display: none;
}

.bo-aside--overlay .bo-nav-section {
    gap: 2px;
    padding: 2px 0 6px;
}

.bo-aside--overlay .bo-nav-section__title {
    padding: 10px 14px 8px;
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
}

.bo-aside--overlay .bo-nav-section:first-child .bo-nav-section__title {
    padding-top: 4px;
}

.bo-aside--overlay .bo-nav-link {
    min-height: 48px;
    padding: 10px 12px 10px 14px;
    gap: 12px;
    border-radius: var(--radius-2, 8px);
    font-size: 0.975rem;
    font-weight: 550;
}

.bo-aside--overlay .bo-nav-link__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface-muted));
    color: var(--color-text-muted);
}

.bo-aside--overlay .bo-nav-link:hover .bo-nav-link__icon,
.bo-aside--overlay .bo-nav-link--active .bo-nav-link__icon {
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 22%, var(--color-surface));
    color: var(--color-primary-ink, var(--color-primary));
}

.bo-aside--overlay .bo-nav-link--active {
    padding-left: 14px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 22%, transparent);
}

.bo-aside--overlay .bo-nav-link--active::before {
    left: 4px;
    top: 12px;
    bottom: 12px;
    width: 3px;
}

.bo-aside--overlay .bo-nav-footer {
    gap: 0;
    padding-top: 8px;
    margin-top: auto;
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
}

.bo-aside--overlay .bo-nav-footer .bo-nav-rule {
    display: none;
}

.bo-aside--overlay .bo-nav-footer .bo-nav-link {
    margin-top: 8px;
    margin-bottom: 8px;
}

.bo-nav-muted {
    padding: 8px 12px;
    font-size: 0.875rem;
    color: var(--color-text-subtle);
}

.bo-nav-rule {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 8px 0;
    width: 100%;
    flex-shrink: 0;
}

.bo-nav-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}

.bo-nav-prefs {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-3, 12px);
}

.bo-nav-prefs .ga-theme {
    width: 100%;
    justify-content: stretch;
}

.bo-nav-prefs .ga-theme__btn {
    flex: 1;
    min-height: 2rem;
}

/* Desktop sidebar: tighten vertical rhythm on shorter screens so the whole menu fits without scrolling. */
@media (max-height: 900px) {
    .bo-aside:not(.bo-aside--overlay) .bo-nav {
        gap: 2px;
        padding-block: 8px;
    }

    .bo-aside:not(.bo-aside--overlay) .bo-nav-section {
        gap: 1px;
    }

    .bo-aside:not(.bo-aside--overlay) .bo-nav-link {
        padding-block: 6px;
    }

    .bo-aside:not(.bo-aside--overlay) .bo-nav-rule {
        margin: 5px 0;
    }

    .bo-aside:not(.bo-aside--overlay) .bo-nav-prefs {
        padding-block: 4px 8px;
    }
}

@media (max-height: 740px) {
    .bo-aside:not(.bo-aside--overlay) .bo-nav-link {
        padding-block: 4px;
        line-height: 1.3;
    }

    .bo-aside:not(.bo-aside--overlay) .bo-nav-section__title {
        padding-top: 4px;
        padding-bottom: 0;
    }

    .bo-aside:not(.bo-aside--overlay) .bo-nav-rule {
        margin: 3px 0;
    }
}

@media (max-height: 640px) {
    .bo-aside:not(.bo-aside--overlay) .bo-nav-link {
        padding-block: 3px;
        font-size: 0.875rem;
    }
}

.bo-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background: var(--color-background);
}

.bo-content {
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--space-5, 1.5rem);
}

/* Shared staff page primitives (Blazor pages) */
.staff-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.staff-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.staff-page__title {
    margin: 0;
    font-size: 1.75rem;
    line-height: var(--line-height-tight, 1.15);
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--color-text-strong, var(--color-text));
}

.staff-page__subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-base, 1rem);
    line-height: var(--line-height-normal, 1.35);
    color: var(--color-text-muted);
}

.staff-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.staff-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    box-shadow: var(--elevation-1);
}

.staff-input {
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface));
    color: var(--color-text);
    font-size: var(--font-size-base, 1rem);
    line-height: var(--line-height-normal, 1.35);
    outline: 2px solid transparent;
    font-family: inherit;
}

.staff-input:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.staff-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 10px 16px;
    border-radius: var(--radius-2, 8px);
    border: 1px solid transparent;
    font-weight: 650;
    font-size: 0.9375rem;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background var(--motion-duration-fast) var(--motion-ease-standard),
                border-color var(--motion-duration-fast) var(--motion-ease-standard),
                box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.staff-btn--primary {
    background: var(--color-primary-action, var(--color-primary));
    border-color: var(--color-primary-action, var(--color-primary));
    color: var(--color-on-primary-action, #fff);
}

.staff-btn--primary:hover:not(:disabled) {
    background: var(--color-primary-action-hover, var(--color-primary-hover));
    border-color: var(--color-primary-action-hover, var(--color-primary-hover));
    color: var(--color-on-primary-action, #fff);
}

.staff-btn--secondary {
    background: var(--color-surface);
    border-color: var(--color-border-strong, var(--color-border));
    color: var(--color-text-strong, var(--color-text));
}

.staff-btn--secondary:hover:not(:disabled) {
    background: var(--color-surface-2, var(--color-surface-muted));
}

.staff-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-primary-ink, var(--color-primary));
    min-height: 36px;
    padding: 6px 10px;
}

.staff-btn--ghost:hover:not(:disabled) {
    background: var(--color-primary-container);
}

.staff-btn--destructive {
    background: var(--color-surface);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.staff-btn--destructive:hover:not(:disabled) {
    background: rgba(211, 47, 47, 0.08);
    border-color: var(--color-danger-hover, var(--color-danger));
}

.staff-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.staff-btn:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
}

.bo-dash-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--color-text-strong, var(--color-text));
}

.bo-dash-muted {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1rem;
}

.bo-logout {
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: 100%;
}

/* =========================================================
   Phase 2 — Customers, Vehicles & Service Templates
   ========================================================= */

/* Active nav link state */
.bo-nav-link--active {
    background: var(--color-primary-container);
    font-weight: 600;
    color: var(--color-text-strong, var(--color-text));
    padding-left: 16px;
}

.bo-nav-link--active .bo-nav-link__icon {
    color: var(--color-primary-ink, var(--color-primary));
}

.bo-nav-link--active::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 999px;
    background: var(--color-primary-action, var(--color-primary));
}

@media (max-width: 960px) {
    .bo-nav-link--desktop-only,
    .bo-desktop-only {
        display: none !important;
    }
}

@media (min-width: 961px) {
    .bo-mobile-only {
        display: none !important;
    }
}

/* Page heading (alias for bo-dash-title pattern) */
.bo-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--color-text-strong, var(--color-text));
}

/* Data table */
.bo-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    overflow: hidden;
}

.bo-table th {
    text-align: left;
    padding: 8px 16px;
    border-bottom: 2px solid var(--color-border);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-2, var(--color-surface-muted));
}

.bo-table td {
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.bo-table tr:hover td {
    background: rgba(0, 102, 204, 0.04);
}

/* Archived row — reduced opacity, no color change */
.bo-table tr.bo-row--archived {
    opacity: 0.55;
}

/* Primary action button */
.bo-btn {
    display: inline-block;
    padding: 8px 16px;
    background: var(--color-primary-action, var(--color-primary));
    color: #fff;
    border: none;
    border-radius: var(--radius-2, 8px);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.bo-btn:hover {
    background: var(--color-primary-action-hover, var(--color-primary-hover));
    color: #fff;
}

/* Secondary / back navigation button */
.bo-btn--secondary {
    display: inline-block;
    padding: 8px 16px;
    background: var(--color-surface);
    color: var(--color-primary-ink, var(--color-primary));
    border: 1px solid var(--color-border-strong, var(--color-primary-action, var(--color-primary)));
    border-radius: var(--radius-2, 8px);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.bo-btn--secondary:hover {
    background: var(--color-primary-container);
}

/* Destructive action button (archive) */
.bo-btn--destructive {
    display: inline-block;
    padding: 8px 16px;
    background: var(--color-danger);
    color: var(--color-surface);
    border: none;
    border-radius: var(--radius-2, 8px);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.bo-btn--destructive:hover {
    background: var(--color-danger-hover);
}

/* Form container */
.bo-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
}

/* Label + input wrapper */
.bo-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Form label */
.bo-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Form input / select */
.bo-input {
    padding: 8px 16px;
    border: 1px solid var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-2, 8px);
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    background: var(--color-surface-2, var(--color-surface, #fff));
    color: var(--color-text);
}

.bo-input::placeholder {
    color: var(--color-text-subtle, var(--color-text-muted));
}

.bo-input:focus {
    outline: 2px solid transparent;
    border-color: var(--color-primary-action, var(--color-primary));
    box-shadow: var(--focus-ring);
}

/* Validation error state on input */
.bo-input--error {
    border-color: var(--color-danger);
}

/* Inline validation message */
.bo-field-error {
    font-size: 0.875rem;
    color: var(--color-danger);
}

/* Button row at form bottom */
.bo-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Row above table (CTA + filter toggle) */
.bo-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

/* "Toon gearchiveerd" checkbox label — layout comes from tokens.css (.bo-toggle-label) */

/* Pagination prev/next row */
.bo-wo-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
}

.bo-wo-pager__status {
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

/* Sub-section heading (vehicles on detail page) */
.bo-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 24px 0 8px;
}

/* Expandable inline add form */
.bo-inline-form {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    padding: 16px;
    background: var(--color-surface);
    margin-top: 8px;
}

/* Empty list message */
.bo-empty-state {
    color: var(--color-text-muted);
    font-size: 1rem;
    margin: 24px 0;
}

/* Back-link breadcrumb row */
.bo-breadcrumb {
    font-size: 0.875rem;
    margin-bottom: 16px;
}

/* Back navigation link */
.bo-back-link {
    color: var(--color-primary-ink, var(--color-primary));
    text-decoration: none;
}

.bo-back-link:hover {
    text-decoration: underline;
}

/* =========================================================
   Phase 4 — Work planning & customer approval
   ========================================================= */

.bo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 960px) {
    .bo-grid {
        grid-template-columns: 1fr 2fr;
        align-items: start;
    }
}

.bo-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    padding: 16px;
}

.bo-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: baseline;
    font-size: 0.9375rem;
}

.bo-audit-panel {
    margin-top: 1.25rem;
}

.bo-audit-panel table {
    width: 100%;
    border-collapse: collapse;
}

/* =========================================================
   Phase 14 — Loading, empty states & motion (FEED-01, FEED-02, FEED-03)
   ========================================================= */

/* --- Route progress bar (D-14-04) --------------------------------- */
.staff-route-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    opacity: 0;
    z-index: 2000;
    pointer-events: none;
    background: var(--color-primary-action, var(--color-primary));
    transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.staff-route-progress--active {
    opacity: 1;
}

/* --- Skeleton primitives (D-14-03) -------------------------------- */
.bo-skeleton {
    height: 14px;
    border-radius: var(--radius-1);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
}

.bo-skeleton--lg {
    height: 20px;
}

.bo-skeleton--row {
    height: 40px;
    width: 100%;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-1);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-subtle);
}

.bo-skeleton-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-5) 0;
}

/* --- Empty state typography (D-14-09) ----------------------------- */
.bo-empty-state__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}

.bo-empty-state__body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
}

/* --- Error block (D-14-18) ---------------------------------------- */
.bo-error-block {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    border-radius: var(--radius-1);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
}

/* --- Save feedback micro-motion (D-14-16) ------------------------- */
.bo-save-feedback {
    opacity: 0;
    transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-save-feedback--visible {
    opacity: 1;
}

/* --- Action toast (customer send) --------------------------------- */
.bo-action-toast {
    position: fixed;
    z-index: 60;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%) translateY(0.75rem);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: min(28rem, calc(100vw - 2rem));
    padding: 0.75rem 1rem;
    border-radius: 12px;
    /* Invert tokens so light mode stays dark-on-light and dark mode stays light-on-dark. */
    background: var(--color-text-strong, #111827);
    color: var(--color-background, #ffffff);
    border: 1px solid color-mix(in srgb, var(--color-background, #fff) 18%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
        transform var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease);
}

.bo-action-toast--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.bo-action-toast__message {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
}

.bo-action-toast__action {
    flex-shrink: 0;
    margin: 0;
    padding: 0.35rem 0.65rem;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.bo-action-toast__action:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.bo-send-dialog__section {
    margin: 0 0 1rem;
}

.bo-send-dialog__label {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.bo-send-dialog__value {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-text);
}

.bo-send-dialog__email {
    display: block;
    margin-top: 0.15rem;
    font-weight: 600;
    color: var(--color-text-strong, var(--color-text));
}

.bo-send-dialog__warn {
    display: block;
    margin-top: 0.15rem;
    font-weight: 600;
    color: var(--color-danger-text, #b42318);
}

.bo-send-dialog__hint {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-send-dialog__summary {
    margin-top: 1rem;
}

.bo-send-dialog__error {
    margin-top: 1rem;
}

/* =========================================================
   Phase 15 — BackOffice dashboard control center
   ========================================================= */

.bo-link {
    color: var(--color-primary-ink, var(--color-primary));
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-sm, 0.875rem);
}

.bo-link:hover {
    text-decoration: underline;
}

.bo-dash-kpis {
    display: grid;
    /* 2-up on mobile (plan KPI is desktop-only); 3-up from 960 when plan shows */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (min-width: 960px) {
    .bo-dash-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

.bo-dash-kpi {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    box-shadow: var(--elevation-1);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "value copy ring"
        "chart chart chart";
    column-gap: var(--space-3);
    row-gap: var(--space-3);
    align-items: center;
    border-left-width: 3px;
    border-left-style: solid;
}

.bo-dash-kpi--work { border-left-color: var(--color-primary); }
.bo-dash-kpi--plan { border-left-color: #00897B; }
.bo-dash-kpi--money { border-left-color: #EF6C00; }

.bo-dash-kpi--link {
    text-decoration: none;
    color: inherit;
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard),
                box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
                background var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-dash-kpi--link:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.bo-dash-kpi--link:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring), var(--elevation-2);
}

.bo-dash-kpi__value {
    grid-area: value;
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
}

.bo-dash-kpi__copy {
    grid-area: copy;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bo-dash-kpi__ring {
    grid-area: ring;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.bo-dash-kpi__ring svg {
    display: block;
    width: 100%;
    height: 100%;
}

.bo-dash-kpi__ring-track {
    stroke: var(--color-border);
    stroke-width: 3.5;
}

.bo-dash-kpi__ring-fill {
    stroke-width: 3.5;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-dash-kpi__chart {
    grid-area: chart;
    min-width: 0;
}

.bo-dash-kpi__bar {
    display: flex;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--color-surface-2, var(--color-surface-muted));
    gap: 2px;
}

.bo-dash-kpi__bar--empty {
    background: var(--color-border-subtle, var(--color-border));
    opacity: 0.7;
}

.bo-dash-kpi__seg {
    display: block;
    min-width: 4px;
    height: 100%;
    border-radius: 999px;
}

.bo-dash-kpi__seg--ok { background: #2E7D32; }
.bo-dash-kpi__seg--warn { background: #EF6C00; }
.bo-dash-kpi__seg--danger { background: var(--color-danger); }
.bo-dash-kpi__seg--neutral { background: var(--color-primary-action, var(--color-primary)); }

.bo-dash-kpi--money .bo-dash-kpi__seg--neutral { background: #9CA3AF; }
.bo-dash-kpi--plan .bo-dash-kpi__seg--ok { background: #00897B; }

@media (max-width: 480px) {
    .bo-dash-kpi {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "value copy"
            "chart chart";
    }

    .bo-dash-kpi__ring {
        display: none;
    }
}

@media (min-width: 960px) {
    .bo-dash-kpi {
        padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
        row-gap: var(--space-4);
    }

    .bo-dash-kpi__value {
        font-size: 2rem;
    }

    .bo-dash-kpi__ring {
        width: 42px;
        height: 42px;
    }

    .bo-dash-kpi__bar {
        height: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-dash-kpi__ring-fill {
        transition: none;
    }
}

.bo-dash-kpi__label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    min-width: 0;
}

.bo-dash-kpi__meta {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted);
    line-height: 1.35;
    min-width: 0;
}

/* --- Shop pulse (werkplaatsstatus) -------------------------------- */
.bo-dash-pulse {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    text-decoration: none;
    color: inherit;
    border-left: 3px solid var(--bo-pulse-accent, #2E7D32);
    transition: background var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
                box-shadow var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
                transform var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease);
}

.bo-dash-pulse--green { --bo-pulse-accent: #2E7D32; }
.bo-dash-pulse--amber { --bo-pulse-accent: #EF6C00; }
.bo-dash-pulse--red { --bo-pulse-accent: var(--color-danger, #C62828); }

.bo-dash-pulse:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.bo-dash-pulse:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring), var(--elevation-2);
}

.bo-dash-pulse__main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
}

.bo-dash-pulse__chip {
    flex-shrink: 0;
    margin-top: 2px;
    background: color-mix(in srgb, var(--bo-pulse-accent) 16%, transparent);
    color: var(--bo-pulse-accent);
    border-color: color-mix(in srgb, var(--bo-pulse-accent) 35%, transparent);
}

.bo-dash-pulse__copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bo-dash-pulse__title {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-dash-pulse__hint {
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.4;
    color: var(--color-text-muted);
}

.bo-dash-pulse__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
}

.bo-dash-pulse__facts .bo-settings-fact {
    padding: var(--space-2) var(--space-3);
}

@media (max-width: 900px) {
    .bo-dash-pulse {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

@media (max-width: 640px) {
    .bo-dash-pulse__facts {
        grid-template-columns: 1fr;
    }
}

/* --- Onboarding checklist ----------------------------------------- */
.bo-onb-checklist {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-2);
}

.bo-onb-checklist__item {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface-muted));
}

.bo-onb-checklist__item--done {
    border-color: color-mix(in srgb, #2E7D32 35%, var(--color-border));
}

.bo-onb-checklist__mark {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #2E7D32;
    flex-shrink: 0;
    background: var(--color-surface);
}

.bo-onb-checklist__item--done .bo-onb-checklist__mark {
    background: color-mix(in srgb, #2E7D32 16%, var(--color-surface));
    border-color: color-mix(in srgb, #2E7D32 40%, var(--color-border));
}

.bo-onb-checklist__copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bo-onb-checklist__title {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 650;
    color: var(--color-text);
}

/* Getting started (dashboard setup guide) */
.bo-gs {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
}

.bo-gs__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.bo-gs__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--color-text-strong, var(--color-text));
}

.bo-gs__sub {
    margin: var(--space-1) 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-gs__progress {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.bo-gs__bar {
    flex: 1;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}

.bo-gs__bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary-action, var(--color-primary));
    transition: width 240ms ease;
}

.bo-gs__count {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.bo-gs__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    overflow: hidden;
}

.bo-gs__step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
}

.bo-gs__step + .bo-gs__step {
    border-top: 1px solid var(--color-border);
}

.bo-gs__step.is-next {
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 7%, var(--color-surface));
}

.bo-gs__mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    border: 1.5px solid var(--color-border-strong, var(--color-border));
    color: #fff;
}

.bo-gs__step.is-next .bo-gs__mark {
    border-color: var(--color-primary-action, var(--color-primary));
}

.bo-gs__step.is-done .bo-gs__mark {
    background: #2E7D32;
    border-color: #2E7D32;
}

.bo-gs__copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bo-gs__step-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-strong, var(--color-text));
}

.bo-gs__step.is-done .bo-gs__step-title {
    color: var(--color-text-muted);
    font-weight: 500;
}

.bo-gs__step-desc {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.bo-gs__action {
    flex-shrink: 0;
}

@media (max-width: 40rem) {
    .bo-gs { padding: var(--space-4); }
    .bo-gs__step { flex-wrap: wrap; }
    .bo-gs__action { margin-left: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bo-gs__bar-fill { transition: none; }
}

.bo-mfa-key {
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface-muted));
    border: 1px solid var(--color-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

.bo-mfa-key code {
    font: inherit;
    color: inherit;
}

/* --- Staff invite ------------------------------------------------- */
.bo-invite {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-content:has(.bo-invite),
.bo-content:has(.bo-security),
.bo-content:has(.bo-onboarding),
.bo-content:has(.bo-privacy),
.bo-content:has(.bo-settings-hub) {
    max-width: 96rem;
}

.bo-settings-hub {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-settings-hub__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 560px) {
    .bo-settings-hub__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .bo-settings-hub__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bo-settings-hub__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (max-width: 559px) {
    .bo-settings-hub__card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--space-3);
        align-items: center;
        padding: var(--space-3);
    }

    .bo-settings-hub__icon {
        grid-row: span 2;
        margin: 0;
    }
}

.bo-settings-hub__card:hover {
    border-color: var(--color-border-strong, var(--color-border));
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.bo-settings-hub__card:focus-visible {
    outline: 2px solid var(--color-accent, #2563eb);
    outline-offset: 2px;
}

.bo-settings-hub__icon {
    display: inline-flex;
    color: var(--color-text-muted, #64748b);
    margin-bottom: var(--space-1);
}

.bo-settings-hub__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text, #0f172a);
}

.bo-settings-hub__desc {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-muted, #64748b);
}

.bo-invite-panel {
    padding: 0;
    overflow: hidden;
}

.bo-invite-panel__header {
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
}

.bo-invite-panel__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 750;
    line-height: 1.2;
    color: var(--color-text-strong, var(--color-text));
}

.bo-invite-panel__hint {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.45;
    color: var(--color-text-muted);
}

.bo-invite-panel__seats {
    margin: var(--space-3) 0 0;
}

.bo-invite-form-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.bo-invite-form-fieldset:disabled {
    opacity: 0.55;
}

.bo-invite-panel__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-invite-panel__tech-hint {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.bo-invite-roster {
    margin-bottom: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-invite-roster__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}

.bo-invite-roster__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 750;
    color: var(--color-text-strong, var(--color-text));
}

.bo-invite-roster__head .bo-cust-result-count {
    margin: 0;
}

.bo-cust-item--static {
    cursor: default;
    text-decoration: none;
    color: inherit;
}

.bo-invite-roster__delete {
    flex-shrink: 0;
    align-self: center;
}

.bo-invite-roster__confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.bo-invite-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 720px) {
    .bo-invite-form {
        grid-template-columns: 1fr 1fr;
    }
}

.bo-invite-panel__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
    background: color-mix(in srgb, var(--color-surface-2, var(--color-surface-muted)) 55%, transparent);
}

@media (max-width: 560px) {
    .bo-invite-panel__footer .staff-btn--primary {
        width: 100%;
        justify-content: center;
    }
}

/* --- Security / MFA ----------------------------------------------- */
.bo-security {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-security-panel {
    padding: 0;
    overflow: hidden;
}

.bo-security-panel__header {
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
}

.bo-security-panel__status {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.bo-security-panel__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 750;
    line-height: 1.2;
    color: var(--color-text-strong, var(--color-text));
}

.bo-security-panel__hint {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.45;
    color: var(--color-text-muted);
}

.bo-security-panel__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 40rem;
}

.bo-security-code {
    max-width: 12rem;
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: 0.28em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.bo-security-panel__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
    background: color-mix(in srgb, var(--color-surface-2, var(--color-surface-muted)) 55%, transparent);
}

.bo-mfa-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.bo-mfa-steps__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
}

.bo-mfa-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--color-primary-container, color-mix(in srgb, var(--color-primary) 14%, transparent));
    color: var(--color-primary-ink, var(--color-primary));
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 700;
    line-height: 1;
}

.bo-mfa-steps__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.bo-mfa-steps__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
}

.bo-mfa-steps__hint {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.45;
    color: var(--color-text-muted);
}

.bo-mfa-qr {
    margin: 0;
    width: fit-content;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: #fff;
}

.bo-mfa-qr img {
    display: block;
    width: 180px;
    height: 180px;
}

.bo-mfa-key-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-2);
}

.bo-mfa-key-row .bo-mfa-key {
    flex: 1 1 12rem;
    margin: 0;
}

.bo-mfa-key-row .staff-btn {
    flex: 0 0 auto;
    align-self: center;
}

.bo-security-confirm {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-danger, #d32f2f) 28%, var(--color-border));
    border-radius: var(--radius-2, 8px);
    background: var(--color-danger-surface, #fef2f2);
}

.bo-security-confirm__text {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.45;
    color: var(--color-text);
}

.bo-security-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

@media (max-width: 560px) {
    .bo-security-panel__footer .staff-btn--primary,
    .bo-security-panel__footer .staff-btn--destructive {
        width: 100%;
        justify-content: center;
    }

    .bo-mfa-key-row .staff-btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- Onboarding / go-live walkthrough ----------------------------- */
.bo-content:has(.bo-onboarding) {
    background: var(--color-background);
}

.bo-onboarding {
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: var(--space-2) var(--space-6);
}

.bo-onboarding-shell {
    width: 100%;
}

.bo-onboarding-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--color-text) 7%, transparent);
    overflow: hidden;
}

.bo-onboarding-card__brand {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) var(--space-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
}

.bo-onboarding-card__brand-copy {
    min-width: 0;
}

.bo-onboarding-card__eyebrow {
    margin: 0 0 var(--space-1);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary-ink, var(--color-primary));
}

.bo-onboarding-card__garage {
    margin: 0;
    font-family: var(--font-family-ui, Inter, sans-serif);
    font-size: clamp(1.5rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--color-text-strong, var(--color-text));
}

.bo-onboarding-card__lede {
    margin: var(--space-2) 0 0;
    max-width: 52ch;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.bo-onboarding-progress {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.4rem;
    padding: 2.25rem var(--space-5) 0;
}

.bo-onboarding-car {
    position: absolute;
    top: 0.55rem;
    transform: translateX(-100%);
    color: var(--color-primary-action, var(--color-primary));
    line-height: 0;
    transition: left 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bo-onboarding-choice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--space-1);
    border-radius: var(--radius-2, 8px);
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 12%, var(--color-surface));
    color: var(--color-primary-action, var(--color-primary));
    transition: transform 160ms ease;
}

.bo-onboarding-choice:hover .bo-onboarding-choice__icon,
.bo-onboarding-choice.is-selected .bo-onboarding-choice__icon {
    transform: rotate(-8deg) scale(1.08);
}

.bo-onboarding-done {
    position: relative;
    overflow: hidden;
}

.bo-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.bo-confetti span {
    position: absolute;
    top: -12px;
    left: var(--x);
    width: 8px;
    height: 14px;
    border-radius: 2px;
    background: hsl(var(--h) 75% 58%);
    transform: rotate(var(--r));
    opacity: 0;
    animation: bo-confetti-fall 1.9s ease-in var(--d) 1 both;
}

@keyframes bo-confetti-fall {
    0% { opacity: 1; transform: translateY(0) rotate(var(--r)); }
    100% { opacity: 0; transform: translateY(24rem) rotate(calc(var(--r) + 540deg)); }
}

@media (prefers-reduced-motion: reduce) {
    .bo-confetti { display: none; }
    .bo-onboarding-car { transition: none; }
    .bo-onboarding-choice:hover .bo-onboarding-choice__icon,
    .bo-onboarding-choice.is-selected .bo-onboarding-choice__icon { transform: none; }
}

.bo-onboarding-progress__seg {
    height: 0.28rem;
    border-radius: 999px;
    background: var(--color-border);
    transition: background 180ms ease;
}

.bo-onboarding-progress__seg--on {
    background: var(--color-primary-action, var(--color-primary));
}

@media (prefers-reduced-motion: reduce) {
    .bo-onboarding-progress__seg { transition: none; }
}

.bo-onboarding-steps {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
}

.bo-onboarding-steps__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
    text-align: center;
    color: var(--color-text-muted);
}

.bo-onboarding-steps__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
}

.bo-onboarding-steps__label {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.bo-onboarding-steps__item.is-current {
    color: var(--color-primary-ink, var(--color-primary));
}

.bo-onboarding-steps__item.is-current .bo-onboarding-steps__marker {
    font-weight: 700;
}

.bo-onboarding-steps__item.is-done {
    color: var(--color-text);
}

.bo-onboarding-steps__item.is-done .bo-onboarding-steps__marker {
    color: var(--color-primary-ink, var(--color-primary));
}

.bo-onboarding-card__form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bo-onboarding-card__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 16rem;
}

.bo-onboarding-card__body--welcome {
    align-items: flex-start;
    min-height: 16rem;
}

.bo-onboarding-step-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.bo-onboarding-step-head__meta {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-primary-ink, var(--color-primary));
}

.bo-onboarding-card__title {
    margin: 0;
    font-family: var(--font-family-ui, Inter, sans-serif);
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--color-text-strong, var(--color-text));
}

.bo-onboarding-card__hint {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.bo-onboarding-fields {
    gap: var(--space-4);
}

.bo-onboarding-fields {
    max-width: none;
}

@media (min-width: 560px) {
    .bo-onboarding-fields .bo-cust-form-row--locality {
        grid-template-columns: 9rem minmax(0, 1fr);
    }

    .bo-onboarding-fields .bo-cust-form-row--thirds {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bo-onboarding-fields .bo-input {
    min-height: 2.75rem;
    border-radius: var(--radius-2, 8px);
    border-color: var(--color-border-strong, var(--color-border));
    background: var(--color-surface);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-surface) 80%, transparent);
}

.bo-onboarding-fields .bo-input:focus {
    border-color: var(--color-primary-action, var(--color-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 18%, transparent);
}

.bo-onboarding-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.bo-onboarding-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.bo-onboarding-choice:hover {
    border-color: var(--color-primary-action, var(--color-primary));
}

.bo-onboarding-choice input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.bo-onboarding-choice:has(input:focus-visible) {
    outline: 2px solid var(--color-primary-action, var(--color-primary));
    outline-offset: 2px;
}

.bo-onboarding-choice.is-selected {
    border-color: var(--color-primary-action, var(--color-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 18%, transparent);
}

.bo-onboarding-choice__title {
    font-size: 1rem;
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
}

.bo-onboarding-choice__desc {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.bo-onboarding-done__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.bo-onboarding-note {
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.bo-onboarding-logo__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
    .bo-onboarding-choice { transition: none; }
}

@media (max-width: 40rem) {
    .bo-onboarding-choices { grid-template-columns: 1fr; }
    .bo-onboarding-done__actions .staff-btn { width: 100%; justify-content: center; }
}

.bo-onboarding-preview {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.bo-onboarding-preview li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
}

.bo-onboarding-preview__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary-ink, var(--color-primary));
    font-size: 0.75rem;
    font-weight: 650;
}

.bo-onboarding-review {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 720px) {
    .bo-onboarding-review {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bo-onboarding-review__card {
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    background: color-mix(in srgb, var(--color-surface-2, var(--color-surface-muted)) 40%, var(--color-surface));
}

.bo-onboarding-review__card h3 {
    margin: 0 0 var(--space-3);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-onboarding-review__card p {
    margin: 0 0 0.3rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text);
    word-break: break-word;
}

.bo-onboarding-review__edit {
    margin-top: var(--space-2);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.bo-onboarding-missing {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface-muted));
}

.bo-onboarding-missing h3 {
    margin: 0 0 var(--space-2);
    font-size: 0.9375rem;
    color: var(--color-text-strong, var(--color-text));
}

.bo-onboarding-missing ul {
    margin: 0;
    padding-left: var(--space-4);
}

.bo-onboarding-missing button {
    padding: var(--space-1) 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.bo-onboarding-checklist-title {
    margin: var(--space-2) 0 0;
    font-size: 0.9375rem;
    font-weight: 750;
    color: var(--color-text-strong, var(--color-text));
}

.bo-onboarding-card .bo-onb-checklist {
    margin: 0;
    grid-template-columns: 1fr;
}

.bo-onboarding-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: auto;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
    background: color-mix(in srgb, var(--color-surface-2, var(--color-surface-muted)) 40%, var(--color-surface));
}

.bo-onboarding-skip {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}

.bo-onboarding-skip:focus-visible,
.bo-onboarding-review__edit:focus-visible,
.bo-onboarding-missing button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.bo-onboarding-skip:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.bo-onboarding-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-left: auto;
}

.bo-onboarding-card .staff-btn {
    transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 140ms ease, border-color 140ms ease;
}

.bo-onboarding-card .staff-btn:active {
    transform: scale(0.97);
}

@media (max-width: 560px) {
    .bo-onboarding-card__brand {
        flex-direction: column;
        padding: var(--space-5);
    }

    .bo-onboarding-steps__label {
        font-size: 0.6875rem;
    }

    .bo-onboarding-preview {
        grid-template-columns: 1fr;
    }

    .bo-onboarding-card__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .bo-onboarding-card__body {
        padding: var(--space-5);
    }

    .bo-onboarding-card__actions {
        margin-left: 0;
        width: 100%;
    }

    .bo-onboarding-card__actions .staff-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .bo-onboarding-card__actions .staff-btn--primary {
        flex: 1 1 100%;
    }
}

/* --- Privacy / AVG requests --------------------------------------- */
.bo-privacy-policy-text,
.ga-privacy-public__body {
    margin: 0;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text);
}

.ga-privacy-public {
    max-width: 42rem;
    margin: 0 auto;
    padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
}

.ga-privacy-public h1 {
    margin: 0 0 var(--space-4, 1rem);
    font-size: 1.5rem;
    font-weight: 750;
}

.ga-privacy-public__note {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.bo-privacy {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    max-width: none;
}

.bo-privacy-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
    gap: var(--space-4);
    align-items: start;
    width: 100%;
    min-width: 0;
}

@media (min-width: 72rem) {
    .bo-privacy-layout {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    }
}

.bo-privacy-layout > .bo-privacy-panel,
.bo-privacy-panel__header,
.bo-privacy-panel__body,
.bo-privacy-list,
.bo-privacy-rows,
.bo-privacy-row {
    min-width: 0;
}

.bo-privacy-panel {
    padding: 0;
    overflow: hidden;
}

.bo-privacy-panel__header {
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
}

.bo-privacy-list__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.bo-privacy-panel__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 750;
    line-height: 1.2;
    color: var(--color-text-strong, var(--color-text));
}

.bo-privacy-panel__hint {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.45;
    color: var(--color-text-muted);
}

.bo-privacy-panel__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-privacy-panel__body .bo-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-privacy-kinds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.bo-privacy-kind {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    min-height: 5.25rem;
    border-radius: var(--radius-2, 8px);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2, var(--color-surface-muted));
    color: inherit;
    cursor: pointer;
    transition: border-color var(--motion-duration-fast, 150ms) ease,
                background var(--motion-duration-fast, 150ms) ease,
                box-shadow var(--motion-duration-fast, 150ms) ease;
}

.bo-privacy-kind:hover {
    border-color: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 45%, var(--color-border));
}

.bo-privacy-kind:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
}

.bo-privacy-kind--active {
    border-color: var(--color-primary-action, var(--color-primary));
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 12%, var(--color-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 35%, transparent);
}

.bo-privacy-kind__name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-privacy-kind__desc {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--color-text-muted);
}

.bo-privacy-notes {
    min-height: 5.5rem;
    resize: vertical;
    line-height: 1.45;
}

.bo-privacy-panel__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
    background: color-mix(in srgb, var(--color-surface-2, var(--color-surface-muted)) 55%, transparent);
}

.bo-privacy-empty {
    padding: var(--space-6) var(--space-5);
    text-align: center;
}

.bo-privacy-empty__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-privacy-empty__body {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.45;
    color: var(--color-text-muted);
    max-width: 28rem;
    margin-inline: auto;
}

.bo-privacy-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bo-privacy-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
}

.bo-privacy-row__main {
    min-width: 0;
    flex: 1;
}

.bo-privacy-row__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.bo-privacy-row__kind {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-privacy-row__email {
    margin: var(--space-1) 0 0;
    font-size: 0.875rem;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.bo-privacy-row__meta {
    margin: var(--space-1) 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.bo-privacy-row__customer {
    margin: var(--space-1) 0 0;
    font-size: 0.8125rem;
}

.bo-privacy-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-end;
    min-width: min(100%, 12rem);
}

@media (max-width: 1100px) {
    .bo-privacy-row {
        flex-direction: column;
    }

    .bo-privacy-row__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.bo-privacy-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2, 8px);
    border: 1px solid var(--color-border-subtle, var(--color-border));
    background: color-mix(in srgb, var(--color-surface-2, var(--color-surface-muted)) 70%, transparent);
}

@media (max-width: 560px) {
    .bo-privacy-kinds {
        grid-template-columns: 1fr;
    }

    .bo-privacy-panel__footer .staff-btn--primary,
    .bo-privacy-row .staff-btn,
    .bo-privacy-row__actions .staff-btn {
        width: 100%;
        justify-content: center;
    }

    .bo-privacy-row {
        flex-direction: column;
    }

    .bo-privacy-row__actions {
        width: 100%;
    }
}

.bo-dash-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-dash-shortcut {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--motion-duration-fast) var(--motion-ease-standard),
                border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-dash-shortcut:hover {
    background: var(--color-primary-container);
    border-color: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 40%, var(--color-border));
    color: var(--color-primary-ink, var(--color-primary));
}

.bo-dash-shortcut--primary {
    background: var(--color-primary-action, var(--color-primary));
    border-color: var(--color-primary-action, var(--color-primary));
    color: #fff;
}

.bo-dash-shortcut--primary:hover {
    background: var(--color-primary-action-hover, var(--color-primary-hover));
    border-color: var(--color-primary-action-hover, var(--color-primary-hover));
    color: #fff;
}

.bo-dash-card {
    padding: var(--space-4);
    overflow: hidden;
}

@media (min-width: 960px) {
    .bo-dash-card {
        padding: var(--space-5);
    }
}

.bo-dash-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
}

@media (min-width: 960px) {
    .bo-dash-card__header {
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-3);
    }
}

.bo-dash-card__title {
    margin: 0;
    font-size: var(--font-size-lg, 1.125rem);
    line-height: var(--line-height-tight, 1.15);
    font-weight: 750;
    color: var(--color-text-strong, var(--color-text));
}

.bo-dash-card__subtitle {
    margin: 4px 0 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted);
}

.bo-dash-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-dash-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-items: stretch;
    padding: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
                box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

@media (min-width: 640px) {
    .bo-dash-item {
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: var(--space-3) var(--space-4);
    }
}

.bo-dash-item:hover {
    border-color: var(--color-border);
    box-shadow: var(--elevation-1);
}

.bo-dash-item--attention {
    border-color: var(--color-border);
    border-left: 3px solid var(--color-warning-text, #EF6C00);
    background: var(--color-surface);
}

.bo-dash-item__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bo-dash-item__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.bo-dash-item__primary {
    font-weight: 750;
    font-size: 1rem;
    color: var(--color-text-strong, var(--color-text));
    line-height: 1.2;
}

.bo-dash-item__secondary {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted);
    line-height: 1.35;
}

.bo-dash-item__title {
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
}

.bo-dash-item__meta {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-muted);
    line-height: 1.35;
}

.bo-dash-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    border: 1px solid transparent;
}

.bo-dash-chip--ok {
    background: var(--color-success-surface);
    border-color: var(--color-success-border);
    color: var(--color-success-text, #2E7D32);
}

.bo-dash-chip--warn {
    background: var(--color-warning-surface);
    border-color: var(--color-warning-border);
    color: var(--color-warning-text, #E65100);
}

.bo-dash-chip--neutral {
    background: var(--color-surface-2, #f7f8fa);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.bo-dash-chip--danger {
    background: var(--color-danger-surface, #FFEBEE);
    border-color: #FFCDD2;
    color: var(--color-danger);
}

.bo-dash-chip--offerte {
    background: var(--color-offerte-surface, var(--color-primary-container));
    border-color: var(--color-offerte-border, #C5D4E4);
    color: var(--color-offerte-ink, var(--color-primary-ink));
}

.bo-dash-chip--billing {
    background: var(--color-billing-surface, #EDE7F6);
    border-color: var(--color-billing-border, #D1C4E9);
    color: var(--color-billing-ink, #311B92);
}

.bo-dash-item__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}

@media (min-width: 640px) {
    .bo-dash-item__actions {
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
    }
}

.bo-dash-item__btn {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 0.875rem;
    width: 100%;
    justify-content: center;
}

@media (min-width: 640px) {
    .bo-dash-item__btn {
        min-height: 36px;
        width: auto;
    }
}

.bo-dash-empty {
    text-align: center;
    padding: var(--space-4) var(--space-3);
}

@media (min-width: 960px) {
    .bo-dash-empty {
        padding: var(--space-6) var(--space-4);
    }
}

.bo-dash-empty .bo-empty-state__title {
    margin-bottom: var(--space-2);
}

.bo-dash-empty .bo-empty-state__body {
    margin-bottom: var(--space-4);
}

.bo-dash-empty__cta {
    display: inline-flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}

/* BackOffice header quick jump / global search */
.bo-quickjump {
    max-width: 420px;
    width: 100%;
}

.bo-global-search {
    position: relative;
    flex: 1 1 240px;
    max-width: 28rem;
    min-width: 0;
}

.bo-global-search__field {
    position: relative;
    display: block;
    margin: 0;
}

.bo-global-search__icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--color-text-subtle);
    pointer-events: none;
}

.bo-global-search .bo-quickjump {
    width: 100%;
    max-width: none;
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem 0.5rem 2.35rem;
    background: var(--color-surface-2, var(--color-surface-muted));
    border-color: transparent;
    font-size: 0.875rem;
    transition:
        background var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
        border-color var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
        box-shadow var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease);
}

.bo-global-search .bo-quickjump::placeholder {
    color: var(--color-text-subtle);
}

.bo-global-search .bo-quickjump:hover {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.bo-global-search .bo-quickjump:focus {
    background: var(--color-surface);
    border-color: var(--color-primary);
}

.bo-global-search__field {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface-muted));
    transition:
        background var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
        border-color var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
        box-shadow var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease);
}

.bo-global-search__field:focus-within {
    background: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.bo-global-search .bo-quickjump {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.75rem;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.bo-global-search .bo-quickjump:hover,
.bo-global-search .bo-quickjump:focus {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.bo-global-search__clear {
    display: inline-grid;
    flex: 0 0 1.75rem;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 0.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.bo-global-search__clear:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
    color: var(--color-text-strong, var(--color-text));
}

.bo-global-search__clear:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
}

.bo-global-search__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: min(70vh, 28rem);
    overflow: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    box-shadow: var(--elevation-3, 0 8px 24px rgba(0, 0, 0, 0.12));
    padding: var(--space-2);
}

.bo-global-search__hint,
.bo-global-search__empty {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.bo-global-search__group {
    margin: 0 0 var(--space-2);
}

.bo-global-search__group-title {
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.bo-global-search__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: inherit;
    padding: 8px 10px;
    border-radius: var(--radius-1);
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.bo-global-search__item:hover,
.bo-global-search__item--active {
    background: var(--color-surface-2, var(--color-surface-muted));
}

.bo-global-search__item-title {
    font-weight: 650;
    font-size: 0.9375rem;
    color: var(--color-text-strong, var(--color-text));
}

.bo-global-search__item-meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

@media (max-width: 720px) {
    .bo-header {
        gap: var(--space-2, 8px);
        padding: 0 var(--space-3, 12px);
    }

    .bo-brand {
        font-size: 0.875rem;
        padding: 0.3rem 0.25rem;
    }

    .bo-global-search {
        flex: 1 1 auto;
        max-width: none;
    }

    .bo-user {
        display: none;
    }

    .bo-header-avatar {
        display: inline-flex;
    }
}

.bo-nav-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bo-nav-section__title {
    padding: 6px 12px 2px;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    line-height: 1.3;
}

.bo-nav-section:first-child .bo-nav-section__title {
    padding-top: 2px;
}

/* Shared list / detail shells */
.bo-list-shell__card {
    padding: var(--space-4);
}

.bo-list-shell__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.bo-list-shell__result-count {
    margin: 0 0 var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-detail-back {
    margin-bottom: var(--space-2);
}

.bo-detail-layout {
    display: grid;
    gap: var(--space-4);
}

.bo-detail-layout--single {
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .bo-detail-layout:not(.bo-detail-layout--single) {
        grid-template-columns: minmax(0, 1fr) 22rem;
        align-items: start;
    }

    .bo-detail-layout__aside {
        position: sticky;
        top: var(--space-4);
    }
}

.bo-detail-hero {
    padding: var(--space-4);
}

.bo-detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-2);
}

.bo-detail-tab {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-weight: 650;
    padding: 8px 12px;
    border-radius: var(--radius-1);
    cursor: pointer;
}

.bo-detail-tab:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
    color: var(--color-text);
}

.bo-detail-tab--active {
    background: var(--color-primary-container, var(--color-surface-2));
    color: var(--color-primary-ink, var(--color-primary));
}

.bo-detail-tab--locked,
.bo-detail-tab:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.bo-detail-tab--locked:hover,
.bo-detail-tab:disabled:hover {
    background: transparent;
    color: var(--color-text-muted);
}

.bo-wo-locked__body {
    padding: var(--space-2) 0;
}

.bo-wo-locked__copy {
    margin: var(--space-2) 0 var(--space-3);
    color: var(--color-text-muted);
    max-width: 36rem;
}

.bo-wo-locked__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-detail-tab__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--color-warning, #F9A825);
    color: #1a1a1a;
    font-size: 0.6875rem;
    font-weight: 750;
    line-height: 1;
}

.bo-sched-col__header {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Work order inline ops (assign + schedule) */
.bo-ops-panel {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-ops-panel--needs-plan {
    border-color: var(--color-success-border, #C8E6C9);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-success, #3d9a6a) 12%, transparent);
}

.bo-ops-panel .bo-wo-card__header {
    padding-bottom: var(--space-3);
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
}

.bo-ops-panel > .bo-wo-card__header .bo-wo-card__title {
    font-size: 1.125rem;
}

.bo-ops-status {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2, 8px);
    border: 1px solid var(--color-success-border, #C8E6C9);
    background: var(--color-success-surface, #E8F5E9);
}

.bo-ops-status__title {
    margin: 0 0 2px;
    font-size: 0.9375rem;
    font-weight: 750;
    color: var(--color-success-text, #1b7f4a);
}

.bo-ops-status__body {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.4;
}

.bo-ops-orphan {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2, 8px);
    border: 1px solid var(--color-warning-border, #FFE0B2);
    background: var(--color-warning-surface, #FFF3E0);
}

.bo-ops-orphan__title {
    margin: 0 0 var(--space-2);
    font-size: 0.8125rem;
    font-weight: 750;
    color: var(--color-warning-text, #E65100);
}

.bo-ops-orphan__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-ops-orphan__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.bo-ops-orphan__name {
    flex: 1;
    min-width: 0;
    font-weight: 650;
}

.bo-ops-orphan__btn {
    flex-shrink: 0;
}

.bo-ops-section-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 750;
    color: var(--color-text-strong, var(--color-text));
}

.bo-ops-section-meta {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.bo-ops-team,
.bo-ops-plan {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bo-ops-team__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.bo-ops-team__empty {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-ops-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-ops-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    padding: 0.4rem 0.45rem 0.4rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
}

.bo-ops-chip__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.bo-ops-chip__name {
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-ops-chip__meta {
    font-size: 0.6875rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.bo-ops-chip__remove {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.bo-ops-chip__remove:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
    color: var(--color-danger);
}

.bo-ops-chip__remove:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.bo-ops-team__add {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.bo-ops-team__add .bo-input {
    flex: 1;
    min-width: 12rem;
}

.bo-ops-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bo-ops-plan {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    scroll-margin-top: 5rem;
    gap: var(--space-4);
}

.bo-ops-plan--focus {
    outline: none;
}

.bo-ops-plan--focus .bo-ops-section--shop {
    border-color: var(--color-success, #3d9a6a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success, #3d9a6a) 18%, transparent);
}

.bo-ops-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
}

.bo-ops-section--appointment {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--color-primary, #1e3a5f) 4%, var(--color-surface)) 0%,
            var(--color-surface) 48%);
}

.bo-ops-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.bo-ops-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--color-text-strong, var(--color-text));
}

.bo-ops-section__lede {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.bo-ops-section__meta {
    flex-shrink: 0;
    margin-top: 0.15rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.03));
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.bo-ops-appt-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2, 8px);
    border: 1px solid color-mix(in srgb, var(--color-primary, #1e3a5f) 18%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary, #1e3a5f) 6%, var(--color-surface));
}

.bo-ops-appt-current__when {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.bo-ops-appt-current__date {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--color-text-muted);
    text-transform: capitalize;
}

.bo-ops-appt-current__time {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text-strong, var(--color-text));
    font-variant-numeric: tabular-nums;
}

.bo-ops-appt-current__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-2);
}

@media (max-width: 520px) {
    .bo-ops-appt-current {
        flex-direction: column;
        align-items: stretch;
    }

    .bo-ops-appt-current__actions {
        justify-content: space-between;
    }
}

.bo-ops-appt-current__badge {
    flex-shrink: 0;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary, #1e3a5f) 12%, transparent);
    color: var(--color-primary, #1e3a5f);
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bo-ops-appt-current__btn {
    min-height: 2.25rem;
    white-space: nowrap;
}

.bo-ops-appt-empty {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2, 8px);
    border: 1px dashed var(--color-border);
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.02));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.bo-ops-appt-empty__text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

.bo-ops-compose__grid--modal {
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .bo-ops-compose__grid--modal {
        grid-template-columns: 1fr 1fr;
    }

    .bo-ops-compose__grid--modal .bo-ops-compose__date {
        grid-column: 1 / -1;
    }
}

.bo-ops-plan__empty {
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-2, 8px);
    background: color-mix(in srgb, var(--color-success-surface, #E8F5E9) 55%, var(--color-surface));
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.bo-ops-plan__empty p {
    margin: 0;
}

.bo-ops-plan__empty p + p {
    margin-top: 2px;
}

.bo-ops-blocks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-ops-block-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-background, var(--color-surface));
}

@media (max-width: 640px) {
    .bo-ops-block-row {
        grid-template-columns: 1fr auto;
    }

    .bo-ops-block-row__who {
        grid-column: 1 / -1;
    }
}

.bo-ops-block-row__when {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.bo-ops-block-row__date {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--color-text-muted);
    text-transform: capitalize;
}

.bo-ops-block-row__time {
    font-size: 0.9375rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
}

.bo-ops-block-row__who {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.bo-ops-block-row__tech {
    font-size: 0.875rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-ops-block-row__remove {
    flex-shrink: 0;
    color: var(--color-danger);
}

.bo-ops-compose {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border-subtle, var(--color-border));
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.02));
}

.bo-ops-compose__title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.bo-ops-compose__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(8rem, 1fr)) repeat(2, minmax(5.5rem, 0.7fr)) minmax(9rem, 1.2fr) auto;
    gap: var(--space-2);
    align-items: end;
}

.bo-ops-compose__grid--appt {
    grid-template-columns: minmax(9rem, 1.2fr) repeat(2, minmax(5.5rem, 0.75fr)) auto;
}

@media (max-width: 900px) {
    .bo-ops-compose__grid,
    .bo-ops-compose__grid--appt {
        grid-template-columns: 1fr 1fr;
    }

    .bo-ops-compose__date,
    .bo-ops-compose__tech,
    .bo-ops-compose__action {
        grid-column: 1 / -1;
    }
}

.bo-ops-compose__action {
    display: flex;
    align-items: flex-end;
}

.bo-ops-compose__submit {
    white-space: nowrap;
    min-height: 2.5rem;
    width: 100%;
}

.bo-ops-compose__hint {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.bo-ops-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 960px) {
    .bo-ops-grid:not(.bo-wo-detail-aside .bo-ops-grid) {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.bo-wo-detail-aside .bo-ops-grid {
    grid-template-columns: 1fr;
}

.bo-ops-block__title {
    margin: 0 0 var(--space-3);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-ops-list {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-ops-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-ops-list__btn {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 0.875rem;
}

.bo-ops-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2);
}

.bo-ops-form-row .bo-input {
    flex: 1;
    min-width: 10rem;
}

.bo-ops-schedule-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.bo-dash-quick-assign {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    border: 1px dashed var(--color-warning-border);
}

.bo-dash-quick-assign__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    width: 100%;
}

@media (min-width: 640px) {
    .bo-dash-quick-assign__label {
        width: auto;
    }
}

.bo-dash-quick-assign__select {
    flex: 1;
    min-width: 9rem;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.875rem;
}

.bo-dash-quick-assign__feedback {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    color: #2E7D32;
}

.bo-dash-quick-assign__feedback--error {
    color: var(--color-danger);
}

/* Work orders list & detail */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bo-wo {
    gap: var(--space-5);
}

.bo-wo-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-wo-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.45rem;
    margin: 0 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    box-shadow: var(--elevation-1);
}

.bo-wo-filters--skeleton {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.bo-wo-filter {
    appearance: none;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.4rem;
    min-width: 6.5rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-text) 3.5%, var(--color-surface));
    color: var(--color-text);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motion-duration-fast, 120ms) ease,
                border-color var(--motion-duration-fast, 120ms) ease,
                color var(--motion-duration-fast, 120ms) ease;
}

.bo-wo-filter__label {
    min-width: 0;
}

.bo-wo-filter:hover {
    background: color-mix(in srgb, var(--color-primary-action, var(--color-text)) 10%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-primary-action, var(--color-border)) 35%, var(--color-border));
}

.bo-wo-filter--active {
    border-color: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 14%, var(--color-surface));
    color: var(--color-primary-ink, var(--color-primary));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 12%, transparent);
}

/* Action-needed filters: outline in job status color */
.bo-wo-filter--send:not(.bo-wo-filter--active) {
    background: transparent;
    border-color: var(--color-primary-action, var(--color-primary));
    border-width: 1.5px;
    color: var(--color-primary-ink, var(--color-primary));
}

.bo-wo-filter--send:not(.bo-wo-filter--active):hover {
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 18%, var(--color-surface));
    border-color: var(--color-primary-action-hover, var(--color-primary-hover));
    color: var(--color-primary-ink, var(--color-primary-hover));
}

.bo-wo-filter--plan:not(.bo-wo-filter--active) {
    background: transparent;
    border-color: var(--color-success, #3d9a6a);
    border-width: 1.5px;
    color: var(--color-success-text, #1b7f4a);
}

.bo-wo-filter--plan:not(.bo-wo-filter--active):hover {
    background: color-mix(in srgb, var(--color-success, #3d9a6a) 8%, var(--color-surface));
    border-color: var(--color-success, #3d9a6a);
}

.bo-wo-filter--progress:not(.bo-wo-filter--active) {
    background: transparent;
    border-color: #EF6C00;
    border-width: 1.5px;
    color: #BF360C;
}

.bo-wo-filter--progress:not(.bo-wo-filter--active):hover {
    background: color-mix(in srgb, #EF6C00 8%, var(--color-surface));
    border-color: #EF6C00;
}

.bo-wo-filter--send:not(.bo-wo-filter--active) .bo-wo-filter__count,
.bo-wo-filter--plan:not(.bo-wo-filter--active) .bo-wo-filter__count,
.bo-wo-filter--progress:not(.bo-wo-filter--active) .bo-wo-filter__count {
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: inherit;
}

.bo-wo-filter--send.bo-wo-filter--active {
    border-color: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 40%, var(--color-border));
    background: var(--color-primary-container, #e8f1fb);
    color: var(--color-primary-ink, var(--color-primary-hover, #004f9e));
}

.bo-wo-filter--await.bo-wo-filter--active {
    border-color: var(--color-warning-border, #FFE0B2);
    background: var(--color-warning-surface, #FFF3E0);
    color: #E65100;
}

.bo-wo-filter--plan.bo-wo-filter--active {
    border-color: var(--color-success-border, #C8E6C9);
    background: var(--color-success-surface, #E8F5E9);
    color: var(--color-success-text, #1b7f4a);
}

.bo-wo-filter--progress.bo-wo-filter--active {
    border-color: var(--color-warning-border, #FFE0B2);
    background: color-mix(in srgb, #EF6C00 12%, var(--color-surface));
    color: #BF360C;
}

.bo-wo-filter--done.bo-wo-filter--active {
    border-color: var(--color-success-border, #C8E6C9);
    background: color-mix(in srgb, var(--color-success, #3d9a6a) 10%, var(--color-surface));
    color: var(--color-success, #3d9a6a);
}

.bo-wo-filter--invoice:not(.bo-wo-filter--active) {
    background: transparent;
    border-color: var(--color-billing, #4527A0);
    border-width: 1.5px;
    color: var(--color-billing-ink, #311B92);
}

.bo-wo-filter--invoice:not(.bo-wo-filter--active):hover {
    background: color-mix(in srgb, var(--color-billing, #4527A0) 8%, var(--color-surface));
    border-color: var(--color-billing, #4527A0);
}

.bo-wo-filter--invoice:not(.bo-wo-filter--active) .bo-wo-filter__count {
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: inherit;
}

.bo-wo-filter--invoice.bo-wo-filter--active {
    border-color: var(--color-billing-border, #D1C4E9);
    background: var(--color-billing-surface, #EDE7F6);
    color: var(--color-billing-ink, #311B92);
}

.bo-wo-filter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    font-size: 0.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.bo-wo-filter--active .bo-wo-filter__count {
    background: color-mix(in srgb, currentColor 16%, transparent);
    color: inherit;
}

/* Work orders list — mobile / narrow pane */
.staff-page.bo-wo {
    container-type: inline-size;
    container-name: bo-wo;
}

@media (max-width: 720px) {
    .bo-content:has(.bo-wo) {
        padding: var(--space-4, 1rem) var(--space-4, 1rem) var(--space-5, 1.5rem);
    }

    .staff-page.bo-wo {
        gap: var(--space-3);
    }

    .staff-page.bo-wo .staff-page__header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .staff-page.bo-wo .staff-page__title {
        font-size: 1.375rem;
    }

    .staff-page.bo-wo .staff-page__subtitle {
        font-size: 0.875rem;
    }

    .staff-page.bo-wo .staff-toolbar {
        width: 100%;
    }

    .staff-page.bo-wo .staff-toolbar .staff-btn {
        width: 100%;
    }

    .bo-wo-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
        padding: 0.4rem;
        margin-bottom: var(--space-2);
        overflow: visible;
    }

    .bo-wo-filter {
        flex: initial;
        width: 100%;
        min-width: 0;
        min-height: 2.5rem;
        padding: 0.4rem 0.65rem;
        white-space: normal;
        text-align: left;
        line-height: 1.25;
    }

    .bo-wo-filter__label {
        overflow-wrap: anywhere;
    }

    .bo-wo-card {
        padding: var(--space-3);
        border-radius: var(--radius-2, 8px);
    }

    .bo-wo-toolbar {
        margin-bottom: var(--space-3);
        gap: var(--space-2);
    }

    .bo-wo-search {
        min-width: 0;
        width: 100%;
        flex: 1 1 100%;
    }

    .bo-wo-item {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .bo-wo-item__link {
        gap: var(--space-2);
        align-items: flex-start;
    }

    .bo-wo-item__chevron {
        align-self: center;
        margin-top: 0.15rem;
    }

    .bo-wo-item:has(.bo-wo-item__actions) .bo-wo-item__chevron {
        display: none;
    }

    .bo-wo-item__actions {
        width: 100%;
        justify-content: stretch;
        gap: var(--space-2);
    }

    .bo-wo-item__actions .staff-btn {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }
}

/* Same mobile layout when the page column is narrow inside a wide viewport */
@container bo-wo (max-width: 540px) {
    .staff-page__header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .staff-page__title {
        font-size: 1.375rem;
    }

    .staff-toolbar {
        width: 100%;
    }

    .staff-toolbar .staff-btn {
        width: 100%;
    }

    .bo-wo-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
        overflow: visible;
    }

    .bo-wo-filter {
        flex: initial;
        width: 100%;
        min-width: 0;
        min-height: 2.5rem;
        white-space: normal;
        text-align: left;
        line-height: 1.25;
    }

    .bo-wo-filter__label {
        overflow-wrap: anywhere;
    }

    .bo-wo-card {
        padding: var(--space-3);
    }

    .bo-wo-search {
        min-width: 0;
        width: 100%;
        flex: 1 1 100%;
    }

    .bo-wo-item {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .bo-wo-item__link {
        gap: var(--space-2);
        align-items: flex-start;
    }

    .bo-wo-item:has(.bo-wo-item__actions) .bo-wo-item__chevron {
        display: none;
    }

    .bo-wo-item__actions {
        width: 100%;
        justify-content: stretch;
    }

    .bo-wo-item__actions .staff-btn {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }
}

.bo-wo-stats {
    display: none;
}

.bo-wo-stat {
    display: none;
}

.bo-wo-card {
    padding: var(--space-5);
}

.bo-wo-card__header {
    margin-bottom: var(--space-4);
}

.bo-wo-card__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-card__subtitle {
    margin: var(--space-1) 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-wo-card__subtitle--spaced {
    margin: var(--space-3) 0 var(--space-2);
}

.bo-wo-tech-list__item--planned-only {
    border-style: dashed;
}

.bo-ops-panel .bo-field-error {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2, 8px);
    background: rgba(211, 47, 47, 0.08);
}

.bo-wo-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.bo-wo-search {
    flex: 1;
    min-width: min(100%, 16rem);
}

.bo-wo-search__input {
    width: 100%;
}

.bo-wo-result-count {
    margin: 0 0 var(--space-3);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-wo-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-wo-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
                background var(--motion-duration-fast) var(--motion-ease-standard),
                box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-wo-item:hover {
    border-color: var(--color-primary-action, var(--color-primary));
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 10%, var(--color-surface));
    box-shadow: var(--elevation-1);
}

.bo-wo-item:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
}

/* Send concept / status link — blue */
.bo-wo-item--send {
    border-color: color-mix(in srgb, var(--color-primary-ink, var(--color-primary)) 28%, var(--color-border));
    box-shadow:
        inset 3px 0 0 var(--color-primary-action, var(--color-primary)),
        0 1px 0 color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 10%, transparent);
    background: var(--color-primary-container, #e8f1fb);
}

.bo-wo-item--send:hover {
    border-color: var(--color-primary-action-hover, var(--color-primary-action, var(--color-primary)));
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 16%, var(--color-primary-container, var(--color-surface)));
    box-shadow:
        inset 3px 0 0 var(--color-primary-action-hover, var(--color-primary-action, var(--color-primary))),
        var(--elevation-1);
}

/* Rejected by customer — red, resend needed */
.bo-wo-item--reject {
    border-color: color-mix(in srgb, var(--color-danger, #C62828) 28%, var(--color-border));
    box-shadow:
        inset 3px 0 0 var(--color-danger, #C62828),
        0 1px 0 color-mix(in srgb, var(--color-danger, #C62828) 10%, transparent);
    background: var(--color-danger-surface, #FFEBEE);
}

.bo-wo-item--reject:hover {
    border-color: var(--color-danger, #C62828);
    background: color-mix(in srgb, #FFEBEE 65%, var(--color-surface));
    box-shadow:
        inset 3px 0 0 var(--color-danger, #C62828),
        var(--elevation-1);
}

/* Plan in / assign technicians — green */
.bo-wo-item--plan {
    border-color: var(--color-success-border, #C8E6C9);
    box-shadow:
        inset 3px 0 0 var(--color-success, #3d9a6a),
        0 1px 0 color-mix(in srgb, var(--color-success, #3d9a6a) 12%, transparent);
    background: var(--color-success-surface, #E8F5E9);
}

.bo-wo-item--plan:hover {
    border-color: var(--color-success, #3d9a6a);
    background: color-mix(in srgb, var(--color-success-surface, #E8F5E9) 70%, var(--color-surface));
    box-shadow:
        inset 3px 0 0 var(--color-success, #3d9a6a),
        var(--elevation-1);
}

/* Both actions: plan urgency on the edge, soft blue wash */
.bo-wo-item--send.bo-wo-item--plan {
    box-shadow:
        inset 3px 0 0 var(--color-success, #3d9a6a),
        0 1px 0 color-mix(in srgb, var(--color-success, #3d9a6a) 12%, transparent);
    background: linear-gradient(
        105deg,
        var(--color-success-surface, #E8F5E9) 0%,
        var(--color-primary-container, var(--color-primary-container, #e8f1fb)) 72%
    );
}

.bo-wo-item--send.bo-wo-item--plan:hover {
    border-color: var(--color-success, #3d9a6a);
    box-shadow:
        inset 3px 0 0 var(--color-success, #3d9a6a),
        var(--elevation-1);
}

/* In uitvoering (planned) — amber */
.bo-wo-item--progress {
    border-color: var(--color-warning-border, #FFE0B2);
    box-shadow:
        inset 3px 0 0 var(--color-warning-text, #EF6C00),
        0 1px 0 color-mix(in srgb, var(--color-warning-text, #EF6C00) 12%, transparent);
    background: color-mix(in srgb, var(--color-warning-text, #EF6C00) 10%, var(--color-surface));
}

.bo-wo-item--progress:hover {
    border-color: var(--color-warning-text, #EF6C00);
    background: color-mix(in srgb, var(--color-warning-text, #EF6C00) 14%, var(--color-surface));
    box-shadow:
        inset 3px 0 0 var(--color-warning-text, #EF6C00),
        var(--elevation-1);
}

/* Pending timesheet review — warn accent when that is the open action */
.bo-wo-item--time {
    border-color: color-mix(in srgb, var(--color-warning-text, #F9A825) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning-text, #F9A825) 10%, var(--color-surface));
    box-shadow:
        inset 3px 0 0 var(--color-warning-text, #F9A825),
        0 1px 0 color-mix(in srgb, var(--color-warning-text, #F9A825) 12%, transparent);
}

.bo-wo-item--time:hover {
    border-color: var(--color-warning-text, #F9A825);
    background: color-mix(in srgb, var(--color-warning-text, #F9A825) 14%, var(--color-surface));
    box-shadow:
        inset 3px 0 0 var(--color-warning-text, #F9A825),
        var(--elevation-1);
}

/* Ready for invoicing — purple, distinct from offerte send (blue) */
.bo-wo-item--invoice {
    border-color: var(--color-billing-border, #D1C4E9);
    background: var(--color-billing-surface, #EDE7F6);
    box-shadow:
        inset 3px 0 0 var(--color-billing, #4527A0),
        0 1px 0 color-mix(in srgb, var(--color-billing, #4527A0) 12%, transparent);
}

.bo-wo-item--invoice:hover {
    border-color: var(--color-billing, #4527A0);
    background: color-mix(in srgb, var(--color-billing-surface, #EDE7F6) 70%, var(--color-surface));
    box-shadow:
        inset 3px 0 0 var(--color-billing, #4527A0),
        var(--elevation-1);
}

.bo-wo-item__main {
    flex: 1;
    min-width: 0;
}

.bo-wo-item__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 2px;
}

.bo-wo-item__plate {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-item__stage {
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted, var(--color-muted));
}

.bo-wo-item__action-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.2;
}

.bo-wo-item__action-chip--send {
    background: var(--color-primary-action, var(--color-primary));
}

.bo-wo-item__action-chip--reject {
    background: var(--color-danger, #C62828);
}

.bo-wo-item__action-chip--plan {
    background: var(--color-success, #3d9a6a);
}

.bo-wo-item__action-chip--progress {
    background: #EF6C00;
}

.bo-wo-item__action-chip--time {
    background: #F9A825;
    color: #1a1a1a;
}

.bo-wo-item__action-chip--invoice {
    background: var(--color-billing, #4527A0);
}

.bo-wo-item__time-pending {
    color: #B28704;
    font-weight: 650;
}

.bo-wo-item__invoice-pending {
    color: var(--color-billing-ink, #311B92);
    font-weight: 650;
}

.bo-wo-item__customer {
    font-size: 0.9375rem;
    color: var(--color-text);
    margin-bottom: 4px;
}

.bo-wo-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-wo-item__dot {
    opacity: 0.5;
}

.bo-wo-item__flag {
    font-weight: 700;
    color: var(--color-warning-text, #E65100);
}

.bo-wo-item--send .bo-wo-item__plate {
    color: var(--color-primary-ink, var(--color-primary-hover, #004f9e));
}

.bo-wo-item--reject .bo-wo-item__plate {
    color: #B71C1C;
}

.bo-wo-item--plan:not(.bo-wo-item--send):not(.bo-wo-item--reject) .bo-wo-item__plate {
    color: var(--color-success-text, #1b7f4a);
}

.bo-wo-item--send .bo-wo-send {
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary-action, #0d47a1) 35%, transparent);
}

.bo-wo-item--reject .bo-wo-reject-resend {
    background: var(--color-danger, #C62828);
    border-color: var(--color-danger, #C62828);
    color: #fff;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-danger, #C62828) 28%, transparent);
}

.bo-wo-item--reject .bo-wo-reject-resend:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-danger, #C62828) 88%, #000);
    border-color: color-mix(in srgb, var(--color-danger, #C62828) 88%, #000);
    color: #fff;
}

.bo-wo-item--plan:not(.bo-wo-item--send):not(.bo-wo-item--reject) .bo-wo-plan {
    background: var(--color-success, #3d9a6a);
    border-color: var(--color-success, #3d9a6a);
    color: #fff;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-success, #3d9a6a) 28%, transparent);
}

.bo-wo-item--plan:not(.bo-wo-item--send):not(.bo-wo-item--reject) .bo-wo-plan:hover {
    background: color-mix(in srgb, var(--color-success, #3d9a6a) 88%, #000);
    border-color: color-mix(in srgb, var(--color-success, #3d9a6a) 88%, #000);
    color: #fff;
}

.bo-wo-plan {
    flex-shrink: 0;
    text-decoration: none;
}

.bo-wo-item--plan:not(.bo-wo-item--send):not(.bo-wo-item--reject) .bo-wo-item__chevron {
    color: var(--color-success, #3d9a6a);
}

.bo-wo-item--progress .bo-wo-item__plate {
    color: #BF360C;
}

.bo-wo-item--progress .bo-wo-item__chevron {
    color: #EF6C00;
}

.bo-wo-item__chevron {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--color-primary-ink, var(--color-primary));
    opacity: 0.75;
}

.bo-wo-item:hover .bo-wo-item__chevron {
    opacity: 1;
    transform: translateX(2px);
}

.bo-wo-item__link {
    flex: 1;
    min-width: 0;
    width: 100%;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    text-decoration: none;
    color: inherit;
}

.bo-wo-item--reject .bo-wo-item__chevron {
    color: var(--color-danger, #C62828);
}

.bo-wo-send {
    flex-shrink: 0;
}

.bo-wo-invoice.staff-btn--primary,
.bo-wo-item--invoice .bo-wo-invoice.staff-btn--primary {
    background: var(--color-billing, #4527A0);
    border-color: var(--color-billing, #4527A0);
    color: #fff;
}

.bo-wo-invoice.staff-btn--primary:hover:not(:disabled),
.bo-wo-item--invoice .bo-wo-invoice.staff-btn--primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-billing, #4527A0) 88%, #000);
    border-color: color-mix(in srgb, var(--color-billing, #4527A0) 88%, #000);
}

.bo-wo-reject-resend {
    flex-shrink: 0;
}

.bo-wo-item__actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

/* Re-assert mobile item layout after base .bo-wo-item (cascade) */
@media (max-width: 720px) {
    .bo-wo-item {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .bo-wo-item__link {
        gap: var(--space-2);
        align-items: flex-start;
    }

    .bo-wo-item__chevron {
        align-self: center;
        margin-top: 0.15rem;
    }

    .bo-wo-item:has(.bo-wo-item__actions) .bo-wo-item__chevron {
        display: none;
    }

    .bo-wo-item__actions {
        width: 100%;
        justify-content: stretch;
        gap: var(--space-2);
    }

    .bo-wo-item__actions .staff-btn {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }
}

@container bo-wo (max-width: 540px) {
    .bo-wo-item {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .bo-wo-item__link {
        gap: var(--space-2);
        align-items: flex-start;
    }

    .bo-wo-item:has(.bo-wo-item__actions) .bo-wo-item__chevron {
        display: none;
    }

    .bo-wo-item__actions {
        width: 100%;
        justify-content: stretch;
    }

    .bo-wo-item__actions .staff-btn {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }
}

/* Work order creation modal */
.bo-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.bo-modal:has(#bo-tech-extra-seat-title) + .bo-modal:has(#bo-tech-invite-title) {
    display: none;
}

.bo-modal--stacked {
    z-index: 90;
}

.bo-rdw-lookup {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2, 0.5rem);
}

.bo-rdw-lookup .bo-field {
    flex: 1 1 12rem;
    min-width: 0;
}

.bo-rdw-lookup__button {
    flex: 0 0 auto;
    margin-bottom: 0.15rem;
    align-self: flex-end;
    min-height: 2.75rem;
}

.bo-rdw-lookup__status--ok {
    color: var(--color-success, #3d9a6a);
}

.bo-veh-details {
    gap: var(--space-4, 1rem);
}

.bo-veh-details__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
    padding-top: var(--space-2, 0.5rem);
    border-top: 1px solid var(--color-border, #e0e0e0);
}

.bo-veh-details__section:first-child {
    padding-top: 0;
    border-top: none;
}

.bo-veh-details__section .bo-wo-wizard__section-title {
    margin: 0;
}

/* Odometer value + inline km/mi segment (vehicle create/edit) */
.bo-odometer-combo {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 2.5rem;
    border: 1px solid var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface, #fff));
    overflow: hidden;
    box-sizing: border-box;
    transition:
        border-color var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
        box-shadow var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease);
}

.bo-odometer-combo:focus-within {
    border-color: var(--color-primary-action, var(--color-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 16%, transparent);
}

.bo-odometer-combo--error {
    border-color: var(--color-danger, #c62828);
}

.bo-odometer-combo--error:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger, #c62828) 18%, transparent);
}

.bo-odometer-combo__input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.85rem;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}

.bo-odometer-combo__input::placeholder {
    color: var(--color-text-subtle, var(--color-text-muted));
}

.bo-odometer-combo__input::-webkit-outer-spin-button,
.bo-odometer-combo__input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.bo-odometer-combo__input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.bo-odometer-combo__units {
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    margin: 4px;
    padding: 0;
    border: 1.5px solid var(--color-border-strong, var(--color-border));
    border-radius: calc(var(--radius-2, 8px) - 1px);
    background: var(--color-surface-muted, var(--color-surface-2, #f3f4f6));
    overflow: hidden;
}

.bo-odometer-combo__unit {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.65rem;
    min-height: 1.9rem;
    margin: 0;
    padding: 0 0.65rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-muted, #6b7280);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    line-height: 1;
    cursor: pointer;
    transition:
        color var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease),
        background-color var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease);
}

.bo-odometer-combo__unit + .bo-odometer-combo__unit {
    border-left: 1.5px solid var(--color-border-strong, var(--color-border));
}

.bo-odometer-combo__unit:hover {
    color: var(--color-text-strong, var(--color-text));
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 8%, transparent);
}

.bo-odometer-combo__unit.is-active {
    background: var(--color-primary-action, var(--color-primary));
    color: #fff;
}

.bo-odometer-combo__unit:focus-visible {
    outline: 2px solid transparent;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 55%, transparent);
    z-index: 1;
}

.bo-odometer-help {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--color-text-muted, #6b7280);
}

@media (min-width: 560px) {
    .bo-cust-form-row--odometer {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }
}

/* Dutch license plate chrome for kenteken input */
.bo-nl-plate {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 22rem;
    height: 2.75rem;
    border: 2.5px solid #1a1a1a;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(180deg, #f7d117 0%, #efc20a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 1px 2px rgba(15, 23, 42, 0.12);
}

.bo-nl-plate:focus-within {
    outline: 2px solid var(--color-primary, var(--color-primary, #0066cc));
    outline-offset: 2px;
}

.bo-nl-plate--error {
    border-color: var(--color-danger, #d32f2f);
    box-shadow: 0 0 0 1px var(--color-danger, #d32f2f);
}

.bo-nl-plate__eu {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.35rem;
    width: 2.35rem;
    padding: 0.25rem 0.2rem;
    background: #003399;
    line-height: 1;
    user-select: none;
}

.bo-nl-plate__country {
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
}

.bo-nl-plate__input {
    position: absolute;
    inset: 0 0 0 2.35rem;
    width: auto;
    height: auto;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0 0.75rem 0 0.65rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: #1a1a1a;
    outline: 2px solid transparent;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.bo-nl-plate__input::placeholder {
    color: rgba(26, 26, 26, 0.28);
    letter-spacing: 0.12em;
    font-weight: 700;
}

.bo-nl-plate__input--error {
    color: #7f1d1d;
}

.bo-modal__backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(15, 23, 42, 0.48);
    cursor: pointer;
}

.bo-modal__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(56rem, calc(100vw - 2rem));
    max-height: min(92vh, 60rem);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    box-shadow: var(--elevation-3, 0 16px 40px rgba(15, 23, 42, 0.22));
}

.bo-modal__panel--sm .bo-wo-job__hours-input {
    max-width: none;
    width: 100%;
}

.bo-modal__panel--sm .bo-labor-calc {
    margin-top: var(--space-3);
}

.bo-modal__panel--md {
    width: min(36rem, calc(100vw - 2rem));
    max-height: min(90vh, 44rem);
}

.bo-modal__panel--lg {
    width: min(52rem, calc(100vw - 1.25rem));
    max-height: min(92vh, 48rem);
}

@media (max-width: 640px) {
    .bo-modal__panel--lg.bo-wo-material-add {
        width: calc(100vw - 0.75rem);
        max-height: min(94vh, 100dvh - 0.75rem);
        border-radius: var(--radius-2, 8px);
    }
}

.bo-modal__panel--pdf {
    width: min(56rem, calc(100vw - 1.25rem));
    height: min(92vh, 52rem);
    max-height: min(92vh, 52rem);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.bo-modal__panel--pdf .bo-modal__header {
    flex-shrink: 0;
}

.bo-modal__panel--media {
    width: min(64rem, calc(100vw - 1.25rem));
    height: min(92vh, 56rem);
    max-height: min(92vh, 56rem);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.bo-modal__panel--media .bo-modal__header {
    flex-shrink: 0;
    padding: var(--space-4);
}

.bo-wo-media-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.bo-wo-media-zoom-label {
    min-width: 3rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.bo-wo-media-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 var(--space-4) var(--space-4);
    border-radius: var(--radius-2, 8px);
    background: #0f1218;
    overflow: hidden;
    touch-action: none;
}

.bo-wo-media-stage--pannable .bo-wo-media-stage__pan {
    cursor: grab;
}

.bo-wo-media-stage--dragging .bo-wo-media-stage__pan {
    cursor: grabbing;
}

.bo-wo-media-stage__pan {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--space-4);
    user-select: none;
}

.bo-wo-media-stage__img {
    max-width: min(100%, 56rem);
    max-height: min(72vh, 44rem);
    object-fit: contain;
    transform-origin: center center;
    transition: transform 80ms ease;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.bo-wo-media-stage--dragging .bo-wo-media-stage__img {
    transition: none;
}

.bo-wo-media-stage__video {
    width: min(100%, 56rem);
    max-height: min(72vh, 44rem);
    background: #000;
}

.bo-wo-pdf-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.bo-wo-pdf-frame-wrap {
    flex: 1;
    min-height: 0;
    padding: 0 var(--space-4) var(--space-4);
}

.bo-wo-pdf-frame {
    width: 100%;
    height: 100%;
    min-height: 24rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, #f3f4f6);
}

.bo-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 1.25rem 1.25rem 0.75rem;
}

.bo-modal__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 750;
    color: var(--color-text-strong, var(--color-text));
}

.bo-modal__subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-modal__terms {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-modal__terms a {
    color: inherit;
    text-decoration: underline;
}

.bo-modal__close {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: var(--radius-2, 8px);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.bo-modal__close:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
    color: var(--color-text);
}

.bo-modal__steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 0.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}

.bo-modal__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    min-width: 3.5rem;
}

.bo-modal__step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    border: 2px solid var(--color-border-strong, var(--color-border));
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 750;
    line-height: 1;
}

.bo-modal__step-label {
    font-size: 0.6875rem;
    font-weight: 650;
    color: var(--color-text-muted);
    text-align: center;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.bo-modal__step-line {
    flex: 1 1 0.75rem;
    min-width: 0.75rem;
    height: 2px;
    margin-top: 0.85rem;
    background: var(--color-border);
}

.bo-modal__step-line--done {
    background: var(--color-primary-action, var(--color-primary));
}

.bo-modal__step--done .bo-modal__step-marker {
    border-color: var(--color-primary);
    background: var(--color-primary-action, var(--color-primary));
    color: #fff;
}

.bo-modal__step--done .bo-modal__step-label {
    color: var(--color-text);
}

.bo-modal__step--current .bo-modal__step-marker {
    border-color: var(--color-primary);
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18);
}

.bo-modal__step--current .bo-modal__step-label {
    color: var(--color-primary);
    font-weight: 750;
}

.bo-modal__body {
    overflow-y: auto;
    padding: 1.25rem;
}

.bo-wo-wizard {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-wo-wizard__validity {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
    margin: 0 0 var(--space-4, 1rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-muted, var(--color-background));
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.bo-wo-wizard__validity--on {
    border-color: color-mix(in srgb, var(--color-primary-ink, var(--color-primary)) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary-container, var(--color-primary)) 55%, var(--color-surface));
    box-shadow: inset 3px 0 0 var(--color-primary-action, var(--color-primary));
}

.bo-wo-wizard__validity-toggle {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.bo-wo-wizard__validity-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding-top: 0;
}

.bo-wo-wizard__validity-title {
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-wizard__validity-hint {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text-muted);
}

.bo-wo-wizard__validity-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    padding-left: calc(1.125rem + 0.75rem);
}

.bo-wo-wizard__validity-field .bo-label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.bo-wo-wizard__validity-input {
    width: 5.5rem;
    min-height: 2.25rem;
}

.bo-wo-wizard__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
}

.bo-wo-wizard__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-wo-wizard__toolbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.bo-wo-wizard__count {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.01em;
}

.bo-wo-wizard__picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bo-wo-wizard__pick {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.35rem 0.55rem 0.35rem 0.7rem;
    border: 1px solid rgba(0, 102, 204, 0.28);
    border-radius: 999px;
    background: rgba(0, 102, 204, 0.08);
    color: var(--color-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
}

.bo-wo-wizard__pick:hover {
    background: rgba(0, 102, 204, 0.14);
}

.bo-wo-wizard__pick span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-wo-wizard__pick-remove {
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.75;
}

.bo-wo-wizard__options {
    display: flex;
    flex-direction: column;
    max-height: min(28rem, 52vh);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-wo-wizard__option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.875rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.bo-wo-wizard__option:last-child {
    border-bottom: none;
}

.bo-wo-wizard__option:hover {
    background: rgba(0, 102, 204, 0.04);
}

.bo-wo-wizard__option--selected {
    background: rgba(0, 102, 204, 0.08);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.bo-wo-wizard__option--selected:hover {
    background: rgba(0, 102, 204, 0.1);
}

.bo-wo-wizard__option-body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    min-width: 0;
    flex-wrap: wrap;
}

.bo-wo-wizard__option-name {
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
    line-height: 1.3;
}

.bo-wo-wizard__option-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bo-wo-wizard__typeahead {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-wo-wizard__hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-wo-wizard__results {
    display: flex;
    flex-direction: column;
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-wo-wizard__result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.bo-wo-wizard__result:last-child {
    border-bottom: none;
}

.bo-wo-wizard__result:hover,
.bo-wo-wizard__result:focus-visible {
    background: rgba(0, 102, 204, 0.06);
    outline: 2px solid transparent;
}

.bo-wo-wizard__result-name {
    font-weight: 650;
}

.bo-wo-wizard__result-meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-wo-wizard__selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: rgba(0, 102, 204, 0.04);
}

.bo-wo-wizard__selected-label {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bo-wo-wizard__selected-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-wizard__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 0.25rem;
}

.bo-wo-wizard__actions-spacer {
    flex: 1 1 auto;
    min-width: 0.5rem;
}

.bo-wo-wizard__review-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 560px) {
    .bo-wo-wizard__review-meta {
        grid-template-columns: 1fr 1fr;
    }
}

.bo-wo-wizard__review-card {
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: rgba(0, 102, 204, 0.03);
}

.bo-wo-wizard__review-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.bo-wo-wizard__review-value {
    font-size: 1.0625rem;
    font-weight: 750;
    color: var(--color-text-strong, var(--color-text));
    line-height: 1.25;
}

.bo-wo-wizard__review-sub {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-wo-wizard__review-sub--warn {
    color: #E65100;
    font-weight: 650;
}

.bo-wo-wizard__review-jobs {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0.875rem 1rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-wo-wizard__review-jobs-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-wizard__review-jobs-head span:last-child {
    color: var(--color-text-muted);
    font-weight: 650;
}

.bo-wo-wizard__review-lines {
    margin-bottom: 0;
}

.bo-wo-wizard__review-totals {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-4);
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.bo-wo-wizard__review-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}

.bo-wo-wizard__review-total-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.bo-wo-wizard__review-total-value {
    font-size: 1rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.bo-wo-wizard__review-total--price .bo-wo-wizard__review-total-value {
    font-size: 1.125rem;
    color: var(--color-primary);
}

.bo-wo-wizard__materials {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bo-wo-wizard__materials--review {
    margin-bottom: 0;
}

.bo-wo-wizard__materials--review .bo-wo-wizard__material {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 8.75rem;
    align-items: center;
    column-gap: var(--space-3);
    flex-wrap: nowrap;
}

.bo-wo-wizard__materials--review .bo-wo-wizard__material-meta {
    justify-self: end;
}

.bo-wo-wizard__material-jobs {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 0.25rem;
}

.bo-wo-wizard__material-job {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    overflow: hidden;
}

.bo-wo-wizard__material-job--open {
    border-color: var(--color-border-strong, var(--color-border));
}

.bo-wo-wizard__material-job-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    appearance: none;
    border: 0;
    background: transparent;
    margin: 0;
    padding: 0.85rem 0.9rem;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    outline: none;
    transition: background var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease);
}

.bo-wo-wizard__material-job-toggle:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
}

.bo-wo-wizard__material-job-toggle:focus-visible {
    background: var(--color-surface-2, var(--color-surface-muted));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 55%, transparent);
}

.bo-wo-wizard__material-job-toggle-main {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.bo-wo-wizard__material-job-chevron {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.bo-wo-wizard__material-job--open .bo-wo-wizard__material-job-chevron {
    transform: rotate(45deg);
}

.bo-wo-wizard__material-job-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.bo-wo-wizard__material-job-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-wizard__material-job-count {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.bo-wo-wizard__material-job-body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0 0.9rem 0.9rem;
}

.bo-wo-wizard__material {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-muted, #f7f8fa);
}

.bo-wo-wizard__material-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    min-width: 0;
}

.bo-wo-wizard__material-qty {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.bo-wo-wizard__material-name {
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-wizard__material-action {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-wo-wizard__material-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.bo-wo-wizard__material-remove {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1rem 0.25rem;
}

.bo-wo-wizard__material-remove:hover,
.bo-wo-wizard__material-remove:focus-visible {
    color: var(--color-danger, #c62828);
}

.bo-wo-wizard__material-add {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 0.25rem;
    padding: 0.85rem 0.9rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-wo-wizard__material-source-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

.bo-wo-wizard__material-tab {
    appearance: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 650;
    padding: 0.5rem 0.65rem;
    cursor: pointer;
}

.bo-wo-wizard__material-tab:hover,
.bo-wo-wizard__material-tab:focus-visible {
    border-color: var(--color-primary-action, var(--color-primary));
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-wizard__material-tab--on {
    border-color: var(--color-primary-action, var(--color-primary));
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 18%, var(--color-surface));
    color: var(--color-text-strong, var(--color-primary-ink, var(--color-primary)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 22%, transparent);
}

.bo-wo-wizard__material-nums {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.bo-wo-wizard__product-hits {
    display: flex;
    flex-direction: column;
    max-height: 10rem;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-wo-wizard__product-hit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    appearance: none;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    text-align: left;
    font: inherit;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
}

.bo-wo-wizard__product-hit:last-child {
    border-bottom: 0;
}

.bo-wo-wizard__product-hit:hover,
.bo-wo-wizard__product-hit:focus-visible,
.bo-wo-wizard__product-hit--on {
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 14%, var(--color-surface));
}

.bo-wo-wizard__product-hit-name {
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-wizard__discount {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--color-border);
}

.bo-wo-wizard__discount-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
}

.bo-wo-wizard__discount-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
    min-width: 4.75rem;
}

.bo-wo-wizard__discount-stack {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.bo-wo-wizard__discount-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.25rem;
}

.bo-wo-wizard__discount-seg {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: var(--color-surface-muted, #f5f5f7);
    border: 1px solid rgba(29, 29, 31, 0.08);
}

.bo-wo-wizard__discount-seg--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.bo-wo-wizard__discount-seg--3 .bo-wo-wizard__discount-seg-btn {
    padding: 0.28rem 0.45rem;
    font-size: 0.6875rem;
}

.bo-wo-wizard__discount-seg-btn {
    appearance: none;
    border: 0;
    margin: 0;
    min-width: 2.35rem;
    height: 1.85rem;
    padding: 0 0.65rem;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.bo-wo-wizard__discount-seg-btn:hover,
.bo-wo-wizard__discount-seg-btn:focus-visible {
    color: var(--color-text);
}

.bo-wo-wizard__discount-seg-btn--on {
    background: var(--color-surface, #fff);
    color: var(--color-text-strong, var(--color-text));
    box-shadow: 0 1px 2px rgba(29, 29, 31, 0.08);
}

.bo-wo-wizard__discount-field {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface, #fff);
}

.bo-wo-wizard__discount-field:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.bo-wo-wizard__discount-input {
    width: 4.75rem;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
    padding: 0.35rem 0;
}

.bo-wo-wizard__discount-input::placeholder {
    color: var(--color-text-muted);
    font-weight: 500;
    opacity: 1;
}

.bo-wo-wizard__discount-suffix {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.bo-wo-wizard__discount-preview {
    margin-left: auto;
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.bo-wo-wizard__review-lines--discount.bo-wp-lines .bo-wp-lines__head,
.bo-wo-wizard__review-lines--discount.bo-wp-lines .bo-wp-lines__row {
    /* Fixed tracks so head + rows share the same column edges (separate grids). */
    grid-template-columns: minmax(0, 1fr) 4.75rem 6.25rem 8.75rem;
    align-items: center;
    column-gap: var(--space-3);
}

.bo-wo-wizard__review-lines--discount .bo-wp-lines__head > :nth-child(n + 2),
.bo-wo-wizard__review-lines--discount .bo-wp-lines__hours,
.bo-wo-wizard__review-lines--discount .bo-wp-lines__price,
.bo-wo-wizard__review-lines--discount .bo-wo-wizard__row-discount {
    justify-self: end;
    text-align: right;
}

.bo-wo-wizard__review-lines--discount .bo-wp-lines__row {
    min-height: 2.75rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.bo-wo-wizard__row-discount {
    justify-self: end;
    width: 100%;
    min-width: 0;
}

.bo-wo-wizard__row-discount-inner {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
}

.bo-wo-wizard__row-discount-inner .bo-wo-wizard__discount-seg {
    flex: 0 0 auto;
    gap: 1px;
    padding: 1px;
}

.bo-wo-wizard__row-discount-inner .bo-wo-wizard__discount-seg-btn {
    min-width: 1.65rem;
    height: 1.55rem;
    padding: 0 0.35rem;
    font-size: 0.6875rem;
}

.bo-wo-wizard__discount-field--row {
    flex: 0 0 auto;
    width: 4.75rem;
    height: 1.7rem;
    padding: 0 0.45rem;
    gap: 0;
}

.bo-wo-wizard__discount-field--row .bo-wo-wizard__discount-input {
    width: 100%;
    min-width: 0;
    height: 100%;
    font-size: 0.8125rem;
    text-align: right;
    /* Keep spinner chrome from eating value space. */
    appearance: textfield;
    -moz-appearance: textfield;
}

.bo-wo-wizard__discount-field--row .bo-wo-wizard__discount-input::-webkit-outer-spin-button,
.bo-wo-wizard__discount-field--row .bo-wo-wizard__discount-input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.bo-wo-wizard__row-discount--material {
    margin-top: 0.4rem;
    width: 100%;
}

.bo-wo-wizard__row-discount--material .bo-wo-wizard__row-discount-inner {
    justify-content: flex-start;
    flex-wrap: wrap;
    white-space: normal;
}

.bo-wo-wizard__materials--review .bo-wo-wizard__row-discount--material {
    margin-top: 0;
    width: 100%;
    justify-self: end;
}

.bo-wo-wizard__materials--review .bo-wo-wizard__row-discount--material .bo-wo-wizard__row-discount-inner {
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.bo-wo-wizard__discount-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

@media (max-width: 560px) {
    .bo-wo-wizard__discount-preview {
        margin-left: 0;
        width: 100%;
    }
}

.bo-wo-back {
    margin-bottom: var(--space-2);
}

.bo-wo-detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.bo-wo-detail-status {
    align-self: flex-start;
    font-size: 0.875rem;
}

.bo-wo-detail-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (min-width: 720px) {
    .bo-wo-detail-summary {
        grid-template-columns: repeat(4, 1fr);
    }
}

.bo-wo-detail-summary--skeleton {
    margin-bottom: var(--space-5);
}

.bo-wo-detail-metric {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    box-shadow: var(--elevation-1);
}

.bo-wo-detail-metric__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.bo-wo-detail-metric__value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-lines-table-wrap {
    overflow-x: auto;
}

.bo-wo-lines-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.bo-wo-lines-table th,
.bo-wo-lines-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.bo-wo-lines-table thead th {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    background: var(--color-surface-2, var(--color-surface-muted));
}

.bo-wo-lines-table tfoot th,
.bo-wo-lines-table tfoot td {
    font-weight: 700;
    border-bottom: none;
    background: var(--color-surface-2, var(--color-surface-muted));
}

.bo-wo-lines-table__num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bo-ops-panel.staff-card {
    margin-top: 0;
}

/* Work order detail */
.bo-wo-detail-hero {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-wo-detail-hero-skeleton {
    height: 8rem;
    border-radius: var(--radius-3, 12px);
    margin-bottom: var(--space-4);
}

.bo-wo-detail-hero__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4);
    min-width: 0;
}

.bo-wo-detail-hero__copy {
    min-width: 0;
    flex: 1;
}

.bo-wo-detail-hero__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.bo-wo-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    padding: 10px 14px;
    border: 2px solid var(--color-text-strong, #1a1a1a);
    border-radius: 6px;
    background: linear-gradient(180deg, #f5d033 0%, #e8bc1a 100%);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    color: #1a1a1a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.bo-wo-detail-hero__customer {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-detail-hero__vehicle {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.55rem;
    margin: 6px 0 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-text);
}

.bo-wo-detail-hero__vehicle-name {
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-detail-hero__vehicle-year {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.bo-wo-detail-hero__vehicle-year::before {
    content: "·";
    margin-right: 0.55em;
    opacity: 0.45;
}

.bo-wo-detail-hero__meta {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-wo-detail-hero__customer-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.bo-wo-next {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)) 0%,
            var(--color-surface) 100%
        );
}

.bo-wo-next--offerte {
    border-color: color-mix(in srgb, var(--color-offerte-ink, var(--color-primary)) 28%, var(--color-border));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--color-offerte-ink, var(--color-primary)) 6%, var(--color-surface)) 0%,
            var(--color-surface) 100%
        );
}

.bo-wo-next--offerte .bo-wo-next__eyebrow {
    color: var(--color-offerte-ink, var(--color-primary));
}

.bo-wo-next--billing {
    border-color: color-mix(in srgb, var(--color-billing, #4527A0) 28%, var(--color-border));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--color-billing, #4527A0) 8%, var(--color-surface)) 0%,
            var(--color-surface) 100%
        );
}

.bo-wo-next--billing .bo-wo-next__eyebrow {
    color: var(--color-billing, #4527A0);
}

.bo-wo-next__eyebrow {
    margin: 0 0 4px;
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.bo-wo-next__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-next__body {
    margin: 6px 0 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--color-text-muted);
    max-width: 42rem;
}

.bo-wo-next__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.bo-wo-next__error {
    margin: 0;
}

.bo-wo-more {
    position: relative;
}

.bo-wo-more__summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--color-text);
    user-select: none;
}

.bo-wo-more__summary::-webkit-details-marker {
    display: none;
}

.bo-wo-more__summary::after {
    content: "▾";
    margin-left: 0.4rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.bo-wo-more[open] .bo-wo-more__summary {
    border-color: var(--color-border-strong, var(--color-border));
}

.bo-wo-more__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 14rem;
    padding: 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bo-wo-more__item {
    appearance: none;
    border: 0;
    background: transparent;
    text-align: left;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: 6px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.bo-wo-more__item:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.bo-wo-more__item:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.bo-wo-more__item--muted {
    cursor: default;
    color: var(--color-text-muted);
    font-weight: 550;
}

.bo-wo-more__item--danger {
    color: var(--color-danger, #b42318);
}

.bo-wo-overview-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-wo-metric-card {
    padding: var(--space-4) var(--space-5);
}

.bo-wo-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (min-width: 720px) {
    .bo-wo-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.bo-wo-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.bo-wo-metric__label {
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-wo-metric__value {
    font-size: 0.975rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
    overflow-wrap: break-word;
}

.bo-wo-metric__value--stack {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.bo-wo-metric__primary {
    font-size: 0.9375rem;
    font-weight: 750;
    line-height: 1.25;
}

.bo-wo-metric__secondary {
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-metric__value--flag {
    color: var(--color-warning-text, #9a6700);
}

.bo-wo-metric__hint {
    font-size: 0.75rem;
    font-weight: 550;
    color: var(--color-text-muted);
    line-height: 1.3;
}

.bo-wo-line-preview {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bo-wo-line-preview__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.bo-wo-line-preview__row:last-child {
    border-bottom: 0;
}

.bo-wo-line-preview__desc {
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-line-preview__meta {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.bo-wo-line-preview__more {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-wo-customer-modal {
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.bo-wo-customer-modal__row {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
}

.bo-wo-customer-modal__row dt {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.bo-wo-customer-modal__row dd {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-strong, var(--color-text));
    word-break: break-word;
}

.bo-wo-customer-modal__empty {
    font-weight: 550;
    color: var(--color-text-muted);
}

.bo-wo-info-modal {
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.bo-wo-info-modal__row {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
}

.bo-wo-info-modal__row dt {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.bo-wo-info-modal__row dd {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-strong, var(--color-text));
    word-break: break-word;
}

.bo-wo-info-modal__empty {
    font-weight: 550;
    color: var(--color-text-muted);
}

.bo-wo-stepper {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: var(--space-1) 0 0;
    width: 100%;
    overflow-x: auto;
    gap: 0;
}

.bo-wo-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 3.75rem;
}

.bo-wo-step__connector {
    position: absolute;
    top: 6px;
    right: calc(50% + 10px);
    left: calc(-50% + 10px);
    height: 2px;
    background: var(--color-border);
}

.bo-wo-step__connector--done {
    background: var(--color-primary-action, var(--color-primary));
}

.bo-wo-step__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-border-strong, var(--color-border));
    background: var(--color-surface);
    position: relative;
    z-index: 1;
}

.bo-wo-step__label {
    font-size: 0.6875rem;
    font-weight: 650;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.2;
}

.bo-wo-step--done .bo-wo-step__dot {
    border-color: var(--color-primary);
    background: var(--color-primary-action, var(--color-primary));
}

.bo-wo-step--current .bo-wo-step__dot {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.bo-wo-step--current .bo-wo-step__label {
    color: var(--color-text-strong, var(--color-text));
    font-weight: 750;
}

.bo-wo-step--done .bo-wo-step__label {
    color: var(--color-text);
}

.bo-wo-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-2, 8px);
    border: 1px solid var(--color-warning-border, #F9A825);
    background: rgba(249, 168, 37, 0.1);
}

.bo-wo-alert__title {
    margin: 0;
    width: 100%;
    font-size: 0.875rem;
    font-weight: 750;
    color: var(--color-warning-text, #E65100);
}

.bo-wo-alert__body {
    margin: 0;
    flex: 1;
    min-width: 12rem;
    font-size: 0.9375rem;
    color: var(--color-text);
}

.bo-wo-alert__cta {
    margin-left: auto;
}

.bo-wo-alert--info {
    border-color: rgba(94, 53, 177, 0.35);
    background: rgba(94, 53, 177, 0.08);
}

.bo-wo-alert--info .bo-wo-alert__title {
    color: #5E35B1;
}

.bo-wo-detail-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
}

@media (min-width: 1024px) {
    .bo-wo-detail-layout {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    }

    .bo-wo-detail-aside {
        position: sticky;
        top: var(--space-4);
    }
}

.bo-wo-detail-layout--skeleton {
    margin-top: var(--space-4);
}

.bo-wo-detail-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.bo-wo-facts {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bo-wo-facts__row {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--space-3);
    align-items: start;
}

.bo-wo-facts__row dt {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.bo-wo-facts__row dd {
    margin: 0;
    font-size: 0.9375rem;
}

.bo-wo-tech-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-wo-tech-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2, var(--color-surface-muted));
    font-size: 0.875rem;
    font-weight: 600;
}

.bo-wo-tech-tag__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-primary-action, var(--color-primary));
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 750;
    flex-shrink: 0;
}

.bo-wo-tech-tag__avatar--sm {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
}

.bo-wo-card__header--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.bo-wo-lines-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.bo-wo-lines__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.bo-wo-lines__intro {
    flex: 1 1 12rem;
    min-width: 0;
}

.bo-wo-lines__top > .bo-wo-lines-toolbar {
    flex: 0 0 auto;
    margin-left: auto;
}

.bo-wo-lines-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface-muted));
}

.bo-wo-lines-empty__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-lines-empty__body {
    margin: 0 0 var(--space-2);
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.bo-wo-time__top {
    margin-bottom: var(--space-4);
}

.bo-wo-time-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.bo-wo-time-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface-muted));
}

.bo-wo-time-metric__label {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bo-wo-time-metric__value {
    font-size: 1.125rem;
    font-weight: 750;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-time-group {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface-muted));
}

.bo-wo-time-group:last-child {
    margin-bottom: 0;
}

.bo-wo-time-group__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.bo-wo-time-group__identity {
    min-width: 0;
    flex: 1;
}

.bo-wo-time-group__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 750;
    color: var(--color-text-strong, var(--color-text));
    line-height: 1.25;
}

.bo-wo-time-group__subtitle {
    margin: 0.25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.35rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-wo-time-group__inspection {
    margin-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.bo-wo-time-media--group {
    margin: 0;
}

.bo-wo-time-group__compare {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    flex-shrink: 0;
}

.bo-wo-time-group__compare-values {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.bo-wo-time-group__spent {
    font-size: 1.125rem;
    font-weight: 750;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-time-group__sep {
    color: var(--color-text-muted);
    font-weight: 650;
}

.bo-wo-time-group__planned {
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.bo-wo-time-group__compare-hint {
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-wo-time-group__bar {
    height: 0.4rem;
    margin-bottom: var(--space-2);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-border) 70%, var(--color-surface));
    overflow: hidden;
}

.bo-wo-time-group__bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary-action, var(--color-primary));
    transition: transform 160ms ease;
}

.bo-wo-time-group--over .bo-wo-time-group__bar-fill {
    background: var(--color-warning, #F9A825);
}

.bo-wo-time-group--under .bo-wo-time-group__bar-fill {
    background: var(--color-primary-action, var(--color-primary));
}

.bo-wo-time-group--exact .bo-wo-time-group__bar-fill {
    background: var(--color-success, #3d9a6a);
}

.bo-wo-time-group__variance {
    margin: 0 0 var(--space-3);
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.bo-wo-time-group--over .bo-wo-time-group__variance {
    color: #B28704;
}

.bo-wo-time-group--exact .bo-wo-time-group__variance {
    color: var(--color-success, #3d9a6a);
}

.bo-wo-time-group__empty {
    margin: 0;
    padding: var(--space-3);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-wo-time-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-wo-time-entry {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-4);
    padding-right: 3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-wo-time-entry--pending {
    border-left: 4px solid var(--color-warning, #F9A825);
}

.bo-wo-time-entry--editing {
    /* Save + cancel icon buttons need more room than the single edit control. */
    padding-right: 5.25rem;
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.bo-wo-time-entry--editing .bo-wo-time-entry__row {
    /* Keep status chip clear of the absolute toolbar. */
    padding-right: 0.25rem;
}

.bo-wo-time-entry--editing .bo-wo-time-entry__row .bo-dash-chip {
    flex-shrink: 0;
    max-width: 100%;
}

.bo-wo-time-entry--highlight {
    border-color: var(--color-primary);
    box-shadow: var(--elevation-1, 0 1px 4px rgba(0, 0, 0, 0.08));
}

.bo-wo-time-entry__toolbar {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    z-index: 2;
}

.bo-wo-time-entry__icon-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.bo-wo-time-entry__icon-btn:hover:not(:disabled) {
    background: var(--color-surface-2, var(--color-surface-muted));
    color: var(--color-text);
    border-color: var(--color-border);
}

.bo-wo-time-entry__icon-btn--save:hover:not(:disabled) {
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.bo-wo-time-entry__icon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.bo-wo-time-entry__duration {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2, 8px);
    background: rgba(0, 102, 204, 0.08);
    text-align: center;
}

.bo-wo-time-entry__duration-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 6.5rem;
}

.bo-wo-time-entry__hours,
.bo-wo-time-entry__mins {
    width: 3.25rem;
    padding: 0.35rem 0.4rem;
    text-align: center;
    font-weight: 700;
}

.bo-wo-time-entry__duration-sep {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.bo-wo-time-entry__desc-edit {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bo-wo-time-entry__desc-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    min-height: 2.75rem;
    max-height: 10rem;
    padding: 0.55rem 0.75rem;
    font-weight: 650;
    line-height: 1.4;
    resize: vertical;
    field-sizing: content;
    overflow-y: auto;
}

.bo-wo-time-entry__desc-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
}

.bo-wo-time-entry__desc-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.bo-wo-time-entry__desc-count {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.bo-wo-time-entry__desc-count--warn {
    color: var(--color-warning, #E65100);
    font-weight: 700;
}

.bo-wo-time-media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.bo-wo-time-media__item {
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    overflow: hidden;
    background: var(--color-surface-2, var(--color-surface-muted));
}

.bo-wo-time-media__link {
    appearance: none;
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    aspect-ratio: 4 / 3;
    background: #111;
    cursor: zoom-in;
}

.bo-wo-time-media__link:hover {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.bo-wo-time-media__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bo-wo-time-media__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bo-wo-time-media__badge {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
}

.bo-wo-time-media__caption {
    margin: 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-wo-time-media-empty {
    margin: var(--space-2) 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-wo-time-steps {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-wo-time-steps__item {
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface-muted));
}

.bo-wo-time-steps__item--done {
    border-color: color-mix(in srgb, var(--color-success, #3d9a6a) 35%, var(--color-border));
}

.bo-wo-time-steps__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.bo-wo-time-steps__index {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.bo-wo-time-steps__index--done {
    background: var(--color-success, #3d9a6a);
    border-color: transparent;
    color: #fff;
}

.bo-wo-time-steps__copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.bo-wo-time-steps__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-time-steps__notes {
    margin: var(--space-2) 0 0;
    padding-left: calc(1.5rem + var(--space-2));
    font-size: 0.875rem;
    color: var(--color-text-muted);
    white-space: pre-wrap;
}

.bo-wo-time-media--steps {
    margin-top: var(--space-2);
    margin-left: calc(1.5rem + var(--space-2));
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
}

.bo-wo-time-entry__duration-value {
    font-size: 0.9375rem;
    font-weight: 750;
    line-height: 1.2;
    color: var(--color-text-strong, var(--color-text));
    white-space: nowrap;
}

.bo-wo-time-entry__main {
    min-width: 0;
    padding-right: 0.25rem;
}

.bo-wo-time-entry__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: 4px;
}

.bo-wo-time-entry__row--editing,
.bo-wo-time-entry__row--read {
    flex-direction: column;
    align-items: stretch;
}

.bo-wo-time-entry__row--editing .bo-dash-chip,
.bo-wo-time-entry__row--read .bo-dash-chip {
    align-self: flex-start;
    flex-shrink: 0;
}

.bo-wo-time-entry__desc-block {
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.35rem;
}

.bo-wo-time-entry__desc {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    line-height: 1.4;
}

.bo-wo-time-entry__desc--clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.bo-wo-time-entry__desc-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: flex-start;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 160ms ease;
}

.bo-wo-time-entry__desc-toggle:hover {
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.bo-wo-time-entry__desc-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bo-wo-time-entry__desc-toggle--expanded {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .bo-wo-time-entry__desc-toggle {
        transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    }

    .bo-wo-time-entry__desc-toggle--expanded {
        transform: none;
    }

    .bo-wo-time-entry__desc-toggle--expanded svg {
        transform: rotate(180deg);
    }
}

.bo-wo-time-entry__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.35rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-wo-time-entry__tech {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bo-wo-time-entry__rejection {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-1);
    background: rgba(198, 40, 40, 0.08);
    color: var(--color-danger, #c62828);
    font-size: 0.875rem;
}

.bo-wo-time-entry__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.bo-wo-time-reject {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-wo-time-reject__input {
    resize: vertical;
    min-height: 3.5rem;
}

.bo-wo-time-reject__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

.bo-detail-tab__badge--ready {
    min-width: 0.55rem;
    padding: 0 0.2rem;
    font-size: 0.7rem;
    line-height: 1;
}

.bo-wo-invoice__success {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2, 8px);
    background: rgba(46, 125, 50, 0.08);
    color: var(--color-success, #3d9a6a);
}

.bo-wo-invoice__success p {
    margin: 0;
    font-weight: 600;
}

.bo-wo-invoice__section {
    margin-top: var(--space-5);
}

.bo-wo-invoice__section--create {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-muted, #f8fafc);
}

.bo-wo-invoice__section-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: var(--space-3);
}

.bo-wo-invoice__section-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
}

.bo-wo-invoice__hint {
    margin: 0 0 var(--space-3);
    font-size: 0.825rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.bo-wo-invoice__section-head .bo-wo-invoice__hint {
    margin-bottom: 0;
}

.bo-wo-invoice__warn {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2, 8px);
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.45;
}

.bo-wo-invoice__empty-preview {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.bo-wo-invoice-create {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bo-wo-invoice__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.bo-wo-invoice__actions-total {
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.bo-wo-invoice-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-wo-invoice-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.bo-wo-invoice-item:hover {
    border-color: var(--color-border-strong, #c5cdd8);
    background: var(--color-surface-hover, #f8fafc);
}

.bo-wo-invoice-item__main {
    flex: 1;
    min-width: 0;
}

.bo-wo-invoice-item__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}

.bo-wo-invoice-item__number {
    font-weight: 650;
}

.bo-wo-invoice-item__meta {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.bo-wo-invoice-item__amount {
    font-weight: 650;
    white-space: nowrap;
}

.bo-wo-invoice-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: end;
}

.bo-wo-invoice-form__check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.bo-wo-invoice-form__check input {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 720px) {
    .bo-wo-invoice-form {
        grid-template-columns: 1fr 1fr;
    }

    .bo-wo-invoice-form__check {
        grid-column: 1 / -1;
    }
}

.bo-wo-invoice-preview {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-wo-invoice-preview__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.bo-wo-invoice-preview__table th,
.bo-wo-invoice-preview__table td {
    padding: 0.65rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.bo-wo-invoice-preview__table thead th {
    font-size: 0.78rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    background: var(--color-surface-muted, #f4f6f8);
}

.bo-wo-invoice-preview__table tbody tr:last-child td {
    border-bottom: 1px solid var(--color-border);
}

.bo-wo-invoice-preview__table tfoot th,
.bo-wo-invoice-preview__table tfoot td {
    border-bottom: none;
    font-weight: 650;
}

.bo-wo-invoice-preview__table tfoot tr:last-child th,
.bo-wo-invoice-preview__table tfoot tr:last-child td {
    font-size: 1rem;
}

.bo-wo-invoice-preview__date {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.bo-wo-job-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bo-wo-job {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-3);
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-wo-job__hours-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    margin: -0.1rem 0;
    padding: 0.1rem 0.3rem 0.15rem;
    border-radius: var(--radius-1, 6px);
    cursor: text;
    color: var(--color-text-strong, var(--color-text));
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--color-primary, #0066cc) 8%, transparent);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-primary, #0066cc) 45%, var(--color-border));
    transition: background 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

.bo-wo-job__hours-inline:hover {
    background: color-mix(in srgb, var(--color-primary, #0066cc) 14%, transparent);
    box-shadow: inset 0 -2px 0 var(--color-primary, #0066cc);
}

.bo-wo-job__hours-inline:focus-within {
    background: color-mix(in srgb, var(--color-primary, #0066cc) 16%, transparent);
    box-shadow: inset 0 -2px 0 var(--color-primary, #0066cc);
}

.bo-wo-job__hours-inline-input {
    width: 2.85rem;
    min-width: 0;
    height: 1.35rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: inherit;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-align: right;
    appearance: textfield;
    -moz-appearance: textfield;
}

.bo-wo-job__hours-inline-input::-webkit-outer-spin-button,
.bo-wo-job__hours-inline-input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.bo-wo-job__hours-inline-input:focus {
    outline: none;
}

.bo-wo-job__hours-inline-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.bo-wo-job__hours-inline-unit {
    color: var(--color-text-muted);
    font-weight: 500;
}

.bo-wo-job__hours-inline-icon {
    flex-shrink: 0;
    margin-left: 0.1rem;
    color: var(--color-primary, #0066cc);
    opacity: 0.85;
}

.bo-wo-job__hours-inline:hover .bo-wo-job__hours-inline-icon,
.bo-wo-job__hours-inline:focus-within .bo-wo-job__hours-inline-icon {
    opacity: 1;
}

.bo-wo-job__actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.bo-wo-job__actions .bo-wo-wizard__row-discount-inner {
    width: auto;
    justify-content: flex-end;
}

.bo-wo-job__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
}

.bo-wo-job__name {
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.bo-wo-job__badge {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
    border-radius: 999px;
    padding: 0.15rem 0.45rem;
}

.bo-wo-add-source {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.bo-wo-add-source__tab {
    flex: 1 1 0;
    border: 1px solid var(--color-border, #d8dde6);
    background: transparent;
    color: var(--color-text-muted);
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.bo-wo-add-source__tab--active {
    background: var(--color-text-strong, var(--color-text));
    border-color: transparent;
    color: #fff;
}

.bo-wo-job__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.bo-wo-job-discount {
    margin-top: var(--space-4);
}

.bo-wo-job__remove {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.bo-wo-job__remove:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-danger, #b42318) 10%, transparent);
    color: var(--color-danger, #b42318);
}

.bo-wo-job__remove:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.bo-wo-job__meta-item--price {
    color: var(--color-text-strong, var(--color-text));
    font-weight: 600;
}

.bo-wo-job__edit {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1 1 100%;
    width: 100%;
    margin-top: 0.15rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-canvas, #fff);
    max-width: none;
}

.bo-wo-job__edit .bo-wo-wizard__row-discount-inner {
    justify-content: flex-start;
    width: auto;
}

.bo-wo-job__edit-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 8rem;
}

.bo-wo-job__edit-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-wo-job__hours-input {
    width: 100%;
    max-width: 7rem;
}

.bo-wo-job__edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bo-labor-calc {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface, #f5f5f7);
    border: 1px solid var(--color-border, rgba(29, 29, 31, 0.08));
    font-variant-numeric: tabular-nums;
}

.bo-labor-calc__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-labor-calc__formula {
    font-size: 0.9375rem;
    color: var(--color-text-strong, var(--color-text));
    font-weight: 600;
}

.bo-labor-calc__amount {
    font-size: 1.125rem;
    color: var(--color-text-strong, var(--color-text));
}

.bo-labor-calc__note {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.bo-labor-calc__link {
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-primary, #0066cc);
    text-decoration: none;
    width: fit-content;
}

.bo-labor-calc__link:hover {
    text-decoration: underline;
}

.bo-chk-profile-form {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 7rem auto;
    gap: var(--space-3);
    align-items: end;
}

.bo-chk-profile-form .bo-labor-calc {
    grid-column: 1 / -1;
}

.bo-chk-profile-form .bo-chk-add__submit {
    justify-self: start;
}

.bo-settings-section-hint {
    margin: 0 0 0.85rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

@media (max-width: 720px) {
    .bo-chk-profile-form {
        grid-template-columns: 1fr 1fr;
    }

    .bo-chk-profile-form .bo-chk-add__name {
        grid-column: 1 / -1;
    }

    .bo-chk-profile-form .bo-chk-add__submit {
        grid-column: 1 / -1;
    }
}

.bo-wo-job-total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: 0.75rem 0.25rem 0;
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-wo-job-total__nums {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-job-total__sub {
    font-weight: 550;
    color: var(--color-text-muted);
}

.bo-wo-job-vat {
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bo-wo-job-vat__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-wo-job-vat__row dt {
    margin: 0;
    font-weight: 500;
}

.bo-wo-job-vat__row dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text);
}

.bo-wo-job-vat__row--total {
    margin-top: 0.25rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.9375rem;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-job-vat__row--total dt,
.bo-wo-job-vat__row--total dd {
    font-weight: 700;
    color: inherit;
}

.bo-wo-job-vat__hint {
    margin: 0.45rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.bo-wo-plan-totals {
    margin-top: 1rem;
}

.bo-wo-plan-totals .bo-wo-plan-totals__discount {
    margin-top: var(--space-3);
}

.bo-wo-plan-totals .bo-wo-job-vat {
    margin-top: var(--space-4);
}

.bo-wo-add-offerings .bo-modal__subtitle {
    margin-top: 4px;
}

.bo-wo-add-offerings__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: var(--space-3);
    max-height: min(50vh, 22rem);
    overflow: auto;
    padding: 2px;
}

.bo-wo-add-offerings__item {
    appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name cta"
        "meta cta";
    column-gap: var(--space-3);
    row-gap: 2px;
    align-items: center;
    text-align: left;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    cursor: pointer;
    font: inherit;
}

.bo-wo-add-offerings__item:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

.bo-wo-add-offerings__item:disabled {
    opacity: 0.55;
    cursor: wait;
}

.bo-wo-add-offerings__name {
    grid-area: name;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-add-offerings__meta {
    grid-area: meta;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-wo-add-offerings__cta {
    grid-area: cta;
    font-size: 0.8125rem;
    font-weight: 750;
    color: var(--color-primary);
}

.bo-wo-add-offerings__empty {
    margin: var(--space-4) 0 0;
    color: var(--color-text-muted);
}

.bo-wo-add-offerings__footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 var(--space-5) var(--space-5);
}

.bo-save-ok {
    margin: 0 0 var(--space-3);
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--color-success-text, #1b7f4a);
}

.bo-wo-lines-totals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.bo-wo-lines-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.bo-wo-lines-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2, 8px);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface-2, var(--color-surface-muted)));
    border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
}

.bo-wo-lines-summary__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bo-wo-lines-summary__label {
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-wo-lines-summary__value {
    font-size: 1.0625rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-lines-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bo-wo-line-edit {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-wo-line-edit__main {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

@media (min-width: 720px) {
    .bo-wo-line-edit__main {
        grid-template-columns: minmax(0, 1fr) 6.5rem 7.5rem;
        align-items: end;
    }
}

.bo-wo-line-edit__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.bo-wo-line-edit__field .bo-input {
    font-weight: 600;
    color: var(--color-text);
}

.bo-input--num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.bo-wo-line-edit__remove {
    align-self: flex-start;
}

.bo-wo-lines-editor__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-1);
}

.bo-wo-lines-dirty {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--color-warning-text, #9a6700);
}

.bo-wo-lines-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    overflow: hidden;
}

.bo-wo-lines-list__head,
.bo-wo-lines-list__row,
.bo-wo-lines-list__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5rem 6.5rem;
    gap: var(--space-2);
    padding: 0.75rem 1rem;
    align-items: center;
}

.bo-wo-lines-list__head--editable,
.bo-wo-lines-list__row--editable,
.bo-wo-lines-list__foot--editable {
    grid-template-columns: minmax(0, 1fr) 4.5rem 6.5rem auto;
}

.bo-wo-lines-list__actions-head,
.bo-wo-lines-list__actions {
    text-align: right;
}

.bo-wo-offering-picker {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bo-wo-offering-picker__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-offering-picker__hint {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-wo-offering-picker__search {
    max-width: 24rem;
}

.bo-wo-offering-picker__options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 16rem;
    overflow: auto;
    padding: 2px;
}

.bo-wo-offering-picker__option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    cursor: pointer;
}

.bo-wo-offering-picker__option--selected {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.bo-wo-offering-picker__option-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bo-wo-offering-picker__option-name {
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-offering-picker__option-meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-wo-offering-picker__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-wo-lines-list__head {
    background: var(--color-surface-2, var(--color-surface-muted));
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-wo-lines-list__row {
    border-top: 1px solid var(--color-border);
}

.bo-wo-lines-list__desc {
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-lines-list__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.bo-wo-lines-list__foot {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-2, var(--color-surface-muted));
    font-weight: 750;
}

.bo-save-ok {
    margin: 0 0 var(--space-3);
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--color-success-text, #1b7f4a);
}

.bo-wo-inline-empty {
    padding: var(--space-3);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface-muted));
    margin-bottom: var(--space-3);
}

.bo-wo-inline-empty p {
    margin: 0;
    font-size: 0.9375rem;
}

.bo-wo-inline-empty__hint {
    margin-top: 4px !important;
    font-size: 0.8125rem !important;
    color: var(--color-text-muted) !important;
}

.bo-wo-tech-list {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-wo-tech-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-wo-tech-list__who {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.bo-wo-tech-list__name {
    font-weight: 650;
}

.bo-wo-tech-list__actions {
    display: flex;
    gap: 2px;
}

.bo-wo-tech-list__btn {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.8125rem;
}

.bo-wo-tech-list__btn--danger {
    color: var(--color-danger);
}

.bo-wo-schedule-list {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-wo-schedule-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-wo-schedule-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.bo-wo-schedule-card__when {
    min-width: 0;
}

.bo-wo-schedule-card__date {
    display: block;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.3;
}

.bo-wo-schedule-card__time {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-wo-schedule-card__who {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
    font-size: 0.875rem;
    font-weight: 600;
}

.bo-wo-schedule-card__tech-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.bo-wo-schedule-card__remove {
    flex-shrink: 0;
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.8125rem;
}

.bo-ops-schedule-times {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bo-wo-detail-aside .bo-ops-plan {
    padding: 0;
}

.bo-wo-detail-aside .bo-ops-section {
    padding: var(--space-3);
}

.bo-wo-detail-aside .bo-ops-compose__grid,
.bo-wo-detail-aside .bo-ops-compose__grid--appt {
    grid-template-columns: 1fr;
}

.bo-wo-detail-aside .bo-ops-team__add {
    flex-direction: column;
    align-items: stretch;
}

.bo-wo-detail-aside .bo-ops-team__add .bo-input,
.bo-wo-detail-aside .bo-ops-team__add .staff-btn {
    width: 100%;
}

/* Scheduling calendar + dashboard use wider content */
.bo-content:has(.bo-sched),
.bo-content:has(.bo-dash) {
    max-width: 96rem;
}

.bo-sched {
    gap: var(--space-4);
}

.bo-sched-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-sched-chrome {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bo-sched-chrome__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.bo-sched-view,
.bo-sched-nav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.03));
}

.bo-sched-view__btn,
.bo-sched-nav__btn,
.bo-sched-nav__today {
    padding: 0.35rem 0.75rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--motion-duration-fast) var(--motion-ease-standard),
                color var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-sched-view__btn:hover,
.bo-sched-nav__btn:hover:not(:disabled),
.bo-sched-nav__today:hover {
    color: var(--color-text);
    background: rgba(0, 0, 0, 0.04);
}

.bo-sched-view__btn--active {
    background: var(--color-surface);
    color: var(--color-text-strong, var(--color-primary-ink, var(--color-primary)));
    box-shadow: var(--elevation-1);
}

.bo-sched-nav__btn {
    min-width: 2rem;
    padding-inline: 0.5rem;
    font-size: 1.05rem;
    line-height: 1;
}

.bo-sched-nav__btn:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.bo-sched-nav__label {
    margin-left: var(--space-2);
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
    white-space: nowrap;
}

.bo-sched-counters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-left: auto;
}

.bo-sched-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.bo-sched-counter:hover {
    border-color: var(--color-primary);
}

.bo-sched-counter--active {
    border-color: #F9A825;
    box-shadow: 0 0 0 2px rgba(249, 168, 37, 0.18);
}

.bo-sched-counter__value {
    font-size: 0.875rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.bo-sched-counter__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.bo-sched-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.bo-sched-search {
    flex: 0 1 16rem;
    min-width: 0;
}

.bo-sched-search__input {
    width: 100%;
}

.bo-sched-filter__select {
    min-width: 10rem;
}

.bo-sched-day-strip {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.bo-sched-day-strip__btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 5.25rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.bo-sched-day-strip__btn:hover {
    border-color: var(--color-primary);
}

.bo-sched-day-strip__btn--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}

.bo-sched-day-strip__btn--today .bo-sched-day-strip__name {
    color: #00695C;
}

.bo-sched-day-strip__name {
    font-size: 0.8125rem;
    font-weight: 750;
}

.bo-sched-day-strip__date,
.bo-sched-day-strip__count {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.bo-sched-day-strip__count {
    font-weight: 700;
}

/* Unified calendar stage */
.bo-sched-stage {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    overflow: hidden;
    min-width: 0;
}

.bo-sched-board {
    display: grid;
    min-width: 0;
    min-height: 14rem;
}

.bo-sched-board--week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.bo-sched-board--day {
    grid-template-columns: minmax(0, 1fr);
}

.bo-sched-board__empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-6);
}

.bo-sched-col {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.55rem;
    border-right: 1px solid var(--color-border-subtle, var(--color-border));
    background: transparent;
}

.bo-sched-board--week .bo-sched-col:last-child {
    border-right: none;
}

.bo-sched-col--today {
    background: color-mix(in srgb, #00897B 5%, var(--color-surface));
}

.bo-sched-col__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.15rem 0.2rem 0.55rem;
    margin: 0;
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
    border-radius: 0;
    background: var(--color-surface);
}

.bo-sched-col--today .bo-sched-col__header {
    background: color-mix(in srgb, #00897B 5%, var(--color-surface));
}

.bo-sched-col__heading {
    min-width: 0;
}

.bo-sched-col__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 750;
    line-height: 1.2;
    color: var(--color-text-strong, var(--color-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-sched-col--today .bo-sched-col__title {
    color: #00695C;
}

.bo-sched-col__date {
    display: block;
    margin-top: 1px;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.bo-sched-col__count {
    flex-shrink: 0;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.05));
    font-size: 0.6875rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bo-sched-col__allday,
.bo-sched-col__blocks {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.bo-sched-col__allday {
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed var(--color-border);
}

.bo-sched-col__empty {
    margin: 1.5rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: center;
    opacity: 0.75;
}

.bo-sched-chip-wrap {
    position: relative;
    min-width: 0;
}

.bo-sched-chip-wrap .bo-sched-chip {
    width: 100%;
    padding-right: 1.5rem;
}

.bo-sched-chip__remove {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--motion-duration-fast) var(--motion-ease-standard),
                color var(--motion-duration-fast) var(--motion-ease-standard),
                background var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-sched-chip-wrap:hover .bo-sched-chip__remove,
.bo-sched-chip__remove:focus-visible {
    opacity: 1;
}

.bo-sched-chip__remove:hover:not(:disabled) {
    color: var(--color-danger, #C62828);
    background: rgba(198, 40, 40, 0.08);
}

.bo-sched-chip__remove:disabled {
    cursor: wait;
    opacity: 0.5;
}

.bo-sched-workbench__error {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #FFCDD2;
    background: var(--color-danger-surface, #FFEBEE);
    color: var(--color-danger, #C62828);
    font-size: 0.875rem;
    font-weight: 600;
}

.bo-sched-queue__remove {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--color-danger, #C62828);
}

.bo-sched-queue__remove:hover:not(:disabled) {
    background: rgba(198, 40, 40, 0.08);
}

.bo-sched-chip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.45rem 0.5rem 0.5rem 0.55rem;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: 8px;
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
                box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-sched-chip--ok { border-left-color: #2E7D32; }
.bo-sched-chip--warn { border-left-color: #EF6C00; }
.bo-sched-chip--billing { border-left-color: var(--color-billing, #4527A0); }
.bo-sched-chip--offerte { border-left-color: var(--color-offerte-ink, var(--color-primary-ink)); }
.bo-sched-chip--danger { border-left-color: var(--color-danger, #C62828); }
.bo-sched-chip--neutral { border-left-color: var(--color-border); }
.bo-sched-chip--hold {
    border-left-color: var(--color-primary, #0066cc);
    background: color-mix(in srgb, var(--color-primary, #0066cc) 8%, var(--color-surface));
    border-style: dashed;
    border-left-style: solid;
}

.bo-sched-chip__hold-tag {
    flex-shrink: 0;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary, #0066cc) 16%, transparent);
    color: var(--color-primary-ink, #004f9e);
    font-size: 0.625rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bo-sched-chip:hover {
    border-color: var(--color-primary);
    box-shadow: var(--elevation-1);
}

.bo-sched-chip:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
}

.bo-sched-chip--attention {
    background: rgba(249, 168, 37, 0.07);
}

.bo-sched-chip__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    min-width: 0;
}

.bo-sched-chip__when {
    min-width: 0;
    font-size: 0.6875rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: #00695C;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-sched-chip__plate {
    font-size: 0.8125rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-sched-chip__customer,
.bo-sched-chip__status {
    font-size: 0.6875rem;
    line-height: 1.25;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-sched-chip--ok .bo-sched-chip__status { color: #2E7D32; font-weight: 650; }
.bo-sched-chip--warn .bo-sched-chip__status { color: #E65100; font-weight: 650; }
.bo-sched-chip--billing .bo-sched-chip__status { color: var(--color-billing-ink, #311B92); font-weight: 650; }
.bo-sched-chip--offerte .bo-sched-chip__status { color: var(--color-offerte-ink, var(--color-primary-ink)); font-weight: 650; }
.bo-sched-chip--danger .bo-sched-chip__status { color: var(--color-danger, #C62828); font-weight: 650; }

.bo-sched-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: rgba(0, 102, 204, 0.12);
    font-size: 0.5rem;
    font-weight: 750;
    color: var(--color-primary);
    flex-shrink: 0;
}

.bo-sched-avatar--missing {
    background: rgba(230, 81, 0, 0.12);
    color: #E65100;
}

.bo-sched-board--day .bo-sched-chip {
    padding: 0.65rem 0.75rem;
    gap: 0.25rem;
}

.bo-sched-board--day .bo-sched-chip__when {
    font-size: 0.8125rem;
}

.bo-sched-board--day .bo-sched-chip__plate {
    font-size: 0.9375rem;
}

.bo-sched-board--day .bo-sched-chip__customer,
.bo-sched-board--day .bo-sched-chip__status {
    font-size: 0.75rem;
}

.bo-sched-board--day .bo-sched-avatar {
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0.5625rem;
}

/* Flat list view: all technicians in one scannable list, days separated by header */
.bo-sched-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.bo-sched-list__day {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    overflow: hidden;
}

.bo-sched-list__day--today {
    border-color: var(--color-primary);
}

.bo-sched-list__day-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    background: color-mix(in srgb, var(--color-surface) 92%, var(--color-primary) 8%);
    border-bottom: 1px solid var(--color-border);
}

.bo-sched-list__day-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 750;
    color: var(--color-text-strong, var(--color-text));
    text-transform: capitalize;
}

.bo-sched-list__day-date {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-sched-list__day-count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.bo-sched-list__rows {
    display: flex;
    flex-direction: column;
}

.bo-sched-list__row,
.bo-sched-list__row-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.bo-sched-list__row {
    flex: 1;
    padding: 0.55rem 0.9rem;
    border-left: 3px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.bo-sched-list__row-wrap:last-child .bo-sched-list__row,
.bo-sched-list__rows > .bo-sched-list__row:last-child {
    border-bottom: none;
}

.bo-sched-list__row:hover {
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-primary) 6%);
}

.bo-sched-list__row--attention {
    border-left-color: #E65100;
}

.bo-sched-list__row--ok { border-left-color: #2E7D32; }
.bo-sched-list__row--warn { border-left-color: #EF6C00; }
.bo-sched-list__row--billing { border-left-color: var(--color-billing, #4527A0); }
.bo-sched-list__row--offerte { border-left-color: var(--color-offerte-ink, var(--color-primary-ink)); }
.bo-sched-list__row--danger { border-left-color: var(--color-danger, #C62828); }
.bo-sched-list__row--neutral { border-left-color: var(--color-border); }
.bo-sched-list__row--hold { border-left-color: var(--color-border); border-left-style: dashed; }

.bo-sched-list__row-time {
    flex-shrink: 0;
    width: 5.5rem;
    font-size: 0.8125rem;
    font-weight: 650;
}

.bo-sched-list__row-tech {
    flex-shrink: 0;
    width: 9rem;
    font-size: 0.8125rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-sched-list__row-plate {
    flex-shrink: 0;
    width: 6rem;
    font-size: 0.875rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-sched-list__row-customer {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-sched-list__row-status {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.bo-sched-list__row-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.4rem;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.bo-sched-list__row-move {
    flex-shrink: 0;
    min-height: 2rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    color: var(--color-text-strong, var(--color-text));
    font: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    cursor: pointer;
}

.bo-sched-list__row-move:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.bo-sched-list__row-move:focus-visible,
.bo-sched-queue-panel__summary:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
}

.bo-sched-list__row-remove:hover:not(:disabled) {
    color: var(--color-danger, #C62828);
    background: rgba(198, 40, 40, 0.08);
}

.bo-sched-list__row-remove:disabled {
    opacity: 0.4;
    cursor: default;
}

@media (max-width: 720px) {
    .bo-sched-list__row,
    .bo-sched-list__row-wrap {
        flex-wrap: wrap;
    }

    .bo-sched-list__row-tech,
    .bo-sched-list__row-plate {
        width: auto;
    }
}

.bo-sched-modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.bo-sched-modal-form__times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.bo-sched-modal-project {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    grid-column: 1 / -1;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-2, var(--color-surface));
    color: var(--color-text);
    cursor: pointer;
}

.bo-sched-modal-project input {
    margin-top: 0.2rem;
    flex: 0 0 auto;
    accent-color: var(--color-primary-action);
}

.bo-sched-modal-project span {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.bo-sched-modal-project strong {
    color: var(--color-text-strong, var(--color-text));
}

.bo-sched-modal-project small {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.bo-sched-modal-form__hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-sched-modal-form__error {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #FFCDD2;
    background: var(--color-danger-surface, #FFEBEE);
    color: var(--color-danger, #C62828);
    font-size: 0.875rem;
    font-weight: 600;
}

.bo-sched-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem);
    align-items: start;
    gap: var(--space-4);
}

.bo-sched-col__tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.bo-sched-col__add {
    min-width: 1.75rem;
    padding-inline: var(--space-2);
    line-height: 1;
}

.bo-sched-col__empty-add {
    align-self: flex-start;
    margin-top: var(--space-2);
}

.bo-sched-picker__search {
    width: 100%;
}

.bo-sched-chip--button {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bo-sched-chip--button:hover,
.bo-sched-chip--button[aria-expanded="true"] {
    border-color: var(--color-primary, #0066cc);
}

.bo-sched-chip--button:focus-visible {
    outline: 2px solid var(--color-primary, #0066cc);
    outline-offset: 2px;
}

.bo-sched-panel {
    position: fixed;
    top: 3.5rem;
    right: 0;
    bottom: 0;
    z-index: 14;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: min(24rem, 100vw);
    padding: var(--space-4);
    overflow-y: auto;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--elevation-3, 0 10px 28px rgba(15, 23, 42, 0.2));
    animation: bo-sched-panel-in 160ms var(--motion-ease-standard, ease) both;
}

.bo-sched-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.bo-sched-panel__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.bo-sched-panel__subtitle {
    margin: 0.15rem 0 0;
    color: var(--color-text-muted, inherit);
}

.bo-sched-panel__facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.bo-sched-panel__facts dt {
    color: var(--color-text-muted, inherit);
    font-size: 0.8125rem;
}

.bo-sched-panel__facts dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.bo-sched-panel__note {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.8125rem;
}

.bo-sched-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
}

@keyframes bo-sched-panel-in {
    from { opacity: 0.72; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .bo-sched-panel {
        animation: none;
    }
}

.bo-sched-mobile-notice {
    display: none;
}

@media (max-width: 767px) {
    .bo-sched-mobile-notice {
        display: block;
    }

    .bo-sched-root {
        display: none;
    }
}

.bo-sched-workspace > .bo-sched-queue-panel {
    position: sticky;
    top: var(--space-3);
}

@media (max-width: 1199px) {
    .bo-sched-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .bo-sched-workspace > .bo-sched-queue-panel {
        position: static;
    }
}

.bo-sched-queue {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    padding: var(--space-4);
    min-width: 0;
}

.bo-sched-queue__header {
    margin-bottom: var(--space-3);
}

.bo-sched-queue-panel__summary {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    cursor: pointer;
    list-style: none;
}

.bo-sched-queue-panel__summary::-webkit-details-marker {
    display: none;
}

.bo-sched-queue-panel__summary::after {
    content: "▾";
    position: absolute;
    top: 0;
    right: 0;
    color: var(--color-text-muted);
}

.bo-sched-queue-panel:not([open]) .bo-sched-queue-panel__summary::after {
    content: "▸";
}

.bo-sched-queue-panel__summary .bo-sched-queue__subtitle {
    padding-right: 1.25rem;
}

.bo-sched-queue__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
    color: var(--color-text-strong, var(--color-text));
}

.bo-sched-queue__subtitle {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-sched-queue__empty {
    margin: 0;
    padding: var(--space-3) 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-sched-queue__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 22rem;
    overflow: auto;
    scrollbar-width: thin;
}

.bo-sched-queue__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.65rem 0.75rem 0.65rem 0.55rem;
    border: 1px dashed color-mix(in srgb, var(--color-border) 70%, var(--color-primary) 30%);
    border-radius: 8px;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)) 0,
            var(--color-surface) 2.5rem
        );
    min-width: 0;
}

.bo-sched-queue__item--link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.bo-sched-queue__item--link:hover,
.bo-sched-queue__item:hover {
    border-color: var(--color-primary);
    border-style: solid;
    box-shadow: var(--elevation-1);
}

.bo-sched-queue__main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.bo-sched-queue__plate {
    font-size: 0.875rem;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-sched-queue__customer,
.bo-sched-queue__status,
.bo-sched-queue__when,
.bo-sched-queue__meta {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-sched-queue__when {
    font-weight: 650;
    color: var(--color-text);
}

.bo-sched-queue__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bo-sched-queue__status--ok { color: #2E7D32; font-weight: 650; }
.bo-sched-queue__status--warn { color: #E65100; font-weight: 650; }
.bo-sched-queue__status--billing { color: var(--color-billing-ink, #311B92); font-weight: 650; }
.bo-sched-queue__status--offerte { color: var(--color-offerte-ink, var(--color-primary-ink)); font-weight: 650; }
.bo-sched-queue__status--danger { color: var(--color-danger, #C62828); font-weight: 650; }

.bo-sched-queue__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

.bo-sched-queue__plan {
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
}

.bo-sched-queue__link {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--color-primary);
    text-decoration: none;
}

.bo-sched-queue__link:hover {
    text-decoration: underline;
}

@media (max-width: 1200px) {
    .bo-sched-board--week {
        grid-template-columns: repeat(7, minmax(9.5rem, 1fr));
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .bo-sched-board--week .bo-sched-col {
        min-width: 9.5rem;
    }
}

@media (max-width: 959px) {
    .bo-sched-board--week {
        grid-template-columns: repeat(7, minmax(11rem, 78vw));
    }

    .bo-sched-counters {
        margin-left: 0;
        width: 100%;
    }

    .bo-sched-counter {
        flex: 1 1 auto;
    }

    .bo-sched-search {
        flex: 1 1 12rem;
    }

    .bo-sched-queue__item {
        flex-direction: column;
        align-items: stretch;
    }

    .bo-sched-queue__actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 960px) {
    .bo-sched--week .bo-sched-day-strip {
        display: none;
    }
}

/* Time entries list & review */
.bo-time {
    gap: var(--space-5);
}

.bo-time-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-time-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
}

.bo-time-stats--skeleton {
    grid-template-columns: repeat(2, 1fr);
}

.bo-time-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    box-shadow: var(--elevation-1);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
                box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-time-stat:hover {
    border-color: var(--color-primary);
    box-shadow: var(--elevation-2, var(--elevation-1));
}

.bo-time-stat--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}

.bo-time-stat--pending { border-left: 4px solid #F9A825; }
.bo-time-stat--running { border-left: 4px solid #5C6BC0; }
.bo-time-stat--unbilled { border-left: 4px solid #2E7D32; }

.bo-time-stat__value {
    font-size: 1.75rem;
    font-weight: 750;
    line-height: 1.1;
}

.bo-time-stat__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.bo-time-stat__hint {
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-warning-text, #E65100);
}

.bo-time-card {
    padding: var(--space-5);
}

.bo-time-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.bo-time-search__input {
    width: 100%;
}

.bo-time-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

.bo-time-filter {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: min(100%, 12rem);
}

.bo-time-filter__label {
    font-size: 0.75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.bo-time-range {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.03));
}

.bo-time-range__btn {
    padding: 0.4rem 0.85rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--color-text-muted);
    cursor: pointer;
}

.bo-time-range__btn--active {
    background: var(--color-surface);
    color: var(--color-text-strong, var(--color-primary-ink, var(--color-primary)));
    box-shadow: var(--elevation-1);
}

.bo-time-result-count {
    margin: 0 0 var(--space-4);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-time-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-time-item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    color: inherit;
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
                background var(--motion-duration-fast) var(--motion-ease-standard),
                box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-time-item__nav {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

.bo-time-item__nav:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bo-time-item__duration,
.bo-time-item__main,
.bo-time-item__chevron {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.bo-time-item:hover {
    border-color: var(--color-primary-action, var(--color-primary));
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 10%, var(--color-surface));
    box-shadow: var(--elevation-1);
}

.bo-time-item:has(.bo-time-item__nav:focus-visible) {
    border-color: var(--color-primary);
    box-shadow: var(--elevation-1);
}

.bo-time-item--attention {
    border-left: 4px solid var(--color-warning-text, #F9A825);
    background: var(--color-surface);
}

.bo-time-item__duration {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2, 8px);
    background: var(--color-primary-container, color-mix(in srgb, var(--color-primary-action, #0066cc) 16%, var(--color-surface)));
    text-align: center;
}

.bo-time-item__duration-value {
    font-size: 1.125rem;
    font-weight: 750;
    line-height: 1.1;
    color: var(--color-text-strong, var(--color-text));
}

.bo-time-item__duration-unit {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary-ink, var(--color-primary));
}

.bo-time-item__main {
    min-width: 0;
}

.bo-time-item__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    margin-bottom: 4px;
}

.bo-time-item__row .bo-dash-chip {
    align-self: flex-start;
    flex-shrink: 0;
}

.bo-time-item__desc-block {
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.35rem;
}

.bo-time-item__desc {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.bo-time-item__desc--clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.bo-time-item__desc-toggle {
    appearance: none;
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: flex-start;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    pointer-events: auto;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 160ms ease;
}

.bo-time-item__desc-toggle:hover {
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.bo-time-item__desc-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bo-time-item__desc-toggle--expanded {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .bo-time-item__desc-toggle {
        transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    }

    .bo-time-item__desc-toggle--expanded {
        transform: none;
    }

    .bo-time-item__desc-toggle--expanded svg {
        transform: rotate(180deg);
    }
}

.bo-time-item__vehicle {
    font-size: 0.875rem;
    margin-bottom: 4px;
}

.bo-time-item__plate {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.bo-time-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-time-item__dot {
    opacity: 0.5;
}

.bo-time-item__tech {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.bo-time-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--color-primary-action, var(--color-primary));
    font-size: 0.5625rem;
    font-weight: 750;
    color: #fff;
    line-height: 1;
}

.bo-time-item__chevron {
    font-size: 1.25rem;
    color: var(--color-primary-ink, var(--color-primary));
    opacity: 0.75;
}

.bo-time-item:hover .bo-time-item__chevron {
    opacity: 1;
    transform: translateX(2px);
}

/* Time entry detail / review */
.bo-time-back {
    margin-bottom: var(--space-2);
}

.bo-time-review-hero {
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.bo-time-review-hero__top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
}

.bo-time-review-hero__duration {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    padding: var(--space-4);
    border-radius: var(--radius-3, 12px);
    background: var(--color-primary-container, color-mix(in srgb, var(--color-primary-action, #0066cc) 16%, var(--color-surface)));
    text-align: center;
}

.bo-time-review-hero__duration-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text-strong, var(--color-text));
}

.bo-time-review-hero__duration-unit {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-ink, var(--color-primary));
}

.bo-time-review-hero__duration-sub {
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-time-review-hero__identity {
    flex: 1;
    min-width: min(100%, 16rem);
}

.bo-time-review-hero__chip {
    margin-bottom: var(--space-2);
}

.bo-time-review-hero__title {
    margin: 0 0 var(--space-2);
    font-size: 1.375rem;
    font-weight: 750;
    line-height: 1.3;
}

.bo-time-review-hero__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.bo-time-review-hero__tech {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.bo-time-review-hero__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-time-detail-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 900px) {
    .bo-time-detail-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.bo-time-detail-card {
    padding: var(--space-5);
}

.bo-time-detail-card__title {
    margin: 0 0 var(--space-4);
    font-size: 1.0625rem;
    font-weight: 700;
}

.bo-time-detail-facts {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.bo-time-detail-fact {
    display: grid;
    gap: 2px;
}

.bo-time-detail-fact dt {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.bo-time-detail-fact dd {
    margin: 0;
    font-size: 0.9375rem;
}

.bo-time-rejection-box {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-2, 8px);
    background: rgba(198, 40, 40, 0.08);
    border: 1px solid rgba(198, 40, 40, 0.2);
}

.bo-time-rejection-box__label {
    margin: 0 0 var(--space-1);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #C62828;
}

.bo-time-rejection-box__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.bo-wo-rejection-box {
    margin-top: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-2, 8px);
    background: rgba(198, 40, 40, 0.08);
    border: 1px solid rgba(198, 40, 40, 0.2);
}

.bo-wo-rejection-box__label {
    margin: 0 0 var(--space-1);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #C62828;
}

.bo-wo-rejection-box__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.bo-wo-rejection-box__time {
    margin: var(--space-2) 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-time-review-panel__hint {
    margin: 0 0 var(--space-4);
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.bo-time-review-panel__hint--ok {
    color: #00695C;
}

.bo-time-review-panel__hint--warn {
    color: #C62828;
}

.bo-time-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-time-review-actions__approve {
    flex: 1;
    min-width: 10rem;
}

.bo-time-reject-form {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.bo-time-reject-form__input {
    width: 100%;
    min-height: 5rem;
    resize: vertical;
    margin-bottom: var(--space-3);
}

.bo-time-reject-form__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

@media (max-width: 480px) {
    .bo-time-item {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }

    .bo-time-item__duration {
        grid-column: 1 / -1;
        flex-direction: row;
        width: fit-content;
        gap: var(--space-2);
    }

    .bo-time-item__duration-value,
    .bo-time-item__duration-unit {
        display: inline;
    }
}

/* Invoices list & detail */
.bo-inv {
    gap: var(--space-5);
}

.bo-inv-wizard-wo-list {
    display: flex;
    flex-direction: column;
    max-height: min(22rem, 45vh);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-inv-wizard-wo {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.75rem 1rem;
    width: 100%;
    padding: 0.875rem 1rem;
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.bo-inv-wizard-wo:last-child {
    border-bottom: none;
}

.bo-inv-wizard-wo:hover,
.bo-inv-wizard-wo:focus-visible {
    background: rgba(0, 102, 204, 0.06);
    outline: 2px solid transparent;
}

.bo-inv-wizard-wo__main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.bo-inv-wizard-wo__title {
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
}

.bo-inv-wizard-wo__vehicle {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-inv-wizard-wo__stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    flex-shrink: 0;
}

.bo-inv-wizard-wo__hours {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
}

.bo-inv-wizard-wo__entries {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.bo-inv-wizard-wo__chevron {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
}

.bo-inv-wizard-entry-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bo-inv-wizard-entry-list {
    display: flex;
    flex-direction: column;
    max-height: min(22rem, 45vh);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-inv-wizard-entry {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    align-items: start;
    gap: 0.75rem 0.875rem;
    width: 100%;
    padding: 0.875rem 1rem;
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.bo-inv-wizard-entry:last-child {
    border-bottom: none;
}

.bo-inv-wizard-entry:hover,
.bo-inv-wizard-entry:focus-visible {
    background: rgba(0, 102, 204, 0.05);
    outline: 2px solid transparent;
}

.bo-inv-wizard-entry--selected {
    background: rgba(0, 102, 204, 0.08);
}

.bo-inv-wizard-entry--selected:hover,
.bo-inv-wizard-entry--selected:focus-visible {
    background: rgba(0, 102, 204, 0.11);
}

.bo-inv-wizard-entry__check {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.15rem;
    border: 1.5px solid var(--color-border);
    border-radius: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-surface);
    line-height: 1;
}

.bo-inv-wizard-entry--selected .bo-inv-wizard-entry__check {
    border-color: var(--color-primary);
    background: rgba(0, 102, 204, 0.12);
}

.bo-inv-wizard-entry__main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.bo-inv-wizard-entry__date {
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-inv-wizard-entry__title {
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
    line-height: 1.35;
}

.bo-inv-wizard-entry__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-inv-wizard-entry__hours {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
    white-space: nowrap;
    padding-top: 0.1rem;
}

.bo-inv-wizard-entry--review {
    grid-template-columns: 1fr auto;
    cursor: default;
}

.bo-inv-wizard-entry--review:hover,
.bo-inv-wizard-entry--review:focus-visible {
    background: transparent;
}

.bo-inv-wizard-entry--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.bo-inv-wizard-entry--disabled:hover,
.bo-inv-wizard-entry--disabled:focus-visible {
    background: transparent;
}

.bo-inv-options__stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bo-inv-options__block {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.bo-inv-options__label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-inv-vat {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem;
}

.bo-inv-vat__btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface, #fff);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.bo-inv-vat__btn:hover {
    border-color: rgba(0, 102, 204, 0.35);
    background: rgba(0, 102, 204, 0.04);
}

.bo-inv-vat__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bo-inv-vat__btn--active {
    border-color: var(--color-primary);
    background: rgba(0, 102, 204, 0.08);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.bo-inv-vat__value {
    font-size: 1.25rem;
    font-weight: 750;
    line-height: 1.1;
    color: var(--color-text-strong, var(--color-text));
    font-variant-numeric: tabular-nums;
}

.bo-inv-vat__btn--active .bo-inv-vat__value {
    color: var(--color-text-strong, var(--color-primary-ink, var(--color-primary)));
}

.bo-inv-vat__meta {
    font-size: 0.75rem;
    font-weight: 550;
    color: var(--color-text-muted);
}

.bo-inv-options__card {
    display: grid;
    grid-template-columns: 1.35rem 1fr;
    align-items: start;
    gap: 0.875rem;
    width: 100%;
    margin: 0;
    padding: 1rem 1.05rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface, #fff);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.bo-inv-options__card:hover {
    border-color: rgba(0, 102, 204, 0.35);
    background: rgba(0, 102, 204, 0.04);
}

.bo-inv-options__card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bo-inv-options__card--on {
    border-color: var(--color-primary);
    background: rgba(0, 102, 204, 0.08);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.bo-inv-options__card-check {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
    border: 1.5px solid var(--color-border);
    border-radius: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-surface, #fff);
    line-height: 1;
}

.bo-inv-options__card--on .bo-inv-options__card-check {
    border-color: var(--color-primary);
    background: rgba(0, 102, 204, 0.12);
}

.bo-inv-options__card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.bo-inv-options__card-title {
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-inv-options__card-meta {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

@media (max-width: 520px) {
    .bo-inv-vat {
        grid-template-columns: 1fr;
    }
}

.bo-inv-preview__card {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface, #fff);
    overflow: hidden;
}

.bo-inv-preview__head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.15rem 1rem;
    background: rgba(0, 102, 204, 0.04);
    border-bottom: 1px solid var(--color-border);
}

.bo-inv-preview__kicker {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-inv-preview__title {
    font-size: 1.125rem;
    font-weight: 750;
    line-height: 1.25;
    color: var(--color-text-strong, var(--color-text));
}

.bo-inv-preview__subtitle {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-inv-preview__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.bo-inv-preview__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(29, 29, 31, 0.06);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 650;
}

.bo-inv-preview__chip--warn {
    background: rgba(178, 80, 0, 0.12);
    color: #b25000;
}

.bo-inv-preview__lines {
    display: flex;
    flex-direction: column;
}

.bo-inv-preview__lines-head,
.bo-inv-preview__line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: start;
    padding: 0.75rem 1.15rem;
}

.bo-inv-preview__lines-head {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: rgba(29, 29, 31, 0.025);
    border-bottom: 1px solid var(--color-border);
}

.bo-inv-preview__line {
    border-bottom: 1px solid rgba(29, 29, 31, 0.06);
}

.bo-inv-preview__line:last-child {
    border-bottom: none;
}

.bo-inv-preview__line-desc {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.bo-inv-preview__line-kind {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-inv-preview__line-name {
    font-weight: 600;
    color: var(--color-text-strong, var(--color-text));
    line-height: 1.35;
}

.bo-inv-preview__line-calc {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}

.bo-inv-preview__line-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-top: 0.95rem;
}

.bo-inv-preview__line--discount .bo-inv-preview__line-amount,
.bo-inv-preview__line--discount .bo-inv-preview__line-name {
    color: var(--color-text-muted);
}

.bo-inv-preview__totals {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.95rem 1.15rem 1.1rem;
    border-top: 1px solid var(--color-border);
    background: rgba(0, 102, 204, 0.03);
}

.bo-inv-preview__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-inv-preview__total span:last-child {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
}

.bo-inv-preview__total--grand {
    margin-top: 0.25rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(0, 102, 204, 0.18);
    font-size: 1rem;
    color: var(--color-text-strong, var(--color-text));
    font-weight: 700;
}

.bo-inv-preview__total--grand span:last-child {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-primary);
}

.bo-inv-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-inv-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

@media (min-width: 720px) {
    .bo-inv-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-3);
    }
}

.bo-inv-stats--skeleton {
    grid-template-columns: repeat(2, 1fr);
}

.bo-inv-stat {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    box-shadow: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    min-height: 0;
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
                box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

@media (min-width: 720px) {
    .bo-inv-stat {
        gap: 2px;
        padding: var(--space-4);
        border-radius: var(--radius-3, 12px);
        box-shadow: var(--elevation-1);
    }
}

.bo-inv-stat:hover {
    border-color: var(--color-primary);
}

.bo-inv-stat--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.bo-inv-stat--draft { border-left: 3px solid #78909C; }
.bo-inv-stat--open { border-left: 3px solid #F9A825; }
.bo-inv-stat--ok { border-left: 3px solid #00897B; }
.bo-inv-stat--void { border-left: 3px solid #C62828; }

@media (min-width: 720px) {
    .bo-inv-stat--draft,
    .bo-inv-stat--open,
    .bo-inv-stat--ok,
    .bo-inv-stat--void {
        border-left-width: 4px;
    }
}

.bo-inv-stat__value {
    font-size: 1.25rem;
    font-weight: 750;
    line-height: 1.1;
}

.bo-inv-stat__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1.25;
}

.bo-inv-stat__hint {
    margin-top: 1px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1.25;
}

@media (min-width: 720px) {
    .bo-inv-stat__value {
        font-size: 1.75rem;
    }

    .bo-inv-stat__label {
        font-size: 0.875rem;
        line-height: 1.35;
    }

    .bo-inv-stat__hint {
        margin-top: 2px;
        font-size: 0.75rem;
    }
}

.bo-inv-card {
    padding: var(--space-5);
}

.bo-inv-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.bo-inv-search__input {
    width: 100%;
}

.bo-inv-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.bo-inv-range {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.03));
}

.bo-inv-range__btn {
    padding: 0.4rem 0.85rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--color-text-muted);
    cursor: pointer;
}

.bo-inv-range__btn--active {
    background: var(--color-surface);
    color: var(--color-text-strong, var(--color-primary-ink, var(--color-primary)));
    box-shadow: var(--elevation-1);
}

.bo-inv-result-count {
    margin: 0 0 var(--space-4);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-inv-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-inv-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
                background var(--motion-duration-fast) var(--motion-ease-standard),
                box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-inv-item:hover {
    border-color: var(--color-primary-action, var(--color-primary));
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 10%, var(--color-surface));
    box-shadow: var(--elevation-1);
}

.bo-inv-item--attention {
    border-left: 4px solid var(--color-warning-text, #EF6C00);
    background: var(--color-surface);
}

.bo-inv-item__amount {
    display: flex;
    align-items: baseline;
    gap: 2px;
    min-width: 4.5rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2, 8px);
    background: rgba(239, 108, 0, 0.08);
}

.bo-inv-item__amount-currency {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #E65100;
}

.bo-inv-item__amount-value {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-text-strong, var(--color-text));
}

.bo-inv-item__main {
    min-width: 0;
}

.bo-inv-item__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 2px;
}

.bo-inv-item__number {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.bo-inv-item__customer {
    font-size: 0.9375rem;
    margin-bottom: 4px;
}

.bo-inv-item__customer-number {
    font-weight: 650;
}

.bo-inv-item__meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-inv-item__plate {
    font-weight: 650;
}

.bo-inv-item__dot {
    opacity: 0.5;
}

.bo-inv-item__chevron {
    font-size: 1.25rem;
    color: var(--color-primary);
    opacity: 0.7;
}

.bo-inv-item:hover .bo-inv-item__chevron {
    opacity: 1;
    transform: translateX(2px);
}

.bo-inv-back {
    margin-bottom: var(--space-2);
}

.bo-inv-hero {
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.bo-inv-hero__top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
}

.bo-inv-hero__amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    padding: var(--space-4);
    border-radius: var(--radius-3, 12px);
    background: rgba(178, 80, 0, 0.1);
    text-align: center;
}

.bo-inv-hero__amount--paid {
    background: rgba(36, 138, 61, 0.1);
}

.bo-inv-hero__amount--paid .bo-inv-hero__amount-currency,
.bo-inv-hero__amount--paid .bo-inv-hero__amount-value {
    color: #248a3d;
}

.bo-inv-hero__amount--voided {
    background: rgba(215, 0, 21, 0.08);
}

.bo-inv-hero__amount--voided .bo-inv-hero__amount-currency,
.bo-inv-hero__amount--voided .bo-inv-hero__amount-value {
    color: #d70015;
}

.bo-inv-hero__amount-currency {
    font-size: 1rem;
    font-weight: 700;
    color: #b25000;
}

.bo-inv-hero__amount-value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text-strong, var(--color-text));
}

.bo-inv-hero__amount-sub {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.bo-inv-hero__amount-due {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid rgba(178, 80, 0, 0.2);
    font-size: 0.75rem;
    font-weight: 600;
    color: #b25000;
}

.bo-inv-hero__identity {
    flex: 1;
    min-width: min(100%, 16rem);
}

.bo-inv-hero__chip {
    margin-bottom: var(--space-2);
}

.bo-inv-hero__title {
    margin: 0 0 var(--space-2);
    font-size: 1.5rem;
    font-weight: 750;
}

.bo-inv-hero__meta,
.bo-inv-hero__dates,
.bo-inv-hero__credit-ref {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.bo-inv-hero__dates {
    margin-top: var(--space-2);
    font-size: 0.8125rem;
}

.bo-inv-hero__credit-ref {
    margin-top: var(--space-2);
    font-size: 0.8125rem;
}

.bo-inv-hero__customer-link {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--color-text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(0, 102, 204, 0.35);
    text-underline-offset: 2px;
    cursor: pointer;
}

.bo-inv-hero__customer-link:hover {
    color: #0066cc;
    text-decoration-color: #0066cc;
}

.bo-inv-hero__toolbar {
    display: grid;
    grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.8fr);
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.bo-inv-hero__nav-links,
.bo-inv-hero__primary-actions,
.bo-inv-hero__secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-inv-hero__nav-links,
.bo-inv-hero__action-area {
    min-width: 0;
}

.bo-inv-hero__nav-links {
    align-content: start;
    padding-right: var(--space-4);
    border-right: 1px solid var(--color-border);
}

.bo-inv-hero__action-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.bo-inv-hero__group-label {
    flex: 0 0 100%;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.bo-inv-hero__status-msg {
    margin: 0;
    flex: 1;
    min-width: min(100%, 12rem);
}

.bo-inv-hero__secondary-actions {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.bo-inv-lines-card {
    margin-bottom: var(--space-4);
}

.bo-inv-lines-group {
    margin-bottom: var(--space-5);
}

.bo-inv-lines-group:last-of-type {
    margin-bottom: var(--space-4);
}

.bo-inv-lines-group__title {
    margin: 0 0 var(--space-3);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-inv-lines-group__subtotal {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2, 8px);
    background: rgba(29, 29, 31, 0.03);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-inv-lines-group__subtotal strong {
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.bo-inv-detail-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 960px) {
    .bo-inv-detail-grid {
        grid-template-columns: 1.4fr 1fr;
        align-items: start;
    }
}

.bo-inv-detail-card {
    padding: var(--space-5);
}

.bo-inv-detail-card__title {
    margin: 0 0 var(--space-4);
    font-size: 1.0625rem;
    font-weight: 700;
}

.bo-inv-detail-card__empty {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.bo-inv-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0;
}

.bo-inv-lines__head,
.bo-inv-lines__row {
    display: grid;
    /* Fixed tracks so every row/header shares the same column edges */
    grid-template-columns: minmax(0, 1fr) 4.75rem 9.75rem 5.75rem 5rem;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    align-items: baseline;
    padding: var(--space-2) var(--space-3);
}

.bo-inv-lines__head {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-2);
}

.bo-inv-lines__row {
    border-radius: var(--radius-2, 8px);
    font-size: 0.875rem;
}

.bo-inv-lines__row:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.bo-inv-lines__desc {
    min-width: 0;
    font-weight: 550;
}

.bo-inv-lines__date {
    color: var(--color-text-muted);
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bo-inv-lines__calc {
    color: var(--color-text-muted);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.bo-inv-lines__amount {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bo-inv-lines__head .bo-inv-lines__date,
.bo-inv-lines__head .bo-inv-lines__calc,
.bo-inv-lines__head .bo-inv-lines__amount {
    text-align: inherit;
}

.bo-inv-lines__hours {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-top: 2px;
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border);
}

.bo-inv-lines__hours-row {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.bo-inv-lines__hours-dot {
    margin: 0 0.35em;
    opacity: 0.6;
}

.bo-inv-lines__head > span:nth-child(2) {
    text-align: center;
}

.bo-inv-lines__head > span:nth-child(3),
.bo-inv-lines__head > span:nth-child(4) {
    text-align: right;
}

.bo-inv-lines__edit-btn {
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
    font-size: 0.75rem;
    padding: 2px 10px;
}

.bo-inv-lines__row--editing {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.bo-inv-line-edit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    padding: var(--space-2);
}

.bo-inv-line-edit__header {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-1);
}

.bo-inv-line-edit__header strong {
    font-size: 0.9375rem;
}

.bo-inv-line-edit__header span {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.bo-inv-line-edit__field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bo-inv-line-edit__field--description,
.bo-inv-line-edit__preview,
.bo-inv-line-edit__actions,
.bo-inv-line-edit > .bo-field-error {
    grid-column: 1 / -1;
}

.bo-inv-line-edit__money-input {
    position: relative;
}

.bo-inv-line-edit__money-input > span {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.bo-inv-line-edit__money-input .bo-input {
    padding-left: 1.8rem;
}

.bo-inv-line-edit__preview {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.bo-inv-line-edit__preview-note {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.bo-inv-line-edit__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: 0;
}

@media (max-width: 480px) {
    .bo-inv-line-edit { grid-template-columns: 1fr; }

    .bo-inv-detail .bo-inv-lines__edit-btn {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: start;
    }
}

.bo-inv-totals {
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.bo-inv-totals__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-1) 0;
    font-size: 0.9375rem;
}

.bo-inv-totals__row dt {
    margin: 0;
    color: var(--color-text-muted);
}

.bo-inv-totals__row dd {
    margin: 0;
    font-weight: 650;
}

.bo-inv-totals__row--total {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border);
    font-size: 1.0625rem;
}

.bo-inv-totals__row--total dd {
    font-weight: 800;
    color: var(--color-text-strong, var(--color-text));
}

.bo-inv-actions-panel__hint {
    margin: 0 0 var(--space-4);
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.bo-inv-actions-panel__hint--ok {
    color: #00695C;
}

.bo-inv-actions-panel__hint--warn {
    color: #C62828;
}

.bo-inv-action-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-inv-action-buttons__danger {
    color: #C62828;
}

.bo-inv-inline-form {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-3, 12px);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2, var(--color-surface-muted, #f5f5f7));
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    color: var(--color-text);
}

.bo-inv-inline-form__intro {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.bo-inv-inline-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-inv-inline-form__field .bo-label {
    margin: 0;
    color: var(--color-text-strong, var(--color-text));
}

.bo-inv-inline-form__input {
    width: 100%;
    resize: vertical;
    margin: 0;
    background: var(--color-surface, #fff);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong, var(--color-border));
}

.bo-inv-inline-form__input::placeholder {
    color: var(--color-text-subtle, var(--color-text-muted));
}

textarea.bo-inv-inline-form__input {
    min-height: 4.5rem;
}

.bo-inv-inline-form__amount {
    display: flex;
    align-items: stretch;
    max-width: 16rem;
}

.bo-inv-inline-form__currency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-right: 0;
    border-radius: var(--radius-2, 8px) 0 0 var(--radius-2, 8px);
    background: var(--color-surface, #fff);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.9375rem;
}

.bo-inv-inline-form__input--amount {
    border-radius: 0 var(--radius-2, 8px) var(--radius-2, 8px) 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.bo-inv-inline-form__amount:focus-within .bo-inv-inline-form__currency {
    border-color: var(--color-primary);
}

.bo-inv-inline-form__balance {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2, 8px);
    background: rgba(178, 80, 0, 0.08);
    color: #b25000;
    font-size: 0.8125rem;
    line-height: 1.4;
    width: fit-content;
    max-width: 100%;
}

.bo-inv-inline-form__balance-label {
    font-weight: 500;
}

.bo-inv-inline-form__balance-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bo-inv-inline-form__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-1);
    border-top: 1px solid var(--color-border);
}

.bo-inv-note-box {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-muted, var(--color-surface-2));
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.bo-inv-note-box--void {
    background: rgba(198, 40, 40, 0.06);
    border-color: rgba(198, 40, 40, 0.2);
}

.bo-inv-note-box__label {
    margin: 0 0 var(--space-1);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.bo-inv-note-box__text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
}

@media (max-width: 720px) {
    .bo-inv-detail .bo-inv-hero {
        padding: var(--space-4);
    }

    .bo-inv-detail .bo-inv-hero__top {
        flex-direction: column;
        gap: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .bo-inv-detail .bo-inv-hero__amount {
        width: 100%;
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: flex-start;
        gap: 0.15rem 0.35rem;
        text-align: left;
        padding: var(--space-3) var(--space-4);
    }

    .bo-inv-detail .bo-inv-hero__amount-currency {
        font-size: 1.125rem;
    }

    .bo-inv-detail .bo-inv-hero__amount-value {
        font-size: 1.75rem;
    }

    .bo-inv-detail .bo-inv-hero__amount-sub {
        width: 100%;
        margin-top: 0;
    }

    .bo-inv-detail .bo-inv-hero__amount-due {
        width: 100%;
        margin-top: var(--space-2);
        padding-top: var(--space-2);
    }

    .bo-inv-detail .bo-inv-hero__identity {
        min-width: 0;
    }

    .bo-inv-detail .bo-inv-hero__title {
        font-size: 1.25rem;
        word-break: break-word;
    }

    .bo-inv-detail .bo-inv-hero__toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .bo-inv-detail .bo-inv-hero__nav-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-2);
        width: 100%;
        padding-right: 0;
        border-right: 0;
    }

    .bo-inv-detail .bo-inv-hero__nav-links .bo-inv-hero__group-label,
    .bo-inv-detail .bo-inv-hero__action-area .bo-inv-hero__group-label {
        grid-column: 1 / -1;
    }

    .bo-inv-detail .bo-inv-hero__action-area {
        display: flex;
        width: 100%;
    }

    .bo-inv-detail .bo-inv-hero__nav-links .staff-btn {
        width: 100%;
        justify-content: center;
        padding-inline: var(--space-2);
        font-size: 0.8125rem;
    }

    .bo-inv-detail .bo-inv-hero__primary-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .bo-inv-detail .bo-inv-hero__primary-actions .staff-btn {
        width: 100%;
        justify-content: center;
    }

    .bo-inv-detail .bo-inv-hero__secondary-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
        margin-top: var(--space-3);
    }

    .bo-inv-detail .bo-inv-hero__secondary-actions .staff-btn {
        width: 100%;
        justify-content: center;
    }

    .bo-inv-detail .bo-inv-detail-card {
        padding: var(--space-4);
    }

    .bo-inv-detail .bo-inv-inline-form {
        padding: var(--space-3);
    }

    .bo-inv-detail .bo-inv-inline-form__amount {
        max-width: none;
    }

    .bo-inv-detail .bo-inv-inline-form__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .bo-inv-detail .bo-inv-inline-form__actions .staff-btn {
        width: 100%;
        justify-content: center;
    }

    .bo-inv-detail .bo-inv-lines__head {
        display: none;
    }

    .bo-inv-detail .bo-inv-lines {
        gap: var(--space-2);
    }

    .bo-inv-detail .bo-inv-lines__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0.25rem;
        column-gap: var(--space-3);
        padding: var(--space-3);
        align-items: start;
        background: rgba(29, 29, 31, 0.02);
        border: 1px solid rgba(29, 29, 31, 0.06);
    }

    .bo-inv-detail .bo-inv-lines__row:nth-child(even) {
        background: rgba(29, 29, 31, 0.02);
    }

    .bo-inv-detail .bo-inv-lines__desc {
        grid-column: 1;
        grid-row: 1;
        font-size: 0.9375rem;
    }

    .bo-inv-detail .bo-inv-lines__amount {
        grid-column: 2;
        grid-row: 1;
        font-size: 0.9375rem;
        align-self: start;
    }

    .bo-inv-detail .bo-inv-lines__date {
        display: none;
    }

    .bo-inv-detail .bo-inv-lines__calc {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: left;
        font-size: 0.75rem;
    }

    .bo-inv-detail .bo-inv-lines__calc--empty {
        display: none;
    }

    .bo-inv-detail .bo-inv-totals {
        padding-top: var(--space-3);
    }
}

@media (max-width: 480px) {
    .bo-inv-detail .bo-inv-hero__nav-links {
        grid-template-columns: 1fr;
    }

    .bo-inv-detail .bo-inv-hero__secondary-actions {
        grid-template-columns: 1fr;
    }

    .bo-inv-detail .bo-inv-inline-form__actions {
        grid-template-columns: 1fr;
    }

    .bo-inv-item {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }

    .bo-inv-item__amount {
        grid-column: 1 / -1;
        width: fit-content;
    }
}

/* Customers list & detail */
.bo-cust {
    gap: var(--space-5);
}

.bo-cust-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-cust-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (min-width: 720px) {
    .bo-cust-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.bo-cust-stats--skeleton {
    grid-template-columns: repeat(2, 1fr);
}

.bo-cust-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    box-shadow: var(--elevation-1);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
}

.bo-cust-stat:hover {
    border-color: var(--color-primary);
}

.bo-cust-stat--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}

.bo-cust-stat--ok { border-left: 4px solid #00897B; }
.bo-cust-stat--muted { border-left: 4px solid #78909C; }
.bo-cust-stat--warn { border-left: 4px solid #F9A825; }

.bo-cust-stat__value {
    font-size: 1.75rem;
    font-weight: 750;
    line-height: 1.1;
}

.bo-cust-stat__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.bo-cust-card {
    padding: var(--space-5);
}

.bo-cust-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.bo-cust-search {
    flex: 1 1 100%;
    min-width: 0;
    display: block;
}

.bo-cust-search__input {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.bo-cust-result-count {
    margin: 0 0 var(--space-4);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-cust-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-cust-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
                background var(--motion-duration-fast) var(--motion-ease-standard),
                box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-cust-item:hover {
    border-color: var(--color-primary-action, var(--color-primary));
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 10%, var(--color-surface));
    box-shadow: var(--elevation-1);
}

.bo-cust-item--attention {
    border-left: 4px solid var(--color-warning-text, #F9A825);
    background: var(--color-surface);
}

.bo-cust-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-primary-container, rgba(0, 102, 204, 0.12));
    font-size: 0.75rem;
    font-weight: 750;
    color: var(--color-primary-ink, var(--color-primary));
    flex-shrink: 0;
    overflow: hidden;
}

.bo-cust-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bo-cust-avatar--lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1rem;
}

.bo-profile-avatar-editor {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.bo-profile {
    max-width: 62rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-profile__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
}

.bo-profile__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

@media (min-width: 900px) {
    .bo-profile__layout {
        grid-template-columns: 19rem minmax(0, 1fr);
        gap: var(--space-5);
    }

    .bo-profile-hero {
        position: sticky;
        top: var(--space-4);
    }
}

.bo-profile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: 0 var(--space-5) var(--space-5);
    overflow: hidden;
}

.bo-profile-hero::before {
    content: "";
    align-self: stretch;
    height: 5rem;
    margin: 0 calc(var(--space-5) * -1);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary, #233a5e) 90%, transparent),
        color-mix(in srgb, var(--color-primary, #233a5e) 45%, transparent));
}

.bo-profile-hero__avatar {
    margin-top: -3.25rem;
}

.bo-profile-hero__avatar .bo-cust-avatar {
    border: 4px solid var(--color-surface, #fff);
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.12);
    overflow: hidden;
}


.bo-cust-avatar--xl {
    width: 5.5rem;
    height: 5.5rem;
    font-size: 1.5rem;
    font-weight: 750;
}

.bo-profile-hero__copy {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.bo-profile-hero__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 750;
    line-height: 1.2;
    color: var(--color-text-strong, var(--color-text));
}

.bo-profile-hero__email {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.bo-profile-hero__hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.bo-profile-hero .bo-profile-avatar-editor__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-width: 0;
    margin-top: var(--space-2);
}

.bo-profile-panel {
    padding: 0;
    overflow: hidden;
}

.bo-profile-panel__header {
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
}

.bo-profile-panel__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 750;
    line-height: 1.2;
    color: var(--color-text-strong, var(--color-text));
}

.bo-profile-panel__hint {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.45;
    color: var(--color-text-muted);
}

.bo-profile-panel__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-profile-panel__body .bo-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-profile-password-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 560px) {
    .bo-profile-password-row {
        grid-template-columns: 1fr 1fr;
    }
}

.bo-profile-panel__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border-subtle, var(--color-border));
    background: color-mix(in srgb, var(--color-surface-2, var(--color-surface-muted)) 55%, transparent);
}

.bo-profile-language {
    margin-top: 0;
}

.bo-profile-language__hint {
    margin: 0 0 var(--space-3, 12px);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--line-height-relaxed, 1.5);
    color: var(--color-text-muted);
}

.bo-culture--profile {
    width: fit-content;
}

.bo-culture--profile .ga-culture-link {
    min-width: 3rem;
    min-height: 2.25rem;
}

@media (max-width: 560px) {
    .bo-profile-panel__footer .staff-btn--primary {
        width: 100%;
        justify-content: center;
    }
}

.bo-profile-avatar-editor__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 10rem;
}

.bo-profile-avatar-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
}

.bo-profile-avatar-upload__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.bo-form-error {
    margin: var(--space-2) 0 0;
    color: var(--color-danger, #b42318);
    font-size: 0.9375rem;
}

.bo-form-success {
    margin: var(--space-2) 0 0;
    color: var(--color-success, #067647);
    font-size: 0.9375rem;
}

.bo-cust-item__main {
    min-width: 0;
}

.bo-cust-item__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 2px;
}

.bo-cust-item__number {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.bo-cust-item__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted, #64748b);
}

.bo-cust-item__contact {
    font-size: 0.875rem;
    color: var(--color-text);
    margin-bottom: 4px;
}

.bo-cust-item__meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-cust-item__dot {
    opacity: 0.5;
}

.bo-cust-item__missing,
.bo-cust-item__flag {
    color: var(--color-warning-text, #E65100);
    font-weight: 600;
}

.bo-cust-item__chevron {
    font-size: 1.25rem;
    color: var(--color-primary-ink, var(--color-primary));
    opacity: 0.75;
}

.bo-cust-item:hover .bo-cust-item__chevron {
    opacity: 1;
    transform: translateX(2px);
}

.bo-cust-back {
    margin-bottom: var(--space-2);
}

.bo-cust-hero {
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.bo-cust-hero__top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.bo-cust-hero__identity {
    flex: 1;
    min-width: min(100%, 14rem);
}

.bo-cust-hero__title {
    margin: var(--space-2) 0;
    font-size: 1.5rem;
    font-weight: 750;
}

.bo-cust-hero__kpis {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-cust-contact-cards {
    display: grid;
    gap: var(--space-3);
}

@media (min-width: 560px) {
    .bo-cust-contact-cards {
        grid-template-columns: 1fr 1fr;
    }
}

.bo-cust-contact-card {
    padding: var(--space-4);
    border-radius: var(--radius-2, 8px);
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--color-border);
}

.bo-cust-contact-card__label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.bo-cust-contact-card__value {
    font-size: 0.9375rem;
    font-weight: 600;
}

.bo-cust-contact-card__value--empty {
    color: var(--color-text-muted);
    font-weight: 500;
}

.bo-cust-detail-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 960px) {
    .bo-cust-detail-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.bo-cust-detail-card {
    padding: var(--space-5);
}

.bo-cust-detail-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.bo-cust-detail-card__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
}

.bo-cust-detail-card__subtitle {
    margin: var(--space-1) 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-cust-profile-form {
    gap: var(--space-4);
}

.bo-cust-profile-form__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.bo-cust-profile-form__section:first-child {
    padding-top: 0;
    border-top: none;
}

.bo-cust-profile-form__section .bo-wo-wizard__section-title {
    margin: 0;
}

.bo-cust-profile-form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-1);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.bo-cust-form-row {
    display: grid;
    gap: var(--space-3);
}

@media (min-width: 560px) {
    .bo-cust-form-row {
        grid-template-columns: 1fr 1fr;
    }

    .bo-cust-form-row--locality {
        grid-template-columns: 7.5rem minmax(0, 1fr) 5rem;
    }
}

.bo-form--compact {
    gap: var(--space-3);
}

.bo-cust-add-vehicle {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-2, 8px);
    background: rgba(0, 102, 204, 0.04);
    border: 1px dashed var(--color-border);
}

.bo-cust-vehicle-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-cust-vehicle-item {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
                background var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-cust-vehicle-item:hover {
    border-color: var(--color-primary-action, var(--color-primary));
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 10%, var(--color-surface));
}

.bo-cust-vehicle-item--inactive {
    opacity: 0.75;
    background: rgba(0, 0, 0, 0.02);
}

.bo-cust-vehicle-item__plate {
    font-weight: 800;
    letter-spacing: 0.04em;
    font-size: 0.9375rem;
}

.bo-cust-vehicle-item__label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-cust-vehicle-item__info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.bo-cust-vehicle-item__meta {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0.9;
}

.bo-cust-hero--vehicle {
    text-align: center;
}

.bo-cust-vehicle-hero__plate {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
}

.bo-cust-vehicle-hero__label {
    margin: 0 0 var(--space-1);
    font-size: 1.0625rem;
}

.bo-cust-vehicle-hero__customer {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-veh-edit {
    max-width: 44rem;
}

.bo-veh-edit-hero {
    display: grid;
    grid-template-columns: minmax(9.5rem, 11.5rem) minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-4) var(--space-5);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    background:
        radial-gradient(
            120% 80% at 0% 0%,
            color-mix(in srgb, var(--color-primary, #0066cc) 14%, transparent),
            transparent 55%
        ),
        var(--color-surface);
}

.bo-veh-edit-hero__photo {
    min-width: 0;
}

.bo-veh-edit-hero__photo .vehicle-thumb {
    width: 100%;
    height: 100%;
    min-height: 8.75rem;
}

.bo-veh-edit-hero__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    min-width: 0;
}

.bo-veh-edit-hero__plate {
    min-width: 0;
}

.bo-veh-edit-hero__plate-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.bo-nl-plate--hero {
    max-width: 20rem;
    height: 3.15rem;
}

.bo-nl-plate--hero .bo-nl-plate__eu {
    flex-basis: 2.6rem;
    width: 2.6rem;
}

.bo-nl-plate--hero .bo-nl-plate__input {
    inset: 0 0 0 2.6rem;
    font-size: 1.4rem;
    letter-spacing: 0.16em;
}

.bo-veh-edit-hero__identity {
    min-width: 0;
}

.bo-veh-edit-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.bo-veh-edit-hero__title {
    margin: 0 0 var(--space-1);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-text-strong, var(--color-text));
}

.bo-veh-edit-hero__customer {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

@media (max-width: 36rem) {
    .bo-veh-edit-hero {
        grid-template-columns: 1fr;
    }

    .bo-veh-edit-hero__photo .vehicle-thumb {
        min-height: 7.5rem;
        max-height: 9rem;
    }
}

.bo-veh-edit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.bo-dash-empty--compact {
    padding: var(--space-4) 0;
}

.bo-dash-empty--compact .bo-empty-state__title {
    font-size: 1rem;
}

@media (max-width: 480px) {
    .bo-cust-item {
        grid-template-columns: auto 1fr;
    }

    .bo-cust-item__chevron {
        display: none;
    }

    .bo-cust-vehicle-item {
        grid-template-columns: auto 1fr auto;
    }

    .bo-cust-vehicle-item__label {
        grid-column: 1 / -1;
    }
}

/* ===================================================================== */
/* Service templates (list + detail with step management)          */
/* ===================================================================== */

.bo-svc-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* --- Stats --- */
.bo-svc-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

@media (min-width: 720px) {
    .bo-svc-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-3);
    }
}

.bo-svc-stat {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    box-shadow: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    min-height: 0;
}

@media (min-width: 720px) {
    .bo-svc-stat {
        gap: 2px;
        padding: var(--space-4);
        border-radius: var(--radius-3, 12px);
        box-shadow: var(--elevation-1);
    }
}

.bo-svc-stat--static {
    cursor: default;
}

.bo-svc-stat:not(.bo-svc-stat--static):hover {
    border-color: var(--color-primary);
}

.bo-svc-stat--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.bo-svc-stat--points { border-left: 3px solid var(--color-primary); }
.bo-svc-stat--hours { border-left: 3px solid #00897B; }
.bo-svc-stat--warn { border-left: 3px solid #F9A825; }

@media (min-width: 720px) {
    .bo-svc-stat--points { border-left-width: 4px; }
    .bo-svc-stat--hours { border-left-width: 4px; }
    .bo-svc-stat--warn { border-left-width: 4px; }
}

.bo-svc-stat__value {
    font-size: 1.25rem;
    font-weight: 750;
    line-height: 1.1;
}

.bo-svc-stat__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1.25;
}

@media (min-width: 720px) {
    .bo-svc-stat__value {
        font-size: 1.75rem;
    }

    .bo-svc-stat__label {
        font-size: 0.875rem;
        line-height: 1.35;
    }
}

.bo-svc-stats--skeleton {
    margin-bottom: 0;
}

/* --- List card / toolbar --- */
.bo-svc-card {
    margin-top: var(--space-4);
    padding: var(--space-5);
}

.bo-svc-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
}

.bo-svc-search {
    flex: 1 1 16rem;
    min-width: 0;
}

.bo-svc-search__input {
    width: 100%;
}

.bo-svc-result-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

/* --- Template grid + cards --- */
.bo-svc-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 720px) {
    .bo-svc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.bo-svc-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--elevation-1);
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
                background var(--motion-duration-fast) var(--motion-ease-standard),
                box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
                transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-svc-item:hover {
    border-color: var(--color-primary-action, var(--color-primary));
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 10%, var(--color-surface));
    box-shadow: var(--elevation-2, var(--elevation-1));
    transform: translateY(-2px);
}

.bo-svc-item--attention {
    border-left: 4px solid var(--color-warning-text, #F9A825);
    background: var(--color-surface);
}

.bo-svc-item--inactive {
    opacity: 0.72;
}

.bo-svc-item--inactive .bo-svc-item__name {
    color: var(--color-text-muted);
}

.bo-svc-item__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.bo-svc-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-2, 8px);
    background: rgba(0, 102, 204, 0.12);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-primary);
    flex-shrink: 0;
}

.bo-svc-item__heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bo-svc-item__name {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-svc-item__points {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-svc-item__sku {
    min-width: 0;
}

.bo-svc-item__points-flag {
    color: #B26A00;
    font-weight: 600;
}

.bo-svc-item__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.bo-svc-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bo-svc-metric__value {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.bo-svc-metric__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 600;
}

.bo-svc-item__cta {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    opacity: 0.85;
}

/* --- Detail --- */
.bo-svc-back {
    margin-bottom: var(--space-2);
}

.bo-svc-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.bo-svc-hero__identity {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.bo-svc-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-3, 12px);
    background: rgba(0, 102, 204, 0.12);
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-primary);
    flex-shrink: 0;
    overflow: hidden;
}

.bo-svc-hero__icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bo-svc-hero__title {
    font-size: 1.5rem;
    font-weight: 750;
    line-height: 1.15;
    margin: 0;
}

.bo-svc-hero__meta {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-svc-dot {
    margin: 0 0.4em;
    opacity: 0.6;
}

.bo-svc-detail-grid {
    display: grid;
    gap: var(--space-4);
    align-items: start;
}

@media (min-width: 960px) {
    .bo-svc-detail-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }
}

.bo-svc-detail-card {
    padding: var(--space-5);
}

.bo-svc-detail-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 var(--space-4);
}

.bo-svc-detail-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.bo-svc-detail-card__header .bo-svc-detail-card__title {
    margin-bottom: 2px;
}

.bo-svc-detail-card__subtitle {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    max-width: 36ch;
}

.bo-svc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 520px) {
    .bo-svc-form-row {
        grid-template-columns: 1fr;
    }
}

/* --- Steps --- */
.bo-svc-steps__count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    background: rgba(0, 102, 204, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.bo-svc-step-list {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-svc-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-svc-step--inactive {
    opacity: 0.6;
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.02));
}

.bo-svc-step__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(0, 102, 204, 0.12);
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}

.bo-svc-step__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bo-svc-step__title {
    font-weight: 650;
    line-height: 1.3;
}

.bo-svc-step__guidance {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.bo-svc-step__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.bo-svc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border: 1px solid transparent;
    border-radius: var(--radius-2, 8px);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.9375rem;
    line-height: 1;
    transition: background var(--motion-duration-fast) var(--motion-ease-standard),
                color var(--motion-duration-fast) var(--motion-ease-standard),
                border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-svc-icon-btn:hover:not(:disabled) {
    background: rgba(0, 102, 204, 0.08);
    border-color: var(--color-border);
    color: var(--color-primary);
}

.bo-svc-icon-btn--danger:hover:not(:disabled) {
    background: rgba(198, 40, 40, 0.08);
    color: #C62828;
}

.bo-svc-icon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.bo-svc-step__edit {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-svc-step__guidance-input {
    resize: vertical;
    min-height: 2.75rem;
    font-family: inherit;
}

.bo-svc-step__edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.bo-svc-add-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-muted, rgba(0, 102, 204, 0.02));
}

.bo-svc-add-step__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.bo-svc-add-step .staff-btn {
    align-self: flex-start;
}

@media (max-width: 520px) {
    .bo-svc-item__metrics {
        grid-template-columns: 1fr;
        gap: var(--space-1, 4px);
    }

    .bo-svc-step {
        flex-wrap: wrap;
    }

    .bo-svc-step__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ===================================================================== */
/* Inspection checklist (overview + section editor)                     */
/* ===================================================================== */

.bo-chk-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* --- Rating legend --- */
.bo-chk-legend {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.bo-chk-legend__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.bo-chk-legend__text {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-chk-legend__scale {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-chk-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 650;
    border: 1px solid transparent;
}

.bo-chk-rating__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: 800;
    color: #fff;
}

.bo-chk-rating--ok {
    background: rgba(0, 137, 123, 0.1);
    border-color: rgba(0, 137, 123, 0.3);
    color: #00695C;
}
.bo-chk-rating--ok .bo-chk-rating__glyph { background: #00897B; }

.bo-chk-rating--warn {
    background: rgba(249, 168, 37, 0.12);
    border-color: rgba(249, 168, 37, 0.35);
    color: #B26A00;
}
.bo-chk-rating--warn .bo-chk-rating__glyph { background: #F9A825; }

.bo-chk-rating--danger {
    background: rgba(198, 40, 40, 0.1);
    border-color: rgba(198, 40, 40, 0.3);
    color: #C62828;
}
.bo-chk-rating--danger .bo-chk-rating__glyph { background: #C62828; }

.bo-chk-rating--neutral {
    background: rgba(120, 144, 156, 0.12);
    border-color: rgba(120, 144, 156, 0.3);
    color: #546E7A;
}
.bo-chk-rating--neutral .bo-chk-rating__glyph { background: #78909C; }

.bo-chk-rating--info {
    background: rgba(94, 53, 177, 0.1);
    border-color: rgba(94, 53, 177, 0.3);
    color: #5E35B1;
}
.bo-chk-rating--info .bo-chk-rating__glyph { background: #5E35B1; }

.bo-chk-rating--sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.6875rem;
}

.bo-chk-rating--sm .bo-chk-rating__glyph {
    width: 0.9rem;
    height: 0.9rem;
    font-size: 0.5625rem;
}

/* --- Section cards (overview) --- */
.bo-chk-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.bo-chk-section {
    padding: var(--space-4) var(--space-5);
}

.bo-chk-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.bo-chk-section__heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.bo-chk-section__order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-2, 8px);
    background: rgba(0, 102, 204, 0.12);
    color: var(--color-primary);
    font-weight: 800;
    flex-shrink: 0;
}

.bo-chk-section__name {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.25;
}

.bo-chk-section__count {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-chk-section__count-muted {
    opacity: 0.75;
}

.bo-chk-section__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bo-chk-section__edit {
    margin-left: var(--space-2);
}

.bo-chk-section__empty {
    margin: var(--space-3) 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.bo-chk-preview {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: var(--space-2);
}

@media (min-width: 640px) {
    .bo-chk-preview {
        grid-template-columns: 1fr 1fr;
    }
}

.bo-chk-preview__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    min-width: 0;
}

.bo-chk-preview__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-primary-action, var(--color-primary));
    flex-shrink: 0;
    opacity: 0.55;
}

.bo-chk-preview__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-chk-preview__item--inactive {
    opacity: 0.5;
}

.bo-chk-preview__flag {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 600;
}

.bo-chk-preview__more {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* --- Add section / item --- */
.bo-chk-add,
.bo-chk-add-item {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px dashed var(--color-border);
    background: var(--color-surface-muted, rgba(0, 102, 204, 0.02));
}

.bo-chk-add-item {
    border-radius: var(--radius-2, 8px);
    margin-top: var(--space-2);
}

.bo-chk-add__title,
.bo-chk-add-item__title {
    margin: 0 0 var(--space-2);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.bo-chk-add__row,
.bo-chk-add-item__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.bo-chk-add__grid {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) 6.5rem 7.5rem auto;
    gap: var(--space-3);
    align-items: end;
}

.bo-chk-add__name {
    min-width: 0;
}

.bo-chk-add__submit {
    display: flex;
    align-items: center;
    padding-bottom: 1px;
}

.bo-chk-add__input,
.bo-chk-add-item__row .bo-input {
    flex: 1 1 16rem;
    min-width: 0;
}

@media (max-width: 720px) {
    .bo-chk-add__grid {
        grid-template-columns: 1fr 1fr;
    }

    .bo-chk-add__name {
        grid-column: 1 / -1;
    }

    .bo-chk-add__submit {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

.bo-wo-wizard__section-title {
    margin: 1.25rem 0 0.65rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-wp-lines__desc-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* --- Section editor --- */
.bo-chk-back {
    margin-bottom: var(--space-2);
}

.bo-chk-hero {
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.bo-chk-hero__identity {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.bo-chk-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-3, 12px);
    background: rgba(0, 102, 204, 0.12);
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-primary);
    flex-shrink: 0;
}

.bo-chk-hero__title {
    font-size: 1.5rem;
    font-weight: 750;
    line-height: 1.15;
    margin: 0;
}

.bo-chk-hero__meta {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-chk-dot {
    margin: 0 0.4em;
    opacity: 0.6;
}

.bo-chk-detail-grid {
    display: grid;
    gap: var(--space-4);
    align-items: start;
}

@media (min-width: 960px) {
    .bo-chk-detail-grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }
}

.bo-chk-detail-card {
    padding: var(--space-5);
}

.bo-chk-detail-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 var(--space-4);
}

.bo-chk-detail-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.bo-chk-detail-card__header .bo-chk-detail-card__title {
    margin-bottom: 2px;
}

.bo-chk-detail-card__subtitle {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    max-width: 42ch;
}

.bo-chk-section-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.bo-chk-items__count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    background: rgba(0, 102, 204, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.bo-chk-item-list {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-chk-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-chk-item--inactive {
    opacity: 0.6;
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.02));
}

.bo-chk-item__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(0, 102, 204, 0.12);
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}

.bo-chk-item__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-chk-item__name {
    font-weight: 650;
    line-height: 1.3;
}

.bo-chk-item__preview {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.bo-chk-item__usage {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.bo-chk-item__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.bo-chk-item__edit {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-chk-item__edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

@media (max-width: 520px) {
    .bo-chk-item {
        flex-wrap: wrap;
    }

    .bo-chk-item__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .bo-chk-legend {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Checklists overview (top level) --- */
.bo-chk-cklist-grid {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

@media (min-width: 720px) {
    .bo-chk-cklist-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.bo-chk-cklist {
    position: relative;
    padding: 0;
    overflow: hidden;
}

.bo-chk-cklist__actions {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    gap: 2px;
    z-index: 1;
}

.bo-chk-cklist__link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    padding-right: 7rem;
    text-decoration: none;
    color: inherit;
    transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-chk-cklist__link:hover {
    background: rgba(0, 102, 204, 0.03);
}

.bo-chk-cklist__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-3, 12px);
    background: rgba(0, 102, 204, 0.12);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-primary);
    flex-shrink: 0;
}

.bo-chk-cklist__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bo-chk-cklist__name {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-chk-cklist__meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-chk-cklist__chevron {
    color: var(--color-primary);
    font-weight: 700;
    opacity: 0;
    transition: opacity var(--motion-duration-fast) var(--motion-ease-standard),
                transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-chk-cklist__link:hover .bo-chk-cklist__chevron {
    opacity: 1;
    transform: translateX(2px);
}

/* --- Checklist rename disclosure --- */
.bo-chk-rename {
    flex-shrink: 0;
}

.bo-chk-rename > summary {
    list-style: none;
    cursor: pointer;
}

.bo-chk-rename > summary::-webkit-details-marker {
    display: none;
}

.bo-chk-rename__body {
    margin-top: var(--space-3);
    min-width: min(20rem, 70vw);
}

@media (max-width: 640px) {
    .bo-chk-cklist__chevron {
        display: none;
    }
}

/* ===================================================================== */
/* Inspections (list + create + execute)                                 */
/* ===================================================================== */

.bo-insp-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-insp-back {
    margin-bottom: var(--space-2);
}

/* --- Stats --- */
.bo-insp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.bo-insp-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    box-shadow: var(--elevation-1);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
}

.bo-insp-stat:hover {
    border-color: var(--color-primary);
}

.bo-insp-stat--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}

.bo-insp-stat--ok { border-left: 4px solid #00897B; }
.bo-insp-stat--warn { border-left: 4px solid #F9A825; }

.bo-insp-stat__value {
    font-size: 1.75rem;
    font-weight: 750;
    line-height: 1.1;
}

.bo-insp-stat__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* --- List --- */
.bo-insp-card {
    margin-top: var(--space-4);
    padding: var(--space-5);
}

.bo-insp-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
}

.bo-insp-search {
    flex: 1 1 16rem;
    min-width: 0;
}

.bo-insp-search__input {
    width: 100%;
}

.bo-insp-result-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

.bo-insp-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-insp-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
                background var(--motion-duration-fast) var(--motion-ease-standard),
                box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-insp-item:hover {
    border-color: var(--color-primary-action, var(--color-primary));
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 10%, var(--color-surface));
    box-shadow: var(--elevation-1);
}

.bo-insp-item__plate-box {
    flex-shrink: 0;
}

.bo-insp-item__plate {
    display: inline-block;
    padding: 0.3rem 0.55rem;
    border-radius: 6px;
    background: #1f2937;
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.06em;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.bo-insp-item__main {
    min-width: 0;
}

.bo-insp-item__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.bo-insp-item__customer {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-insp-item__meta {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.bo-insp-item__dot {
    opacity: 0.6;
}

.bo-insp-item__findings {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.bo-insp-item__chevron {
    color: var(--color-primary);
    font-weight: 700;
    opacity: 0;
    transition: opacity var(--motion-duration-fast) var(--motion-ease-standard),
                transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-insp-item:hover .bo-insp-item__chevron {
    opacity: 1;
    transform: translateX(2px);
}

@media (max-width: 640px) {
    .bo-insp-item {
        grid-template-columns: auto 1fr;
    }

    .bo-insp-item__findings {
        grid-column: 1 / -1;
    }

    .bo-insp-item__chevron {
        display: none;
    }
}

/* --- Create form --- */
.bo-insp-create {
    padding: var(--space-5);
    max-width: 40rem;
}

.bo-insp-create__warning {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2, 8px);
    background: rgba(249, 168, 37, 0.1);
    border: 1px solid rgba(249, 168, 37, 0.35);
    font-size: 0.875rem;
}

.bo-insp-create__warning p {
    margin: 0;
}

.bo-insp-create__warning p + p {
    margin-top: var(--space-2);
}

.bo-insp-create__hint {
    margin: var(--space-1, 4px) 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* --- Detail hero + progress --- */
.bo-insp-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5);
    margin-bottom: var(--space-3);
}

.bo-insp-hero__identity {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.bo-insp-hero__plate {
    display: inline-block;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    background: #1f2937;
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 1.125rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.bo-insp-hero__title {
    font-size: 1.375rem;
    font-weight: 750;
    line-height: 1.15;
    margin: 0;
}

.bo-insp-hero__meta {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-insp-progress {
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
}

.bo-insp-progress__bar-wrap {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}

.bo-insp-progress__bar {
    height: 100%;
    border-radius: 999px;
    background: var(--color-primary-action, var(--color-primary));
    transition: transform var(--motion-duration-standard, 200ms) var(--motion-ease-standard);
}

.bo-insp-progress__counts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.bo-insp-progress__label {
    font-size: 0.875rem;
    font-weight: 700;
}

.bo-insp-summary {
    display: flex;
    gap: 4px;
}

/* --- Topics + rows --- */
.bo-insp-topic {
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
}

.bo-insp-topic__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--space-3);
}

.bo-insp-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-insp-row {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-insp-row--pending {
    border-left: 3px solid var(--color-border);
}

.bo-insp-row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.bo-insp-row__name {
    font-weight: 650;
    min-width: 0;
}

.bo-insp-row__pending-tag {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.bo-insp-row__add-to-wo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 650;
    border: 1px solid rgba(0, 137, 123, 0.35);
    background: rgba(0, 137, 123, 0.08);
    color: #00695C;
    cursor: pointer;
}

.bo-insp-row__add-to-wo:hover:not(:disabled) {
    background: rgba(0, 137, 123, 0.16);
}

.bo-insp-row__add-to-wo:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.bo-insp-row__notes {
    margin-top: var(--space-2);
    width: 100%;
}

.bo-insp-row__notes-ro {
    margin: var(--space-2) 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    padding-left: var(--space-3);
    border-left: 2px solid var(--color-border);
}

.bo-insp-row__media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.bo-insp-row__media-item {
    margin: 0;
    position: relative;
    border-radius: var(--radius-2, 8px);
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface, #fff);
    aspect-ratio: 1;
}

.bo-insp-row__media-open {
    appearance: none;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.bo-insp-row__media-open:hover {
    opacity: 0.92;
}

.bo-insp-row__media-open:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bo-insp-row__media-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bo-insp-row__media-badge {
    position: absolute;
    left: 0.35rem;
    bottom: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, 0.65);
    pointer-events: none;
}

/* --- Rating buttons --- */
.bo-insp-ratings {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-shrink: 0;
}

.bo-insp-rating-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    cursor: pointer;
    transition: background var(--motion-duration-fast) var(--motion-ease-standard),
                border-color var(--motion-duration-fast) var(--motion-ease-standard),
                color var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-insp-rating-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.bo-insp-rating-btn__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #90A4AE;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1;
}

.bo-insp-rating-btn--ok .bo-insp-rating-btn__glyph {
    background: #00897B;
}

.bo-insp-rating-btn--warn .bo-insp-rating-btn__glyph {
    background: #F9A825;
}

.bo-insp-rating-btn--danger .bo-insp-rating-btn__glyph {
    background: #C62828;
}

.bo-insp-rating-btn--neutral .bo-insp-rating-btn__glyph {
    background: #78909C;
}

.bo-insp-rating-btn--ok:hover:not(:disabled),
.bo-insp-rating-btn--ok.bo-insp-rating-btn--on {
    background: rgba(0, 137, 123, 0.12);
    border-color: #00897B;
    color: #00695C;
}

.bo-insp-rating-btn--warn:hover:not(:disabled),
.bo-insp-rating-btn--warn.bo-insp-rating-btn--on {
    background: rgba(249, 168, 37, 0.14);
    border-color: #F9A825;
    color: #B26A00;
}

.bo-insp-rating-btn--danger:hover:not(:disabled),
.bo-insp-rating-btn--danger.bo-insp-rating-btn--on {
    background: rgba(198, 40, 40, 0.12);
    border-color: #C62828;
    color: #C62828;
}

.bo-insp-rating-btn--neutral:hover:not(:disabled),
.bo-insp-rating-btn--neutral.bo-insp-rating-btn--on {
    background: rgba(120, 144, 156, 0.14);
    border-color: #78909C;
    color: #546E7A;
}

.bo-insp-rating-btn--on {
    font-weight: 750;
}

@media (max-width: 560px) {
    .bo-insp-row__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .bo-insp-rating-btn__label {
        display: none;
    }

    .bo-insp-ratings {
        width: 100%;
    }
}

/* --- Finalize bar --- */
.bo-insp-finalize {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
}

.bo-insp-finalize__title {
    margin: 0;
    font-weight: 700;
}

.bo-insp-finalize__hint {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ============================================================
   Work plans (offertes) — list & detail
   ============================================================ */
.bo-wp {
    gap: var(--space-5);
}

.bo-wp-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-wp-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (min-width: 720px) {
    .bo-wp-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.bo-wp-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    box-shadow: var(--elevation-1);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
                box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-wp-stat:hover {
    border-color: var(--color-primary);
}

.bo-wp-stat--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}

.bo-wp-stat--neutral { border-left-color: #78909C; }
.bo-wp-stat--warn { border-left-color: #F9A825; }
.bo-wp-stat--ok { border-left-color: #00897B; }

.bo-wp-stat__value {
    font-size: 1.75rem;
    font-weight: 750;
    line-height: 1.1;
}

.bo-wp-stat__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.bo-wp-card {
    padding: var(--space-5);
}

.bo-wp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.bo-wp-search {
    flex: 1;
    min-width: min(100%, 16rem);
}

.bo-wp-search__input {
    width: 100%;
}

.bo-wp-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
}

.bo-wp-result-count {
    margin: 0 0 var(--space-4);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-wp-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-wp-item {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
                background var(--motion-duration-fast) var(--motion-ease-standard),
                box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-wp-item:hover {
    border-color: var(--color-primary-action, var(--color-primary));
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 10%, var(--color-surface));
    box-shadow: var(--elevation-1);
}

.bo-wp-item__link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    min-width: 0;
    padding: var(--space-4);
    text-decoration: none;
    color: inherit;
}

.bo-wp-item__plate-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 4.75rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2, 8px);
    background: rgba(0, 102, 204, 0.08);
}

.bo-wp-item__plate {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.bo-wp-item__rev {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.bo-wp-item__main {
    min-width: 0;
}

.bo-wp-item__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 2px;
}

.bo-wp-item__customer {
    font-size: 0.9375rem;
    font-weight: 650;
}

.bo-wp-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-wp-item__dot {
    opacity: 0.5;
}

.bo-wp-item__amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
}

.bo-wp-item__amount-value {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wp-item__amount-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.bo-wp-item__pdf {
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    border-left: 1px solid var(--color-border);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    color: var(--color-text-muted);
    transition: color var(--motion-duration-fast) var(--motion-ease-standard),
                background var(--motion-duration-fast) var(--motion-ease-standard);
}

.bo-wp-item__pdf:hover {
    color: var(--color-primary);
    background: rgba(0, 102, 204, 0.06);
}

/* Detail */
.bo-wp-back {
    margin-bottom: var(--space-2);
}

.bo-wp-hero {
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.bo-wp-hero__top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
}

.bo-wp-hero__amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    padding: var(--space-4);
    border-radius: var(--radius-3, 12px);
    background: rgba(0, 102, 204, 0.1);
    text-align: center;
}

.bo-wp-hero__amount-currency {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
}

.bo-wp-hero__amount-value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
}

.bo-wp-hero__amount-sub {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.bo-wp-hero__identity {
    flex: 1;
    min-width: min(100%, 16rem);
}

.bo-wp-hero__chip {
    margin-bottom: var(--space-2);
}

.bo-wp-hero__title {
    margin: 0 0 var(--space-2);
    font-size: 1.5rem;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.bo-wp-hero__meta,
.bo-wp-hero__dates {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.bo-wp-hero__dates {
    margin-top: var(--space-2);
    font-size: 0.8125rem;
}

.bo-wp-hero__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.bo-wp-detail-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 960px) {
    .bo-wp-detail-grid {
        grid-template-columns: 1.4fr 1fr;
        align-items: start;
    }
}

.bo-wp-detail-card {
    padding: var(--space-5);
}

.bo-wp-detail-card__title {
    margin: 0 0 var(--space-4);
    font-size: 1.0625rem;
    font-weight: 700;
}

.bo-wp-detail-card__empty {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.bo-wp-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-5);
}

.bo-wp-lines__head,
.bo-wp-lines__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-2) var(--space-3);
}

.bo-wp-lines__head {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-2);
}

.bo-wp-lines__row {
    border-radius: var(--radius-2, 8px);
    font-size: 0.875rem;
}

.bo-wp-lines__row:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.bo-wp-lines__desc {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bo-wp-lines__desc-text {
    font-weight: 600;
}

.bo-wp-lines__notes {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.bo-wp-lines__hours,
.bo-wp-lines__price {
    text-align: right;
    white-space: nowrap;
    padding-top: 1px;
}

.bo-wp-lines__price {
    font-weight: 700;
}

.bo-wp-totals {
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.bo-wp-totals__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-1) 0;
    font-size: 0.9375rem;
}

.bo-wp-totals__row dt {
    margin: 0;
    color: var(--color-text-muted);
}

.bo-wp-totals__row dd {
    margin: 0;
    font-weight: 650;
}

.bo-wp-totals__row--total {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--color-border);
    font-size: 1.0625rem;
}

.bo-wp-totals__row--total dd {
    font-weight: 800;
    color: var(--color-text-strong, var(--color-text));
}

/* Timeline */
.bo-wo-timeline-card .bo-wp-timeline {
    max-width: 28rem;
}

.bo-wp-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.bo-wp-timeline__item {
    position: relative;
    display: flex;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    padding-left: var(--space-1);
}

.bo-wp-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}

.bo-wp-timeline__item:last-child {
    padding-bottom: 0;
}

.bo-wp-timeline__dot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
}

.bo-wp-timeline__item--done .bo-wp-timeline__dot {
    border-color: #00897B;
    background: #00897B;
}

.bo-wp-timeline__item--pending .bo-wp-timeline__dot {
    border-color: var(--color-border);
    background: var(--color-surface);
}

.bo-wp-timeline__item--current .bo-wp-timeline__dot {
    border-color: #EF6C00;
    background: var(--color-warning-surface, #FFF3E0);
    box-shadow: 0 0 0 3px rgba(239, 108, 0, 0.18);
}

.bo-wp-timeline__item--void .bo-wp-timeline__dot {
    border-color: #C62828;
    background: #C62828;
}

.bo-wp-timeline__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bo-wp-timeline__label {
    font-size: 0.9375rem;
    font-weight: 650;
}

.bo-wp-timeline__time {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-wp-timeline__item--pending .bo-wp-timeline__label {
    color: var(--color-text-muted);
    font-weight: 600;
}

.bo-wp-timeline__item--current .bo-wp-timeline__label {
    color: #E65100;
}

.bo-wp-timeline__item--void .bo-wp-timeline__label {
    color: #C62828;
}

.bo-wo-timeline-note {
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2, 8px);
    background: rgba(198, 40, 40, 0.08);
    border: 1px solid rgba(198, 40, 40, 0.16);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text);
}

/* —— Add large material modal —— */
.bo-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2, 0.5rem);
    padding: 0.875rem 1.25rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.bo-label__req {
    color: var(--color-danger, #c62828);
    font-weight: 700;
}

.bo-label__optional {
    font-weight: 500;
    color: var(--color-text-muted);
}

/* —— Materiaal toevoegen (wide two-pane; container-based for true modal width) —— */
.bo-wo-material-add {
    container-type: inline-size;
    container-name: material-add;
    max-height: min(92vh, 48rem);
}

.bo-wo-material-add__body {
    flex: 1 1 auto;
    min-height: 0;
    display: block;
    padding: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.bo-wo-material-add__error {
    margin: 0 0 0.75rem;
}

.bo-wo-material-add__layout {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.bo-wo-material-add__main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.bo-wo-material-add__side {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
    padding: 1rem;
    border-radius: var(--radius-2, 8px);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2, #f5f7fa);
}

.bo-wo-material-add__side-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-wo-material-add__source {
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.bo-wo-material-add__source > .bo-label,
.bo-wo-material-add__source > legend.bo-label {
    margin-bottom: 0.45rem;
    padding: 0;
}

.bo-wo-material-source-seg {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.3rem;
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, #f5f7fa);
    border: 1px solid var(--color-border);
}

.bo-wo-material-source-seg__btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius-2, 8px) - 2px);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.bo-wo-material-source-seg__btn:hover,
.bo-wo-material-source-seg__btn:focus-visible {
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
    outline: 2px solid transparent;
}

.bo-wo-material-source-seg__btn.is-selected {
    background: var(--color-surface, #fff);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    box-shadow: 0 1px 2px rgba(29, 29, 31, 0.06);
}

.bo-wo-material-source-seg__title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-text-strong, var(--color-text));
}

.bo-wo-material-source-seg__hint {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--color-text-muted);
}

.bo-wo-material-add__catalog {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.bo-wo-material-add__catalog-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.bo-wo-material-add__catalog-count {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.bo-wo-material-add__search {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.bo-wo-material-add__search-empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-wo-material-add__hits {
    max-height: 16rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-wo-material-add__hit-group + .bo-wo-material-add__hit-group {
    border-top: 1px solid var(--color-border);
}

.bo-wo-material-add__hit-group-title {
    padding: 0.45rem 0.85rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-surface-2, #f5f7fa);
    position: sticky;
    top: 0;
    z-index: 1;
}

.bo-wo-material-add__hit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.bo-wo-material-add__hit-group .bo-wo-material-add__hit:last-child {
    border-bottom: none;
}

.bo-wo-material-add__hit:hover,
.bo-wo-material-add__hit:focus-visible {
    background: var(--color-surface-2, #f3f4f6);
    outline: 2px solid transparent;
}

.bo-wo-material-add__hit-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
    width: 100%;
}

.bo-wo-material-add__hit-name {
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
    overflow-wrap: anywhere;
}

.bo-wo-material-add__hit-sku {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
}

.bo-wo-material-add__hit-meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.bo-wo-material-add__hit-stock--low {
    color: #b25000;
    font-weight: 700;
}

.bo-wo-material-add__picked {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    border-radius: var(--radius-2, 8px);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

.bo-wo-material-add__picked-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.bo-wo-material-add__picked-name {
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
    overflow-wrap: anywhere;
}

.bo-wo-material-add__picked-meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.bo-wo-material-add__picked-stock {
    color: var(--color-text-strong, var(--color-text));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bo-wo-material-add__picked-clear {
    align-self: flex-start;
}

.bo-wo-material-add__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.bo-wo-material-add__summary {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.65rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.bo-wo-material-add__summary-row {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
}

.bo-wo-material-add__summary-row dt {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.bo-wo-material-add__summary-row dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 650;
    text-align: right;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.bo-wo-material-add__hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.bo-wo-material-add__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
}

.bo-wo-material-add__total-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-wo-material-add__total-value {
    font-size: 1.25rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
}

/* Wider modal panel: two columns + richer hit rows */
@container material-add (min-width: 640px) {
    .bo-wo-material-source-seg {
        grid-template-columns: 1fr 1fr;
    }

    .bo-wo-material-add__row {
        grid-template-columns: 1fr 1fr;
    }

    .bo-wo-material-add__picked {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .bo-wo-material-add__picked-clear {
        align-self: center;
        flex-shrink: 0;
    }

    .bo-wo-material-add__hits {
        max-height: 18rem;
    }

    .bo-wo-material-add__hit {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .bo-wo-material-add__hit-meta {
        flex-shrink: 0;
        text-align: right;
    }
}

@container material-add (min-width: 760px) {
    .bo-wo-material-add__body {
        padding: 1rem 1.25rem;
    }

    .bo-wo-material-add__layout {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.8fr);
        align-items: start;
        gap: 1.25rem;
    }

    .bo-wo-material-add__side {
        position: sticky;
        top: 0;
    }

    .bo-wo-material-add__hits {
        max-height: min(26rem, 52vh);
    }

    .bo-wo-material-add__total-value {
        font-size: 1.375rem;
    }
}

.bo-wo-material-source {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.bo-wo-materials__source .bo-wo-material-source,
.bo-wo-materials__mobile-badges .bo-wo-material-source {
    margin-left: 0;
}

.bo-wo-material-source--stock {
    color: #1b4d3e;
    background: #e6f2ed;
}

.bo-wo-material-source--job {
    color: #5c4a1f;
    background: #f5efd9;
}

.bo-wo-material-source--invoiced {
    color: var(--color-text-muted);
    background: var(--color-surface-2, #eef0f3);
    font-weight: 650;
    text-transform: none;
    letter-spacing: 0;
}

.bo-wo-materials__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--space-3);
}

.bo-wo-materials__head,
.bo-wo-materials__row {
    display: grid;
    /* Fixed tracks so head + rows share the same column edges (separate grids). */
    grid-template-columns:
        minmax(6.5rem, 1.2fr)
        5.5rem
        minmax(5rem, 0.85fr)
        3.25rem
        5rem
        5.75rem
        12rem;
    column-gap: 0.55rem;
    row-gap: 0.35rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
}

.bo-wo-materials__head {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
}

.bo-wo-materials__head > .bo-wo-materials__num,
.bo-wo-materials__head > .bo-wo-materials__actions-head {
    justify-self: end;
    text-align: right;
}

.bo-wo-materials__row {
    border-radius: var(--radius-2, 8px);
    font-size: 0.875rem;
    overflow: hidden;
}

.bo-wo-materials__row:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.bo-wo-materials__desc {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
}

.bo-wo-materials__name {
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-wo-materials__mobile-badges,
.bo-wo-materials__mobile-meta {
    display: none;
}

.bo-wo-materials__source {
    min-width: 0;
}

.bo-wo-materials__action {
    min-width: 0;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-wo-materials__num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    justify-self: end;
    min-width: 0;
}

.bo-wo-materials__amount {
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
    line-height: 1.25;
    overflow: hidden;
}

.bo-wo-materials__amount .bo-wo-job-total__sub {
    font-size: 0.75rem;
    font-weight: 550;
}

.bo-wo-materials__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.bo-wo-materials__actions .bo-wo-wizard__row-discount-inner {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
}

.bo-wo-materials__actions .bo-wo-wizard__discount-seg-btn {
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.28rem;
}

.bo-wo-materials__edit {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.15rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-canvas, #fff);
}

.bo-wo-materials__edit .bo-wo-wizard__row-discount-inner {
    justify-content: flex-start;
    width: auto;
}

.bo-wo-materials__row--editing {
    background: color-mix(in srgb, var(--color-primary, #0066cc) 4%, var(--color-surface));
}

.bo-wo-materials__remove {
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.bo-wo-materials__remove:hover:not(:disabled),
.bo-wo-materials__remove:focus-visible {
    background: color-mix(in srgb, var(--color-danger, #b42318) 10%, transparent);
    color: var(--color-danger, #b42318);
}

.bo-wo-materials__remove:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@media (max-width: 960px) {
    .bo-wo-materials__head,
    .bo-wo-materials__row {
        grid-template-columns:
            minmax(6rem, 1.15fr)
            5.5rem
            minmax(4.25rem, 0.75fr)
            3rem
            5.5rem
            12rem;
    }

    .bo-wo-materials__unit {
        display: none;
    }
}

@media (max-width: 820px) {
    .bo-wo-materials__head,
    .bo-wo-materials__row {
        grid-template-columns:
            minmax(5.5rem, 1fr)
            5.5rem
            3rem
            5.5rem
            12rem;
    }

    .bo-wo-materials__head > :nth-child(3),
    .bo-wo-materials__action {
        display: none;
    }
}

@media (max-width: 720px) {
    .bo-wo-materials__head {
        display: none;
    }

    .bo-wo-materials__row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.3rem 0.75rem;
        padding: 0.85rem 0.1rem;
        border-bottom: 1px solid var(--color-border);
        border-radius: 0;
        background: transparent;
    }

    .bo-wo-materials__row:nth-child(even) {
        background: transparent;
    }

    .bo-wo-materials__row:last-child {
        border-bottom: 0;
    }

    .bo-wo-materials__desc {
        grid-column: 1;
        grid-row: 1;
    }

    .bo-wo-materials__amount {
        display: block;
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        font-size: 0.9375rem;
    }

    .bo-wo-materials__mobile-meta {
        display: block;
        grid-column: 1 / -1;
        grid-row: 2;
        margin: 0;
        font-size: 0.8125rem;
        line-height: 1.35;
        color: var(--color-text-muted);
        overflow-wrap: anywhere;
    }

    .bo-wo-materials__actions {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: flex-start;
        margin-top: 0.1rem;
    }

    .bo-wo-materials__edit {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    .bo-wo-materials__actions:empty {
        display: none;
    }

    .bo-wo-materials__mobile-badges {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .bo-wo-materials__invoiced-desk,
    .bo-wo-materials__source,
    .bo-wo-materials__action,
    .bo-wo-materials__qty,
    .bo-wo-materials__unit {
        display: none;
    }

    .bo-wo-materials__remove {
        padding-left: 0;
    }
}

.bo-product-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.bo-product-group__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.bo-product-group__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-product-group__count {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-subtle, var(--color-text-muted));
}

/* —— Product detail: Gegevens —— */
.bo-product-gegevens__form {
    max-width: none;
    width: 100%;
    gap: 0;
}

.bo-product-gegevens__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
}

.bo-product-gegevens__section:first-child {
    padding-top: 0;
    border-top: none;
}

.bo-product-gegevens__section .bo-wo-wizard__section-title {
    margin: 0;
}

.bo-product-gegevens__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 560px) {
    .bo-product-gegevens__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bo-product-gegevens__margin {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.bo-product-gegevens__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-1);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.bo-product-price {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface, #fff);
    overflow: hidden;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.bo-product-price:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.bo-product-price__currency {
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-2, #f5f7fa);
    border-right: 1px solid var(--color-border);
    user-select: none;
}

.bo-product-price__input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-width: 0;
}

.bo-input--mono {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
}

.bo-product-status {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 22rem;
    cursor: pointer;
}

.bo-product-status__copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.bo-product-status__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

.bo-product-status__hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.bo-product-stock__stand {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, #f5f7fa);
    border: 1px solid var(--color-border);
    min-width: 7.5rem;
}

.bo-product-stock__stand-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-product-stock__stand-value {
    font-size: 1.375rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--color-text-strong, var(--color-text));
}

.bo-product-stock__stand-unit {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-left: 0.2rem;
}

/* —— Create product modal —— */
.bo-product-create__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bo-product-create__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 520px) {
    .bo-product-create__row {
        grid-template-columns: 1fr;
    }
}

.bo-product-create__hint {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-2, 8px);
    background: linear-gradient(180deg, var(--color-surface-2, #f5f7fa) 0%, var(--color-surface) 100%);
    border: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-product-create__hint strong {
    font-size: 1.0625rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
}

/* --- Shop settings (Bedrijfsgegevens) --- */
.bo-settings-hero {
    padding: var(--space-5);
}

.bo-settings-hero__top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.bo-settings-hero__identity {
    flex: 1;
    min-width: min(100%, 14rem);
}

.bo-settings-hero__title {
    margin: var(--space-2) 0 var(--space-1);
    font-size: 1.5rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--color-text-strong, var(--color-text));
}

.bo-settings-hero__meta {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.bo-settings-hero__dot {
    opacity: 0.55;
}

.bo-settings-hero__facts {
    display: grid;
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .bo-settings-hero__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bo-settings-fact {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface-muted));
    border: 1px solid var(--color-border);
    min-width: 0;
}

.bo-settings-fact__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.bo-settings-fact__value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.bo-settings-fact__value--empty {
    font-weight: 500;
    color: var(--color-text-muted);
}

.bo-settings-alert {
    padding: var(--space-4);
    border-radius: var(--radius-2, 8px);
    border: 1px solid var(--color-warning-border);
    background: var(--color-warning-surface);
}

.bo-settings-alert__title {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-settings-alert__body {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.bo-settings-alert--danger {
    border-color: var(--color-danger-border, var(--color-danger));
    background: var(--color-danger-surface, color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)));
}

.bo-danger-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 36rem;
    padding: var(--space-5);
    border-radius: var(--radius-2, 8px);
    border: 1px solid color-mix(in srgb, var(--color-danger) 35%, var(--color-border, #e5e7eb));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--color-danger) 7%, var(--color-surface)) 0%,
            var(--color-surface, #fff) 42%
        );
}

.bo-danger-panel--pending {
    border-color: var(--color-danger);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--color-danger) 12%, var(--color-surface)) 0%,
            var(--color-surface, #fff) 48%
        );
}

.bo-danger-panel__header {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.bo-danger-panel__icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--color-danger);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.bo-danger-panel__title {
    margin: 0 0 0.35rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.bo-danger-panel__lead {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.bo-danger-panel__steps {
    margin: 0;
    padding: var(--space-3) var(--space-3) var(--space-3) 1.75rem;
    border-radius: var(--radius-2, 8px);
    background: color-mix(in srgb, var(--color-surface-muted, #f5f5f5) 80%, var(--color-surface));
    border: 1px solid var(--color-border, #e5e7eb);
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.45;
}

.bo-danger-panel__steps li + li {
    margin-top: 0.35rem;
}

.bo-danger-panel__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-danger-panel__ack {
    align-items: flex-start;
    padding: var(--space-3);
    border-radius: var(--radius-2, 8px);
    border: 1px solid var(--color-border, #e5e7eb);
    background: var(--color-surface, #fff);
}

.bo-danger-panel__ack span {
    line-height: 1.45;
}

.bo-danger-panel__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding-top: var(--space-1);
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.bo-danger-panel__footer-note,
.bo-danger-panel__hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.bo-danger-panel__schedule {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2, 8px);
    border: 1px dashed color-mix(in srgb, var(--color-danger) 45%, var(--color-border, #e5e7eb));
    background: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface));
}

.bo-danger-panel__schedule-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.bo-danger-panel__schedule-date {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-danger);
}

.bo-detail-tab--danger {
    color: var(--color-danger);
}

.bo-detail-tab--danger.bo-detail-tab--active {
    color: var(--color-danger);
    border-bottom-color: var(--color-danger);
}

.bo-settings-success {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-success, #067647);
}

.bo-tenant-delete-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2, 8px);
    border: 1px solid var(--color-danger-border, var(--color-danger));
    background: var(--color-danger-surface, color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)));
    color: var(--color-text-strong, var(--color-text));
    font-size: 0.875rem;
    line-height: 1.45;
}

.bo-tenant-delete-banner a {
    color: var(--color-danger);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.bo-billing-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2, 8px);
    border: 1px solid var(--color-warning-border, color-mix(in srgb, var(--color-warning, #b45309) 35%, var(--color-border)));
    background: var(--color-warning-surface, color-mix(in srgb, var(--color-warning, #b45309) 10%, var(--color-surface)));
    color: var(--color-text-strong, var(--color-text));
    font-size: 0.875rem;
    line-height: 1.45;
}

.bo-billing-banner--urgent {
    border-color: var(--color-danger-border, var(--color-danger));
    background: var(--color-danger-surface, color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)));
}

.bo-billing-banner a {
    color: var(--color-primary, #1F3A5F);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.bo-billing-banner__hint {
    font-weight: 600;
    color: var(--color-text-muted);
}

.bo-content__locked {
    pointer-events: none;
    user-select: none;
    filter: blur(2px);
    opacity: 0.45;
}

.bo-subscription-lock {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.bo-subscription-lock__scrim {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-bg, #0b1220) 72%, transparent);
    backdrop-filter: blur(6px);
}

.bo-subscription-lock__panel {
    position: relative;
    z-index: 1;
    width: min(26rem, 100%);
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-3, 12px);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--elevation-3, 0 18px 48px rgba(15, 23, 42, 0.35));
    text-align: center;
}

.bo-subscription-lock__eyebrow {
    margin: 0 0 var(--space-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-danger, #c62828);
}

.bo-subscription-lock__title {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: var(--line-height-tight);
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--color-text-strong);
}

.bo-subscription-lock__body {
    margin: 0 0 var(--space-5);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-muted);
}

.bo-subscription-lock__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
}

.bo-subscription-lock__cta {
    min-height: 2.75rem;
    font-weight: 700;
    justify-content: center;
}

.bo-subscription-lock__owner-note {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.bo-subscription-lock__logout {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bo-subscription-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: none;
    padding: var(--space-5);
}

.bo-subscription-page {
    max-width: 68rem;
}

.bo-subscription-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.bo-subscription-layout--purchase .bo-subscription-card {
    order: -1;
}

.bo-subscription-hero {
    padding: clamp(var(--space-5), 3vw, var(--space-6));
    border-radius: var(--radius-3, 12px);
    border: 1px solid var(--color-border);
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)) 0%,
            var(--color-surface) 42%,
            color-mix(in srgb, var(--color-surface-2, var(--color-surface-muted)) 55%, var(--color-surface)) 100%
        );
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 4%, transparent);
}

.bo-subscription-hero--trial {
    border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
}

.bo-subscription-hero--urgent,
.bo-subscription-hero--warn {
    border-color: var(--color-warning-border);
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--color-warning-text, #E65100) 12%, var(--color-surface)) 0%,
            var(--color-surface) 55%
        );
}

.bo-subscription-hero--danger {
    border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)) 0%,
            var(--color-surface) 55%
        );
}

.bo-subscription-hero--ok {
    border-color: color-mix(in srgb, var(--color-success) 28%, var(--color-border));
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--color-success) 12%, var(--color-surface)) 0%,
            var(--color-surface) 48%,
            color-mix(in srgb, var(--color-surface-2, var(--color-surface-muted)) 40%, var(--color-surface)) 100%
        );
}

.bo-subscription-hero__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}

.bo-subscription-plan-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
    background: color-mix(in srgb, var(--color-surface) 78%, transparent);
    font-size: var(--font-size-sm);
}

.bo-subscription-plan-pill__label {
    color: var(--color-text-muted);
    font-weight: 500;
}

.bo-subscription-plan-pill__name {
    color: var(--color-text-strong);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.bo-subscription-hero__countdown {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-warning-text, #E65100);
}

.bo-subscription-hero__title {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    line-height: var(--line-height-tight);
    font-weight: 750;
    letter-spacing: -0.025em;
    color: var(--color-text-strong);
}

.bo-subscription-hero__lead {
    margin: 0;
    max-width: 40rem;
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-muted);
}

.bo-subscription-usage {
    margin-top: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bo-subscription-usage__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.bo-subscription-usage__title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-subscription-meters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.bo-subscription-meters--single {
    grid-template-columns: 1fr;
}

@media (max-width: 640px) {
    .bo-subscription-meters {
        grid-template-columns: 1fr;
    }
}

.bo-subscription-meter {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: var(--space-4);
    border-radius: var(--radius-3, 12px);
    border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
}

.bo-subscription-meter.is-over {
    border-color: color-mix(in srgb, var(--color-warning-text, #E65100) 35%, var(--color-border));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--color-warning-text, #E65100) 8%, var(--color-surface)) 0%,
            color-mix(in srgb, var(--color-surface) 92%, transparent) 100%
        );
}

.bo-subscription-meter__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.bo-subscription-meter__label {
    font-size: var(--font-size-sm);
    font-weight: 650;
    color: var(--color-text-strong);
}

.bo-subscription-meter__value {
    font-size: 1.05rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--color-text-strong);
}

.bo-subscription-meter.is-over .bo-subscription-meter__value {
    color: var(--color-warning-text, #E65100);
}

.bo-subscription-meter__track {
    height: 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
    overflow: hidden;
}

.bo-subscription-meter__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--color-primary) 75%, #5b8def),
        var(--color-primary)
    );
    transition: width 220ms ease;
}

.bo-subscription-meter.is-over .bo-subscription-meter__fill {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--color-warning-text, #E65100) 70%, #ffb74d),
        var(--color-warning-text, #E65100)
    );
}

.bo-subscription-meter__hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.bo-subscription-meter.is-over .bo-subscription-meter__hint {
    color: var(--color-warning-text, #E65100);
    font-weight: 600;
}

.bo-subscription-extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-3, 12px);
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    background:
        linear-gradient(
            120deg,
            color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)) 0%,
            color-mix(in srgb, var(--color-surface) 94%, transparent) 100%
        );
}

.bo-subscription-extras__main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.bo-subscription-extras__count {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface));
    color: var(--color-primary-ink, var(--color-primary));
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.bo-subscription-extras__copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.bo-subscription-extras__title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text-strong);
}

.bo-subscription-extras__price {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.bo-subscription-extras__total {
    font-size: 0.95rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
    white-space: nowrap;
}

.bo-subscription-discount {
    margin-bottom: var(--space-4);
    border-color: color-mix(in srgb, var(--color-success, #3d9a6a) 38%, var(--color-border));
    background:
        linear-gradient(
            120deg,
            color-mix(in srgb, var(--color-success, #3d9a6a) 16%, var(--color-surface)) 0%,
            color-mix(in srgb, var(--color-surface) 94%, transparent) 100%
        );
}

.bo-subscription-discount .bo-subscription-extras__count {
    background: color-mix(in srgb, var(--color-success, #3d9a6a) 24%, var(--color-surface));
    color: var(--color-success-text, var(--color-success, #3d9a6a));
}

.bo-subscription-discount__amount {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-success-text, var(--color-success, #3d9a6a));
}

.bo-subscription-extras-empty {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.bo-subscription-hero__seats {
    margin: var(--space-3) 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

.bo-subscription-hero__seats-sep {
    color: var(--color-text-muted);
    font-weight: 400;
}

.bo-subscription-hero__current {
    margin: var(--space-4) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
}

.bo-subscription-hero__current-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.bo-subscription-card__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.bo-subscription-card__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-strong);
}

.bo-subscription-card__subtitle {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-muted);
}

.bo-subscription-card--purchase .bo-subscription-card__title {
    font-size: 1.35rem;
    letter-spacing: -0.025em;
}

.bo-subscription-plans {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.bo-subscription-plans__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: stretch;
}

@media (max-width: 720px) {
    .bo-subscription-plans__grid {
        grid-template-columns: 1fr;
    }
}

.bo-subscription-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border-radius: var(--radius-3, 12px);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    transition:
        border-color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.bo-subscription-plan:hover {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
    transform: translateY(-1px);
}

.bo-subscription-plan.is-selected {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
    box-shadow: 0 0 0 1px var(--color-primary);
}

.bo-subscription-plan--featured {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.bo-subscription-plan__badge {
    position: absolute;
    top: -0.65rem;
    right: var(--space-4);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-1);
    background: var(--color-primary);
    color: var(--color-on-primary-action, #fff);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.bo-subscription-plan__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bo-subscription-plan:has(.bo-subscription-plan__input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    outline-offset: 2px;
}

.bo-subscription-plan__name {
    font-size: 1.0625rem;
    font-weight: 750;
    color: var(--color-text-strong);
}

.bo-subscription-plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0.15rem 0 0.25rem;
}

.bo-subscription-plan__amount {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
    line-height: 1;
}

.bo-subscription-plan__period {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.bo-subscription-plan__tagline {
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--color-text-muted);
}

.bo-subscription-plan__features {
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.bo-subscription-plan__features li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text);
}

.bo-subscription-plan__features li::before {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    content: "✓";
    font-size: 0.95rem;
    font-weight: 700;
}

.bo-subscription-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.bo-subscription-terms {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    cursor: pointer;
}

.bo-subscription-terms input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0.18rem 0 0;
    accent-color: var(--color-primary);
}

.bo-subscription-terms a {
    color: var(--color-primary);
    text-underline-offset: 2px;
}

.bo-subscription-cta__btn {
    min-height: 2.75rem;
    font-size: 1rem;
    font-weight: 700;
}

.bo-subscription-cta__hint,
.bo-subscription-owner-note {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.bo-subscription-trust {
    margin: 0;
    padding: var(--space-3) 0 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.bo-subscription-trust li {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.bo-subscription-layout--purchase .bo-subscription-hero {
    padding: var(--space-5);
    background: var(--color-surface);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .bo-subscription-plan {
        transition: none;
        transform: none;
    }

    .bo-subscription-meter__fill {
        transition: none;
    }
}

@media (max-width: 720px) {
    .bo-subscription-trust {
        grid-template-columns: 1fr;
    }
}

.bo-subscription-active {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-5);
}

.bo-subscription-active__text {
    flex: 1 1 16rem;
    min-width: 0;
}

.bo-subscription-active__copy {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    max-width: 36rem;
}

.bo-subscription-active__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.bo-subscription-plan-change {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.bo-subscription-plan-change h3,
.bo-subscription-plan-change p {
    margin: 0;
}

.bo-subscription-plan-change h3 {
    font-size: var(--font-size-lg);
}

.bo-subscription-plan-change > div:first-child p,
.bo-subscription-plan-change__offer p,
.bo-subscription-plan-change__downgrade p {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
}

.bo-subscription-plan-change__offer,
.bo-subscription-plan-change__downgrade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    background: var(--color-surface-2);
}

.bo-subscription-plan-change__offer > div,
.bo-subscription-plan-change__downgrade > div {
    display: grid;
    gap: var(--space-1);
}

.bo-subscription-plan-change__offer > div > span,
.bo-subscription-plan-change__downgrade > div > span {
    color: var(--color-text-muted);
}

.bo-subscription-plan-change__offer p,
.bo-subscription-plan-change__downgrade p {
    margin-bottom: 0;
}

.bo-subscription-plan-change__warning {
    color: var(--color-warning-text);
    font-weight: 600;
}

@media (max-width: 640px) {
    .bo-subscription-plan-change__offer,
    .bo-subscription-plan-change__downgrade {
        align-items: stretch;
        flex-direction: column;
    }

    .bo-subscription-plan-change__offer .staff-btn,
    .bo-subscription-plan-change__downgrade .staff-btn {
        width: 100%;
    }
}

.bo-subscription-toast {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-2);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.bo-subscription-toast--ok {
    border: 1px solid var(--color-success-border);
    background: var(--color-success-surface);
    color: var(--color-success-text);
}

.bo-subscription-toast--muted {
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
}

.bo-subscription-secondary-link {
    margin: 0;
    text-align: center;
}

.bo-subscription-checkout-modal {
    width: min(44rem, calc(100vw - 2rem));
    max-height: min(96vh, 58rem);
    max-height: min(96dvh, 58rem);
    border-radius: var(--radius-xl, 16px);
}

.bo-subscription-checkout-modal__body {
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 0.75rem 1rem;
}

.bo-modal--checkout {
    padding: min(2rem, 4vh);
}

.bo-modal--checkout .bo-modal__header {
    flex: 0 0 auto;
    align-items: center;
    padding: 0.75rem 1rem 0.5rem;
}

@media (max-width: 640px) {
    .bo-modal--checkout {
        padding: 0;
        place-items: stretch;
    }

    .bo-subscription-checkout-modal {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .bo-modal--checkout .bo-modal__header {
        padding-top: max(0.75rem, env(safe-area-inset-top));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-left: max(1rem, env(safe-area-inset-left));
    }

    .bo-subscription-checkout-modal__body {
        padding-right: max(0.5rem, env(safe-area-inset-right));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        padding-left: max(0.5rem, env(safe-area-inset-left));
    }
}

.bo-subscription-thanks {
    max-width: 38rem;
    margin: clamp(2rem, 8vh, 5rem) auto;
    padding: 2rem;
    border: 1px solid var(--staff-border, rgba(55, 53, 47, .09));
    border-radius: 12px;
    background: var(--staff-surface, #f7f6f3);
    color: var(--staff-ink, #37352f);
    text-align: center;
    animation: bo-subscription-thanks-in 180ms ease-out both;
}

.bo-subscription-cancel-notice {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-warning-text, #cb6800) 28%, var(--color-border));
    border-radius: var(--radius-3, 12px);
    background: color-mix(in srgb, var(--color-warning-text, #cb6800) 6%, var(--color-surface));
}

.bo-subscription-cancel-notice__icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: var(--radius-2, 8px);
    background: color-mix(in srgb, var(--color-warning-text, #cb6800) 12%, var(--color-surface));
    color: var(--color-warning-text, #cb6800);
}

.bo-subscription-cancel-notice__icon svg {
    width: 1.4rem;
    height: 1.4rem;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bo-subscription-cancel-notice__copy { display: grid; gap: .2rem; min-width: 0; }
.bo-subscription-cancel-notice__copy strong { color: var(--color-text-strong); }
.bo-subscription-cancel-notice__copy > span { color: var(--color-text-muted); }
.bo-subscription-cancel-notice__date {
    padding: .45rem .7rem;
    border: 1px solid color-mix(in srgb, var(--color-warning-text, #cb6800) 20%, var(--color-border));
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-size: var(--font-size-sm);
    font-weight: 650;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .bo-subscription-cancel-notice { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); }
    .bo-subscription-cancel-notice__date { grid-column: 2; justify-self: start; }
}

.bo-subscription-thanks__mark {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    place-items: center;
    border-radius: 9999px;
    background: #0f7b3f;
    color: white;
    font-size: 1.5rem;
}

.bo-subscription-thanks__celebration {
    position: relative;
    width: 9rem;
    height: 7rem;
    margin: 0 auto 1rem;
}

.bo-subscription-thanks__celebration .bo-subscription-thanks__mark {
    position: absolute;
    top: 2rem;
    left: 3rem;
    margin: 0;
    box-shadow: 0 0 0 7px color-mix(in srgb, #0f7b3f 12%, transparent);
}

.bo-subscription-thanks__gear,
.bo-subscription-thanks__tools {
    position: absolute;
    z-index: 1;
    font-size: 1.8rem;
    line-height: 1;
}

.bo-subscription-thanks__gear { top: .4rem; right: 1.2rem; animation: bo-subscription-gear 1.8s ease-in-out both; }
.bo-subscription-thanks__tools { bottom: .4rem; left: 1rem; font-size: 1.6rem; animation: bo-subscription-tools 700ms ease-out both; }

.bo-subscription-thanks__confetti {
    position: absolute;
    top: 3.5rem;
    left: 4.5rem;
    width: .45rem;
    height: .7rem;
    border-radius: 2px;
    background: var(--staff-primary, #2383e2);
    animation: bo-subscription-confetti 850ms cubic-bezier(.23, 1, .32, 1) both;
}

.bo-subscription-thanks__confetti:nth-child(1) { --confetti-x: -3.6rem; --confetti-y: -2.2rem; --confetti-r: -35deg; background: #0f7b3f; }
.bo-subscription-thanks__confetti:nth-child(2) { --confetti-x: -2.4rem; --confetti-y: -3rem; --confetti-r: 30deg; background: #cb6800; animation-delay: 40ms; }
.bo-subscription-thanks__confetti:nth-child(3) { --confetti-x: -.8rem; --confetti-y: -3.4rem; --confetti-r: -20deg; background: #2383e2; animation-delay: 70ms; }
.bo-subscription-thanks__confetti:nth-child(4) { --confetti-x: 1.1rem; --confetti-y: -3rem; --confetti-r: 40deg; background: #d44c47; animation-delay: 25ms; }
.bo-subscription-thanks__confetti:nth-child(5) { --confetti-x: 2.5rem; --confetti-y: -2.3rem; --confetti-r: -30deg; background: #cb6800; animation-delay: 90ms; }
.bo-subscription-thanks__confetti:nth-child(6) { --confetti-x: 3.3rem; --confetti-y: -.9rem; --confetti-r: 25deg; background: #0f7b3f; animation-delay: 55ms; }
.bo-subscription-thanks__confetti:nth-child(7) { --confetti-x: -3.2rem; --confetti-y: -.7rem; --confetti-r: 20deg; background: #2383e2; animation-delay: 110ms; }
.bo-subscription-thanks__confetti:nth-child(8) { --confetti-x: 2.8rem; --confetti-y: .3rem; --confetti-r: -45deg; background: #d44c47; animation-delay: 130ms; }

@keyframes bo-subscription-confetti {
    from { opacity: 0; transform: translate(0, 0) rotate(0) scale(.7); }
    18% { opacity: 1; }
    to { opacity: 0; transform: translate(var(--confetti-x), var(--confetti-y)) rotate(var(--confetti-r)) scale(1); }
}

@keyframes bo-subscription-gear {
    from { opacity: 0; transform: rotate(-45deg) scale(.85); }
    to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes bo-subscription-tools {
    from { opacity: 0; transform: translateY(.35rem) rotate(-20deg); }
    to { opacity: 1; transform: translateY(0) rotate(0); }
}

.bo-subscription-thanks h2 { margin: 0 0 .5rem; }
.bo-subscription-thanks p { margin: 0 0 1.25rem; color: var(--staff-muted, #787774); }

@keyframes bo-subscription-thanks-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .bo-subscription-thanks { animation: none; }
    .bo-subscription-thanks__confetti { display: none; }
    .bo-subscription-thanks__gear, .bo-subscription-thanks__tools { animation: none; }
}

.bo-link-btn {
    border: 0;
    background: none;
    padding: 0;
    color: var(--color-primary);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.bo-link-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .bo-subscription-plan {
        transition: none;
    }
}

.bo-settings-form {
    max-width: none;
    gap: var(--space-4);
}

.bo-settings-tabs {
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-2);
}

.bo-settings-mobile-tabs {
    display: none;
}

.bo-settings-tab-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-settings-tab-panel[hidden] {
    display: none;
}

.bo-settings-form__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.bo-settings-tab-panel > .bo-settings-form__section:first-child {
    padding-top: 0;
    border-top: none;
}

.bo-settings-form__section:first-child {
    padding-top: 0;
    border-top: none;
}

.bo-settings-form__section .bo-wo-wizard__section-title {
    margin: 0;
}

.bo-invoice-branding__intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.bo-invoice-branding__sample {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--color-surface);
    border-radius: 999px;
    background: var(--invoice-accent, #0066cc);
    box-shadow: 0 0 0 1px var(--color-border);
}

.bo-invoice-branding__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}

.bo-invoice-branding__color {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--space-2);
    align-items: center;
}

.bo-invoice-branding__picker {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    cursor: pointer;
}

.bo-invoice-branding__upload {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 2.75rem;
    justify-content: center;
    padding: 0.55rem 0.75rem;
    border: 1px dashed var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    cursor: pointer;
}

.bo-invoice-branding__upload:hover,
.bo-invoice-branding__upload:focus-within {
    border-color: var(--color-primary);
}

.bo-invoice-branding__upload-title {
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 700;
}

.bo-invoice-branding__upload-hint {
    color: var(--color-text-muted);
    font-size: 0.72rem;
}

.bo-invoice-branding__file {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.bo-invoice-branding__remove {
    margin-top: var(--space-1);
    align-self: flex-start;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.bo-invoice-branding__footer {
    resize: vertical;
    min-height: 4.25rem;
}

@media (max-width: 600px) {
    .bo-invoice-branding__grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

.bo-settings-form__footer {
    margin-top: var(--space-1);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.bo-settings-form__footer .bo-actions {
    margin-top: 0;
}

.bo-settings-field-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.bo-settings-field-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.bo-settings-field-stack > .staff-btn {
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.bo-settings-form__section--flush {
    padding-top: 0;
    border-top: none;
}

.bo-reminder-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bo-reminder-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-reminder-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.bo-reminder-card__copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.bo-reminder-card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.bo-reminder-card__hint {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.bo-reminder-card__status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-border) 55%, transparent);
}

.bo-reminder-card__status--on {
    color: var(--color-success, #0f7b4c);
    background: color-mix(in srgb, var(--color-success, #0f7b4c) 14%, transparent);
}

.bo-reminder-card__toggle {
    margin: 0;
}

.bo-reminder-card__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.bo-reminder-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-reminder-steps__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.bo-reminder-steps__index {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-border) 55%, transparent);
}

.bo-reminder-steps__control {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.bo-reminder-steps__input {
    width: 4.5rem;
    flex: 0 0 4.5rem;
    text-align: center;
}

.bo-reminder-steps__unit {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.bo-reminder-steps__remove {
    flex-shrink: 0;
    padding-inline: 0.65rem;
    color: var(--color-danger, #b42318);
}

.bo-reminder-steps__remove:disabled {
    opacity: 0.35;
    color: var(--color-text-muted);
}

.bo-reminder-steps__footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.bo-reminder-steps__add {
    align-self: flex-start;
}

@media (max-width: 420px) {
    .bo-reminder-steps__row {
        flex-wrap: wrap;
    }

    .bo-reminder-steps__remove {
        margin-left: auto;
    }
}

.bo-integration-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 560px) {
    .bo-integration-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.bo-integration-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.bo-integration-tile:hover {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.bo-integration-tile:focus-visible {
    outline: 2px solid transparent;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.bo-integration-tile__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 4.5rem;
    min-height: 4.5rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    box-sizing: border-box;
}

.bo-integration-tile__logo img {
    display: block;
    width: auto;
    height: 2.75rem;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

.bo-integration-tile__logo--moneybird img,
.bo-integration-tile__logo--exact img {
    height: 2.75rem;
    width: auto;
    max-width: 100%;
}

.bo-integration-tile__logo--eboekhouden img {
    height: 3.75rem;
    width: auto;
    max-width: 100%;
}

.bo-integration-tile__logo--sm {
    width: auto;
    min-width: 5rem;
    height: 3rem;
    min-height: 3rem;
    padding: var(--space-2);
}

.bo-integration-tile__logo--sm img,
.bo-integration-tile__logo--sm.bo-integration-tile__logo--moneybird img,
.bo-integration-tile__logo--sm.bo-integration-tile__logo--exact img {
    height: 1.75rem;
}

.bo-integration-tile__logo--sm.bo-integration-tile__logo--eboekhouden img {
    height: 2.5rem;
}

.bo-integration-tile__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-2, 8px);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
}

.bo-integration-tile__mark--moneybird {
    background: #2473b1;
}

.bo-integration-tile__mark--exact {
    background: #ed1c24;
}

.bo-integration-tile__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    width: 100%;
}

.bo-integration-tile__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.bo-integration-tile__hint {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--color-text-muted);
}

.bo-integration-tile__status {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-border) 55%, transparent);
}

.bo-integration-tile__status--ok {
    color: var(--color-success, #0f7b4c);
    background: color-mix(in srgb, var(--color-success, #0f7b4c) 14%, transparent);
}

.bo-integration-detail__back {
    align-self: flex-start;
    margin: 0 0 var(--space-2);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.bo-integration-detail__back:hover {
    text-decoration: underline;
}

.bo-integration-detail__back:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

.bo-integration-detail__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.bo-integration-detail__head .bo-wo-wizard__section-title,
.bo-integration-detail__head .bo-settings-section-hint {
    margin: 0;
}

.bo-settings-input--mono {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

/* Online payments tab — provider cards */
.bo-payment-settings {
    gap: var(--space-4);
}

.bo-payment-enable {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.bo-payment-providers-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.bo-payment-providers-fieldset:disabled {
    opacity: 0.55;
    pointer-events: none;
}

.bo-payment-providers__legend {
    margin: 0 0 var(--space-2);
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-payment-providers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    width: 100%;
}

@media (max-width: 640px) {
    .bo-payment-providers {
        grid-template-columns: 1fr;
    }
}

.bo-payment-provider {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.bo-payment-provider:hover {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
}

.bo-payment-provider:has(.bo-payment-provider__input:checked) {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
    box-shadow: var(--focus-ring);
}

.bo-payment-provider:has(.bo-payment-provider__input:focus-visible) {
    outline: 2px solid transparent;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.bo-payment-provider__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.bo-payment-provider__logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-2, 8px);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
    padding: 0;
    background: transparent;
}

.bo-payment-provider__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.bo-payment-provider__logo--mollie,
.bo-payment-provider__logo--tikkie {
    border: none;
}

.bo-payment-provider__logo--mollie {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
}

.bo-payment-provider__logo--tikkie img {
    object-fit: cover;
}

.bo-payment-provider__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.bo-payment-provider__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
}

.bo-payment-provider__hint {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--color-text-muted);
}

.bo-payment-credentials {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-payment-credentials .bo-input {
    background: var(--color-surface, #fff);
}

@media (prefers-reduced-motion: reduce) {
    .bo-payment-provider {
        transition: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .bo-settings-hero,
    .bo-settings-alert,
    .bo-settings .bo-cust-detail-card {
        animation: bo-settings-enter 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .bo-settings-alert {
        animation-delay: 40ms;
    }

    .bo-settings .bo-cust-detail-card {
        animation-delay: 80ms;
    }
}

@keyframes bo-settings-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Unified settings/admin workspace */
.bo-admin-shell {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    max-width: 90rem;
    margin: 0 auto;
}

.bo-admin-shell__rail {
    position: sticky;
    top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-admin-shell--plain {
    grid-template-columns: minmax(0, 1fr);
}

.bo-admin-shell__home {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: var(--space-2);
    color: var(--color-text);
    text-decoration: none;
}

.bo-admin-shell__home-kicker,
.bo-admin-shell__group h2 {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bo-admin-shell__home-title {
    font-size: 1.08rem;
    font-weight: 750;
}

.bo-admin-shell__group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.bo-admin-shell__group h2 {
    padding: 0 var(--space-2);
}

.bo-admin-shell__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.15rem;
    padding: 0.45rem var(--space-2);
    border-radius: var(--radius-1, 6px);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.bo-admin-shell__link:hover,
.bo-admin-shell__link:focus-visible {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.bo-admin-shell__link--active {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.bo-admin-shell__badge {
    display: inline-grid;
    min-width: 1.3rem;
    height: 1.3rem;
    place-items: center;
    border-radius: 999px;
    background: var(--color-primary);
    color: white;
    font-size: 0.68rem;
}

.bo-admin-shell__content {
    min-width: 0;
}

.bo-admin-shell__mobile-nav {
    display: none;
}

.bo-admin-shell__crumbs {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: var(--space-3);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.bo-admin-shell__crumbs a {
    color: inherit;
}

@media (max-width: 800px) {
    .bo-admin-shell {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .bo-admin-shell__rail {
        display: none;
    }

    .bo-admin-shell__mobile-nav {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--space-2);
        align-items: center;
        margin-bottom: var(--space-4);
        padding: 0;
    }

    .bo-admin-shell__mobile-nav label {
        color: var(--color-text-muted);
        font-size: 0.75rem;
        font-weight: 700;
    }

    .bo-admin-shell__mobile-nav select {
        min-width: 0;
        width: 100%;
        min-height: 2.75rem;
        padding: 0 0.75rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-2, 8px);
        background: var(--color-surface);
        color: var(--color-text);
        font: inherit;
    }

    .bo-admin-shell__crumbs {
        margin-bottom: var(--space-2);
    }
}

@media (max-width: 800px) {
    .bo-settings-tabs {
        display: none;
    }

    .bo-settings-mobile-tabs {
        display: block;
        margin-bottom: var(--space-4);
    }

    .bo-settings-mobile-tabs label {
        display: none;
    }

    .bo-settings-mobile-tabs select {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 3rem;
        padding: 0 2.5rem 0 1rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-2, 10px);
        background: var(--color-surface);
        color: var(--color-text);
        font: inherit;
        font-size: 1rem;
        font-weight: 650;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-admin-shell *,
    .bo-admin-shell *::before,
    .bo-admin-shell *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark-mode readable active segment labels */
html[data-theme="dark"] .bo-inv-range__btn--active,
html[data-theme="dark"] .bo-time-range__btn--active,
html[data-theme="dark"] .bo-sched-view__btn--active,
html[data-theme="dark"] .bo-detail-tab--active,
html[data-theme="dark"] .bo-wo-filter--active,
html[data-theme="dark"] .bo-culture .ga-culture-link.is-active,
html[data-theme="dark"] .ga-theme__btn.is-active {
    color: var(--color-text-strong, #F9FAFB);
}

/* Danger panel — keep soft pink wash in light; avoid white mix in dark */
html[data-theme="dark"] .bo-danger-panel {
    background:
        linear-gradient(
            180deg,
            var(--color-danger-surface, #3A1F22) 0%,
            var(--color-surface, #1A2332) 42%
        );
}

html[data-theme="dark"] .bo-danger-panel--pending {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--color-danger) 22%, var(--color-danger-surface, #3A1F22)) 0%,
            var(--color-surface, #1A2332) 48%
        );
}

html[data-theme="dark"] .bo-danger-panel__steps {
    background: var(--color-surface-2, #222B3A);
}

html[data-theme="dark"] .bo-danger-panel__schedule {
    background: var(--color-danger-surface, #3A1F22);
}

/* --- Workforce / shop hours ---------------------------------------- */

.bo-workforce {
    margin-top: 1.25rem;
}

.bo-workforce-block + .bo-workforce-block {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.bo-workforce-block__title {
    margin: 0 0 var(--space-1);
    font-size: 0.9375rem;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.bo-workforce-block__hint {
    margin: 0 0 var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    max-width: 48ch;
}

.bo-hours-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-hours-day {
    display: grid;
    grid-template-columns: minmax(6.5rem, 0.9fr) auto minmax(0, 1.6fr);
    align-items: center;
    gap: var(--space-3);
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-hours-day--off {
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.02));
}

.bo-hours-day__name {
    font-weight: 700;
    font-size: 0.9375rem;
}

.bo-hours-day__toggle {
    margin: 0;
}

.bo-hours-day__times {
    display: flex;
    align-items: end;
    gap: var(--space-2);
    min-width: 0;
}

.bo-hours-day__field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.bo-hours-day__label {
    font-size: 0.7rem;
    font-weight: 650;
    color: var(--color-text-muted);
}

.bo-hours-day__sep {
    padding-bottom: 0.55rem;
    color: var(--color-text-muted);
}

.bo-hours-day--off .bo-hours-day__times {
    opacity: 0.45;
}

.bo-workforce-compose {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--space-3);
    align-items: end;
    margin-bottom: var(--space-3);
}

.bo-workforce-compose__notes {
    grid-column: 1 / -1;
}

.bo-workforce-compose__toggle {
    margin: 0 0 0.35rem;
}

.bo-workforce-compose__action {
    display: flex;
    align-items: end;
}

.bo-live-shop-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bo-live-shop-locations {
    margin: 0;
    margin-top: var(--space-1);
}

.bo-live-shop-locations__input {
    min-height: 4.75rem;
    resize: vertical;
    line-height: 1.45;
}

.bo-live-shop-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.bo-workforce-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bo-workforce-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
}

.bo-workforce-row--muted {
    opacity: 0.72;
}

.bo-workforce-row__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    min-width: 0;
}

.bo-workforce-row__note {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

@media (max-width: 720px) {
    .bo-hours-day {
        grid-template-columns: 1fr auto;
    }

    .bo-hours-day__times {
        grid-column: 1 / -1;
    }
}

/* First-run product tour (back-office + technician)
   Tour layer sits above the app (1000). Lit targets can punch through the
   scrim at 1001 — only use that on small chrome (nav/search), never on
   full-page content or the card ends up behind the dashboard. */
.staff-tour {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-bottom, 0px)) 1rem 1.25rem;
}

.staff-tour__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Must stay a dark wash in both themes — text-strong is near-white in dark mode
       and turned this into a grey fog over the whole app. */
    background: rgba(15, 20, 25, 0.52);
    pointer-events: auto;
}

html[data-theme="dark"] .staff-tour__scrim {
    background: rgba(0, 0, 0, 0.58);
}

.staff-tour__card {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    width: min(25rem, 100%);
    max-height: min(75vh, 34rem);
    overflow-y: auto;
    padding: 1.35rem 1.4rem 1.2rem;
    border-radius: var(--radius-4, 16px);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--elevation-3, 0 18px 48px color-mix(in srgb, #000 24%, transparent));
    outline: none;
    animation: staff-tour-enter 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Thin progress bar flush with the top edge of the card. */
.staff-tour__bar {
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: color-mix(in srgb, var(--color-primary-action, #1F3A5F) 12%, transparent);
    overflow: hidden;
    border-radius: var(--radius-4, 16px) var(--radius-4, 16px) 0 0;
}

.staff-tour__bar-fill {
    display: block;
    height: 100%;
    background: var(--color-primary-action, #1F3A5F);
    border-radius: 0 3px 3px 0;
    transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes staff-tour-enter {
    from {
        opacity: 0;
        transform: translateY(0.75rem) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .staff-tour__card {
        animation: none;
    }

    .staff-tour__bar-fill {
        transition: none;
    }
}

.staff-tour__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.25rem 0 0.85rem;
}

.staff-tour__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-3, 12px);
    background: var(--color-primary-container, #E8EEF4);
    color: var(--color-primary-ink, var(--color-primary-action, #1F3A5F));
}

.staff-tour__progress {
    margin: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    background: var(--color-surface-2, var(--color-surface-muted));
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.staff-tour__title {
    margin: 0 0 0.45rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-text-strong, var(--color-text));
}

.staff-tour__body {
    margin: 0 0 1.1rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-muted, var(--color-text));
}

.staff-tour__dots {
    display: flex;
    gap: 0.35rem;
    margin: 0 0 1.1rem;
}

.staff-tour__dot {
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 9999px;
    background: var(--color-border);
    transition: width 240ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 240ms ease;
}

.staff-tour__dot.is-done {
    background: color-mix(in srgb, var(--color-primary-action, #1F3A5F) 45%, transparent);
}

.staff-tour__dot.is-active {
    width: 1.25rem;
    background: var(--color-primary-action, #1F3A5F);
}

.staff-tour__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.staff-tour__actions-spacer {
    flex: 1 1 auto;
    min-width: 0.5rem;
}

.staff-tour__skip {
    color: var(--color-text-muted);
}

/* Welcome / finish: a centred, roomier moment with a softer backdrop. */
.staff-tour--hero .staff-tour__scrim {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.staff-tour--hero .staff-tour__card {
    width: min(28rem, 100%);
    padding: 2rem 1.75rem 1.5rem;
    text-align: center;
}

.staff-tour--hero .staff-tour__head {
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.staff-tour--hero .staff-tour__icon {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-4, 16px);
    background: var(--color-primary-action, #1F3A5F);
    color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary-action, #1F3A5F) 35%, transparent);
}

.staff-tour--hero .staff-tour__title {
    font-size: 1.5rem;
}

.staff-tour--hero .staff-tour__dots {
    justify-content: center;
}

.staff-tour--hero .staff-tour__actions {
    justify-content: center;
}

.staff-tour--hero .staff-tour__actions-spacer {
    display: none;
}

/* Step cards dock bottom-right on wide screens so the lit nav item stays visible;
   on phones they behave as a bottom sheet. */
@media (min-width: 960px) {
    .staff-tour:not(.staff-tour--hero) {
        align-items: flex-end;
        justify-content: flex-end;
        padding: 1.5rem;
    }
}

@media (max-width: 959px) {
    .staff-tour:not(.staff-tour--hero) {
        align-items: flex-end;
    }
}

.tech-root .staff-tour {
    padding-bottom: calc(var(--tech-bottom-nav-offset, 4.25rem) + 1rem);
}

@media (min-width: 960px) {
    .tech-root .staff-tour {
        padding-bottom: 1.25rem;
    }
}

/* Only the active step target punches through the scrim — not every tour hook.
   Keep this on compact chrome (nav/search/avatar). Never light .bo-content. */
.staff-tour-active .staff-tour-target--lit {
    position: relative;
    z-index: 1001;
    border-radius: var(--radius-2, 8px);
    box-shadow:
        0 0 0 2px var(--color-surface),
        0 0 0 4px var(--color-primary-action, var(--color-primary, #4A6FA5));
    transition: box-shadow var(--motion-duration-fast, 150ms) var(--motion-ease-standard, ease);
}

.tech-root.staff-tour-active .staff-tour-target--lit[data-staff-tour-target="work"],
.tech-root.staff-tour-active .staff-tour-target--lit[data-staff-tour-target="schedule"],
.tech-root.staff-tour-active .staff-tour-target--lit[data-staff-tour-target="workday"],
.tech-root.staff-tour-active .staff-tour-target--lit[data-staff-tour-target="settings"] {
    border-radius: var(--radius-2, 8px);
}

.bo-settings-hub__tour {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border: 1px dashed var(--color-border);
    background: transparent;
    width: 100%;
    text-align: left;
    font: inherit;
}

.bo-settings-hub__tour:hover {
    border-color: var(--color-primary, #0066cc);
    background: var(--color-surface-2, var(--color-surface-muted));
}

.tech-settings-tour {
    margin-top: 0.75rem;
}

.impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: #7a1f1f;
    color: #fff;
    font-size: 0.875rem;
    z-index: 40;
}

.impersonation-banner__stop {
    flex-shrink: 0;
    background: #fff;
    color: #7a1f1f;
    border-color: #fff;
}


/* =========================================================
   Balie — reception check-in (touch-first)
   ========================================================= */

.bo-balie {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
}

.bo-balie-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3, 0.75rem);
}

.bo-balie-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
    padding: var(--space-4, 1rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    box-shadow: var(--elevation-1, none);
}

.bo-balie-stat__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.bo-balie-stat__label {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-balie-search {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-4, 1rem);
}

.bo-balie-search__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.bo-balie-search__input {
    min-height: 3rem;
    font-size: 1.0625rem;
}

.bo-balie-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-5, 1.5rem);
    margin: 0;
    border-radius: var(--radius-3, 12px);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

.bo-balie-empty .bo-empty-state__title {
    margin: 0;
    color: var(--color-text);
}

.bo-balie-empty .bo-empty-state__body {
    margin: 0;
    max-width: 36rem;
}

.bo-balie-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3, 0.75rem);
}

.bo-balie-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 1rem);
    padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    box-shadow: var(--elevation-1, none);
}

.bo-balie-card--waiting {
    border-color: color-mix(in srgb, var(--color-primary-action, #4A6FA5) 45%, var(--color-border));
}

.bo-balie-card--done {
    opacity: 0.78;
}

.bo-balie-card__main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
}

.bo-balie-card__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.bo-balie-card__plate {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.bo-balie-card__customer {
    font-size: 1rem;
    color: var(--color-text);
}

.bo-balie-card__notes {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--color-text-muted, var(--color-text));
    margin-top: var(--space-1, 0.25rem);
}

.bo-balie-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-1, 0.25rem);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.bo-balie-card__link {
    color: var(--color-primary-ink, var(--color-primary));
    text-decoration: none;
    font-weight: 500;
}

.bo-balie-card__link:hover {
    text-decoration: underline;
}

.bo-balie-card__action {
    flex-shrink: 0;
}

.bo-balie-card__cta {
    min-height: 3.25rem;
    min-width: 9rem;
    font-size: 1.0625rem;
    font-weight: 600;
}

.bo-balie-card__done-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: var(--color-primary-container, #243044);
    color: var(--color-primary-ink, var(--color-primary));
    font-size: 1.25rem;
}

.bo-balie-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.bo-balie-chip--wait {
    background: var(--color-primary-container, #243044);
    color: var(--color-primary-ink, var(--color-primary));
}

.bo-balie-chip--done {
    background: color-mix(in srgb, #2f6b4f 35%, var(--color-surface));
    color: #9fd4b5;
}

html[data-theme="light"] .bo-balie-chip--done {
    background: #e3f4ea;
    color: #1f6b43;
}

@media (max-width: 640px) {
    .bo-balie-summary {
        grid-template-columns: 1fr;
    }

    .bo-balie-card {
        flex-direction: column;
        align-items: stretch;
    }

    .bo-balie-card__cta {
        width: 100%;
    }

    .bo-balie-card__action {
        display: flex;
        justify-content: stretch;
    }
}

/* Balie status groups */
.bo-balie-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bo-balie-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.bo-balie-group__title {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 650;
}

.bo-balie-group__count {
    display: inline-flex;
    min-width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .bo-balie-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 340px) {
    .bo-balie-summary {
        grid-template-columns: 1fr;
    }
}


/* What's new bell + panel + announcement banner */
.whats-new {
    position: relative;
    display: inline-flex;
}

.whats-new__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.whats-new__btn:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
    color: var(--color-text-strong, var(--color-text));
}

.whats-new__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.whats-new__dot {
    position: absolute;
    top: 0.4rem;
    right: 0.45rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-primary);
    border: 2px solid var(--color-surface);
    box-sizing: content-box;
}

.whats-new__backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    border: none;
    background: transparent;
    cursor: default;
}

.whats-new__panel {
    position: fixed;
    top: max(4rem, calc(env(safe-area-inset-top, 0px) + 3rem));
    right: 0;
    z-index: 61;
    display: flex;
    flex-direction: column;
    width: min(28rem, calc(100% - 2rem));
    max-height: min(42rem, calc(100vh - 6rem));
    max-height: min(42rem, calc(100dvh - 6rem));
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    text-align: left;
}

.whats-new__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex: 0 0 auto;
}

.whats-new__heading {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-strong, var(--color-text));
}

.whats-new__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-2, 8px);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.whats-new__close:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
    color: var(--color-text-strong, var(--color-text));
}

.whats-new__close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.whats-new__empty {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.whats-new__content {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-4);
    -webkit-overflow-scrolling: touch;
}

.whats-new__list {
    display: grid;
    gap: var(--space-3, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.whats-new__item {
    padding: var(--space-3, 12px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-surface-2, var(--color-surface));
}

.whats-new__item--new {
    border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
}

.whats-new__date {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.whats-new__item-title {
    margin: 2px 0;
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
}

.whats-new__body {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text);
}

.whats-new__link {
    display: inline-block;
    margin-top: var(--space-1, 4px);
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--color-primary);
    text-underline-offset: 2px;
}

@media (max-width: 640px) {
    .whats-new__panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: min(86vh, 44rem);
        max-height: min(86dvh, 44rem);
        border-radius: var(--radius-3, 12px) var(--radius-3, 12px) 0 0;
    }

    .whats-new__content {
        padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
    }
}

.announcement-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
    border-radius: var(--radius-2, 8px);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    color: var(--color-text-strong, var(--color-text));
    font-size: 0.875rem;
    line-height: 1.45;
}

.announcement-banner__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.announcement-banner__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.announcement-banner__actions a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.announcement-banner__close {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.announcement-banner__close:hover {
    background: var(--color-surface-2, var(--color-surface-muted));
}

.announcement-banner__close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bo-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1.5px dashed var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.bo-dropzone:hover,
.bo-dropzone:has(input:focus-visible) {
    border-color: var(--color-primary-action, var(--color-primary));
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 5%, var(--color-surface));
}

.bo-dropzone__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.bo-dropzone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-2, 8px);
    background: color-mix(in srgb, var(--color-primary-action, var(--color-primary)) 12%, var(--color-surface));
    color: var(--color-primary-action, var(--color-primary));
}

.bo-dropzone__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-dropzone__text strong {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-strong, var(--color-text));
}

.bo-onboarding-fields .bo-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.55;
}

.bo-onboarding-logout {
    display: block;
    width: fit-content;
    margin: 0 0 var(--space-3) auto;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
}

.bo-onboarding-logout:hover {
    color: var(--color-text-strong, var(--color-text));
    text-decoration: underline;
}

/* --- Dashboard refresh: one calm column of signal, no chrome ------- */
.bo-dash { gap: var(--space-5); }

/* Status strip: one slim line, facts inline instead of four tiles */
.bo-dash-pulse {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--space-3) var(--space-4);
    margin-bottom: 0;
    box-shadow: none;
    border-radius: var(--radius-3);
}
.bo-dash-pulse--green { --bo-pulse-accent: var(--color-success); }
.bo-dash-pulse--amber { --bo-pulse-accent: var(--color-warning-text); }
.bo-dash-pulse--red { --bo-pulse-accent: var(--color-danger); }
.bo-dash-pulse:hover { transform: none; box-shadow: none; }
.bo-dash-pulse__main { align-items: center; }
.bo-dash-pulse__hint { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.bo-dash-pulse__facts { display: flex; gap: var(--space-5); }
.bo-dash-pulse__facts .bo-settings-fact {
    padding: 0;
    background: none;
    border: 0;
    gap: 0;
}
.bo-dash-pulse__facts .bo-settings-fact__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.bo-dash-pulse__facts .bo-settings-fact__value { font-size: var(--font-size-base); font-weight: 600; }
@media (max-width: 1100px) { .bo-dash-pulse__facts { display: none; } .bo-dash-pulse { grid-template-columns: 1fr; } }

/* KPIs: one joined strip, number-first */
.bo-dash-kpis {
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    overflow: hidden;
}
.bo-dash-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
    padding: var(--space-4) var(--space-5);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.bo-dash-kpi + .bo-dash-kpi { border-left: 1px solid var(--color-border-subtle); }
.bo-dash-kpi__copy { display: contents; }
.bo-dash-kpi__label { order: 1; font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-muted); }
.bo-dash-kpi__value { order: 2; font-size: 2rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.bo-dash-kpi__meta { order: 3; font-size: var(--font-size-xs); color: var(--color-text-subtle); }
.bo-dash-kpi--link:hover { transform: none; box-shadow: none; background: var(--color-surface-2); }
.bo-dash-kpi--link:focus-visible { box-shadow: inset var(--focus-ring); }
@media (max-width: 959px) {
    .bo-dash-kpi { padding: var(--space-3) var(--space-4); }
    .bo-dash-kpi__value { font-size: 1.5rem; }
}

/* Cards: no header rule, no subtitles, hairline rows */
.bo-dash-card { box-shadow: none; }
.bo-dash-card__header { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--space-2); align-items: center; }
.bo-dash-card__title { font-size: var(--font-size-base); font-weight: 600; }
.bo-dash-list { gap: 0; }
.bo-dash-item {
    border: 0;
    border-top: 1px solid var(--color-border-subtle);
    border-radius: 0;
    padding: var(--space-3) 0;
    box-shadow: none;
}
.bo-dash-item:first-child { border-top: 0; }
.bo-dash-item:hover { border-color: var(--color-border-subtle); box-shadow: none; }
.bo-dash-item--attention { border-left: 0; box-shadow: inset 3px 0 0 var(--color-warning-text); padding-left: var(--space-3); }
@media (min-width: 640px) {
    .bo-dash-item { padding: var(--space-3) 0; }
    .bo-dash-item--attention { padding-left: var(--space-3); }
}
.bo-dash-item__primary { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Empty states: quiet inline note, not a hero */
.bo-dash-empty { text-align: left; padding: var(--space-2) 0 var(--space-1); }
.bo-dash-empty .bo-empty-state__title { font-size: var(--font-size-sm); font-weight: 600; margin: 0; color: var(--color-text); }
.bo-dash-empty .bo-empty-state__body { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 2px 0 0; }
.bo-dash-empty__cta { margin-top: var(--space-3); justify-content: flex-start; }

/* Quick assign: flat inline row (no dashed box) */
.bo-dash-quick-assign {
    padding: 0;
    border: 0;
    background: none;
    flex-wrap: nowrap;
}
.bo-dash-quick-assign__label { display: none; }
.bo-dash-quick-assign__select { min-width: 0; }
.bo-dash-quick-assign .bo-dash-item__btn { width: auto; flex-shrink: 0; }

/* Mobile: row actions stay compact and inline instead of full-width bars */
@media (max-width: 639px) {
    .bo-dash-item {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
    .bo-dash-item:has(.bo-dash-quick-assign) { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
    .bo-dash-item:has(.bo-dash-quick-assign) .bo-dash-item__actions { flex-direction: row; }
    .bo-dash-item__btn { width: auto; min-height: 44px; }
}

/* --- Customizable dashboard: flat widget grid ---------------------- */
.bo-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

@media (min-width: 960px) {
    /* 12-column grid: each tile spans --bo-span columns (4 / 6 / 8 / 12). Below 960px everything stacks. */
    .bo-dash-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--space-5);
    }
    .bo-dash-widget { grid-column: span var(--bo-span, 6); }
}

.bo-dash-widget { min-width: 0; }
.bo-dash-widget > .bo-dash-pulse { margin-bottom: 0; }
.bo-dash-widget > .bo-dash-kpis { margin-bottom: 0; }

.bo-dash-widget-state { padding: var(--space-4); }
.bo-dash-widget-state__title { margin: 0; font-weight: 600; }
.bo-dash-widget-state__body { margin: 2px 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }

.bo-dash-empty-all { text-align: left; }

/* --- Customize panel ------------------------------------------------ */
.bo-dash-cust__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(17, 24, 39, 0.45);
}

.bo-dash-cust {
    position: fixed;
    z-index: 1201;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--elevation-3, 0 12px 32px rgba(0, 0, 0, 0.25));
    padding: var(--space-4);
    /* Desktop: right drawer */
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    border-left: 1px solid var(--color-border);
    overflow-y: auto;
}

@media (max-width: 639px) {
    .bo-dash-cust {
        /* Mobile: bottom sheet */
        top: auto;
        left: 0;
        width: 100%;
        max-height: 85vh;
        border-left: 0;
        border-top: 1px solid var(--color-border);
        border-radius: var(--radius-4) var(--radius-4) 0 0;
    }
}

.bo-dash-cust__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.bo-dash-cust__title { margin: 0; font-size: var(--font-size-lg); font-weight: 650; }
.bo-dash-cust__hint { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

.bo-dash-cust__close,
.bo-dash-cust__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 1.125rem;
    cursor: pointer;
}
.bo-dash-cust__close { border-color: transparent; font-size: 1.5rem; }
.bo-dash-cust__btn:disabled { opacity: 0.35; cursor: default; }
.bo-dash-cust__close:hover:not(:disabled),
.bo-dash-cust__btn:hover:not(:disabled) { background: var(--color-surface-2); }
.bo-dash-cust__close:focus-visible,
.bo-dash-cust__btn:focus-visible,
.bo-dash-cust__switch:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

.bo-dash-cust__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.bo-dash-cust__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-surface);
}
.bo-dash-cust__row:first-child { border-top: 0; }
.bo-dash-cust__row.is-hidden .bo-dash-cust__name { color: var(--color-text-muted); }
.bo-dash-cust__row.is-dragging { opacity: 0.6; background: var(--color-surface-2); }
.bo-dash-cust__row.is-drop-target { box-shadow: inset 0 2px 0 var(--color-primary-action, var(--color-primary)); }

.bo-dash-cust__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-height: 44px;
    color: var(--color-text-subtle);
    cursor: grab;
    touch-action: none; /* the handle only, so the rest of the panel still scrolls */
    user-select: none;
}
.bo-dash-cust__name { font-weight: 500; min-width: 0; }
.bo-dash-cust__actions { display: inline-flex; align-items: center; gap: var(--space-1); }

.bo-dash-cust__switch {
    position: relative;
    width: 44px;
    height: 26px;
    margin-left: var(--space-1);
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--color-border-strong);
    cursor: pointer;
    transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}
.bo-dash-cust__switch[aria-checked="true"] { background: var(--color-primary-action, var(--color-primary)); }
.bo-dash-cust__switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.bo-dash-cust__switch[aria-checked="true"] .bo-dash-cust__switch-knob { transform: translateX(18px); }

.bo-dash-cust__foot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
}
.bo-dash-cust__status { flex: 1; min-width: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
    .bo-dash-cust__switch,
    .bo-dash-cust__switch-knob { transition: none; }
}

/* Dashboard widgets: revenue stats, "+ n more" footer, product form hint */
.bo-dash-stats {
    margin-top: var(--space-3);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.bo-dash-stat {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bo-dash-stat__label {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-dash-stat__value {
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong, var(--color-text));
    overflow-wrap: anywhere;
}

.bo-dash-stat__meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-dash-more {
    margin: var(--space-3) 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.bo-field__hint {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Technician workload widget */
.bo-dash-load {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bo-dash-load__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
}

.bo-dash-load__figure {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bo-dash-load__bar {
    margin-top: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-surface-muted, var(--color-border));
    overflow: hidden;
}

.bo-dash-load__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.bo-dash-load__bar--warn > span {
    background: #EF6C00;
}

.bo-dash-cust__name { display: flex; flex-direction: column; gap: 2px; }

.bo-dash-cust__desc {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--color-text-muted);
}


/* --- Edit mode: in-place tile editing (Azure-style) ------------------ */
.bo-dash-editbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 8px);
    box-shadow: var(--elevation-2, 0 2px 8px rgba(0, 0, 0, 0.12));
}
.bo-dash-editbar__hint { flex: 1 1 260px; margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.bo-dash-editbar__status { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.bo-dash-editbar__actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }

.bo-dash-widget.is-editing {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px dashed var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-3, 8px);
    background: var(--color-surface-2, transparent);
}
.bo-dash-widget.is-editing.is-dragging { opacity: 0.55; }
.bo-dash-widget.is-editing.is-drop-target { outline: 2px solid var(--color-primary-action, var(--color-primary)); outline-offset: 2px; }
.bo-dash-widget.is-editing.is-resizing { outline: 2px dashed var(--color-primary-action, var(--color-primary)); outline-offset: 2px; }
.bo-dash-widget__body[inert] { opacity: 0.55; pointer-events: none; user-select: none; max-height: 320px; overflow: hidden; }

.bo-dash-tile-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px dashed var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-3, 8px) var(--radius-3, 8px) 0 0;
}
.bo-dash-tile-bar__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    color: var(--color-text-muted);
    cursor: grab;
    touch-action: none;
}
.bo-dash-tile-bar__handle:active { cursor: grabbing; }
.bo-dash-tile-bar__title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-dash-tile-bar__actions { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; justify-content: flex-end; }
.bo-dash-tile-sizes { display: inline-flex; gap: 2px; margin: 0 var(--space-1); }

.bo-dash-tile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 6px);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.bo-dash-tile-btn:hover:not(:disabled) { background: var(--color-surface-2); }
.bo-dash-tile-btn:disabled { opacity: 0.35; cursor: default; }
.bo-dash-tile-btn[aria-pressed="true"] { background: var(--color-primary-action, var(--color-primary)); border-color: transparent; color: #fff; }
.bo-dash-tile-btn--remove { font-size: 1.25rem; line-height: 1; }
.bo-dash-tile-btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* Right-edge grip: drag horizontally to snap the tile to small / medium / large / full. Desktop only. */
.bo-dash-tile-resize { display: none; }
@media (min-width: 960px) {
    .bo-dash-tile-resize {
        display: block;
        position: absolute;
        top: 0;
        right: -6px;
        bottom: 0;
        width: 12px;
        cursor: ew-resize;
        touch-action: none;
        z-index: 2;
    }
    .bo-dash-tile-resize::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 4px;
        width: 4px;
        height: 32px;
        transform: translateY(-50%);
        border-radius: 2px;
        background: var(--color-border-strong, var(--color-text-muted));
    }
    .bo-dash-tile-resize:hover::after { background: var(--color-primary-action, var(--color-primary)); }
}
@media (max-width: 959px) {
    .bo-dash-tile-sizes { display: none; }
}

.bo-dash-grid__empty { grid-column: 1 / -1; margin: 0; padding: var(--space-6); text-align: center; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: var(--radius-3, 8px); }

/* Tile gallery rows: name + description, then the Add button (no drag handle column). */
.bo-dash-cust__row--gallery {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
}
.bo-dash-cust__row--gallery .staff-btn { width: auto; white-space: nowrap; min-height: 40px; padding-inline: var(--space-4); }

.bo-sched-chip__remove.is-armed,
.bo-sched-list__row-remove.is-armed {
    width: auto;
    padding: 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 650;
    opacity: 1;
    color: var(--color-danger, #C62828);
    background: rgba(198, 40, 40, 0.1);
}

/* Timeline view: hour axis, one lane per technician */
.bo-tl {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3, 12px);
    background: var(--color-surface);
    overflow: hidden;
}

.bo-tl__scroll {
    overflow-x: auto;
}

.bo-tl__row {
    display: grid;
    grid-template-columns: 8rem minmax(36rem, 1fr);
    border-top: 1px solid var(--color-border);
}

.bo-tl__row--head {
    border-top: none;
    background: var(--color-bg, var(--color-surface));
}

.bo-tl__label {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    font-weight: 600;
}

.bo-tl__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-tl__count {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.bo-tl__lane {
    min-width: 0;
}

.bo-tl__axis {
    display: grid;
    grid-template-columns: repeat(var(--tl-hours), 1fr);
    padding: var(--space-2) 0;
}

.bo-tl__hour {
    padding-left: 0.35rem;
    border-left: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.bo-tl__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--tl-slots), 1fr);
    min-height: 3.5rem;
}

.bo-tl__track--static {
    display: block;
}

.bo-tl__slot {
    min-width: 0;
    padding: 0;
    border: none;
    border-left: 1px dashed var(--color-border);
    background: transparent;
    cursor: copy;
}

.bo-tl__slot--hour {
    border-left: 1px solid var(--color-border);
}

.bo-tl__slot:hover {
    background: color-mix(in srgb, var(--color-primary-action, #4a6fa5) 18%, transparent);
}

.bo-tl__block {
    position: absolute;
    top: 0.3rem;
    bottom: 0.3rem;
    z-index: 1;
    box-sizing: border-box;
    width: auto;
    min-width: 2.5rem;
    padding: 0.25rem 0.4rem 0.25rem 0.45rem;
    gap: 0;
    align-items: stretch;
    justify-content: center;
    text-align: left;
}

.bo-tl__track--static .bo-tl__block {
    min-height: 2.75rem;
}

.bo-tl__allday {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 4px);
    padding: var(--space-1, 4px) var(--space-2);
}

.bo-tl__block--allday {
    position: static;
    width: auto;
    max-width: 18rem;
}

.bo-tl__plate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
    font-size: 0.8125rem;
}

.bo-tl__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-muted);
    font-size: 0.7rem;
}

.bo-tl__now {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 2px;
    background: var(--color-danger, #d44c47);
    pointer-events: none;
}

.bo-tl__block[data-draggable="true"] {
    cursor: grab;
}

.bo-tl__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 0.4rem;
    cursor: ew-resize;
}

.bo-tl__handle--start { left: 0; }
.bo-tl__handle--end { right: 0; }

.bo-tl__block.is-dragging {
    z-index: 5;
    overflow: visible;
    cursor: grabbing;
    pointer-events: none;
    opacity: 1;
    border-color: var(--color-primary-action, #4a6fa5);
    outline: 2px solid var(--color-primary-action, #4a6fa5);
    outline-offset: 1px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    transition: none;
}

.bo-tl__block.is-dragging::after {
    content: attr(data-drag-label);
    position: absolute;
    top: -1.9rem;
    left: 0;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    background: var(--color-text-strong, #fff);
    color: var(--color-surface, #1c2230);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.bo-tl__lane.is-drop-target .bo-tl__track {
    background: color-mix(in srgb, var(--color-primary-action, #4a6fa5) 22%, transparent);
    box-shadow: inset 0 0 0 2px var(--color-primary-action, #4a6fa5);
}

body.bo-tl-dragging .bo-tl__handle {
    background: var(--color-on-primary-action, #fff);
    opacity: 0.75;
}

.bo-tl__block.is-saving {
    opacity: 0.6;
}

body.bo-tl-dragging {
    user-select: none;
    cursor: grabbing;
}

.bo-tl__plate,
.bo-tl__meta {
    display: block;
    min-width: 0;
    max-width: 100%;
}

/* Error toast: floats over the board so it never shifts the layout (e.g. mid-drag). */
.bo-sched-workbench__error {
    position: fixed;
    top: 4.5rem;
    left: 50%;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    max-width: min(36rem, calc(100vw - 2rem));
    transform: translateX(-50%);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.28);
}

.bo-sched-workbench__error-close {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

/* Timeline: technician unavailable (time off / day off) */
.bo-tl__row--off .bo-tl__label {
    color: var(--color-text-muted);
}

.bo-tl__off-badge {
    flex-shrink: 0;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(203, 104, 0, 0.16);
    color: var(--color-warning, #cb6800);
    font-size: 0.7rem;
    font-weight: 650;
    white-space: nowrap;
}

.bo-tl__off {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        135deg,
        rgba(203, 104, 0, 0.1) 0,
        rgba(203, 104, 0, 0.1) 6px,
        transparent 6px,
        transparent 12px);
}

.bo-tl__slot:disabled {
    cursor: not-allowed;
}

.bo-tl__slot:disabled:hover {
    background: transparent;
}

/* Dragged block: explicit colours so no hover/active/expanded state can wash out the text. */
.bo-tl .bo-tl__block.is-dragging {
    background: var(--color-primary-action, #4a6fa5) !important;
    color: var(--color-on-primary-action, #fff) !important;
}

.bo-tl .bo-tl__block.is-dragging .bo-tl__plate {
    color: var(--color-on-primary-action, #fff) !important;
}

.bo-tl .bo-tl__block.is-dragging .bo-tl__meta {
    color: var(--color-on-primary-action, #fff) !important;
    opacity: 0.9;
}

.bo-tl__meta--customer {
    opacity: 0.85;
}

/* ===========================================================================
   Planning, timeline mode: one compact bar, then the timeline.
   =========================================================================== */
.bo-content:has(.bo-sched--grid) {
    max-width: none;
}

.bo-sched--grid {
    gap: var(--space-3);
}

.bo-sched--grid .staff-page__header {
    align-items: center;
}

.bo-sched--grid .staff-page__title {
    font-size: 1.25rem;
}

.bo-sched--grid .staff-page__subtitle {
    display: none;
}

.bo-sched--grid .bo-sched-workspace {
    display: block;
}

.bo-sched--grid .bo-sched-stage {
    width: 100%;
}

.bo-plan-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.bo-plan-when {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.bo-plan-when__btn,
.bo-plan-when__today {
    height: 2.25rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.bo-plan-when__btn {
    width: 2.25rem;
    font-size: 1.15rem;
    line-height: 1;
}

.bo-plan-when__btn:first-child {
    border-radius: 999px 0 0 999px;
}

.bo-plan-when__btn:last-child {
    border-radius: 0 999px 999px 0;
}

.bo-plan-when__today {
    padding: 0 0.9rem;
    border-inline: none;
}

.bo-plan-when__btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.bo-plan-days {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-muted, rgba(255, 255, 255, 0.04));
}

.bo-plan-day {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.bo-plan-day:hover {
    color: var(--color-text);
}

.bo-plan-day__name {
    text-transform: capitalize;
}

.bo-plan-day__num {
    font-weight: 700;
    color: var(--color-text);
}

.bo-plan-day__load {
    min-width: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary-action, #4a6fa5) 35%, transparent);
    color: var(--color-text-strong, var(--color-text));
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
}

.bo-plan-day--today .bo-plan-day__name {
    color: var(--color-success, #4cae7b);
    font-weight: 700;
}

.bo-plan-day--active {
    background: var(--color-primary-action, #4a6fa5);
    color: var(--color-on-primary-action, #fff);
}

.bo-plan-day--active .bo-plan-day__num,
.bo-plan-day--active .bo-plan-day__name {
    color: var(--color-on-primary-action, #fff);
}

.bo-plan-day--active .bo-plan-day__load {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-on-primary-action, #fff);
}

.bo-plan-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.bo-plan-search input {
    width: 13rem;
}

.bo-plan-tech select {
    min-width: 10rem;
}

.bo-plan-chip {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.bo-plan-chip--active {
    border-color: var(--color-primary-action, #4a6fa5);
    background: color-mix(in srgb, var(--color-primary-action, #4a6fa5) 25%, transparent);
}

.bo-plan-backlog {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.bo-plan-backlog--has {
    border-color: transparent;
    background: var(--color-primary-action, #4a6fa5);
    color: var(--color-on-primary-action, #fff);
}

.bo-plan-backlog__count {
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.8rem;
    text-align: center;
}

/* Timeline card */
.bo-tl__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.bo-tl__date {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: capitalize;
}

.bo-tl__summary {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.bo-tl__hint {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.bo-sched--grid .bo-tl {
    border: none;
    border-radius: 0;
}

.bo-sched--grid .bo-tl__row {
    grid-template-columns: 14rem minmax(36rem, 1fr);
}

.bo-sched--grid .bo-tl__row--head {
    position: sticky;
    top: 0;
    z-index: 3;
}

.bo-sched--grid .bo-tl__track {
    min-height: 4.75rem;
}

.bo-sched--grid .bo-tl__row--off .bo-tl__track {
    min-height: 3rem;
}

.bo-sched--grid .bo-tl__hour {
    font-size: 0.8125rem;
}

.bo-sched--grid .bo-tl__name {
    font-size: 0.9375rem;
}

.bo-sched--grid .bo-tl__plate {
    font-size: 0.9rem;
}

.bo-sched--grid .bo-tl__meta {
    font-size: 0.75rem;
}

/* Many technicians: the timeline scrolls inside its own box so the hour axis stays visible. */
.bo-sched--grid .bo-tl__scroll {
    overflow: auto;
    max-height: max(22rem, calc(100vh - 17rem));
}

/* Compact density: more than six lanes. One text line per block, shorter lanes. */
.bo-sched--grid .bo-tl--compact .bo-tl__track {
    min-height: 3.25rem;
}

.bo-sched--grid .bo-tl--compact .bo-tl__row--off .bo-tl__track {
    min-height: 2.25rem;
}

.bo-sched--grid .bo-tl--compact .bo-tl__meta--customer {
    display: none;
}

.bo-sched--grid .bo-tl--compact .bo-tl__plate {
    font-size: 0.8125rem;
}

@media (max-width: 64rem) {
    .bo-sched--grid .bo-tl__row {
        grid-template-columns: 9rem minmax(36rem, 1fr);
    }
}

/* Block side panel: identity + status on top, facts as rows, actions stacked right below. */
.bo-sched-panel__title {
    font-size: 1.5rem;
    letter-spacing: 0.01em;
}

.bo-sched-panel__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
}

.bo-sched-panel__locked {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

#bo-sched-panel .bo-sched-panel__header {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

#bo-sched-panel .bo-sched-panel__facts {
    grid-template-columns: 1fr;
    gap: 0;
}

#bo-sched-panel .bo-sched-panel__facts dt {
    margin-top: var(--space-3);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#bo-sched-panel .bo-sched-panel__facts dd {
    margin-top: 2px;
    font-size: 1.0625rem;
    font-weight: 600;
}

#bo-sched-panel .bo-sched-panel__actions {
    flex-direction: column;
    flex-wrap: nowrap;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

#bo-sched-panel .bo-sched-panel__actions .staff-btn {
    justify-content: center;
    width: 100%;
    text-align: center;
}

.bo-sched-panel__remove {
    align-self: center;
    margin-top: var(--space-2);
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-danger);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.bo-sched-panel__remove:hover:not(:disabled),
.bo-sched-panel__remove.is-armed {
    background: color-mix(in srgb, var(--color-danger) 15%, transparent);
    font-weight: 700;
}

.bo-sched-panel__remove:disabled {
    opacity: 0.5;
    cursor: default;
}

.bo-sched-panel__note--customer {
    border-color: var(--color-warning-border);
    background: var(--color-warning-surface);
}

/* Customer requests: a quiet band, clearly not a technician lane. Ghost chips = not planned yet. */
.bo-sched--grid .bo-tl__row--requests {
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    border-bottom: 1px dashed var(--color-border);
}

.bo-sched--grid .bo-tl__row--requests .bo-tl__track {
    min-height: 3rem;
}

.bo-tl__row--requests .bo-tl__label {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.bo-tl__requests-title {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bo-tl__requests-sub {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    opacity: 0.8;
}

.bo-tl__row--requests .bo-tl__block {
    border: 1.5px dashed var(--color-text-muted);
    background: transparent;
    color: var(--color-text);
}

/* System proposals: one slim strip, the list opens on demand. */
.bo-proposals {
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-warning-border);
    border-radius: 10px;
    background: var(--color-warning-surface);
}

.bo-proposals__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.4rem var(--space-3);
    cursor: pointer;
    list-style: none;
}

.bo-proposals__bar::-webkit-details-marker {
    display: none;
}

.bo-proposals__dot {
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--color-warning-text);
}

.bo-proposals__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bo-proposals__hint {
    margin-left: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.bo-proposals__review {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.bo-proposals__review::after {
    content: " ▾";
}

.bo-proposals[open] .bo-proposals__review::after {
    content: " ▴";
}

.bo-proposals__all {
    padding-block: 0.3rem;
}

.bo-proposals__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-top: 1px solid var(--color-border);
    list-style: none;
}

.bo-proposals__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.bo-proposals__actions {
    display: flex;
    gap: var(--space-2);
}

@media (max-width: 40rem) {
    .bo-proposals__hint,
    .bo-proposals__review {
        display: none;
    }
}

/* Number plate: Dutch yellow with a blue country strip. Colours are fixed on purpose, a plate looks the
   same in light and dark mode. */
.plate {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    overflow: hidden;
    border: 1.5px solid #1a1a1a;
    border-radius: 5px;
    background: #f7c800;
    color: #111;
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
}

.plate::before {
    content: "NL";
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0.3em 0.25em;
    background: #003399;
    color: #fff;
    font-family: system-ui, sans-serif;
    font-size: 0.5em;
    font-weight: 700;
    letter-spacing: 0;
}

.plate__text {
    padding: 0.28em 0.55em;
    font-size: 1em;
}

.plate--sm {
    border-width: 1px;
    border-radius: 4px;
    font-size: 0.8125rem;
}

.plate--sm .plate__text {
    padding: 0.22em 0.45em;
}

.plate--empty {
    color: var(--color-text-muted);
    font-weight: 400;
}

.bo-sched-panel__title .plate {
    font-size: 1.35rem;
}

.bo-tl .bo-tl__block .plate {
    align-self: flex-start;
    margin-bottom: 1px;
}

.bo-tl--compact .plate--sm {
    font-size: 0.75rem;
}

/* Proposals strip: plate opens the job, date jumps to the timeline */
.bo-proposals__who {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.bo-proposals__plate {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.bo-proposals__plate:hover,
.bo-proposals__plate:focus-visible {
    outline: 2px solid var(--color-primary-action);
    outline-offset: 2px;
}

.bo-proposals__when {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: 0.25rem 0.65rem;
    font: inherit;
    color: var(--color-text);
    text-transform: capitalize;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
}

.bo-proposals__when:hover,
.bo-proposals__when:focus-visible {
    border-color: var(--color-primary-action);
}

.bo-proposals__day {
    font-weight: 600;
}

.bo-proposals__time {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

/* Job preview modal */
.bo-job__wishes {
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-warning-surface);
    border: 1px solid var(--color-warning-border);
    border-radius: 8px;
    color: var(--color-warning-text);
}

.bo-job__wishes p {
    margin: var(--space-1) 0 0;
}

.bo-job__heading {
    margin: 0 0 var(--space-2);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.bo-job__lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bo-job__lines li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.bo-job__hours {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.bo-job__total {
    display: flex;
    justify-content: space-between;
    margin: var(--space-3) 0 0;
}

/* Planning panel: backlog cards, draggable onto the timeline */
.bo-sched-panel__subtitle { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--color-text-muted); }

.bo-sched-queue__item--drag {
    position: relative;
    padding-left: 1.5rem;
    border-style: solid;
    background: var(--color-surface);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.bo-sched-queue__item--drag .bo-sched-queue__main {
    align-items: flex-start;
    gap: 0.3rem;
}

.bo-sched-queue__item--drag .plate { flex: none; }

.bo-sched-queue__grip {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    width: 0.5rem;
    height: 0.9rem;
    transform: translateY(-50%);
    background: radial-gradient(circle, var(--color-text-muted) 1.2px, transparent 1.6px) 0 0 / 0.5rem 0.3rem;
    opacity: 0.55;
}

.bo-sched-queue__item--drag:hover .bo-sched-queue__grip { opacity: 1; }
.bo-sched-queue__item--drag.is-dragging { opacity: 0.45; cursor: grabbing; }

.bo-sched-queue__hours {
    padding: 0.05rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

/* While dragging from the backlog the panel steps aside so the timeline underneath can receive the drop */
body.bo-backlog-dragging { cursor: grabbing; user-select: none; }
.bo-sched-panel { transition: translate 180ms ease; }
body.bo-backlog-dragging .bo-sched-panel { translate: calc(100% + 1.5rem) 0; pointer-events: none; }
body.bo-backlog-dragging .bo-tl__lane[data-tech].is-drop-target {
    background: color-mix(in srgb, var(--color-primary-action) 14%, transparent);
    outline: 2px solid var(--color-primary-action);
    outline-offset: -2px;
}

.bo-backlog-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    pointer-events: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    opacity: 0.9;
}

.bo-backlog-ghost.is-over { border-color: var(--color-primary-action); }
.bo-backlog-ghost__time { font-variant-numeric: tabular-nums; font-weight: 650; }

/* Timeline: workshop closed / outside opening hours */
.bo-tl__shut {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-text-muted) 14%, transparent) 0,
        color-mix(in srgb, var(--color-text-muted) 14%, transparent) 6px,
        transparent 6px,
        transparent 12px);
    background-color: color-mix(in srgb, var(--color-text-muted) 6%, transparent);
}

.bo-tl--closed .bo-tl__shut { inset: 0; }

.bo-tl__closed-badge {
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--color-text-strong, var(--color-text));
    background: color-mix(in srgb, var(--color-text-muted) 22%, transparent);
    border-radius: 999px;
}

.bo-plan-day--closed:not(.bo-plan-day--active) { opacity: 0.55; }
.bo-plan-day--closed .bo-plan-day__num { text-decoration: line-through; text-decoration-thickness: 1px; }

.bo-sched-panel__job {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.bo-sched-panel__job .bo-job__heading:not(:first-child) { margin-top: var(--space-4); }

/* Multi-day jobs: one continuous bar across the days */
.bo-tl__block--series {
    border-style: solid;
    background-image: linear-gradient(90deg,
        color-mix(in srgb, var(--color-primary-action) 10%, transparent),
        color-mix(in srgb, var(--color-primary-action) 4%, transparent));
}

.bo-tl__block--cont-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-style: dashed;
    padding-left: 1.1rem;
}

.bo-tl__block--cont-right {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-style: dashed;
}

.bo-tl__block--cont-left::before,
.bo-tl__block--cont-right::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    line-height: 1;
    color: var(--color-text-muted);
}

.bo-tl__block--cont-left::before { content: "◀"; left: 0.3rem; }
.bo-tl__block--cont-right::after { content: "▶"; right: 0.3rem; }

.bo-tl__meta--day {
    font-weight: 650;
    color: var(--color-text);
}

.bo-sched-panel__series {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.bo-sched-queue__span {
    padding: 0.05rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--color-primary-action);
    border: 1px solid color-mix(in srgb, var(--color-primary-action) 45%, transparent);
    border-radius: 999px;
}

/* Week view: multi-day jobs as bars spanning their days, above the day columns */
.bo-sched-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin: 0.35rem 0.4rem 0;
    padding: 0.3rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface));
    color: inherit;
    font: inherit;
    font-size: 0.75rem;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.bo-sched-bar:hover {
    background: color-mix(in srgb, var(--color-primary) 26%, var(--color-surface));
    border-color: var(--color-primary);
}

.bo-sched-bar:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bo-sched-bar__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-muted, inherit);
}

.bo-sched-bar__days {
    flex: none;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
    font-weight: 650;
    font-size: 0.6875rem;
}

.bo-sched-bar--cont-left {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-style: dashed;
}

.bo-sched-bar--cont-right {
    margin-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-style: dashed;
}

.bo-sched-board--week:has(.bo-sched-bar) .bo-sched-col {
    border-top: 0;
}

.bo-sched-bar--short .bo-sched-bar__text {
    display: none;
}

.bo-sched-bar--short {
    justify-content: space-between;
}

/* Drag handle on the right edge of a week bar */
.bo-sched-bar {
    position: relative;
}

.bo-sched-bar__handle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.75rem;
    cursor: ew-resize;
    border-radius: 0 0.5rem 0.5rem 0;
}

.bo-sched-bar__handle::after {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    right: 0.2rem;
    width: 3px;
    border-radius: 2px;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity 120ms ease;
}

.bo-sched-bar:hover .bo-sched-bar__handle::after,
.bo-sched-bar.is-resizing .bo-sched-bar__handle::after {
    opacity: 0.8;
}

.bo-sched-bar.is-resizing {
    z-index: 2;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.35);
    transition: none;
}

.bo-sched-bar.is-saving {
    opacity: 0.6;
}

body.bo-bar-resizing {
    cursor: ew-resize;
    user-select: none;
}

.bo-sched-col.is-bar-target {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}

/* Pause (split) a multi-day job from the block panel */
.bo-sched-panel__split {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0;
    padding: 0.75rem;
    border: 1px dashed color-mix(in srgb, var(--color-primary) 40%, transparent);
    border-radius: 0.5rem;
}

.bo-sched-panel__split-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.bo-sched-panel__split-row .bo-input {
    flex: 1 1 9rem;
    min-width: 0;
}

.bo-sched-panel__split-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted, inherit);
}

.bo-sched-panel__split-btn {
    width: 100%;
    justify-content: center;
}

/* One-click fix offered with a scheduling conflict */
.bo-sched-workbench__error-action {
    flex: none;
    padding: 0.25rem 0.7rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    cursor: pointer;
}

.bo-sched-workbench__error-action:hover:not(:disabled) {
    background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Night-drop proof photos and planned drop-off hints */
.bo-proof-photos { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.bo-proof-photos img { width: 6rem; height: 4.5rem; object-fit: cover; border-radius: 8px; display: block; border: 1px solid var(--color-border, rgba(127, 127, 127, 0.3)); }
.bo-balie-card__plan, .bo-balie-card__key { font-size: 0.8125rem; color: var(--color-text-muted); }
.bo-night-drop-qr { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 0.75rem; }
.bo-night-drop-qr img { image-rendering: pixelated; background: #fff; padding: 0.5rem; border-radius: 8px; }
.bo-night-drop-qr__copy { display: flex; flex-direction: column; gap: 0.5rem; max-width: 24rem; }

/* Arrival proof on the work-order page */
.bo-arrival-proof {
    display: block;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--color-success-border, #2f6b4f);
    border-inline-start: 4px solid var(--color-success, #2f6b4f);
    border-radius: var(--radius-3, 12px);
    background: color-mix(in srgb, var(--color-success-surface, #e8f5e9) 48%, var(--color-surface));
}
.bo-arrival-proof__header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}
.bo-arrival-proof__marker {
    display: grid;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-success-surface, #e8f5e9);
    color: var(--color-success-text, #1b7f4a);
    font-size: 0.9rem;
    font-weight: 800;
}
.bo-arrival-proof__title {
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 700;
}
.bo-arrival-proof__time {
    margin-inline-start: auto;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bo-arrival-proof__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem);
    align-items: start;
    gap: 1rem 1.5rem;
    margin-top: 1rem;
}
.bo-arrival-proof__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 0.6rem;
    min-width: 0;
}
.bo-arrival-proof__fact,
.bo-arrival-proof__note {
    min-width: 0;
    margin: 0;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-2, 8px);
    background: color-mix(in srgb, var(--color-surface) 88%, var(--color-success-surface, #e8f5e9));
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.bo-arrival-proof__note {
    grid-column: 1 / -1;
    border-inline-start: 2px solid var(--color-border-strong, var(--color-success-border, #2f6b4f));
    color: var(--color-text-muted);
    font-style: italic;
}
.bo-arrival-proof__media { min-width: 0; }
.bo-arrival-proof__media-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.bo-arrival-proof .bo-proof-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
}
.bo-arrival-proof .bo-proof-photos a {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-2, 8px);
    outline-offset: 3px;
}
.bo-arrival-proof .bo-proof-photos img {
    width: 100%;
    height: 5.25rem;
    border-radius: inherit;
    transition: transform 160ms ease;
}
.bo-arrival-proof .bo-proof-photos a:hover img { transform: scale(1.04); }

@media (max-width: 700px) {
    .bo-arrival-proof { padding: 0.9rem; }
    .bo-arrival-proof__content { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
    .bo-arrival-proof__time { font-size: 0.8rem; }
    .bo-arrival-proof .bo-proof-photos { max-width: 24rem; }
}

@media (max-width: 420px) {
    .bo-arrival-proof__header { align-items: flex-start; flex-wrap: wrap; }
    .bo-arrival-proof__time { width: 100%; margin-inline-start: 2.4rem; }
    .bo-arrival-proof__details { grid-template-columns: minmax(0, 1fr); }
    .bo-arrival-proof__note { grid-column: auto; }
}