/* DGI-1 — the dossier listing's Progress cell: one percentage over the strands the dossier actually
 * has, with those strands drawn beneath it.
 *
 * Global rather than scoped (.razor.css): the cell renders inside a MudTable row, and a scoped
 * stylesheet never reaches inside a MudBlazor root.
 *
 * Colours come from --mud-palette-* only. No --dok-* token is invented here: an undeclared custom
 * property discards the whole declaration, so a typo would silently erase a rule rather than fail.
 *
 * DOK-2196 — the track is DokProgressBar's (dok-theme.css), the one determinate bar of the App; this file
 * dresses the box, the percentage and the strands around it, in the two variants of DokDossierProgress.
 */

/* The card's box (DokDossierProgressVariant.Card). Sized for the grid's card, where it sits among the
 * other details; the row variant below takes the box away. */
.dok-dossier-progress {
    display: grid;
    gap: .3rem;
    min-width: 8.5rem;
    max-width: 11.5rem;
    padding: .45rem .55rem;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), .20);
    border-radius: 8px;
    background: rgba(var(--mud-palette-primary-rgb), .05);
}

/* Nothing to track at all — no files, no checklist, no approvers. Dashed and muted so it reads as
 * "there is no work here", never as "no work has been done". */
.dok-dossier-progress--empty {
    border-style: dashed;
    border-color: rgba(var(--mud-palette-text-secondary-rgb, 100, 116, 139), .30);
    background: transparent;
}

.dok-dossier-progress--complete {
    border-color: rgba(var(--mud-palette-success-rgb), .34);
    background: rgba(var(--mud-palette-success-rgb), .08);
}

/* ---------------------------------------------------------------------------------------------- */
/* Headline: the bar and its percentage                                                             */
/* ---------------------------------------------------------------------------------------------- */

.dok-dossier-progress__head {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.dok-dossier-progress__head .dok-progress {
    flex: 1 1 auto;
}

.dok-dossier-progress__percent {
    flex: 0 0 auto;
    color: var(--mud-palette-primary);
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dok-dossier-progress--complete .dok-dossier-progress__percent {
    color: var(--dok-tone-success-ink);
}

.dok-dossier-progress--empty .dok-dossier-progress__percent {
    color: var(--mud-palette-text-secondary);
}

/* ---------------------------------------------------------------------------------------------- */
/* Strand breakdown                                                                                 */
/* ---------------------------------------------------------------------------------------------- */

.dok-dossier-progress__parts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .1rem .42rem;
    color: var(--mud-palette-text-secondary);
    font-size: .70rem;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}

.dok-dossier-progress__part {
    display: inline-flex;
    align-items: center;
    gap: .18rem;
}

.dok-dossier-progress__part .mud-icon-root {
    font-size: .95rem;
    width: .95rem;
    height: .95rem;
}

.dok-dossier-progress__part-value {
    font-variant-numeric: tabular-nums;
}

.dok-dossier-progress__part--complete {
    color: var(--dok-tone-success-ink);
}

/* A strand the dossier does not have. Dimmed, and its value is an em dash rather than a ratio — the
 * two together are what stop "no checklist" reading as "checklist untouched". */
.dok-dossier-progress__part--none {
    opacity: .45;
}

/* ---------------------------------------------------------------------------------------------- */
/* DOK-1524 (DEV-69) — the listing's variant: the bar, and the strands in a tooltip                 */
/* ---------------------------------------------------------------------------------------------- */

/* No box. Two classes, so it wins over the single-class tones above (--complete's tint, --empty's dashed
 * frame) wherever this file puts them; the tone still reaches the bar and the percentage. */
.dok-dossier-progress.dok-dossier-progress--row {
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* The head is what takes the focus, so a keyboard or a tap opens the tooltip; the ring says where it is. */
.dok-dossier-progress--row .dok-dossier-progress__head {
    padding-block: .2rem;
    border-radius: 4px;
    cursor: default;
}

.dok-dossier-progress--row .dok-dossier-progress__head:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.dok-dossier-progress--row .dok-dossier-progress__percent {
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-semibold);
}

.dok-dossier-progress--row.dok-dossier-progress--complete .dok-dossier-progress__percent {
    color: var(--dok-tone-success-ink);
}

/* MudTooltip's root, made to fill the cell so the hover target is the whole bar and not only its text. */
.dok-dossier-progress__tooltip {
    display: block;
    width: 100%;
}

/* The tooltip's content, one strand per line. It renders in MudBlazor's popover, outside the cell, which is why
 * these rules are global and name no ancestor. The tooltip's own ink is light on dark, so the strands inherit it;
 * a complete strand keeps no green that would fail on that background. */
.dok-dossier-progress__breakdown {
    display: grid;
    gap: .2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-medium);
    line-height: 1.35;
    text-align: start;
    white-space: nowrap;
}

.dok-dossier-progress__breakdown .dok-dossier-progress__part {
    gap: .35rem;
    color: inherit;
}

.dok-dossier-progress__breakdown .dok-dossier-progress__part-value {
    margin-inline-start: auto;
    padding-inline-start: .75rem;
}

