/*
 * DOK-271 — shared scaffold for interior listing pages.
 * Canonical pattern (see Users): header + monochrome stat cards + Jira-style
 * multi-select filter bar + table (no cards). Colour is reserved for state.
 * Reused by every listing page so the layout stays consistent.
 */

.dok-list { margin-top: -1rem; padding-bottom: 2rem; }
/* DOK-1510 — the page head is DokPageHeader, flat in its own stylesheet: the App no longer overrides it. */

/* DOK-1139 — the four numbers under the subtitle, derived from the stage counters the band already
   holds. One line, four items, the figure carrying the colour and the word staying quiet: four fully
   coloured phrases in a row would be four alarms. */
.dok-list__counts { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1rem; margin-top: .5rem; color: var(--mud-palette-text-secondary); font-size: .85rem; }
.dok-list__count { display: inline-flex; align-items: baseline; gap: .3rem; }
.dok-list__count b { font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dok-list__count--total b { color: var(--mud-palette-text-primary); }
.dok-list__count--flight b { color: var(--mud-palette-primary); }
.dok-list__count--resolution b { color: var(--mud-palette-error); }
.dok-list__count--closed b { color: var(--dok-tone-success-ink); }

/* The row of metric cards a listing lays out; the card itself is DokStatCard's, styled in dok-theme.css (DOK-1512). */
.dok-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }

.dok-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; padding: .7rem .85rem; border: 1px solid rgba(148, 163, 184, .2); border-radius: 10px; background: var(--mud-palette-surface); }
.dok-filterbar__search { flex: 1 1 18rem; min-width: 14rem; }
/* DOK-1514 — DokFilterBar's filters are the bar's own items: __filters lays out nothing (display: contents), so the
   width reaches each control's root (MudSelect's div.mud-select, MudTextField's div.mud-input-control, the date range's
   div.dok-daterange). A class put on a MudBlazor control lands inside it, which is why __select never sized anything
   (DOK-1433). A wide control (the organization picker) or one that takes its own width (a switch) is wrapped in a div
   carrying __wide or __auto. */
.dok-filterbar__filters { display: contents; }
.dok-filterbar__filters > * { flex: 0 0 11rem; min-width: 0; }
.dok-filterbar__filters > .dok-daterange { flex: 0 1 22rem; min-width: 16rem; }
.dok-filterbar__filters > .dok-filterbar__wide { flex: 1 1 18rem; min-width: 15rem; }
.dok-filterbar__filters > .dok-filterbar__auto { flex: 0 0 auto; }
.dok-filterbar__actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }

.dok-list__bulkbar { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; padding: .4rem .75rem; border: 1px solid rgba(var(--mud-palette-primary-rgb), .35); border-radius: 8px; background: rgba(var(--mud-palette-primary-rgb), .06); }

.dok-list-table { border: 1px solid rgba(148, 163, 184, .2); border-radius: 10px; }
.dok-list-table .mud-table-head th { color: var(--mud-palette-text-secondary); font-weight: var(--dok-font-weight-bold); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }

