/* DOK-557 — the advanced-search pop-up (epic DOK-537) over the dossier listing.
   Global on purpose: the Class parameter of MudDialog lands on MudBlazor's .mud-dialog root inside
   MudDialogProvider, which a scoped .razor.css can never reach (see the repo's MudBlazor scoped-CSS gotcha).

   Nothing here is a new visual vocabulary. The pop-up is the cadastro rail + panel of dok-cadastro.css
   inside a MudDialog; these rules only adapt that layout to a dialog: no page footer (the dialog's actions
   are the footer), a rail that sticks to the top of the dialog's scroll area rather than under the app bar,
   and a floor on the panel height so the dialog does not jump between steps. Every colour comes from the
   MudBlazor palette or a --dok-* token that dok-theme.css defines. */

/* Rule 2 — the invalidation banner sits above the whole layout so it is seen from every step. */

/* Mirrors dok-cadastro.css's collapse to one column (rail as a horizontal strip above the content); this
   rule loads after that one, so without it the two-area template above would win under 1200px and put the
   content in an implicit second column. */

/* DOK-561 — step 1 (Âmbito). Global for the same reason as everything above: the step renders inside a
   MudDialog, which a scoped .razor.css never reaches. Four stacked blocks — organisation unit, state,
   confidentiality, dates — sharing one header vocabulary. Every colour is a MudBlazor palette variable. */

/* DOK-815 — the gaps below were the single largest contributor to the 1609px this step measured on DEV with
   nothing selected. Four blocks separated by 1.25rem of gap PLUS 1.1rem of padding is 2.35rem of nothing
   between each pair; the rule above them already draws the separation, so the whitespace was doing the job
   twice. Halved, not removed: the blocks still have to read as four distinct questions. */
