/* 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. */

.dok-adv-search .mud-dialog-content.dok-adv-search__body {
    padding-top: var(--dok-space-md, 1rem);
}

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

.dok-adv-search__title-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Rule 2 — the invalidation banner sits above the whole layout so it is seen from every step. */
.dok-adv-search__notice {
    margin-bottom: .85rem;
}

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

/* The cadastro layout, minus the page footer area (the dialog's actions play that role). */
.dok-adv-search__layout {
    grid-template-areas: "rail content";
    align-items: stretch;
}

/* 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. */
@media (max-width: 1199.98px) {
    .dok-adv-search__layout {
        grid-template-areas: "rail" "content";
    }
}

/* Inside the dialog's own scroll container the rail sticks to the top of that container, not 5.5rem
   below it (that offset clears the app bar on a page, which does not exist here). */
.dok-adv-search .dok-cadastro-rail {
    top: 0;
}

/* Below 1200px dok-cadastro.css reserves room under the content for a fixed page footer; there is none. */
.dok-adv-search .dok-cadastro-content {
    padding-bottom: 0;
}

.dok-adv-search__content {
    min-height: 22rem;
}

.dok-adv-search__content .dok-cadastro-panel {
    height: 100%;
}

/* A step whose content has not been mounted yet (DOK-561/564/569/575/580 each fill one). Dashed, muted,
   deliberately unfinished-looking: it must never pass for a real empty state. */
.dok-adv-search__placeholder {
    display: grid;
    place-items: center;
    gap: .5rem;
    min-height: 12rem;
    padding: 2rem 1rem;
    border: 1px dashed rgba(148, 163, 184, .45);
    border-radius: var(--dok-radius, 10px);
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

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

/* Footer: step navigation on the left, the three outcomes on the right. */
.dok-adv-search__footer.mud-dialog-actions {
    padding: .65rem 1rem;
}

.dok-adv-search__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    flex-wrap: wrap;
}

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

.dok-adv-search__commit {
    margin-left: auto;
}

.dok-adv-search__invalid {
    color: var(--mud-palette-error);
    font-size: .78rem;
    font-weight: 700;
}

