/* 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;
}

.bo-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

.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);
    border-radius: var(--radius-2, 8px);
    background: 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, #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;
    background: var(--color-text-strong, #1a1a1a);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    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;
}

.bo-action-toast__action {
    flex-shrink: 0;
    margin: 0;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.bo-action-toast__action:hover {
    background: rgba(255, 255, 255, 0.12);
}

.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(3, 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);
}

.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;
}

/* --- 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: 720px) {
    .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-5);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.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__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-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: 36rem;
}

.bo-security-code {
    max-width: 16rem;
}

.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);
}

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

.bo-onboarding-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
    width: 100%;
}

@media (min-width: 1100px) {
    .bo-onboarding-layout {
        grid-template-columns: minmax(16rem, 0.85fr) minmax(0, 1.35fr);
    }
}

.bo-onboarding-panel {
    padding: 0;
    overflow: hidden;
    min-width: 0;
}

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

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

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

.bo-onboarding-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-onboarding-panel__body {
    padding: var(--space-5);
}

.bo-onboarding-panel__body .bo-settings-form__section:first-child {
    padding-top: 0;
    border-top: none;
}

.bo-onboarding-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-onboarding-checklist-card .bo-onb-checklist {
    margin: 0;
    grid-template-columns: 1fr;
}

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

/* --- 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: 1fr;
    gap: var(--space-4);
    align-items: start;
    width: 100%;
}

@media (min-width: 960px) {
    .bo-privacy-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }

    .bo-privacy-layout > .bo-privacy-panel {
        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;
}

.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-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
}

@media (min-width: 1100px) {
    .bo-dash-grid {
        grid-template-columns: 2fr 1fr;
    }
}

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

.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-warning-border);
    background: var(--color-warning-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: #2E7D32;
}

.bo-dash-chip--warn {
    background: var(--color-warning-surface);
    border-color: var(--color-warning-border);
    color: #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__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;
}

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

/* Mobile: action/invoices before schedule preview */
.bo-dash-layout > .bo-dash-card {
    order: 2;
}

.bo-dash-layout > .bo-dash-right {
    order: 1;
}

@media (min-width: 960px) {
    .bo-dash-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        align-items: start;
        gap: var(--space-4);
    }

    .bo-dash-layout > .bo-dash-card,
    .bo-dash-layout > .bo-dash-right {
        order: unset;
    }
}

@media (min-width: 1200px) {
    .bo-dash-layout {
        gap: var(--space-5);
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }
}

/* 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, #2e7d32) 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%, #fff);
    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: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-background, var(--color-surface));
    scroll-margin-top: 5rem;
}

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

.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%, #fff);
    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: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    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 {
    min-width: 0;
}

.bo-ops-block-row__date {
    display: block;
    font-weight: 750;
    font-size: 0.9375rem;
    line-height: 1.3;
}

.bo-ops-block-row__time {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

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

.bo-ops-block-row__tech {
    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-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

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

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

@media (max-width: 900px) {
    .bo-ops-compose__grid {
        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;
}

.bo-ops-compose__hint {
    margin: 0;
    font-size: 0.75rem;
    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, #2e7d32);
    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, #2e7d32) 8%, var(--color-surface));
    border-color: var(--color-success, #2e7d32);
}

.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%, #fff);
    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, #2e7d32) 10%, #fff);
    color: var(--color-success, #2e7d32);
}

.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%, #fff);
    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, #2e7d32),
        0 1px 0 color-mix(in srgb, var(--color-success, #2e7d32) 12%, transparent);
    background: var(--color-success-surface, #E8F5E9);
}

.bo-wo-item--plan:hover {
    border-color: var(--color-success, #2e7d32);
    background: color-mix(in srgb, var(--color-success-surface, #E8F5E9) 70%, #fff);
    box-shadow:
        inset 3px 0 0 var(--color-success, #2e7d32),
        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, #2e7d32),
        0 1px 0 color-mix(in srgb, var(--color-success, #2e7d32) 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, #2e7d32);
    box-shadow:
        inset 3px 0 0 var(--color-success, #2e7d32),
        var(--elevation-1);
}

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

.bo-wo-item--progress:hover {
    border-color: #EF6C00;
    background: color-mix(in srgb, var(--color-warning-surface, #FFF3E0) 70%, #fff);
    box-shadow:
        inset 3px 0 0 #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, #F9A825) 35%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning, #F9A825) 10%, #fff);
    box-shadow:
        inset 3px 0 0 var(--color-warning, #F9A825),
        0 1px 0 color-mix(in srgb, var(--color-warning, #F9A825) 12%, transparent);
}

.bo-wo-item--time:hover {
    border-color: var(--color-warning, #F9A825);
    background: color-mix(in srgb, var(--color-warning, #F9A825) 14%, #fff);
    box-shadow:
        inset 3px 0 0 var(--color-warning, #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%, #fff);
    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, #2e7d32);
}

.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, #2e7d32);
    border-color: var(--color-success, #2e7d32);
    color: #fff;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-success, #2e7d32) 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, #2e7d32) 88%, #000);
    border-color: color-mix(in srgb, var(--color-success, #2e7d32) 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, #2e7d32);
}

.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--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, #2e7d32);
}

.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;
}

/* 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__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__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__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: anywhere;
}

.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);
}

.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-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%, #fff);
    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, #2e7d32);
}

.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, #2e7d32);
}

.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%, #fff);
}

.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, #2e7d32) 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, #2e7d32);
    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%, #fff);
}

.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, #2e7d32);
}

.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;
    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__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__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem;
}

.bo-wo-job--editing {
    align-items: flex-start;
    background: color-mix(in srgb, var(--color-primary, #0066cc) 4%, var(--color-surface));
}

.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;
    margin-top: 0.65rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2, 8px);
    background: var(--color-canvas, #fff);
    max-width: 28rem;
}

.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: var(--space-3);
}

.bo-wo-detail-aside .bo-ops-compose__grid {
    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--skeleton {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-3);
    padding: var(--space-3);
}

.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;
}

/* Drop targets while dragging */
.bo-sched--dragging .bo-sched-col {
    outline: 1px dashed color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.bo-sched-col--drop-target {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)) !important;
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.bo-sched-col--drop-target .bo-sched-col__empty {
    color: var(--color-primary);
    font-weight: 650;
    opacity: 1;
}

