/*
 * The document intake: one grid, with the way in at the top of it (DOK-1100), and the loads screen (DOK-1080).
 *
 * Every token here is one dok-theme.css actually defines. The first version of this file was written
 * against a vocabulary that does not exist in this product — --dok-border, --dok-surface,
 * --dok-surface-hover, --dok-text-muted, --dok-primary, --dok-space-4 — and CSS fails a declaration
 * silently when a custom property is undefined and has no fallback. So `border: 1px solid var(--dok-border)`
 * produced NO border and `background: var(--dok-surface)` NO background: the screen rendered as bare text
 * on the page, with the panels invisible and the section headers floating. It looked like a missing design;
 * it was a missing variable.
 *
 * The second lesson is the mirror of the first and cost the DOK-1100 rework: a class the markup uses and
 * this file does not know fails just as silently. The grid, the intake band and the file cell shipped to
 * DEV with no rule at all, and rendered as a stack of bare controls with a full-width "Browse files"
 * button on top — MudFileUpload's own activator, which the old page clipped away and the new one had
 * forgotten to. Every class the two Razor files below use has a rule here.
 *
 * The palette is the same one the rest of the app uses: --dok-card-* for containers, --dok-text-* for type,
 * --mud-palette-* for accents (there is no --dok-primary; MudBlazor owns the brand colour and follows the
 * light/dark theme, which a hardcoded hex would not).
 */

.dok-inbound {
    display: flex;
    flex-direction: column;
    gap: var(--dok-space-md);
}

/* ---------- the way in (InboundIntakeStrip) ---------- */

/*
 * One band: icon, words, buttons, and the load selector when a load is open. Not a page and not a tall
 * drop target with centred copy — that was the deleted upload page, and the grid below is the point.
 */
.dok-inbound-intake {
    position: relative;
    border-radius: var(--dok-radius);
}

/*
 * The hidden <input type="file"> lives here. Clipped to a pixel rather than display:none: the drop-zone
 * script reaches into this host for the input and assigns the dropped FileList to it, and a display:none
 * input still receives files — but MudFileUpload also draws its own "Browse files" button here, and that
 * must never be seen.
 */
.dok-inbound-intake__picker-host {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.dok-inbound-intake__dropzone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dok-space-md);
    padding: var(--dok-space-sm) var(--dok-space-md);
    border: 2px dashed var(--dok-card-border);
    border-radius: var(--dok-radius);
    background: var(--dok-card-bg);
    transition: border-color var(--dok-transition), background var(--dok-transition);
}

.dok-inbound-intake__dropzone--active {
    border-color: var(--mud-palette-primary);
    background: var(--dok-overlay-soft);
}

.dok-inbound-intake__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--dok-radius-full);
    background: var(--dok-overlay-soft);
    color: var(--mud-palette-primary);
}

.dok-inbound-intake__words {
    display: flex;
    flex: 1 1 18rem;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.dok-inbound-intake__title {
    font-weight: var(--dok-font-weight-semibold);
    line-height: 1.25;
}

.dok-inbound-intake__limits {
    display: block;
}

/* The two ways in, side by side, as alternatives rather than a primary action with an afterthought. */
.dok-inbound-intake__ways-in {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dok-space-xs);
}

/* DOK-1080 — the load, only when one is open, set apart from the buttons by a rule. */
.dok-inbound-intake__batch {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--dok-space-xs);
    padding-left: var(--dok-space-md);
    border-left: 1px solid var(--dok-border-subtle);
}

.dok-inbound-intake__batch-label {
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-inbound-intake__batch-select {
    min-width: 11rem;
}

.dok-inbound-intake__batch-hint {
    font-size: var(--dok-font-size-xs);
    white-space: nowrap;
}

.dok-inbound-intake__rejections {
    padding: 0 var(--dok-space-md) var(--dok-space-sm);
}

@media (max-width: 900px) {
    .dok-inbound-intake__batch {
        flex: 1 1 100%;
        padding-left: 0;
        border-left: 0;
    }
}

/* ---------- the four cards ---------- */

/*
 * Totals for the current grid query, not a second dashboard feed. Keeping them beside the grid means a
 * person can trust a filter immediately: the cards and the rows always describe exactly the same set.
 */
.dok-inbound__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--dok-space-sm);
}