@media (max-width: 720px) {
    .dok-adv-search__content {
        min-height: 0;
    }

    .dok-adv-search__commit {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
}

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

.dok-adv-scope__node-type {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    font-weight: 700;
    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-815 — the eight lifecycle stages used to stack, one 52px row each, for 554px of mostly empty gutter:
   every stage holds one or two short chips, so each row spent ~85% of a 1900px viewport on nothing. Flowing
   them into as many columns as fit turns the same twelve chips into two or three rows. auto-fill (not
   auto-fit) keeps the column rhythm stable as the panel narrows, and the 12rem floor is wide enough for
   "Waiting Decision" + "Partially Approved" side by side; below that the grid drops to one column on its own,
   which is the pre-DOK-815 layout and therefore still correct on a phone. */
.dok-adv-scope__groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .35rem .9rem;
}

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

.dok-adv-scope__group-label {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

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

.dok-adv-scope__date {
    display: grid;
    grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
}

.dok-adv-scope__date-label {
    font-size: .82rem;
    font-weight: 600;
}

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

/* 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-filter-process__section-header h4 {
    margin: 0;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.dok-filter-process__section-header p {
    margin: .15rem 0 0;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

.dok-filter-process__areas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.dok-filter-process__area {
    --process-accent: var(--mud-palette-primary);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .32rem .7rem;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .8rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.dok-filter-process__area:hover,
.dok-filter-process__area:focus-visible {
    border-color: color-mix(in srgb, var(--process-accent) 55%, rgba(148, 163, 184, .35));
    outline: none;
}

.dok-filter-process__area--selected {
    border-color: color-mix(in srgb, var(--process-accent) 70%, transparent);
    background: color-mix(in srgb, var(--process-accent) 12%, var(--mud-palette-surface));
    color: var(--process-accent);
    font-weight: 800;
}

.dok-filter-process__area-count {
    padding: 0 .35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--process-accent) 14%, transparent);
    font-size: .7rem;
    font-weight: 800;
}

.dok-filter-process__search {
    max-width: 28rem;
}

.dok-filter-process__list {
    display: grid;
    gap: .4rem;
    max-height: 20rem;
    overflow-y: auto;
    padding-right: .15rem;
}

.dok-filter-process__row {
    --process-accent: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    min-width: 0;
    padding: .55rem .75rem;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: var(--dok-radius, 10px);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.dok-filter-process__row:hover,
.dok-filter-process__row:focus-visible {
    border-color: color-mix(in srgb, var(--process-accent) 55%, rgba(148, 163, 184, .25));
    outline: none;
}

.dok-filter-process__row--selected {
    border-color: color-mix(in srgb, var(--process-accent) 70%, transparent);
    background: color-mix(in srgb, var(--process-accent) 8%, var(--mud-palette-surface));
}

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

.dok-filter-process__row-main strong {
    overflow: hidden;
    font-size: .88rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dok-filter-process__row-main small {
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
}

/* The count is the point of the row, so it never shrinks and never wraps. Zero is written out in words
   (rule 4: a Processo with no dossiers in scope stays on the list), so it is not styled as an error. */
.dok-filter-process__row-count {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-size: .74rem;
    font-weight: 750;
    white-space: nowrap;
}

.dok-filter-process__row--selected .dok-filter-process__row-count {
    color: var(--process-accent);
}

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

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

.dok-filter-process__state--compact {
    min-height: 0;
    padding: .7rem;
}

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

@media (prefers-reduced-motion: reduce) {
    .dok-filter-process__area,
    .dok-filter-process__row {
        transition: none;
    }
}

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

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

.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: 600;
    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-header {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.dok-adv-docfields__level-title {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.dok-adv-docfields__level-label {
    font-weight: 600;
    font-size: .85rem;
}

/* Rule 3 of DOK-580: "at least one attachment satisfies it" is said here, permanently, not in a tooltip. */
.dok-adv-docfields__level-hint {
    font-size: .74rem;
    line-height: 1.35;
    color: var(--mud-palette-text-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: 700;
    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: 700;
    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: 700;
}

.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: 600;
    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(--mud-palette-warning);
    font-weight: 600;
}

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

.dok-filter-panel__search {
    flex: 1 1 18rem;
    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;
}

.dok-filter-panel__live {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
}

.dok-filter-panel__live--pending {
    color: var(--mud-palette-text-secondary);
}

.dok-filter-panel__live--blocked {
    color: var(--mud-palette-warning);
}

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

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

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

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

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

.dok-dossier-filter__spacer {
    flex: 1 1 auto;
}

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

.dok-adv-accordion__section {
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.dok-adv-accordion__section--open {
    border-color: rgba(var(--mud-palette-primary-rgb), .38);
}

.dok-adv-accordion__heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

/* DOK-815 — the header was already the whole clickable area (a full-width <button> since DOK-798), but it
   measured 41px on DEV, which is under every published touch-target floor, and nothing about it said
   "collapsible" except a 20px chevron at the far right.

   min-height, not padding, is what buys the 44px: padding alone grows with the font and would undo the
   compaction this issue is also asking for. The row therefore gets SHORTER in padding and TALLER in guaranteed
   hit area at the same time. touch-action: manipulation removes the 300ms double-tap-zoom delay that makes a
   tap feel unregistered on a tablet. */
.dok-adv-accordion__header {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 44px;
    padding: .35rem .7rem;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: .9rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.dok-adv-accordion__header:hover {
    background: rgba(148, 163, 184, .1);
}

/* The open section is tinted as well as outlined, so "which of these is expanded" survives a glance down a
   list of five and does not rest on the chevron alone. */
.dok-adv-accordion__section--open .dok-adv-accordion__header {
    background: rgba(var(--mud-palette-primary-rgb), .06);
}

.dok-adv-accordion__section--open .dok-adv-accordion__header:hover {
    background: rgba(var(--mud-palette-primary-rgb), .12);
}

/* outline-offset is negative because the section clips with overflow: hidden — an outward ring would be cut
   off on the very edges that make it readable, and the header is the section's first child, so the top of the
   ring is exactly what gets lost.

   DOK-815 — the selector carries the parent purely to win a specificity fight it was silently losing. The
   shell declares `.dok-premium-app button:focus-visible { outline-offset: 2px }` (dok-shell.css), which is
   two classes AND an element (0,2,1) against this rule's one class and one pseudo-class (0,2,0). So the
   -2px written here since DOK-798 never applied: measured on DEV, the focused header computed
   `outline-offset: 2px` and drew its ring into the clipped edge. Naming the container makes this (0,3,0),
   which wins. Do not "simplify" the selector back — the offset silently flips and the ring is cropped again. */
.dok-adv-accordion .dok-adv-accordion__header:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* DOK-815 — the section's own icon was carrying a class nothing declared, so it inherited the title's full
   weight and competed with it. Muted, it does what an icon on a header is for: mark the row, not lead it.
   (The class was already in the markup since DOK-798; only the rule is new.) */
.dok-adv-accordion__icon {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

.dok-adv-accordion__section--open .dok-adv-accordion__icon {
    color: var(--mud-palette-primary);
}

.dok-adv-accordion__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* DOK-815 — the chevron reads as a control rather than as decoration: a 26px disc that lights up with the
   header. It is NOT a button — the whole header is the button, and nesting one inside it would be invalid
   markup and a second tab stop for the same action. */
.dok-adv-accordion__chevron {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .16);
    color: var(--mud-palette-text-secondary);
    transition: background-color .15s ease, color .15s ease;
}

.dok-adv-accordion__header:hover .dok-adv-accordion__chevron {
    background: rgba(148, 163, 184, .3);
}

.dok-adv-accordion__section--open .dok-adv-accordion__chevron {
    background: rgba(var(--mud-palette-primary-rgb), .16);
    color: var(--mud-palette-primary);
}

.dok-adv-accordion__section--disabled .dok-adv-accordion__chevron {
    background: rgba(148, 163, 184, .1);
    color: var(--mud-palette-text-disabled);
}

@media (prefers-reduced-motion: reduce) {
    .dok-adv-accordion__chevron {
        transition: none;
    }
}

/* DOK-815 — what a COLLAPSED section says it holds. The header's status word only ever counted ("2
   condições"); this says which two, so a step can be folded away without the choice going with it.
   Rendered outside the MudCollapse on purpose: it is the collapsed state's content, so it must not be
   inside the thing that hides when collapsed. */
.dok-adv-accordion__chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin: 0;
    padding: 0 .7rem .5rem 2.05rem;
}

.dok-adv-accordion__chosen-item {
    max-width: 100%;
    padding: .1rem .5rem;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), .3);
    border-radius: 999px;
    background: rgba(var(--mud-palette-primary-rgb), .07);
    color: var(--mud-palette-text-primary);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dok-adv-accordion__chosen-more {
    color: var(--mud-palette-text-secondary);
    font-size: .74rem;
    font-weight: 700;
}

/* The accordion's replacement for the wizard's "step locked". The section is RENDERED and stays focusable
   (aria-disabled, not the disabled attribute) so the reason below is reachable from the keyboard — a control
   removed from the tab order takes its own explanation with it. */
.dok-adv-accordion__section--disabled {
    background: rgba(148, 163, 184, .07);
}

.dok-adv-accordion__section--disabled .dok-adv-accordion__header {
    color: var(--mud-palette-text-disabled);
    cursor: not-allowed;
}

.dok-adv-accordion__section--disabled .dok-adv-accordion__header:hover {
    background: transparent;
}

.dok-adv-accordion__reason,
.dok-adv-accordion__cleared {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: 0;
    padding: 0 .7rem .5rem 2.05rem;
    font-size: .78rem;
    line-height: 1.35;
}

.dok-adv-accordion__reason {
    color: var(--mud-palette-text-secondary);
}

/* Rule 2 of DOK-557, said on the section that lost its conditions rather than only in the banner. */
.dok-adv-accordion__cleared {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

.dok-adv-accordion__body {
    padding: 0 .75rem .7rem; /* DOK-815 */
}

.dok-adv-accordion__body:empty {
    padding: 0;
}

/* The page-only block inside the Âmbito section: same shape as the contract blocks, dashed so it reads as a
   different kind of restriction, with its note in the header. */
.dok-adv-scope__block--page-only {
    border: 1px dashed rgba(148, 163, 184, .55);
    border-radius: 8px;
    padding: .6rem .7rem;
    background: rgba(148, 163, 184, .07);
}

@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. */
@media (max-width: 900px) {
    .dok-adv-accordion__header {
        min-height: 48px;
        gap: .5rem;
    }
}

@media (max-width: 600px) {
    .dok-adv-accordion__status {
        display: none;
    }

    .dok-adv-accordion__title {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .dok-adv-accordion__chosen,
    .dok-adv-accordion__reason,
    .dok-adv-accordion__cleared {
        padding-left: .7rem;
    }

    /* One column of stages on a phone: 12rem minmax tracks would each overflow a 320px viewport once the
       grid's own gap is counted, and an overflowing grid track is exactly how a page starts scrolling
       sideways. */
    .dok-adv-scope__groups {
        grid-template-columns: minmax(0, 1fr);
    }
}