/* Application shell (UIX-02): top bar, left module navigation, main content. */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1100;
    padding: .5rem 1rem;
    background: var(--bs-body-bg);
}

.dv-topbar {
    flex: 0 0 auto;
    gap: 1rem;
}

.dv-batch-context {
    flex: 1 1 auto;
    min-width: 0;
}

.dv-shell {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* Side menu: full width, or an icon rail that opens over the page on hover/focus (UIX-02). */
.dv-nav-rail {
    flex: 0 0 14rem;
    position: relative;
    transition: flex-basis .15s ease;
}

.dv-sidenav {
    position: absolute;
    inset: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1030;
    transition: width .15s ease, box-shadow .15s ease;
}

.dv-sidenav .nav-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.dv-nav-collapsed .dv-nav-rail {
    flex-basis: 3.5rem;
}

.dv-nav-collapsed .dv-sidenav:not(:hover):not(:focus-within) .dv-nav-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.dv-nav-collapsed .dv-sidenav:not(:hover):not(:focus-within) .dv-nav-heading {
    visibility: hidden;
    height: .5rem;
    padding: 0;
}

.dv-nav-collapsed .dv-sidenav:hover,
.dv-nav-collapsed .dv-sidenav:focus-within {
    width: 14rem;
    box-shadow: .25rem 0 1rem rgba(0, 0, 0, .15);
}

@media (prefers-reduced-motion: reduce) {
    .dv-nav-rail, .dv-sidenav { transition: none; }
}

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

.dv-main:focus {
    outline: none;
}

[x-cloak] {
    display: none !important;
}

.dv-nav-heading {
    display: block;
    padding: 0 1rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
}

/* Wizard progress (UIX-03). */
.dv-steps {
    display: flex;
    gap: .5rem;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.dv-steps li {
    flex: 1;
    padding: .5rem .75rem;
    border-bottom: 3px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}

.dv-steps li.active {
    border-color: var(--bs-primary);
    color: var(--bs-body-color);
    font-weight: 600;
}

.dv-choice {
    cursor: pointer;
}

.dv-choice:has(input:checked) {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px var(--dv-brand);
}

/* Upload drop zone (ADM-20). */
.dv-dropzone {
    border: 2px dashed var(--dv-stroke-1);
    border-radius: var(--dv-radius-xl);
    padding: 3rem 1rem;
    text-align: center;
    cursor: pointer;
    background: var(--dv-surface);
    transition: border-color .15s, background-color .15s;
}

.dv-dropzone:hover,
.dv-dropzone:focus,
.dv-dropzone-over {
    border-color: var(--bs-primary);
    background: var(--dv-brand-subtle);
    outline: none;
}

/* Page thumbnails. */
.dv-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.dv-thumb {
    position: relative;
    display: block;
    width: 96px;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    background: #fff;
    overflow: hidden;
}

.dv-thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.dv-thumb span {
    position: absolute;
    right: .25rem;
    bottom: .25rem;
    padding: 0 .35rem;
    font-size: .75rem;
    border-radius: .25rem;
    background: rgba(0, 0, 0, .6);
    color: #fff;
}

/* Workflow progress on batch details. */
.dv-workflow {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: 0;
    list-style: none;
}

.dv-workflow li {
    padding: .35rem .75rem;
    border-radius: 1rem;
    font-size: .85rem;
    border: 1px solid var(--bs-border-color);
}

.dv-workflow-done {
    background: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle) !important;
}

.dv-workflow-current {
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}

.dv-workflow-todo {
    color: var(--bs-secondary-color);
}

/* Index screen (IDX-01): toolbar, then tree | splitter | viewer | splitter | fields; fills the window. */
.dv-index {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.dv-index-grid {
    display: grid;
    grid-template-columns: 240px 6px 1fr 6px 380px;
    flex: 1 1 auto;
    min-height: 0;
}

.dv-index-tree,
.dv-index-fields {
    overflow-y: auto;
    min-height: 0;
    background: var(--bs-body-bg);
}

.dv-index-viewer {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.dv-viewer-host {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

.dv-splitter {
    cursor: col-resize;
    background: var(--bs-border-color-translucent);
}

.dv-splitter:hover {
    background: var(--bs-primary);
}

.dv-tree-doc {
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.dv-tree-doc.active {
    background: var(--dv-brand-subtle);
}

.dv-tree-doc-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    padding: .5rem;
    border: 0;
    background: none;
    text-align: left;
    font-size: .875rem;
}

.dv-thumb-sm {
    width: 64px;
}

.dv-thumb.selected {
    outline: 3px solid var(--bs-primary);
}

.dv-field {
    padding: .35rem .5rem;
    border-left: 3px solid transparent;
    border-radius: .25rem;
}

.dv-field-active {
    background: var(--dv-brand-subtle);
    border-left-color: var(--bs-primary);
}

/* Problem fields: colour plus icon, never colour alone (IDX-05, WCAG). */
.dv-field-problem input,
.dv-field-problem select {
    border-color: var(--bs-warning);
    background-color: var(--bs-warning-bg-subtle);
}

.dv-field-invalid input,
.dv-field-invalid select {
    border-color: var(--bs-danger);
    background-color: var(--bs-danger-bg-subtle);
}

.dv-grid td {
    padding: 0;
}

/* Viewer (IDX-02..04). */
.dv-viewer {
    position: absolute;
    inset: 0;
}

.dv-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--dv-surface-3);
    cursor: grab;
    touch-action: none;
}

.dv-viewport.dv-panning {
    cursor: grabbing;
}

.dv-stage {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    box-shadow: var(--dv-shadow-16);
    background: #fff;
}

.dv-stage img {
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
}

.dv-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.dv-word {
    fill: transparent;
    cursor: pointer;
}

.dv-word:hover {
    fill: rgba(15, 108, 189, .18);
    stroke: rgba(15, 108, 189, .75);
    stroke-width: 2;
}

.dv-highlight {
    fill: rgba(255, 193, 7, .25);
    stroke: #fd7e14;
    stroke-width: 4;
    pointer-events: none;
}

.dv-lasso {
    fill: rgba(15, 108, 189, .12);
    stroke: #0f6cbd;
    stroke-width: 3;
    stroke-dasharray: 10 6;
}

.dv-zone {
    fill: rgba(25, 135, 84, .15);
    stroke: #198754;
    stroke-width: 4;
    pointer-events: none;
}

.dv-anchor {
    fill: rgba(111, 66, 193, .15);
    stroke: #6f42c1;
    stroke-width: 3;
    stroke-dasharray: 8 4;
    pointer-events: none;
}

/* Zone designer (ADM-57). */
.dv-zones {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6px var(--dv-zones-panel, 24rem);
    height: 100%;
    min-height: 0;
}

.dv-zones-viewer {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.dv-zones-panel {
    overflow-y: auto;
}

@media (max-width: 900px) {
    .dv-zones-splitter, .dv-finders-splitter { display: none; }

    .dv-zones {
        grid-template-columns: 1fr;
        grid-template-rows: 60vh auto;
        height: auto;
    }
}

/* Output template editor (ADM-70): highlighted text behind a transparent textarea. */
.dv-code {
    position: relative;
}

.dv-code pre,
.dv-code textarea {
    font-family: var(--bs-font-monospace);
    font-size: .875rem;
    line-height: 1.5;
    padding: .375rem .75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
}

.dv-code pre {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: var(--bs-border-width) solid transparent;
    pointer-events: none;
    color: var(--bs-body-color);
}

.dv-code textarea {
    position: relative;
    background: transparent;
    color: transparent;
    caret-color: var(--bs-body-color);
    resize: vertical;
}

.dv-code textarea:disabled {
    background: transparent;
}

.dv-code .tk-d { color: #6f42c1; font-weight: 600; }
.dv-code .tk-v { color: #0550ae; }
.dv-code .tk-k { color: #cf222e; font-weight: 600; }
.dv-code .tk-s { color: #0a7d32; }
.dv-code .tk-n { color: #953800; }
.dv-code .tk-p { color: #6e7781; font-weight: 600; }

/* Scan screen (SCN-05..11). */
.dv-scan {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* One-touch scanning (SCN-12): document type buttons beside the pages, on either side */
.dv-scan-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.dv-scan-main.panel-right {
    flex-direction: row-reverse;
}

.dv-scan-main > .dv-scan-split {
    flex: 1 1 auto;
    min-width: 0;
}

.dv-onetouch {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bs-tertiary-bg);
    border-inline-end: 1px solid var(--bs-border-color);
}

.dv-scan-main.panel-right .dv-onetouch {
    border-inline-end: 0;
    border-inline-start: 1px solid var(--bs-border-color);
}

.dv-onetouch.dv-attention {
    animation: dv-attention 1s ease 2;
}

@keyframes dv-attention {
    50% { box-shadow: inset 0 0 0 3px var(--bs-warning); }
}

.dv-onetouch-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.dv-onetouch-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    min-height: 2.75rem;
    padding: .4rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: 600;
    text-align: start;
}

.dv-onetouch-btn:hover:not(:disabled) {
    border-color: var(--bs-primary);
}

.dv-onetouch-btn.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.dv-onetouch-btn.active kbd {
    background: rgba(255, 255, 255, .25);
}

.dv-onetouch-resize {
    flex: 0 0 5px;
    cursor: col-resize;
    background: transparent;
}

.dv-onetouch-resize:hover {
    background: var(--bs-primary-border-subtle);
}

.dv-target-doc {
    background: var(--bs-success-bg-subtle);
}

@media (max-width: 900px) {
    .dv-scan-main {
        flex-direction: column !important;
    }

    .dv-onetouch {
        width: auto !important;
        max-height: 30vh;
    }

    .dv-onetouch-resize {
        display: none;
    }
}

.dv-scan-split {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6px 40%;
}

.dv-scan-split.no-preview {
    grid-template-columns: minmax(0, 1fr);
}

.dv-scan-body {
    min-height: 0;
    overflow-y: auto;
}

.dv-scan-preview {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    position: relative;
}

.dv-scan-preview-empty {
    position: absolute;
    inset: 50% 1rem auto;
    text-align: center;
    color: #fff !important;
    pointer-events: none;
}

/* Sheet number and side from the scanner (SCN-06): front and back of a sheet read as a pair */
.dv-sheet {
    font-size: .75em;
    padding: 0 .3em;
    border-radius: .25rem;
    white-space: nowrap;
}

.dv-sheet.front {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.dv-sheet.back {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.dv-scan-thumb.current {
    box-shadow: 0 0 0 3px var(--bs-warning);
}

.dv-context-menu {
    position: fixed;
    z-index: 1080;
    min-width: 17rem;
}

@media (max-width: 900px) {
    .dv-scan-split {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto 60vh;
    }

    .dv-scan-split .dv-splitter {
        display: none;
    }
}

.dv-scan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
}

.dv-scan-thumb {
    margin: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: var(--bs-body-bg);
    cursor: pointer;
    position: relative;
    user-select: none;
}

.dv-scan-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 210 / 297; /* overridden per page with its own shape */
    object-fit: contain;
    background: #fff;
    border-radius: .375rem .375rem 0 0;
}

/* A page just scanned, shown from the Scan Agent while it is being stored (SCN-15). */
.dv-scan-thumb.dv-arriving-thumb {
    border-style: dashed;
    cursor: default;
}

.dv-scan-thumb.dv-arriving-thumb img {
    opacity: .85;
}

.dv-scan-thumb figcaption {
    font-size: .8rem;
    padding: .15rem .35rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}

.dv-scan-thumb.selected {
    outline: 3px solid var(--bs-primary);
    outline-offset: 1px;
}

.dv-scan-thumb:focus-visible {
    outline: 3px solid var(--bs-primary);
}

.dv-scan-thumb.drop-before::before,
.dv-scan-end.drop-before::before {
    content: "";
    position: absolute;
    left: -.45rem;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 2px;
    background: var(--bs-success);
}

.dv-scan-end {
    position: relative;
    border: 2px dashed var(--bs-border-color);
    border-radius: .375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    color: var(--bs-secondary-color);
    min-height: 6rem;
}

/* Dashboard chart (RPT-01). */
.dv-bar {
    fill: var(--bs-primary);
    opacity: .85;
}

.dv-bar:hover {
    opacity: 1;
}

.dv-axis {
    stroke: var(--bs-border-color);
    stroke-width: .3;
}


/* Fluent refinements for work screens. */
.dv-scan-thumb {
    border-color: var(--dv-stroke-2);
    box-shadow: var(--dv-shadow-2);
    transition: box-shadow .1s ease, transform .1s ease;
}

.dv-scan-thumb:hover {
    box-shadow: var(--dv-shadow-8);
}

.dv-scan-thumb.selected {
    outline-color: var(--dv-brand);
}

.dv-scan-thumb img {
    background: #fff;
}

.dv-scan-body {
    background: var(--dv-canvas);
}

.dv-scan-body > section.card > .card-header,
.dv-scan-body section.card .card-header {
    background: var(--dv-surface);
}

.dv-splitter {
    background: var(--dv-stroke-2);
}

.dv-splitter:hover {
    background: var(--dv-brand);
}

.dv-index-tree,
.dv-index-fields {
    background: var(--dv-surface);
}

/* Index: table row on the page, and the floating (popped out) table (IDX-10) */
.dv-row-band {
    fill: rgba(15, 108, 189, .10);
    stroke: rgba(15, 108, 189, .55);
    stroke-width: 2;
    stroke-dasharray: 8 4;
    pointer-events: none;
}

.dv-row-active > td {
    background-color: var(--dv-brand-subtle, #ebf3fc) !important;
}

.dv-table-floating {
    position: fixed;
    z-index: 1040;
    background: var(--dv-surface, #fff);
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .12), 0 14px 28px rgba(0, 0, 0, .14);
    padding: .5rem .75rem .75rem;
    resize: both;
    overflow: auto;
    min-width: 320px;
    min-height: 160px;
    max-width: 96vw;
    max-height: 90vh;
}

.dv-table-floating .dv-table-header {
    cursor: move;
    user-select: none;
    position: sticky;
    top: -.5rem;
    background: inherit;
    padding: .25rem 0;
    z-index: 1;
}

/* Designed index forms (IDX-03): 12-column grid; sections start on a new row */
.dv-form-grid12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: .5rem;
}

.dv-form-grid12 > .dv-form-item {
    display: contents;
}

.dv-form-grid12 .dv-field {
    grid-column: span 12;
    min-width: 0;
}

.dv-form-section {
    grid-column: 1 / -1;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--dv-fg-3, #616161);
    border-bottom: 1px solid var(--dv-stroke-2, #e0e0e0);
    margin: .5rem 0 .4rem;
    padding-bottom: .15rem;
}

.dv-form-grid {
    display: grid;
    gap: .5rem;
}

/* Correction module: the image clip and the list of values */
.dv-clip {
    max-width: 100%;
    box-shadow: var(--dv-shadow-4, 0 2px 4px rgba(0, 0, 0, .14));
}

.dv-clip-mark {
    position: absolute;
    border: 3px solid rgba(15, 108, 189, .9);
    background: rgba(255, 230, 0, .15);
    border-radius: 3px;
    pointer-events: none;
}

.dv-corr-row {
    background: transparent;
}

.dv-corr-row:hover {
    background: var(--dv-hover, #f5f5f5);
}

.dv-corr-row.active {
    background: var(--dv-brand-subtle, #ebf3fc);
    box-shadow: inset 3px 0 0 var(--dv-brand, #0f6cbd);
}

/* Lookup pick list */
.dv-pick-table th.text-primary::after {
    content: " \2192";
}

td > .dv-cell-lookup {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
}

.dv-grid td {
    position: relative;
}

/* Index panels placed by the operator (UIX-02): fields on the left, document list hidden */
.dv-index-grid > .dv-index-tree { order: 1; }
.dv-index-grid > .dv-splitter-left { order: 2; }
.dv-index-grid > .dv-index-viewer { order: 3; }
.dv-index-grid > .dv-splitter-right { order: 4; }
.dv-index-grid > .dv-index-fields { order: 5; }

.dv-index-grid.dv-fields-left > .dv-index-fields { order: 1; }

/* Table view of the Index screen (IDX-15): sheet, splitter, page image */
.dv-index-grid > .dv-sheet { order: 0; }
.dv-index-grid > .dv-splitter-sheet { order: 0; }
.dv-index-grid.dv-sheet-mode > .dv-index-tree,
.dv-index-grid.dv-sheet-mode > .dv-splitter-left,
.dv-index-grid.dv-sheet-mode > .dv-splitter-right,
.dv-index-grid.dv-sheet-mode > .dv-index-fields { display: none !important; }
.dv-sheet { overflow: auto; min-height: 0; min-width: 0; background: var(--bs-body-bg); }
.dv-sheet-scroll { overflow: auto; }
.dv-sheet-table { width: max-content; min-width: 100%; }
.dv-sheet-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-tertiary-bg); white-space: nowrap; font-weight: 600; }
.dv-sheet-table td { padding: 1px; vertical-align: middle; }
.dv-sheet-table td .form-control, .dv-sheet-table td .form-select { min-width: 9rem; border-color: transparent; border-radius: 0; background-color: transparent; }
.dv-sheet-table td .form-control:focus, .dv-sheet-table td .form-select:focus { border-color: var(--bs-primary); background-color: var(--bs-body-bg); }
.dv-sheet-table td .form-control.is-invalid, .dv-sheet-table td .form-select.is-invalid { border-color: var(--bs-danger); background-color: var(--bs-danger-bg-subtle); }
.dv-sheet-table .dv-cell-warn { background-color: var(--bs-warning-bg-subtle) !important; }
.dv-sheet-table .dv-sheet-sticky { position: sticky; left: 0; z-index: 1; background: var(--bs-body-bg); white-space: nowrap; }
.dv-sheet-table thead .dv-sheet-sticky { z-index: 3; background: var(--bs-tertiary-bg); }
.dv-sheet-table tr.dv-sheet-current > * { box-shadow: inset 0 0 0 9999px rgba(var(--bs-primary-rgb), .06); }
.dv-sheet-table tr.dv-sheet-current > .dv-sheet-sticky { border-left: 3px solid var(--bs-primary); }
.dv-sheet-table tr.dv-sheet-rejected td { opacity: .6; }
.dv-sheet-table td.dv-sheet-active { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.dv-index-grid.dv-fields-left > .dv-splitter-right { order: 2; }
.dv-index-grid.dv-fields-left > .dv-splitter-left { order: 4; }
.dv-index-grid.dv-fields-left > .dv-index-tree { order: 5; }

.dv-index-grid.dv-hide-tree > .dv-index-tree,
.dv-index-grid.dv-hide-tree > .dv-splitter-left {
    display: none;
}

/* Small "changed" marker on a ribbon button (scan settings changed for this batch) */
.dv-rbtn-sm { position: relative; }
.dv-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-warning);
}

/* Alpine's x-show hides with an inline display: none; Bootstrap's display utilities (d-flex, d-grid…) are !important
   and would keep the element visible. This rule loads after Bootstrap, so hidden stays hidden. */
[style*="display: none"] { display: none !important; }

/* Index tables: fixed layout so column widths (Batch Setup %, or dragged by the operator) apply */
.dv-grid-fixed { table-layout: fixed; width: 100%; }
.dv-grid-fixed td input { min-width: 0; width: 100%; }
.dv-col-resize {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    touch-action: none;
}
.dv-col-resize:hover, .dv-col-resize:active { background: var(--bs-primary); opacity: .35; }

/* Buttons on designed forms line up with the inputs next to them */
.dv-form-button { padding-top: 1.35rem; }

/* One-line template boxes (folder, file name) stay one line high */
.dv-code textarea[rows="1"] { height: calc(1.5em + .75rem + 2px); min-height: 0; }

/* Long tables (table-tools.js): the header stays at the top while rows scroll inside the list. */
.dv-table-scroll { overflow: auto; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.dv-table-scroll > .table { margin-bottom: 0; }
.dv-table-scroll > .table > thead > tr > th {
    position: sticky; top: 0; z-index: 3;
    background-color: var(--bs-tertiary-bg);
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
    white-space: nowrap;
}
.dv-table-find { width: 16rem; max-width: 100%; }
.dv-table-bar .dropdown-menu .bi { width: 1.25rem; }

/* Branding: Dev Soft UK Ltd */
.dv-footer {
    display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem;
    margin-top: 2rem; padding-top: .75rem; border-top: 1px solid var(--bs-border-color);
    font-size: .8rem; color: var(--bs-secondary-color);
}
.dv-footer a { color: inherit; }
.dv-footer a:hover { color: var(--bs-link-hover-color); }
.dv-footer-brand { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; }
/* The logo has dark lettering: keep it on a light plate in dark mode and on the coloured sign-in panel. */
.dv-brand-logo { display: inline-block; background: #fff; border-radius: .5rem; padding: .35rem .6rem; line-height: 0; }
.dv-brand-card { padding: .75rem; border-radius: var(--bs-border-radius-lg); background: var(--bs-tertiary-bg); }
.dv-signin-maker { display: flex; align-items: center; gap: .75rem; color: rgba(255, 255, 255, .8); position: relative; z-index: 1; }

/* Help centre in the app (Views/Help). */
.dv-help-nav { position: sticky; top: 4rem; align-self: flex-start; max-height: calc(100vh - 5rem); overflow: auto; }
.dv-help-nav summary { cursor: pointer; padding: .2rem 0; }
.dv-help-nav li a { display: block; padding: .15rem .25rem; }
.dv-help-search { position: relative; }
.dv-help-search .results { position: absolute; z-index: 20; top: 2.2rem; left: 0; width: min(34rem, 90vw); max-height: 70vh; overflow: auto;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); box-shadow: var(--bs-box-shadow); }
.dv-help-search .results a { display: block; padding: .5rem .75rem; text-decoration: none; color: var(--bs-body-color); border-bottom: 1px solid var(--bs-border-color); }
.dv-help-search .results a:hover, .dv-help-search .results a.active { background: var(--bs-tertiary-bg); }
.dv-help-search .results small { display: block; color: var(--bs-secondary-color); }
.dv-help-article { max-width: 52rem; line-height: 1.65; }
.dv-help-article h2 { font-size: 1.4rem; margin-top: 2rem; padding-top: .5rem; border-top: 1px solid var(--bs-border-color); }
.dv-help-article h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.dv-help-article pre { background: var(--bs-tertiary-bg); padding: .85rem; border-radius: var(--bs-border-radius); }
.dv-help-article blockquote { padding: .6rem .9rem; border-left: 4px solid var(--bs-primary); background: var(--bs-primary-bg-subtle); border-radius: 0 .5rem .5rem 0; }
.dv-help-article blockquote p { margin: .25rem 0; }
.dv-help-article .dv-callout-tip { border-color: var(--bs-success); background: var(--bs-success-bg-subtle); }
.dv-help-article .dv-callout-important, .dv-help-article .dv-callout-warning { border-color: var(--bs-warning); background: var(--bs-warning-bg-subtle); }
.dv-help-article table { font-size: .9rem; }
.dv-help-toc { position: sticky; top: 4rem; }

/* ------------------------------------------------------------------ Batch Manager (MGR-01) */
.dv-bm { --dv-bm-gap: 1rem; }
.dv-bm .dv-tone-brand { --tone: var(--dv-brand); --tone-bg: var(--dv-brand-subtle); }
.dv-bm .dv-tone-info { --tone: var(--bs-info-text-emphasis); --tone-bg: var(--bs-info-bg-subtle); }
.dv-bm .dv-tone-progress { --tone: #5b5fc7; --tone-bg: rgba(91, 95, 199, .12); }
.dv-bm .dv-tone-warning { --tone: var(--dv-warning); --tone-bg: var(--bs-warning-bg-subtle); }
.dv-bm .dv-tone-danger { --tone: var(--dv-danger); --tone-bg: var(--bs-danger-bg-subtle); }
.dv-bm .dv-tone-success { --tone: var(--dv-success); --tone-bg: var(--bs-success-bg-subtle); }
[data-bs-theme="dark"] .dv-bm .dv-tone-progress { --tone: #a8abf0; --tone-bg: rgba(168, 171, 240, .14); }

.dv-bm-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; }
.dv-bm-header h1 { font-family: var(--dv-font-display); font-weight: 600; letter-spacing: -.01em; }
.dv-live { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
    color: var(--dv-success); background: var(--dv-success-subtle); border: 1px solid color-mix(in srgb, var(--dv-success) 25%, transparent); }
.dv-live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--dv-success); animation: dv-live 2s infinite; }
@keyframes dv-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dv-success) 60%, transparent); } 70% { box-shadow: 0 0 0 .45rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .dv-live-dot { animation: none; } }

.dv-bm-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding: 1rem; margin-bottom: var(--dv-bm-gap);
    background: var(--dv-surface); border: 1px solid var(--dv-stroke-2); border-radius: var(--dv-radius-xl); box-shadow: var(--dv-shadow-2); }
.dv-bm-searchrow { display: flex; gap: .5rem; flex: 1 1 100%; }
.dv-bm-searchrow .btn { border-radius: 999px; padding-inline: 1.1rem; white-space: nowrap; }
.dv-bm-search { position: relative; flex: 1 1 auto; min-width: 12rem; }
.dv-bm-search .bi { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--dv-fg-3); pointer-events: none; }
.dv-bm-search .form-control { padding-left: 2.4rem; border-radius: 999px; height: 2.4rem; background: var(--dv-surface-2); }
.dv-bm-filter { display: flex; flex-direction: column; flex: 1 1 9rem; min-width: 8rem; max-width: 15rem; }
@media (max-width: 575.98px) { .dv-bm-filter { max-width: none; } }
.dv-bm-filter .form-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--dv-fg-3); margin-bottom: .25rem; }
.dv-bm-narrow { flex-basis: 6rem; min-width: 5.5rem; }
.dv-bm-check { flex-basis: auto; justify-content: flex-end; padding-bottom: .3rem; }

.dv-bm-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin-bottom: var(--dv-bm-gap); }
@media (max-width: 1399.98px) { .dv-bm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .dv-bm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dv-bm-tile { position: relative; display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; text-decoration: none; color: var(--dv-fg-1);
    background: var(--dv-surface); border: 1px solid var(--dv-stroke-2); border-radius: var(--dv-radius-xl); box-shadow: var(--dv-shadow-2);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; overflow: hidden; }
.dv-bm-tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tone); opacity: .85; }
.dv-bm-tile:hover { transform: translateY(-2px); box-shadow: var(--dv-shadow-8); color: var(--dv-fg-1); border-color: color-mix(in srgb, var(--tone) 35%, var(--dv-stroke-2)); }
.dv-bm-tile.active { border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone), var(--dv-shadow-4); background: color-mix(in srgb, var(--tone-bg) 55%, var(--dv-surface)); }
.dv-bm-tile-icon { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; color: var(--tone); background: var(--tone-bg); }
.dv-bm-tile-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.dv-bm-tile-label { font-size: .78rem; font-weight: 600; color: var(--dv-fg-3); text-transform: uppercase; letter-spacing: .04em; }
.dv-bm-tile-value { font-family: var(--dv-font-display); font-size: 1.65rem; font-weight: 600; margin: .1rem 0; }
.dv-bm-tile-sub { font-size: .78rem; color: var(--dv-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-bm-alert .dv-bm-tile-icon { animation: dv-bm-pulse 2.4s ease-in-out infinite; }
@keyframes dv-bm-pulse { 50% { box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--tone) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .dv-bm-alert .dv-bm-tile-icon { animation: none; } }

.dv-bm-card { background: var(--dv-surface); border: 1px solid var(--dv-stroke-2); border-radius: var(--dv-radius-xl); box-shadow: var(--dv-shadow-2); overflow: hidden; }
.dv-bm-card-head { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.1rem; border-bottom: 1px solid var(--dv-stroke-2); }
.dv-bm-empty { text-align: center; padding: 3.5rem 1rem; }
.dv-bm-empty-icon { width: 4.5rem; height: 4.5rem; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; color: var(--dv-brand); background: var(--dv-brand-subtle); }

.dv-bm-table { --bs-table-bg: transparent; }
.dv-bm-table thead th { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--dv-fg-3);
    background: var(--dv-surface-2); border-bottom: 1px solid var(--dv-stroke-2); padding: .65rem .9rem; white-space: nowrap; }
.dv-bm-table tbody td { padding: .32rem .6rem; border-bottom: 1px solid var(--dv-stroke-3); font-size: .86rem; line-height: 1.35; }
.dv-bm-table tbody tr:nth-child(even) > * { background: color-mix(in srgb, var(--dv-stroke-3) 22%, transparent); }
.dv-bm-table thead th { position: sticky; top: 0; z-index: 2; }
.dv-bm-name-cell { max-width: 32rem; }
.dv-bm-meta { font-size: .76rem; color: var(--dv-fg-3); white-space: nowrap; }
.dv-bm-table .flex-none { flex: none; }
.dv-bm-open { padding: .1rem .45rem; }
.dv-bm-table tbody tr:last-child td { border-bottom: 0; }
.dv-bm-table tbody tr { cursor: pointer; transition: background-color .1s ease; }
.dv-bm-table tbody tr:hover > * { background: var(--dv-hover); }
.dv-bm-table tbody tr.table-active > * { background: var(--dv-brand-subtle); }
.dv-bm-table tbody tr:focus-visible { outline: 2px solid var(--dv-brand); outline-offset: -2px; }
.dv-bm-table tr.dv-row-danger td:first-child { box-shadow: inset 3px 0 0 var(--dv-danger); }
.dv-bm-table tr.dv-row-warning td:first-child { box-shadow: inset 3px 0 0 var(--dv-warning); }
.dv-bm-table .min-w-0 { min-width: 0; }

.dv-bm-avatar { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 7px; display: grid; place-items: center; font-size: .85rem; color: var(--tone); background: var(--tone-bg); }
.dv-bm-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600;
    color: var(--tone); background: var(--tone-bg); border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent); white-space: nowrap; }
