/* Inventory (leadership) view — js/views/inventory.js.
   Port of Brady Smallwood's Inventory Dashboard Suite restyled onto the
   portal design tokens. Only the bits unique to this view live here: the
   honest badges (real / inferred / gap / queued), the KPI tiles, the
   gauges, and the two tables. The nav item is role-gated (admin /
   executive / director). */

.inv-empty {
  padding: 40px; text-align: center; color: var(--text-caption-color, #6b7280);
  font-family: var(--font-stack); font-size: 14px;
}
.inv-empty code { background: #f1f3f5; padding: 1px 5px; border-radius: 4px; }

/* ── Meta banner ── */
.inv-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px;
  font-family: var(--font-stack); font-size: 12px; color: #5b6472;
  padding: 8px 14px; margin: 4px 0 14px;
  background: #fff; border: 1px solid var(--table-border, #D5DAE0);
  border-radius: var(--radius, 8px);
}
.inv-meta strong { color: var(--navy, #003B4A); }
.inv-meta-lead { font-size: 13px; color: var(--navy, #003B4A); font-weight: 600; }
.inv-meta-note { color: #6b7280; }
.inv-warnbar {
  margin: -6px 0 14px; padding: 8px 14px;
  background: var(--signal-yellow-bg, #FCE9A4);
  color: var(--signal-yellow-text, #854d0e);
  border-radius: var(--radius, 8px);
  font-family: var(--font-stack); font-size: 12.5px; font-weight: 600;
}

/* ── Store filter (Region / Market / Store) ── */
.inv-filter {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  padding: 9px 14px; margin: 0 0 14px;
  background: #fff; border: 1px solid var(--table-border, #D5DAE0);
  border-radius: var(--radius, 8px); font-family: var(--font-stack);
}
.inv-filter-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 700; color: #6b7280;
}
.inv-select {
  padding: 6px 10px; font-size: 12px; font-family: var(--font-stack);
  border: 1px solid var(--table-border, #D5DAE0); border-radius: 6px;
  background: #fff; color: var(--navy, #003B4A); font-weight: 600;
  max-width: 220px;
}
.inv-select:disabled { background: #f3f4f6; color: #9ca3af; }
.inv-clear {
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--table-border, #D5DAE0); border-radius: 6px;
  background: var(--icy-blue, #DBECF1); color: var(--navy, #003B4A);
  font-family: var(--font-stack);
}
.inv-clear:hover { background: var(--mist, #B9D2DC); }
.inv-scope-tag { margin-left: auto; font-size: 12px; color: #6b7280; }
.inv-scope-tag strong { color: var(--navy, #003B4A); }

/* ── Honest badges ── */
.inv-pill {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.4px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-stack); vertical-align: 1px;
}
.inv-pill-real     { background: var(--signal-green-bg-soft, #DCF7E5); color: var(--signal-green-text, #065f46); }
.inv-pill-inferred { background: var(--signal-yellow-bg, #FCE9A4);     color: var(--signal-yellow-text, #854d0e); }
.inv-pill-gap      { background: var(--signal-red-bg-soft, #FCE0E1);   color: var(--signal-red-text, #991b1b); }
.inv-pill-queued   { background: var(--icy-blue, #DBECF1);             color: var(--transition-blue, #1A5A6E); }

/* ── Cards ── */
.inv-card {
  background: #fff; border: 1px solid var(--table-border, #D5DAE0);
  border-radius: var(--radius, 8px); padding: 14px 18px 16px; margin: 0 0 16px;
  box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,0.1));
  font-family: var(--font-stack);
}
.inv-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-card-head h3 {
  margin: 0; font-size: var(--text-heading, 17px);
  color: var(--navy, #003B4A); font-weight: 700;
}
.inv-cap { font-size: 12px; color: #6b7280; margin: 6px 0 10px; }

/* ── KPI tiles ── */
.inv-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin: 8px 0 12px;
}
.inv-tile {
  background: var(--light-bg, #F7F7F7);
  border: 1px solid var(--table-border, #D5DAE0);
  border-radius: var(--radius, 8px); padding: 10px 14px;
}
.inv-tile-v {
  font-size: 24px; font-weight: 800; color: var(--navy, #003B4A); line-height: 1.15;
}
.inv-tile-l {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: #6b7280; margin-top: 3px; font-weight: 600;
}
.inv-tile-s { font-size: 11px; color: #8a929e; margin-top: 1px; }
.inv-tile.inv-good .inv-tile-v { color: var(--success-green, #16a34a); }
.inv-tile.inv-warn .inv-tile-v { color: #b45309; }
.inv-tile.inv-bad  .inv-tile-v { color: var(--danger-red, #dc2626); }

/* ── Charts ── */
.inv-chart-wrap { position: relative; height: 330px; margin: 6px 0 4px; }
.inv-chart-half { height: 210px; }
.inv-flex { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.inv-flex > div { flex: 1; min-width: 300px; }

/* ── Controls ── */
.inv-controls { margin: 10px 0 8px; }
.inv-search {
  padding: 6px 10px; font-size: 12px; font-family: var(--font-stack);
  border: 1px solid var(--table-border, #D5DAE0); border-radius: 6px;
  background: #fff; color: var(--navy, #003B4A); font-weight: 600;
  min-width: 280px;
}

/* ── Tables ── */
.inv-count { font-size: 11.5px; color: #6b7280; margin: 0 0 6px; }
/* Page-scroll model (see the #sleepTableWrap comment in table.css): the wrap
   must be overflow: visible, because `overflow-x: auto` forces overflow-y to
   auto too and the sticky thead would then pin inside the wrap (offsetting
   var(--chrome-h) down INTO the table). Both inventory tables fit the content
   width, so no horizontal scroll surface is needed. */
.inv-table-wrap { overflow: visible; }
.inv-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.inv-table th, .inv-table td {
  padding: var(--pad-row, 6px 8px); border-bottom: 1px solid #ececec;
  text-align: left; white-space: nowrap;
}
.inv-table th {
  background: var(--table-header-bg, #EFF3F6); color: var(--navy, #003B4A);
  font-weight: 700; cursor: pointer; user-select: none;
  position: sticky; top: var(--chrome-h, 92px); z-index: 2;
}
.inv-table th.inv-num, .inv-table td.inv-num { text-align: right; }
.inv-table tbody tr:hover { background: var(--row-store-bg-hover, #F4F7F9); }
.inv-row-dc { background: var(--row-market-bg, #ECF1F4); font-weight: 600; }
.inv-row-dc:hover { background: var(--row-market-bg-hover, #DDE5EA) !important; }
.inv-row-total {
  background: var(--row-region-bg, #DCE6EC); font-weight: 700;
  color: var(--navy, #003B4A);
}
.inv-row-total td { border-top: 2px solid var(--table-border, #D5DAE0); }
.inv-row-total:hover { background: var(--row-region-bg, #DCE6EC) !important; }
.inv-zero { color: var(--danger-red, #dc2626); font-weight: 700; }
.inv-sev-crit  { color: var(--danger-red, #dc2626); font-weight: 700; }
.inv-sev-short { color: #b45309; font-weight: 600; }
.inv-none { text-align: center; color: #9ca3af; padding: 18px; }

/* ── Gauges ── */
.inv-gauges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.inv-gauge {
  flex: 1; min-width: 280px; display: flex; align-items: center; gap: 10px;
  background: var(--light-bg, #F7F7F7);
  border: 1px solid var(--table-border, #D5DAE0);
  border-radius: var(--radius, 8px); padding: 10px 14px; font-size: 12.5px;
  color: #374151;
}
.inv-dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--success-green, #16a34a);
}
.inv-gauge-bad .inv-dot { background: var(--danger-red, #dc2626); }
.inv-dot-todo { background: var(--primary-blue, #3F738D); }

/* ── Tab bar (in-view sub-nav; Overview + Chase's DC tabs) ── */
.inv-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 14px;
  border-bottom: 2px solid var(--table-border, #D5DAE0);
  font-family: var(--font-stack);
}
.inv-tab {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: #6b7280;
  font-family: var(--font-stack); border-bottom: 2px solid transparent;
  margin-bottom: -2px; border-radius: 6px 6px 0 0;
}
.inv-tab:hover { color: var(--navy, #003B4A); background: var(--light-bg, #F7F7F7); }
.inv-tab.on {
  color: var(--navy, #003B4A); border-bottom-color: var(--ashley-orange, #F68C2C);
  background: #fff;
}

/* ── Freshness badges (two-tier honesty) ── */
.inv-fresh {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.3px; padding: 2px 9px; border-radius: 999px;
  font-family: var(--font-stack); vertical-align: 1px;
}
.inv-fresh-live {
  background: var(--signal-green-bg-soft, #DCF7E5);
  color: var(--signal-green-text, #065f46);
}
.inv-fresh-live::before { content: "\25CF "; }   /* filled dot = live */
.inv-fresh-export {
  background: var(--signal-yellow-bg, #FCE9A4);
  color: var(--signal-yellow-text, #854d0e);
}
.inv-fresh-export::before { content: "\25CB "; }  /* hollow dot = manual */

/* ── Tighter tables for the DC roll-up / bucket / history grids ── */
.inv-table-tight { font-size: 12px; }
.inv-table-tight th, .inv-table-tight td { padding: 5px 8px; }

/* As-Is item rows + reason-code tag */
.inv-row-asis { background: #FFF7E8; }
.inv-row-asis:hover { background: #FDEFCF !important; }
.inv-bucket-tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: var(--signal-yellow-bg, #FCE9A4); color: var(--signal-yellow-text, #854d0e);
}
.inv-muted { color: #b6bcc6; }

/* ── Current vs Historical grid + variance coloring + findings callout ── */
.inv-hist-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px 18px; margin-top: 6px;
}
.inv-hist-block h4 {
  margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--navy, #003B4A);
}
.inv-var-down { color: var(--danger-red, #dc2626); font-weight: 700; }
.inv-var-up   { color: var(--success-green, #16a34a); font-weight: 700; }

/* ── Weekly Tracker (DC weekly trend blocks + live cross-check line) ── */
.inv-wk-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.inv-wk-block h4 {
  margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--navy, #003B4A);
}
.inv-wk-live {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 6px 2px 0; font-size: 12px; color: #5b6472;
}
.inv-wk-live strong { color: var(--navy, #003B4A); }

.inv-callout {
  border-radius: var(--radius, 8px); padding: 10px 14px; margin: 6px 0 14px;
  font-size: 12.5px;
}
.inv-callout-warn {
  background: var(--signal-yellow-bg, #FCE9A4);
  border: 1px solid #E6C86B;
}
.inv-callout-title {
  font-weight: 800; color: var(--signal-yellow-text, #854d0e); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.4px; font-size: 11.5px;
}
.inv-finding { margin: 6px 0; }
.inv-finding-head { display: flex; align-items: center; gap: 8px; }
.inv-finding-head strong { color: var(--navy, #003B4A); font-size: 13px; }
.inv-finding-status {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  padding: 1px 8px; border-radius: 999px;
  background: var(--signal-red-bg-soft, #FCE0E1); color: var(--signal-red-text, #991b1b);
}
.inv-finding-detail { color: #5b6472; margin-top: 2px; line-height: 1.4; }

/* ── DC Stock Finder (Testing) — sixth Inventory sub-tab (2026-07-30) ──
   Whitney Zurka's DC Stock Finder ported native. The collection list, the
   pieces-available pills, the My-DC column focus, and the overstock
   leaderboard are her layout, restyled onto the portal design tokens.
   DC accent colors: Red Hills = primary blue, Loxley = Ashley orange,
   Kernersville = accent teal. Overstock = danger red. */
:root {
  --dcsf-b0: var(--primary-blue, #3F738D);
  --dcsf-b1: var(--ashley-orange, #F68C2C);
  --dcsf-b2: var(--accent-teal, #0d9488);
  --dcsf-over: var(--danger-red, #dc2626);
  --dcsf-over-bg: rgba(220, 38, 38, .10);
  --dcsf-over-ink: var(--signal-red-text, #991b1b);
  --dcsf-good-ink: var(--signal-green-text, #065f46);
  --dcsf-amber: #b45309;
  --dcsf-grid: #ececec;
  --dcsf-zero: #b6bcc6;
  --dcsf-cols: 26px 1fr 118px 96px 96px 96px 60px;
}

.dcsf-caveats {
  font-size: 12px; color: #5b6472; background: var(--light-bg, #F7F7F7);
  border: 1px solid var(--table-border, #D5DAE0); border-radius: var(--radius, 8px);
  padding: 9px 14px; margin: 0 0 14px;
}
.dcsf-caveats strong { color: var(--navy, #003B4A); }
.dcsf-v0 { color: var(--dcsf-b0); font-weight: 800; }
.dcsf-v1 { color: var(--dcsf-b1); font-weight: 800; }
.dcsf-v2 { color: var(--dcsf-b2); font-weight: 800; }
.dcsf-over { color: var(--dcsf-over-ink); font-weight: 700; }

/* Controls row */
.dcsf-controls {
  background: #fff; border: 1px solid var(--table-border, #D5DAE0);
  border-radius: var(--radius, 8px); padding: 12px; display: flex; gap: 10px;
  flex-wrap: wrap; align-items: center; margin: 0 0 12px;
}
.dcsf-controls .inv-search { flex: 1; min-width: 180px; }
.dcsf-lab { font-size: 12px; color: #6b7280; display: flex; align-items: center; gap: 6px; }
.dcsf-seg { display: inline-flex; border: 1px solid var(--table-border, #D5DAE0); border-radius: 8px; overflow: hidden; }
.dcsf-seg button {
  font: inherit; font-size: 12px; background: var(--light-bg, #F7F7F7); color: #52514e;
  border: 0; padding: 8px 11px; cursor: pointer; border-right: 1px solid var(--table-border, #D5DAE0);
}
.dcsf-seg button:last-child { border-right: 0; }
.dcsf-seg button.on { background: var(--icy-blue, #DBECF1); color: var(--navy, #003B4A); font-weight: 700; }
.dcsf-chk {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #52514e; cursor: pointer;
  background: var(--light-bg, #F7F7F7); border: 1px solid var(--table-border, #D5DAE0); border-radius: 8px; padding: 7px 11px;
}
.dcsf-chk.on { background: var(--dcsf-over-bg); border-color: var(--dcsf-over); color: var(--dcsf-over-ink); font-weight: 700; }
.dcsf-more { display: block; margin: 16px auto 0; }

.dcsf-storenote { font-size: 12.5px; color: #52514e; margin: 0 2px 8px; }
.dcsf-storenote strong { color: var(--navy, #003B4A); }

/* Legend + swatches */
.dcsf-legend { font-size: 11.5px; color: #6b7280; margin: 0 2px 10px; display: flex; gap: 15px; flex-wrap: wrap; }
.dcsf-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dcsf-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dcsf-b0 { background: var(--dcsf-b0); }
.dcsf-b1 { background: var(--dcsf-b1); }
.dcsf-b2 { background: var(--dcsf-b2); }

/* Pieces-available pill */
.dcsf-pill {
  display: inline-flex; align-items: center; justify-content: center; padding: 1px 7px;
  border-radius: 20px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid transparent;
}
.dcsf-pill.full { background: rgba(22, 163, 74, .15); color: var(--dcsf-good-ink); }
.dcsf-pill.part { background: rgba(180, 83, 9, .15); color: var(--dcsf-amber); }
.dcsf-pill.none { background: var(--light-bg, #F7F7F7); color: var(--dcsf-zero); border-color: var(--table-border, #D5DAE0); }

/* Collection list */
.dcsf-glist { background: #fff; border: 1px solid var(--table-border, #D5DAE0); border-radius: var(--radius, 8px); overflow: hidden; }
.dcsf-colhdr {
  display: grid; grid-template-columns: var(--dcsf-cols); padding: 9px 14px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .03em; color: #6b7280; background: var(--table-header-bg, #EFF3F6);
  border-bottom: 1px solid var(--dcsf-grid);
}
.dcsf-colhdr div { text-align: right; }
.dcsf-colhdr div:nth-child(2) { text-align: left; }
.dcsf-grow {
  display: grid; grid-template-columns: var(--dcsf-cols); align-items: center; padding: 11px 14px;
  border-bottom: 1px solid var(--dcsf-grid); cursor: pointer;
}
.dcsf-grow:hover { background: var(--row-store-bg-hover, #F4F7F9); }
.dcsf-grow .dcsf-car { color: #9ca3af; font-size: 11px; transition: transform .12s; width: 16px; }
.dcsf-grow.open .dcsf-car { transform: rotate(90deg); }
.dcsf-grow.solo .dcsf-car { visibility: hidden; }
.dcsf-cname { font-weight: 600; color: var(--navy, #003B4A); }
.dcsf-croot { color: #52514e; font-size: 12px; font-variant-numeric: tabular-nums; margin-left: 6px; }
.dcsf-cmeta { font-size: 11.5px; color: #9ca3af; margin-top: 2px; }
.dcsf-cat { display: inline-block; font-size: 11px; color: #52514e; background: var(--light-bg, #F7F7F7);
  border: 1px solid var(--table-border, #D5DAE0); border-radius: 20px; padding: 1px 8px; white-space: nowrap; }
.dcsf-gcell { text-align: right; font-variant-numeric: tabular-nums; }
.dcsf-gcell .dcsf-units { font-weight: 700; }
.dcsf-gcell .dcsf-pl { margin-top: 2px; display: block; }
.dcsf-qpos { color: var(--dcsf-good-ink); }
.dcsf-q0 { color: var(--dcsf-zero); font-weight: 400; }
.dcsf-obadge {
  display: inline-block; background: var(--dcsf-over-bg); color: var(--dcsf-over-ink); border-radius: 5px;
  padding: 0 5px; font-size: 10.5px; font-weight: 700; margin-top: 3px;
}

/* Expanded pieces table */
.dcsf-pieces { display: none; background: var(--light-bg, #F7F7F7); }
.dcsf-grow.open + .dcsf-pieces { display: block; }
table.dcsf-pt { width: 100%; border-collapse: collapse; }
table.dcsf-pt td { padding: 7px 14px; border-bottom: 1px solid var(--dcsf-grid); font-size: 13px; }
table.dcsf-pt tr:last-child td { border-bottom: 0; }
.dcsf-psku { color: #52514e; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dcsf-pt td.dcsf-q { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; width: 92px; }
.dcsf-pt .dcsf-qpos { color: var(--dcsf-good-ink); }
.dcsf-pt .dcsf-q0 { color: var(--dcsf-zero); font-weight: 400; }
.dcsf-pt td.dcsf-q.dcsf-overcell { background: var(--dcsf-over-bg); color: var(--dcsf-over-ink); border-radius: 6px; }
.dcsf-units.dcsf-overcell { background: var(--dcsf-over-bg); color: var(--dcsf-over-ink); border-radius: 6px; padding: 1px 6px; }
.dcsf-wk { display: block; font-size: 10px; font-weight: 600; color: var(--dcsf-over-ink); margin-top: 1px; }
.dcsf-held { display: block; font-size: 10px; font-weight: 600; color: var(--dcsf-amber); margin-top: 1px; }
.dcsf-pcode { display: inline-block; min-width: 34px; color: #9ca3af; font-size: 11px; font-variant-numeric: tabular-nums; margin-right: 8px; }
.dcsf-ccol { display: inline-block; background: var(--icy-blue, #DBECF1); color: #52514e; border-radius: 4px; padding: 0 5px; font-size: 10.5px; font-weight: 600; margin-right: 6px; }

/* My-DC column focus: highlight selected DC column, dim the others */
.dcsf-glist[class*="foc"] .dcsf-colhdr > div.dc0,
.dcsf-glist[class*="foc"] .dcsf-colhdr > div.dc1,
.dcsf-glist[class*="foc"] .dcsf-colhdr > div.dc2 { opacity: .35; }
.dcsf-glist.foc0 .dcsf-colhdr > div.dc0,
.dcsf-glist.foc1 .dcsf-colhdr > div.dc1,
.dcsf-glist.foc2 .dcsf-colhdr > div.dc2 { opacity: 1; font-weight: 700; color: var(--navy, #003B4A); }
.dcsf-glist[class*="foc"] .dcsf-gcell.dc0,
.dcsf-glist[class*="foc"] .dcsf-gcell.dc1,
.dcsf-glist[class*="foc"] .dcsf-gcell.dc2 { opacity: .32; }
.dcsf-glist.foc0 .dcsf-gcell.dc0,
.dcsf-glist.foc1 .dcsf-gcell.dc1,
.dcsf-glist.foc2 .dcsf-gcell.dc2 { opacity: 1; background: rgba(63, 115, 141, .06); border-radius: 8px; }
.dcsf-glist[class*="foc"] .dcsf-pt td.dcsf-q.dc0,
.dcsf-glist[class*="foc"] .dcsf-pt td.dcsf-q.dc1,
.dcsf-glist[class*="foc"] .dcsf-pt td.dcsf-q.dc2 { opacity: .3; }
.dcsf-glist.foc0 .dcsf-pt td.dcsf-q.dc0,
.dcsf-glist.foc1 .dcsf-pt td.dcsf-q.dc1,
.dcsf-glist.foc2 .dcsf-pt td.dcsf-q.dc2 { opacity: 1; }

/* Overstock leaderboard */
table.dcsf-lb { width: 100%; border-collapse: collapse; background: #fff; }
table.dcsf-lb th {
  background: var(--table-header-bg, #EFF3F6); text-align: right; font-size: 11px; text-transform: uppercase;
  letter-spacing: .03em; color: #6b7280; padding: 10px 12px; border-bottom: 1px solid var(--dcsf-grid);
  cursor: pointer; white-space: nowrap;
}
table.dcsf-lb th:nth-child(1), table.dcsf-lb th:nth-child(2), table.dcsf-lb th:nth-child(3) { text-align: left; }
table.dcsf-lb td { padding: 9px 12px; border-bottom: 1px solid var(--dcsf-grid); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
table.dcsf-lb td:nth-child(1), table.dcsf-lb td:nth-child(2), table.dcsf-lb td:nth-child(3) { text-align: left; }
table.dcsf-lb tr:hover { background: var(--row-store-bg-hover, #F4F7F9); }
.dcsf-dcbadge { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 20px; }
.dcsf-dcbadge.d0 { background: rgba(63, 115, 141, .14); color: var(--dcsf-b0); }
.dcsf-dcbadge.d1 { background: rgba(246, 140, 44, .18); color: #b4630c; }
.dcsf-dcbadge.d2 { background: rgba(13, 148, 136, .14); color: var(--dcsf-b2); }
.dcsf-exc { color: var(--dcsf-over-ink); font-weight: 700; }
.dcsf-muted { color: #9ca3af; }

@media (max-width: 760px) {
  .dcsf-grow, .dcsf-colhdr { grid-template-columns: 22px 1fr 78px 78px 78px; }
  .dcsf-grow > .dcsf-gcell:nth-child(3), .dcsf-colhdr > div:nth-child(3) { display: none; }
}