/* Reusable table cell helpers. */
.dok-cell-user { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.dok-cell-user__avatar { background: rgba(148, 163, 184, .22); color: var(--mud-palette-text-primary); font-size: .72rem; font-weight: var(--dok-font-weight-bold); }
.dok-cell-user__copy { display: flex; flex-direction: column; min-width: 0; }
.dok-cell-user__name { color: var(--mud-palette-text-primary); font-weight: var(--dok-font-weight-bold); font-size: .9rem; }
.dok-cell-user__sub { color: var(--mud-palette-text-secondary); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok-cell-primary { color: var(--mud-palette-text-primary); font-weight: var(--dok-font-weight-bold); font-size: .9rem; }
/* DOK-2198 — a column whose head and cells align to the right: a table's actions, and a column of figures. Twenty
   tables wrote it 41 times as style="text-align:right;" on their MudTh and MudTd. It is a global rule because the class
   is handed to MudTh/MudTd, whose <th>/<td> never carry a page's scope. Loaded after MudBlazor's
   .mud-table-cell { text-align: start }, so the same specificity wins by order; the stacked layout of a narrow screen
   keeps its own text-align: start !important, which beat the inline style too. */
.dok-cell-right { text-align: right; }

/* DOK-833 — a named person carrying a role, on ONE line (see DokRolePerson.razor).
   One line each is the whole point: two of these stack inside a row without making the row taller
   than the SLA cell already makes it.

   DOK-846 took the name off the line. What is left — avatar plus role tag — is intrinsically narrow and
   never grows with the data, which is the horizontal space the owner asked back for the columns to the
   right. The line therefore no longer needs to shrink anything, so there is no ellipsis rule here any
   more; the name lives in title= and in the off-screen span below. */
/* DGI-4 — the people cell as one focusable group: the two role lines are its content, and the group
   itself is what carries the approvers and editors on hover and on keyboard focus. `display: contents`
   so wrapping the lines changes nothing about how they were already laid out; the focus ring is drawn on
   the cell instead, since a `display: contents` box has no geometry of its own to outline. */
.dok-dossier-people { display: contents; }
.work-items-list__people:focus-visible,
.dok-dossier-people:focus-visible .work-items-list__people {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.dok-role-person { display: flex; align-items: center; gap: .4rem; min-width: 0; line-height: 1.15; }

/* DOK-1139 — the named variant: the identity span comes back into the layout, beside the avatar.
   DOK-846 hid that span because TWO named people per row cost a column as wide as the longest name in the
   tenant; the Dossier listing now shows one. Nothing is duplicated to achieve it — the same span a screen
   reader was already reading is simply no longer clipped. */
.dok-role-person--named { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "avatar name"; align-items: center; column-gap: .5rem; }
.dok-role-person--named > .dok-person-avatar { grid-area: avatar; }
/* DOK-1139, on review — and the role word leaves the screen. The first version kept it, quieted, under the
   name; the owner, on DEV, asked for it to go: "Fica informação em duplicidade." The column header already
   says Responsável, and the cell holds one person.
   Off-screen and not display:none, for the reason DOK-846 gave when it did this to the name: the word stays
   in the row's text, so a screen reader still hears whose name follows, and title= still carries it on
   hover. Same visually-hidden recipe as .dok-role-person__identity below. */
.dok-role-person--named .dok-role-person__role { 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%); }
/* Un-clipped, not re-rendered: this is the same span DOK-846 pushed off-screen. */
.dok-role-person--named .dok-role-person__identity { grid-area: name; position: static; width: auto; height: auto; margin: 0; overflow: hidden; clip: auto; clip-path: none; color: var(--mud-palette-text-primary); font-size: .82rem; font-weight: 760; white-space: nowrap; text-overflow: ellipsis; }
.dok-role-person + .dok-role-person { margin-top: .25rem; }
/* DOK-1505 — the avatar's size is DokPersonAvatar's variant (Inline on the line, Compact when named), no longer two
   rules here fighting MudBlazor's `.mud-avatar.mud-avatar-small` for it. */
.dok-role-person__role { display: inline-flex; align-items: center; gap: .2rem; flex: 0 0 auto; padding: .1rem .34rem; border-radius: 999px; font-size: .64rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
/* The margin reset is not cosmetic tidying: .mud-icon-root ships `margin-inline-end: 4px`, which would
   sit on top of the flex gap above and widen every one of these tags. */
.dok-role-person__role .mud-icon-root { font-size: .85rem; margin: 0; margin-inline-end: 0; }
/* DOK-846 — the name, off-screen. This is the rule that makes the change a VISUAL removal rather than a
   deletion of the identity: the span is in the row's text, so a screen reader still announces who the
   person is after the role word, while nothing about it occupies the layout. display:none would take it
   out of the layout too and out of the accessibility tree with it, which is why it is not used. Same
   recipe as .dok-orgpath__full below and .dok-org-scope__ancestry (DOK-839) — the 1px/-1px/rect() are
   that recipe, not design values. */
.dok-role-person__identity {
    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%);
}

/* The two tones. Colour REINFORCES the word and the icon here; it never carries the distinction on
   its own, which is the rule the canonical chips' .dok-pill states below and the reason both variants also differ
   in label and glyph. */
.dok-role-person--assignee .dok-role-person__role { color: var(--dok-tone-primary-ink); background: rgba(var(--mud-palette-primary-rgb), .10); }
.dok-role-person--reporter .dok-role-person__role { color: var(--mud-palette-text-secondary); background: rgba(148, 163, 184, .16); }

/* DOK-1515 — a status with no chip of its own is DokStatusPill, in the canonical chips' pill (.dok-pill, below). The
   scaffold's .dok-status, five tones and no glyph, went with it. */

/* DOK-327 — the operational status of a document is drawn by DokDocumentStatusChip, in the canonical chips' pill
   (.dok-pill, below) since DOK-1506: the icon distinguishes, the tone reinforces. Its own .dok-doc-status went with it. */

/* DOK-1444 — a document's confidentiality, in its accordion body (DokDocumentConfidentiality). It borrowed the validity
   date's picker class, whose 14rem fits a date and cut the longest option short: "Como o dossiê (Confidencial)" is 224px
   of Inter at 16px, and the outline's padding and the arrow take the select to 18rem. MudSelect puts its Class on the
   inner .mud-input-control while the row's flex item is the .mud-select around it, so that one is the one allowed to
   shrink below 18rem on a phone, with the chosen text ending in an ellipsis rather than leaving the page. */
.dok-doc-confidentiality > .mud-select { min-width: 0; max-width: 100%; }
.dok-doc-confidentiality__picker { width: 18rem; max-width: 100%; }

/* The pill of the canonical chips (modernization phase 3): DokDossierStateChip (DOK-1434) and DokPriorityChip
   (DOK-1446) draw with it, and the concepts still to close join them rather than copying it. It was .dok-state, the
   state's own, until the priority became the second concept to need the same shape; one family is what keeps the
   chips one look. The DOK-327 pill; the tone is the value's own colour token through WorkItemLifecyclePresentation.Tone,
   with one rule per token so none falls into the default (DOK-511 found Tertiary painted Draft's grey that way). Type
   comes from the --dok-* scale and colour from the palette only, so the pill follows the dark theme; the listing's old
   .tone-default and .tone-dark carried fixed hex and did not. DOK-1435 — the text takes the tone's ink
   (--dok-tone-*-ink, dok-theme.css), the wash and the border keep the palette colour. */
.dok-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    box-sizing: border-box;
    max-width: 100%;
    padding: .16rem .5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-bold);
    line-height: var(--dok-line-height-tight);
    white-space: nowrap;
    vertical-align: middle;
}