.dv-bm-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .45rem; border-radius: var(--dv-radius-m); font-size: .72rem;
    color: var(--dv-fg-3); background: var(--dv-surface-3); border: 1px solid var(--dv-stroke-2); }
.dv-bm-priority { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; font-weight: 700; font-size: .76rem; }
.dv-priority-high { color: #fff; background: var(--dv-danger); }
.dv-priority-raised { color: var(--dv-warning); background: var(--bs-warning-bg-subtle); border: 1px solid color-mix(in srgb, var(--dv-warning) 35%, transparent); }
.dv-priority-normal { color: var(--dv-fg-2); background: var(--dv-surface-3); }
.dv-priority-low { color: var(--dv-fg-4); background: transparent; border: 1px dashed var(--dv-stroke-1); }
.dv-bm-person { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .62rem; font-weight: 700;
    color: #fff; background: linear-gradient(135deg, var(--dv-brand), #5b5fc7); }

/* Workflow designer (ARC-04): the steps in order on the left, the chosen step's properties on the right */
.dv-wf-steps { display: flex; flex-direction: column; gap: .35rem; }
.dv-wf-step { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--dv-stroke-2); border-radius: var(--dv-radius-l, 8px);
    background: var(--dv-surface, var(--bs-body-bg)); cursor: pointer; position: relative; transition: background-color .1s ease, border-color .1s ease; }
.dv-wf-step:hover { background: var(--dv-hover, var(--bs-tertiary-bg)); }
.dv-wf-step.selected { border-color: var(--dv-brand, var(--bs-primary)); box-shadow: 0 0 0 1px var(--dv-brand, var(--bs-primary)); background: color-mix(in srgb, var(--dv-brand, #0d6efd) 7%, var(--bs-body-bg)); }
.dv-wf-step:focus-visible { outline: 2px solid var(--dv-brand, var(--bs-primary)); outline-offset: 1px; }
.dv-wf-step.fixed { background: var(--bs-tertiary-bg); }
.dv-wf-step.drop-before::before, .dv-wf-step.drop-after::after { content: ""; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: var(--dv-brand, var(--bs-primary)); }
.dv-wf-step.drop-before::before { top: -5px; }
.dv-wf-step.drop-after::after { bottom: -5px; }
.dv-wf-grip { color: var(--dv-fg-4, var(--bs-secondary-color)); cursor: grab; width: .9rem; text-align: center; }
.dv-wf-step.fixed .dv-wf-grip { cursor: default; }
.dv-wf-number { font-size: .72rem; font-weight: 700; color: var(--dv-fg-3, var(--bs-secondary-color)); width: 1.1rem; text-align: right; }
.dv-wf-icon { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 8px; display: grid; place-items: center; font-size: .95rem; }
.dv-wf-icon.auto { color: var(--bs-info-text-emphasis); background: var(--bs-info-bg-subtle); }
.dv-wf-icon.manual { color: var(--bs-primary-text-emphasis); background: var(--bs-primary-bg-subtle); }
.dv-wf-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.dv-wf-name { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-wf-module { font-size: .72rem; color: var(--dv-fg-3, var(--bs-secondary-color)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-wf-actions { display: flex; gap: .35rem; opacity: 0; transition: opacity .1s ease; }
.dv-wf-step:hover .dv-wf-actions, .dv-wf-step.selected .dv-wf-actions, .dv-wf-step:focus-within .dv-wf-actions { opacity: 1; }
.dv-wf-add { max-height: 60vh; overflow-y: auto; }
.dv-wf-props { min-height: 12rem; }
/* Steps whose settings are in their own panel below (OCR, Image enhancement): the step card only as tall as its content */
.dv-wf-props.dv-wf-compact { min-height: 0; }

/* Batch Manager, compact (MGR-01): smaller tiles and filter bar so more of the list fits on screen */
.dv-bm-tile { padding: .5rem .75rem; gap: .6rem; }
.dv-bm-tile-icon { width: 2rem; height: 2rem; border-radius: 9px; font-size: .95rem; }
.dv-bm-tile-value { font-size: 1.3rem; margin: 0; }
.dv-bm-tile-label { font-size: .7rem; }
.dv-bm-tile-sub { font-size: .72rem; }
.dv-bm-filters { padding: .6rem .75rem; gap: .5rem; }
.dv-bm-card-head { padding: .45rem .9rem; }


/* Scan Home, scanner group (SCN-05): compact, two lines */
.dv-scan-scanner { width: 12.5rem; display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; }
.dv-scan-scanner .min-w-0 { min-width: 0; }
.dv-scan-state { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .7rem; }
.dv-scan-summary { display: flex; align-items: center; gap: .3rem; width: 100%; padding: .1rem .35rem; border: 1px solid var(--dv-stroke-2, var(--bs-border-color)); border-radius: 6px;
    background: var(--bs-body-bg); color: var(--dv-fg-2, var(--bs-body-color)); font-size: .75rem; text-align: left; }
.dv-scan-summary:hover { border-color: var(--dv-brand, var(--bs-primary)); color: var(--dv-brand, var(--bs-primary)); }

/* Scan profiles (ADM-10): list by Batch Setup, settings in sections */
.dv-profile-group { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--dv-fg-3, var(--bs-secondary-color)); padding: .25rem .4rem; }
.dv-profile-item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .6rem; margin-bottom: .3rem; text-align: left; border: 1px solid var(--dv-stroke-2, var(--bs-border-color));
    border-radius: 8px; background: var(--bs-body-bg); color: inherit; }
.dv-profile-item:hover { background: var(--dv-hover, var(--bs-tertiary-bg)); }
.dv-profile-item.selected { border-color: var(--dv-brand, var(--bs-primary)); box-shadow: 0 0 0 1px var(--dv-brand, var(--bs-primary)); }
.dv-profile-item .min-w-0 { min-width: 0; }
.dv-profile-icon { flex: none; width: 2rem; height: 2rem; border-radius: 8px; display: grid; place-items: center; background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.dv-profile-icon.grey { background: linear-gradient(135deg, #e9ecef, #adb5bd); }
.dv-profile-icon.colour { background: linear-gradient(135deg, #ffd6d6, #d6e4ff 50%, #d9f5dd); }
.dv-profile-section { padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--dv-stroke-3, var(--bs-border-color-translucent)); }
.dv-profile-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.dv-profile-section h3 { font-size: .85rem; font-weight: 600; margin-bottom: .5rem; display: flex; align-items: center; gap: .4rem; }
.dv-profile-section .form-label { font-size: .78rem; margin-bottom: .15rem; }
.dv-profile-section .form-check { font-size: .85rem; margin-bottom: .15rem; }

/* Overlay dialog for editors inside an Alpine form (scan profile, add a step) */
.dv-popup { position: fixed; inset: 0; z-index: 1060; background: rgba(15, 23, 42, .45); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; }
.dv-popup-panel { width: 100%; background: var(--bs-body-bg); border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); padding: 1.25rem 1.5rem; }
.dv-profile-summary { font-size: .8rem; padding: .35rem .6rem; border-radius: 6px; background: var(--bs-tertiary-bg); color: var(--dv-fg-2, var(--bs-body-color)); }

/* Add a step (ARC-04) */
.dv-step-group { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--dv-fg-3, var(--bs-secondary-color)); margin-bottom: .5rem; }
.dv-step-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
.dv-step-card { display: flex; flex-direction: column; text-align: left; padding: .7rem .8rem; border: 1px solid var(--dv-stroke-2, var(--bs-border-color)); border-radius: 10px;
    background: var(--bs-body-bg); color: inherit; transition: border-color .1s ease, box-shadow .1s ease, transform .1s ease; }
.dv-step-card:hover:not(:disabled) { border-color: var(--dv-brand, var(--bs-primary)); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); transform: translateY(-1px); }
.dv-step-card.used { opacity: .6; background: var(--bs-tertiary-bg); cursor: default; }
.dv-step-card-foot { display: flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .5rem; font-size: .75rem; color: var(--dv-fg-3, var(--bs-secondary-color)); }

/* Scanner button in the Capture group and next to "Create batch and scan" (SCN-05) */
.dv-scanner-btn { display: flex; align-items: center; gap: .45rem; height: 100%; min-width: 9.5rem; max-width: 13rem; padding: .3rem .5rem; border: 1px solid var(--dv-stroke-2, var(--bs-border-color));
    border-radius: 8px; background: var(--bs-body-bg); color: inherit; text-align: left; }
.dv-scanner-btn:hover { border-color: var(--dv-brand, var(--bs-primary)); }
.dv-scanner-icon { position: relative; font-size: 1.35rem; line-height: 1; }
.dv-scanner-dot, .dv-start-dot { position: absolute; right: -3px; bottom: -1px; width: .6rem; height: .6rem; border-radius: 50%; border: 2px solid var(--bs-body-bg); background: var(--bs-secondary); }
.dv-start-dot { position: static; display: inline-block; flex: none; border: 0; }
.dv-scanner-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.dv-scanner-text strong { font-size: .8rem; }
.dv-scanner-text small { font-size: .7rem; color: var(--dv-fg-3, var(--bs-secondary-color)); }
.good .dv-scanner-dot, .good .dv-start-dot { background: var(--bs-success); }
.busy .dv-scanner-dot { background: var(--bs-primary); }
.bad .dv-scanner-dot, .bad .dv-start-dot { background: var(--bs-danger); }
.bad.dv-scanner-btn small { color: var(--bs-danger-text-emphasis); }
.muted .dv-scanner-dot, .muted .dv-start-dot { background: var(--bs-warning); }
.dv-scanner-menu { min-width: 18rem; }
.dv-start-scanner { display: flex; align-items: center; gap: .4rem; max-width: 15rem; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dv-start-scan > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* A module window that another window took over (UIX-02): a bar, never a blocking window */
.dv-module-moved-bar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1080; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    max-width: calc(100vw - 2rem); padding: .6rem .9rem; border-radius: 10px; background: var(--bs-body-bg); border: 1px solid var(--bs-warning-border-subtle); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: .9rem; }

/* Nothing greys the application (UIX-02): windows float over the page with a shadow; a click outside closes them */
.modal-backdrop { --bs-backdrop-opacity: 0; }
.modal-content { box-shadow: 0 18px 48px rgba(0, 0, 0, .28); border: 1px solid var(--dv-stroke-2, var(--bs-border-color)); }
.dv-popup { background: transparent; }
.dv-popup-panel { box-shadow: 0 18px 48px rgba(0, 0, 0, .28); border: 1px solid var(--dv-stroke-2, var(--bs-border-color)); }
#toasts .toast { min-width: 20rem; }

/* Batch Setup navigation bar (ADM-01): where you are, switchable at each step; stays at the top */
.dv-setup-nav { position: sticky; top: 0; z-index: 1020; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: -.5rem 0 1rem; padding: .45rem .6rem;
    background: var(--bs-body-bg); border: 1px solid var(--dv-stroke-2, var(--bs-border-color)); border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); }
.dv-setup-nav-home { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem; border-radius: 6px; text-decoration: none; color: var(--dv-fg-2, var(--bs-body-color)); font-size: .85rem; }
.dv-setup-nav-home:hover { background: var(--bs-tertiary-bg); }
.dv-setup-nav-sep { color: var(--dv-fg-3, var(--bs-secondary-color)); font-size: .75rem; }
.dv-setup-nav-step { display: inline-flex; align-items: center; gap: .4rem; max-width: 26rem; padding: .25rem .55rem; border: 1px solid transparent; border-radius: 6px;
    background: none; color: inherit; text-decoration: none; font-size: .85rem; }
.dv-setup-nav-step:hover { background: var(--bs-tertiary-bg); border-color: var(--dv-stroke-2, var(--bs-border-color)); }
.dv-setup-nav-step.current { background: var(--bs-primary-bg-subtle); }
.dv-setup-nav-kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dv-fg-3, var(--bs-secondary-color)); }
.dv-setup-nav-menu { max-height: 60vh; overflow-y: auto; min-width: 16rem; }

/* Batch Setups list (ADM-01): cards */
.dv-setup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: .9rem; }
.dv-setup-card { display: flex; flex-direction: column; padding: 1rem 1.1rem; border: 1px solid var(--dv-stroke-2, var(--bs-border-color)); border-radius: 12px; background: var(--bs-body-bg);
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.dv-setup-card:hover { border-color: var(--dv-brand, var(--bs-primary)); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); transform: translateY(-1px); }
.dv-setup-avatar { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 10px; display: grid; place-items: center; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--dv-brand, #0f6cbd), #4f8fdc); }
.dv-setup-card h2 a { color: inherit; text-decoration: none; }
.dv-setup-card h2 a:hover { text-decoration: underline; }
.dv-setup-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; font-size: .78rem; }
.dv-setup-fact { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: 999px; background: var(--bs-tertiary-bg); }
.dv-setup-links { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--dv-stroke-2, var(--bs-border-color)); }
.dv-setup-links a { font-size: .78rem; padding: .2rem .45rem; border-radius: 6px; text-decoration: none; }
.dv-setup-links a:hover { background: var(--bs-tertiary-bg); }

/* Scan settings tab (ADM-10): settings in ribbon groups, two rows per group */
fieldset.contents { display: contents; }
.dv-set-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: .2rem .6rem; align-items: end; }
.dv-set { display: flex; flex-direction: column; gap: .05rem; margin: 0; }
.dv-set > span { font-size: .7rem; color: var(--dv-fg-3, var(--bs-secondary-color)); white-space: nowrap; }
.dv-set .form-select:not([style]), .dv-set .form-control:not([style]) { min-width: 6.5rem; max-width: 9.5rem; }

