/* DOK-832 — the attachment review progress bar, and the per-attachment review panel.
 *
 * Global rather than scoped (.razor.css): a scoped stylesheet never reaches inside a MudBlazor root,
 * and the review panel lives inside DokAttachmentsSection's MudTable row. Global is also what the two
 * call sites need — the same bar is drawn in the dossier screen and in a listing table cell.
 *
 * 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.
 */

/* ---------------------------------------------------------------------------------------------- */
/* Review progress bar                                                                              */
/* ---------------------------------------------------------------------------------------------- */

.dok-review-progress {
    display: grid;
    gap: .35rem;
    min-width: 9.5rem;
    max-width: 13rem;
    padding: .55rem .65rem;
    border: 1px dashed rgba(var(--mud-palette-secondary-rgb), .38);
    border-radius: 8px;
    background: rgba(var(--mud-palette-secondary-rgb), .06);
}

/* The listing cell is tight, and the bar sits UNDER the SLA bar in the same cell — the margin is what
 * keeps the two from reading as one control. */
.dok-review-progress--compact {
    min-width: 8.5rem;
    max-width: 11rem;
    margin-top: .4rem;
    padding: .45rem .55rem;
    gap: .3rem;
}

.dok-review-progress__head {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--mud-palette-secondary);
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.dok-review-progress--compact .dok-review-progress__head {
    font-size: .72rem;
}

.dok-review-progress__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pushed right so the number lands in the same place on every row. */
.dok-review-progress__percent {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* The SLA track is a smooth solid fill. This one is deliberately SEGMENTED — the repeating gradient
 * cuts it into ticks — so the two bars are told apart by texture and not only by colour, which is what
 * a colour-blind reader has to rely on. */
.dok-review-progress__track {
    position: relative;
    height: .4rem;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg,
        rgba(148, 163, 184, .28) 0,
        rgba(148, 163, 184, .28) .28rem,
        transparent .28rem,
        transparent .42rem);
    overflow: hidden;
}

.dok-review-progress__track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: repeating-linear-gradient(90deg,
        var(--mud-palette-secondary) 0,
        var(--mud-palette-secondary) .28rem,
        rgba(var(--mud-palette-secondary-rgb), .45) .28rem,
        rgba(var(--mud-palette-secondary-rgb), .45) .42rem);
    transition: width .25s ease;
}