.dok-pill__icon { display: inline-grid; place-items: center; flex: 0 0 auto; }
.dok-pill__icon .mud-icon-root { font-size: .95rem; }
.dok-pill__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* DOK-1509 — how many are in the state the pill names (a batch's funnel): the figure after a hairline of its own ink. */
.dok-pill__count { margin-left: .1rem; padding-left: .35rem; border-left: 1px solid currentColor; font-variant-numeric: tabular-nums; }

.dok-pill--chip { padding: .28rem .6rem; }
.dok-pill--fill { display: flex; width: 100%; }
.dok-pill--inline { padding: 0; border: 0; background: none; }
.dok-pill--dot { width: .65rem; height: .65rem; padding: 0; border-radius: 50%; }

.dok-pill--tone-default { color: var(--dok-tone-default-ink); border-color: rgba(148, 163, 184, .30); background: rgba(148, 163, 184, .14); }
.dok-pill--tone-dark { color: var(--dok-tone-dark-ink); border-color: rgba(var(--mud-palette-dark-rgb), .30); background: rgba(var(--mud-palette-dark-rgb), .12); }
.dok-pill--tone-primary { color: var(--dok-tone-primary-ink); border-color: rgba(var(--mud-palette-primary-rgb), .24); background: rgba(var(--mud-palette-primary-rgb), .10); }
.dok-pill--tone-secondary { color: var(--dok-tone-secondary-ink); border-color: rgba(var(--mud-palette-secondary-rgb), .24); background: rgba(var(--mud-palette-secondary-rgb), .10); }
.dok-pill--tone-tertiary { color: var(--dok-tone-tertiary-ink); border-color: rgba(var(--mud-palette-tertiary-rgb), .28); background: rgba(var(--mud-palette-tertiary-rgb), .12); }
.dok-pill--tone-info { color: var(--dok-tone-info-ink); border-color: rgba(var(--mud-palette-info-rgb), .24); background: rgba(var(--mud-palette-info-rgb), .10); }
.dok-pill--tone-success { color: var(--dok-tone-success-ink); border-color: rgba(var(--mud-palette-success-rgb), .26); background: rgba(var(--mud-palette-success-rgb), .12); }
.dok-pill--tone-warning { color: var(--dok-tone-warning-ink); border-color: rgba(var(--mud-palette-warning-rgb), .30); background: rgba(var(--mud-palette-warning-rgb), .14); }
.dok-pill--tone-error { color: var(--dok-tone-error-ink); border-color: rgba(var(--mud-palette-error-rgb), .26); background: rgba(var(--mud-palette-error-rgb), .11); }

/* Dot: the colour alone, so it takes the tone's ink as its fill. */
.dok-pill--dot.dok-pill--tone-default { background: var(--mud-palette-text-secondary); }
.dok-pill--dot.dok-pill--tone-dark { background: var(--mud-palette-dark); }
.dok-pill--dot.dok-pill--tone-primary { background: var(--mud-palette-primary); }
.dok-pill--dot.dok-pill--tone-secondary { background: var(--mud-palette-secondary); }
.dok-pill--dot.dok-pill--tone-tertiary { background: var(--mud-palette-tertiary); }
.dok-pill--dot.dok-pill--tone-info { background: var(--mud-palette-info); }
.dok-pill--dot.dok-pill--tone-success { background: var(--mud-palette-success); }
.dok-pill--dot.dok-pill--tone-warning { background: var(--mud-palette-warning); }
.dok-pill--dot.dok-pill--tone-error { background: var(--mud-palette-error); }

/* Inline sits in running text: no pill, so it drops the background and the border the tones give it. */
.dok-pill--inline[class*="dok-pill--tone-"] { background: none; border-color: transparent; }

/* DOK-2214 — a tag (DokTag): words that name something, in the pill, without a tone. The outline and the text's own ink
   tell it from a status, whose wash carries a tone, and its weight is a step below a status's for the same reason; the
   glyph is the secondary ink, so it adds to the words without competing with them. Tags side by side in a cell or a row
   keep a hairline of room between them and none after the last, which is what the MudChips' .dok-rolechip gave them. */
.dok-pill--tag {
    color: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-lines-default);
    background: transparent;
    font-weight: var(--dok-font-weight-semibold);
}