.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-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;
}

/* Bottom workbench queues */
.bo-sched-workbench {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

@media (min-width: 960px) {
    .bo-sched-workbench {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.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--scheduled {
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-primary) 6%);
}

.bo-sched-queue__header {
    margin-bottom: var(--space-3);
}

.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;
    cursor: grab;
    user-select: none;
}

.bo-sched-queue__item:active {
    cursor: grabbing;
}

.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__item--dragging {
    opacity: 0.45;
    border-style: dashed;
    box-shadow: none;
}

.bo-sched-queue__grip {
    display: grid;
    grid-template-columns: repeat(2, 0.28rem);
    gap: 0.18rem 0.22rem;
    padding: 0.2rem;
    flex-shrink: 0;
    opacity: 0.45;
}

.bo-sched-queue__item:hover .bo-sched-queue__grip {
    opacity: 0.85;
}

.bo-sched-queue__grip span {
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    background: var(--color-text-muted);
}

.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-auto-flow: column;
        grid-auto-columns: minmax(9.5rem, 1fr);
        grid-template-columns: none;
        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-auto-columns: 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(2, 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__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, #F9A825);
    background: rgba(249, 168, 37, 0.06);
}

.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%, #fff);
}

.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 #EF6C00;
    background: rgba(239, 108, 0, 0.05);
}

.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__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: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    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__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;
    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__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-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 {
        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);
    }

    .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 #F9A825;
    background: rgba(249, 168, 37, 0.06);
}

.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: 42rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bo-profile-hero {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-5);
}

.bo-profile-hero__avatar {
    flex-shrink: 0;
}

.bo-cust-avatar--xl {
    width: 5.5rem;
    height: 5.5rem;
    font-size: 1.5rem;
    font-weight: 750;
}

.bo-profile-hero__copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    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;
    align-items: center;
    min-width: 0;
    margin-top: var(--space-1);
}

.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-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .bo-profile-hero .bo-profile-avatar-editor__actions {
        justify-content: center;
    }

    .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__name {
    font-size: 1.0625rem;
    font-weight: 700;
}

.bo-cust-item__number {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted, #64748b);
    letter-spacing: 0.02em;
}

.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 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: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.96)),
        radial-gradient(120% 80% at 0% 0%, rgba(0, 102, 204, 0.08), transparent 55%);
}

.bo-veh-edit-hero__plate {
    flex: 0 1 20rem;
    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 {
    flex: 1 1 14rem;
    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;
}

.bo-veh-edit-hero__customer {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.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: 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 #F9A825;
    background: rgba(249, 168, 37, 0.06);
}

.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--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__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;
    grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) auto auto auto auto;
    gap: 0.65rem 0.85rem;
    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__row {
    border-radius: var(--radius-2, 8px);
    font-size: 0.875rem;
}

.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-wrap: anywhere;
}

.bo-wo-materials__mobile-badges,
.bo-wo-materials__mobile-meta {
    display: none;
}

.bo-wo-materials__action {
    min-width: 0;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.bo-wo-materials__num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bo-wo-materials__amount {
    font-weight: 700;
}

.bo-wo-materials__actions {
    display: flex;
    justify-content: flex-end;
}

.bo-wo-materials__remove {
    padding: 0.25rem 0.55rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

@media (max-width: 960px) {
    .bo-wo-materials__head,
    .bo-wo-materials__row {
        grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr) auto auto auto;
    }

    .bo-wo-materials__unit {
        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__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: rgba(0, 102, 204, 0.04);
    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%, white));
}

.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%, white) 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%, white) 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%, white);
    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%, white);
}

.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%, white));
    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-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-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-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);
    }
}


/* 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);
}

/* --- 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-workforce-compose--skills {
    grid-template-columns: minmax(0, 1fr) auto;
}

.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;
    }
}