.dok-adv-scope {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.dok-adv-scope__block {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.dok-adv-scope__block + .dok-adv-scope__block {
    padding-top: .7rem;
    border-top: 1px solid rgba(148, 163, 184, .24);
}

.dok-adv-scope__block-header {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: var(--mud-palette-text-secondary);
}

.dok-adv-scope__block-header h4 {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: .92rem;
    font-weight: 650;
}

.dok-adv-scope__block-header p {
    margin: .05rem 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: .76rem;
    line-height: 1.25;
}

.dok-adv-scope__search {
    max-width: 22rem;
}

/* DOK-1103 — "loading the units": a spinner and the sentence beside it. It had no rule, so the div was a
   plain block and the two stacked, which reads as a spinner with an unrelated line under it. The same
   arrangement the Process step's own state row uses (.dok-filter-process__state). */
.dok-adv-scope__loading {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* DOK-815 — 16rem of tree is taller than most tenants have units, so on DEV it rendered 256px of box around
   440px of content: a scrollbar AND a tall box. 12.5rem still shows seven rows before scrolling. */
.dok-adv-scope__tree {
    max-height: 12.5rem;
    overflow: auto;
    padding: .35rem .5rem;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

/* DOK-846 — the units are a MudTreeView now. Two rules carry the indentation the owner asked for, and both
   are copied from .dok-org-scope__mudtree (DOK-839) rather than re-invented, so the same chart is indented
   by the same amount wherever the App draws it.

   The selector needs TWO classes to win: MudBlazor ships `.mud-treeview-group { margin-inline-start: 17px }`
   at one class, which reads as a stagger rather than a hierarchy once three ranks are on screen. Both the
   physical and the logical property are set because the shipped rule declares both — leaving margin-left
   behind would let 17px win in LTR and produce an indentation that half-applied. */
.dok-adv-scope__mudtree .mud-treeview-group {
    margin-left: 1.5rem;
    margin-inline-start: 1.5rem;
}

.dok-adv-scope__mudtree .mud-treeview-item-content {
    gap: .35rem;
    padding-top: .1rem;
    padding-bottom: .1rem;
    border-radius: 8px;
}

/* The row inside the item content: the step's own checkbox (see ToggleUnit for why it is not the tree's),
   the type glyph that tells Empresa from Filial from Departamento, the name, and the type spelled out. */
.dok-adv-scope__node {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .35rem;
    min-height: 1.75rem;
}

.dok-adv-scope__node-icon {
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.dok-adv-scope__node-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
    font-weight: var(--dok-font-weight-semibold);
}

.dok-adv-scope__node-type {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    font-weight: var(--dok-font-weight-bold);
    letter-spacing: .04em;
    white-space: nowrap;
}

/* DOK-556 — the partial mark, in words, for a reader who gets no glyph. Same off-screen recipe as
   .dok-orgpath__full and .dok-role-person__identity in dok-listing.css; the 1px/-1px/rect() are that
   recipe, not design values. position:absolute also keeps this span out of .dok-adv-scope__node's four
   grid columns, which it would otherwise add a fifth to. */
.dok-adv-scope__node-state {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.dok-adv-scope__empty {
    padding: .4rem .2rem;
}

.dok-adv-scope__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

/* DOK-556 — a chip now holds the whole triad rather than a leaf name, so it has to be allowed to be wider
   than one word and to hand its own width down to the path inside it.

   max-width is the reason this rule exists: without it one deep unit stretches the chip to the width of the
   panel and the flow stops wrapping. With it the chip stops growing and DokOrgUnitPath's own text-overflow
   takes over — which only works if the intervening MudChip elements can shrink too, hence min-width: 0 on
   them. A flex item defaults to min-width:auto and refuses to go below its text, so leaving them out makes
   the ellipsis silently never happen. */
.dok-adv-scope__unit-chip {
    max-width: 100%;
    height: auto;
}

.dok-adv-scope__unit-chip .mud-chip-content {
    min-width: 0;
    overflow: hidden;
}

.dok-adv-scope__unit-chip .dok-orgpath {
    min-width: 0;
}

/* Inside a filled primary chip both lines are on the chip's own foreground, so the two-tone contrast of a
   grid cell would put the ancestry at an unreadable opacity against it. The ancestry stays distinguishable
   by weight and size (set by .dok-orgpath__ancestors) rather than by colour. */
.dok-adv-scope__unit-chip .dok-orgpath__ancestors,
.dok-adv-scope__unit-chip .dok-orgpath__separator,
.dok-adv-scope__unit-chip .dok-orgpath:hover .dok-orgpath__ancestors {
    color: inherit;
    opacity: .78;
}

/* DOK-1108 — the section's own grid was folded into the shared `.dok-filter-grid`, and its own field class
   into `.dok-filter-field`, so Âmbito no longer has a private idea of how a filter is laid out. What stays
   here is only what is peculiar to this step: the option rows of its two menus, and the unit selector. */

/* ---- the organisation tree, inside its selector (DOK-1108) --------------------------------------------- */

/* The anchor. The panel below is positioned against this, so the field and its popover move together. */
.dok-adv-scope__units {
    position: relative;
}

/* A button dressed as a MudBlazor outlined dense field, because that is what it has to sit beside. The
   numbers are MudBlazor's own, not approximations: 44px is the height `.dok-filter-field` gives every other
   control, 14px the outlined root's horizontal padding, and the radius and line colour are the palette's. */
.dok-adv-scope__units-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: .35rem;
    width: 100%;
    min-height: 44px;
    padding: 0 10px 0 14px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius, 4px);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dok-adv-scope__units-field:hover {
    border-color: var(--mud-palette-action-default);
}

/* Open reads like MudBlazor's focus: the primary colour at two pixels. Drawn as an inset shadow rather than
   a second pixel of border, so the field does not shift by 1px when the panel opens. */
.dok-adv-scope__units-field--open,
.dok-adv-scope__units-field:focus-visible {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
    outline: none;
}

/* The label sits ON the border, in the notch a MudBlazor outlined field cuts for it. */
.dok-adv-scope__units-label {
    position: absolute;
    top: -.5rem;
    left: 9px;
    padding: 0 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    line-height: 1;
}

.dok-adv-scope__units-field--open .dok-adv-scope__units-label {
    color: var(--mud-palette-primary);
}

/* One line, always. overflow: hidden is what makes the +N counter meaningful — without it a third chip
   would push the row wider and the field would stop matching its neighbours. */
.dok-adv-scope__units-value {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: var(--dok-font-size-sm);
}

.dok-adv-scope__units-placeholder {
    color: var(--mud-palette-text-disabled);
}

.dok-adv-scope__units-chip {
    display: inline-flex;
    align-items: center;
    max-width: 60%;
    min-width: 0;
    padding: .1rem .5rem;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), .35);
    border-radius: 999px;
    background: rgba(var(--mud-palette-primary-rgb), .08);
    font-size: .76rem;
}

.dok-adv-scope__units-more {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-size: .76rem;
    font-weight: var(--dok-font-weight-bold);
}

.dok-adv-scope__units-chevron {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

/* MudBlazor's helper-text placement, so this field's hint lines up with every other field's. */
.dok-adv-scope__units-hint {
    display: block;
    margin-top: 3px;
    padding: 0 14px;
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    line-height: 1.25;
}

/* Catches the click that closes the panel. Transparent and behind it — a popover that only closes on its
   own toggle is a popover people leave open. */
.dok-adv-scope__units-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10;
}

.dok-adv-scope__units-panel {
    position: absolute;
    z-index: 11;
    top: calc(100% - 1.15rem);
    left: 0;
    width: max(100%, 22rem);
    max-height: 24rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .6rem;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .14);
}

/* An option carries its own name and, under it, the context that used to be a tooltip on a chip: the
   lifecycle stage for a state, the description for a confidentiality level. */
.dok-adv-scope__option {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    min-width: 0;
}

.dok-adv-scope__option-name {
    font-weight: var(--dok-font-weight-semibold);
}

.dok-adv-scope__option-note {
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    line-height: 1.25;
    white-space: normal;
}
/* DOK-958's Attachments step. Its root is `dok-adv-scope dok-adv-attachments`: the layout is the scope
   step's stack of blocks, and this class exists so that the step can be addressed — by a future rule, and
   today by the stylesheet-parity test, which reads a class with no rule as markup talking to nobody. */
.dok-adv-attachments {
    min-width: 0;
}

/* DOK-1488 — the Documentos page, built the same way since the entity went atop it: `dok-adv-scope dok-adv-documents`,
   the entity block, then the documents block. */
.dok-adv-documents {
    min-width: 0;
}

/* The «Entidade» picker's rows: the name over its unit (and its type, when there is more than one), the mark of an
   inactive or departed entity at the end. The list is in a popover, outside the dialog, so these are global. */
.dok-filter-entities__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: .75rem;
    width: 100%;
}

