/* =====================================================================================================
   PILLS, and the FilterPillRow control (Filters/FilterPillRow.razor). SHARED by the portal and the ERP:
   moved here from the portal's portal.css on 2026-10-01 so both apps draw pills from one definition.
   Each app links _content/NexStack.Shared.Web/css/pills.css BEFORE its own stylesheet.

   ONE SPOT. The colours and sizes the rules below need are the settings in :root. Each one defaults to
   the portal's own variable when the page has it (so the portal looks exactly as before), else to the
   portal's value, so the ERP gets the same look without defining the portal's variables.
   ===================================================================================================== */

:root {
    --pills-muted-text: var(--text-muted, #5b6472);
    --pills-surface: var(--surface, #ffffff);
    --pills-border: var(--border, #e2e6ee);
    --pills-radius: var(--radius-sm, 6px);
    --pills-ring: var(--brand-dark, #0C0224);   /* the ring round a selected filter pill */
}

/* ---- Pills (status chips) ---------------------------------------------- */
.pill {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}
.pill--active { background: #e3f5ff; color: #0b6a94; }
.pill--review { background: #fff3d6; color: #8a6100; }
.pill--filed { background: #e8e6ff; color: #4b3fb0; }
.pill--done { background: #e2f7ea; color: #1f7a45; }
.pill--muted { background: #eceef3; color: var(--pills-muted-text); }
/* NOTE: there is deliberately no red in this palette. Green here means FINISHED, not good -- see
   the table above this rule's usage: Paid invoices, Completed projects and Closed appeals all share
   pill--done. Adding a red for "closed" would invert that meaning app-wide, so it is an app-wide
   decision rather than a per-screen one. */

/* ---- Filter pill rows (FilterPillRow) ----------------------------------- */
/* Stacked rows of pills that narrow together. The label column is fixed-width so the pills line up
   down the left edge across all three rows -- ragged starts made them read as one wrapped set,
   which is exactly the confusion the labels are there to prevent. */
.filter-rows {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
    padding: 0.7rem 0.8rem;
    background: var(--pills-surface);
    border: 1px solid var(--pills-border);
    border-radius: var(--pills-radius);
}
.filter-row { display: flex; align-items: baseline; gap: 0.6rem; }
.filter-row__label {
    flex: 0 0 4.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pills-muted-text);
}
.filter-row__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1 1 auto; }

/* The tick on a selected pill. Several pills are selected at once across three rows, so the ring
   alone was too easy to lose. */
.pill__tick { margin-right: 0.28rem; vertical-align: -0.12em; }   /* a drawn CheckIcon since 2026-10-29 */

/* Gap between a pill's label and its count. Done in CSS, NOT as a literal space in the markup:
   Razor collapses whitespace between an expression and the next element, so "@Label <b>" is not
   reliable -- which is exactly how these shipped jammed together as "Withdrawn89848". */
.filter-row__pills .pill b { margin-left: 0.32rem; }

@media (max-width: 640px) {
    /* The label goes above its pills rather than shrinking the row to nothing. */
    .filter-row { flex-direction: column; align-items: stretch; gap: 0.3rem; }
    .filter-row__label { flex: none; }
}

/* A pill that FILTERS rather than just reporting. Unselected sits faded so the set reads as a group
   of choices; the selected one comes to full strength with a ring, which is legible without relying
   on the pill's own colour (each filter keeps its own, so opacity alone would be ambiguous). */
.pill-filter {
    border: none;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.12s ease, box-shadow 0.12s ease;
}
.pill-filter:hover { opacity: 0.85; }
.pill-filter.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--pills-ring); }
.pill-filter:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59, 203, 255, 0.5); }
.pill--sm { font-size: 0.7rem; padding: 0.1rem 0.45rem; }