/* 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-dossier-progress {
    display: grid;
    gap: .35rem;
    min-width: 9.5rem;
    max-width: 13rem;
    padding: .55rem .65rem;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), .20);
    border-radius: 8px;
    background: rgba(var(--mud-palette-primary-rgb), .05);
}

/* The listing cell is tight; the SLA cell next door sets the row height with three stacked lines, and
 * this stays within that so the rows do not grow. */
.dok-dossier-progress--compact {
    min-width: 8.5rem;
    max-width: 11.5rem;
    padding: .45rem .55rem;
    gap: .3rem;
}

/* 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__track {
    position: relative;
    flex: 1 1 auto;
    height: .38rem;
    border-radius: 999px;
    background: rgba(var(--mud-palette-text-secondary-rgb, 100, 116, 139), .18);
    overflow: hidden;
}

.dok-dossier-progress__track > i {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    display: block;
    border-radius: inherit;
    background: var(--mud-palette-primary);
}

.dok-dossier-progress--complete .dok-dossier-progress__track > i {
    background: var(--mud-palette-success);
}

/* An empty dossier has no fill to show; the track alone would read as 0% of something. */
.dok-dossier-progress--empty .dok-dossier-progress__track {
    background: repeating-linear-gradient(90deg,
        rgba(var(--mud-palette-text-secondary-rgb, 100, 116, 139), .22) 0,
        rgba(var(--mud-palette-text-secondary-rgb, 100, 116, 139), .22) .22rem,
        transparent .22rem,
        transparent .40rem);
}

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

.dok-dossier-progress--compact .dok-dossier-progress__percent {
    font-size: .72rem;
}

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

.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 .5rem;
    color: var(--mud-palette-text-secondary);
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}

.dok-dossier-progress--compact .dok-dossier-progress__parts {
    font-size: .70rem;
    gap: .1rem .42rem;
}

.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(--mud-palette-success);
}

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

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