.dok-inbound__summary-card {
    display: flex;
    align-items: center;
    gap: var(--dok-space-sm);
    min-width: 0;
    padding: var(--dok-space-md);
    border: 1px solid var(--dok-card-border);
    border-radius: var(--dok-radius);
    background: var(--dok-card-bg);
    box-shadow: var(--dok-shadow-sm);
}

.dok-inbound__summary-body {
    min-width: 0;
}

.dok-inbound__summary-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--dok-radius-full);
}

.dok-inbound__summary-icon--primary {
    background: var(--dok-overlay-soft);
    color: var(--mud-palette-primary);
}

.dok-inbound__summary-icon--info {
    background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);
    color: var(--dok-tone-info-ink);
}

.dok-inbound__summary-icon--warning {
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    color: var(--dok-tone-warning-ink);
}

.dok-inbound__summary-icon--neutral {
    background: var(--dok-overlay-subtle);
    color: var(--dok-text-secondary);
}

.dok-inbound__summary-value {
    overflow: hidden;
    color: var(--dok-text-primary);
    font-size: 1.35rem;
    font-weight: var(--dok-font-weight-bold);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dok-inbound__summary-value--date {
    font-size: var(--dok-font-size-sm);
}

.dok-inbound__summary-label {
    margin-top: .18rem;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-semibold);
}

@media (max-width: 1100px) {
    .dok-inbound__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .dok-inbound__summary {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- the board: toolbar, grid, pager ---------- */

.dok-inbound__board {
    display: flex;
    flex-direction: column;
    border-radius: var(--dok-radius);
    overflow: hidden;
}

/* Always visible, so the merge is a thing a person can see before they have ticked anything. */
.dok-inbound__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--dok-space-sm);
    padding: var(--dok-space-sm) var(--dok-space-md);
    border-bottom: 1px solid var(--dok-border-subtle);
}

.dok-inbound__toolbar-count {
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-inbound__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dok-space-sm);
    margin-left: auto;
}

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.dok-inbound__grid-scroll {
    overflow-x: auto;
}

.dok-inbound__grid {
    width: 100%;
    min-width: 72rem;
}

.dok-inbound__grid .mud-table-container {
    overflow: visible;
}

.dok-inbound__grid thead th {
    padding: var(--dok-space-xs) var(--dok-space-sm);
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--dok-border-subtle);
}

.dok-inbound__grid tbody td {
    padding: var(--dok-space-sm);
    vertical-align: top;
    border-bottom: 1px solid var(--dok-border-subtle);
}

.dok-inbound__grid tbody tr:last-child td {
    border-bottom: 0;
}

.dok-inbound__grid-tick {
    width: 2.25rem;
    padding-right: 0 !important;
}

.dok-inbound__col-file {
    min-width: 18rem;
}

.dok-inbound__col-pick {
    width: 12.5rem;
}

.dok-inbound__col-dossier {
    width: 9rem;
}

.dok-inbound__col-state {
    width: 11rem;
}

/* DOK-1378 — one row menu now, so the column holds a single icon button and its header word. */
.dok-inbound__grid-actions {
    width: 6rem;
    white-space: nowrap;
    text-align: right;
}

/* A word in a cell that holds no control: "from the group", "one per file, below", "the same". */
.dok-inbound__grid-note {
    display: inline-block;
    padding-top: .45rem;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-sm);
    font-style: italic;
}

/* ---------- the file cell ---------- */

