/* Sizes for older eyes (feedback of 7 October): 15px on a phone, 16px from a tablet up; see "Readability" at the end. */
html {
  font-size: 15px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Hidden means hidden: Bootstrap's display utilities (d-flex…) come after its [hidden] rule and would show the element,
   as the Request page's From and To did on a product (feedback of 28 October). */
.d-flex[hidden], .d-inline-flex[hidden], .d-block[hidden], .d-inline-block[hidden], .d-grid[hidden] {
  display: none !important;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table td, .table th {
  vertical-align: middle;
}

/* Line-item editor: stack each line as a card on phones, table row on wider screens. */
.line-row .form-control, .line-row .form-select {
  min-width: 0;
}

@media (max-width: 767.98px) {
  .lines-table thead {
    display: none;
  }

  .lines-table tr {
    display: block;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    margin-bottom: .75rem;
    padding: .5rem;
  }

  .lines-table td {
    display: block;
    border: 0;
    padding: .25rem 0;
  }

  .lines-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .8rem;
    color: var(--bs-secondary-color);
  }
}

.approval-step {
  border-left: 4px solid var(--bs-border-color);
  padding-left: .75rem;
  margin-bottom: .75rem;
}

.approval-step.done {
  border-left-color: var(--bs-success);
}

.approval-step.current {
  border-left-color: var(--bs-warning);
}

.audit-changes {
  font-size: .85rem;
  margin: 0;
  padding-left: 1rem;
}

/* asp-validation-summary renders an empty container when valid; don't show an empty alert box. */
.validation-summary-valid {
  display: none;
}

.field-validation-error {
  color: var(--bs-danger);
  font-size: .85rem;
}

/* The account menu's away status (feedback of 28 October): a dot, green while available, amber while away or planned. */
.wj-away-status { display: flex; align-items: center; justify-content: flex-start !important; gap: .5rem; }
.wj-status-dot { flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.wj-status-dot.is-away { background: #e0a100; }

/* A field's error, under it (FieldErrors, feedback of 28 October: no banner above the form). */
.field-error { margin-top: .25rem; }
.field-error:empty { display: none; }
/* A searchable select's general "Choose … from the list." gives way to the field's own message under it. */
.search-select:has(+ .field-error.field-validation-error) > .invalid-feedback { display: none; }

/* ---- Lists: fixed, uniform column widths (long text is cut with "…"; full text in the title tooltip) ---- */
.table-fixed {
  table-layout: fixed;
  min-width: 860px; /* scrolls sideways on phones instead of squashing columns */
}

.table-fixed th,
.table-fixed td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.po-table .col-chips { width: 7.5rem; }
.po-table .col-po { width: 7.25rem; }
.po-table .col-date { width: 6.25rem; }
.po-table .col-project { width: auto; }
.po-table .col-supplier { width: auto; }
/* Project and Supplier share what the fixed columns leave (--po-fixed), but never less than --po-name-min each: below that
   the table scrolls sideways (.table-responsive) rather than squeezing them, and each wraps to two lines (UAT L3).
   _PoTable sets --po-names to the number of them it shows. */
.po-table.table-fixed { --po-fixed: 49.5rem; --po-name-min: 7.75rem; min-width: calc(var(--po-fixed) + var(--po-names, 2) * var(--po-name-min)); }
/* With stages it fits a 1440px laptop screen without scrolling: 54rem fixed and 7.75rem for each name (UAT review). */
.po-table.table-fixed.po-table-stages { --po-fixed: 54rem; }
.po-table .po-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; white-space: normal; overflow-wrap: break-word; line-height: 1.25;
}
.po-table .col-person { width: 10rem; }
.po-table .col-money { width: 7.5rem; }
.po-table .col-status { width: 11rem; }

.po-table td.chips .badge + .badge { margin-left: .15rem; }

.btn-xs {
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: .35rem;
  --bs-btn-font-size: .8rem;
  line-height: 1.4;
  vertical-align: middle;
}

/* Sortable headers */
.sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  max-width: 100%;
}

.sort-link:hover { text-decoration: underline; }
.sort-caret { font-size: .7em; opacity: .35; }
.sort-link.active .sort-caret { opacity: 1; }
th.num .sort-link { justify-content: flex-end; width: 100%; }

/* Tables where a column holds multi-line content keep fixed widths but let that column wrap. */
.table-fixed.history-table td:nth-child(3), .table-fixed.history-table td:last-child { white-space: normal; }
/* PO page lines: the fixed columns (--lines-fixed, set by the page) plus at least 14rem for the description (UAT L3). */
.table-fixed.lines-view { min-width: calc(var(--lines-fixed, 31rem) + 14rem); }
/* The whole description, the line's project as "number · name" and the nominal code, wrapped rather than cut off (UAT L3). */
.lines-view td.line-desc, .lines-view td.line-project, .lines-view td.line-nominal { white-space: normal; overflow-wrap: break-word; }

/* Breathing room after a right-aligned number column (e.g. Net value → Status). */
.table-fixed th.num + th,
.table-fixed td.num + td { padding-left: 1rem; }

/* PO number + PDF quick button: button pinned right so the column lines up. */
.po-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}

/* ---- Line items ---- */

/* Tables that sit edge-to-edge in a card: first/last cells line up with the card header's 1rem padding. */
@media (min-width: 768px) {
  .card .table > :is(thead, tbody, tfoot) > tr > :first-child { padding-left: 1rem; }
  .card .table > :is(thead, tbody, tfoot) > tr > :last-child { padding-right: 1rem; }
}

/* Read-only lines: a little more air per row. */
.lines-view > :is(thead, tbody, tfoot) > tr > * { padding-top: .45rem; padding-bottom: .45rem; }

