/* DOK-279 — shared "cadastro" shell: the Work Item (Direção B) rail + step content + sticky footer,
   generalized from the CaseDetailPage .case-* classes so every create/edit screen can reuse it. */

.dok-cadastro-layout {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    grid-template-areas:
        "rail content"
        "rail footer";
    align-items: start;
    gap: 1rem;
}

/* ---- Left rail (sticky vertical stepper) ---- */
.dok-cadastro-rail {
    grid-area: rail;
    position: sticky;
    top: 5.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.dok-cadastro-rail__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
}

.dok-cadastro-rail__title strong { font-size: 1rem; font-weight: 800; }

.dok-cadastro-rail__badge {
    display: inline-flex;
    align-items: center;
    padding: .32rem .58rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, .16);
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    font-weight: 850;
}

.dok-cadastro-rail__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.dok-cadastro-rail__step {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .7rem;
    width: 100%;
    min-height: 4rem;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

/* DOK-557 — a step its flow declares unselectable (CadastroStepDefinition.IsSelectable = false; the
   component renders the button disabled) must not invite a click. Muted, never hidden: the user still
   sees the step exists and reads its summary, which is where the flow says why it is locked. First
   consumer: the advanced-search pop-up, whose steps 3 to 5 wait for a Process. */
.dok-cadastro-rail__step:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.dok-cadastro-rail__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 2rem;
    bottom: 0;
    left: .95rem;
    width: 2px;
    background: rgba(148, 163, 184, .32);
}

.dok-cadastro-rail__step--complete:not(:last-child)::before,
.dok-cadastro-rail__step--active:not(:last-child)::before {
    background: rgba(148, 163, 184, .55);
}

.dok-cadastro-rail__marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(148, 163, 184, .22);
    color: var(--mud-palette-text-secondary);
    font-size: .78rem;
    font-weight: 900;
}

/* DOK-321 — completion and navigation get one visual channel each, so a step can carry both.
   These rules used to be a single shared declaration, which made "active" and "complete"
   indistinguishable and let the active step hide its own completeness. */

/* Completion — done: filled marker, holding the Check icon the component renders. */
.dok-cadastro-rail__step--complete .dok-cadastro-rail__marker {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
}

/* Completion — work left to do. Warning, not error: incomplete is unfinished, not invalid. */
.dok-cadastro-rail__step--incomplete .dok-cadastro-rail__marker {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-warning);
    box-shadow: inset 0 0 0 2px var(--mud-palette-warning);
}

/* Completion — nothing to complete (Review, History, DOKPilot). Deliberately neutral: these steps
   are out of the percentage too, so they must not read as pending. */
.dok-cadastro-rail__step--na .dok-cadastro-rail__marker {
    background: rgba(148, 163, 184, .22);
    color: var(--mud-palette-text-secondary);
}

/* Navigation — a ring around whatever the completion channel already drew. */
.dok-cadastro-rail__step--active .dok-cadastro-rail__marker {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.dok-cadastro-rail__copy { min-width: 0; padding-top: .08rem; }
.dok-cadastro-rail__name { display: block; color: var(--mud-palette-text-primary); font-size: .88rem; font-weight: 850; }
.dok-cadastro-rail__summary {
    display: block;
    margin-top: .1rem;
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: .74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dok-cadastro-rail__next { display: block; margin-top: .15rem; color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); font-size: .72rem; font-weight: 800; }

.dok-cadastro-rail__progress {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, .18);
}
.dok-cadastro-rail__autosave {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    font-weight: 500;
}

.dok-cadastro-rail__progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

/* DOK-321 — "5 of 8 complete · 63%". The percentage on its own is what used to read as
   "you are nearly done" when it only meant "you are nearly at the end of the rail". */
.dok-cadastro-rail__progress-meta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    text-align: right;
}

.dok-cadastro-rail__progress-track {
    height: 5px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray, rgba(148, 163, 184, .2));
    overflow: hidden;
}

.dok-cadastro-rail__progress-fill {
    height: 100%;
    background: var(--mud-palette-text-primary);
    transition: width .25s ease;
}

.dok-cadastro-rail__context {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, .18);
}

.dok-cadastro-rail__context-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--mud-palette-text-secondary);
}

.dok-cadastro-rail__context-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

