/**
 * workflow-source.css
 *
 * ONE COLOUR PER WORKFLOW, EVERYWHERE.
 *
 * Clinic orders and protocol visits share every table and most screens, so the fastest
 * question a user asks — "which of these am I looking at?" — has to be answerable
 * without reading. These two colours answer it, and they mean the same thing on every
 * screen that uses them: a card on Home, a row in the specimen tables, the banner
 * across the top of the collection workflow, the active tab that selected it.
 *
 *   PROTOCOL  deep navy     the app's existing primary. Protocol work is what OverSite
 *                           has always been, and it keeps the colour it has always had.
 *   ORDER     forest green  distinct from navy at a glance, and deliberately NOT the
 *                           app's gold — gold already means "active/selected" on tabs,
 *                           buttons and the menu, and a colour that means two things
 *                           means neither. Dark enough to carry white text at the same
 *                           weight the navy header does, so a green panel and a navy
 *                           panel read as the same component in two states rather than
 *                           as two different components.
 *
 * 🔴 COLOUR IS NEVER THE ONLY SIGNAL. Every place these are applied also carries the
 * information in text — a tab label, a column, a badge. A user who cannot distinguish
 * navy from teal loses a shortcut, not the answer. That is also why the accent is a
 * BORDER rather than a background wash: it survives high-contrast modes and it does not
 * fight the row-selected and past-due states the tables already paint.
 *
 * @see js/modules/utils/workflow-source.ts  the one place that decides which class
 */

:root {
    --wf-protocol: #35486E;          /* the app's existing navy */
    --wf-protocol-soft: rgba(53, 72, 110, .08);
    --wf-order: #2D6A4F;             /* forest green */
    --wf-order-deep: #1B4332;        /* its darker shade, for hovers and edges */
    --wf-order-soft: rgba(45, 106, 79, .08);
}

/* ── The accent itself ───────────────────────────────────────────────────────
   A left border on any block-level thing that represents one workflow's data:
   a visit card, a table row, a list item. 3px is enough to catch the eye in a
   dense table and small enough not to shift a layout. */
.wf-src-protocol {
    border-left: 3px solid var(--wf-protocol) !important;
}

.wf-src-order {
    border-left: 3px solid var(--wf-order) !important;
}

/* Table rows: the border goes on the first cell, since a <tr> border does not
   render under border-collapse. Applied via the row class so callers only ever
   set one class. */
tr.wf-src-protocol > td:first-child {
    box-shadow: inset 3px 0 0 var(--wf-protocol);
}

tr.wf-src-order > td:first-child {
    box-shadow: inset 3px 0 0 var(--wf-order);
}

tr.wf-src-protocol,
tr.wf-src-order {
    border-left: none !important;
}

/* ── Panel headers ───────────────────────────────────────────────────────────
   The strongest signal available, and the one worth spending: a grouped panel
   states its workflow in the fill of its own header, so a screen holding both is
   legible from across the room rather than on inspection.

   The navy is the app's existing header colour, so a protocol panel is unchanged
   — only clinic orders gain a fill they did not have. `!important` because the
   base rule (.vc-proto-header in ui-improvements.css) sets `background` from a
   variable and would otherwise win on load order. */
.wf-hdr-protocol {
    background: var(--wf-protocol) !important;
    color: #fff;
}

.wf-hdr-order {
    background: var(--wf-order) !important;
    color: #fff;
}

/* A panel's edge follows its header, so the colour reads as belonging to the whole
   box rather than to a stripe on top of it. */
.vc-proto-box.wf-src-order {
    border-color: var(--wf-order);
}

.vc-proto-box.wf-src-protocol {
    border-color: var(--wf-protocol);
}

/* ── The badge ───────────────────────────────────────────────────────────────
   For the places where the accent alone is not enough — a mixed list where a
   user may be scanning for one kind, or a header that has to state what the
   screen is currently showing. This is the text half of the signal. */
.wf-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

.wf-badge--protocol {
    background: var(--wf-protocol-soft);
    color: var(--wf-protocol);
    border: 1px solid rgba(53, 72, 110, .25);
}

.wf-badge--order {
    background: var(--wf-order-soft);
    color: var(--wf-order);
    border: 1px solid rgba(45, 106, 79, .3);
}

/* ── The banner ──────────────────────────────────────────────────────────────
   The collection workflow (Supplies → Collect → Process → Distribute) is one
   encounter at a time, so there is no tab bar to say which workflow it is. The
   banner's underline does it instead — the same two colours, on every screen of
   the run. includes/banner.php sets data-order-mode; banner.ts adds the class. */
.wf-banner-protocol {
    border-bottom: 3px solid var(--wf-protocol);
}

.wf-banner-order {
    border-bottom: 3px solid var(--wf-order);
}

/* ── Tabs adopt the colour of what they select ───────────────────────────────
   This is what teaches the mapping without a legend: the tab that turns the list
   teal is itself teal when active. */
.wf-tab--active[data-scope="trial"] {
    background: var(--wf-protocol);
    border-color: var(--wf-protocol);
    color: #fff;
}

.wf-tab--active[data-scope="order"] {
    background: var(--wf-order);
    border-color: var(--wf-order);
    color: #fff;
}

/* The protocol/site filter pills above a mixed list carry the colour of what they
   filter to, so the legend is the control itself. */
.vf-pill.wf-src-order,
.vf-pill.wf-src-protocol {
    border-left-width: 3px;
}

.vf-pill.wf-src-order.active {
    background: var(--wf-order);
    border-color: var(--wf-order);
    color: #fff;
}

.vf-pill.wf-src-protocol.active {
    background: var(--wf-protocol);
    border-color: var(--wf-protocol);
    color: #fff;
}

/* Sample Management's tabs sit on the dark banner, where ui-improvements.css paints
   the active pill gold. That rule is `#id .class` and would outrank a bare
   `.wf-tab--active[data-scope]`, so the workflow colours are restated here at
   id + class + attribute to win it — otherwise the one screen with a dark header
   would be the one screen where the tab colour stops meaning anything. */
#samplemanagement-workflow-tabs .wf-tab--active[data-scope="trial"] {
    background: var(--wf-protocol);
    border-color: #fff;
    color: #fff;
}

#samplemanagement-workflow-tabs .wf-tab--active[data-scope="order"] {
    background: var(--wf-order);
    border-color: #fff;
    color: #fff;
}

/* ── List headings ───────────────────────────────────────────────────────────
   Patient Management renders the two populations as two lists; the heading over
   each carries its colour so the split is visible before either is read. */
.pm_list_heading.wf-src-protocol,
.pm_list_heading.wf-src-order {
    padding-left: 8px;
    border-left-width: 3px;
}

/* The label takes the colour too. A filled bar would be heavier than these small
   uppercase headings warrant, but leaving them grey would make the two lists look
   like one list with a rule between them. */
.pm_list_heading.wf-src-protocol { color: var(--wf-protocol); }
.pm_list_heading.wf-src-order    { color: var(--wf-order); }