/* Basket comparison: the option chosen below is outlined. */
.option-card-on { border-color: var(--wj-blue); box-shadow: 0 0 0 .2rem var(--wj-blue-10); }

/* The project per line shows only while "Charge lines to different projects" is on (po-edit.js). */
.lines-table:not(.show-projects) .line-project-col { display: none !important; }

/* Editor rows: inputs get breathing room; the remove button column is compact. */
@media (min-width: 768px) {
  .lines-table > :is(thead, tbody, tfoot) > tr > * { padding: .45rem .3rem; }
  .lines-table > :is(thead, tbody, tfoot) > tr > :first-child { padding-left: 1rem; }
  .lines-table > :is(thead, tbody, tfoot) > tr > :last-child { padding-right: 1rem; }
  .lines-table .line-total { padding-right: .75rem; }
}

@media (max-width: 767.98px) {
  /* Editor on phones: each line is a card; short fields pair up two per row, net + remove share the last row. */
  .lines-table tr {
    display: flex;
    flex-wrap: wrap;
    column-gap: .5rem;
    padding: .6rem .75rem;
  }
  .lines-table tfoot tr { border: 0; padding: .25rem .75rem 0; justify-content: space-between; }
  .lines-table tfoot td { display: block; padding: 0; flex: 0 0 auto; }
  .lines-table tfoot td:empty { display: none; }
  .lines-table tbody td { flex: 1 1 100%; }
  .lines-table tbody td[data-label="Quantity"],
  .lines-table tbody td[data-label="Units"],
  .lines-table tbody td[data-label="Unit price £"],
  .lines-table tbody td[data-label="Disc %"],
  .lines-table tbody td[data-label="Nominal code"] { flex: 1 1 calc(50% - .25rem); }
  .lines-table tbody td.line-total {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-weight: 600;
    padding-top: .5rem;
  }
  .lines-table tbody td.line-total::before { display: inline; }
  .lines-table tbody td:last-child { flex: 0 0 auto; align-self: flex-end; padding-top: .5rem; }

  /* Read-only lines on phones: description on top, details as label/value pairs, no sideways scroll. */
  .table-fixed.lines-view { min-width: 0; table-layout: auto; }
  .lines-view colgroup, .lines-view thead { display: none; }
  .lines-view tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .15rem .75rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .lines-view tbody td { display: block; border: 0; padding: 0 !important; text-align: left; white-space: normal; }
  .lines-view tbody td.line-desc { grid-column: 1 / -1; font-weight: 600; margin-bottom: .2rem; }
  .lines-view tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .75rem;
    color: var(--bs-secondary-color);
  }
  .lines-view tbody td.line-net { font-weight: 600; }
  .lines-view tfoot tr { display: flex; justify-content: space-between; padding: .6rem 1rem; }
  .lines-view tfoot td { display: block; border: 0; padding: 0 !important; }
}

/* "← All …" link above a detail page's title. */
.back-link {
  display: inline-block;
  font-size: .9rem;
  margin-bottom: .35rem;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

/* ---- Hub (Pages/Index): a card per app ---- */
.hub-card { border-top: 3px solid var(--wj-blue); }
.hub-card-mrf { border-top-color: var(--wj-navy); }
.hub-card-yard { border-top-color: var(--wj-beige); }
.hub-card-admin { border-top-color: var(--wj-coral); }
/* An app that isn't open yet (Features:YardComingSoon): greyed, no button. */
.hub-card-soon { border-top-color: var(--bs-border-color); background: var(--bs-tertiary-bg); }
.hub-card-soon h2 { color: var(--bs-secondary-color); }

/* Material requests: the count tiles above the list filter it; Urgent and Late get the accent edge when any are open. */
.mrf-tiles { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.home-tile.mrf-tile-alert { border-top: 3px solid var(--wj-coral); }
.hub-counts { display: flex; flex-direction: column; gap: .35rem; }
.hub-count { display: inline-flex; align-items: center; gap: .5rem; color: var(--wj-navy); text-decoration: none; font-weight: 600; }
.hub-count:hover, .hub-count:focus-visible { color: var(--wj-navy); text-decoration: underline; }
.hub-count.is-zero { color: var(--bs-secondary-color); font-weight: 400; }
.hub-count .badge { min-width: 2rem; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .hub-card .btn { width: 100%; } }

/* ---- A form's buttons, at its foot on the right: Cancel first, the main action last (furthest right), so the tab
   order runs as they read. Anything that belongs on the left (Delete, a hint) takes .me-auto. ---- */
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }

/* ---- PO home ---- */
.home-section { margin-bottom: .6rem; }
.home-toggle { font: inherit; letter-spacing: inherit; text-transform: inherit; }
.home-toggle .home-caret { display: inline-block; transition: transform .15s; }
.home-toggle.collapsed .home-caret { transform: rotate(-90deg); }
.home-note { font-style: italic; white-space: normal; }
.min-w-0 { min-width: 0; }

/* Tiles wrap to fit (7 across on a wide screen). */
.home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem; }
@media (max-width: 575.98px) { .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-tile .card-body { padding: .75rem .9rem; }
/* Tiles that follow the period (Total, Approved). */
.home-tile-period { border-top: 3px solid var(--wj-blue); }
.home-tile-label { font-size: .875rem; font-weight: 600; color: var(--bs-secondary-color); }
.home-tile-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.home-tile-note { font-size: .85rem; color: var(--bs-secondary-color); }
a.home-tile:hover, a.home-tile:focus-visible { border-color: var(--wj-blue); background: var(--wj-blue-10); }

/* Horizontal bar lists: the bar is scaled against the largest row. */
.bar-list .list-group-item { padding-top: .45rem; padding-bottom: .45rem; }
.bar-track { height: .35rem; margin-top: .25rem; border-radius: .2rem; background: var(--wj-blue-10); overflow: hidden; }
.bar-fill { height: 100%; border-radius: .2rem; background: var(--wj-blue); }

.home-newest td, .home-newest th { white-space: nowrap; }
.home-newest td.text-truncate { max-width: 12rem; }
#overview-body { transition: opacity .15s; }
#overview-body.is-loading { opacity: .5; pointer-events: none; }

/* People cards (POs submitted by person): picture, name, counts; the whole card filters the PO list. */
.person-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--wj-navy-10);
  border-radius: .5rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.person-card:hover, .person-card:focus-visible { border-color: var(--wj-blue); background: var(--wj-blue-10); color: inherit; }
