/*
 * DocView Capture design system (UIX-01, UIX-02): Fluent 2 look — the design language of current Microsoft
 * Office — on top of Bootstrap 5. Tokens first, then Bootstrap mappings, then components. Light and dark themes.
 * Segoe UI Variable ships with Windows 11; other systems fall back to their UI font. No font files are loaded.
 */

/* ------------------------------------------------------------------ tokens */
:root,
[data-bs-theme="light"] {
    --dv-brand: #0f6cbd;
    --dv-brand-hover: #115ea3;
    --dv-brand-pressed: #0f548c;
    --dv-brand-subtle: #ebf3fc;
    --dv-brand-subtle-hover: #cfe4fa;
    --dv-brand-fg: #0f6cbd;
    --dv-titlebar: #0f548c;
    --dv-titlebar-fg: #ffffff;
    --dv-titlebar-hover: rgba(255, 255, 255, .12);
    --dv-canvas: #f5f5f5;
    --dv-surface: #ffffff;
    --dv-surface-2: #fafafa;
    --dv-surface-3: #f0f0f0;
    --dv-hover: #f5f5f5;
    --dv-pressed: #e0e0e0;
    --dv-selected: #ebebeb;
    --dv-fg-1: #242424;
    --dv-fg-2: #424242;
    --dv-fg-3: #616161;
    --dv-fg-4: #707070;
    --dv-stroke-1: #d1d1d1;
    --dv-stroke-2: #e0e0e0;
    --dv-stroke-3: #f0f0f0;
    --dv-stroke-accessible: #616161;
    --dv-success: #107c10;
    --dv-success-subtle: #f1faf1;
    --dv-warning: #bc4b09;
    --dv-warning-subtle: #fff9f5;
    --dv-danger: #c50f1f;
    --dv-danger-subtle: #fdf3f4;
    --dv-shadow-2: 0 0 2px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .14);
    --dv-shadow-4: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .14);
    --dv-shadow-8: 0 0 2px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .14);
    --dv-shadow-16: 0 0 2px rgba(0, 0, 0, .12), 0 8px 16px rgba(0, 0, 0, .14);
    --dv-shadow-28: 0 0 8px rgba(0, 0, 0, .12), 0 14px 28px rgba(0, 0, 0, .14);
    --dv-radius-s: 2px;
    --dv-radius-m: 4px;
    --dv-radius-l: 6px;
    --dv-radius-xl: 8px;
    --dv-font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --dv-font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --dv-titlebar-height: 48px;
}

[data-bs-theme="dark"] {
    --dv-brand: #479ef5;
    --dv-brand-hover: #62abf5;
    --dv-brand-pressed: #2886de;
    --dv-brand-subtle: #082338;
    --dv-brand-subtle-hover: #0c3b5e;
    --dv-brand-fg: #479ef5;
    --dv-titlebar: #1b1b1b;
    --dv-titlebar-fg: #ffffff;
    --dv-titlebar-hover: rgba(255, 255, 255, .08);
    --dv-canvas: #141414;
    --dv-surface: #292929;
    --dv-surface-2: #1f1f1f;
    --dv-surface-3: #333333;
    --dv-hover: #3d3d3d;
    --dv-pressed: #1f1f1f;
    --dv-selected: #383838;
    --dv-fg-1: #ffffff;
    --dv-fg-2: #d6d6d6;
    --dv-fg-3: #adadad;
    --dv-fg-4: #999999;
    --dv-stroke-1: #666666;
    --dv-stroke-2: #525252;
    --dv-stroke-3: #3d3d3d;
    --dv-stroke-accessible: #adadad;
    --dv-success: #54b054;
    --dv-success-subtle: #052505;
    --dv-warning: #faa06b;
    --dv-warning-subtle: #411200;
    --dv-danger: #dc626d;
    --dv-danger-subtle: #3b0509;
    --dv-shadow-2: 0 0 2px rgba(0, 0, 0, .24), 0 1px 2px rgba(0, 0, 0, .28);
    --dv-shadow-4: 0 0 2px rgba(0, 0, 0, .24), 0 2px 4px rgba(0, 0, 0, .28);
    --dv-shadow-8: 0 0 2px rgba(0, 0, 0, .24), 0 4px 8px rgba(0, 0, 0, .28);
    --dv-shadow-16: 0 0 2px rgba(0, 0, 0, .24), 0 8px 16px rgba(0, 0, 0, .28);
    --dv-shadow-28: 0 0 8px rgba(0, 0, 0, .24), 0 14px 28px rgba(0, 0, 0, .28);
}

/* ------------------------------------------------------------------ Bootstrap mapping */
:root,
[data-bs-theme] {
    --bs-font-sans-serif: var(--dv-font);
    --bs-body-font-family: var(--dv-font);
    --bs-body-font-size: .875rem;
    --bs-body-line-height: 1.43;
    --bs-body-color: var(--dv-fg-1);
    --bs-body-bg: var(--dv-surface);
    --bs-secondary-color: var(--dv-fg-3);
    --bs-tertiary-color: var(--dv-fg-4);
    --bs-secondary-bg: var(--dv-surface-3);
    --bs-tertiary-bg: var(--dv-surface-2);
    --bs-emphasis-color: var(--dv-fg-1);
    --bs-border-color: var(--dv-stroke-2);
    --bs-border-color-translucent: var(--dv-stroke-2);
    --bs-border-radius: var(--dv-radius-m);
    --bs-border-radius-sm: var(--dv-radius-m);
    --bs-border-radius-lg: var(--dv-radius-xl);
    --bs-border-radius-xl: var(--dv-radius-xl);
    --bs-primary: var(--dv-brand);
    --bs-link-color: var(--dv-brand-fg);
    --bs-link-hover-color: var(--dv-brand-hover);
    --bs-link-color-rgb: 15, 108, 189;
    --bs-link-hover-color-rgb: 17, 94, 163;
    --bs-primary-bg-subtle: var(--dv-brand-subtle);
    --bs-success: var(--dv-success);
    --bs-danger: var(--dv-danger);
    --bs-success-bg-subtle: var(--dv-success-subtle);
    --bs-warning-bg-subtle: var(--dv-warning-subtle);
    --bs-danger-bg-subtle: var(--dv-danger-subtle);
    --bs-focus-ring-color: rgba(15, 108, 189, .35);
    --bs-box-shadow: var(--dv-shadow-8);
    --bs-box-shadow-sm: var(--dv-shadow-4);
    --bs-box-shadow-lg: var(--dv-shadow-28);
}

[data-bs-theme="dark"] {
    --bs-link-color-rgb: 71, 158, 245;
    --bs-link-hover-color-rgb: 98, 171, 245;
}

body {
    background: var(--dv-canvas);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "kern";
}

h1, .h1, h2, .h2, h3, .h3 {
    font-family: var(--dv-font-display);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--dv-fg-1);
}

.h3, h1.h3 {
    font-size: 1.5rem;
}

.h4, .h5, .h6, h4, h5, h6 {
    font-weight: 600;
}

a {
    text-underline-offset: .15em;
}

::selection {
    background: var(--dv-brand-subtle-hover);
}

/* Slim scrollbars like Office. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--dv-stroke-1) transparent;
}

/* ------------------------------------------------------------------ buttons */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--dv-radius-m);
    --bs-btn-padding-y: .3125rem;
    --bs-btn-padding-x: .75rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-focus-box-shadow: 0 0 0 2px var(--dv-surface), 0 0 0 4px var(--dv-fg-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    transition: background-color .1s ease, border-color .1s ease, color .1s ease;
}

.btn-sm {
    --bs-btn-padding-y: .1875rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .8125rem;
}

.btn-lg {
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1rem;
}

.btn:focus-visible {
    outline: none;
}