.dok-inbound__file {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.dok-inbound__file-name {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    color: var(--dok-text-primary);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-inbound__file-icon {
    flex: 0 0 auto;
    color: var(--dok-text-secondary);
}

.dok-inbound__file-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dok-inbound__file-meta {
    display: block;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
    line-height: 1.35;
}

/* DOK-2214 — the batch's tag (DokTag) sits in this box, which the cell lays out; the MudChip it was needed !important
   to win over MudBlazor's own margin. */
.dok-inbound__file-batch {
    align-self: flex-start;
    margin: .2rem 0 0;
}

/* ---------- the pickers and the drawer select ---------- */

/* The activator reads as a field, because a field is what the column is. */
.dok-inbound__picker {
    display: block;
    width: 100%;
}

.dok-inbound__picker-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    width: 100%;
    min-height: 2.35rem;
    padding: .3rem .35rem .3rem .65rem;
    border: 1px solid var(--dok-card-border);
    border-radius: var(--dok-radius-sm);
    background: var(--dok-card-bg);
    color: var(--dok-text-primary);
    font: inherit;
    font-size: var(--dok-font-size-sm);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dok-transition), box-shadow var(--dok-transition);
}

.dok-inbound__picker-field:hover:not(:disabled) {
    border-color: var(--dok-text-secondary);
}

.dok-inbound__picker-field:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.dok-inbound__picker-field:disabled {
    cursor: default;
    opacity: .55;
}

.dok-inbound__picker-field--empty {
    color: var(--dok-text-secondary);
}

.dok-inbound__picker-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dok-inbound__picker-arrow {
    flex: 0 0 auto;
    color: var(--dok-text-secondary);
}

.dok-inbound__picker-popover {
    min-width: 18rem;
    max-width: 24rem;
}

.dok-inbound__picker-list {
    max-height: 22rem;
    overflow-y: auto;
}

.dok-inbound__picker-search {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0 var(--dok-space-sm);
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--dok-border-subtle);
}

/* The Area heading over its processes: a folder, not a choice. */
.dok-inbound__picker-group {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem var(--dok-space-sm) .2rem;
    color: var(--dok-text-primary);
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-semibold);
}

/* MudBlazor 9 draws a menu item as .mud-menu-item carrying the item's own class, with the content inside
   .mud-menu-item-text. There is no .mud-list-item in it, which is what these rules aimed at until DOK-1184 —
   so the indentation under an Area and the highlight of the chosen line never applied. The popover prefix is
   what outweighs MudBlazor's own .mud-menu-item.mud-menu-item-dense padding. InboundDocumentPickerDok1184Tests
   holds MudBlazor to that shape, so an upgrade that changes it fails a test instead of the screen. */
.dok-inbound__picker-popover .mud-menu-item.dok-inbound__picker-item {
    padding-inline-start: 1.75rem;
}

.dok-inbound__picker-item-icon {
    margin-right: .4rem;
    color: var(--dok-text-secondary);
}

.dok-inbound__picker-popover .mud-menu-item.dok-inbound__picker-item--selected,
.dok-inbound__picker-popover .mud-menu-item.dok-inbound__picker-document--selected,
.dok-inbound__picker-popover .mud-menu-item.dok-inbound__picker-person--selected {
    background: var(--dok-overlay-soft);
    color: var(--mud-palette-primary);
}

.dok-inbound__picker-popover .mud-menu-item.dok-inbound__picker-clear {
    color: var(--dok-text-secondary);
    font-style: italic;
}

/* ---------- DOK-1184: the Document column as a tree ---------- */