/* A strand the dossier does not have, still dimmer than the others, but readable on the tooltip's dark ground. */
.dok-dossier-progress__breakdown .dok-dossier-progress__part--none {
    opacity: .7;
}

/* ---------------------------------------------------------------------------------------------- */
/* Screen-reader text                                                                               */
/* ---------------------------------------------------------------------------------------------- */

/* The ratios on screen are terse by necessity ("3/5"); this carries the full sentence to a reader who
 * cannot see the icon that says which strand it belongs to. */
.dok-dossier-progress__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------------------------- */
/* DOK-2196 — the SLA of a dossier on a line (DokDossierSla)                                        */
/* ---------------------------------------------------------------------------------------------- */

/* DOK-1524 (DEV-69) — the owner: "Sai o painel e a moldura. Ficam o estado e o prazo em texto discreto. A cor e um
 * ícone pequeno só aparecem em atraso ou a terminar, e um dossiê em prazo lê-se neutro." So the indicator is text
 * sitting on the line like every other word; the tone rules below colour only the verdict, and only the two that
 * ask for action. The Row variant adds the deadline under the verdict; the Inline variant keeps it in the tooltip. */
.dok-dossier-sla {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.dok-dossier-sla__head {
    display: flex;
    align-items: center;
    gap: .25rem;
    color: var(--mud-palette-text-primary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-semibold);
    line-height: 1.2;
    white-space: nowrap;
}

/* The small glyph the late and the nearly-late verdicts carry; the others have none (DossierSlaDescriber). */
.dok-dossier-sla__head .mud-icon-root {
    flex: 0 0 auto;
    width: .95rem;
    height: .95rem;
}

.dok-dossier-sla__detail {
    color: var(--mud-palette-text-secondary);
    font-size: var(--dok-font-size-xs);
    font-weight: var(--dok-font-weight-regular);
    line-height: 1.2;
    white-space: nowrap;
}

/* In time and closed in time read neutral: the verdict in the text colour, no tint, no glyph. */
.dok-dossier-sla--healthy .dok-dossier-sla__head,
.dok-dossier-sla--done .dok-dossier-sla__head {
    color: var(--mud-palette-text-primary);
}

.dok-dossier-sla--warning .dok-dossier-sla__head {
    color: var(--dok-tone-warning-ink);
}

.dok-dossier-sla--critical .dok-dossier-sla__head {
    color: var(--mud-palette-error);
}

/* DOK-1129 — the dossier that gets no verdict, and it must not look like one that passed.
 * Deliberately the quietest of the five: an absence of judgement is not a result, and a cancellation
 * painted in the success green is the defect that issue was raised for, only prettier. */
.dok-dossier-sla--muted .dok-dossier-sla__head {
    color: var(--mud-palette-text-secondary);
    font-weight: var(--dok-font-weight-medium);
}

/* ---------------------------------------------------------------------------------------------- */

/* DOK-1454 — «O que falta» on an Incomplete dossier: one line per thing still to do, the names left to wrap on a
 * narrow screen rather than widen the card. */
.dok-dossier-shortfalls {
    border-left: 3px solid var(--mud-palette-warning);
}

.dok-dossier-shortfalls__list {
    margin: 0;
    padding-left: var(--dok-space-md);
    color: var(--dok-text-primary);
    overflow-wrap: anywhere;
}

.dok-dossier-shortfalls__list li + li {
    margin-top: var(--dok-space-2xs);
}

/* ---------------------------------------------------------------------------------------------- */

/* DOK-1442 — the Genius's check of the field rules: the panel in the review step, and each warning, there and above the
 * field it is about. Amber, like everything that asks for a person's eye without blocking; the values and passages wrap
 * on a narrow screen rather than widen the card. */
.dok-dossier-rule-check {
    border-left: 3px solid var(--mud-palette-warning);
}

.dok-dossier-rule-check__warnings {
    display: flex;
    flex-direction: column;
    gap: var(--dok-space-sm);
}

.dok-field-rule-warning {
    display: flex;
    flex-direction: column;
    gap: var(--dok-space-2xs);
    padding: var(--dok-space-xs) var(--dok-space-sm);
    border-left: 3px solid var(--mud-palette-warning);
    border-radius: var(--dok-radius-sm);
    background: var(--dok-warning-surface-soft);
    color: var(--dok-text-primary);
    font-size: .8125rem;
    overflow-wrap: anywhere;
}

.dok-field-rule-warning__head {
    display: flex;
    align-items: center;
    gap: var(--dok-space-2xs);
    color: var(--dok-warning-ink);
}

.dok-field-rule-warning__icon {
    color: var(--dok-warning-ink);
}

.dok-field-rule-warning__why,
.dok-field-rule-warning__where,
.dok-field-rule-warning__excerpt {
    color: var(--dok-text-secondary);
}

.dok-field-rule-warning__values {
    margin: 0;
    padding-left: var(--dok-space-md);
}

.dok-field-rule-warning__values li + li {
    margin-top: var(--dok-space-2xs);
}

.dok-field-rule-warning__value {
    margin: 0 var(--dok-space-2xs);
}

.dok-field-rule-warning__excerpt {
    display: block;
    font-style: italic;
}