/* Sortable table headers (UIX-02) */
th.dv-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.dv-sortable::after { content: "\2195"; margin-left: .3rem; font-size: .75em; opacity: .35; }
th.dv-sortable[data-dv-sorted="asc"]::after { content: "\25B2"; opacity: .8; }
th.dv-sortable[data-dv-sorted="desc"]::after { content: "\25BC"; opacity: .8; }
th.dv-sortable:hover { color: var(--dv-brand, var(--bs-primary)); }

/* Batch Setup cards: long names wrap instead of running over the card */
.min-w-0 { min-width: 0; }
.dv-setup-card h2 { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.dv-setup-desc { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dv-setup-table td { vertical-align: middle; }

/* Settings (ADM-80): section index on the left, setup status first */
.dv-settings-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 991.98px) { .dv-settings-layout { grid-template-columns: 1fr; } .dv-settings-nav { position: static; } }
.dv-settings-nav { position: sticky; top: .75rem; display: flex; flex-direction: column; gap: .1rem; padding: .6rem; border: 1px solid var(--dv-stroke-2, var(--bs-border-color)); border-radius: 10px; background: var(--bs-body-bg); }
.dv-settings-nav a { display: flex; align-items: center; gap: .45rem; padding: .3rem .5rem; border-radius: 6px; text-decoration: none; color: inherit; font-size: .88rem; }
.dv-settings-nav a:hover { background: var(--bs-tertiary-bg); }
.dv-settings-nav a.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
.dv-settings-nav-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dv-fg-3, var(--bs-secondary-color)); padding: .2rem .5rem; }
.dv-setup-status { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: .6rem; }
.dv-setup-item { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border: 1px solid var(--dv-stroke-2, var(--bs-border-color)); border-left-width: 4px; border-radius: 10px; text-decoration: none; color: inherit; background: var(--bs-body-bg); }
.dv-setup-item:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .07); }
.dv-setup-item.ok { border-left-color: var(--bs-success); }
.dv-setup-item.attention { border-left-color: var(--bs-warning); background: var(--bs-warning-bg-subtle); }
.dv-setup-item.optional { border-left-color: var(--bs-secondary-border-subtle); }
.dv-setup-item-icon { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 8px; display: grid; place-items: center; background: var(--bs-tertiary-bg); font-size: 1.1rem; }
.dv-setup-item-state { flex: none; font-size: .75rem; white-space: nowrap; }
.dv-setup-item.ok .dv-setup-item-state { color: var(--bs-success-text-emphasis); }
.dv-setup-item.attention .dv-setup-item-state { color: var(--bs-warning-text-emphasis); }
.dv-setup-item.optional .dv-setup-item-state { color: var(--bs-secondary-color); }

