/* Order Risk (tabbed container) + the SHARED vocabulary for its three tabs
   (At Risk / 5-Day Plan / Post-Purchase). Restyled 2026-07-23 onto the
   portal's mainstream components: kpi-card.css for the summary numbers,
   table.css (.data-table / .table-container / .view-toolbar) for the
   worklists, tokens.css for every color. The old per-tab cream palettes
   (the aq / p5 / pp local token blobs) and all 8-11px fine print are gone;
   base type is 14px like Sales Performance, nothing renders below 12px.
   NOTE: never write a literal star-slash token-glob inside this comment --
   it terminates the comment and silently eats the first rule below. */

/* per-tab basis strip: the ONE allowed one-line "As of / basis" note */
#orderRiskBasis {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 8px 12px;
  background: var(--table-header-bg);
  border: 1px solid var(--table-border);
  border-radius: 4px;
  font-size: var(--text-eyebrow);
  color: var(--navy);
}
#orderRiskBasis .or-basis-asof { font-weight: 700; white-space: nowrap; }
#orderRiskBasis .or-basis-note { color: #4a6573; }

/* ── tab containers: house base type ──────────────────────────────────── */
#actionQueueView, #plan5DayView, #postPurchaseView, #inboundRiskView {
  font-family: var(--font-stack);
  font-size: var(--text-body);       /* 14px */
  line-height: 1.45;
  color: #1e293b;
}
#actionQueueView *, #plan5DayView *, #postPurchaseView *, #inboundRiskView * { box-sizing: border-box; }

/* KPI rows: At Risk carries 4 cards, Post-Purchase 5 */
#aqKpis { grid-template-columns: repeat(4, 1fr); }
#ppKpis { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) {
  #aqKpis { grid-template-columns: repeat(2, 1fr); }
  #ppKpis { grid-template-columns: repeat(2, 1fr); }
}
/* kpi-card.css's .kpi-sub is 11.5px for the vs-Budget pacing line; here it is
   a caption, kept at the 12px floor and soft white on the navy tile. */
.or-kpis .kpi-sub { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.75); }
.or-kpis .kpi-value .kpi-unit { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.8); }

/* ── ONE control area per tab (2026-07-24, Wayne: "the filters for delivery
   day and play look very very messy") ───────────────────────────────────
   The three tabs used to stack three separate bands: a KPI row, an
   undifferentiated chip blob carrying BOTH the delivery-date and the play
   filters, then a dense toolbar strip. Now every tab opens with ONE card at
   the top of the view, in the same shape as the shared filter bar on Sales
   Performance: a .view-toolbar row (primary controls left, count + freshness
   right) over one labelled row PER FACET. The label sits in a fixed gutter,
   so "Delivery date" and "Play" can never read as one blob again. */
.or-controls {
  background: #fff; border: 1px solid #e2e5e9; border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px 14px; margin: 0 0 14px;
}
.or-controls .view-toolbar { margin: 0; }
.or-controls .or-facets { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--table-border); }
/* toolbar with no facet rows under it (nothing to separate) */
.or-controls .view-toolbar:only-child { margin: 0; }

.or-facets { display: flex; flex-direction: column; gap: 8px; }
.or-facet { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: 10px; }
.or-facet-label {
  font-size: var(--text-eyebrow); font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding-top: 6px; white-space: nowrap;
}
.or-facet-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
@media (max-width: 900px) {
  .or-facet { grid-template-columns: 1fr; gap: 4px; }
  .or-facet-label { padding-top: 0; }
}

/* ── the chips themselves ───────────────────────────────────────────────
   Frank's Start-Here counts double as the filters, so every chip carries a
   count and an active state. Same family as the preset buttons.
   (The old .or-chips / .or-chip-group / .or-chip-sep / .or-chip-label band
   rules were removed 2026-07-24 with the band itself -- chips now live in the
   labelled .or-facet rows above.) */