.dok-pill--tag .dok-pill__icon { color: var(--mud-palette-text-secondary); }
.dok-pill--tag:not(:last-child) { margin-inline-end: .25rem; }

/* DOK-1496 (modernization phase 3, concept 5) — DokDossierNumber, the one drawing of a dossier's number. Inline takes
   the size of the words around it and keeps its own weight and figures, so #123 reads the same in a header, a card and
   a cell; as a link it takes the primary ink. Tile is the handle of a row in a listing of dossiers, the box the
   listing drew as .work-items-list__seq, at the size it had in both of its tables. */
.dok-dossier-number {
    font-variant-numeric: tabular-nums;
    font-weight: var(--dok-font-weight-bold);
    white-space: nowrap;
}

a.dok-dossier-number { color: var(--dok-tone-primary-ink); text-decoration: none; }
a.dok-dossier-number:hover,
a.dok-dossier-number:focus-visible { text-decoration: underline; }

.dok-dossier-number--tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 2.5rem;
    height: 1.85rem;
    padding: 0 .6rem;
    border-radius: var(--dok-radius-sm);
    background: rgba(var(--mud-palette-primary-rgb), .09);
    color: var(--dok-tone-primary-ink);
    font-size: var(--dok-font-size-sm);
    transition: background .16s ease;
}

a.dok-dossier-number--tile:hover,
a.dok-dossier-number--tile:focus-visible { background: rgba(var(--mud-palette-primary-rgb), .2); }

a.dok-dossier-number--tile:focus-visible {
    outline: 2px solid rgba(var(--mud-palette-primary-rgb), .55);
    outline-offset: 2px;
}

/* DOK-1500 (modernization phase 3, concept 6) — DokCatalogIcon, the one drawing of an Área's or a Processo's icon, and
   DokAreaProcessLabel, the line that names one with it. The glyph takes the colour of the text around it unless the
   Área's accent is given; the label takes the size and colour of the words around it, like DokDossierNumber's Inline,
   and a long name ends in an ellipsis instead of wrapping a row (the whole name is in its title). */
.dok-catalog-icon--accent { color: var(--dok-catalog-accent, currentColor); }

.dok-area-process {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}

.dok-area-process > .dok-catalog-icon { flex: 0 0 auto; }

.dok-area-process__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* DOK-1505 (modernization phase 3, concept 8) — DokPersonAvatar, the one drawing of a person. The colour is the chips'
   own (.dok-pill--tone-*, the tone PersonTone picks from the name): the palette's wash, the tone's ink, so it follows
   the dark theme and a tenant's palette. The size is the variant's, and the initials grow with it, so no variant names
   a font size of its own. A plain span, not a MudAvatar: MudBlazor sizes .mud-avatar with two classes, which outranked
   every page's own avatar rule without a word (dok-listing.css used to say so of .dok-assignee-avatar). */
.dok-person-avatar {
    --dok-person-avatar-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--dok-person-avatar-size);
    height: var(--dok-person-avatar-size);
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 50%;
    font-size: calc(var(--dok-person-avatar-size) * .38);
    font-weight: var(--dok-font-weight-bold);
    line-height: 1;
    letter-spacing: .03em;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
}

