/* DC Distribution view (js/views/dc.js) — Cory Jones' DC Dashboard v25,
   DESIGN ported verbatim from the standalone v25 WAREHOUSE pages
   (Distribution_Dashboard / Driver_Detail / Issue_Detail / Customer_Voice /
   Truck_Utilization _v25_WAREHOUSE.html). Warm cream canvas, flat white
   cards with tan borders, ink text, orange accent, status left-edge
   stripes. Every rule is scoped under #dcView so the template's own class
   names can be kept as-is; the v25 design tokens are declared ON #dcView
   (not :root) so they never leak into other views. The later v16/v17/v18
   template override blocks are flattened here to their final values. */

#dcView {
  /* v25 design tokens (template :root, verbatim) */
  --bg: #f7f3ea;          /* page background — warm cream */
  --surface: #ffffff;     /* card background */
  --surface-2: #faf6ed;   /* secondary surface (tile insets, zebra, table heads) */
  --ink: #1d3540;         /* primary text — dark slate/navy */
  --ink-2: #2a4856;
  --ink-soft: #4a6573;    /* secondary text */
  --line: #e3dccb;        /* borders/dividers — warm tan */
  --muted: #7a8893;       /* muted/label text */
  --accent: #e87722;      /* brand orange */
  --accent-soft: #fbe5d2;
  --good: #2d8540; --good-soft: #d8ebd9;
  --bad: #c83a1f;  --bad-soft: #f6dad2;
  --warn: #c98a1d;

  /* bleed the cream canvas to the edges of the portal .content pane
     (padding mirrors layout.css breakpoints) */
  display: block;
  margin: -12px -16px;
  padding: 20px 28px 40px;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: calc(100vh - var(--chrome-h, 0px));
}
#dcView[style*="display:none"], #dcView[style*="display: none"] { display: none; }
@media (min-width: 1400px) { #dcView { margin: -16px -24px; } }
@media (min-width: 1800px) { #dcView { margin: -20px -32px; } }
#dcView * { box-sizing: border-box; }

/* ── Filter bar (template .filters, drawn as a white card inside the view) ── */
#dcView .filters {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 20px;
}
#dcView .pill {
  background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
  padding: 6px 14px; border-radius: 4px; font-size: 12px; cursor: pointer;
  font-weight: 500; letter-spacing: .3px;
}
#dcView .pill:hover { border-color: var(--accent); color: var(--ink); }
#dcView .pill.active { background: var(--ink); border-color: var(--ink); color: #fff; }
#dcView .select, #dcView .search-input {
  background: #fff; border: 1px solid var(--line); padding: 6px 10px; font-size: 12px;
  color: var(--ink); border-radius: 4px; font-family: inherit;
}
#dcView .select { cursor: pointer; min-width: 120px; }
#dcView .search-input { min-width: 200px; }
#dcView .range-label { margin-left: auto; color: var(--ink-soft); font-size: 12px; font-weight: 500; }
#dcView .range-label .asof { color: var(--muted); font-weight: 500; }

/* ── Section headers ── */
#dcView .section-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px 0; }
#dcView .section-h .label { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1.8px; }
#dcView .section-h .label::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--accent); margin-right: 8px; vertical-align: middle; }
#dcView .section-h .meta { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

/* ── Network hero card ── */
#dcView .net-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 24px 28px; position: relative; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
#dcView .net-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(29,53,64,.10); transform: translateY(-1px); }
#dcView .net-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232,119,34,.18); }
#dcView .net-card::before { content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: var(--good); }
#dcView .net-card.warn::before { background: var(--warn); }
#dcView .net-card.bad::before { background: var(--bad); }
#dcView .net-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
#dcView .net-name { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; }
#dcView .net-loc { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 4px; }
#dcView .net-status { font-size: 11px; padding: 5px 12px; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
#dcView .net-status.good { background: var(--good-soft); color: var(--good); }
#dcView .net-status.warn { background: #fbeacb; color: var(--warn); }
#dcView .net-status.bad { background: var(--bad-soft); color: var(--bad); }