.person-card-text { display: flex; flex-direction: column; min-width: 0; }
.person-card-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-card-counts { display: flex; flex-wrap: wrap; column-gap: .75rem; font-size: .8rem; color: var(--bs-secondary-color); }
.person-card-counts strong { color: var(--wj-navy); font-variant-numeric: tabular-nums; }

/* The tile, person or row the PO list below is showing (set by po-list.js). */
.home-tile.is-filtering, .person-card.is-filtering {
  border-color: var(--wj-navy);
  box-shadow: inset 0 0 0 1px var(--wj-navy);
  background: var(--wj-blue-10);
}
a.is-filtering:not(.home-tile):not(.person-card) { font-weight: 700; color: var(--wj-navy); }

/* Picked people get a tick (several can be picked). */
.person-card { position: relative; padding-right: 2rem; }
.person-card.is-filtering::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: .6rem;
  transform: translateY(-50%);
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--wj-navy);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* "Waiting for approval" cards: picture, name, count, total and a bar relative to the busiest person, stacked and centred. */
.person-card-stacked { flex-direction: column; justify-content: flex-start; gap: .3rem; padding: .85rem 1.5rem .75rem; text-align: center; }
.person-card-stacked .person-card-name { max-width: 100%; }
.person-card-net { display: block; font-size: .8rem; color: var(--bs-secondary-color); }
.person-card-waiting { font-size: .95rem; }
.person-card-waiting strong { font-size: 1.35rem; color: var(--wj-navy); font-variant-numeric: tabular-nums; }
.person-card-stacked.is-filtering::after { top: .5rem; transform: none; }
.person-card-bar { display: block; width: 100%; margin-top: .35rem; }

/* Home "Requested and approved": the window's totals, then requested / approved per requester (scrolls when long). */
.home-today { max-height: 22rem; overflow-y: auto; }
.home-today-total { font-size: 1.05rem; }
.home-today-total strong { font-size: 1.5rem; color: var(--wj-navy); font-variant-numeric: tabular-nums; }
.home-today-counts { display: flex; gap: 1rem; white-space: nowrap; font-size: .875rem; color: var(--bs-secondary-color); }
.home-today-counts strong { color: var(--wj-navy); font-variant-numeric: tabular-nums; }

/* The PO list on Home, while po-list.js loads a new filter / page. */
.po-list { transition: opacity .15s; scroll-margin-top: 1rem; }
.po-list.is-loading { opacity: .5; pointer-events: none; }
#po-list-heading:focus { outline: none; }
@media (max-width: 1279.98px) { .po-list { scroll-margin-top: 4.5rem; } } /* below the sticky top bar */

/* Searchable drop-downs (wwwroot/js/searchable-select.js): a search box over a hidden <select>. */
.search-select { position: relative; }
.search-select-list {
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 18rem;
  overflow-y: auto;
  margin-top: .125rem;
}
.search-select-list .dropdown-item { white-space: normal; cursor: pointer; }
.search-select-list .dropdown-item.active { background: var(--wj-blue-10); color: var(--wj-navy); }
.search-select-list .dropdown-item.is-selected { font-weight: 600; }
.search-select-list .dropdown-item strong { font-weight: 700; text-decoration: underline; text-decoration-color: var(--wj-blue); }
.search-select-note { padding: .35rem 1rem; font-size: .85rem; color: var(--bs-secondary-color); }
/* In the PO form's narrow line columns (units, nominal code), the list is as wide as its options, not the cell; the
   nominal code's opens leftwards, as it's near the right edge. */
.lines-table .search-select-list:not(.line-item-list) { width: max-content; min-width: 100%; max-width: min(26rem, 90vw); }
.lines-table .line-nominal + .search-select .search-select-list { left: auto; right: 0; }
/* The catalogue suggestions under a line's description: wider than the Description cell, so a code and description fit
   on one line (UAT L1). On a phone the cell is already the full width. */
@media (min-width: 768px) {
  .lines-table .line-item-list { width: min(44rem, calc(100vw - 4rem)); min-width: 100%; }
}
/* An ⓘ that opens a note beside it (<info-tip>, Pages/InfoTip.cs; site.js makes it a popover). Grey, and the brand blue
   while its note is open or it's pointed at. */
.wj-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: .2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bs-secondary-color);
  vertical-align: -.2em;
  cursor: help;
}
.wj-info svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.wj-info .wj-info-dot { fill: currentColor; }
.wj-info:hover, .wj-info[aria-describedby] { color: var(--wj-blue); }
.wj-info:focus-visible { outline: none; box-shadow: 0 0 0 .2rem rgba(0, 159, 218, .35); }
.wj-info-popover { --bs-popover-max-width: 22rem; --bs-popover-font-size: .85rem; }
/* Nothing matched: "Add “…” as a new supplier" (quick-add.js), or "Use “…”" for a delivery contact not listed. The link colour, so it reads as an action (dark.css sets the colour). */
.search-select-add { color: var(--bs-link-color); font-size: .9rem; font-weight: 500; white-space: normal; }