/* Two lines in the field: the Document, then whose — or that whose is still to be said. */
.dok-inbound__picker-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.dok-inbound__picker-subline,
.dok-inbound__picker-pending {
    overflow: hidden;
    font-size: var(--dok-font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dok-inbound__picker-subline {
    color: var(--dok-text-secondary);
}

/* A Document collected per person with nobody named: the file would go to whoever comes first. */
.dok-inbound__picker-pending {
    color: var(--dok-tone-warning-ink);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-inbound__picker-field--incomplete {
    border-color: var(--mud-palette-warning);
}

.dok-inbound__picker-branch .mud-menu-item-text,
.dok-inbound__picker-document .mud-menu-item-text,
.dok-inbound__picker-person .mud-menu-item-text {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

/* The branch: a caret, then the Document, then how many people it opens into. Not a destination. */
.dok-inbound__picker-popover .mud-menu-item.dok-inbound__picker-branch {
    padding-inline-start: .35rem;
    font-weight: var(--dok-font-weight-semibold);
}

/* A Document collected once lines its icon up with a branch's, past the caret it does not have. */
.dok-inbound__picker-popover .mud-menu-item.dok-inbound__picker-document {
    padding-inline-start: 1.6rem;
}

/* A person sits under the branch, one level in. */
.dok-inbound__picker-popover .mud-menu-item.dok-inbound__picker-person {
    padding-inline-start: 2.85rem;
}

.dok-inbound__picker-caret,
.dok-inbound__picker-node-icon {
    flex: 0 0 auto;
    color: var(--dok-text-secondary);
}

.dok-inbound__picker-branch-name,
.dok-inbound__picker-person-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dok-inbound__picker-count {
    flex: 0 0 auto;
    min-width: 1.5rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--dok-overlay-soft);
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-semibold);
    text-align: center;
}

/* Where the person sits, so two people of the same name can be told apart. */
.dok-inbound__picker-person-unit {
    flex: 0 1 auto;
    max-width: 45%;
    overflow: hidden;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dok-inbound__picker-empty,
.dok-inbound__picker-hint {
    padding: .5rem var(--dok-space-sm);
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
}

.dok-inbound__picker-hint {
    border-top: 1px solid var(--dok-border-subtle);
}

/* ---------- the dossier and state cells ---------- */

.dok-inbound__dossier {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding-top: .3rem;
}

.dok-inbound__dossier-where {
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
}

.dok-inbound__state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
}

/* DOK-1509 — the state is DokInboundStateChip (the canonical pill); the detail line sits under it. */

.dok-inbound__state-detail {
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
    line-height: 1.35;
}

/* ---------- dragging a row onto another (DOK-1105) ---------- */

/*
 * A row that can be grouped says so by the cursor, fades while it travels, and the thing it is over draws
 * a line where the drop would land. Without the last one a drop is a guess: HTML drag gives no feedback of
 * its own beyond the ghost image.
 */
.dok-inbound__row[draggable="true"] {
    cursor: grab;
}

.dok-inbound__row--dragging {
    opacity: .45;
}

.dok-inbound__row--drop-target td,
.dok-inbound__proposal-row--drop-target td {
    background: var(--dok-overlay-soft);
    box-shadow: inset 0 2px 0 0 var(--mud-palette-primary);
}

@media (prefers-reduced-motion: reduce) {
    .dok-inbound__row--dragging {
        opacity: 1;
    }
}

/* ---------- proposals ---------- */

.dok-inbound__proposal-row td {
    background: var(--dok-overlay-subtle);
}

.dok-inbound__proposal-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    color: var(--dok-text-primary);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-inbound__proposal-title .mud-chip {
    margin: 0;
}

.dok-inbound__proposal-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dok-inbound__proposal-entry td {
    background: color-mix(in srgb, var(--dok-overlay-subtle) 55%, transparent);
}

.dok-inbound__entry-arrow {
    margin-top: .35rem;
    color: var(--dok-text-secondary);
}

/* ---------- the pager ---------- */

.dok-inbound__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--dok-space-xs);
    padding: var(--dok-space-xs) var(--dok-space-md);
    border-top: 1px solid var(--dok-border-subtle);
    font-size: var(--dok-font-size-sm);
}

.dok-inbound__pager-size {
    width: 4.5rem;
    margin: 0 var(--dok-space-sm) 0 0;
}

.dok-inbound__pager-size.mud-input-control {
    margin: 0 var(--dok-space-sm) 0 0;
}