.dok-cadastro-rail__context-value {
    font-size: .78rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* ---- Main step content ---- */
.dok-cadastro-content { grid-area: content; display: flex; flex-direction: column; gap: .85rem; }
.dok-cadastro-panel {
    padding: 1.15rem;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}
.dok-cadastro-panel__header { margin-bottom: 1rem; }

/* DOK-816 — a panel that saves something of its own puts that button here. The sticky
   .dok-cadastro-footer carries the STEP's primary action (next / create); a per-panel save (the
   tenant's plan, its storage, its language) is a different act and belongs to the card it saves.
   Shared rather than page-local because the screens that need it were each growing a private copy —
   TenantDetailPage's .tenant-detail-accordion__footer was one, and it is what this rule replaces. */
.dok-cadastro-panel__actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1rem; }
.dok-cadastro-panel__header h3 { margin: 0; font-size: 1.05rem; font-weight: 850; }
.dok-cadastro-panel__header p { margin: .2rem 0 0; color: var(--mud-palette-text-secondary); font-size: .82rem; }

/* ---- Sticky footer (prev / save / primary) ---- */
.dok-cadastro-footer {
    grid-area: footer;
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.1rem;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}
.dok-cadastro-footer__primary { display: flex; align-items: center; gap: .65rem; margin-left: auto; }

/* DOK-320 — "unsaved changes" / "all changes saved", beside the Save button. Secondary text weight on
   purpose: it reports state, it is not an action competing with the button next to it. */
.dok-cadastro-footer__state {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-right: .35rem;
    color: var(--mud-palette-text-secondary);
    font-size: .78rem;
    font-weight: 700;
}
.dok-cadastro-action { font-weight: 850; letter-spacing: .01em; }

/* ---- DOK-315 — template editor rows -------------------------------------------------------
   The row language of the dossier sections (DokChecklistSection / DokApprovalSection, DOK-313)
   lifted out of those components so the *template* editors (Document Process cadastro) can wear
   the same clothes. It lives here, and not in a component <style>, because the sections that use
   it render in different rail steps and would otherwise each need their own copy.               */

.dok-tpl-list { display: flex; flex-direction: column; gap: .5rem; }

.dok-tpl-row {
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(var(--mud-palette-primary-rgb), .015), rgba(var(--mud-palette-primary-rgb), 0)),
        var(--mud-palette-surface);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}
.dok-tpl-row:hover {
    border-color: rgba(var(--mud-palette-primary-rgb), .22);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    transform: translateY(-1px);
}
.dok-tpl-row--draggable { cursor: grab; }
.dok-tpl-row--draggable:active { cursor: grabbing; }
.dok-tpl-row--dragging { opacity: .45; }
.dok-tpl-row--editing { border-color: rgba(var(--mud-palette-primary-rgb), .45); }
.dok-tpl-row--new {
    border-style: dashed;
    background:
        linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), .035), rgba(var(--mud-palette-info-rgb), .02)),
        var(--mud-palette-surface);
}
.dok-tpl-row--new:hover { transform: none; box-shadow: none; }

.dok-tpl-row__line { display: flex; align-items: center; gap: .55rem; width: 100%; }
.dok-tpl-row__grip { display: grid; place-items: center; flex: 0 0 auto; color: var(--mud-palette-text-secondary); cursor: grab; }
.dok-tpl-row__grip:active { cursor: grabbing; }
.dok-tpl-row__order {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: rgba(148, 163, 184, .16);
    color: var(--mud-palette-text-primary);
    font-size: .74rem;
    font-weight: 900;
}
.dok-tpl-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.dok-tpl-row__actions { display: flex; align-items: center; gap: .1rem; flex: 0 0 auto; }

/* click-to-edit affordance (mirrors .dok-smart-checklist__text-button) */
.dok-tpl-row__text-button {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .65rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .16s ease;
}
.dok-tpl-row__text-button:hover:not(:disabled) { background: rgba(var(--mud-palette-primary-rgb), .06); }
.dok-tpl-row__text-button:disabled { opacity: .7; cursor: default; }
.dok-tpl-row__text { flex: 1 1 auto; min-width: 0; color: var(--mud-palette-text-primary); font-size: .94rem; line-height: 1.45; }
.dok-tpl-row__edit-icon { flex: 0 0 auto; opacity: .45; transition: opacity .16s ease; }
.dok-tpl-row__text-button:hover:not(:disabled) .dok-tpl-row__edit-icon { opacity: .95; }
.dok-tpl-row__edit-inline { display: flex; align-items: center; gap: .35rem; width: 100%; }
.dok-tpl-row__edit-inline .mud-input-control { flex: 1 1 auto; }