/* Viewer tools (UIX-04): select zone, own window */
.dv-viewer-tools { position: absolute; top: .4rem; right: .6rem; z-index: 5; display: flex; gap: .15rem; padding: .15rem; border-radius: 8px; background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.dv-viewer-tool { border: 0; background: transparent; color: var(--bs-body-color); width: 1.9rem; height: 1.9rem; border-radius: 6px; display: grid; place-items: center; }
.dv-viewer-tool:hover { background: var(--bs-tertiary-bg); }
.dv-viewer-tool.active { background: var(--bs-primary); color: #fff; }
.dv-viewer.dv-lasso-mode .dv-viewport { cursor: crosshair; }
.dv-viewer-away > .dv-viewport, .dv-viewer-away > .dv-viewer-tools { visibility: hidden; }
.dv-viewer-away-note { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--bs-secondary-color); }
.dv-viewer-away-note .bi-window-stack { font-size: 2rem; }
.dv-viewer:not(.dv-viewer-away) > .dv-viewer-away-note { display: none; }
.dv-viewer-away-note .dv-viewer-tool { width: auto; padding: 0 .6rem; border: 1px solid var(--bs-border-color); }

/* Scan: pages still being sorted into documents (SCN-14) */
.dv-pending-group { border: 2px dashed var(--bs-primary-border-subtle); background: var(--bs-primary-bg-subtle); }
.dv-pending-group .dv-scan-thumb { opacity: .8; }

/* The page in its own window (UIX-04): its controls are there, not on the screen */
.dv-viewer-popped [data-dv-viewer-controls] { display: none !important; }
.dv-viewer-tools-sep { width: 1px; margin: .25rem .2rem; background: var(--bs-border-color); }

/* Tiles at the same zoom as the page being worked on (Scan, UIX-04): fitted to width or zoomed show from the top */
.dv-viewer-cell.dv-tile-top { place-items: start center; padding-top: 8px; }

/* Organisations & departments (ORG-05): figures at a glance and cards */
.dv-org-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; }
.dv-org-stat { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border: 1px solid var(--dv-stroke-2, var(--bs-border-color)); border-radius: 12px; background: var(--bs-body-bg); }
.dv-org-stat > i { font-size: 1.4rem; color: var(--dv-brand, var(--bs-primary)); width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 10px; background: var(--bs-primary-bg-subtle); }
.dv-org-stat strong { display: block; font-size: 1.35rem; line-height: 1.1; }
.dv-org-stat span { font-size: .78rem; color: var(--dv-fg-3, var(--bs-secondary-color)); }
.dv-org-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .8rem 0 .6rem; }
.dv-org-figures > div { text-align: center; padding: .45rem .25rem; border-radius: 8px; background: var(--bs-tertiary-bg); }
.dv-org-figures strong { display: block; font-size: 1.15rem; line-height: 1.15; }
.dv-org-figures span { font-size: .72rem; color: var(--dv-fg-3, var(--bs-secondary-color)); }
.dv-org-inactive { opacity: .7; }
.dv-org-dot { flex: none; width: .7rem; height: .7rem; border-radius: 50%; }