/* Multi-select drop-downs (wwwroot/js/multi-select.js): a checkbox list in a dropdown, styled like a select. */
.multi-select-menu { width: 100%; min-width: 14rem; }
.multi-select-options { max-height: 16rem; overflow-y: auto; }
.multi-select-options .form-check { margin-bottom: .15rem; }

/* Wide line tables (MRF lines, a yard request's lines, pick lists) stacked on phones: each row becomes a block, each
   cell with a data-label shows that label on its left, and cells without one (the item, actions) take the full width. */
@media (max-width: 767.98px) {
    .table-stack > thead { display: none; }
    .table-stack, .table-stack > tbody, .table-stack > tbody > tr, .table-stack > tbody > tr > td { display: block; width: 100%; }
    .table-stack > tbody > tr { border-bottom: 1px solid var(--bs-border-color); padding: .4rem 0; }
    .table-stack > tbody > tr > td { border: 0; padding: .15rem .75rem; text-align: left; }
    .table-stack > tbody > tr > td:empty { display: none; }
    .table-stack > tbody > tr > td[data-label] { position: relative; padding-left: calc(40% + .75rem); }
    .table-stack > tbody > tr > td[data-label]::before {
        content: attr(data-label); position: absolute; left: .75rem; width: 40%; color: var(--bs-secondary-color); font-size: .875em;
        padding-top: .1rem;
    }
    .table-stack > tbody > tr > td.text-end { text-align: left !important; }
    .table-stack .text-nowrap { white-space: normal !important; }
    /* A fixed-width list (Stock on hand, Yard items) stacks too: no minimum width, and long text wraps. */
    .table-stack.table-fixed { min-width: 0; table-layout: auto; }
    .table-stack.table-fixed > tbody > tr > td { white-space: normal; overflow: visible; }
    .table-stack > tbody > tr.mrf-has-trail { border-bottom: 0; padding-bottom: 0; }
    .table-stack > tbody > tr.mrf-trail-row { padding-top: 0; }
}

/* An MRF line's timeline (Pages/Shared/_MrfTrail, Services/MrfTrail.cs): folded up under the line in a row of its own;
   open, a rail of steps, oldest first, setbacks (rejected, voided, short, cancelled) marked in red. */