.dok-tpl-row__title { overflow: hidden; color: var(--mud-palette-text-primary); font-size: .92rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.dok-tpl-row__meta { color: var(--mud-palette-text-secondary); font-size: .76rem; font-weight: 650; }
.dok-tpl-row__badges { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }

.dok-tpl-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, .16);
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    font-weight: 800;
}
.dok-tpl-badge--accent { background: rgba(var(--mud-palette-primary-rgb), .12); color: var(--mud-palette-primary); }
.dok-tpl-badge--warn { background: #fff4e5; color: #9a4d00; }

/* DOK-324 — the runtime half of an approval row. The template's default approvers and the dossier's
   live ones now share .dok-tpl-row*; what only exists at runtime (the decision, when it was taken, the
   comments) is ADDED to that row instead of justifying a second row language. These replace the
   .dok-approval-panel* block that used to live in an embedded <style> inside DokApprovalSection. */
.dok-tpl-row__status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    max-width: 40%;
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.15;
}
.dok-tpl-row__status-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok-tpl-row__status--pending { color: var(--mud-palette-warning); background: rgba(var(--mud-palette-warning-rgb), .14); }
.dok-tpl-row__status--approved { color: var(--mud-palette-success); background: rgba(var(--mud-palette-success-rgb), .12); }
.dok-tpl-row__status--rejected { color: var(--mud-palette-error); background: rgba(var(--mud-palette-error-rgb), .12); }

.dok-tpl-row__comments {
    margin-top: .7rem;
    padding: .75rem;
    border-radius: 12px;
    background: rgba(var(--mud-palette-primary-rgb), .02);
}
.dok-tpl-row__comment-add { display: flex; align-items: flex-start; gap: .5rem; margin-top: .6rem; }
.dok-tpl-row__comment-add .mud-input-control { flex: 1 1 auto; }
.dok-tpl-row__comment-add .mud-button-root { flex: 0 0 auto; height: 40px; }

@media (max-width: 700px) {
    /* The status pill drops below the name rather than squeezing it to three characters. */
    .dok-tpl-row__line { flex-wrap: wrap; }
    .dok-tpl-row__status { max-width: 100%; }
}

.dok-tpl-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), .18), rgba(var(--mud-palette-info-rgb), .12));
    color: var(--mud-palette-primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08);
}

/* empty state — a dashed, calm invitation instead of a bare "no records" line */
.dok-tpl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.6rem 1rem;
    border: 1px dashed rgba(148, 163, 184, .35);
    border-radius: 12px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}
.dok-tpl-empty .mud-icon-root { color: var(--mud-palette-text-secondary); }
.dok-tpl-empty p { margin: 0; font-size: .82rem; }

/* structured add/edit card (fields, documents) */
.dok-tpl-editor {
    margin-top: .85rem;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), .025), rgba(var(--mud-palette-info-rgb), .015)),
        var(--mud-palette-surface);
}
.dok-tpl-editor__header { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .85rem; }
.dok-tpl-editor__header-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 999px;
    background: rgba(148, 163, 184, .16);
    color: var(--mud-palette-text-primary);
}
.dok-tpl-editor__title { display: block; color: var(--mud-palette-text-primary); font-size: .88rem; font-weight: 800; line-height: 1.25; }
.dok-tpl-editor__hint { display: block; margin-top: .1rem; color: var(--mud-palette-text-secondary); font-size: .76rem; }

/* section header count chip, sits next to the panel title */
.dok-tpl-count {
    display: inline-flex;
    align-items: center;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, .16);
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
    font-weight: 850;
}

/* ---- Responsive: rail collapses to horizontal pills, footer becomes fixed ---- */
@media (max-width: 1199.98px) {
    .dok-cadastro-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rail" "content" "footer"; }
    .dok-cadastro-rail { position: static; }
    .dok-cadastro-rail__steps { flex-direction: row; overflow-x: auto; gap: .5rem; }
    .dok-cadastro-rail__step { min-height: 0; }
    .dok-cadastro-rail__step:not(:last-child)::before { display: none; }
    .dok-cadastro-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; border-radius: 0; }
    .dok-cadastro-content { padding-bottom: 5rem; }
}