.dv-sidenav .dv-nav-wrap { white-space: normal; line-height: 1.2; }

/* Scan thumbnails at the real page size on one scale (receipts small, landscape wide); number and buttons at the bottom */
.dv-scan-shelf { display: flex; flex-wrap: wrap; align-items: flex-end; }
.dv-scan-thumb { display: flex; flex-direction: column; flex: none; }
.dv-thumb-box { display: flex; align-items: center; justify-content: center; padding: 6px; background: var(--bs-tertiary-bg); border-radius: .375rem .375rem 0 0; overflow: hidden; }
.dv-scan-thumb .dv-thumb-box img { display: block; aspect-ratio: auto; object-fit: fill; border-radius: 1px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.dv-scan-thumb figcaption { margin-top: auto; }

/* Full screen (UIX-02): the application in a frame that fills the screen, so page changes keep full screen */
#dv-fullscreen-shell { position: fixed; inset: 0; z-index: 2147483000; background: var(--bs-body-bg); }
#dv-fullscreen-shell > iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Work screens (Scan, Index/Validate, QC, Correction, designers): the screen fills the window above a slim status bar (UIX-02) */
.dv-fill { flex: 1 1 auto; min-height: 0; overflow: auto; position: relative; }
.dv-footer.dv-statusbar { margin-top: 0; padding: .2rem .9rem; font-size: .74rem; border-top: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); flex: none; }

