/* Pending confirmation - item review
   ------------------------------------------------------------------
   A pending line is released by two departments countersigning it: the warehouse
   says the stock is there, production says it can be planned. So the panel under
   the row is built as a sign-off slip rather than a settings pane - each gate is
   a stamp that carries a name and a time once it is given, and the discussion
   about the line sits underneath the signatures it explains.

   Micro-labels, the left accent rail and the tinted surfaces follow the order
   code readout, because both plates hang off the same item row. */

.pir {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

/* Header: what the panel is, and what the line is still waiting for. */
.pir__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2px 16px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pir__eyebrow {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.pir__status {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.pir__status.is-complete {
    color: color-mix(in srgb, var(--mud-palette-success) 60%, var(--mud-palette-text-primary));
}

.pir__status.is-blocked {
    color: color-mix(in srgb, var(--mud-palette-error) 60%, var(--mud-palette-text-primary));
    font-weight: 600;
}

/* The two gates. Each keeps its own rail, so one can be signed while the other
   is still open without the pair reading as a single half-finished block. */
.pir__gates {
    display: flex;
    flex-wrap: wrap;
}

.pir__gate {
    --pir-accent: var(--mud-palette-lines-default);
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 9px 14px 11px;
    border-left: 3px dashed var(--pir-accent);
}

.pir__gate.is-signed {
    --pir-accent: var(--mud-palette-success);
    border-left-style: solid;
    background: color-mix(in srgb, var(--mud-palette-success) 6%, transparent);
}

/* An answer too, and stamped like the other one - but the one that stops the document,
   so it is the only place in the panel that takes the error hue. */
.pir__gate.is-blocked {
    --pir-accent: var(--mud-palette-error);
    border-left-style: solid;
    background: color-mix(in srgb, var(--mud-palette-error) 7%, transparent);
}

.pir__gate.is-locked {
    border-left-style: solid;
}

.pir__gate-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.pir__gate.is-signed .pir__gate-label,
.pir__gate.is-blocked .pir__gate-label {
    color: color-mix(in srgb, var(--pir-accent) 55%, var(--mud-palette-text-primary));
}

/* The stamp: the answer on one line, who gave it and when on the next. Read off the
   panel instead of out of a tooltip, because it is the record the sign-off produces. */
.pir__stamp {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pir__stamp-verdict {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--pir-accent) 55%, var(--mud-palette-text-primary));
}

.pir__stamp-verdict .mud-icon-root {
    color: inherit;
    fill: currentColor;
}

.pir__stamp-by {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    min-width: 0;
}

/* Both answers sit together, but only one of them is the outcome the document wants. */
.pir__answers {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.pir__stamp-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.pir__stamp-time {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.pir__gate-note {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* Withdrawing a signature is rare and never the thing to reach for first. */
.pir__withdraw {
    margin-left: -8px;
    font-size: 0.6875rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mud-palette-text-secondary);
}

/* Reached for after the answer buttons, and set below them - it is what the answer is
   given against, not another way to give it. */
.pir__checkstock {
    margin-left: -8px;
    font-size: 0.6875rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mud-palette-text-secondary);
}

/* The thread. Hairlines rather than nested cards - a comment is a line in a
   log, and boxing each one buries three sentences in four borders. */
.pir__thread {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 8px 14px 12px;
}

.pir__thread-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.pir__thread-count {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--mud-palette-text-secondary);
}

.pir__empty {
    font-size: 0.75rem;
    line-height: 1.45;
    max-width: 82ch;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.pir__comment {
    padding: 6px 0;
}

.pir__comment + .pir__comment {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pir__comment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 22px;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

.pir__comment-author {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
}

.pir__comment-time {
    font-variant-numeric: tabular-nums lining-nums;
}

.pir__comment-body {
    font-size: 0.8125rem;
    line-height: 1.45;
    max-width: 82ch;
    white-space: pre-wrap;
    color: var(--mud-palette-text-primary);
}

.pir__composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.pir__composer .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* Row flags -------------------------------------------------------------
   What the grid keeps of the review: whether each gate is signed, and whether
   anyone has said anything about the line. Reading only, so the decision stays
   in the panel where the name and the time are. */
.pir-flags {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Scoped through the container, and setting fill as well as colour: the icon's own
   MudBlazor rules load after this sheet and would otherwise win the tie. */
.pir-flags .pir-flag {
    color: var(--mud-palette-action-disabled);
    fill: var(--mud-palette-action-disabled);
}

.pir-flags .pir-flag.is-on {
    color: var(--mud-palette-success);
    fill: var(--mud-palette-success);
}

.pir-flags .pir-flag.is-blocked {
    color: var(--mud-palette-error);
    fill: var(--mud-palette-error);
}

/* Said in words, not only in red: a line the warehouse cannot cover is the one thing
   worth reading straight off the table. */
.pir-flag-note {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--mud-palette-error) 60%, var(--mud-palette-text-primary));
}

.pir-flag-count {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--mud-palette-text-secondary);
}

.pir-flags .pir-flag-count .mud-icon-root {
    color: inherit;
    fill: currentColor;
}

/* Row manifest ----------------------------------------------------------
   The child row of the pending list: every item of the document, the quantity
   it commits to, and the two answers it is still waiting for. Reading only -
   an answer is given in the panel on the confirmation itself, where the name
   and the time it records have somewhere to go.

   Built as a figure column rather than a card list: the quantities and the
   dates are compared down the column, so they are set in tabular numerals and
   aligned on a fixed grid, and the rows are separated by hairlines only. */

.pir-items {
    padding: 8px 12px 10px;
    background: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pir-items__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 12px;
    margin-bottom: 6px;
}

.pir-items__eyebrow {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.pir-items__summary {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.pir-items__summary.is-ready {
    font-weight: 600;
    color: color-mix(in srgb, var(--mud-palette-success) 60%, var(--mud-palette-text-primary));
}

/* One segment per item, in document order, so a fourteen-line confirmation
   shows which position is holding it up - which a percentage cannot say. Half
   filled means one of the two departments has answered. */
.pir-items__meter {
    display: flex;
    gap: 2px;
    flex: 0 1 240px;
    min-width: 88px;
    margin-left: auto;
}

.pir-items__seg {
    flex: 1 1 6px;
    max-width: 24px;
    height: 6px;
    border-radius: 1px;
    background: var(--mud-palette-lines-default);
}

.pir-items__seg.is-half {
    background: linear-gradient(90deg, var(--mud-palette-success) 0 50%, var(--mud-palette-lines-default) 50%);
}

.pir-items__seg.is-signed {
    background: var(--mud-palette-success);
}

.pir-items__seg.is-blocked {
    background: var(--mud-palette-error);
}

.pir-items__table {
    --pir-items-cols: 2rem 5.25rem minmax(0, 1fr) 6rem 7rem 7rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pir-items__row {
    display: grid;
    grid-template-columns: var(--pir-items-cols);
    align-items: center;
    gap: 0 10px;
    min-height: 25px;
    padding: 2px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pir-items__row.is-head {
    min-height: 0;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* The one item that stops the document, tinted like the gate that reports it. */
.pir-items__row.is-blocked {
    background: color-mix(in srgb, var(--mud-palette-error) 7%, transparent);
}

.pir-items__col {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.pir-items__col.is-figure {
    text-align: right;
}

.pir-items__pos {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums lining-nums;
    text-align: right;
    color: var(--mud-palette-text-secondary);
}

/* The number keeps the right edge of its own sub-column and the unit starts
   after it, so the quantities read as a column of figures, not as strings. */
.pir-items__qty {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
}

.pir-items__amount {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
    text-align: right;
    color: var(--mud-palette-text-primary);
}

.pir-items__uom {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

.pir-items__item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

/* An article number is a code, so it is set like one - same chip as the order
   code readout, one step smaller. */
.pir-items__art {
    flex: 0 0 auto;
    font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    padding: 0 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.pir-items__text {
    min-width: 0;
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pir-items__date {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

/* Not a failure, but the confirmation cannot be created without it - and a
   changed date clears both answers, so it is worth seeing from the list. */
.pir-items__date.is-missing {
    color: color-mix(in srgb, var(--mud-palette-warning) 65%, var(--mud-palette-text-primary));
}

.pir-items__gate {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    cursor: help;
}

.pir-items__gate.is-on {
    font-weight: 500;
    color: color-mix(in srgb, var(--mud-palette-success) 60%, var(--mud-palette-text-primary));
}

.pir-items__gate.is-blocked {
    font-weight: 600;
    color: color-mix(in srgb, var(--mud-palette-error) 60%, var(--mud-palette-text-primary));
}

/* Scoped through the container and setting fill as well as colour: the icon's
   own MudBlazor rules load after this sheet and would otherwise win the tie. */
.pir-items .pir-items__gate .mud-icon-root {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    color: inherit;
    fill: currentColor;
}

/* A tooltip wraps its target in a div of its own, so the wrapper has to take the
   cell's place in the grid rather than sit inside it. */
.pir-items__row > .mud-tooltip-root {
    min-width: 0;
}

/* How many comments the item carries, parked at the end of its description so the
   badges line up in a gutter of their own before the delivery date. */
.pir-items__item > .mud-tooltip-root {
    flex: 0 0 auto;
    margin-left: auto;
}

.pir-items__comments {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    cursor: help;
}

.pir-items .pir-items__comments .mud-icon-root {
    width: 0.875rem;
    height: 0.875rem;
    font-size: 0.875rem;
    color: inherit;
    fill: currentColor;
}

/* Tooltip body. Unscoped on purpose: the popover renders at the end of the
   document, not inside the plate. Colours come from the tooltip's own surface,
   so the secondary lines are set by opacity rather than by a palette token. */
.pir-items__tip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-width: 280px;
    text-align: left;
}

.pir-items__tip-head {
    font-size: 0.75rem;
    font-weight: 600;
}

.pir-items__tip-by {
    font-size: 0.6875rem;
    opacity: 0.85;
}

.pir-items__tip-time {
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums lining-nums;
    opacity: 0.7;
}

.pir-items__tip-note {
    font-size: 0.6875rem;
    line-height: 1.4;
    opacity: 0.85;
}

.pir-items__tip-body {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    font-size: 0.6875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    opacity: 0.9;
}

.pir-items__empty {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* Narrow: the column heads stop paying for themselves, so the item text takes
   its own line and the figures wrap under it in reading order. */
@media (max-width: 760px) {
    .pir-items__row.is-head {
        display: none;
    }

    .pir-items__row {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 10px;
        padding: 4px;
    }

    .pir-items__pos {
        min-width: 1.5rem;
    }

    .pir-items__item {
        flex: 1 1 100%;
    }
}