/* Hero row: big number + sparkline (v18 spacing) */
#dcView .hero-row { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: center; padding: 34px 8px 36px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
@media (max-width: 980px) { #dcView .hero-row { grid-template-columns: 1fr; } }
#dcView .hero-left .hero-num { font-size: 96px; font-weight: 700; letter-spacing: -3.5px; line-height: .9; font-feature-settings: "tnum"; }
#dcView .hero-left .hero-lbl { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1.8px; margin-top: 10px; }
#dcView .hero-left .hero-gap { font-size: 12px; font-weight: 700; margin-top: 10px; letter-spacing: .2px; }
#dcView .hero-left .hero-gap.good { color: var(--good); }
#dcView .hero-left .hero-gap.bad { color: var(--bad); }
#dcView .hero-right { display: flex; justify-content: flex-end; min-width: 0; }
#dcView .hero-right svg { max-width: 100%; height: auto; }

/* Network stat tiles (v17 final) */
#dcView .net-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; }
@media (max-width: 1100px) { #dcView .net-stats { grid-template-columns: repeat(2, 1fr); } }
#dcView .net-stats .dc-stat { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 18px 16px; transition: transform .15s, box-shadow .15s, border-color .15s; position: relative; overflow: hidden; }
#dcView .net-stats .dc-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(29,53,64,.10); border-color: var(--accent); }
#dcView .net-stats .dc-stat .l { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1.3px; margin-bottom: 10px; display: block; }
#dcView .net-stats .dc-stat .v { font-size: 40px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; color: var(--ink); font-feature-settings: "tnum"; display: block; margin: 0; }
#dcView .net-stats .dc-stat .v.good { color: var(--good); }
#dcView .net-stats .dc-stat .v.warn { color: var(--warn); }
#dcView .net-stats .dc-stat .v.bad { color: var(--bad); }
#dcView .net-stats .dc-stat .tgt-chip { margin-top: 12px; font-size: 11px; padding: 3px 9px; font-weight: 700; border-radius: 5px; }

/* Target chips */
#dcView .tgt-chip { display: inline-block; background: rgba(29,53,64,.06); border: 1px solid rgba(29,53,64,.12); border-radius: 4px; padding: 2px 8px; font-size: 10.5px; color: var(--ink-soft); margin-top: 7px; font-weight: 700; letter-spacing: .2px; }

/* Network foot (v18) */
#dcView .net-foot { padding-top: 22px; border-top: 1px solid var(--line); margin-top: 26px; font-size: 13px; color: var(--ink-soft); display: flex; justify-content: space-between; gap: 24px; align-items: center; flex-wrap: wrap; }
#dcView .net-foot strong { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.4px; display: inline-block; margin: 0 4px; font-feature-settings: "tnum"; vertical-align: baseline; }

/* ── DC hero cards ── */
#dcView .dc-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; margin-bottom: 24px; }
#dcView .dc-hero-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; cursor: pointer; transition: all .15s; position: relative; overflow: hidden; }
#dcView .dc-hero-card:hover { border-color: var(--accent); box-shadow: 0 4px 12px rgba(29,53,64,.08); transform: translateY(-1px); }
#dcView .dc-hero-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232,119,34,.2); }
#dcView .dc-hero-card::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--good); }
#dcView .dc-hero-card.warn::before { background: var(--warn); }
#dcView .dc-hero-card.bad::before { background: var(--bad); }
#dcView .dc-hero-card.muted::before { background: #cdc6b3; }
#dcView .dc-hero-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
#dcView .dc-hero-name { font-size: 17px; font-weight: 600; color: var(--ink); }
#dcView .dc-hero-loc { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
#dcView .dc-hero-status { font-size: 9px; padding: 3px 8px; border-radius: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
#dcView .dc-hero-status.good { background: var(--good-soft); color: var(--good); }
#dcView .dc-hero-status.warn { background: #fbeacb; color: var(--warn); }
#dcView .dc-hero-status.bad { background: var(--bad-soft); color: var(--bad); }
#dcView .dc-hero-status.muted { background: #ece6d6; color: var(--muted); }
#dcView .dc-hero-num { font-size: 56px; font-weight: 700; letter-spacing: -1.8px; line-height: .95; margin: 14px 0 4px; font-feature-settings: "tnum"; }
#dcView .dc-hero-sub { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1.5px; }
#dcView .dc-spark { margin-bottom: 14px; }
#dcView .dc-spark svg { max-width: 100%; height: auto; }

/* DC card stat tiles (v17 final) */
#dcView .dc-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#dcView .dc-hero-stats .dc-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 12px 10px; }
#dcView .dc-hero-stats .dc-stat .l { font-size: 10px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1.1px; margin-bottom: 6px; display: block; }
#dcView .dc-hero-stats .dc-stat .v { font-size: 24px; font-weight: 700; letter-spacing: -.7px; line-height: 1; color: var(--ink); font-feature-settings: "tnum"; display: block; }
#dcView .dc-hero-stats .dc-stat .v.good { color: var(--good); }
#dcView .dc-hero-stats .dc-stat .v.warn { color: var(--warn); }
#dcView .dc-hero-stats .dc-stat .v.bad { color: var(--bad); }
#dcView .dc-hero-stats .dc-stat .tgt-chip { margin-top: 8px; font-size: 10px; padding: 2px 7px; }
#dcView .dc-hero-foot { padding-top: 14px; border-top: 1px solid var(--line); margin-top: 16px; font-size: 12px; color: var(--ink-soft); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
#dcView .dc-hero-foot strong { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; display: inline-block; margin: 0 3px; font-feature-settings: "tnum"; vertical-align: baseline; }

/* ── Ops throughput strip ── */
#dcView .ops-footer { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
#dcView .ops-cell { background: var(--surface-2); padding: 14px 16px; }
#dcView .ops-cell .l { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
#dcView .ops-cell .v { font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
#dcView .ops-cell .sub { font-size: 10px; color: var(--ink-soft); margin-top: 1px; }
#dcView .ops-cell .icon { display: inline-block; width: 18px; height: 18px; background: var(--accent); opacity: .15; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* ── Two-column layout + generic card ── */
#dcView .twocol { display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; margin-bottom: 18px; }
@media (max-width: 980px) { #dcView .twocol { grid-template-columns: 1fr; } }
#dcView .twocol.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) { #dcView .twocol.even { grid-template-columns: 1fr; } }
#dcView .card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
#dcView .card h3 { margin: 0 0 4px 0; font-size: 13px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 1.3px; }
#dcView .card h3 .dot { display: inline-block; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; margin-right: 8px; vertical-align: middle; }
#dcView .card .csub { font-size: 11px; color: var(--muted); margin-bottom: 14px; }
#dcView .canvas-wrap { position: relative; height: 280px; }
#dcView .canvas-wrap.tall { height: 320px; }

/* ── CSAT module ── */
#dcView .csat-grid2 { display: grid; grid-template-columns: 260px 1fr; gap: 16px; margin-bottom: 14px; }
@media (max-width: 1100px) { #dcView .csat-grid2 { grid-template-columns: 1fr; } }
#dcView .csat-summary { display: grid; grid-template-columns: 1fr; gap: 8px; }
#dcView .csat-mini { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 10px 17px; position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; }
#dcView .csat-mini::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--good); }
#dcView .csat-mini.warn::before { background: var(--warn); }
#dcView .csat-mini.bad::before { background: var(--bad); }
#dcView .csat-mini.muted::before { background: #cdc6b3; }
#dcView .csat-mini.net { background: linear-gradient(135deg, #fff, var(--surface-2)); }
#dcView .csat-mini .cm-l { font-size: 12px; font-weight: 600; color: var(--ink); }
#dcView .csat-mini .cm-v { font-size: 24px; font-weight: 700; letter-spacing: -.5px; line-height: 1; }
#dcView .csat-mini .cm-t { font-size: 10px; color: var(--ink-soft); font-weight: 600; margin-top: 3px; text-align: right; letter-spacing: .2px; }
#dcView .csat-mini > div:last-child { text-align: right; }
#dcView .csat-chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; }
#dcView .csat-chart-card h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 1.2px; }
#dcView .csat-chart-card h3 .dot { display: inline-block; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; margin-right: 8px; vertical-align: middle; }
#dcView .csat-chart-card .csub { font-size: 11px; color: var(--muted); margin-bottom: 14px; }
#dcView .csat-chart-card .cwrap { flex: 1; position: relative; height: 280px; }

/* ── Drill-through affordance (v20) ── */
#dcView .drill-card { cursor: pointer; position: relative; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
#dcView .drill-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(29,53,64,.12); border-color: var(--accent); }
#dcView .drill-card .drill-arrow { position: absolute; top: 18px; right: 20px; width: 28px; height: 28px; border-radius: 14px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; line-height: 1; opacity: .85; transition: opacity .15s, transform .15s; z-index: 5; }
#dcView .drill-card:hover .drill-arrow { opacity: 1; transform: translateX(2px); }
#dcView .drill-card .drill-hint { position: absolute; top: 46px; right: 22px; font-size: 10.5px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; opacity: 0; transition: opacity .15s; z-index: 5; }
#dcView .drill-card:hover .drill-hint { opacity: 1; }

/* ── Summary tiles (Driver Detail + shared KPI grids) ── */
#dcView .summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
#dcView .sum-cell { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
#dcView .sum-cell .l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
#dcView .sum-cell .v { font-size: 20px; font-weight: 700; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
#dcView .sum-cell .v.good { color: var(--good); }
#dcView .sum-cell .v.warn { color: var(--warn); }
#dcView .sum-cell .v.bad { color: var(--bad); }
#dcView .sum-cell .v.accent { color: var(--accent); }
#dcView .sum-cell .sub { font-size: 10px; color: var(--ink-soft); margin-top: 1px; }

/* ── Driver table ── */
#dcView .table-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
#dcView .table-scroll { overflow: auto; max-height: calc(100vh - var(--chrome-h, 0px) - 60px); }
#dcView .driver-tbl { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); }
#dcView .driver-tbl th { text-align: left; padding: 11px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); font-weight: 700; position: sticky; top: 0; z-index: 2; white-space: nowrap; }
#dcView .driver-tbl th.num { text-align: right; }
#dcView .driver-tbl th.sortable { cursor: pointer; user-select: none; }
#dcView .driver-tbl th.sortable:hover { color: var(--accent); }
#dcView .driver-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink); font-variant-numeric: tabular-nums; }
#dcView .driver-tbl td.num { text-align: right; }
#dcView .driver-tbl td.driver-name { font-weight: 600; font-variant-numeric: normal; }
#dcView .driver-tbl tr:last-child td { border-bottom: none; }
#dcView .driver-tbl tbody tr:hover td { background: var(--surface-2); }
#dcView .driver-tbl .dc-tag { display: inline-block; background: #f0e8d4; color: var(--ink-soft); padding: 2px 7px; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-right: 3px; }
#dcView .driver-tbl .dc-tag.rh { background: #fbe5d2; color: var(--accent); }
#dcView .driver-tbl .dc-tag.loxley { background: #d8ebd9; color: var(--good); }
#dcView .driver-tbl .dc-tag.kernersville { background: #e5dff1; color: #7a5b9f; }
#dcView .driver-tbl .dot-good, #dcView .driver-tbl .dot-warn, #dcView .driver-tbl .dot-bad { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
#dcView .driver-tbl .dot-good { background: var(--good); }
#dcView .driver-tbl .dot-warn { background: var(--warn); }
#dcView .driver-tbl .dot-bad { background: var(--bad); }
#dcView .driver-tbl .zero { display: inline-block; background: var(--good-soft); color: var(--good); padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; }
#dcView .driver-tbl .rank { color: var(--muted); font-size: 11px; font-weight: 600; width: 30px; }
#dcView .driver-tbl .issue-link { cursor: pointer; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
#dcView .driver-tbl .issue-link:hover { color: var(--ink); }
#dcView .driver-tbl tr.expanded td { background: var(--surface-2); }
#dcView .driver-tbl tr.detail td { padding: 0; background: #f3ecda; }
#dcView .driver-tbl tr.detail .detail-inner { padding: 14px 24px 16px; }
#dcView .driver-tbl tr.detail .detail-h { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 8px; }
#dcView .driver-tbl tr.detail .reason-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
#dcView .driver-tbl tr.detail .reason-row { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
#dcView .driver-tbl tr.detail .reason-row .rname { font-weight: 500; color: var(--ink); }
#dcView .driver-tbl tr.detail .reason-row .rcounts { color: var(--ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
#dcView .driver-tbl tr.detail .reason-row .rcounts strong { color: var(--accent); font-weight: 700; }

/* ── Methodology flag + footnote ── */
#dcView .flag-review { color: var(--warn); cursor: help; font-size: 11px; font-weight: 700; }
#dcView .footnote { font-size: 11px; color: var(--muted); margin-top: 14px; padding: 0 4px; }
#dcView .footnote .note { display: inline-block; background: var(--surface-2); border: 1px dashed var(--line); border-radius: 4px; padding: 6px 10px; margin-top: 8px; }

/* ── Portal-specific: loading/empty, snapshot banner, feed-failure strips
      (functionality kept from the portal port, restyled to the v25 palette) ── */
#dcView .dc-empty { padding: 40px; text-align: center; color: var(--muted); font-size: 13px; }
#dcView .dc-feed-error {
  margin: 10px 0; padding: 8px 14px; border-radius: 6px;
  background: var(--bad-soft); color: var(--bad); border: 1px solid #ecc4b8;
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#dcView .dc-feed-error.slim { margin: 4px 0; padding: 5px 10px; }
#dcView .dc-feed-error code { font-weight: 700; }
#dcView .dc-retry-btn {
  border: 1px solid var(--bad); color: var(--bad); background: #fff;
  border-radius: 4px; padding: 3px 10px; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}

/* ══ Issue Deep Dive / Customer Voice / Truck Utilization shared blocks
      (v23+ template family: 12px-radius white sections on the cream bg) ══ */

/* Filter chip groups (responsibility / score) */
#dcView .filt-grp { display: flex; flex-direction: column; gap: 6px; }
#dcView .filt-grp label { font-size: 10.5px; text-transform: uppercase; color: #8a979e; letter-spacing: .8px; font-weight: 600; }
#dcView .chips { display: flex; flex-wrap: wrap; gap: 6px; }
#dcView .chip { padding: 6px 12px; border-radius: 18px; border: 1px solid var(--line); background: #fff; font-size: 12px; font-weight: 500; color: #5b6b73; cursor: pointer; transition: all .15s; user-select: none; }
#dcView .chip:hover { border-color: #8a979e; color: var(--ink); }
#dcView .chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
#dcView .chip[data-dcresp="dc"].active { background: #d68910; border-color: #d68910; }
#dcView .chip[data-dcresp="driver"].active { background: #e87722; border-color: #e87722; }
#dcView .chip[data-dcresp="customer"].active { background: #5a8a99; border-color: #5a8a99; }
#dcView .chip[data-dcresp="guest"].active { background: #9b7bc4; border-color: #9b7bc4; }
#dcView .chip[data-dcresp="vendor"].active { background: #b54848; border-color: #b54848; }
#dcView .chip[data-dcresp="damage"].active { background: #8b1a1a; border-color: #8b1a1a; }
#dcView .chip[data-dcresp="admin"].active { background: #9aa3a8; border-color: #9aa3a8; }
#dcView .chip[data-dcscore="neg"].active { background: #b54848; border-color: #b54848; }
#dcView .chip[data-dcscore="pos"].active { background: #2d8540; border-color: #2d8540; }
/* Compact chip group inside a section header (issue-trend grain toggle) */
#dcView .grain-toggle { display: inline-flex; gap: 4px; }
#dcView .grain-toggle .chip { padding: 3px 10px; font-size: 11px; text-transform: none; letter-spacing: 0; }
/* Compact stat blocks inside a section (Planned Pickups summary) */
#dcView .mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
#dcView .mini-stats > div { background: #f9f6ee; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
#dcView .mini-stats .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: #8a979e; font-weight: 600; }
#dcView .mini-stats .v { font-size: 20px; font-weight: 700; color: var(--ink); margin-top: 2px; }
#dcView .mini-stats .s { font-size: 10.5px; color: #8a979e; margin-top: 2px; }

/* KPI tiles (32px values) */
#dcView .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
#dcView .kpis.five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { #dcView .kpis, #dcView .kpis.five { grid-template-columns: repeat(2, 1fr); } }
#dcView .kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
#dcView .kpi .l { font-size: 11px; text-transform: uppercase; color: #8a979e; letter-spacing: .8px; font-weight: 600; margin-bottom: 8px; }
#dcView .kpi .v { font-size: 32px; font-weight: 700; letter-spacing: -1.2px; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
#dcView .kpi .sub { font-size: 11px; color: #5b6b73; margin-top: 8px; }
#dcView .kpi.accent .v { color: var(--accent); }
#dcView .kpi.warn .v { color: #8b1a1a; }
#dcView .kpi.good .v { color: var(--good); }
#dcView .kpi.bad .v { color: var(--bad); }
#dcView .kpi.amber .v { color: var(--warn); }

/* White sections + 2-col rows */
#dcView .section { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 16px; }
#dcView .section h3 { margin: 0 0 14px; font-size: 13px; text-transform: uppercase; color: #5b6b73; letter-spacing: .8px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
#dcView .section h3 .h-sub { font-size: 11px; color: #8a979e; text-transform: none; letter-spacing: 0; font-weight: 500; }
#dcView .row-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; }
#dcView .row-2 > .section { margin-bottom: 0; }
#dcView .row-2.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { #dcView .row-2, #dcView .row-2.even { grid-template-columns: 1fr; } }

/* Horizontal bar lists */
#dcView .bar-list { display: flex; flex-direction: column; gap: 9px; }
#dcView .bar-row { display: grid; grid-template-columns: 1fr 60px; gap: 14px; align-items: center; }
#dcView .bar-row .lbl { font-size: 12.5px; color: var(--ink); font-weight: 500; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
#dcView .bar-row .lbl .sub { font-size: 10.5px; color: #8a979e; font-weight: 500; }
#dcView .bar-row .track { height: 8px; background: #efe9de; border-radius: 5px; overflow: hidden; }
#dcView .bar-row .fill { height: 100%; border-radius: 5px; transition: width .4s ease-out; }
#dcView .bar-row .vol { font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
#dcView .bar-row .vol .sml { font-size: 10px; color: #8a979e; font-weight: 500; display: block; margin-top: 1px; }
#dcView .bar-row.clickable { cursor: pointer; border-radius: 6px; padding: 3px 6px; margin: -3px -6px; transition: background .15s; }
#dcView .bar-row.clickable:hover { background: #fbf6e9; }
#dcView .bar-row.clickable.sel { background: #fef0e1; box-shadow: inset 3px 0 0 var(--accent); }
#dcView .furn-list .bar-row .fill { background: #8b1a1a; }
#dcView .furn-empty { padding: 30px 20px; text-align: center; color: #8a979e; font-size: 12px; font-style: italic; background: #efe9de; border-radius: 8px; }

/* SVG weekly trend */
#dcView .trend { height: 200px; width: 100%; }
#dcView .trend .line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#dcView .trend .area { fill: url(#dcTrendGrad); opacity: .4; }
#dcView .trend .pt { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
#dcView .trend .grid { stroke: #efe9de; stroke-width: 1; stroke-dasharray: 2 4; }
#dcView .trend .axis-lbl { font-size: 10px; fill: #8a979e; }

/* Responsibility donut + legend */
#dcView .dc-pie-wrap { display: flex; align-items: center; gap: 18px; justify-content: center; padding: 8px 0 4px; }
#dcView .dc-pie { width: 180px; height: 180px; flex-shrink: 0; }
#dcView .dc-pie .slice { transition: transform .15s ease, filter .15s ease; transform-origin: center; cursor: default; }
#dcView .dc-pie .slice:hover { filter: brightness(1.08); transform: scale(1.03); }
#dcView .dc-pie .center-num { font-size: 17px; fill: var(--ink); font-weight: 700; letter-spacing: -.4px; font-family: 'Inter', sans-serif; }
#dcView .dc-pie .center-lbl { font-size: 5.5px; fill: #8a979e; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600; font-family: 'Inter', sans-serif; }
#dcView .dc-pie-legend { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 130px; }
#dcView .dc-pie-legend .l-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
#dcView .dc-pie-legend .l-name { display: flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 500; }
#dcView .dc-pie-legend .l-name .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
#dcView .dc-pie-legend .l-vals { color: #5b6b73; font-variant-numeric: tabular-nums; font-size: 12px; }
#dcView .dc-pie-legend .l-vals b { color: var(--ink); font-weight: 700; margin-right: 4px; }

/* Issue events table */
#dcView .tbl-wrap { max-height: 480px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
#dcView .evt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#dcView .evt-table th { text-align: left; padding: 10px 8px; color: #8a979e; font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; border-bottom: 1px solid var(--line); background: var(--surface-2); position: sticky; top: 0; z-index: 2; white-space: nowrap; }
#dcView .evt-table td { padding: 9px 8px; border-bottom: 1px solid #efe9de; color: var(--ink); vertical-align: middle; }
#dcView .evt-table tr:hover td { background: #fbf6e9; }
#dcView .evt-table .code-pill { display: inline-block; padding: 2px 8px; border-radius: 11px; font-size: 10.5px; font-weight: 600; color: #fff; }
#dcView .evt-table .rev { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
#dcView .evt-table .rev.zero { color: #8a979e; font-weight: 400; }
#dcView .evt-table .dc-tag2 { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: .4px; }

/* Score distribution histogram (Customer Voice; Trucks reuses with 6 cols) */
#dcView .histo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: end; height: 180px; padding: 10px 0; position: relative; }
#dcView .histo.cols6 { grid-template-columns: repeat(6, 1fr); }
#dcView .histo-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; width: 100%; }
#dcView .histo-num { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-height: 18px; line-height: 1; }
#dcView .histo-bar { width: 100%; border-radius: 6px 6px 0 0; transition: height .4s; min-height: 4px; }
#dcView .histo-bar.s1 { background: linear-gradient(180deg, #b54848 0%, #7d3030 100%); }
#dcView .histo-bar.s2 { background: linear-gradient(180deg, #cc5b3a 0%, #7d3030 100%); }
#dcView .histo-bar.s3 { background: linear-gradient(180deg, #d68910 0%, #a06e0c 100%); }
#dcView .histo-bar.s4 { background: linear-gradient(180deg, #7fa84c 0%, #4a7028 100%); }
#dcView .histo-bar.s5 { background: linear-gradient(180deg, #2d8540 0%, #1d6028 100%); }
#dcView .histo-lbl { font-size: 13px; font-weight: 600; color: #5b6b73; text-align: center; }
/* Truck utilization buckets: count sits INSIDE the bar top, white */
#dcView .histo-bar.low { background: linear-gradient(180deg, #b54848 0%, #7d3030 100%); }
#dcView .histo-bar.med { background: linear-gradient(180deg, #d68910 0%, #a06e0c 100%); }
#dcView .histo-bar.high { background: linear-gradient(180deg, #2d8540 0%, #1d6028 100%); }
#dcView .histo-bar.low, #dcView .histo-bar.med, #dcView .histo-bar.high {
  color: #fff; font-size: 12px; font-weight: 700; text-align: center; padding-top: 4px;
  font-variant-numeric: tabular-nums;
}
#dcView .lb-util { font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
#dcView .lb-util.good { color: var(--good); }
#dcView .lb-util.warn { color: #d68910; }
#dcView .lb-util.bad { color: #b54848; }
#dcView .lb-routes { font-size: 11.5px; color: #5b6b73; text-align: right; font-variant-numeric: tabular-nums; }
#dcView .histo-lbl-star { font-size: 14px; color: #d68910; }
#dcView .histo-lbls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 6px; }
#dcView .histo-lbls.cols6 { grid-template-columns: repeat(6, 1fr); }

/* Trend target line (voice + trucks SVG trends) */
#dcView .trend .target-line { stroke: var(--good); stroke-width: 1.5; stroke-dasharray: 4 4; }
#dcView .trend .target-lbl { font-size: 10px; fill: var(--good); font-weight: 600; }

/* By-DC horizontal bars (voice avg score / truck utilization) */
#dcView .dc-bars { display: flex; flex-direction: column; gap: 14px; }
#dcView .dc-bars .dc-row { display: flex; flex-direction: column; gap: 6px; }
#dcView .dc-bars .dc-name { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; color: var(--ink); }
#dcView .dc-bars .dc-name .util { font-size: 14px; font-weight: 700; }
#dcView .dc-bars .dc-name .util.good { color: var(--good); }
#dcView .dc-bars .dc-name .util.warn { color: #d68910; }
#dcView .dc-bars .dc-name .util.bad { color: #b54848; }
#dcView .dc-bars .dc-bar { height: 18px; background: #efe9de; border-radius: 5px; overflow: hidden; position: relative; }
#dcView .dc-bars .dc-bar-fill { height: 100%; border-radius: 5px; transition: width .4s; }
#dcView .dc-bars .dc-meta { font-size: 11px; color: #8a979e; display: flex; gap: 14px; margin-top: 2px; }

/* Complaint theme bars */
#dcView .theme-list { display: flex; flex-direction: column; gap: 9px; }
#dcView .theme-row { display: grid; grid-template-columns: 1fr 60px; gap: 14px; align-items: center; }
#dcView .theme-row .lbl { font-size: 13px; color: var(--ink); font-weight: 500; margin-bottom: 4px; }
#dcView .theme-row .track { height: 8px; background: #efe9de; border-radius: 5px; overflow: hidden; }
#dcView .theme-row .fill { height: 100%; border-radius: 5px; background: #b54848; transition: width .4s; }
#dcView .theme-row .vol { font-size: 13px; font-weight: 700; color: #b54848; text-align: right; font-variant-numeric: tabular-nums; }

/* Driver leaderboard rows + selected state + filter bar */
#dcView .lb-row { display: grid; grid-template-columns: 24px 1fr 60px 70px; gap: 10px; align-items: center; padding: 9px 8px; border-bottom: 1px solid #efe9de; cursor: pointer; border-radius: 4px; transition: background .15s; }
#dcView .lb-row:hover { background: #fbf6e9; }
#dcView .lb-row.selected { background: #fef0e1; border-left: 3px solid var(--accent); padding-left: 5px; }
#dcView .lb-row.selected .lb-name { color: var(--accent); font-weight: 700; }
#dcView .lb-row:last-child { border-bottom: none; }
#dcView .lb-rank { font-size: 13px; font-weight: 700; color: #8a979e; font-variant-numeric: tabular-nums; }
#dcView .lb-name { font-size: 13px; color: var(--ink); font-weight: 500; display: flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dcView .lb-name .dc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
#dcView .lb-score { font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
#dcView .lb-score.good { color: var(--good); }
#dcView .lb-score.warn { color: #d68910; }
#dcView .lb-score.bad { color: #b54848; }
#dcView .lb-n { font-size: 11.5px; color: #5b6b73; text-align: right; font-variant-numeric: tabular-nums; }
#dcView .lb-rev { font-size: 11.5px; color: #5b6b73; text-align: right; font-variant-numeric: tabular-nums; }
#dcView .lb-evt { font-size: 13px; font-weight: 700; color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }
#dcView .driver-filter-bar { display: none; background: #fef0e1; border: 1px solid var(--accent); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; align-items: center; justify-content: space-between; gap: 12px; }
#dcView .driver-filter-bar.active { display: flex; }
#dcView .driver-filter-bar .label { color: var(--ink); font-weight: 500; }
#dcView .driver-filter-bar .driver-name { color: var(--accent); font-weight: 700; margin-left: 4px; }
#dcView .driver-filter-bar .clear-btn { background: var(--accent); color: #fff; border: none; padding: 5px 12px; border-radius: 14px; font-size: 11px; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: .5px; font-family: inherit; }
#dcView .driver-filter-bar .clear-btn:hover { background: #c9610e; }

/* Comment cards */
#dcView .comments-wrap { max-height: 520px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
#dcView .comment { padding: 14px 16px; border-bottom: 1px solid #efe9de; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
#dcView .comment:last-child { border-bottom: none; }
#dcView .comment-score { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; flex-shrink: 0; }
#dcView .comment-score.s1 { background: #b54848; }
#dcView .comment-score.s2 { background: #cc5b3a; }
#dcView .comment-score.s3 { background: #d68910; }
#dcView .comment-score.s4 { background: #7fa84c; }
#dcView .comment-score.s5 { background: #2d8540; }
#dcView .comment-body .comment-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: #8a979e; margin-bottom: 6px; }
#dcView .comment-body .comment-meta .meta-key { font-weight: 600; color: #5b6b73; }
#dcView .comment-body .comment-meta .dc-tag2 { padding: 1px 7px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .4px; }
#dcView .comment-text { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
#dcView .comment-themes { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; }
#dcView .theme-tag { font-size: 10px; font-weight: 600; background: #fbe5d2; color: #a04518; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .3px; }

/* Dashed data-source footnote + empty state */
#dcView .note { font-size: 11.5px; color: #8a979e; margin: 18px 0 0; padding: 12px 16px; background: #fcf8eb; border: 1px dashed var(--line); border-radius: 8px; line-height: 1.6; }
#dcView .note b { color: #5b6b73; }
#dcView .empty { padding: 30px; text-align: center; color: #8a979e; font-style: italic; }