.dok-filter-entities__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dok-filter-entities__name {
    font-size: var(--dok-font-size-sm);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.dok-filter-entities__caption {
    font-size: var(--dok-font-size-xs);
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
}

.dok-adv-scope__descendants {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

/* DOK-564 — step 2 (Área and Processo). Global for the same reason as everything above: this markup renders
   inside the MudDialog root, where a scoped .razor.css never lands. The accent of each row is the Área's own
   colour, passed as --process-accent exactly as the process gallery does, with the primary palette colour as
   the fallback so a missing or malformed colour changes nothing. */
.dok-filter-process {
    display: grid;
    gap: .7rem; /* DOK-815 */
}

.dok-filter-process__section {
    display: grid;
    gap: .45rem; /* DOK-815 */
    min-width: 0;
}

/* DOK-1103 — the two searchable selectors that replaced the Área chip row and the Processo listbox. The
   listbox was up to 20rem of scrolling rows plus a chip per Área, painted before anyone had asked to see
   either; this is one row of two controls, and the offering opens on demand.

   auto-fit rather than auto-fill for the same reason as .dok-adv-scope__fields: with exactly two controls,
   auto-fill would leave phantom tracks and pin both to the left of a wide panel. */
.dok-filter-process__pickers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: .5rem .9rem;
}

.dok-filter-process__picker {
    min-width: 0;
}

/* One option of either selector: the name, and under it what the row used to carry to its right — the
   Área for a Processo, and the dossier count inside step 1's scope for both. --process-accent is the
   Área's own colour, set inline by AccentStyle and validated there; the fallback keeps the dot visible
   for an Área that carries no colour. */
.dok-filter-process__option {
    --process-accent: var(--mud-palette-primary);
    display: flex;
    flex-direction: column;
    gap: .05rem;
    min-width: 0;
    border-left: 3px solid var(--process-accent);
    padding-left: .5rem;
}

.dok-filter-process__option-name {
    overflow: hidden;
    font-size: .88rem;
    font-weight: var(--dok-font-weight-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Zero is written out in words (rule 4: a Processo with no dossiers in scope stays on the list), so this
   is not styled as an error. */
.dok-filter-process__option-note {
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    line-height: 1.25;
}

.dok-filter-process__cascade {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: .76rem;
}

/* DOK-1103 — the "this Processo is no longer offered" alert. It had no rule; the margin is what keeps it
   from sitting flush against the selectors below, now that they are a grid rather than a stack of
   sections with their own separations. */
.dok-filter-process__stale {
    margin-bottom: .25rem;
}

.dok-filter-process__stale-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.dok-filter-process__state {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 3.6rem; /* DOK-815 — a one-line message does not need six rems of box under it. */
    padding: .7rem;
    border: 1px dashed rgba(148, 163, 184, .4);
    border-radius: var(--dok-radius, 10px);
    color: var(--mud-palette-text-secondary);
}

/* Inside the Processo selector's popover, where the box is already the popover's. */
.dok-filter-process__state--compact {
    min-height: 0;
    padding: .5rem .7rem;
    border: 0;
}

.dok-filter-process__state--error {
    border-color: rgba(var(--mud-palette-error-rgb), .35);
    background: rgba(var(--mud-palette-error-rgb), .045);
}

.dok-filter-process__state-copy {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: .1rem;
    font-size: .8rem;
}

/* ---------------------------------------------------------------------------------------------------
   DOK-569 — step 3: conditions over the Dossier-level dynamic fields of the chosen Process.
   Global for the same reason as everything above: these rules apply inside the MudDialog root, which a
   scoped .razor.css never reaches. Nothing here knows a field: the row is one grid whatever control the
   metadata's family/value kind resolved to.
   --------------------------------------------------------------------------------------------------- */

.dok-adv-fields {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.dok-adv-fields__loading {
    margin-bottom: .35rem;
}

.dok-adv-fields__toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.dok-adv-fields__menu {
    max-height: 20rem;
    overflow-y: auto;
}

/* DOK-797 — the "this Process offers nothing to filter by" state: the cause on one line, where to change it on
   the next, with the disabled Add button under them. Global on purpose, like the rest of this file: a scoped
   .razor.css never reaches markup rendered inside a MudDialog. */
.dok-adv-fields__no-fields {
    margin-bottom: .55rem;
}

.dok-adv-fields__no-fields-body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.dok-adv-fields__no-fields-where {
    opacity: .78;
    font-size: .82rem;
}

/* label | operator | operand | remove — the operand takes the slack, so a range and a multi-select sit on
   the same column as a text box. */
.dok-adv-fields__row {
    display: grid;
    grid-template-columns: minmax(7rem, 12rem) minmax(9rem, 13rem) minmax(0, 1fr) auto;
    align-items: start;
    gap: .65rem;
    padding: .6rem .7rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dok-radius, 10px);
    background: var(--mud-palette-surface);
}

.dok-adv-fields__label {
    padding-top: .55rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dok-adv-fields__operand {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.dok-adv-fields__range {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.dok-adv-fields__range .dok-adv-fields__input {
    flex: 1 1 8rem;
    min-width: 8rem;
}

.dok-adv-fields__range-sep {
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
}

/* A boolean operator carries its own answer — the empty operand cell is deliberate, not a missing input. */
.dok-adv-fields__no-operand {
    padding-top: .6rem;
    font-style: italic;
}

.dok-adv-fields__incomplete {
    line-height: 1.25;
}

.dok-adv-fields__remove {
    padding-top: .35rem;
}

.dok-adv-fields__empty {
    display: grid;
    place-items: center;
    gap: .4rem;
    min-height: 4.5rem; /* DOK-815 */
    padding: .9rem 1rem;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--dok-radius, 10px);
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.dok-adv-fields__empty p {
    margin: 0;
    font-size: .88rem;
}

.dok-adv-fields__notice-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .dok-adv-fields__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .dok-adv-fields__label,
    .dok-adv-fields__operator,
    .dok-adv-fields__operand {
        grid-column: 1;
    }

    .dok-adv-fields__label {
        padding-top: 0;
    }

    .dok-adv-fields__remove {
        grid-column: 2;
        grid-row: 1;
    }
}

/* ---------------------------------------------------------------------------------------------------
   DOK-575 — step 4: the Documents the Process prescribes, and the condition of each.
   Global for the same reason as everything above: these rules sit inside a MudDialog rendered by
   MudDialogProvider, where a scoped .razor.css never lands. Colours come from the MudBlazor palette or
   a --dok-* token; nothing here is a new visual vocabulary.
   --------------------------------------------------------------------------------------------------- */

.dok-adv-search__docs {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.dok-adv-search__docs-intro {
    margin: 0;
    font-size: .84rem;
    color: var(--mud-palette-text-secondary);
}

.dok-adv-search__docs-state {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem .25rem; /* DOK-815 */
    font-size: .88rem;
    color: var(--mud-palette-text-secondary);
}

.dok-adv-search__docs-alert-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.dok-adv-search__docs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* One row per prescribed document: the pick on the left, its condition on the right. */
.dok-adv-search__docs-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    align-items: start;
    gap: .5rem 1rem;
    padding: .5rem .75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dok-radius, 10px);
}

.dok-adv-search__docs-row.is-chosen {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

.dok-adv-search__docs-pick {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    flex-wrap: wrap;
}

.dok-adv-search__docs-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    padding: .1rem .4rem;
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-action-default-hover);
}

.dok-adv-search__docs-condition {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.dok-adv-search__docs-select {
    margin: 0;
}

/* The chosen condition explains itself under the control — "Missing" in particular, because it is a
   condition on absence and reads as a mistake to anyone expecting a document to be there. */
.dok-adv-search__docs-hint,
.dok-adv-search__docs-fields {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
}

.dok-adv-search__docs-fields {
    font-weight: var(--dok-font-weight-semibold);
}

/* The option list of the condition select: label over explanation. */
.dok-adv-search__docs-option {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    white-space: normal;
}

.dok-adv-search__docs-option-label {
    font-weight: var(--dok-font-weight-semibold);
}

.dok-adv-search__docs-option-hint {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
}

@media (max-width: 720px) {
    .dok-adv-search__docs-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------------------------------
   DOK-580 — step 5: the Document-level and Attachment-level fields, GROUPED BY DOCUMENT.
   The grouping and the two levels are the two things this step has to make visible: a condition read on
   the wrong document, or at the wrong level, changes the result without the user seeing anything move.
   So a document is a bordered block with its name in the header, and a level is an inset panel with its
   own icon, heading and one-line rule — the Attachment one stating that a single matching file is enough.
   Global for the same reason as everything above: a scoped .razor.css never reaches a MudDialog root
   rendered by MudDialogProvider. Colours come from the MudBlazor palette or a --dok-* token.
   --------------------------------------------------------------------------------------------------- */

.dok-adv-docfields {
    display: flex;
    flex-direction: column;
    gap: .6rem; /* DOK-815 */
}

.dok-adv-docfields__state {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--mud-palette-text-secondary);
    font-size: .85rem;
}

.dok-adv-docfields__intro {
    margin: 0;
    font-size: .85rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* One block per Document. The border is the grouping: two Documents may declare fields with the same
   label, and only the block they sit in says which Document they belong to. */
/* DOK-815 — three boxes nest here (step body > document group > level), and each one was paying full padding,
   so a single condition sat inside ~2.1rem of stacked inset. Tightened at every level; the borders, not the
   padding, are what say "this field belongs to that Document". */
.dok-adv-docfields__group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .55rem .65rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dok-radius, 10px);
    background: var(--mud-palette-surface);
}

.dok-adv-docfields__group.is-blocked {
    border-color: var(--mud-palette-error);
}

.dok-adv-docfields__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.dok-adv-docfields__group-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dok-adv-docfields__group-condition {
    font-size: .74rem;
    font-weight: var(--dok-font-weight-semibold);
    padding: .1rem .5rem;
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-action-default-hover);
}

/* A level is inset inside its Document, so the nesting reads without being explained. The left border is
   what distinguishes the two at a glance — the Attachment one is not the Document one indented. */
.dok-adv-docfields__level {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .45rem .55rem;
    border-left: 3px solid var(--mud-palette-lines-default);
    border-radius: 0 var(--dok-radius, 10px) var(--dok-radius, 10px) 0;
    background-color: var(--mud-palette-background-gray);
}

.dok-adv-docfields__level--document {
    border-left-color: var(--mud-palette-primary);
}

.dok-adv-docfields__level--attachment {
    border-left-color: var(--mud-palette-secondary);
}

.dok-adv-docfields__level-empty {
    margin: 0;
    font-size: .78rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

/* ── DOK-585 — the summary of the active conditions and the result count ──────────────────────────────────
   Global on purpose, like everything else in this file: a .razor.css never reaches a component rendered
   inside a MudDialog root (see the note at the top). */

.dok-adv-summary {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .9rem;
    padding: .75rem .85rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: .6rem;
    background-color: var(--mud-palette-background-gray);
}

.dok-adv-summary__header {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.dok-adv-summary__title {
    margin: 0;
    font-size: .82rem;
    font-weight: var(--dok-font-weight-bold);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.dok-adv-summary__empty {
    margin: 0;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.dok-adv-summary__groups {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.dok-adv-summary__group {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
    gap: .35rem .7rem;
    align-items: start;
}

/* The step name doubles as the way back to the step that owns the condition — removal does not need it
   (rule 2), but correcting a value does. */
.dok-adv-summary__step {
    appearance: none;
    border: 0;
    background: none;
    padding: .15rem 0;
    text-align: left;
    font-size: .74rem;
    font-weight: var(--dok-font-weight-bold);
    line-height: 1.3;
    color: var(--mud-palette-primary);
    cursor: pointer;
}

.dok-adv-summary__step:disabled {
    color: var(--mud-palette-text-disabled);
    cursor: default;
}

.dok-adv-summary__lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.dok-adv-summary__line {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.dok-adv-summary__text {
    font-size: .8rem;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dok-adv-summary__remove {
    flex: 0 0 auto;
}

.dok-adv-summary__count {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding-top: .5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.dok-adv-summary__count-value {
    font-size: .88rem;
    font-weight: var(--dok-font-weight-bold);
}

.dok-adv-summary__count-text {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.dok-adv-summary__count-hint {
    flex: 1 1 100%;
    font-size: .72rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

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

/* ---------------------------------------------------------------------------------------------------
   DOK-589 — saved views. A small bar in the dialog title (the menu and the save button) plus the panel
   the save button opens. Global, not scoped: a .razor.css file never reaches a MudDialog root rendered
   by MudDialogProvider, which is the same reason everything else in this file is global.
   --------------------------------------------------------------------------------------------------- */
.dok-adv-search__views {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.dok-adv-search__view-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.dok-adv-search__view-name {
    font-weight: var(--dok-font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 18rem;
}

.dok-adv-search__view-scope,
.dok-adv-search__view-stale {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

.dok-adv-search__view-stale {
    color: var(--dok-tone-warning-ink);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-adv-search__save-panel {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .75rem;
    margin-bottom: .75rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-gray);
}

.dok-adv-search__save-hint {
    font-size: .78rem;
}

.dok-adv-search__save-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

/* ==========================================================================================================
   DOK-798 — the inline listing filter panel, and the Dossier accordion mounted inside it.

   Global on purpose, like everything above: a scoped .razor.css never reaches a MudBlazor root (MudPaper,
   MudCollapse), which is the same reason the pop-up's rules lived here.

   Two blocks, deliberately separate:
     * .dok-filter-panel  — the REUSABLE wrapper (bar, collapsed summary, body). Any listing may adopt it;
                            nothing here knows about a filter contract.
     * .dok-adv-accordion — the Dossier's five sections inside that body, including the disabled state that
                            replaces the wizard's "step locked".
   ========================================================================================================== */

/* DOK-1108 — the form is full width again. DOK-1103 capped it at 72rem to close the void DEV-39 reported
   between a section's title and its chevron on a 21:9 monitor; the owner reviewed the mockup and chose to
   keep the width and fix the emptiness at the source instead — every control is now a fixed-height field in
   a grid that flows into as many columns as fit, so a wide screen buys more columns rather than more gutter.
   A cap on top of that would only waste the columns it was fixing. */
.dok-filter-panel {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1rem;
    padding: .85rem;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 8px;
    background: rgba(var(--mud-palette-surface-rgb), .82);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .04);
}

.dok-filter-panel__bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.dok-filter-panel__leading {
    flex: 0 0 auto;
}

/* Sized rather than greedy. It was `flex: 1 1 18rem`, which grows into every pixel the bar has left —
   on a wide screen that is a search box a thousand pixels across for a dossier number. It no longer
   grows; the actions keep their right edge through their own `margin-left: auto`, so the space that
   used to be swallowed simply sits between the two. Below 900px the rule further down still gives it
   the whole row, where taking all the width is the right answer. */
.dok-filter-panel__search {
    flex: 0 1 26rem;
    min-width: 12rem;
}

.dok-filter-panel__toggle {
    flex: 0 0 auto;
    height: 42px;
    border-radius: 8px;
}

.dok-filter-panel__status {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Reset and refresh pinned to the far right, as on every other listing (DOK-271/DOK-294 scaffold). */
.dok-filter-panel__bar > .dok-filter-panel__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    margin-left: auto;
}

/* The collapsed summary. Shown only while the form is closed — open, the form is the summary. */
.dok-filter-panel__summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    padding-top: .55rem;
    border-top: 1px solid rgba(148, 163, 184, .18);
}

.dok-filter-panel__chip {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    max-width: 100%;
    padding: .15rem .2rem .15rem .6rem;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), .35);
    border-radius: 999px;
    background: rgba(var(--mud-palette-primary-rgb), .08);
    color: var(--mud-palette-text-primary);
    font-size: .78rem;
    font-weight: var(--dok-font-weight-semibold);
}

/* A restriction the server-side count cannot see, so it does not get to look like the ones it can. */
.dok-filter-panel__chip--page-only {
    border-style: dashed;
    border-color: rgba(148, 163, 184, .6);
    background: rgba(148, 163, 184, .12);
}

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

.dok-filter-panel__chip-remove {
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 0;
}

.dok-filter-panel__chip-remove:hover {
    background: rgba(148, 163, 184, .28);
}

.dok-filter-panel__note {
    font-size: .74rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.dok-filter-panel__body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(148, 163, 184, .18);
    width: 100%;
}

/* ==========================================================================================================
   DOK-1108 — THE ONE FILTER CONTROL, AND THE GRID IT SITS IN.

   The owner's first priority, from the mockup review: "Os componentes devem seguir o mesmo tamanho, layout e
   funcionalidade. Cada componente está a trabalhar de uma maneira." The form had FOUR heights in it —
   Prioridade 56px (outlined, no density), Área 40px (outlined + dense), the people pickers 58px (their own
   min-height and a 20px radius), and the organisation tree, which was not a control at all but a 200px box
   always open inside the form.

   Everything is `Variant.Outlined` + `Margin.Dense` now, and carries `dok-filter-field`. Two rules do the
   rest; nothing else about MudBlazor's anatomy is touched.
   ========================================================================================================== */

/* As many columns as fit, and no more. This is what replaces the DOK-1103 width cap: on a 21:9 monitor a
   wide panel now buys COLUMNS instead of gutter, which is the actual complaint in DEV-39 — "uma tela inteira
   de proporção 21:9 somente para selecionar o processo e os indivíduos".

   auto-fit, not auto-fill: a section with two controls must fill the row rather than leave phantom tracks
   and pin both to the left. 16rem is the floor at which a label like "Confidencialidade" still fits on the
   control's border without eliding. */
.dok-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: .55rem .9rem;
    align-items: start;
}

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

/* One control. min-width: 0 because a grid track's floor is otherwise the field's intrinsic width, which is
   how a long chip pushes a row wider than its container.

   The height is arithmetic, not a guess: MudBlazor gives `.mud-input-slot` a 19px min-height and an outlined
   dense root 10.5px of padding top and bottom, so a dense outlined control measures exactly 40px. 23px puts
   it at 44px — the touch-target floor the accordion header already adopted under DOK-815 — and does it by
   raising the ONE value the height is built from, so padding, alignment and the label's notch in the border
   are all left alone. It lands the same way on MudBlazor's `input.mud-input-slot` and on MudExtensions'
   `div.mud-input-slot`, which is what lets the people pickers finally match the rest. */
.dok-filter-field {
    min-width: 0;
}

.dok-filter-field .mud-input-slot {
    min-height: 23px;
}

/* A section's own body. DEV-39's third screenshot: "os seletores das Pessoas estão colados à parte cinzenta
   do accordion." They were — the step rendered its controls with no padding of its own, so the first field
   sat against the tinted header. The same four numbers everywhere, so no section breathes differently. */
.dok-filter-section {
    padding: .75rem .7rem .85rem;
}

/* ---- the Dossier's own sections ------------------------------------------------------------------------ */

.dok-dossier-filter__sort {
    flex: 0 0 13rem;
}

@media (max-width: 900px) {
    .dok-filter-panel__search {
        flex: 1 1 100%;
    }

    .dok-dossier-filter__sort {
        flex: 1 1 100%;
    }
}

/* DOK-815 — the accordion on a tablet and a phone.

   The header grows rather than shrinks below 900px: a finger is a blunter pointer than a mouse, so the one
   row the user has to hit all day gets 48px there. Everything that can turn into a horizontal scrollbar is
   pinned instead: the status word is dropped (the chosen-items line under the header already says more than
   it did), the title is allowed to wrap to two lines rather than be clipped to nothing on a 320px screen,
   and the summary line loses the 2.05rem indent that was only ever aligning it under the section icon. */

/* ==========================================================================================================
   DOK-1109 — THE POP-UP: a menu down the left, one page at a time, and one Aplicar at the end.

   Global rather than scoped, for the same reason as everything above: this renders inside a MudDialog, and a
   scoped .razor.css never reaches a MudBlazor root. The layout itself is dok-cadastro.css's — the same rail
   and the same panel every cadastro screen uses, which is precisely what the owner asked for ("os accordions
   serão menus à esquerda como temos hoje nas nossas páginas"). What is here is only what a dialog needs and a
   page does not: a height the dialog can scroll inside, and a footer that is part of the form rather than the
   dialog's own actions bar.
   ========================================================================================================== */

.dok-filter-dialog {
    display: flex;
    flex-direction: column;
    /* The dialog is as tall as the viewport allows and no taller; the middle scrolls, the footer never does.
       75vh rather than a fixed height so a short page does not leave a void under it. */
    min-height: min(75vh, 44rem);
    gap: .75rem;
}

.dok-filter-dialog__layout {
    flex: 1 1 auto;
    min-height: 0;
}

/* dok-cadastro.css positions the rail for a PAGE: sticky, 5.5rem down to clear the app bar. Inside a dialog
   there is no app bar and the scroll container is the dialog body, so the offset would push the menu below
   the first page it is meant to sit beside. Same reason for the content padding: it reserves room for a fixed
   page footer this form does not have — its footer is inside it. (Both rules existed for the DOK-557 pop-up
   and were deleted with it by DOK-798; they come back with the pop-up, under its own class.) */
.dok-filter-dialog .dok-cadastro-rail {
    top: 0;
    max-height: 100%;
    overflow-y: auto;
}

.dok-filter-dialog .dok-cadastro-content {
    padding-bottom: 0;
}

.dok-filter-dialog__content {
    min-width: 0;
}

.dok-filter-dialog__panel {
    height: 100%;
}

/* The middle: the form at a width a label can be read across, and a column beside it that says what the page
   is holding. auto-fits to one column below 1100px, where a second column would leave neither enough room. */
.dok-filter-dialog__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
    gap: 1rem 1.5rem;
    align-items: start;
}

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

.dok-filter-dialog__main {
    min-width: 0;
}

.dok-filter-dialog__aside {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem .85rem;
    border-radius: var(--dok-radius, 10px);
    border: 1px solid rgba(148, 163, 184, .18);
    background-color: var(--mud-palette-background-gray);
}

.dok-filter-dialog__aside-title {
    margin: 0;
    font-size: .78rem;
    font-weight: var(--dok-font-weight-bold);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.dok-filter-dialog__aside-empty {
    margin: 0;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.dok-filter-dialog__aside-list {
    margin: 0;
    padding-left: 1.05rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .82rem;
    line-height: 1.4;
}

.dok-filter-dialog__cleared {
    margin-bottom: .25rem;
}

/* Limpar tudo at one end, Aplicar at the other, and the count between them: the destructive control is never
   next to the one the user is reaching for. */
.dok-filter-dialog__footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding-top: .65rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.dok-filter-dialog__count {
    margin-inline-end: auto;
    font-size: .82rem;
    font-weight: var(--dok-font-weight-semibold);
    color: var(--mud-palette-text-secondary);
}

.dok-filter-dialog__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ---- one question per line (DOK-1109) ------------------------------------------------------------------
   The pop-up gives the form a column of its own, so a field at the full width of that column fits its chips
   and its helper line without either being cut. The owner asked for it by name on Âmbito and on Pessoas.

   DOK-1110 — and with room to breathe between them. The shared .55rem row gap is right for a grid of short
   fields side by side; stacked, each row carries a helper line under the control, so .55rem left the helper
   of one question closer to the next question than to its own. */
.dok-filter-grid--stacked {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.15rem;
}

/* ---- the Datas page ------------------------------------------------------------------------------------
   One legend per date type, its two sides underneath. A fieldset because the two pickers ARE one question
   with two ends, and the browser's own reset for fieldset/legend is what has to be undone here. */
.dok-adv-dates {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.dok-adv-dates__group {
    margin: 0;
    padding: .65rem .75rem .55rem;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: var(--dok-radius, 10px);
    min-width: 0;
}

.dok-adv-dates__legend {
    padding: 0 .35rem;
    font-size: .82rem;
    font-weight: var(--dok-font-weight-bold);
    color: var(--mud-palette-text-primary);
}

.dok-adv-dates__pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .5rem .9rem;
    align-items: start;
}

.dok-adv-dates__hint {
    margin: .35rem 0 0;
    font-size: .74rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

/* ---- the Processo page's lower half --------------------------------------------------------------------
   The fields the chosen Processo defines, under the Processo that defines them. */
.dok-filter-process__fields {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.dok-filter-process__fields-header {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.dok-filter-process__fields-header h4 {
    margin: 0;
    font-size: .9rem;
    font-weight: var(--dok-font-weight-bold);
}

.dok-filter-process__fields-header p {
    margin: .1rem 0 0;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

.dok-filter-process__fields-waiting {
    margin: .85rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .8rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* ---- a document's own fields, under that document ------------------------------------------------------
   Spans both columns of the document row: the fields belong to the whole row, not to the condition beside
   which they happen to start. */
.dok-adv-search__docs-fields-block {
    grid-column: 1 / -1;
    padding-top: .4rem;
    border-top: 1px dashed rgba(148, 163, 184, .28);
}

/* Nested, the group has no header of its own — the document row above it is the header. */
.dok-adv-docfields__group.is-nested {
    border: 0;
    padding: 0;
    background: none;
}

/* ---- the Anexos page's lower half ----------------------------------------------------------------------- */
/* DOK-1487 — the file name: the operator as wide as its longest word, the text taking the rest; one under the
   other where the column is narrow. */
.dok-adv-attachments__name {
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
    gap: .5rem .9rem;
    align-items: start;
}

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

.dok-adv-attachments__fields {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: .85rem;
}

.dok-adv-attachments__waiting,
.dok-adv-documents__waiting {
    margin: 0;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* ==========================================================================================================
   DOK-1110 — the acceptance pass over the pop-up.
   ========================================================================================================== */

/* THE DROPDOWN, back inside the app's own language. The owner's report was "a caixa de seleção está
   totalmente fora do padrão", and the screenshot showed why: the menu began at the MIDDLE of its own field
   and ran off the right of the dialog. That half is the anchor (BottomCenter on a full-width field puts the
   menu's left edge at the field's centre) and is fixed in the markup; this is the other half — a menu that
   looked like a bare list because it had no frame of its own, beside pickers that all have one. */
.dok-filter-menu.mud-popover {
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: var(--dok-radius, 10px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    overflow: hidden;
    /* Never wider than the control it belongs to, and never so tall it covers the form it is filtering. */
    max-width: 100%;
    max-height: min(22rem, 60vh);
}

.dok-filter-menu .mud-list-item {
    padding-top: .4rem;
    padding-bottom: .4rem;
    gap: .5rem;
}

/* The tick sits against its own option rather than at the far edge of a menu the option does not fill. */
.dok-filter-menu .mud-list-item-icon {
    min-width: 0;
    margin-inline-end: .25rem;
}

/* ---- what a page holds, under its name in the menu (DOK-1110) ------------------------------------------
   dok-cadastro.css gives the rail's summary one nowrap line, which is right for a cadastro step's short
   status ("Rascunho", an icon and a colour). A filter page's summary is a sentence per condition, and the
   owner asked to see the Área and the Processo there — two of them. Two clamped lines, then the ellipsis. */
.dok-filter-dialog .dok-cadastro-rail__summary {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

/* ---- the saved views, above the form (DOK-1110) --------------------------------------------------------- */
.dok-filter-dialog__views {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* The one command that replaces the toggle on a listing whose filter is a pop-up. */
.dok-filter-panel__primary {
    display: flex;
    align-items: center;
}