.btn-primary {
    --bs-btn-bg: var(--dv-brand);
    --bs-btn-border-color: var(--dv-brand);
    --bs-btn-hover-bg: var(--dv-brand-hover);
    --bs-btn-hover-border-color: var(--dv-brand-hover);
    --bs-btn-active-bg: var(--dv-brand-pressed);
    --bs-btn-active-border-color: var(--dv-brand-pressed);
    --bs-btn-disabled-bg: var(--dv-surface-3);
    --bs-btn-disabled-border-color: var(--dv-stroke-2);
    --bs-btn-disabled-color: var(--dv-fg-4);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-success {
    --bs-btn-bg: var(--dv-success);
    --bs-btn-border-color: var(--dv-success);
    --bs-btn-hover-bg: #0e700e;
    --bs-btn-hover-border-color: #0e700e;
    --bs-btn-active-bg: #0c5e0c;
    --bs-btn-active-border-color: #0c5e0c;
    --bs-btn-disabled-bg: var(--dv-surface-3);
    --bs-btn-disabled-border-color: var(--dv-stroke-2);
    --bs-btn-disabled-color: var(--dv-fg-4);
}

.btn-danger {
    --bs-btn-bg: var(--dv-danger);
    --bs-btn-border-color: var(--dv-danger);
    --bs-btn-hover-bg: #b10e1c;
    --bs-btn-hover-border-color: #b10e1c;
}

/* Fluent "secondary": surface, neutral stroke, neutral text. */
.btn-outline-secondary,
.btn-secondary,
.btn-outline-primary,
.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning,
.btn-light {
    --bs-btn-bg: var(--dv-surface);
    --bs-btn-border-color: var(--dv-stroke-1);
    --bs-btn-color: var(--dv-fg-1);
    --bs-btn-hover-bg: var(--dv-hover);
    --bs-btn-hover-border-color: #c7c7c7;
    --bs-btn-hover-color: var(--dv-fg-1);
    --bs-btn-active-bg: var(--dv-pressed);
    --bs-btn-active-border-color: #b3b3b3;
    --bs-btn-active-color: var(--dv-fg-1);
    --bs-btn-disabled-bg: var(--dv-surface-2);
    --bs-btn-disabled-border-color: var(--dv-stroke-2);
    --bs-btn-disabled-color: var(--dv-fg-4);
}

.btn-outline-primary {
    --bs-btn-color: var(--dv-brand-fg);
    --bs-btn-hover-color: var(--dv-brand-hover);
}

.btn-outline-danger {
    --bs-btn-color: var(--dv-danger);
    --bs-btn-hover-color: var(--dv-danger);
}

.btn-outline-success {
    --bs-btn-color: var(--dv-success);
    --bs-btn-hover-color: var(--dv-success);
}

.btn-outline-warning {
    --bs-btn-color: var(--dv-warning);
    --bs-btn-hover-color: var(--dv-warning);
}

/* "Selected" state for toggle buttons (btn-secondary is used as the pressed toggle). */
.btn-secondary {
    --bs-btn-bg: var(--dv-selected);
    --bs-btn-border-color: var(--dv-stroke-1);
    --bs-btn-hover-bg: var(--dv-pressed);
}

.btn-link {
    --bs-btn-font-weight: 400;
    --bs-btn-color: var(--dv-brand-fg);
    --bs-btn-hover-color: var(--dv-brand-hover);
    text-decoration: none;
}

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

.btn-group > .btn:not(:first-child) {
    margin-left: -1px;
}

.btn-group > .btn.disabled:not(.btn-primary) {
    opacity: 1;
    color: var(--dv-fg-2);
    background: var(--dv-surface);
}

/* Title bar buttons */
.btn-outline-light {
    --bs-btn-color: var(--dv-titlebar-fg);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--dv-titlebar-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-color: var(--dv-titlebar-fg);
    --bs-btn-active-bg: rgba(255, 255, 255, .2);
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-color: var(--dv-titlebar-fg);
    --bs-btn-font-weight: 400;
}

/* ------------------------------------------------------------------ inputs (Fluent: underline accent on focus) */
.form-control,
.form-select {
    border-color: var(--dv-stroke-1);
    border-bottom-color: var(--dv-stroke-accessible);
    border-radius: var(--dv-radius-m);
    background-color: var(--dv-surface);
    color: var(--dv-fg-1);
    font-size: .875rem;
    min-height: 2rem;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    transition: border-color .1s ease, box-shadow .1s ease;
}

.form-control-sm,
.form-select-sm {
    min-height: 1.75rem;
    font-size: .8125rem;
}

.form-control:hover,
.form-select:hover {
    border-color: #c7c7c7;
    border-bottom-color: var(--dv-fg-2);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--dv-stroke-1);
    border-bottom-color: var(--dv-brand);
    box-shadow: inset 0 -1px 0 var(--dv-brand);
}

.form-control:disabled,
.form-select:disabled,
fieldset:disabled .form-control,
fieldset:disabled .form-select {
    background-color: var(--dv-surface-2);
    border-color: var(--dv-stroke-2);
    color: var(--dv-fg-4);
}

.form-label {
    font-weight: 600;
    color: var(--dv-fg-1);
    margin-bottom: .25rem;
}

.form-text {
    color: var(--dv-fg-3);
}

.form-check-input {
    border-color: var(--dv-stroke-accessible);
}

.form-check-input:checked {
    background-color: var(--dv-brand);
    border-color: var(--dv-brand);
}

.form-check-input:focus {
    box-shadow: 0 0 0 2px var(--dv-surface), 0 0 0 4px var(--dv-fg-1);
}

.form-range::-webkit-slider-thumb {
    background: var(--dv-brand);
}

.input-group > .btn {
    border-bottom-color: var(--dv-stroke-accessible);
}

/* ------------------------------------------------------------------ surfaces */
.card {
    --bs-card-border-width: 0;
    --bs-card-border-radius: var(--dv-radius-xl);
    --bs-card-inner-border-radius: var(--dv-radius-xl);
    --bs-card-cap-bg: transparent;
    --bs-card-bg: var(--dv-surface);
    box-shadow: var(--dv-shadow-4);
}

.card-header {
    font-weight: 600;
    border-bottom: 1px solid var(--dv-stroke-3);
    padding: .75rem 1rem;
}

.card-footer {
    background: var(--dv-surface-2);
    border-top: 1px solid var(--dv-stroke-3);
}

a.card {
    transition: box-shadow .15s ease, transform .15s ease;
}

a.card:hover {
    box-shadow: var(--dv-shadow-8);
}

.list-group {
    --bs-list-group-border-color: var(--dv-stroke-3);
    --bs-list-group-bg: var(--dv-surface);
    --bs-list-group-action-hover-bg: var(--dv-hover);
    --bs-list-group-active-bg: var(--dv-brand-subtle);
    --bs-list-group-active-color: var(--dv-fg-1);
    --bs-list-group-active-border-color: var(--dv-stroke-3);
}

.list-group-item.active {
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--dv-brand);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--dv-hover);
    --bs-table-border-color: var(--dv-stroke-3);
    --bs-table-color: var(--dv-fg-1);
}

.table > thead th {
    font-weight: 600;
    color: var(--dv-fg-2);
    border-bottom: 1px solid var(--dv-stroke-2);
    white-space: nowrap;
}

.table a,
.list-group a:not(.list-group-item) {
    text-decoration: none;
}

.table a:hover {
    text-decoration: underline;
}

.table > tbody > tr:hover > * {
    --bs-table-bg-state: var(--dv-hover);
}

.dropdown-menu {
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: var(--dv-radius-xl);
    --bs-dropdown-box-shadow: var(--dv-shadow-16);
    --bs-dropdown-bg: var(--dv-surface);
    --bs-dropdown-link-color: var(--dv-fg-1);
    --bs-dropdown-link-hover-bg: var(--dv-hover);
    --bs-dropdown-link-active-bg: var(--dv-brand-subtle);
    --bs-dropdown-link-active-color: var(--dv-fg-1);
    --bs-dropdown-item-padding-y: .375rem;
    --bs-dropdown-font-size: .875rem;
    --bs-dropdown-divider-bg: var(--dv-stroke-2);
    --bs-dropdown-header-color: var(--dv-fg-3);
    padding: .25rem;
    box-shadow: var(--dv-shadow-16);
}