/* DOK-364 — below 720px the shell shows a fixed 60px areas bar at the same z-index as this
   footer and later in the DOM, so it painted over the primary actions. Sit the footer on top
   of the bar rather than under it, and give the content enough room to clear both. The rule
   is here, not only on the dossier page, because every cadastro screen shares this footer. */
@media (max-width: 720px) {
    .dok-cadastro-footer { bottom: var(--dok-mobile-areas-height, 60px); }
    .dok-cadastro-content { padding-bottom: calc(5rem + var(--dok-mobile-areas-height, 60px)); }
}

/* The collapsed rail scrolls horizontally, so a step must keep its natural width. Without a
   floor it was squeezed to share the row and the labels ran into each other — the "rails
   desformatados" in the report. */
@media (max-width: 1199.98px) {
    .dok-cadastro-rail__step { flex: 0 0 auto; min-width: 9.5rem; scroll-snap-align: start; }
    .dok-cadastro-rail__steps { scroll-snap-type: x proximity; padding-bottom: .25rem; }
    .dok-cadastro-rail__summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------------------------------------------------------------- Process trigger (DOK-483/486) --
   The one external operation a process may drive. Its own block rather than more dok-tpl-* variants,
   because this is a form with panels, not the row language the other template sections share. */
.dok-trigger { display: flex; flex-direction: column; gap: .75rem; }

.dok-trigger__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dok-radius-md, 12px);
    background: var(--mud-palette-background-gray);
}

.dok-trigger__status-main { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.dok-trigger__status-actions { display: flex; align-items: center; gap: .5rem; }

.dok-trigger__panels { border-radius: var(--dok-radius-md, 12px); overflow: hidden; }

.dok-trigger__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .75rem 1rem;
}

.dok-trigger__hint { margin: .35rem 0 0; color: var(--mud-palette-text-secondary); font-size: .82rem; line-height: 1.5; }
.dok-trigger__subhead { margin: 1rem 0 .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }

.dok-trigger__actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; }
.dok-trigger__footer { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }

/* The template and the built payload are read character by character when something is wrong, so they
   get a monospace face and are allowed to scroll rather than wrap mid-token. */
.dok-trigger__code textarea { font-family: var(--dok-font-mono, ui-monospace, "Cascadia Code", Consolas, monospace); font-size: .84rem; }