.or-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border: 1px solid #d1d5db; border-radius: var(--radius-pill);
  background: #fff; color: #374151; cursor: pointer;
  font-family: var(--font-stack); font-size: 12px; font-weight: 600;
  transition: all 0.15s; white-space: nowrap;
}
.or-chip:hover { background: var(--icy-blue); border-color: var(--primary-blue); }
.or-chip.active { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
.or-chip .n { font-weight: 700; font-variant-numeric: tabular-nums; }

/* play color dots inside chips */
.pb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.pb-dot.p-deliver { background: var(--success-green); }
.pb-dot.p-hold { background: #d97706; }
.pb-dot.p-reschedule { background: var(--primary-blue); }
.pb-dot.p-review { background: #7c3aed; }
.pb-dot.p-reselect { background: var(--danger-red); }
.pb-dot.p-stock { background: var(--accent-teal); }
.pb-dot.p-exch { background: #6b7280; }

/* ── toolbar (selects, toggle, search, count, freshness) ────────────────
   Export lives in the SHARED filter-bar CSV button now (window._csvExporters
   under 'orderrisk.<tab>'), like every other view -- no bespoke inline
   .csv-btn on these three tabs any more. */
.or-toolbar { margin: 0 0 12px; row-gap: 8px; }
.or-toolbar .view-toolbar-right { gap: 12px; }
.or-ctl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #6b7280; white-space: nowrap;
}
.or-select {
  padding: 6px 26px 6px 8px; border: 1px solid #d1d5db; border-radius: 6px;
  font-family: var(--font-stack); font-size: 13px; background: #fff; color: var(--navy);
  cursor: pointer; min-width: 90px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.or-select:focus { outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 2px rgba(63,115,141,0.15); }
.or-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--navy); cursor: pointer; white-space: nowrap;
}
.or-toggle input { accent-color: var(--primary-blue); width: 15px; height: 15px; cursor: pointer; }
.or-freshness { display: inline-flex; align-items: center; }
.live-tag {
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--signal-green-bg-soft); color: var(--signal-green-text);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.stale-tag {
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--signal-red-bg); color: var(--signal-red-text);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}

/* ── worklist grids: .data-table plus the Frank-grid specifics ──────────── */
.table-header .or-sub { font-size: 12px; color: #6b7280; font-weight: 500; text-align: right; }
.or-grid td {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 8px 12px;
}
.or-grid th { cursor: default; }
.or-grid .num, .or-grid th.num { text-align: right; }
.or-grid .ctr, .or-grid th.ctr { text-align: center; }
.or-grid tr.order-row { cursor: pointer; }
.or-grid .aq-oid, .or-grid .pp-oid, .or-grid .p5-oid { font-weight: 600; color: var(--navy); }
.or-grid .aq-cust, .or-grid .pp-cust { max-width: 160px; }
.or-grid .p5-cust { max-width: 180px; }
.or-grid td.itemcol { max-width: 280px; }
.or-grid td.action { max-width: 280px; font-weight: 600; color: var(--navy); font-size: 12px; }
.or-more { color: #6b7280; font-weight: 700; font-size: 12px; }
.q-tag {
  font-size: 12px; font-weight: 600; color: #6b7280;
  border: 1px solid var(--table-border); border-radius: 4px; padding: 0 5px;
}
.newchip {
  display: inline-block; padding: 0 5px; border-radius: 4px;
  background: var(--contest-soft); border: 1px solid var(--contest-soft-border);
  color: #9a3412; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; white-space: nowrap;
}
.exch-tag {
  display: inline-block; padding: 0 5px; border-radius: 4px;
  background: #eef2ff; color: #4338ca; font-size: 12px; font-weight: 700;
  white-space: nowrap; cursor: help;
}
#actionQueueView .mini, #plan5DayView .mini, #postPurchaseView .mini { font-size: 12px; color: #6b7280; }
#actionQueueView .neg, #plan5DayView .neg, #postPurchaseView .neg { color: var(--danger-red); font-weight: 600; }
#actionQueueView .pos, #plan5DayView .pos, #postPurchaseView .pos { color: #059669; font-weight: 600; }

/* play badges (Partial? / Partial Qualifies? cells): readable soft-fill tags
   on the shared signal palette -- DELIVER / HOLD / REVIEW etc. */
.playbadge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; white-space: nowrap;
}
.playbadge.p-deliver { background: var(--signal-green-bg-soft); color: var(--signal-green-text); }
.playbadge.p-hold { background: var(--signal-yellow-bg); color: var(--signal-yellow-text); }
.playbadge.p-reschedule { background: var(--icy-blue); color: var(--navy); }
.playbadge.p-review { background: #ede9fe; color: #5b21b6; }
.playbadge.p-reselect { background: var(--signal-red-bg-soft); color: var(--signal-red-text); }
.playbadge.p-stock { background: var(--signal-green-bg-soft); color: var(--signal-green-text); }
.playbadge.p-exch { background: #f3f4f6; color: #374151; }

/* window badges inside the line detail (Past due / At risk / Early warning) */
#actionQueueView .badge, #plan5DayView .badge, #postPurchaseView .badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; white-space: nowrap;
}
#actionQueueView .badge.pastdue, #plan5DayView .badge.pastdue, #postPurchaseView .badge.pastdue { background: var(--signal-red-bg); color: var(--signal-red-text); }
#actionQueueView .badge.atrisk, #plan5DayView .badge.atrisk, #postPurchaseView .badge.atrisk { background: var(--signal-yellow-bg); color: var(--signal-yellow-text); }
#actionQueueView .badge.earlywarn, #plan5DayView .badge.earlywarn { background: var(--icy-blue); color: var(--navy); }
#actionQueueView .badge.OK, #plan5DayView .badge.OK, #postPurchaseView .badge.OK { background: var(--signal-green-bg-soft); color: var(--signal-green-text); }

/* row-click line detail: the nested stock-math table must NOT inherit the
   outer .data-table's sticky header/first-column behavior */
.or-grid tr.detail-row > td {
  position: static; background: var(--light-bg);
  white-space: normal; overflow: visible; text-overflow: clip;
  padding: 4px 12px 14px;
}
.or-detail-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.or-detail-table th {
  position: static !important; background: transparent; color: #4b5563;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--table-border);
  white-space: nowrap; cursor: default;
}
.or-detail-table td {
  position: static !important; background: transparent;
  padding: 6px 8px; border-bottom: 1px solid #e5e7eb;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.or-detail-table td .mini, .or-detail-table td div { white-space: normal; }
.or-detail-lists { font-size: 12px; color: #334155; padding: 10px 2px 0; white-space: normal; }

/* TOTAL row on the 5-Day priority table (same treatment as RSA's total) */
#p5Priority tr.or-total td {
  background: var(--navy); color: #fff; font-weight: 700;
  border-top: 2px solid var(--navy-border);
}
#p5Priority tr.or-total td:first-child { background: var(--navy); color: #fff; }
#p5Priority tr:hover td { background: inherit; }
#p5Priority tr.or-total:hover td { background: var(--navy); }
.p5-priority-card { margin-bottom: 14px; }
.p5-priority-card .or-note { padding: 10px 20px 12px; }
/* the one-line "grid and list are the same orders" statement sits next to the
   card title, not right-jammed against the edge */
.p5-priority-card .table-header { align-items: baseline; gap: 18px; }
.p5-priority-card .table-header .or-sub { text-align: right; flex: 1 1 auto; }

/* ── the 5-Day grid IS the navigation (2026-07-24, Wayne: "I'm confused by
   the top of the 5-Day Fulfillment Plan ... how does it relate to the numbers
   at the bottom?") ──────────────────────────────────────────────────────
   Same orders both ways: the grid splits them by delivery date, the list
   below by bucket. Every number in the grid is a click target that moves the
   list, and the current selection is tinted in BOTH directions (the selected
   bucket column and the selected date row), so the link is visible rather
   than asserted. */
#p5Priority th.p5-pick, #p5Priority td.p5-pick { cursor: pointer; }
#p5Priority th.p5-pick:hover, #p5Priority td.p5-pick:hover {
  background: var(--icy-blue);
  box-shadow: inset 0 0 0 1px var(--primary-blue);
}
#p5Priority td.p5-col, #p5Priority th.p5-col { background: var(--icy-blue); }
#p5Priority tr.p5-row td { background: var(--icy-blue); }
#p5Priority td.p5-sel, #p5Priority tr.p5-row td.p5-sel {
  background: var(--primary-blue); color: #fff; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--navy-border);
}
#p5Priority td.p5-sel.pos, #p5Priority td.p5-sel.neg { color: #fff; }
#p5Priority tr.or-total td.p5-col, #p5Priority tr.or-total td.p5-sel { background: var(--navy-border); color: #fff; }
#p5Priority th.p5-pick { position: relative; }

/* one-line generated notes (Frank's Start-Here sentences) + loading blocks */
.or-note { font-size: 13px; color: #334155; line-height: 1.6; }
.or-note-block { padding: 40px 8px; color: #4b5563; font-size: 14px; }
.or-note-block code { background: var(--table-header-bg); padding: 1px 5px; border-radius: 3px; }
.or-muted { color: #6b7280; }

/* Post-Purchase 3-day trend card */
.or-card {
  background: #fff; border: 1px solid #e2e5e9; border-radius: 10px;
  padding: 14px 20px; margin-top: 14px; box-shadow: var(--shadow);
}
.or-card h3 { font-size: 14px; color: #334155; font-weight: 600; margin: 0 0 6px; }
.pp-trend-line { font-size: 14px; color: #334155; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 2px 0; }
.pp-trend-pt { font-variant-numeric: tabular-nums; }
.pp-trend-pt.today { font-weight: 700; color: var(--navy); }
.pp-trend-sep { color: #9ca3af; }

@media (max-width: 900px) {
  .or-toolbar input[type="search"] { flex: 1 1 160px; }
}