/* Batch Manager: the Refresh button turns while the list reloads */
@keyframes dv-spin { to { transform: rotate(360deg); } }
.dv-spin { display: inline-block; animation: dv-spin .8s linear infinite; }

/* Correction: the typing bar stays at the bottom; label beside the box; box and text sized per user and Batch Setup (IDX-08) */
.dv-corr-entry { flex: none; padding: .75rem 1.5rem; border-top: 1px solid var(--bs-border-color); background: var(--bs-body-bg); box-shadow: 0 -4px 12px rgba(0, 0, 0, .05); }
.dv-corr-label { margin: 0; font-weight: 600; font-size: calc(1rem * var(--dv-corr-size, 1)); line-height: 1.2; max-width: 22rem; }
.dv-corr-label small { font-weight: 400; font-size: .8rem; }
.dv-corr-input { font-size: calc(1.25rem * var(--dv-corr-size, 1)); padding: calc(.45rem * var(--dv-corr-size, 1)) .9rem; min-height: calc(2.6rem * var(--dv-corr-size, 1)); transition: width .1s ease; }
.dv-clip { cursor: grab; touch-action: none; }

/* Dashboard: My work (RPT-01), tiles that choose what is listed, and cards like /work */
.dv-mywork-tile { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-body-bg); color: var(--bs-body-color); transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.dv-mywork-tile:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); transform: translateY(-1px); }
.dv-mywork-tile.active { border-width: 2px; padding: calc(.9rem - 1px) calc(1rem - 1px); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.dv-mywork-icon { flex: none; width: 2.75rem; height: 2.75rem; border-radius: .65rem; display: grid; place-items: center; font-size: 1.35rem; }
.dv-mywork-tile.primary .dv-mywork-icon { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.dv-mywork-tile.info .dv-mywork-icon { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.dv-mywork-tile.warning .dv-mywork-icon { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.dv-mywork-tile.success .dv-mywork-icon { background: var(--bs-success-bg-subtle); color: var(--bs-success); }
.dv-mywork-tile.primary.active { border-color: var(--bs-primary); }
.dv-mywork-tile.info.active { border-color: var(--bs-info); }
.dv-mywork-tile.warning.active { border-color: var(--bs-warning); }
.dv-mywork-tile.success.active { border-color: var(--bs-success); }
.dv-mywork-card { transition: box-shadow .15s ease; }
.dv-mywork-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }

/* Batch Setup › Validation (UIX-03): a list per kind with search and filters, the editor beside it */
.dv-vr-tabs .nav-link { padding: .45rem .7rem; }
.dv-vr-list { max-height: calc(100vh - 25rem); min-height: 12rem; overflow-y: auto; border-radius: .5rem; }
.dv-vr-list .list-group-item { padding: .45rem .6rem; cursor: pointer; }
.dv-vr-detail { color: var(--bs-secondary-color); }
.dv-vr-icon { flex: none; width: 2rem; height: 2rem; border-radius: .5rem; display: grid; place-items: center; }
.dv-vr-icon.formatter { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.dv-vr-icon.validator { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.dv-vr-icon.rule { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
@media (min-width: 992px) { .dv-vr-editor { position: sticky; top: 1rem; } }

/* Settings: where a label can be, seen from its value (Positions, ADM-52) */
.dv-position-grid { display: inline-flex; flex-direction: column; gap: 3px; }
.dv-position-grid > .d-flex { gap: 3px; }
.dv-position { width: 2.6rem; height: 2rem; border: 1px dashed var(--bs-border-color); border-radius: .4rem; background: var(--bs-body-bg); color: var(--bs-primary); font-weight: 600; font-size: .8rem; display: grid; place-items: center; }
.dv-position:hover { border-color: var(--bs-primary); }
.dv-position.on { background: var(--bs-primary); border: 1px solid var(--bs-primary); color: #fff; }
.dv-position.value { border: 1px solid var(--bs-success); background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); font-size: .7rem; font-weight: 600; }

/* Batch journey (MGR-02): steps from capture to export */
.dv-journey-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem 1rem; }
.dv-journey-summary > div { display: flex; flex-direction: column; min-width: 0; }
.dv-journey-step { border-left: 3px solid var(--bs-border-color); }
.dv-journey-times { display: flex; flex-wrap: wrap; gap: .15rem 1rem; margin-top: .15rem; }
/* Validation on the form (IDX-08): red until valid, a green flash when the fix takes */
.dv-just-valid { border-color: var(--bs-success) !important; box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .25) !important; transition: box-shadow .3s ease, border-color .3s ease; }
.dv-valid-tick.dv-pop { animation: dv-pop .5s ease; }
@keyframes dv-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .dv-valid-tick.dv-pop { animation: none; } }

/* Movable dialogs (UIX-02): dragged by the title bar */
.modal.dv-movable .modal-header { cursor: move; user-select: none; touch-action: none; }
.modal.dv-movable .modal-header :is(button, a, input) { cursor: pointer; }
.modal.dv-movable .modal-content { position: relative; }
.modal.dv-movable .dv-resize-handle { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; z-index: 2;
    background: linear-gradient(135deg, transparent 50%, var(--bs-secondary-color) 50%, var(--bs-secondary-color) 58%, transparent 58%, transparent 70%, var(--bs-secondary-color) 70%, var(--bs-secondary-color) 78%, transparent 78%); opacity: .6; }
/* Lookup pick list: columns keep the widths the operator dragged them to */
.dv-pick-table.dv-fixed { table-layout: fixed; width: auto; }
.dv-pick-table.dv-fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-pick-table thead tr:first-child th { position: relative; }
.dv-pick-table .dv-col-grip { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; touch-action: none; z-index: 1; }
.dv-pick-table .dv-col-grip:hover { background: var(--bs-primary-border-subtle); }

/* Zone on the page (finders): a small page map beside the page and the four sides, each with nudges */
.dv-zone-editor { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: .25rem; }
.dv-zone-map { position: relative; flex: 0 0 auto; width: 84px; aspect-ratio: 210 / 297; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); background-image: repeating-linear-gradient(to bottom, transparent 0 7px, var(--bs-tertiary-bg) 7px 8px); }
.dv-zone-map-box { position: absolute; background: rgba(var(--bs-primary-rgb), .25); border: 1.5px solid var(--bs-primary); border-radius: 1px; }
.dv-zone-fields { flex: 1 1 18rem; display: grid; gap: .3rem; min-width: 0; }
.dv-zone-row { display: grid; grid-template-columns: 4rem minmax(9rem, 13rem) auto; align-items: center; gap: .5rem; }
.dv-zone-label { font-size: .8rem; font-weight: 600; margin: 0; }
.dv-zone-input .form-control { min-width: 3.5rem; }
.dv-zone-hint { font-size: .75rem; color: var(--bs-secondary-color); white-space: nowrap; }
.dv-zone-tip { font-size: .75rem; color: var(--bs-secondary-color); margin-top: .15rem; }
.dv-anchor-pages td, .dv-anchor-pages th { vertical-align: middle; }

/* Quality check (SCN-06, SCN-13): flagged, failed and good pages stand out; pages not flagged are quiet */
.dv-thumb.dv-qc-pending img, img.dv-qc-pending { outline: 3px solid var(--bs-warning); outline-offset: -1px; }
.dv-thumb.dv-qc-failed img, img.dv-qc-failed { outline: 3px solid var(--bs-danger); outline-offset: -1px; }
.dv-thumb.dv-qc-passed img, img.dv-qc-passed { outline: 2px solid var(--bs-success); outline-offset: -1px; }
.dv-tree-doc.dv-qc-item-pending { border-left: 4px solid var(--bs-warning); background: var(--bs-warning-bg-subtle); }
.dv-tree-doc.dv-qc-item-failed { border-left: 4px solid var(--bs-danger); background: var(--bs-danger-bg-subtle); }
.dv-tree-doc.dv-qc-item-none { opacity: .75; }
.dv-qc-row-pending td:first-child { box-shadow: inset 4px 0 0 var(--bs-warning); }
.dv-qc-row-failed td:first-child { box-shadow: inset 4px 0 0 var(--bs-danger); }
.dv-qc-filter .btn { padding: .15rem .3rem; font-size: .75rem; }



/* Image check settings (SCN-13): checks by kind, as rows with a switch, an explanation and a limit */
.dv-ic-group { border: 1px solid var(--bs-border-color); border-radius: .5rem; margin-bottom: .75rem; overflow: hidden; background: var(--bs-body-bg); }
.dv-ic-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
.dv-ic-head > .bi { color: var(--bs-primary); }
.dv-ic-row { display: grid; grid-template-columns: auto 1fr minmax(9rem, 12rem); gap: .75rem; align-items: center; padding: .5rem .75rem; border-top: 1px solid var(--bs-border-color-translucent); }
.dv-ic-row:first-of-type { border-top: 0; }
.dv-ic-row.off .dv-ic-text { opacity: .55; }
.dv-ic-row .form-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }
.dv-ic-text { cursor: pointer; margin: 0; }
.dv-ic-value { display: flex; flex-direction: column; gap: .1rem; }
.dv-ic-actions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem 0; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); z-index: 2; }
@media (max-width: 575.98px) { .dv-ic-row { grid-template-columns: auto 1fr; } .dv-ic-value { grid-column: 2; } }