tr.mrf-has-trail > td { border-bottom-width: 0; }
tr.mrf-trail-row > td { padding-top: 0; }
.mrf-trail > summary { width: fit-content; cursor: pointer; font-size: .875em; color: var(--bs-link-color); }
.mrf-trail-list { list-style: none; margin: .4rem 0 .25rem .35rem; padding-left: 1rem; border-left: 2px solid var(--bs-border-color); font-size: .875em; }
.mrf-trail-list > li { position: relative; padding: .1rem 0 .35rem; }
.mrf-trail-list > li::before {
    content: ""; position: absolute; left: calc(-1rem - 5px); top: .5rem; width: 8px; height: 8px; border-radius: 50%;
    background: var(--bs-primary);
}
.mrf-trail-list > li.mrf-trail-setback::before { background: var(--bs-danger); }
.mrf-trail-when { margin-right: .35rem; color: var(--bs-secondary-color); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Request page and My requests (docs/request-and-tracking-design.md) ---- */
/* Beside the catalogue the cart stays on screen; a cart taller than the window scrolls inside, so Check out can be reached. */
@media (min-width: 1200px) { .cart-panel { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; } }
/* A phone's cart is far below the catalogue: this link stays on screen and jumps to it. */
.cart-jump { position: fixed; right: 1rem; bottom: 1rem; z-index: 1030; padding: .5rem .9rem; border-radius: 2rem; background: var(--wj-blue); color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.cart-jump:hover, .cart-jump:focus { color: #fff; filter: brightness(1.1); }
/* The floating Cart button sits over the page's foot: room below so the last totals aren't hidden under it. */
@media (max-width: 1199.98px) { body:has(.cart-jump) main { padding-bottom: 4.5rem; } }
/* The cart's parts kept apart (feedback of 7 October): each section has a proper heading with its count, each supplier's PO
   is its own box with a heading bar, and its lines are divided from each other and from the PO's settings below them. */
.cart-section-title { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 700; margin: 0 0 .6rem; padding-bottom: .35rem; border-bottom: 2px solid var(--bs-border-color); }
.cart-section-note { font-size: .9rem; font-weight: 400; color: var(--bs-secondary-color); }
.cart-group { overflow: hidden; border-width: 2px !important; }
.cart-group-head { padding: .5rem .75rem; font-weight: 700; background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
.cart-group > .vstack > .cart-po-line ~ .cart-po-line { border-top: 1px dashed var(--bs-border-color); padding-top: .75rem; }
.cart-group > .vstack > .cart-po-line + :not(.cart-po-line) { margin-top: .25rem; border-top: 1px solid var(--bs-border-color); padding-top: .75rem; }
/* The checkout dialog's list (Request page, site.js data-confirm-detail): what goes to the yard, then each PO. */
.confirm-detail { display: grid; gap: .75rem; }
.confirm-group { padding: .6rem .75rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-tertiary-bg); }
.confirm-group-title { font-size: 1rem; font-weight: 700; margin: 0 0 .35rem; }
.confirm-lines { list-style: none; margin: 0; padding: 0; }
.confirm-lines > li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-top: 1px solid var(--bs-border-color); }
.confirm-lines > li:first-child { border-top: 0; }
/* The yard dashboard's latest movements: on a phone, five (each is a tall card), so Set-up isn't pushed far down. */
@media (max-width: 767.98px) { .yard-ledger-compact > tbody > tr:nth-child(n+6) { display: none; } }
/* The Request page's catalogue: one row per item (item, code and price; yard stock; quantity and buttons), the columns
   lined up from row to row (each row is a subgrid of the list). On a narrow screen a row wraps: the item first, then
   the stock and the buttons. */
.catalogue-list { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; }
.catalogue-list > li { grid-column: 1 / -1; }
.catalogue-list > li[data-item] { display: grid; grid-template-columns: subgrid; align-items: center; column-gap: .75rem; row-gap: .35rem; }
.catalogue-list .catalogue-code { font-size: .78rem; padding: .15em .4em; vertical-align: .05em; }
.catalogue-list .catalogue-stock { line-height: 1.3; }
@media (max-width: 767.98px) {
    .catalogue-list { display: flex; }
    .catalogue-list > li[data-item] { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; }
    .catalogue-list .catalogue-info { flex: 1 1 12rem; min-width: 0; }
    .catalogue-list .catalogue-stock { flex: 1 1 auto; }
    .catalogue-list .catalogue-actions { margin-left: auto; }
}
/* The Request page opens on the catalogue's categories as cards (the "In the yard" one first); a card opens its list. */
.catalogue-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; }
.catalogue-card { display: flex; flex-direction: column; gap: .2rem; min-height: 5rem; padding: .75rem .9rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: var(--bs-body-bg); color: var(--bs-body-color); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.catalogue-card:hover, .catalogue-card:focus-visible { border-color: var(--wj-blue); box-shadow: 0 0 0 .2rem var(--wj-blue-10); color: var(--bs-body-color); }
.catalogue-card-name { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.catalogue-card-count { font-size: .85rem; color: var(--bs-secondary-color); }
@media (max-width: 575.98px) { .catalogue-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A request line's steps: dots joined by one unbroken line, the current one ringed. Only the label is clipped (with "…"),
   never the step, so the ring and the line into each dot show in full. The line runs from the dot before to this one.
   The first and last dots sit --edge in from the cell's sides whatever the number of steps (--steps, set on the list), so
   a yard line's 4 steps start and end where a PO line's 5 do: the list widens by half a step each side, less --edge. */
.request-steps { --edge: 1.9rem; display: flex; list-style: none; padding: 0; margin: 0 calc(var(--edge) - (100% - 2 * var(--edge)) / (2 * (var(--steps, 2) - 1))); }
.request-steps li { flex: 1 1 0; min-width: 0; position: relative; padding-top: 1.35rem; text-align: center; font-size: .8rem; color: var(--bs-secondary-color); }
.request-steps li > span { display: block; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.request-steps li::before { content: ""; position: absolute; top: .3rem; left: 50%; width: .75rem; height: .75rem; margin-left: -.375rem; border-radius: 50%; border: 2px solid var(--bs-border-color); background: var(--bs-body-bg); box-sizing: border-box; z-index: 1; }
.request-steps li::after { content: ""; position: absolute; top: calc(.3rem + .375rem - 1px); left: -50%; width: 100%; height: 2px; background: var(--bs-border-color); }
.request-steps li:first-child::after { display: none; }
.request-steps li.done::before { background: var(--wj-blue); border-color: var(--wj-blue); }
.request-steps li.done::after, .request-steps li.current::after { background: var(--wj-blue); }
.request-steps li.current { color: var(--bs-body-color); font-weight: 600; }
.request-steps li.current::before { border-color: var(--wj-blue); box-shadow: 0 0 0 3px var(--wj-blue-25); }
.request-steps li.late::before { border-color: var(--wj-coral); box-shadow: 0 0 0 3px var(--wj-coral); }
/* My requests: every request's lines in the same five columns at the same widths. Under 992px each line stacks, labelled. */
.request-table { table-layout: fixed; width: 100%; }
.request-table .rt-item { width: 24%; }
.request-table .rt-route { width: 11%; }
.request-table .rt-progress { width: 31%; }
.request-table .rt-status { width: 20%; }
.request-table .rt-action { width: 14%; }
.request-table thead th { font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); }
.request-table tbody { border-top: 1px solid var(--bs-border-color); }
.request-table td { overflow-wrap: anywhere; }
.request-table .request-timeline-row > td { padding-top: 0; border-bottom: 0; }
@media (max-width: 991.98px) {
    .request-table, .request-table tbody, .request-table tr, .request-table td { display: block; width: 100%; }
    .request-table colgroup, .request-table thead { display: none; }
    .request-table tbody { padding: .5rem 1rem; }
    .request-table td { padding: .25rem 0; border: 0; }
    .request-table td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color); }
    .request-table .request-timeline-row > td { padding: .25rem 0 0; }
}
/* One timeline joining a line's steps: a marker per step on a vertical rail, done / current / still to come, as the dots above. */
.request-timeline { margin: 0; padding: 0; }
.request-timeline > li { position: relative; padding: 0 0 .75rem 1.6rem; color: var(--bs-secondary-color); }
.request-timeline > li:last-child { padding-bottom: 0; }
.request-timeline > li::before { content: ""; position: absolute; left: .1rem; top: .2rem; width: .75rem; height: .75rem; border-radius: 50%; border: 2px solid var(--bs-secondary-color); background: var(--bs-body-bg); z-index: 1; }
.request-timeline > li::after { content: ""; position: absolute; left: calc(.1rem + .375rem + 1px); top: .95rem; bottom: -.2rem; width: 2px; margin-left: -1px; background: var(--bs-secondary-color); opacity: .45; }
.request-timeline > li:last-child::after { display: none; }
.request-timeline > li.done::before { background: var(--wj-blue); border-color: var(--wj-blue); }
.request-timeline > li.done::after { background: var(--wj-blue); opacity: 1; }
.request-timeline > li.current { color: var(--bs-body-color); }
.request-timeline > li.current::before { border-color: var(--wj-blue); box-shadow: 0 0 0 3px var(--wj-blue-25); }
.request-timeline > li.late::before { border-color: var(--wj-coral); box-shadow: 0 0 0 3px var(--wj-coral); }
.request-timeline .tl-step { font-weight: 600; color: var(--bs-body-color); }
.request-timeline > li:not(.done):not(.current) .tl-step { color: var(--bs-secondary-color); }
.request-timeline .tl-events { color: var(--bs-body-color); }
.request-timeline .tl-events > li { margin-top: .15rem; overflow-wrap: anywhere; }

/* Flash popups (_Flash.cshtml): fixed at the top right of the screen, so they're seen wherever the page lands (feedback
   of 28 October; UAT L4 had them at the bottom right). Below a bar across the top (the hub's header, the top bar on
   smaller screens), so the account menu and the menu button stay clear. */
.flash-stack { position: fixed; top: 1rem; right: 1rem; z-index: 1085; width: min(26rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: .5rem; }
body:has(.wj-hubbar) .flash-stack { top: 4.75rem; }
@media (max-width: 1279.98px) { body:has(.wj-topbar) .flash-stack { top: 4.25rem; } }
.flash-stack .alert { display: flex; align-items: center; margin: 0; overflow: hidden; background-color: var(--bs-body-bg); background-image: linear-gradient(var(--bs-alert-bg), var(--bs-alert-bg)); }
/* Each closes itself (site.js): a bar along its foot runs down meanwhile, and stops while the pointer is over it. */
.flash-stack .flash-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: currentColor; opacity: .35; transform-origin: left; animation: flash-timer linear forwards; }
.flash-stack [data-flash]:not([data-flash-for]):hover .flash-timer { animation-play-state: paused; }
@keyframes flash-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .flash-stack .flash-timer { display: none; } }
/* Undo in a "done" message (a note added, a query resolved): a link-style button before the close button. */
.flash-stack .flash-undo { margin: 0 0 0 auto; padding-left: .75rem; }
.flash-stack .flash-undo .btn { --bs-btn-padding-y: 0; --bs-btn-padding-x: 0; vertical-align: baseline; }
.flash-stack [data-flash=error]::before { content: "!"; flex: none;  display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-right: .5rem; border-radius: 50%; background: var(--bs-danger); color: #fff; font-weight: 700; font-size: .8rem; }
@media print { .flash-stack { display: none; } }
/* The confirm dialog's summary of what's about to be recorded (site.js, data-confirm-summary). */
.confirm-summary { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; padding: .75rem; border-radius: var(--bs-border-radius); background: var(--bs-tertiary-bg); }
.confirm-summary dt { font-weight: 500; color: var(--bs-secondary-color); }
.confirm-summary dd { margin: 0; overflow-wrap: anywhere; }

/* ---- PO home: PO tracking folded in (docs/po-ux-changes-todo.md step 2) ---- */
/* The stage tiles (navy edge), from approval to invoice. */
.home-tile-stage { border-top: 3px solid var(--wj-navy); }
/* The people card: a count on each tab, and the late / on time badge on each card. */
.people-tab-count { margin-left: .2rem; font-variant-numeric: tabular-nums; opacity: .75; }
.person-card-stacked .badge { font-weight: 600; }
/* Requested and approved: each person's latest PO and where it is now. */
.home-today-latest { margin: .2rem 0 0 2.25rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: .35rem; }
/* The PO list with stages: the Status column shows the stage, plus a With column; narrower chips and people make room. */
.home-newest td.text-truncate { max-width: 10rem; }
.po-table-stages .col-chips { width: 4.5rem; }
.po-table-stages .col-person { width: 8.5rem; }
.po-table-stages .col-status { width: 10rem; }
/* Who has it, how long, and the Chase button after them (wrapping under them when the cell is narrow). */
.po-table .col-with { width: 10rem; }
.po-table-stages td.chips { white-space: normal; }
.po-table td[data-stage] { white-space: normal; }
.po-table td[data-stage] .badge { white-space: normal; text-align: left; }
.po-table td.po-with { line-height: 1.25; }
.po-list-owner { font-size: .85rem; font-weight: 500; padding: .35rem .6rem; }
.home-newest td[data-newest-stage] { white-space: normal; min-width: 9rem; }

/* ---- PO page: Timeline, Deliveries and received per line (docs/po-ux-changes-todo.md step 1) ---- */
/* The approval steps at the top of the Timeline card, one line each. */
.approval-steps { list-style: none; margin: 0 0 1rem; padding: 0; }
.approval-steps .approval-step { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; margin-bottom: .35rem; padding: .1rem 0 .1rem .6rem; }
.approval-tier { font-weight: 600; color: var(--bs-secondary-color); min-width: 1.3rem; }
.approval-when { margin-left: auto; color: var(--bs-secondary-color); }
.approval-step.current .approval-when { color: var(--bs-body-color); font-weight: 600; }
/* The timeline: a rail of entries, newest first; a setback (rejected, voided, closed short) has a red dot. */
.po-timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--bs-border-color); }
.po-tl-entry { position: relative; padding-bottom: .7rem; }
.po-tl-entry::before {
    content: ""; position: absolute; left: calc(-1rem - 5px); top: .45rem; width: 8px; height: 8px; border-radius: 50%;
    background: var(--wj-blue);
}
.po-tl-entry.po-tl-setback::before { background: var(--bs-danger); }
.po-tl-entry .audit-changes { margin-top: .15rem; overflow-wrap: anywhere; }
/* Each entry folds (a <details>): the line with its pill, what and when is the summary, with a chevron; who and what
   changed open under it. */