.dok-person-avatar--inline { --dok-person-avatar-size: 1.5rem; }
.dok-person-avatar--compact { --dok-person-avatar-size: 2rem; }
.dok-person-avatar--header { --dok-person-avatar-size: 3rem; }
.dok-person-avatar--profile { --dok-person-avatar-size: 6rem; }

.dok-person-avatar__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The margin reset is not tidying: .mud-icon-root ships margin-inline-end, which would push the glyph off centre. */
.dok-person-avatar__icon.mud-icon-root {
    width: 1.6em;
    height: 1.6em;
    margin: 0;
    font-size: inherit;
}

.dok-rolechip { margin: 0 .2rem 0 0; }
.dok-muted { color: var(--mud-palette-text-secondary); font-size: .8rem; }

@media (max-width: 960px) { .dok-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
    .dok-filterbar__filters > *, .dok-filterbar__filters > .dok-daterange, .dok-filterbar__filters > .dok-filterbar__wide { flex: 1 1 100%; }
}

/* DOK-798 — a listing that adopted the shared inline filter panel puts its controls in a row inside the
   panel's body (see .dok-filter-panel in dok-advanced-search.css). */
.dok-filter-panel__inline { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.dok-filter-panel__inline > * { flex: 0 1 13rem; }

/* DOK-593 — "Documentos por vencer". The three stat cards are also the window selector, so they are
   anchors rather than divs and need the link reset the scaffold's <div> cards never needed. Declared
   after the responsive rule above on purpose: an appended `repeat(3, …)` would otherwise beat the
   960px `repeat(2, …)` by source order and leave three cards squeezed side by side on a phone. */
.dok-stats--windows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .dok-stats--windows { grid-template-columns: 1fr; } }

/* DOK-430 — o consumo de IA do cartão de consumo: duas medidas, não quatro. Depois da regra responsiva
   acima pela mesma razão que a de cima diz — por ordem de fonte, um `repeat(2, …)` acrescentado antes dela
   seria batido no telemóvel. */
.dok-usage-card__ai { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 960px) { .dok-usage-card__ai { grid-template-columns: 1fr; } }

/* One dossier can be scoped to several units; each full path gets its own line rather than running
   them together, because "Empresa / Filial / A, Empresa / Filial / B" is unreadable at 0.8rem. */
.dok-orgunit-path { white-space: normal; }

/* DOK-570 — one organisational unit on two lines (see DokOrgUnitPath.razor).

   The block is `.dok-orgpath`, deliberately NOT `.dok-orgunit-path`: that name is already taken, three lines
   above, by DOK-593's one-off rule, and it sets `white-space: normal`, which is the precise opposite of the
   `nowrap` each line here needs to ellipsise. Two blocks whose names differ by one hyphen would be a trap, so
   they differ by a word instead.

   Here, and not in a .razor.css: a scoped stylesheet never reaches inside a MudBlazor component's root, and
   the four issues that consume this put it inside MudTd. Same reasoning as .dok-role-person above. */
.dok-orgpath {
    display: flex;
    flex-direction: column;
    /* Both of these exist so the ellipsis can happen at all: a flex item's default min-width is auto, so
       without this the block refuses to shrink below its text and the cell overflows instead of truncating. */
    min-width: 0;
    max-width: 100%;
    line-height: var(--dok-line-height-tight);
}

/* Line one: the leaf, in the listing's own primary weight — this is what the eye scans a column for, and
   the epic asks for it "em destaque". Never shortened by dropping levels (it IS the level), so the CSS
   ellipsis below is its only truncation, and the whole of it stays in title= and in the accessible name. */
.dok-orgpath__leaf {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dok-text-primary);
    font-size: var(--dok-font-size-sm);
    font-weight: var(--dok-font-weight-bold);
}

/* Line two: the ancestry, secondary tone and smaller body, as the epic specifies — it is the disambiguator
   you consult when two leaves collide, not the thing you scan for.

   text-overflow here is the LAST resort, not the mechanism: DokOrgUnitPath has already dropped whole levels
   from the outermost end, so this only bites on a single very long name. That layering is the point — C#
   cuts where a cut is predictable, CSS cuts where only a browser knows the width. */
.dok-orgpath__ancestors {
    min-width: 0;
    margin-top: var(--dok-space-2xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
    transition: color var(--dok-transition);
}

/* Raising the ancestry to full contrast on hover is the affordance that says there is more here than the
   line shows — which there is, in title=. */
.dok-orgpath:hover .dok-orgpath__ancestors {
    color: var(--dok-text-primary);
}

/* The full path, off-screen. display:none would not be announced either; this is the same recipe DOK-839
   uses for .dok-org-scope__ancestry, and the 1px/-1px/rect() are that recipe rather than design values. */
.dok-orgpath__full {
    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-556 — several units in ONE cell (the expiring-documents table scopes a document to a collection).
   Each unit is now two lines rather than one, so without a gap the second unit's leaf sits directly under
   the first unit's ancestry and the two paths read as one four-line block. Only between them: a leading
   margin on the first would push the cell's content off the row's baseline. */
.dok-orgpath--stacked + .dok-orgpath--stacked {
    margin-top: var(--dok-space-xs);
}

/* DOK-556 — the SAME component laid out on one line, for a filter chip (owner, 2026-08-23). See the remarks
   on DokOrgUnitPath.SingleLine for why a chip is allowed what a grid cell is not: a chip wraps to fit its own
   content instead of sharing a fixed column, and it has no room for a second line at all.

   Every declaration below only re-lays-out what the two-line form already declared. Nothing about which
   levels survive truncation changes — that is decided in C#, identically for both forms. */
.dok-orgpath--inline {
    flex-direction: row;
    align-items: baseline;
    gap: var(--dok-space-2xs);
}

/* The two levels share what space there is instead of one of them eating it: 0 1 auto lets either shrink,
   and min-width:0 is what makes the shrink legal at all (a flex item defaults to min-width:auto and refuses
   to go below its text, which is how a chip ends up overflowing rather than ellipsising). */
.dok-orgpath--inline .dok-orgpath__leaf,
.dok-orgpath--inline .dok-orgpath__ancestors {
    flex: 0 1 auto;
    min-width: 0;
}

/* The second line's top margin is a two-line device; on one line it would push the ancestry off the
   baseline it now shares with the leaf. */
.dok-orgpath--inline .dok-orgpath__ancestors {
    margin-top: 0;
}

/* Only in the inline form — the two-line form separates its levels by being on two lines. Never shrinks:
   a truncated separator is a stray character. */
.dok-orgpath__separator {
    flex: 0 0 auto;
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-xs);
}

/* No unit at all — the same tone as the second line, so an empty cell reads as absence rather than as a
   different kind of value. */
.dok-orgpath--empty {
    color: var(--dok-text-secondary);
    font-size: var(--dok-font-size-sm);
}

/* Only when the component was asked to take focus (Focusable), which is the only time this can match.
   Values copied verbatim from the shell's DOK-199 ring in dok-theme.css rather than re-invented: this is a
   <div>, so the shell's `a`/`button` selectors do not reach it, and a focus ring that differs from every
   other one on the page is a worse answer than a duplicated declaration. */
.dok-orgpath[tabindex]:focus-visible {
    outline: 2px solid rgba(var(--mud-palette-primary-rgb), 0.65);
    outline-offset: 2px;
    border-radius: var(--dok-radius-sm);
}

/* The shell already flattens transitions under reduced motion, but only for descendants of
   .dok-premium-app. This component is shared, and a dialog or a share page renders outside that root. */
@media (prefers-reduced-motion: reduce) {
    .dok-orgpath__ancestors {
        transition: none;
    }
}
/* DOK-599 — acting on a row of "Documentos por vencer". Both editors open as a child row UNDER the row
   they are about rather than in a modal, so the layout has to make a full-width cell look like a panel
   instead of a table cell: a tinted band, room to breathe, and the controls on one line until they no
   longer fit. */
.dok-doc-actions { white-space: nowrap; text-align: right; }
.dok-doc-actions__blocked { white-space: normal; display: inline-block; max-width: 16rem; }

.dok-doc-editor > td { background: rgba(148, 163, 184, .08); padding: .85rem 1rem; }
.dok-doc-editor--replace > td { background: rgba(var(--mud-palette-error-rgb), .06); }

.dok-doc-editor__body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.dok-doc-editor__copy { display: flex; flex-direction: column; gap: .15rem; margin-right: auto; }
.dok-doc-editor__date { flex: 0 1 12rem; }
.dok-doc-editor__actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.dok-doc-editor__note, .dok-doc-editor__refusal, .dok-doc-editor__picked { margin-top: .4rem; font-size: .8rem; }
.dok-doc-editor__targets { display: flex; flex-direction: column; margin: .5rem 0; }
.dok-doc-editor__confirm { margin-top: .5rem; }

/* DOK-106/DOK-109 — the Audit Center's "What happened" cell, and the drill-down panel it opens.
 *
 * The sentence is server-derived and can run long (an entity change lists every field that moved), so
 * the cell clamps rather than pushing the table sideways: an audit page is read by scanning down a
 * column, and a row that reflows the grid costs more than the words it saves. */
.audits-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 26rem;
}