.dropdown-item {
    border-radius: var(--dv-radius-m);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dropdown-item:disabled,
.dropdown-item.disabled {
    color: var(--dv-fg-4);
}

.modal {
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: var(--dv-radius-xl);
    --bs-modal-box-shadow: var(--dv-shadow-28);
    --bs-modal-header-border-color: transparent;
    --bs-modal-footer-border-color: transparent;
}

.modal-content {
    box-shadow: var(--dv-shadow-28);
}

.modal-title {
    font-weight: 600;
}

.toast {
    --bs-toast-border-radius: var(--dv-radius-xl);
    --bs-toast-box-shadow: var(--dv-shadow-16);
    font-weight: 600;
}

.text-bg-success {
    background-color: var(--dv-success) !important;
}

.text-bg-danger {
    background-color: var(--dv-danger) !important;
}

.alert {
    --bs-alert-border-radius: var(--dv-radius-l);
    border-width: 1px;
}

.alert-info {
    --bs-alert-bg: var(--dv-brand-subtle);
    --bs-alert-border-color: var(--dv-brand-subtle-hover);
    --bs-alert-color: var(--dv-fg-1);
}

.alert-warning {
    --bs-alert-bg: var(--dv-warning-subtle);
    --bs-alert-color: var(--dv-fg-1);
}

.alert-danger {
    --bs-alert-bg: var(--dv-danger-subtle);
    --bs-alert-color: var(--dv-fg-1);
}

.alert-success {
    --bs-alert-bg: var(--dv-success-subtle);
    --bs-alert-color: var(--dv-fg-1);
}

.badge {
    font-weight: 600;
    border-radius: var(--dv-radius-m);
    padding: .25em .5em;
}

.badge.rounded-pill {
    border-radius: 999px;
}

.text-bg-light {
    background: var(--dv-surface-3) !important;
    color: var(--dv-fg-2) !important;
}

.breadcrumb {
    --bs-breadcrumb-font-size: .8125rem;
    --bs-breadcrumb-divider-color: var(--dv-fg-4);
    --bs-breadcrumb-item-active-color: var(--dv-fg-3);
    margin-bottom: .5rem;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--dv-stroke-2);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    --bs-nav-link-color: var(--dv-fg-2);
    --bs-nav-link-hover-color: var(--dv-fg-1);
    gap: .25rem;
}

.nav-tabs .nav-link {
    border: 0;
    border-radius: var(--dv-radius-m) var(--dv-radius-m) 0 0;
    padding: .5rem .75rem;
    position: relative;
}

.nav-tabs .nav-link:hover {
    background: var(--dv-hover);
}

/* Fluent tab: bold label with a brand underline. */
.nav-tabs .nav-link.active {
    font-weight: 600;
    color: var(--dv-fg-1);
}

.nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--dv-brand);
}

.progress {
    --bs-progress-bg: var(--dv-surface-3);
    --bs-progress-bar-bg: var(--dv-brand);
    --bs-progress-height: .5rem;
    --bs-progress-border-radius: 999px;
}

.spinner-border {
    --bs-spinner-border-width: .15em;
    color: var(--dv-brand);
}

.text-primary {
    color: var(--dv-brand-fg) !important;
}

.bg-body-tertiary {
    background-color: var(--dv-surface-2) !important;
}

.vr {
    opacity: 1;
    background-color: var(--dv-stroke-2);
}

/* ------------------------------------------------------------------ title bar (Office style) */
.dv-titlebar {
    flex: 0 0 var(--dv-titlebar-height);
    height: var(--dv-titlebar-height);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 .5rem 0 .25rem;
    background: var(--dv-titlebar);
    color: var(--dv-titlebar-fg);
    position: relative;
    z-index: 1040;
}

.dv-titlebar .dv-app {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    padding: .25rem .5rem;
    border-radius: var(--dv-radius-m);
}

.dv-titlebar .dv-app:hover {
    background: var(--dv-titlebar-hover);
}

.dv-app-logo {
    width: 24px;
    height: 24px;
}

.dv-titlebar .dv-batch-context {
    flex: 0 1 auto;
    max-width: 30%;
    color: rgba(255, 255, 255, .85);
    font-size: .8125rem;
}

.dv-titlebar .dv-batch-context strong {
    color: #fff;
}

.dv-titlebar .dv-icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 1.1rem;
}

.dv-search {
    flex: 0 1 30rem;
    margin: 0 auto;
    position: relative;
}

.dv-search .form-control {
    background: rgba(255, 255, 255, .92);
    border: 0;
    border-radius: var(--dv-radius-m);
    padding-left: 2rem;
    min-height: 2rem;
    color: #242424;
}

[data-bs-theme="dark"] .dv-search .form-control {
    background: #3d3d3d;
    color: #fff;
}

.dv-search .form-control:focus {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}

[data-bs-theme="dark"] .dv-search .form-control:focus {
    background: #292929;
}

.dv-search .bi {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: #616161;
    pointer-events: none;
}

.dv-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--dv-titlebar);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .8125rem;
    border: 2px solid rgba(255, 255, 255, .6);
}

[data-bs-theme="dark"] .dv-avatar {
    background: #479ef5;
    color: #fff;
}

.dv-user-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem .75rem;
    min-width: 16rem;
}

.dv-user-card .dv-avatar {
    width: 44px;
    height: 44px;
    background: var(--dv-brand);
    color: #fff;
    border: 0;
    font-size: 1rem;
}

/* ------------------------------------------------------------------ notification centre (NTF-03, NTF-04) */
.dv-bell-badge {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: #c50f1f;
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.15rem;
    text-align: center;
    box-shadow: 0 0 0 2px var(--dv-titlebar);
}

.dv-bell-menu {
    width: min(24rem, calc(100vw - 1rem));
    overflow: hidden;
}

.dv-bell-head,
.dv-bell-foot {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
}

.dv-bell-head {
    border-bottom: 1px solid var(--bs-border-color);
}

.dv-bell-foot {
    border-top: 1px solid var(--bs-border-color);
    justify-content: center;
    font-size: .875rem;
}

.dv-bell-list {
    max-height: min(26rem, 60vh);
    overflow-y: auto;
}

.dv-bell-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    font-size: .875rem;
}

.dv-bell-item:last-child {
    border-bottom: 0;
}

.dv-bell-item > .bi {
    margin-top: .1rem;
}

.dv-bell-item.dv-unread {
    background: var(--bs-primary-bg-subtle);
}

.dv-bell-text {
    flex: 1 1 auto;
    min-width: 0;
}

.dv-bell-msg {
    display: block;
    overflow-wrap: anywhere;
    color: var(--bs-body-color);
}

a.dv-bell-msg {
    text-decoration: none;
}

a.dv-bell-msg:hover,
a.dv-bell-msg:focus {
    text-decoration: underline;
}

.dv-bell-dot {
    padding: .25rem;
    line-height: 1;
}

.dv-bell-dot span {
    display: block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--bs-primary);
}

.dv-notification-table .dv-col-check,
.dv-notification-table .dv-col-kind {
    width: 2rem;
}

.dv-notification-table tr.dv-unread td {
    background: var(--bs-primary-bg-subtle);
}

.dv-notification-table tr.dv-unread .dv-notification-message {
    font-weight: 600;
}

.dv-notification-message {
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ side navigation (Fluent NavDrawer) */
.dv-sidenav {
    background: var(--dv-surface-2) !important;
    border-right: 1px solid var(--dv-stroke-2) !important;
}

.dv-sidenav .nav-pills {
    --bs-nav-pills-link-active-bg: var(--dv-selected);
    --bs-nav-pills-link-active-color: var(--dv-fg-1);
    --bs-nav-pills-border-radius: var(--dv-radius-m);
    --bs-nav-link-color: var(--dv-fg-2);
    --bs-nav-link-hover-color: var(--dv-fg-1);
    --bs-nav-link-padding-y: .5rem;
    --bs-nav-link-padding-x: .75rem;
    gap: 2px !important;
}

.dv-sidenav .nav-link {
    position: relative;
    min-height: 2.5rem;
    gap: .75rem !important;
}

.dv-sidenav .nav-link .bi {
    font-size: 1.15rem;
    width: 1.25rem;
    text-align: center;
    flex: 0 0 auto;
}

.dv-sidenav .nav-link:hover {
    background: var(--dv-hover);
}

.dv-sidenav .nav-link.active {
    font-weight: 600;
    background: var(--dv-selected);
}

.dv-sidenav .nav-link.active .bi {
    color: var(--dv-brand-fg);
}

/* Selection indicator bar */
.dv-sidenav .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 1.25rem;
    transform: translateY(-50%);
    border-radius: 2px;
    background: var(--dv-brand);
}