.po-tl-entry > details > summary { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; list-style: none; cursor: pointer; }
.po-tl-entry > details > summary::-webkit-details-marker { display: none; }
.po-tl-entry > details > summary::after { content: "▸"; margin-left: auto; padding-left: .25rem; color: var(--bs-secondary-color); font-size: 1.05em; line-height: 1; }
.po-tl-entry > details[open] > summary::after { content: "▾"; }
.po-tl-entry > details > summary:hover .fw-semibold { text-decoration: underline; }
.po-tl-entry .po-tl-body { margin-top: .1rem; }
.po-tl-kind { font-weight: 600; font-size: .8rem; letter-spacing: .01em; }
.po-timeline-more > summary { width: fit-content; cursor: pointer; font-size: .875em; color: var(--bs-link-color); margin: 0 0 .5rem; }
.po-timeline-more[open] > summary { margin-bottom: .7rem; }
/* Kinds without a PO stage colour of their own (the rest use .stage-*, brand.css). */
.tl-chase { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border: 1px solid var(--bs-warning-border-subtle); }
.tl-query { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); border: 1px solid var(--bs-info-border-subtle); }
.tl-run { background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); border: 1px solid var(--bs-secondary-border-subtle); }
.tl-document { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border: 1px solid var(--bs-primary-border-subtle); }
/* Received per line, and the delivery statuses: red nothing yet, amber part, green all (Bootstrap's subtle colours,
   which have their own dark-mode values). */