/* Samples and training (ADM-42): steps, a vertical list of document types, samples as tiles, a viewer */
.dv-st-steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: none; }
.dv-st-steps li { flex: 1; }
.dv-st-steps button { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--bs-body-bg); text-align: left; color: inherit; }
.dv-st-steps button small { display: block; color: var(--bs-secondary-color); font-size: .78rem; }
.dv-st-steps button.active { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem var(--bs-primary-bg-subtle); }
.dv-st-num { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--bs-secondary-bg); }
.dv-st-steps button.active .dv-st-num { background: var(--bs-primary); color: #fff; }
.dv-st-num.ok { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.dv-st-types { border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--bs-body-bg); overflow: hidden; position: sticky; top: 5rem; }
.dv-st-types-head { display: flex; justify-content: space-between; align-items: baseline; padding: .6rem .8rem; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
.dv-st-type { display: flex; flex-direction: column; gap: .25rem; width: 100%; padding: .6rem .8rem; border: 0; border-left: 4px solid transparent; border-bottom: 1px solid var(--bs-border-color-translucent); background: transparent; text-align: left; color: inherit; }
.dv-st-type:hover { background: var(--bs-tertiary-bg); }
.dv-st-type.active { border-left-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.dv-st-type.over { border-left-color: var(--bs-success); background: var(--bs-success-bg-subtle); outline: 2px dashed var(--bs-success); outline-offset: -3px; }
.dv-st-count { min-width: 1.8rem; padding: 0 .4rem; border-radius: 1rem; text-align: center; font-size: .8rem; font-weight: 600; }
.dv-st-count.good, .dv-st-bar .good { background: var(--bs-success); color: #fff; }
.dv-st-count.fair, .dv-st-bar .fair { background: var(--bs-warning); color: #000; }
.dv-st-count.low, .dv-st-bar .low { background: var(--bs-danger); color: #fff; }
.dv-st-bar { display: block; height: 3px; background: var(--bs-secondary-bg); border-radius: 2px; overflow: hidden; }
.dv-st-bar > span { display: block; height: 100%; }
.dv-st-drop { display: flex; align-items: center; justify-content: center; gap: .9rem; padding: .9rem; margin: 0; border: 2px dashed var(--bs-border-color); border-radius: .6rem; color: var(--bs-secondary-color); text-align: left; cursor: pointer; transition: background-color .15s, border-color .15s; }
.dv-st-drop > .bi { font-size: 1.6rem; color: var(--bs-primary); }
.dv-st-drop:hover, .dv-st-drop.over { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.dv-st-drop.big { flex-direction: column; text-align: center; padding: 3rem 1rem; }
.dv-st-drop.big > .bi { font-size: 2.6rem; }
.dv-st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .75rem; }
.dv-st-grid.small-tiles { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); }
.dv-st-tile { position: relative; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); overflow: hidden; text-align: left; transition: box-shadow .15s, border-color .15s; }
.dv-st-tile:hover, .dv-st-tile:focus-visible { border-color: var(--bs-primary); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12); }
.dv-st-tile img { width: 100%; aspect-ratio: 210 / 297; object-fit: cover; object-position: top; background: #fff; border-bottom: 1px solid var(--bs-border-color-translucent); }
.dv-st-tile.excluded img { opacity: .4; filter: grayscale(1); }
.dv-st-tile-name { font-size: .75rem; font-weight: 600; padding: .3rem .45rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-st-tile-meta { font-size: .68rem; color: var(--bs-secondary-color); padding: 0 .45rem .35rem; }
.dv-st-tile-flag { position: absolute; top: .35rem; left: .35rem; }
.dv-st-tile-mark { position: absolute; top: .3rem; right: .35rem; font-size: 1rem; background: var(--bs-body-bg); border-radius: 50%; line-height: 1; }
.dv-st-viewer { max-width: 72rem; width: calc(100vw - 2rem); }
.dv-st-page { max-height: 70vh; overflow: auto; border: 1px solid var(--bs-border-color); border-radius: .4rem; background: #fff; text-align: center; }
.dv-st-page img { max-width: 100%; }
.dv-st-text { flex: 1 1 auto; min-height: 12rem; max-height: 45vh; overflow: auto; white-space: pre-wrap; font-size: .78rem; padding: .6rem; border: 1px solid var(--bs-border-color); border-radius: .4rem; background: var(--bs-tertiary-bg); }
.dv-st-overlay { position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; background: rgba(13, 110, 253, .12); border: 4px dashed var(--bs-primary); pointer-events: none; text-align: center; color: var(--bs-primary-text-emphasis); }
.dv-st-overlay > div { background: var(--bs-body-bg); padding: 1.5rem 2rem; border-radius: .8rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2); }
.dv-st-overlay .bi { font-size: 2.5rem; }
.dv-confusion td, .dv-confusion th { padding: .15rem .35rem; }

/* Ask AI (ADM-90): a chat with sources, and the review of a proposed set-up */
.dv-ask-chat { max-width: 64rem; overflow: hidden; }
.dv-ask-log { height: calc(100vh - 24rem); min-height: 20rem; overflow-y: auto; padding: 1rem 1.25rem; background: var(--bs-tertiary-bg); }
.dv-ask-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dv-ask-avatar { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.dv-ask-avatar.big { width: 3.5rem; height: 3.5rem; font-size: 1.6rem; }
.dv-ask-row { display: flex; align-items: flex-start; gap: .6rem; margin: .4rem 0 .9rem; }
.dv-ask-row.me { justify-content: flex-end; margin-bottom: .3rem; }
.dv-ask-q { max-width: 78%; padding: .55rem .85rem; border-radius: 1rem 1rem .25rem 1rem; background: var(--bs-primary); color: #fff; white-space: pre-wrap; }
.dv-ask-time { display: block; text-align: right; font-size: .68rem; opacity: .75; margin-top: .15rem; }
.dv-ask-a { max-width: 85%; padding: .7rem .95rem; border-radius: 1rem 1rem 1rem .25rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.dv-ask-a.notice { background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); }
.dv-ask-a p { margin-bottom: .4rem; }
.dv-ask-a ul, .dv-ask-a ol { margin-bottom: .4rem; padding-left: 1.3rem; }
.dv-ask-sources { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .4rem; }
.dv-ask-meta { font-size: .7rem; color: var(--bs-secondary-color); margin-top: .35rem; }
.dv-ask-input { display: flex; gap: .5rem; align-items: flex-end; background: var(--bs-body-bg); }
.dv-ask-input textarea { resize: none; }
.dv-ask-input .btn { height: 2.6rem; width: 3rem; }
.dv-ask-typing { display: inline-flex; gap: .25rem; padding: .3rem 0; }
.dv-ask-typing span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--bs-secondary-color); animation: dv-ask-dot 1.2s infinite ease-in-out; }
.dv-ask-typing span:nth-child(2) { animation-delay: .2s; }
.dv-ask-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes dv-ask-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.dv-ask-type { padding: .5rem .6rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; margin-bottom: .5rem; }
.dv-ask-type.off { opacity: .5; }
.dv-ask-field { display: inline-flex; align-items: center; font-size: .8rem; padding: .15rem .5rem; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-body-bg); cursor: pointer; }
.dv-ask-field.off { opacity: .5; text-decoration: line-through; }
.dv-ask-changes { max-height: 22rem; overflow-y: auto; }
.dv-st-upload-list { max-height: 18rem; overflow-y: auto; }
.dv-st-upload-list > li { padding: .35rem 0; border-top: 1px solid var(--bs-border-color-translucent); }
.dv-st-upload-list > li:first-child { border-top: 0; }
.dv-st-upload-list > li.is-reading { background: var(--bs-primary-bg-subtle); }
.dv-st-upload-state { width: 1.4rem; text-align: center; flex: none; }
.flex-none { flex: none; }
/* The viewer's pointer switch (UIX-04): select (plus) or move (hand) */
.dv-viewer-switch { display: inline-flex; padding: 1px; border: 1px solid var(--bs-border-color); border-radius: 7px; background: var(--bs-body-bg); }
.dv-viewer-switch .dv-viewer-tool { width: 2.1rem; }
/* The app's dialogs (confirm, prompt) always open above popups and viewers that asked for them */
.modal.dv-dialog { z-index: 1095; }
.modal-backdrop:has(+ .modal.dv-dialog), .modal.dv-dialog + .modal-backdrop { z-index: 1090; }

/* Ask AI (ADM-90): the conversations beside the chat, and a design's conversation beside its proposal */
.dv-ask-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1rem; }
.dv-ask-layout .dv-ask-chat { max-width: none; }
@media (max-width: 991.98px) { .dv-ask-layout { grid-template-columns: minmax(0, 1fr); } .dv-ask-side .dv-ask-list { max-height: 12rem; } }
.dv-ask-side { overflow: hidden; }
.dv-ask-list { max-height: calc(100vh - 20rem); overflow-y: auto; }
.dv-ask-item { padding: .5rem .75rem; border-bottom: 1px solid var(--bs-border-color-translucent); cursor: pointer; }
.dv-ask-item:hover { background: var(--bs-tertiary-bg); }
.dv-ask-item.active { background: var(--bs-primary-bg-subtle); box-shadow: inset 3px 0 0 var(--bs-primary); }
.dv-design-chat { overflow: hidden; }
.dv-design-log { height: calc(100vh - 30rem); min-height: 16rem; }
.dv-design-current { border-color: var(--bs-primary); box-shadow: 0 0 0 1px var(--bs-primary); }
.dv-ask-input .btn.dv-ask-hint { width: auto; height: auto; padding: .1rem .6rem; font-size: .78rem; white-space: nowrap; }

/* Batch Setup assistant (ADM-90): Batch Setups beside their shared conversation */
.dv-setup-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1rem; }
@media (max-width: 991.98px) { .dv-setup-layout { grid-template-columns: minmax(0, 1fr); } .dv-setup-layout .dv-ask-list { max-height: 12rem; } }
.dv-setup-log { height: calc(100vh - 25rem); min-height: 18rem; }
.dv-setup-author { display: block; font-size: .7rem; font-weight: 600; opacity: .8; margin-bottom: .1rem; }
.dv-setup-event { text-align: center; font-size: .78rem; margin: .4rem auto .9rem; padding: .3rem .8rem; max-width: 90%; border-radius: 1rem; background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.dv-setup-questions { margin: .35rem 0 .2rem; padding-left: 1.1rem; font-size: .88rem; }
.dv-setup-questions a { text-decoration: none; }
.dv-setup-questions a:hover { text-decoration: underline; }
.dv-setup-proposal { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .4rem; }
.dv-ask-input .btn.dv-attach { width: 2.6rem; display: grid; place-items: center; }
.dv-drop-over { outline: 2px dashed var(--bs-primary); outline-offset: -4px; }

/* Finders: where the finder looks, on the Finder tab */
.dv-area-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .45rem .65rem; border: 1px dashed var(--bs-primary-border-subtle); border-radius: .5rem; background: var(--bs-primary-bg-subtle); }

/* Printed pages: the brand at the top and the credit at the foot */
.dv-print-brand { align-items: center; gap: .4rem; padding-bottom: .5rem; margin-bottom: 1rem; border-bottom: 3px solid #0d59bf; font-size: .95rem; color: #0d59bf; }
.dv-print-brand img { width: 1.25rem; height: 1.25rem; }
.dv-print-brand span { color: #6c757d; }
.dv-print-credit { margin-top: 1.5rem; padding-top: .4rem; border-top: 1px solid #dee2e6; text-align: center; font-size: .75rem; font-weight: 600; color: #0d59bf; }
@media print { .dv-app-footer, footer.dv-footer { display: none !important; } }

/* Letter templates (LET-02): the PDF preview next to the designer, and the letter editor (LET-03). */
.dv-letter-preview { width: 100%; height: 72vh; min-height: 30rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-tertiary-bg); }
.dv-letter-editor { font-family: Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.55; min-height: 32rem; }

/* Preparation: large touch buttons for what was found and slip sheet sizes (PAY-01, LFR-01). */
.dv-prep-kind { min-width: 5.5rem; padding: .6rem .8rem; }

/* Progress of a box, batch, return or item through its steps (PSC-01): done, current, still to come. */
.dv-progress { display: flex; flex-wrap: wrap; gap: .25rem; padding: 0; list-style: none; }
.dv-progress li { flex: 1 1 7rem; display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: .5rem; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); font-size: .85rem; }
.dv-progress-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--bs-border-color); font-weight: 600; font-size: .8rem; background: var(--bs-body-bg); }
.dv-progress li.done { color: var(--bs-body-color); }
.dv-progress li.done .dv-progress-dot { background: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.dv-progress li.current { color: var(--bs-body-color); font-weight: 600; background: var(--bs-primary-bg-subtle); }
.dv-progress li.current .dv-progress-dot { border-color: var(--bs-primary); color: var(--bs-primary); }

/* Image clean-up test (IMG-03): drawing a zone on a page, and the zone before and after. */
.dv-zone-draw { max-width: 52rem; }
.dv-zone-canvas { position: relative; display: inline-block; cursor: crosshair; user-select: none; border: 1px solid var(--bs-border-color); border-radius: .375rem; overflow: hidden; background: #fff; }
.dv-zone-canvas img { display: block; max-width: 100%; max-height: 70vh; }
.dv-zone-rect { position: absolute; border: 2px solid var(--bs-primary); background: rgba(13, 110, 253, .12); pointer-events: none; }
.dv-zone-shot { display: block; width: 100%; max-height: 14rem; object-fit: contain; image-rendering: pixelated; }
.dv-ocr-text { white-space: pre-wrap; font-family: var(--bs-font-monospace); font-size: .8rem; display: block; max-height: 10rem; overflow: auto; }
.dv-prep-kind-tile { min-height: 5.5rem; white-space: normal; position: relative; }
.dv-prep-kind-tile kbd { position: absolute; top: .4rem; right: .5rem; opacity: .6; }

/* Batch lists of every module and the Batch Manager (UIX-12): flat on the page, not in a rounded panel or a box within
   a box, and long names, Batch Setups and checks wrap so the list fits the width without a horizontal scroll bar. */
.dv-bm-filters { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 .25rem; }
.dv-bm-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.dv-bm-card-head { padding: .35rem 0; border-bottom: 0; }
.dv-bm-card .dv-table-bar { padding-inline: 0; }
.dv-bm-card .dv-table-scroll, .dv-bm-card .table-responsive { border: 0; border-radius: 0; border-top: 1px solid var(--dv-stroke-2); }
.dv-bm-table thead th { background: var(--dv-surface); }
.dv-bm-table td.dv-bm-wrap { white-space: normal !important; min-width: 6.5rem; }
.dv-bm-table .dv-bm-pill, .dv-bm-table .dv-bm-chip, .dv-bm-table .dv-bm-meta, .dv-bm-table .badge { white-space: nowrap; }
.dv-bm-table .dv-bm-name-cell { max-width: none; min-width: 14.5rem; }
.dv-bm-table .dv-batch-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.dv-bm-table .dv-bm-name-stack { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }