/*
 * 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-list__head { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-bottom: 1rem; }
/* DOK-271: flatten the shared DokPageHeader "hero" (gradient box + accent line) so detail/settings
   pages match the flat listing header. App-level override — does not touch BuildingBlocks. */
.dok-page-header-wrapper .dok-page-header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 1rem 0 !important;
}
.dok-page-header-wrapper .dok-page-header::before { display: none !important; }

/* Match DokPageHeader so listing and detail pages share one header look. */
.dok-list__title { color: var(--mud-palette-text-primary); font-weight: 800; letter-spacing: -0.035em; }
.dok-list__subtitle { max-width: 760px; margin-top: .2rem; color: var(--mud-palette-text-secondary); font-size: .95rem; line-height: 1.55; }
.dok-list__head-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.dok-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.dok-stat { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: .85rem; padding: 1rem; border: 1px solid rgba(148, 163, 184, .2); border-radius: 10px; background: var(--mud-palette-surface); }
/* Monochrome stat icon — adapts to light/dark via text-primary; colour reserved for state. */
.dok-stat__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 8px; background: rgba(148, 163, 184, .16); color: var(--mud-palette-text-primary); }
.dok-stat__label { color: var(--mud-palette-text-secondary); font-size: .82rem; font-weight: 600; }
.dok-stat__value { margin-top: .15rem; color: var(--mud-palette-text-primary); font-size: 1.7rem; font-weight: 800; line-height: 1; }

.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-filterbar__select { flex: 0 0 11rem; }
.dok-filterbar__daterange { flex: 0 1 22rem; min-width: 16rem; }
.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: 700; 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: 700; }
.dok-cell-user__copy { display: flex; flex-direction: column; min-width: 0; }
.dok-cell-user__name { color: var(--mud-palette-text-primary); font-weight: 700; 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: 700; font-size: .9rem; }

/* 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-role-person + .dok-role-person { margin-top: .25rem; }
/* `.mud-avatar` is in the selector to WIN, not to describe: MudBlazor sizes the avatar with
   `.mud-avatar.mud-avatar-small { width:24px; height:24px }` — two classes — so a bare
   `.dok-role-person__avatar` is outranked and thrown away without a word, and the avatar would keep its
   default size while this line looked like it had set one. Two classes ties, and dok-listing.css is
   linked after MudBlazor.min.css in App.razor, so the tie falls this way. (The same trap already bites
   .dok-assignee-avatar's font-size, which has never applied.) */
.mud-avatar.dok-role-person__avatar { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; font-size: .58rem; }
.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 .dok-doc-status states below and the reason both variants also differ
   in label and glyph. */
.dok-role-person--assignee .dok-role-person__role { color: var(--mud-palette-primary); 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); }