.dok-review-progress__detail {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    font-weight: 780;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dok-review-progress--complete {
    border-style: solid;
    border-color: rgba(var(--mud-palette-success-rgb), .34);
    background: rgba(var(--mud-palette-success-rgb), .09);
}

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

.dok-review-progress--complete .dok-review-progress__track i {
    background: repeating-linear-gradient(90deg,
        var(--mud-palette-success) 0,
        var(--mud-palette-success) .28rem,
        rgba(var(--mud-palette-success-rgb), .45) .28rem,
        rgba(var(--mud-palette-success-rgb), .45) .42rem);
}

/* Nothing to review: muted, so it reads as "not applicable" rather than "0% done". */
.dok-review-progress--empty {
    border-color: rgba(148, 163, 184, .28);
    background: rgba(148, 163, 184, .07);
}

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

/* DGI-2 — files exist but nobody has decided on any of them: muted like --empty, because reviewing
 * files is not a mandatory step and an in-progress colour on an untouched bar says it is. The track
 * keeps its neutral background (the fill is 0% wide, so nothing of the secondary colour shows) and the
 * percentage stays on screen; only the claim that somebody owes this work is withdrawn. The first
 * verdict moves the bar to --partial and every DOK-832 behaviour resumes unchanged. */
.dok-review-progress--not-started {
    border-color: rgba(148, 163, 184, .28);
    background: rgba(148, 163, 184, .07);
}

.dok-review-progress--not-started .dok-review-progress__head {
    color: var(--mud-palette-text-secondary);
}

/* DOK-903 — the dossier is closed, so this is a record and not a status. Muted like --not-started and
 * for a stronger version of the same reason: there, the obligation was optional; here it is impossible.
 * A closed dossier used to draw "0% — Not started" in the not-started tone with no actions and no
 * explanation, and a DEV test read that as the review feature being broken.
 *
 * The fill keeps its width, because what was reviewed before closing is worth seeing; what it loses is
 * the colour that reads as "in progress". Deliberately NOT display:none — DOK-832 asks for the bar on
 * every dossier, and hiding it would answer "why can I not decide?" by removing the question. */
.dok-review-progress--closed {
    border-color: rgba(148, 163, 184, .28);
    background: rgba(148, 163, 184, .07);
}

.dok-review-progress--closed .dok-review-progress__head,
.dok-review-progress--closed .dok-review-progress__detail {
    color: var(--mud-palette-text-secondary);
}

.dok-review-progress--closed .dok-review-progress__track i {
    background: rgba(148, 163, 184, .55);
}

/* ---------------------------------------------------------------------------------------------- */
/* Per-attachment review panel (sits above the attachment's dynamic fields)                         */
/* ---------------------------------------------------------------------------------------------- */

.case-file-review {
    display: grid;
    gap: .5rem;
    margin-bottom: .85rem;
    padding: .6rem .75rem;
    border: 1px solid rgba(148, 163, 184, .22);
    border-left-width: 3px;
    border-radius: 8px;
    background: rgba(248, 250, 252, .6);
}

.case-file-review__state {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.2;
}

.case-file-review__by {
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    font-weight: 700;
}

.case-file-review__reason {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    padding: .4rem .5rem;
    border-radius: 6px;
    background: rgba(var(--mud-palette-error-rgb), .08);
    color: var(--mud-palette-text-primary);
    font-size: .76rem;
    line-height: 1.35;
    white-space: pre-wrap;
}

.case-file-review__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.case-file-review__reason-editor {
    display: grid;
    gap: .45rem;
}

/* ---------------------------------------------------------------------------------------------- */
/* Row-level verdict chip in the attachment table (visible without expanding the row)               */
/* ---------------------------------------------------------------------------------------------- */

/* Global rather than in DokAttachmentsSection.razor.css, where it would also have worked: one feature,
 * one stylesheet. Splitting the chip from the panel it summarizes is how the two drift apart. */
.dok-file-manager__review {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    padding: .1rem .4rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
}

.dok-file-manager__review .mud-icon-root {
    font-size: .85rem;
}

/* Outstanding work is the loud one: the reviewer is scanning for what is left, not for what is done. */
.dok-file-manager__review--pending {
    color: var(--mud-palette-warning);
    background: rgba(var(--mud-palette-warning-rgb), .13);
}

.dok-file-manager__review--approved {
    color: var(--mud-palette-success);
    background: rgba(var(--mud-palette-success-rgb), .10);
}

.dok-file-manager__review--rejected {
    color: var(--mud-palette-error);
    background: rgba(var(--mud-palette-error-rgb), .11);
}

/* Unreviewed is the state the reviewer has to find in a long list, so it is the one that is marked
 * rather than the one that is plain — the issue asks that pending files be "facilmente identificáveis". */
.case-file-review--pending {
    border-left-color: var(--mud-palette-warning);
    background: rgba(var(--mud-palette-warning-rgb), .07);
}

.case-file-review--pending .case-file-review__state {
    color: var(--mud-palette-warning);
}

.case-file-review--approved {
    border-left-color: var(--mud-palette-success);
    background: rgba(var(--mud-palette-success-rgb), .07);
}

.case-file-review--approved .case-file-review__state {
    color: var(--mud-palette-success);
}

.case-file-review--rejected {
    border-left-color: var(--mud-palette-error);
    background: rgba(var(--mud-palette-error-rgb), .07);
}

.case-file-review--rejected .case-file-review__state {
    color: var(--mud-palette-error);
}