.audits-target {
    margin-top: .15rem;
    text-transform: none;
    font-size: .74rem;
    padding-inline: .35rem;
}

/* A panel beside the investigation, not a page that replaces it. Fixed to the viewport edge so it stays
 * put while the reader keeps scanning the table underneath — the whole reason DOK-108's layout note
 * asked for a panel before navigation. */
.audits-target-panel {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1300;
    width: min(22rem, calc(100vw - 2rem));
    padding: .9rem 1rem;
    border-radius: .6rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 .5rem 1.75rem rgba(0, 0, 0, .18);
}

.audits-target-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}

@media (max-width: 600px) {
    .audits-target-panel { left: 1rem; right: 1rem; width: auto; }
    .audits-summary { max-width: none; }
}

/* DOK-110 — the mark on an audit row that cannot be joined to its flow.
 *
 * Amber and discreet, not red and loud: most historical rows carry it (they were written before
 * correlation ids were honest), and a page of alarms is a page nobody reads. NEVER COLOUR ALONE — the
 * dot always travels with words, because the theme defines no *ContrastText and some of its pairs fail
 * WCAG AA, so a purely chromatic signal would be invisible to part of the audience most likely to be
 * reading an audit report. */
.audits-break {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .15rem;
    font-size: .72rem;
    font-weight: var(--dok-font-weight-semibold);
    color: var(--mud-palette-text-secondary);
    cursor: help;
}

.audits-break__dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--mud-palette-warning);
    flex: 0 0 auto;
}


/* DOK-243 — the organization's own page (/tenant). The storage card carries a thin track of consumption against
   the plan's quota: monochrome below 80%, amber from 80%, red from the limit — the thresholds the usage alerts use
   (DOK-871), and the only colour on the page. The card's line under its value is DokStatCard's Note (DOK-1512). */
.dok-quota { margin-top: .45rem; }
/* DOK-2196 — the track, its fill and the three tones are DokProgressBar's (dok-theme.css): muted, warning, error. */
.dok-own-tenant__edit { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: 1rem; margin-bottom: 1rem; }
@media (max-width: 960px) { .dok-own-tenant__edit { grid-template-columns: 1fr; } }

/* DOK-1325 — the cycle-time report: one outlined card per Process, its figures on the right of its name, and its two
   tables (by stage, by state) side by side, one under the other on a phone. Numbers right-aligned, in tabular figures. */
.dok-cycle-time__period { min-width: 11rem; }
.dok-cycle-time__process-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.dok-cycle-time__figures { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .9rem; font-weight: var(--dok-font-weight-semibold); }
.dok-cycle-time__tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dok-cycle-time__table { min-width: 0; }
.dok-cycle-time__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 960px) { .dok-cycle-time__tables { grid-template-columns: 1fr; } }
.dok-cycle-time__process { background: var(--mud-palette-surface); }

/* DEV-62 — the Anexos page; DOK-1817 — its search in three lines: the file's name; the Área, the Processo and the
   Documento; the Entidade, only where the Processo collects per entity. Under them the Processo's fields in a grid,
   then the results with their fixed columns. Global, like the rest of this file, because the page is several
   components. */
