/* Stock check - verdict bar and mark legend
   ------------------------------------------------------------------
   The panel above this bar is evidence; the bar is the finding. Everything a
   reader opens a stock check for comes down to one word - can this quantity be
   covered by this date - so that word is set first, on a rail in its own colour,
   and the controls that produced it sit underneath in a quieter band.

   The colour vocabulary is three states and nothing else: green covered, red
   short, amber held. The same three carry the row icons in the table, so the
   legend at the end of the bar teaches the rail and the rail teaches the table.

   Micro-labels, tabular figures and the left accent rail follow the pending item
   review, because this dialog opens from it and should read as the same system. */

.sc-foot {
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

/* The finding ---------------------------------------------------------- */

.sc-verdict {
    --sc-state: var(--mud-palette-lines-default);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 12px;
    padding: 9px 14px 10px;
    border-left: 3px solid var(--sc-state);
    background: color-mix(in srgb, var(--sc-state) 5%, transparent);
}

.sc-verdict.is-covered { --sc-state: var(--mud-palette-success); }
.sc-verdict.is-short { --sc-state: var(--mud-palette-error); }
.sc-verdict.is-waiting { --sc-state: var(--mud-palette-warning); }
.sc-verdict.is-blocked { --sc-state: var(--mud-palette-error); }

/* The one loud thing in the panel. It is the answer the dialog exists to give. */
.sc-verdict__state {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--sc-state) 62%, var(--mud-palette-text-primary));
}

.sc-verdict__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.sc-verdict__head {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums lining-nums;
}

/* Hoverable when there is a list of short parts behind it. Dotted rather than
   solid, so it reads as "there is more here" and not as a link that navigates. */
.sc-verdict__head.is-linked {
    cursor: help;
    border-bottom: 1px dotted color-mix(in srgb, var(--sc-state) 50%, transparent);
}

/* Two shortfalls, two departments. They are set as separate counted clauses rather than one
   total, each in the colour of the mark it maps to in the table, so a buyer and a planner can
   each find their own number without reading the other's. */
.sc-clause {
    font-variant-numeric: tabular-nums lining-nums;
}

.sc-clause + .sc-clause::before,
.sc-clause + .sc-clause__by::before {
    content: "·";
    margin: 0 6px;
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

.sc-clause.is-buy {
    color: color-mix(in srgb, var(--mud-palette-error) 68%, var(--mud-palette-text-primary));
}

.sc-clause.is-build {
    color: color-mix(in srgb, var(--mud-palette-warning) 72%, var(--mud-palette-text-primary));
}

.sc-clause b {
    font-weight: 700;
}

/* The deadline both counts are measured against, said once at the end. */
.sc-clause__by {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
    font-variant-numeric: tabular-nums lining-nums;
}

.sc-verdict__note {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums lining-nums;
}

/* Same dotted affordance the finding above uses, so a line that names things and a line
   that only reports read as the same kind of thing when they both hold a list. */
.sc-verdict__note.is-linked {
    cursor: help;
    border-bottom: 1px dotted color-mix(in srgb, var(--mud-palette-text-secondary) 55%, transparent);
}

/* Controls and legend -------------------------------------------------- */

.sc-foot__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 6px 14px 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.sc-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sc-controls__date {
    max-width: 9.5rem;
}

/* Going back to the date the check was opened with is a correction, not a
   choice on offer - it only appears once the date has been moved. */
.sc-controls__revert {
    font-size: 0.6875rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mud-palette-text-secondary);
}

/* What the marks mean. A row of pairs rather than a boxed key: it belongs to the
   table above it, and a box would make it a second thing to read. */
.sc-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.sc-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Scoped through the list and setting fill as well as colour: MudBlazor's own
   icon rules load after this sheet and would otherwise win the tie. */
.sc-legend .sc-legend__item .mud-icon-root {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    color: inherit;
    fill: currentColor;
}

.sc-legend__item.is-covered { color: color-mix(in srgb, var(--mud-palette-success) 60%, var(--mud-palette-text-primary)); }
.sc-legend__item.is-short { color: color-mix(in srgb, var(--mud-palette-error) 60%, var(--mud-palette-text-primary)); }
.sc-legend__item.is-held { color: color-mix(in srgb, var(--mud-palette-warning) 62%, var(--mud-palette-text-primary)); }

/* The last entry explains a mark that qualifies a number rather than a row, so it
   carries the full sentence on hover and stays short on the line. */
.sc-legend__item[title] {
    cursor: help;
}

/* Marks in the Missing column ------------------------------------------
   Three things get said in this column - buy it, build it, look inside - and they are
   one component with three states, not three components. A shared chassis and one
   grammar: mark, figure, what the figure counts. Only the icon and the colour change,
   so the column reads as a single vocabulary rather than a pile of badges.

   No border and no fill. In a table this dense the box is the loudest thing on the row
   and it carries no information the colour is not already carrying. */
.sc-mark {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-right: 6px;
    white-space: nowrap;
    cursor: help;
    color: color-mix(in srgb, var(--mud-palette-error) 72%, var(--mud-palette-text-primary));
}

/* Figures first, in tabular numerals, so they land in the same place on every row and the
   column can be scanned down rather than read across. The footer clauses count the same way. */
.sc-mark__figure {
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
}

.sc-mark__label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* Scoped and setting fill as well as colour: MudBlazor's icon rules load after this sheet. */
.sc-mark .mud-icon-root {
    align-self: center;
    width: 0.9375rem;
    height: 0.9375rem;
    font-size: 0.9375rem;
    color: inherit;
    fill: currentColor;
}

/* Work this company can do to itself, rather than a hole someone has to buy out of. */
.sc-mark.is-build {
    color: color-mix(in srgb, var(--mud-palette-warning) 75%, var(--mud-palette-text-primary));
}

/* Buildable inside its own lead time - the order is covered, the mark only names the job. */
.sc-mark.is-ontime {
    color: color-mix(in srgb, var(--mud-palette-success) 62%, var(--mud-palette-text-primary));
}

/* Narrow: the bar stops being two columns and becomes two rows, finding first. */
@media (max-width: 720px) {
    .sc-foot__bar {
        align-items: flex-start;
        flex-direction: column;
    }
}