/* ---------- the preview (InboundDocumentPreview, in the row's dialog) ---------- */

.dok-inbound-preview-dialog {
    min-height: 24rem;
}

.dok-inbound__panel {
    padding: var(--dok-space-md);
    border: 1px solid var(--dok-card-border);
    border-radius: var(--dok-radius);
    background: var(--dok-card-bg);
}

.dok-inbound__panel-title {
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dok-text-secondary);
    margin-bottom: var(--dok-space-sm);
}

.dok-inbound__preview-frame {
    width: 100%;
    height: 60vh;
    min-height: 320px;
    border: 1px solid var(--dok-card-border);
    border-radius: var(--dok-radius-sm);
    background: rgba(148, 163, 184, .06);
}

.dok-inbound__preview-image {
    max-width: 100%;
    max-height: 60vh;
    border-radius: var(--dok-radius-sm);
    border: 1px solid var(--dok-card-border);
}

.dok-inbound__preview-fallback {
    display: flex;
    align-items: center;
    gap: var(--dok-space-sm);
    padding: var(--dok-space-md);
    border: 1px dashed var(--dok-card-border);
    border-radius: var(--dok-radius-sm);
    color: var(--dok-text-secondary);
}

/* ---------- DOK-1080 — the loads screen ---------- */

/*
 * These four were written into InboundBatchesPage.razor and never given a rule — the same silent
 * disagreement that undressed the grid, found on a page nobody had complained about because a load list
 * degrades to a readable stack while a grid does not. InboundStylesheetDok1100Tests now refuses both.
 */
.dok-inbound-batches {
    display: flex;
    flex-direction: column;
    gap: var(--dok-space-md);
}

.dok-inbound-batches__main {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.dok-inbound-batches__label {
    color: var(--dok-text-primary);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-inbound-batches__reason {
    color: var(--dok-text-secondary);
}

.dok-inbound-batches__new {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    border: 1px solid var(--dok-border-soft, rgba(148, 163, 184, 0.25));
    border-radius: 16px;
}

.dok-inbound-batches__new-label {
    flex: 1 1 260px;
}

.dok-inbound-batches__new-process {
    flex: 1 1 260px;
}

.dok-inbound-batches__filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.dok-inbound-batches__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.dok-inbound-batches__batch {
    padding: 1rem 1.25rem;
    border: 1px solid var(--dok-border-soft, rgba(148, 163, 184, 0.25));
    border-radius: 16px;
}

.dok-inbound-batches__batch.is-closed {
    opacity: 0.85;
}

.dok-inbound-batches__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
}

.dok-inbound-batches__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.dok-inbound-batches__progress {
    margin-top: 0.75rem;
}

.dok-inbound-batches__progress-text {
    margin-top: 0.35rem;
}

.dok-inbound-batches__counts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

/* DOK-1509 — how many entered: not a state, so the line's own words, before the states' chips with their counts. */
.dok-inbound-batches__total {
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-semibold);
}

/* DOK-1434 — a state of the load's dossiers and how many: the App's state chip, then the count, the pair one link. */
.dok-inbound-batches__state-count {
    display: inline-flex;
    align-items: center;
    gap: var(--dok-space-2xs);
    color: inherit;
    text-decoration: none;
}

.dok-inbound-batches__state-count-value {
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.dok-inbound-batches__reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: var(--dok-font-size-xs);
    color: var(--dok-text-secondary);
}

.dok-inbound-batches__reason--failed {
    color: var(--mud-palette-error);
}

/* DOK-228 — «arquivar num Dossiê existente»: escolher o Dossiê, depois o Documento.

   Duas listas no mesmo diálogo, e a segunda só existe depois da primeira. O que as separa visualmente é a
   linha do Dossiê escolhido, que fica por cima da lista de Documentos a dizer onde é que a escolha ficou. */