.dv-nav-heading {
    padding: .75rem .75rem .25rem !important;
    color: var(--dv-fg-3) !important;
    font-size: .75rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

/* ------------------------------------------------------------------ page layout */
.dv-main {
    background: var(--dv-canvas);
}

.dv-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.dv-page-header h1 {
    margin: 0;
    margin-right: auto;
}

.dv-page-header .dv-subtitle {
    width: 100%;
    color: var(--dv-fg-3);
    margin-top: -.5rem;
}

/* KPI tiles */
.dv-kpi {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.dv-kpi-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--dv-radius-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--dv-brand-subtle);
    color: var(--dv-brand-fg);
}

.dv-kpi-icon.success { background: var(--dv-success-subtle); color: var(--dv-success); }
.dv-kpi-icon.warning { background: var(--dv-warning-subtle); color: var(--dv-warning); }
.dv-kpi-icon.danger { background: var(--dv-danger-subtle); color: var(--dv-danger); }

.dv-kpi-value {
    font-family: var(--dv-font-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
}

.dv-kpi-label {
    color: var(--dv-fg-3);
    font-size: .8125rem;
}

/* ------------------------------------------------------------------ ribbon (Office command surface) */
.dv-ribbon {
    background: var(--dv-surface);
    border-bottom: 1px solid var(--dv-stroke-2);
    box-shadow: var(--dv-shadow-2);
    position: relative;
    z-index: 10;
}

.dv-ribbon-tabs {
    display: flex;
    align-items: flex-end;
    gap: .25rem;
    padding: 0 .75rem;
    height: 2.25rem;
}

.dv-ribbon-tab {
    border: 0;
    background: none;
    padding: .375rem .75rem .5rem;
    font-size: .875rem;
    color: var(--dv-fg-2);
    border-radius: var(--dv-radius-m) var(--dv-radius-m) 0 0;
    position: relative;
}

.dv-ribbon-tab:hover {
    background: var(--dv-hover);
    color: var(--dv-fg-1);
}

.dv-ribbon-tab.active {
    font-weight: 600;
    color: var(--dv-fg-1);
}

.dv-ribbon-tab.active::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--dv-brand);
}

.dv-ribbon-tabs .dv-ribbon-status {
    margin-left: auto;
    align-self: center;
    font-size: .8125rem;
    color: var(--dv-fg-3);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dv-ribbon-body {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: .375rem .5rem .25rem;
    margin: 0 .5rem .5rem;
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-stroke-3);
    border-radius: var(--dv-radius-xl);
    overflow-x: auto;
    min-height: 6.25rem;
}

.dv-ribbon-group {
    display: flex;
    flex-direction: column;
    padding: 0 .5rem;
    border-right: 1px solid var(--dv-stroke-2);
    flex: 0 0 auto;
}

.dv-ribbon-group:last-child {
    border-right: 0;
}

.dv-ribbon-group.end {
    margin-left: auto;
    border-left: 1px solid var(--dv-stroke-2);
    border-right: 0;
}

.dv-ribbon-cmds {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    gap: .125rem;
}

.dv-ribbon-stack {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    justify-content: flex-start;
}

.dv-ribbon-label {
    text-align: center;
    font-size: .75rem;
    color: var(--dv-fg-3);
    padding-top: .125rem;
    white-space: nowrap;
}

/* Large ribbon button: icon over label. */
.dv-rbtn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .125rem;
    min-width: 3.75rem;
    max-width: 5.5rem;
    padding: .375rem .375rem .25rem;
    border: 1px solid transparent;
    border-radius: var(--dv-radius-m);
    background: transparent;
    color: var(--dv-fg-1);
    font-size: .8125rem;
    line-height: 1.15;
    text-align: center;
}

.dv-rbtn .bi {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: .125rem;
    color: var(--dv-brand-fg);
}

.dv-rbtn.success .bi { color: var(--dv-success); }
.dv-rbtn.danger .bi { color: var(--dv-danger); }
.dv-rbtn.warning .bi { color: var(--dv-warning); }

.dv-rbtn:hover:not(:disabled),
.dv-rbtn-sm:hover:not(:disabled) {
    background: var(--dv-hover);
    border-color: var(--dv-stroke-2);
}

.dv-rbtn:active:not(:disabled),
.dv-rbtn-sm:active:not(:disabled),
.dv-rbtn.pressed,
.dv-rbtn-sm.pressed {
    background: var(--dv-selected);
    border-color: var(--dv-stroke-1);
}

.dv-rbtn:disabled,
.dv-rbtn-sm:disabled {
    color: var(--dv-fg-4);
    opacity: .55;
}

.dv-rbtn:focus-visible,
.dv-rbtn-sm:focus-visible {
    outline: 2px solid var(--dv-fg-1);
    outline-offset: 1px;
}

/* Primary action in the ribbon (e.g. Scan, Release). */
.dv-rbtn.primary {
    background: var(--dv-brand);
    border-color: var(--dv-brand);
    color: #fff;
}

.dv-rbtn.primary .bi {
    color: #fff;
}

.dv-rbtn.primary:hover:not(:disabled) {
    background: var(--dv-brand-hover);
    border-color: var(--dv-brand-hover);
}

.dv-rbtn.primary.success {
    background: var(--dv-success);
    border-color: var(--dv-success);
}

.dv-rbtn.primary.success:hover:not(:disabled) {
    background: #0e700e;
}

.dv-rbtn.primary.danger {
    background: var(--dv-danger);
    border-color: var(--dv-danger);
}

.dv-rbtn.primary.danger .bi { color: inherit; }

.dv-rbtn.primary:disabled {
    background: var(--dv-surface-3);
    border-color: var(--dv-stroke-2);
    color: var(--dv-fg-4);
}

.dv-rbtn.primary:disabled .bi {
    color: var(--dv-fg-4);
}

/* Small ribbon button: icon beside label, stacked in columns of three. */
.dv-rbtn-sm {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 1.75rem;
    padding: 0 .5rem;
    border: 1px solid transparent;
    border-radius: var(--dv-radius-m);
    background: transparent;
    color: var(--dv-fg-1);
    font-size: .8125rem;
    white-space: nowrap;
}

.dv-rbtn-sm .bi {
    font-size: 1rem;
    color: var(--dv-brand-fg);
}

.dv-rbtn-sm.danger .bi {
    color: var(--dv-danger);
}

.dv-rbtn-split {
    display: inline-flex;
    flex-direction: column;
    border-radius: var(--dv-radius-m);
}