.dok-trigger__json {
    margin: 0;
    padding: .75rem 1rem;
    max-height: 20rem;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dok-radius-sm, 8px);
    background: var(--mud-palette-background-gray);
    font-family: var(--dok-font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
    font-size: .82rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.dok-trigger__errors { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.dok-trigger__paths { display: grid; gap: .5rem; }

.dok-trigger__path {
    padding: .6rem .8rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-left-width: 3px;
    border-left-color: var(--mud-palette-success);
    border-radius: var(--dok-radius-sm, 8px);
    background: var(--mud-palette-surface);
}

/* A blocked path is the one thing on this screen somebody is looking for, so it is coloured rather
   than merely annotated. */
.dok-trigger__path--blocked { border-left-color: var(--mud-palette-warning); background: #fffaf3; }

.dok-trigger__path-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dok-trigger__path-head code { font-size: .84rem; font-weight: 600; }
.dok-trigger__path-value { margin: .35rem 0 0; font-size: .88rem; word-break: break-word; }
.dok-trigger__path-problem { margin: .35rem 0 0; font-size: .84rem; color: #9a4d00; }
.dok-trigger__path-note { margin: .25rem 0 0; font-size: .78rem; color: var(--mud-palette-text-secondary); }

@media (max-width: 767.98px) {
    .dok-trigger__grid { grid-template-columns: minmax(0, 1fr); }
    .dok-trigger__status { align-items: flex-start; flex-direction: column; }
}

/* -------------------------------------------------------- Case integrations (DOK-490) --
   The attempts this dossier made at another company's system. Everything rendered here arrived from
   the API already redacted; nothing is un-redacted for display. */
.case-integrations { display: flex; flex-direction: column; gap: .5rem; }
.case-integrations__empty { margin: .25rem 0 0; color: var(--mud-palette-text-secondary); font-size: .88rem; }
.case-integrations__list { display: grid; gap: .5rem; }

.case-integrations__row {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dok-radius-sm, 8px);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.case-integrations__row--open { border-color: rgba(var(--mud-palette-primary-rgb), .4); }

.case-integrations__row-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem .8rem;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.case-integrations__row-head:hover { background: var(--mud-palette-action-default-hover); }
.case-integrations__row-main { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.case-integrations__row-meta { color: var(--mud-palette-text-secondary); font-size: .78rem; }

.case-integrations__status {
    flex: 0 0 auto;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.case-integrations__status--ok { background: rgba(var(--mud-palette-success-rgb), .14); color: var(--mud-palette-success); }
.case-integrations__status--error { background: rgba(var(--mud-palette-error-rgb), .14); color: var(--mud-palette-error); }

/* Timed out is warning, never error. We do not know the outcome — which is the whole reason
   re-sending is a decision and not a button. */
.case-integrations__status--warn { background: #fff4e5; color: #9a4d00; }

.case-integrations__failure { margin: 0; padding: 0 .8rem .6rem; font-size: .82rem; color: #9a4d00; }
.case-integrations__detail { padding: 0 .8rem .8rem; display: flex; flex-direction: column; gap: .5rem; }

.case-integrations__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .75rem; margin: 0; font-size: .84rem; }
.case-integrations__facts dt { color: var(--mud-palette-text-secondary); }
.case-integrations__facts dd { margin: 0; word-break: break-word; }

.case-integrations__subhead { margin: .5rem 0 .25rem; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }

.case-integrations__json {
    margin: 0;
    padding: .6rem .75rem;
    max-height: 16rem;
    overflow: auto;
    border-radius: var(--dok-radius-sm, 8px);
    background: var(--mud-palette-background-gray);
    font-family: var(--dok-font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
    font-size: .78rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.case-integrations__paths { display: grid; gap: .35rem; }
.case-integrations__path { padding: .45rem .6rem; border-left: 3px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-gray); border-radius: var(--dok-radius-sm, 8px); }
.case-integrations__path-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.case-integrations__path-head code { font-size: .8rem; font-weight: 600; }
.case-integrations__path-value { margin: .2rem 0 0; font-size: .84rem; word-break: break-word; }
.case-integrations__path-note { margin: .15rem 0 0; font-size: .76rem; color: var(--mud-palette-text-secondary); }

.case-integrations__actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .35rem; }
.case-integrations__hint { color: var(--mud-palette-text-secondary); font-size: .78rem; }

@media (max-width: 767.98px) {
    .case-integrations__facts { grid-template-columns: minmax(0, 1fr); }
    .case-integrations__facts dt { margin-top: .35rem; }
}

/* DOK-335 — the access policy, made readable in the dossier. The rule itself is old and enforced
   server-side; what was missing was any way to read it off the screen without opening a dropdown.
   Tokens only, no literals: the palette follows the tenant theme. */
.dok-access-summary {
    display: grid;
    gap: .55rem;
    margin-top: .9rem;
    padding: .85rem 1rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dok-radius-sm, 8px);
    background: var(--mud-palette-background-gray);
}

.dok-access-summary__head { display: flex; align-items: center; gap: .4rem; color: var(--mud-palette-text-secondary); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.dok-access-summary__level { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.dok-access-summary__level strong { font-size: .95rem; font-weight: 850; }
.dok-access-summary__consequence { color: var(--mud-palette-text-secondary); font-size: .82rem; }

.dok-access-summary__who { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.dok-access-summary__who li { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; }
.dok-access-summary__who span { color: var(--mud-palette-text-secondary); }
.dok-access-summary__who strong { font-weight: 800; text-align: right; word-break: break-word; }

.dok-access-summary__note { display: flex; align-items: flex-start; gap: .4rem; margin: 0; color: var(--mud-palette-text-secondary); font-size: .78rem; line-height: 1.5; }

/* Said once for the Documents step. Per document it would be the same sentence thirty times. */
.case-documents-access { display: flex; align-items: center; gap: .4rem; margin: 0 0 .8rem; color: var(--mud-palette-text-secondary); font-size: .8rem; }

/* ---------------------------------------------------------- Dossier shares (DOK-703) --
   Who outside the company was sent this dossier. Global rather than a .razor.css, because a scoped
   stylesheet never reaches a MudBlazor component root — the pill and the row would lose their styling
   the moment either grew a Mud element. Tokens and palette variables only, no literal colours: the
   whole section has to follow the tenant theme and dark mode like everything around it. */
.case-shares { display: flex; flex-direction: column; gap: .5rem; }
.case-shares__lead { margin: 0; color: var(--mud-palette-text-secondary); font-size: .82rem; line-height: 1.5; }
.case-shares__empty { margin: .25rem 0 0; color: var(--mud-palette-text-secondary); font-size: .88rem; }

/* The Public-only notice. Warning-tinted rather than error-tinted: nothing has gone wrong, a rule is
   being explained. */
.case-shares__locked {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .9rem;
    border: 1px solid rgba(var(--mud-palette-warning-rgb), .35);
    border-radius: var(--dok-radius-sm, 8px);
    background: rgba(var(--mud-palette-warning-rgb), .08);
}

.case-shares__locked-icon { flex: 0 0 auto; margin-top: .1rem; color: var(--mud-palette-warning); }
.case-shares__locked-title { margin: 0; font-size: .88rem; font-weight: 700; }
.case-shares__locked-why { margin: .3rem 0 0; color: var(--mud-palette-text-secondary); font-size: .82rem; line-height: 1.55; }
.case-shares__locked-level { margin: .3rem 0 0; font-size: .82rem; font-weight: 600; }

.case-shares__list { display: grid; gap: .5rem; }

.case-shares__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    gap: .6rem;
    padding: .6rem .8rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dok-radius-sm, 8px);
    background: var(--mud-palette-surface);
}

.case-shares__row-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.case-shares__email { font-size: .9rem; font-weight: 700; word-break: break-word; }
.case-shares__meta { display: flex; flex-wrap: wrap; gap: .1rem .6rem; color: var(--mud-palette-text-secondary); font-size: .78rem; }
.case-shares__meta span + span::before { content: "·"; margin-right: .5rem; }
.case-shares__activity { margin: .1rem 0 0; color: var(--mud-palette-text-secondary); font-size: .78rem; }
.case-shares__note { margin: .1rem 0 0; font-size: .78rem; color: var(--mud-palette-text-secondary); font-style: italic; }
.case-shares__row-actions { display: flex; align-items: center; gap: .1rem; }
.case-shares__actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .35rem; }

.case-shares__status {
    flex: 0 0 auto;
    align-self: start;
    padding: .15rem .55rem;
    border-radius: var(--dok-radius-full, 999px);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.case-shares__status--live { background: rgba(var(--mud-palette-success-rgb), .14); color: var(--mud-palette-success); }
.case-shares__status--done { background: rgba(var(--mud-palette-info-rgb), .14); color: var(--mud-palette-info); }
.case-shares__status--stale { background: rgba(var(--mud-palette-warning-rgb), .16); color: var(--mud-palette-warning); }
.case-shares__status--off { background: rgba(var(--mud-palette-error-rgb), .12); color: var(--mud-palette-error); }

/* The invitation dialog. */
.case-shares__form { display: flex; flex-direction: column; gap: .85rem; }
.case-shares__form-note { margin: 0; color: var(--mud-palette-text-secondary); font-size: .78rem; line-height: 1.5; }

.case-shares__verification {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .7rem .85rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--dok-radius-sm, 8px);
    background: var(--mud-palette-background-gray);
}

.case-shares__verification-title { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); }
.case-shares__verification-default { margin: 0; font-size: .82rem; line-height: 1.5; }

/* Only on screen while the switch is on: the price of the weaker option, said as it is taken. */
.case-shares__verification-cost {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: .2rem 0 0;
    padding: .5rem .6rem;
    border-radius: var(--dok-radius-sm, 8px);
    background: rgba(var(--mud-palette-warning-rgb), .12);
    color: var(--mud-palette-warning-darken);
    font-size: .8rem;
    line-height: 1.5;
}

@media (max-width: 767.98px) {
    .case-shares__row { grid-template-columns: minmax(0, 1fr); }
    .case-shares__row-actions { justify-content: flex-end; }
}