.dok-completed-files__search {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.dok-completed-files__name-box {
    width: 100%;
}

/* The lines share one grid of three columns, so the Área, the Processo, the Documento and the Entidade line up
   whichever of them is shown. The Área and the Processo are one cell over two columns (DokAreaProcessPicker's own
   pair); the Documento keeps the third even while it is hidden, so nothing moves when it appears. */
.dok-completed-files__line {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: .75rem;
}

.dok-completed-files__line--name {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

/* Two classes, to win over the advanced search's own auto-fit grid of the pair (dok-advanced-search.css). */
.dok-completed-files__line .dok-completed-files__area-process {
    grid-column: span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.dok-completed-files__document,
.dok-completed-files__line--entity > * {
    min-width: 0;
}

@media (max-width: 960px) {
    .dok-completed-files__line,
    .dok-completed-files__line .dok-completed-files__area-process {
        grid-template-columns: minmax(0, 1fr);
    }

    .dok-completed-files__line .dok-completed-files__area-process {
        grid-column: auto;
    }

    .dok-completed-files__line--name {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* The Processo's fields: one zone that folds away as a whole, a caption over each level, the fields side by side. */
.dok-completed-files__fields,
.dok-completed-files__group {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.dok-completed-files__fields {
    padding-top: .75rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.dok-completed-files__fields-heading {
    margin: 0;
    font-size: var(--dok-font-size-base);
    font-weight: var(--dok-font-weight-regular);
}

.dok-completed-files__fields-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dok-completed-files__fields-chevron {
    margin-left: auto;
}

.dok-completed-files__fields-title {
    font-weight: var(--dok-font-weight-semibold);
}

.dok-completed-files__fields-hint,
.dok-completed-files__fields-none,
.dok-completed-files__operator,
.dok-completed-files__meta,
.dok-completed-files__area-name {
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
}

.dok-completed-files__fields-none {
    margin: 0;
}

.dok-completed-files__fields-state {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dok-completed-files__group-name {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-completed-files__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

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

/* A range is two bounds side by side, so it takes two cells. */
.dok-completed-files__field--range {
    grid-column: span 2;
}

.dok-completed-files__bounds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

/* The operator under the field, in line with the text inside the outlined box. */
.dok-completed-files__operator,
.dok-completed-files__incomplete {
    padding-left: .85rem;
}

.dok-completed-files__incomplete {
    color: var(--mud-palette-error);
    font-size: var(--dok-font-size-xs);
}

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

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

    .dok-completed-files__field--range {
        grid-column: auto;
    }
}

.dok-completed-files__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}

.dok-completed-files__count {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.dok-completed-files__order {
    flex: 0 0 16rem;
    max-width: 100%;
}

.dok-completed-files__file,
.dok-completed-files__process,
.dok-completed-files__entity,
.dok-completed-files__actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.dok-completed-files__actions-head,
.dok-completed-files__actions-cell {
    text-align: right;
}

.dok-completed-files__actions {
    justify-content: flex-end;
    gap: .25rem;
}

.dok-completed-files__identity,
.dok-completed-files__process-names {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dok-completed-files__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--dok-font-weight-medium);
}

.dok-completed-files__match {
    padding: 0 .05em;
    border-radius: 3px;
    background: rgba(var(--mud-palette-warning-rgb), .28);
    color: inherit;
}

.dok-completed-files__kind {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    background: rgba(100, 116, 139, .12);
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-bold);
    letter-spacing: .04em;
}

.dok-completed-files__kind--pdf {
    background: rgba(var(--mud-palette-error-rgb), .10);
    color: var(--dok-tone-error-ink);
}

.dok-completed-files__kind--image {
    background: rgba(var(--mud-palette-tertiary-rgb), .12);
    color: var(--mud-palette-tertiary-darken);
}

.dok-completed-files__kind--sheet {
    background: rgba(var(--mud-palette-success-rgb), .12);
    color: var(--dok-tone-success-ink);
}

.dok-completed-files__kind--document {
    background: rgba(var(--mud-palette-primary-rgb), .10);
    color: var(--dok-tone-primary-ink);
}

.dok-completed-files__area-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.dok-completed-files__entity--none {
    color: var(--mud-palette-text-disabled);
}

/* DOK-1858 — the Detalhe under a row: the identification, then the three levels of fields, each a grid of label and
   value. */
.dok-completed-files__detail-cell {
    padding: 0;
}

.dok-completed-files__detail {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .75rem 1rem 1rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.dok-completed-files__detail-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem .75rem;
    margin: 0;
}

.dok-completed-files__detail-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dok-completed-files__detail-label {
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
}

.dok-completed-files__detail-value {
    margin: 0;
    overflow-wrap: anywhere;
}

.dok-completed-files__detail-value--empty,
.dok-completed-files__detail-note {
    color: var(--mud-palette-text-disabled);
}

.dok-completed-files__detail-note {
    margin: 0;
}

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

/* DOK-1883 - the role grid (RolePermissionMatrix), «compare with the template» and the permission matrix page. */
.role-matrix__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .65rem;
    margin-bottom: .75rem;
}

.role-matrix__search {
    flex: 1 1 16rem;
}

.role-matrix__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.role-matrix__implied {
    margin-bottom: .75rem;
}

.role-matrix__check {
    width: 3rem;
}

.role-matrix__module-head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.role-matrix__module-name {
    font-weight: var(--dok-font-weight-bold);
}

.role-matrix__description {
    display: block;
}

.role-matrix__needs {
    display: block;
    font-size: var(--dok-font-size-xs);
}

.role-compare__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: .5rem;
}

.role-compare__list {
    margin: .25rem 0 0;
    padding-left: 1.1rem;
}

.role-matrix-page__scroll {
    overflow-x: auto;
}

.role-matrix-page__role {
    white-space: nowrap;
}

.role-matrix-page__cell {
    text-align: center;
}

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