.dv-rbtn-split > .dv-rbtn {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dv-rbtn-split > .dv-rbtn-caret {
    border: 1px solid transparent;
    border-top: 0;
    background: transparent;
    border-radius: 0 0 var(--dv-radius-m) var(--dv-radius-m);
    font-size: .75rem;
    padding: 0 .25rem .125rem;
    color: var(--dv-fg-2);
}

.dv-rbtn-split > .dv-rbtn.primary + .dv-rbtn-caret {
    background: var(--dv-brand-pressed);
    color: #fff;
}

.dv-rbtn-split > .dv-rbtn.primary:disabled + .dv-rbtn-caret {
    background: var(--dv-surface-3);
    color: var(--dv-fg-4);
}

.dv-ribbon .form-select-sm,
.dv-ribbon .form-control-sm {
    min-width: 12rem;
}

/* ------------------------------------------------------------------ sign-in */
.dv-signin {
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(22rem, 30rem);
    background: var(--dv-canvas);
}

.dv-signin-hero {
    background: linear-gradient(135deg, #0f548c 0%, #0f6cbd 55%, #2886de 100%);
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.dv-signin-hero h1 {
    color: #fff;
    font-size: 2.25rem;
    max-width: 30rem;
}

.dv-signin-hero p {
    color: rgba(255, 255, 255, .85);
    max-width: 30rem;
    font-size: 1rem;
}

.dv-signin-hero .dv-hero-art {
    position: absolute;
    right: -3rem;
    bottom: -4rem;
    width: 20rem;
    opacity: .09;
}

.dv-signin-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    background: var(--dv-surface);
    box-shadow: var(--dv-shadow-16);
}

@media (max-width: 900px) {
    .dv-signin {
        grid-template-columns: 1fr;
    }

    .dv-signin-hero {
        display: none;
    }
}

/* ------------------------------------------------------------------ Quick Access Toolbar and collapsible ribbon */
.dv-qat {
    display: flex;
    align-items: center;
    gap: 2px;
    align-self: center;
    padding: 2px 4px;
    margin-right: .5rem;
    border-radius: var(--dv-radius-l);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-stroke-3);
}

.dv-qat-sep {
    width: 1px;
    height: 1.25rem;
    margin: 0 3px;
    background: var(--dv-stroke-2);
}

.dv-qbtn {
    width: 30px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--dv-radius-m);
    background: transparent;
    color: var(--dv-brand-fg);
    font-size: 1rem;
    padding: 0;
}

.dv-qbtn.success { color: var(--dv-success); }
.dv-qbtn.danger { color: var(--dv-danger); }
.dv-qbtn.warning { color: var(--dv-warning); }

.dv-qbtn:hover:not(:disabled) {
    background: var(--dv-hover);
    border-color: var(--dv-stroke-2);
}

.dv-qbtn:active:not(:disabled) {
    background: var(--dv-pressed);
}

.dv-qbtn:disabled {
    color: var(--dv-fg-4);
    opacity: .45;
}

.dv-qbtn:focus-visible,
.dv-ribbon-pin:focus-visible {
    outline: 2px solid var(--dv-fg-1);
    outline-offset: 1px;
}

.dv-ribbon-pin {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--dv-radius-m);
    background: transparent;
    color: var(--dv-fg-2);
    padding: 0;
}

.dv-ribbon-pin:hover {
    background: var(--dv-hover);
    border-color: var(--dv-stroke-2);
}

.dv-ribbon-tabs {
    height: 2.5rem;
}

/* Collapsed: only the tab row (with the Quick Access Toolbar) takes space; a clicked tab opens over the page. */
.dv-ribbon.collapsed .dv-ribbon-tabs {
    padding-bottom: .25rem;
}

.dv-ribbon.collapsed .dv-ribbon-body {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0 .5rem;
    background: var(--dv-surface);
    border-color: var(--dv-stroke-2);
    box-shadow: var(--dv-shadow-28);
    z-index: 1045;
    animation: dv-ribbon-drop .12s ease-out;
}

@keyframes dv-ribbon-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dv-ribbon.collapsed .dv-ribbon-body { animation: none; }
}

/* Workflow editor (ARC-04) */
.dv-workflow-editor .dv-step-off label { opacity: .6; }
.dv-workflow-editor .dv-step-settings { padding-left: 4.25rem; background: var(--dv-surface-2, transparent); }