.dok-inbound-file-dialog .mud-dialog-content,
.dok-inbound-file-dialog__picker {
    display: flex;
    flex-direction: column;
    gap: var(--dok-space-2xs);
}

.dok-inbound-file-dialog__file {
    display: flex;
    align-items: center;
    gap: var(--dok-space-xs);
    margin-bottom: var(--dok-space-sm);
    font-size: var(--dok-font-size-sm);
    color: var(--dok-text-secondary);
}

.dok-inbound-file-dialog__progress {
    margin-top: var(--dok-space-xs);
}

.dok-inbound-file-dialog__dossiers,
.dok-inbound-file-dialog__documents {
    max-height: 18rem;
    overflow-y: auto;
    margin: var(--dok-space-xs) 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--dok-border-subtle);
    border-radius: var(--dok-radius-sm);
}

/* Cada linha é um <button>: é o que ela faz, e é o que um leitor de ecrã e o teclado precisam que ela seja.
   O reset é o dos botões, não o de um div. */
.dok-inbound-file-dialog__dossier,
.dok-inbound-file-dialog__document {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dok-space-2xs);
    width: 100%;
    padding: var(--dok-space-xs) var(--dok-space-sm);
    border: 0;
    border-bottom: 1px solid var(--dok-border-subtle);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--dok-transition);
}

.dok-inbound-file-dialog__dossiers li:last-child .dok-inbound-file-dialog__dossier,
.dok-inbound-file-dialog__documents li:last-child .dok-inbound-file-dialog__document {
    border-bottom: 0;
}

.dok-inbound-file-dialog__dossier:hover,
.dok-inbound-file-dialog__document:hover:not(:disabled) {
    background: var(--dok-overlay-subtle);
}

.dok-inbound-file-dialog__document:disabled {
    cursor: default;
}

.dok-inbound-file-dialog__dossier-title,
.dok-inbound-file-dialog__document-name {
    font-size: var(--dok-font-size-sm);
    color: var(--dok-text-primary);
}

.dok-inbound-file-dialog__chosen {
    display: flex;
    align-items: center;
    gap: var(--dok-space-xs);
    margin-top: var(--dok-space-sm);
    padding: var(--dok-space-xs) var(--dok-space-sm);
    /* --dok-border-subtle, e não --dok-border: este ficheiro abre a dizer que a segunda não existe neste
       produto e que uma declaração com uma variável indefinida falha em SILÊNCIO — nenhuma borda, nenhum
       erro. É o primeiro aviso do cabeçalho, e é preciso lê-lo antes de escrever a regra. */
    border: 1px solid var(--dok-border-subtle);
    border-radius: var(--dok-radius-sm);
    background: var(--dok-overlay-subtle);
}

/* Cheio, ou recolhido por pessoa sem ninguém: a linha continua lá, legível, e não é um destino. */
.dok-inbound-file-dialog__document--full {
    opacity: 0.6;
}

.dok-inbound-file-dialog__document--chosen .dok-inbound-file-dialog__document-name {
    font-weight: var(--dok-font-weight-semibold);
}

.dok-inbound-file-dialog__document-refusal {
    font-size: var(--dok-font-size-xs);
    color: var(--mud-palette-error);
}

/* DOK-1451 — o correio recebido da organização: cada ficheiro numa linha, com a entrada em que se tornou e o
   estado dela, a quebrar em ecrãs estreitos em vez de esticar a célula. */
.dok-inbound-mail {
    display: flex;
    flex-direction: column;
    gap: var(--dok-space-md);
}

.dok-inbound-mail__file {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--dok-space-xs);
}

.dok-inbound-mail__file + .dok-inbound-mail__file {
    margin-top: var(--dok-space-2xs);
}

.dok-inbound-mail__file-name {
    color: var(--dok-text-primary);
    overflow-wrap: anywhere;
}

.dok-inbound-mail__file-reference {
    font-size: var(--dok-font-size-xs);
    color: var(--dok-text-secondary);
}