.recv-pill { font-weight: 600; white-space: normal; text-align: left; }
.recv-none { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); border: 1px solid var(--bs-danger-border-subtle); }
.recv-part { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border: 1px solid var(--bs-warning-border-subtle); }
.recv-full { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border: 1px solid var(--bs-success-border-subtle); }
/* Deliveries: a row each; on phones, each row is a block of label/value pairs. */
.deliveries-table .delivery-date { width: 9.5rem; }
@media (max-width: 767.98px) {
  .deliveries-table thead { display: none; }
  .deliveries-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem .75rem; padding: .6rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
  .deliveries-table tbody td { display: block; border: 0; padding: 0 !important; text-align: left; }
  /* Number and status first, then the dates (the open one's date form full width), then what arrived. */
  .deliveries-table tbody td[data-label="Status"] { order: 1; }
  .deliveries-table tbody td[data-label="Expected"] { order: 2; }
  .deliveries-table tbody td[data-label="Delivered on"] { order: 3; }
  .deliveries-table tbody td[data-label="What arrived"] { order: 4; grid-column: 1 / -1; }
  .deliveries-table tbody td[data-label="Received by"] { order: 5; grid-column: 1 / -1; }
  .deliveries-table tbody td[data-label="Expected"]:has(form) { grid-column: 1 / -1; }
  .deliveries-table tbody td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--bs-secondary-color); }
  .deliveries-table .delivery-date { width: auto; flex: 1 1 auto; }
}

/* ---- PO home and the PO list after the POV runs (docs/po-ux-changes-todo.md step 4) ---- */
/* The late rule under each stage tile's figures. */
.home-tile-rule { margin-top: .3rem; padding-top: .3rem; border-top: 1px dashed var(--bs-border-color); font-size: .72rem; line-height: 1.25; color: var(--bs-secondary-color); }
/* Over the results: the person card the list is filtered to, and "Chase … about all N". */
.po-list-person { font-size: .85rem; font-weight: 500; padding: .35rem .6rem; white-space: normal; text-align: left; }
.po-list-results { scroll-margin-top: 1rem; }
.po-list-results:focus { outline: none; }
@media (max-width: 1279.98px) { .po-list-results { scroll-margin-top: 4.5rem; } } /* below the sticky top bar */
/* Newest approved POs: fixed widths, the supplier takes the rest, so it fits beside Requested and approved. */
.home-newest { table-layout: fixed; min-width: 42rem; }
.home-newest td { overflow: hidden; text-overflow: ellipsis; }
.home-newest .hn-po { width: 4.25rem; }
.home-newest .hn-date { width: 5.75rem; }
.home-newest .hn-project { width: 5.75rem; }
.home-newest .hn-net { width: 6rem; }
.home-newest .hn-by { width: 7rem; }
.home-newest .hn-run { width: 4.25rem; }
.home-newest .hn-stage { width: 9.25rem; }
.home-newest td.text-truncate { max-width: none; }
.home-newest td[data-newest-stage] { min-width: 0; white-space: normal; }
.home-newest td[data-newest-stage] .badge { white-space: normal; text-align: left; }
/* The PO table on phones: each PO a card. Number with its stage (or status) on top, then who has it (and Chase),
   supplier and project, then net, date and who raised it, and the tags. */