/* Pages that failed quality check, on the Scan screen */
.dv-scan-thumb { position: relative; }
.dv-scan-thumb.rescan { outline: 2px solid var(--dv-danger); outline-offset: -2px; }
.dv-rescan-flag {
    position: absolute; top: .25rem; left: .25rem; right: .25rem;
    background: var(--dv-danger); color: #fff; border-radius: 4px;
    font-size: .7rem; padding: .1rem .35rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Finder designer */
.dv-finders {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr) 6px var(--dv-finders-panel, 28rem);
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
}
.dv-finders-list { overflow-y: auto; background: var(--dv-surface-2); grid-row: 1 / span 2; }
.dv-finder-item { border-radius: 6px; }
.dv-finder-item.active { background: var(--dv-surface); box-shadow: inset 3px 0 0 var(--dv-brand); }
.dv-finder-item.drop-before { box-shadow: inset 0 2px 0 var(--dv-brand); }
.dv-finder-btn {
    display: flex; align-items: center; gap: .4rem; width: 100%;
    border: 0; background: transparent; color: inherit; padding: .35rem .5rem; text-align: left; cursor: grab;
}
.dv-finder-btn:hover { background: var(--dv-surface-3); border-radius: 6px; }
.dv-mark { fill: rgba(16, 124, 16, .08); stroke: #107c10; stroke-width: 2; vector-effect: non-scaling-stroke; }
.dv-mark.active { fill: rgba(15, 108, 189, .12); stroke: var(--dv-brand, #0f6cbd); stroke-width: 3; }
.dv-mark-label { font-family: 'Segoe UI', sans-serif; font-weight: 600; fill: #107c10; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.dv-mark-label.active { fill: var(--dv-brand, #0f6cbd); }
/* Zones being designed: search areas, text zones, tick boxes and registration boxes (ADM-52, ADM-57). */
.dv-design rect { cursor: pointer; vector-effect: non-scaling-stroke; }
.dv-design-area { fill: rgba(255, 185, 0, .08); stroke: #c19c00; stroke-width: 2; stroke-dasharray: 8 4; }
.dv-design-zone { fill: rgba(0, 120, 212, .06); stroke: #0078d4; stroke-width: 1.5; }
.dv-design-box { fill: rgba(136, 23, 152, .08); stroke: #881798; stroke-width: 1.5; }
.dv-design-register { fill: none; stroke: #6b6b6b; stroke-width: 1.5; stroke-dasharray: 3 3; }
.dv-design rect.active { stroke: #d13438; stroke-width: 3; fill: rgba(209, 52, 56, .08); }
.dv-design-label { font-family: 'Segoe UI', sans-serif; font-weight: 600; fill: #0078d4; paint-order: stroke; stroke: #fff; stroke-width: 4px; pointer-events: none; }
.dv-design-label.active { fill: #d13438; }
.dv-ordered { list-style: none; padding: 0; margin: 0; }
.dv-ordered li { display: flex; align-items: center; gap: .25rem; padding: .125rem .25rem; border: 1px solid var(--bs-border-color); border-radius: .25rem; margin-bottom: .25rem; background: var(--bs-body-bg); }
.dv-ordered li .dv-ordered-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-subfields { max-height: 16rem; overflow-y: auto; }
.dv-subfields tr.active td { background: rgba(15, 108, 189, .12); }
@media (max-width: 1100px) {
    .dv-finders { grid-template-columns: 1fr; grid-template-rows: auto 60vh auto auto; height: auto; }
    .dv-finders-list { grid-row: auto; }
    .dv-finders > .dv-sample-panel { grid-column: auto; grid-row: 3; }
}

/* Drag-and-drop reordering of admin lists */
[data-dv-grip] { cursor: grab; color: var(--dv-fg-3, #707070); }
[data-dv-grip]:active { cursor: grabbing; }
.dv-dragging { opacity: .45; }
.dv-drop-before { box-shadow: 0 -3px 0 var(--dv-brand, #0f6cbd) !important; }
.dv-drop-after { box-shadow: 0 3px 0 var(--dv-brand, #0f6cbd) !important; }
tr.dv-drop-before > td { box-shadow: inset 0 3px 0 var(--dv-brand, #0f6cbd); }
tr.dv-drop-after > td { box-shadow: inset 0 -3px 0 var(--dv-brand, #0f6cbd); }

/* Files dragged onto the Scan screen */
.dv-file-drop {
    position: absolute; inset: .5rem; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
    border: 2px dashed var(--dv-brand, #0f6cbd); border-radius: 8px;
    background: color-mix(in srgb, var(--dv-surface, #fff) 85%, transparent);
    color: var(--dv-brand, #0f6cbd); pointer-events: none;
}

/* Index screen drag and drop */
.dv-tree-doc.dv-drop-target { outline: 2px dashed var(--dv-brand, #0f6cbd); outline-offset: -2px; }
.dv-thumb.dv-drop-before-thumb { box-shadow: -4px 0 0 var(--dv-brand, #0f6cbd); }
.dv-tree-doc-header[draggable="true"] { cursor: grab; }

/* Finder test over several samples */
.dv-many { max-height: 60vh; }
.dv-many thead th { position: sticky; top: 0; background: var(--dv-surface, #fff); z-index: 1; }
.dv-many td.dv-hit { background: color-mix(in srgb, #107c10 10%, transparent); }
.dv-many td.dv-miss { background: color-mix(in srgb, #c50f1f 8%, transparent); color: #c50f1f; }
.dv-many-row { cursor: pointer; }
.dv-many-row:hover td { filter: brightness(.96); }
.dv-sample-picks { max-height: 9rem; overflow-y: auto; }

/* Script editor (Monaco) */
.dv-code { border: 1px solid var(--bs-border-color); border-radius: .375rem; overflow: hidden; resize: vertical; min-height: 120px; background: var(--bs-body-bg); }
.dv-code .monaco-editor { --vscode-editor-background: var(--bs-body-bg); }

/* ------------------------------------------------------------------ editor panels (UIX-02) */
/* A list page's New/Edit form slides in from the right; the list keeps the full width. */
.dv-editor-panel {
    --bs-offcanvas-width: min(34rem, 100vw);
    box-shadow: var(--dv-shadow-28);
}

.dv-editor-panel > form.card {
    border: 0;
    border-radius: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dv-editor-panel > form.card > .card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
}

.dv-editor-panel > form.card > .card-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

.dv-editor-panel > form.card > .card-footer {
    padding: .75rem 1.25rem;
    background: var(--dv-surface-2);
}

/* Dialogs */
.dv-dialog .dv-dialog-message {
    white-space: pre-line;
}

/* Batch Manager properties panel (MGR-02) */
.dv-batch-panel {
    --bs-offcanvas-width: min(42rem, 100vw);
    box-shadow: var(--dv-shadow-28);
}

.dv-batch-row {
    cursor: pointer;
}

.dv-batch-row:focus-visible {
    outline: 2px solid var(--dv-brand);
    outline-offset: -2px;
}

/* Field editor with the sample preview beside the form (ADM-57). */
.dv-field-layout { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.dv-field-layout > form { flex: 1 1 36rem; }
.dv-field-preview { flex: 1 1 28rem; position: sticky; top: 4.5rem; max-width: 52rem; }
.dv-field-preview-viewer { height: min(70vh, 48rem); position: relative; }

/* Menu groups (Batch Settings) */
.dv-nav-group-toggle { background: none; border: 0; display: flex; align-items: center; gap: .5rem; }
.dv-nav-group-toggle .dv-nav-chevron { margin-left: auto; font-size: .75rem; transition: transform .15s ease; }
.dv-nav-group-toggle.dv-open .dv-nav-chevron { transform: rotate(180deg); }
.dv-nav-sub { padding-left: .85rem; }
.dv-nav-collapsed .dv-sidenav:not(:hover):not(:focus-within) .dv-nav-sub { padding-left: 0; }

/* Splitters and the tabbed finder panel (UIX-02) */
.dv-finders-splitter, .dv-zones-splitter { cursor: col-resize; background: var(--bs-border-color-translucent); touch-action: none; }
.dv-finders-splitter:hover, .dv-finders-splitter:focus, .dv-zones-splitter:hover, .dv-zones-splitter:focus { background: var(--bs-primary); outline: none; }
body.dv-resizing { cursor: col-resize; user-select: none; }
.dv-finder-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dv-finder-panel-head { flex: 0 0 auto; background: var(--dv-surface, var(--bs-body-bg)); }
.dv-finder-panel-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.dv-finder-panel .nav-tabs .nav-link { padding: .35rem .6rem; }
.dv-subfields { max-height: 22rem; }
.dv-design-candidate { fill: rgba(0, 0, 0, .02); stroke: #8a8886; stroke-width: 1.5; stroke-dasharray: 6 4; }
.dv-design-candidate:hover { fill: rgba(255, 185, 0, .15); stroke: #c19c00; }

/* Finder designer: sections of the Finder tab that open and close, switched-off finders, warnings. */
.dv-add-menu { max-height: 70vh; overflow-y: auto; }
.dv-finder-item.dv-off .dv-finder-btn { opacity: .55; }
.dv-clickable { cursor: pointer; }
.dv-clickable:hover { background: var(--dv-surface-3, rgba(0, 0, 0, .04)); }
.dv-order { padding-left: 1.2rem; }
.dv-order-node { background: var(--dv-surface-2, var(--bs-tertiary-bg)); }
.dv-pattern-grid td { padding: .15rem .2rem; }
.dv-contents { display: contents; }
.dv-section { border: 1px solid var(--bs-border-color); border-radius: 6px; background: var(--dv-surface, var(--bs-body-bg)); }
.dv-section > summary { padding: .4rem .65rem; font-size: .8rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; gap: .35rem; }
.dv-section > summary::-webkit-details-marker { display: none; }
.dv-section > summary::before { content: "\F285"; font-family: bootstrap-icons; font-size: .7rem; transition: transform .15s; }
.dv-section[open] > summary::before { transform: rotate(90deg); }
.dv-section > summary:hover { background: var(--dv-surface-2, var(--bs-tertiary-bg)); border-radius: 6px; }
.dv-section-body { padding: .25rem .65rem .6rem; border-top: 1px solid var(--bs-border-color-translucent); }
.dv-warnings summary { cursor: pointer; }
.dv-guide { border-color: var(--bs-warning-border-subtle, #ffe69c); }
.dv-guide-example { background: var(--dv-surface-2, var(--bs-tertiary-bg)); }
.dv-getting-started ol li::marker { font-weight: 600; color: var(--dv-brand, var(--bs-primary)); }

/* Settings forms: related settings share a box, short ones sit side by side, help sits behind an info icon. */
.dv-settings-group { border: 1px solid var(--bs-border-color-translucent); border-radius: 6px; padding: .35rem .5rem .5rem; background: var(--dv-surface-2, var(--bs-tertiary-bg)); }
.dv-settings-group-title { font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color); margin-bottom: .25rem; display: flex; align-items: center; gap: .35rem; }
.dv-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: .5rem; }
.dv-settings-grid .dv-span-2 { grid-column: span 2; }
.dv-settings-form .form-label { display: flex; align-items: baseline; gap: .25rem; }
.dv-help-icon { color: var(--bs-secondary-color); cursor: help; font-size: .75rem; font-weight: normal; }
.dv-help-icon:hover, .dv-help-icon:focus { color: var(--dv-brand, var(--bs-primary)); outline: none; }

/* "Please wait" while a batch action runs (UIX-04): the page is dimmed and locked until the action has finished. */
.dv-busy-overlay {
    position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
    background: rgba(17, 24, 39, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s linear .18s; cursor: progress;
}
.dv-busy-overlay.show { opacity: 1; visibility: visible; transition: opacity .18s ease; }
.dv-busy-card {
    min-width: 20rem; max-width: 90vw; padding: 1.75rem 2rem 1.4rem; border-radius: 14px; text-align: center;
    background: var(--dv-surface, var(--bs-body-bg)); color: var(--bs-body-color);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28); transform: translateY(6px) scale(.98); transition: transform .2s ease;
}
.dv-busy-overlay.show .dv-busy-card { transform: none; }
.dv-busy-ring {
    width: 3.25rem; height: 3.25rem; margin: 0 auto .9rem; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 25%, var(--dv-brand, var(--bs-primary)) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: dv-busy-spin .9s linear infinite;
}
.dv-busy-title { font-size: 1.1rem; font-weight: 600; margin-bottom: .25rem; }
.dv-busy-step { font-size: .9rem; color: var(--bs-secondary-color); min-height: 1.35rem; }
.dv-busy-bar { position: relative; height: 4px; margin: 1rem 0 .8rem; border-radius: 4px; overflow: hidden; background: var(--bs-border-color-translucent, rgba(0, 0, 0, .1)); }
.dv-busy-bar span { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 4px; background: var(--dv-brand, var(--bs-primary)); animation: dv-busy-slide 1.3s ease-in-out infinite; }
.dv-busy-note { font-size: .75rem; color: var(--bs-secondary-color); }
body.dv-busy-active { overflow: hidden; }
@keyframes dv-busy-spin { to { transform: rotate(360deg); } }
@keyframes dv-busy-slide { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .dv-busy-ring, .dv-busy-bar span { animation-duration: 3s; }
}

/* Finders: samples & testing panel under the page viewer (resizable from its top edge, files can be dropped on it) */
.dv-viewer-title { max-width: 22rem; min-width: 3rem; flex: 0 1 auto; }
.dv-viewer-toolbar > * { flex-shrink: 0; }
.dv-viewer-toolbar > .dv-viewer-title { flex-shrink: 1; }
.dv-finders > .dv-sample-panel { grid-column: 2 / -1; grid-row: 2; }
.dv-sample-panel {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 41px;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .06);
}
.dv-sample-panel-resize {
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 8px;
    cursor: row-resize;
    z-index: 3;
    touch-action: none;
}
.dv-sample-panel-resize::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 2px;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--bs-border-color);
}
.dv-sample-panel-resize:hover, .dv-sample-panel-resize:focus-visible {
    background: var(--bs-primary-border-subtle);
    outline: none;
}
.dv-sample-panel-head {
    flex: 0 0 40px;
    min-height: 40px;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-tertiary-bg);
    overflow-x: auto;
    overflow-y: hidden;
}
.dv-sample-tabs { flex-wrap: nowrap; align-self: stretch; }
.dv-sample-tabs .nav-link {
    height: 100%;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: 0 .75rem;
    border-bottom: 2px solid transparent;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
.dv-sample-tabs .nav-link:hover { color: var(--bs-body-color); }
.dv-sample-tabs .nav-link.active {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
    font-weight: 600;
}
.dv-sample-scope { width: auto; max-width: 16rem; }
.dv-sample-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
.dv-sample-bar {
    position: sticky;
    left: 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.dv-sample-rate { width: 6rem; height: .45rem; }
.dv-sample-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bs-body-bg);
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
    font-weight: 600;
    white-space: nowrap;
}
.dv-sample-table tfoot td, .dv-sample-table tfoot th {
    position: sticky;
    bottom: 0;
    background: var(--bs-tertiary-bg);
    box-shadow: inset 0 1px 0 var(--bs-border-color);
    font-weight: 600;
    white-space: nowrap;
}
.dv-sample-table td { vertical-align: middle; }
.dv-sample-table tbody tr { cursor: pointer; }
.dv-sample-table .dv-sample-check { width: 2rem; padding-left: .6rem; }
.dv-sample-table .dv-sample-remove { width: 2rem; padding-right: .6rem; }
.dv-sample-table .dv-sample-name { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-sample-table .dv-sample-value { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-sample-table td.dv-miss { color: var(--bs-danger-text-emphasis); }
.dv-sample-table tr.dv-sample-current > td { background: var(--bs-primary-bg-subtle); }
.dv-sample-table tr.dv-sample-current > td:first-child { box-shadow: inset 3px 0 0 var(--bs-primary); }
.dv-upload-row td { background: var(--bs-secondary-bg); }
.dv-sample-drop {
    margin: .75rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: .5rem;
}
.dv-sample-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 2px dashed var(--bs-primary);
    border-radius: .25rem;
    background: rgba(var(--bs-primary-rgb), .12);
    color: var(--bs-primary);
    font-weight: 600;
    pointer-events: none;
}
.dv-sample-panel.dv-drop-active { min-height: 140px; }

/* Copy button on messages (toasts, error and warning alerts, notifications): small, inline, in the message's colour */
.dv-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-left: .35rem;
    padding: 0 .2rem;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: inherit;
    font-size: .85em;
    line-height: 1.2;
    opacity: .55;
    vertical-align: baseline;
    cursor: pointer;
}
.dv-copy:hover, .dv-copy:focus-visible { opacity: 1; background: rgba(127, 127, 127, .18); outline: none; }
.dv-copy.done { opacity: 1; }
.toast .dv-copy { align-self: center; margin-left: 0; }
.alert.d-flex > .dv-copy { margin-left: auto; align-self: flex-start; margin-top: .1rem; }

/* Preparation station (PRF-02): a large timer, the box framed by its state */
.dv-prep-box { border-width: 2px; }
.dv-prep-box.dv-prep-working { border-color: var(--bs-success); }
.dv-prep-box.dv-prep-paused { border-color: var(--bs-warning); }
.dv-prep-clock { font-size: clamp(2.75rem, 7vw, 4.5rem); font-weight: 600; line-height: 1.1; letter-spacing: .02em; }
.dv-prep-working .dv-prep-clock { color: var(--bs-success-text-emphasis); }
.dv-prep-paused .dv-prep-clock { color: var(--bs-warning-text-emphasis); opacity: .8; }
.dv-prep-actions .btn-lg, .dv-prep-finish .btn-lg { min-height: 3.5rem; }
.dv-prep-scan .form-control { font-size: 1.35rem; }
.dv-prep-facts dt { font-weight: 600; }
.dv-prep-facts dd { margin-bottom: .35rem; }
.dv-prep-reason { min-height: 4.5rem; font-size: 1.15rem; white-space: normal; }
/* Earlier preparation (PRF-17): one tile per average */
.dv-prep-average { display: flex; flex-direction: column; padding: .35rem .75rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-tertiary-bg); min-width: 9rem; }
.dv-prep-average strong { font-size: 1.15rem; }
.dv-prep-average span { font-size: .8rem; color: var(--bs-secondary-color); }

/* Charts (RPT-07, RPT-08): Apache ECharts in cards */
.dv-chart { width: 100%; height: 16rem; }
.dv-chart-lg { height: 20rem; }
.dv-chart-sm { height: 11rem; }
.dv-chart-gauge { height: 12rem; }
.dv-spark { width: 100%; height: 2.6rem; margin-top: .5rem; }
.dv-kpi-card { border: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08); transition: transform .15s ease, box-shadow .15s ease; }
.dv-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 24, 40, .12); }
.dv-kpis .dv-kpi-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }

/* Productivity (RPT-08): period cards, rank and drill-down panels */
.dv-period-card { transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.dv-period-card.active { border-color: var(--bs-primary); box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .18); }
.dv-period-figures > div { border-left: 1px solid var(--bs-border-color-translucent); }
.dv-period-figures > div:first-child { border-left: 0; }
.dv-rank { font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--bs-primary); }
.dv-drill-stack { margin-top: -.25rem; }
.dv-drill-panel { border-left: 3px solid var(--bs-primary); animation: dv-drill-in .25s ease-out; }
.dv-drill-stack > div + div .dv-drill-panel { margin-left: 1.25rem; }
.dv-drill-table { max-height: 18rem; overflow-y: auto; }
@keyframes dv-drill-in { from { opacity: 0; transform: translateY(-.35rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dv-drill-panel { animation: none; } }

/* Users & roles (ADM-81): avatars, role colours, status, permission matrix */
.dv-user-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: .8rem; letter-spacing: .02em; box-shadow: 0 0 0 2px var(--bs-body-bg), 0 1px 3px rgba(0,0,0,.15); }
.dv-user-disabled .dv-user-avatar { filter: grayscale(1); opacity: .55; }
.dv-user-disabled td:first-child .fw-semibold { color: var(--bs-secondary-color); }
.dv-users-table tbody tr { transition: background-color .12s ease; }
.dv-role-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .55rem; margin: .1rem .15rem .1rem 0; border-radius: 999px; font-size: .78rem; font-weight: 500;
    color: var(--dv-role); background: color-mix(in srgb, var(--dv-role) 12%, transparent); border: 1px solid color-mix(in srgb, var(--dv-role) 30%, transparent); }
.dv-status-dot { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; }
.dv-status-dot::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--bs-secondary-color); }
.dv-status-dot.success::before { background: var(--bs-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-success) 20%, transparent); }
.dv-status-dot.muted { color: var(--bs-secondary-color); }
.dv-users-tabs .nav-link { display: inline-flex; align-items: center; gap: .35rem; }
.dv-role-card { border-top: 3px solid var(--dv-role); transition: transform .15s ease, box-shadow .15s ease; }
.dv-role-card:hover { transform: translateY(-2px); box-shadow: 0 .4rem 1rem rgba(0,0,0,.08); }
.dv-role-icon { width: 2.25rem; height: 2.25rem; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
    color: var(--dv-role); background: color-mix(in srgb, var(--dv-role) 14%, transparent); }
.dv-matrix { max-height: 70vh; }
.dv-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg); box-shadow: inset 0 -1px 0 var(--bs-border-color); }
.dv-matrix-role { color: var(--dv-role); min-width: 7.5rem; white-space: nowrap; }
.dv-matrix-group th { background: var(--bs-tertiary-bg) !important; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.dv-matrix .form-check-input { width: 1.15rem; height: 1.15rem; cursor: pointer; }
.dv-role-toggle { color: var(--dv-role); border: 1px solid color-mix(in srgb, var(--dv-role) 40%, transparent); border-radius: 999px; }
.btn-check:checked + .dv-role-toggle { color: #fff; background: var(--dv-role); border-color: var(--dv-role); }
.dv-user-panel { width: min(30rem, 100vw) !important; }

/* Dashboard chart tiles and live charts (RPT-07) */
.dv-chart-tile { border-top: 3px solid var(--dv-tile); }
.dv-tile-icon { width: 1.9rem; height: 1.9rem; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; color: var(--dv-tile); background: color-mix(in srgb, var(--dv-tile) 14%, transparent); }
.dv-tile-value { font-size: 1.35rem; font-weight: 700; color: var(--bs-body-color); }
.dv-spark-lg { height: 4.5rem; margin: .35rem -.25rem .2rem; }
.dv-hero-card .card-header { background: linear-gradient(90deg, color-mix(in srgb, var(--bs-primary) 8%, transparent), transparent); }

/* AI connections (AIF-01) */
.dv-ai-card { border-top: 3px solid var(--dv-ai); }
.dv-ai-logo { width: 2.4rem; height: 2.4rem; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: none;
    color: var(--dv-ai); background: color-mix(in srgb, var(--dv-ai) 14%, transparent); }
.dv-ai-card .form-switch .form-check-input:checked { background-color: var(--dv-ai); border-color: var(--dv-ai); }
.badge.dv-secret-saved { background: color-mix(in srgb, var(--bs-success) 15%, transparent); color: var(--bs-success); font-weight: 500; }
.badge.dv-secret-missing { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); font-weight: 500; }

/* Receiving a delivery (BKG-17): large totals, the scan box flashes green or red */
.dv-intake-stat { display: flex; flex-direction: column; padding: .75rem 1rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-body-bg); }
.dv-intake-stat span { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--bs-primary-text-emphasis); }
.dv-intake-stat small { color: var(--bs-secondary-color); }
.dv-intake-scan .form-control { font-size: 1.35rem; }
.dv-intake-scan.dv-flash-ok .form-control { box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .45); }
.dv-intake-scan.dv-flash-bad .form-control { box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .45); }
.dv-intake-new td { background: var(--bs-success-bg-subtle); }

/* System settings (ADM-84): a card per section, changed settings marked, a save bar that stays in view */
.dv-settings-group-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .6rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-size: 1.1rem; flex: none; }
.dv-setting { padding-top: .85rem; padding-bottom: .85rem; }
.dv-setting.dv-setting-changed { background: var(--bs-warning-bg-subtle); }
.dv-settings-link:hover { border-color: var(--bs-primary); }
.dv-settings-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; margin-top: 1rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-body-bg); box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .06); }
.dv-settings-savebar.dv-dirty { border-color: var(--bs-warning); }
.dv-settings-group-icon-lg { width: 3rem; height: 3rem; font-size: 1.45rem; border-radius: .75rem; }

/* Bookings (BKG-17, BKG-18): receiving a delivery at the top of the page, box and batch header sheets beside the scan list */
.dv-receive-hero { border: 0; border-top: 4px solid var(--bs-primary); background: linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 9%, var(--bs-body-bg)), var(--bs-body-bg) 60%); box-shadow: 0 .25rem 1.25rem rgba(0, 0, 0, .06); }
.dv-receive-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: .9rem; background: var(--bs-primary); color: #fff; font-size: 1.6rem; flex: none; }
.dv-booking-today .dv-intake-stat { justify-content: center; }
.dv-sheets-card { border-top: 4px solid var(--bs-success); }
.dv-sheet-choice { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; }
.dv-sheet-choice + .dv-sheet-choice { margin-top: .6rem; }
.dv-sheet-choice-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .6rem; background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); font-size: 1.2rem; flex: none; }

/* Import connections (ICN-01..ICN-06): a card per kind of connection */
.dv-connection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .75rem; }
.dv-connection { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-body-bg); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.dv-connection:hover { border-color: var(--bs-primary); box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .07); color: inherit; }
.dv-connection-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .6rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-size: 1.2rem; flex: none; }
.dv-connection-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Booking Settings (BKG-01, BKG-02, DTY-01): lists of cards with an avatar, and an editor card with sections */
.dv-client-list { display: flex; flex-direction: column; gap: .5rem; }
.dv-client-card { display: flex; align-items: center; gap: .85rem; padding: .75rem .9rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-body-bg); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.dv-client-card:hover { border-color: var(--bs-primary); box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .06); color: inherit; }
.dv-client-card.active { border-color: var(--bs-primary); box-shadow: inset 4px 0 0 var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.dv-client-card.dv-inactive { opacity: .65; }
.dv-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: none; font-weight: 700; font-size: .95rem;
    color: hsl(var(--dv-hue, 210) 60% 30%); background: hsl(var(--dv-hue, 210) 70% 90%); }
[data-bs-theme="dark"] .dv-avatar { color: hsl(var(--dv-hue, 210) 70% 85%); background: hsl(var(--dv-hue, 210) 40% 25%); }
.dv-avatar-icon { border-radius: .7rem; font-size: 1.2rem; }
.dv-avatar-icon:not([class*="text-bg-"]) { color: var(--bs-primary-text-emphasis); background: var(--bs-primary-bg-subtle); }
.badge.dv-chip { background: var(--bs-tertiary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); font-weight: 500; }
.dv-editor-card { border-top: 4px solid var(--bs-primary); box-shadow: 0 .25rem 1.25rem rgba(0, 0, 0, .05); }
.dv-form-section { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; margin: .25rem 0 .6rem; padding-bottom: .35rem; border-bottom: 1px solid var(--bs-border-color); }
.dv-form-section .bi { color: var(--bs-primary); }
.dv-setup-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .4rem; max-height: 16rem; overflow: auto; }
.dv-setup-pick { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; }
.dv-swatch { width: 1.6rem; height: 1.6rem; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.btn-check:checked + .dv-swatch { border-color: var(--bs-body-color); box-shadow: 0 0 0 2px var(--bs-body-bg) inset; }
.dv-choice { cursor: pointer; }
.dv-choice.active { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }

/* Returns (RET-10): status tabs with counts, urgent and overdue marks */
.dv-return-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.dv-return-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border: 1px solid var(--bs-border-color); border-radius: 2rem; background: var(--bs-body-bg); color: inherit; text-decoration: none; font-size: .9rem; }
.dv-return-tab:hover { border-color: var(--bs-primary); color: inherit; }
.dv-return-tab.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.dv-return-tab .badge { font-weight: 600; }
.dv-overdue td:first-child { box-shadow: inset 4px 0 0 var(--bs-danger); }
.dv-return-steps { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.dv-return-steps li { display: flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 2rem; font-size: .82rem; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.dv-return-steps li.done { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.dv-return-steps li.now { background: var(--bs-primary); color: #fff; font-weight: 600; }
.dv-virtual-thumb { width: 2.6rem; height: 3.4rem; object-fit: cover; border: 1px solid var(--bs-border-color); border-radius: .3rem; background: #fff; flex: none; }
.dv-virtual-preview { max-width: 100%; max-height: 22rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: #fff; }