/* Status pill — colour communicates state (ok / off / warn / error). */
.dok-status { padding: .2rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.dok-status--ok { color: var(--mud-palette-success); background: rgba(var(--mud-palette-success-rgb), .12); }
.dok-status--off { color: var(--mud-palette-text-secondary); background: rgba(148, 163, 184, .18); }
.dok-status--warn { color: var(--mud-palette-warning); background: rgba(var(--mud-palette-warning-rgb), .14); }
.dok-status--error { color: var(--mud-palette-error); background: rgba(var(--mud-palette-error-rgb), .12); }

/* DOK-327 — operational status of a document. One shape (the compact pill the dossier already used for
   its own badges), and the ICON is what distinguishes: before this, Missing/NeedsCorrection/Expired
   were all the same red and Uploaded/Validated the same green, so three different next actions looked
   identical and two different meanings did too. Colour reinforces; it never carries the distinction
   alone, because it says nothing in greyscale, in print, or to a reader with achromatopsia. */
.dok-doc-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.dok-doc-status__icon { font-size: .95rem; }

.dok-doc-status--validated { color: var(--mud-palette-success); background: rgba(var(--mud-palette-success-rgb), .12); }
.dok-doc-status--uploaded { color: var(--mud-palette-info); background: rgba(var(--mud-palette-info-rgb), .12); }
.dok-doc-status--partial { color: var(--mud-palette-warning); background: rgba(var(--mud-palette-warning-rgb), .14); }
.dok-doc-status--expired { color: var(--mud-palette-warning); background: rgba(var(--mud-palette-warning-rgb), .14); }
.dok-doc-status--correction { color: var(--mud-palette-error); background: rgba(var(--mud-palette-error-rgb), .12); }
.dok-doc-status--missing { color: var(--mud-palette-error); background: rgba(var(--mud-palette-error-rgb), .12); }
.dok-doc-status--blocked { color: var(--mud-palette-error); background: rgba(var(--mud-palette-error-rgb), .12); }
.dok-doc-status--optional,
.dok-doc-status--unknown { color: var(--mud-palette-text-secondary); background: rgba(148, 163, 184, .18); }

.dok-rolechip { margin: 0 .2rem 0 0; }
.dok-muted { color: var(--mud-palette-text-secondary); font-size: .8rem; }
.dok-empty { display: grid; place-items: center; gap: .5rem; padding: 2.5rem 1rem; color: var(--mud-palette-text-secondary); }
/* An empty state that IS the page (no permission, nothing to configure) rather than one inside a table. */
.dok-empty--page { max-width: 34rem; margin: 3rem auto; padding: 3rem 2rem; border: 1px solid rgba(148, 163, 184, .22); border-radius: 12px; text-align: center; background: var(--mud-palette-surface); }

@media (max-width: 960px) { .dok-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .dok-list__head { flex-direction: column; align-items: flex-start; } .dok-filterbar__select { 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; the bar's own row is now the panel's (see .dok-filter-panel in dok-advanced-search.css). */
.dok-filterbar__inline { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.dok-filterbar__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; } }

a.dok-stat { color: inherit; text-decoration: none; transition: border-color .16s ease, box-shadow .16s ease; }
a.dok-stat:hover, a.dok-stat:focus-visible { border-color: rgba(148, 163, 184, .5); box-shadow: 0 2px 10px rgba(15, 23, 42, .08); }

/* DGI-17 — a stat card that restricts the list below it rather than navigating to another page. A BUTTON
   and not an anchor, because the restriction it applies is page state and has no address of its own:
   an <a href> that goes nowhere is the thing screen readers announce as a link and middle-click opens in
   a blank tab. The reset is what a <button> costs — the scaffold's <div> cards never needed font, colour,
   width or text-alignment declared, and a button inherits none of them. The left border is the stage
   accent (.work-items-stat), so only the remaining three sides are cleared here. */
button.dok-stat {
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
button.dok-stat:hover, button.dok-stat:focus-visible { border-color: rgba(148, 163, 184, .5); box-shadow: 0 2px 10px rgba(15, 23, 42, .08); }
button.dok-stat:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.dok-stat--selected { border-color: rgba(var(--mud-palette-primary-rgb), .55); }
/* The selected card carries its state in more than the border: the strip is eight cards wide, and a
   0.55-alpha border on one of them is not a difference anybody finds at a glance. */
button.dok-stat.dok-stat--selected { background: rgba(var(--mud-palette-primary-rgb), .07); box-shadow: inset 0 0 0 1px rgba(var(--mud-palette-primary-rgb), .35); }
button.dok-stat.dok-stat--selected .dok-stat__label { color: var(--mud-palette-primary); }

/* Tone on the icon tile only. The value stays monochrome: the scaffold reserves colour for state, and
   three coloured numbers in a row would read as one alarm instead of three different asks. */
.dok-stat__icon--error { color: var(--mud-palette-error); background: rgba(var(--mud-palette-error-rgb), .12); }
.dok-stat__icon--warn { color: var(--mud-palette-warning); background: rgba(var(--mud-palette-warning-rgb), .14); }

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