@media (max-width: 767.98px) {
  .po-table.table-fixed { min-width: 0; table-layout: auto; }
  .po-table colgroup, .po-table thead { display: none; }
  .po-table, .po-table > tbody { display: block; width: 100%; }
  .po-table > tbody > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .2rem .75rem;
    grid-template-areas: "num status status" "with with with" "supplier project project" "net date date" "by chips chips";
    padding: .6rem .75rem; border-bottom: 1px solid var(--bs-border-color);
  }
  .po-table > tbody > tr > td { display: block; border: 0; padding: 0; min-width: 0; }
  /* The row is the card, so it takes the table's colours (the cells' own would leave stripes between them). */
  .po-table > tbody > tr { background-color: var(--bs-table-bg); }
  .po-table.table-hover > tbody > tr:hover { background-color: var(--bs-table-hover-bg); }
  .po-table > tbody > tr > td { background: transparent; box-shadow: none; }
  .po-table > tbody > tr > td[data-label]::before { content: attr(data-label) " "; color: var(--bs-secondary-color); font-size: .85em; }
  .po-table .po-c-num { grid-area: num; }
  .po-table .po-c-num .po-cell { justify-content: flex-start; gap: .5rem; }
  .po-table .po-c-status { grid-area: status; justify-self: end; text-align: right; white-space: normal; }
  .po-table .po-c-with { grid-area: with; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; white-space: normal; }
  .po-table .po-c-with > div { min-width: 0; }
  .po-table .po-c-none { display: none; }
  .po-table .po-c-supplier { grid-area: supplier; }
  .po-table .po-c-project { grid-area: project; text-align: right; }
  .po-table .po-c-net { grid-area: net; text-align: left; font-weight: 600; }
  .po-table .po-c-date { grid-area: date; text-align: right; }
  .po-table .po-c-by { grid-area: by; font-size: .875em; }
  .po-table .po-c-chips { grid-area: chips; justify-self: end; }
  .po-table .po-c-chips:empty { display: none; }
  /* Chase, when there is one, at the end of the With line. */
  .po-table .po-c-with .po-chase { margin-left: auto; }
  .po-table:not(:has(.po-c-supplier)) > tbody > tr { grid-template-areas: "num status status" "with with with" "project project project" "net date date" "by chips chips"; }
  .po-table:not(:has(.po-c-project)) > tbody > tr { grid-template-areas: "num status status" "with with with" "supplier supplier supplier" "net date date" "by chips chips"; }
  .po-table > tbody > tr.po-empty { display: block; }
  /* The tags' legend would push the results down a screen; each tag says what it is when tapped or hovered. */
  .po-list-results .chip-legend { display: none !important; }
}

/* The PO page's Hire popup (_PoHires.cshtml): a box per hire, shaded once an action is chosen (light and dark). */
.hire-change { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: .6rem .75rem; }
.hire-change.hire-change-on { border-color: var(--bs-primary-border-subtle); background: var(--bs-tertiary-bg); }
.hire-change-fields { margin-top: .5rem; }

/* A hire's history (_PoHires.cshtml): a dot per entry, in the PO stage colours. */
.hire-history { border-left: 2px solid var(--bs-border-color); padding-left: .75rem; margin-left: .35rem; }
.hire-history > li { position: relative; padding: .15rem 0; }
.hire-history > li::before { content: ""; position: absolute; left: calc(-.75rem - 5px); top: .55rem; width: 8px; height: 8px; border-radius: 50%; background: var(--bs-secondary-color); }
.hire-history > li.hire-ev-onhire::before, .hire-history > li.hire-ev-extended::before { background: var(--bs-primary); }
.hire-history > li.hire-ev-ended::before, .hire-history > li.hire-ev-offhire::before { background: var(--bs-warning); }
.hire-history > li.hire-ev-done::before { background: var(--bs-success); }

/* ---- Readability (feedback of 7 October: "visible and accessible for aged 40+"), both themes ----
   Small print no smaller than about 14px, grey text dark enough to read (Bootstrap's .text-secondary is a fixed grey,
   only 3.9:1 on the dark theme's navy: it follows the theme's secondary colour instead), pills a size up, and a little
   more room in compact tables so rows don't run together. The borders themselves are firmer in brand.css and dark.css. */
.small, small { font-size: .9em; }
.form-text { font-size: .9em; }
.text-secondary { color: var(--bs-secondary-color) !important; }
.badge { --bs-badge-font-size: .8em; --bs-badge-padding-y: .4em; --bs-badge-padding-x: .7em; }
.table-sm > :not(caption) > * > * { padding: .4rem .4rem; }

/* The PO page's "Chase the supplier" (_PoTracking.cshtml): a button that opens the email, Outlook, PDF and log below it. */
.chase-supplier > summary { list-style: none; }
.chase-supplier > summary::-webkit-details-marker { display: none; }
.chase-supplier > summary::after { content: ""; display: inline-block; margin-left: .4rem; vertical-align: .15em; border: .3em solid transparent; border-top-color: currentColor; border-bottom: 0; transition: transform .15s; }
.chase-supplier[open] > summary::after { transform: rotate(180deg); }
.chase-supplier-body { border-left: 2px solid var(--bs-border-color); padding-left: .75rem; }

/* Request page: no project chosen yet. Our red, so it's not missed: nothing can be added until the cart has a project.
   A solid coral edge, then a soft coral tint that fades out, so the navy text reads easily all the way along. */
.alert-no-project {
  background: linear-gradient(90deg, rgba(250, 102, 97, .32) 0%, rgba(250, 102, 97, .16) 45%, rgba(250, 102, 97, .05) 100%);
  border-color: rgba(250, 102, 97, .55); border-left: 5px solid var(--wj-coral); color: var(--wj-navy); font-weight: 500;
}
.alert-no-project strong { font-weight: 700; }

/* The dashboard's sections, linked from the PO sidebar's Dashboard group (_PoNav). */
.home-anchor { scroll-margin-top: 1rem; }
@media (max-width: 1279.98px) { .home-anchor { scroll-margin-top: 4.5rem; } } /* below the sticky top bar */
/* The section a sidebar link went to flashes for a moment (home.js). */
.home-flash { animation: home-flash 2s ease-out; border-radius: var(--bs-border-radius); outline-offset: 4px; }
@keyframes home-flash {
  0%, 35% { outline: 3px solid var(--wj-blue); }
  100% { outline: 3px solid transparent; }
}

/* PO page, Approval card: Change the 2°/3° approver opens its form under the button. */
.change-approver > summary { list-style: none; display: inline-block; }
.change-approver > summary::-webkit-details-marker { display: none; }
.change-approver form { max-width: 26rem; }