/* Planned vs Actual (testing) — js/views/pva.js.
   Same design family as sched_rev.css (the Sched/Unsched Revenue testing
   page): portal tokens for every mapped color, component-local --pva-* vars
   on #pvaView for the report-specific constants so nothing leaks. */

#pvaView {
  /* token-mapped palette */
  --pva-surface: var(--row-store-bg);       /* card background */
  --pva-band:    var(--table-header-bg);    /* week bands / zebra / day rows */
  --pva-ink:     var(--navy);               /* primary text */
  --pva-brand:   var(--navy);               /* title bar */
  --pva-grid:    var(--table-border);       /* chart grid + row rules */
  --pva-ring:    var(--table-border);       /* card hairlines */
  --pva-s1:      var(--primary-blue);       /* delivered */
  --pva-low:     var(--danger-red);         /* attainment < 85% */
  /* component-local (no portal token exists) */
  --pva-ink2: #52616B;                      /* secondary text */
  --pva-mut:  #7C8792;                      /* muted / labels */
  --pva-axis: #B7C1CA;                      /* chart baseline, heavy rules */
  --pva-plan: #C4CFD8;                      /* scheduled (frozen AM plan) bar */
  --pva-s3:   #DD9C00;                      /* same-day adds delivered */
  /* status family — same values as the DC view (dc.css) so the two
     Package.ai pages read as siblings. --good/--warn are scoped to #dcView,
     not global tokens, so they must be redeclared here. Rule vs ink are
     split: the ink steps are darkened to stay legible at caption size. */
  --pva-good: #2d8540;  --pva-good-ink: #267036;
  --pva-warn: #c98a1d;  --pva-warn-ink: #8A5D0C;
  --pva-bad:  #dc2626;  --pva-bad-ink:  #A3211F;

  display: block;
  color: var(--pva-ink);
  font-family: var(--font-stack);
  font-size: var(--text-body);
  line-height: 1.45;
}
#pvaView[style*="display:none"], #pvaView[style*="display: none"] { display: none; }
#pvaView * { box-sizing: border-box; }

/* ── Title bar + sub line ── */
#pvaView .pva-h1 {
  background: var(--pva-brand); color: #fff;
  padding: 13px 20px; margin: 0 0 12px;
  font-size: var(--text-heading); font-weight: 600;
  border-radius: var(--radius);
}
#pvaView .pva-h1 .pva-testing { font-weight: 400; opacity: .75; }

/* collapsed methodology — kept off the page until asked for */
#pvaView .pva-how { margin: 0 0 14px 2px; }
#pvaView .pva-how > summary {
  font-size: var(--text-eyebrow); color: var(--pva-mut);
  cursor: pointer; display: inline-block; list-style: none;
  padding: 2px 0; user-select: none;
}
#pvaView .pva-how > summary::-webkit-details-marker { display: none; }
#pvaView .pva-how > summary::before { content: "\25B8 "; opacity: .7; }
#pvaView .pva-how[open] > summary::before { content: "\25BE "; }
#pvaView .pva-how > summary:hover { color: var(--pva-ink2); }
#pvaView .pva-how-body {
  font-size: var(--text-eyebrow); color: var(--pva-ink2);
  background: var(--pva-surface); border: 1px solid var(--pva-ring);
  border-radius: var(--radius); padding: 12px 16px;
  margin-top: 8px; max-width: 900px;
}
#pvaView .pva-how-body p { margin: 0 0 8px; }
#pvaView .pva-how-body p:last-child { margin-bottom: 0; }
#pvaView .pva-how-body .pva-how-src { color: var(--pva-mut); }
#pvaView .pva-how-inline { margin: 6px 0 0; }
#pvaView .pva-warnbar {
  background: var(--pva-surface);
  border: 1px solid var(--ashley-orange); color: var(--pva-ink);
  border-left: 6px solid var(--ashley-orange);
  border-radius: var(--radius); padding: 9px 14px;
  font-size: var(--text-eyebrow); margin: 10px 0 0;
}

/* ── Filter bar ── */
#pvaView .pva-filters {
  background: var(--pva-surface); border: 1px solid var(--pva-ring);
  border-radius: var(--radius); padding: 12px 16px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
#pvaView .select {
  background: var(--pva-surface); border: 1px solid var(--pva-ring);
  padding: 6px 10px; font-size: var(--text-eyebrow); color: var(--pva-ink);
  border-radius: 4px; font-family: inherit; cursor: pointer; min-width: 140px;
}
#pvaView .range-label {
  margin-left: auto; color: var(--pva-ink2);
  font-size: var(--text-eyebrow); font-weight: 500;
}
#pvaView .range-label .asof { color: var(--pva-mut); font-weight: 500; }

/* ── KPI tiles ── */
#pvaView .pva-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
#pvaView .pva-tile {
  background: var(--pva-surface); border: 1px solid var(--pva-ring);
  border-radius: var(--radius); padding: var(--pad-card);
}
#pvaView .pva-tile .pva-v {
  font-size: var(--text-display); font-weight: 700; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}
#pvaView .pva-tile .pva-v .pva-of {
  font-size: var(--text-eyebrow); font-weight: 500; color: var(--pva-mut);
}
#pvaView .pva-tile .pva-k {
  font-size: var(--text-caption); color: var(--pva-mut);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px;
}
#pvaView .pva-tile .pva-c { font-size: 11.5px; color: var(--pva-ink2); margin-top: 3px; }

/* ── Tile tones ──
   Each tile earns its color from its own number: attainment >=90 good,
   75-89 warn, <75 behind. 'plan'/'today'/'delivered' are identity accents,
   'idle' is the deliberately-blank state. Color never carries meaning on
   its own here -- every tile is already labeled and valued in ink. */
#pvaView .pva-tile {
  border-top: 3px solid var(--pva-accent, var(--pva-ring));
  transition: box-shadow .12s ease;
}
#pvaView .pva-tile:hover { box-shadow: 0 1px 6px rgba(0, 59, 74, .10); }
#pvaView .pva-tile .pva-v { color: var(--pva-accent-ink, var(--pva-ink)); }
#pvaView .pva-tile .pva-c b { color: var(--pva-accent-ink, var(--pva-ink2)); font-weight: 700; }

#pvaView .pva-t-today     { --pva-accent: var(--ashley-orange); --pva-accent-ink: var(--navy); }
#pvaView .pva-t-plan      { --pva-accent: var(--pva-plan);      --pva-accent-ink: var(--navy); }
#pvaView .pva-t-delivered { --pva-accent: var(--primary-blue);  --pva-accent-ink: var(--primary-blue); }
#pvaView .pva-t-good      { --pva-accent: var(--pva-good);      --pva-accent-ink: var(--pva-good-ink); }
#pvaView .pva-t-warn      { --pva-accent: var(--pva-warn);      --pva-accent-ink: var(--pva-warn-ink); }
#pvaView .pva-t-bad       { --pva-accent: var(--pva-bad);       --pva-accent-ink: var(--pva-bad-ink); }
#pvaView .pva-t-idle      { --pva-accent: var(--pva-axis);      --pva-accent-ink: var(--pva-mut); }

/* tinted surface, kept very light so the number stays the loudest thing */
#pvaView .pva-t-today     { background: linear-gradient(var(--pva-surface), var(--pva-surface)) padding-box, #FFF8F1; }
#pvaView .pva-t-good      { background: #F3F9F4; }
#pvaView .pva-t-warn      { background: #FDF8EE; }
#pvaView .pva-t-bad       { background: #FDF4F4; }

#pvaView .pva-tile.pva-hot .pva-v { color: var(--pva-accent-ink, var(--pva-s1)); }

/* ── Cards ── */
#pvaView .pva-card {
  background: var(--pva-surface); border: 1px solid var(--pva-ring);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px;
  overflow-x: auto;
}
#pvaView .pva-card h2 { font-size: 13.5px; margin: 0 0 2px; font-weight: 600; }
#pvaView .pva-card .pva-cap {
  font-size: 11.5px; color: var(--pva-mut); margin-bottom: 10px; max-width: 980px;
}

/* ── Chart legend + SVG ── */
#pvaView .pva-legend {
  display: flex; gap: 16px; font-size: var(--text-eyebrow);
  color: var(--pva-ink2); margin-bottom: 6px; flex-wrap: wrap;
}
#pvaView .pva-legend span { display: inline-flex; align-items: center; gap: 6px; }
#pvaView .pva-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
#pvaView svg { min-width: 900px; }
#pvaView svg text { font-family: inherit; }
#pvaView .pva-grid { stroke: var(--pva-grid); stroke-width: 1; }
#pvaView .pva-axis { stroke: var(--pva-axis); stroke-width: 1; }
#pvaView .pva-ylab, #pvaView .pva-xlab { font-size: 11px; fill: var(--pva-mut); }
#pvaView .pva-wkcap {
  font-size: 11px; fill: var(--pva-ink2); font-weight: 600; letter-spacing: .3px;
}
#pvaView .pva-today { stroke: var(--pva-mut); stroke-width: 1; stroke-dasharray: 3 3; }
#pvaView .pva-todaylab { font-size: 10px; fill: var(--pva-mut); }
#pvaView .pva-bar:hover path, #pvaView .pva-bar:hover rect:not(:first-child) { opacity: .85; }

/* chart tooltip (fixed, follows cursor) */
#pvaTip {
  position: fixed; pointer-events: none; display: none; z-index: 9;
  background: var(--row-store-bg); color: var(--navy);
  border: 1px solid var(--table-border); border-radius: 6px;
  box-shadow: var(--shadow-md); padding: 8px 11px; font-size: 12px;
  max-width: 280px;
}
#pvaTip b { display: block; margin-bottom: 3px; }

/* ── Tables ── */
#pvaView .pva-table {
  border-collapse: collapse; width: 100%; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
#pvaView .pva-table th, #pvaView .pva-table td {
  padding: var(--pad-row); text-align: right;
  border-bottom: 1px solid var(--pva-grid); white-space: nowrap;
}
#pvaView .pva-table th {
  color: var(--pva-mut); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .3px; font-weight: 600; border-bottom: 1px solid var(--pva-axis);
}
#pvaView .pva-table td.pva-lbl, #pvaView .pva-table th.pva-lbl {
  text-align: left; font-weight: 600;
}
#pvaView .pva-rng { color: var(--pva-mut); font-weight: 400; font-size: 11px; }
#pvaView td .pva-res-sub { font-size: 11px; color: var(--pva-mut); font-weight: 400; }
#pvaView tr.pva-month td {
  border-top: 2px solid var(--pva-axis); font-weight: 700; background: var(--pva-band);
}
#pvaView .pva-flight { color: var(--pva-mut); font-style: italic; font-weight: 500; }

/* week rows expand/collapse */
#pvaView tr.pva-wkrow { cursor: pointer; }
#pvaView tr.pva-wkrow:hover td { background: var(--pva-band); }
#pvaView .pva-chev {
  display: inline-block; color: var(--pva-mut);
  transition: transform .15s; margin-right: 2px;
}
#pvaView .pva-chev.open { transform: rotate(90deg); }
#pvaView tr.pva-dayrow td {
  background: var(--pva-band); font-size: var(--text-eyebrow);
  color: var(--pva-ink2); border-bottom: 1px solid var(--pva-grid);
}
#pvaView tr.pva-dayrow td.pva-day {
  text-align: left; font-weight: 400; padding-left: 30px; color: var(--pva-ink2);
}

/* attainment mini bar + low flag */
#pvaView .pva-pctbar {
  display: inline-block; width: 40px; height: 7px; background: var(--pva-grid);
  border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 4px;
}
#pvaView .pva-pctbar i {
  display: block; height: 100%; background: var(--pva-s1); border-radius: 4px;
}
#pvaView td.pva-low { color: var(--pva-low); font-weight: 600; }
#pvaView td.pva-low .pva-pctbar i { background: var(--pva-low); }

/* ── Not-delivered orders (click-through to line items) ── */
#pvaView .pva-items td { font-size: 12px; }
#pvaView .pva-items td.pva-cust { text-transform: capitalize; }
#pvaView .pva-items td.pva-reason {
  font-weight: 400; font-size: 11px; color: var(--pva-ink2);
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: normal;
}
#pvaView tr.pva-orow { cursor: pointer; }
#pvaView tr.pva-orow:hover td { background: var(--pva-band); }
#pvaView tr.pva-orow td { border-top: 1px solid var(--pva-axis); }
#pvaView .pva-cat {
  display: inline-block; padding: 1px 8px; border-radius: 9px;
  background: var(--pva-band); border: 1px solid var(--pva-ring);
  font-size: 10px; font-weight: 700; letter-spacing: .2px;
  white-space: nowrap;
}
/* outcome family. The label always states the outcome, so the color is a
   second read, never the only one. */
#pvaView .pva-cat-bad  { background: #FDECEC; border-color: #F0C2C2; color: #A3211F; }
#pvaView .pva-cat-warn { background: #FCF3E2; border-color: #E8D2A4; color: #8A5D0C; }
#pvaView .pva-cat-info { background: #EDF3F7; border-color: #C6D7E2; color: #2C5568; }
/* expanded line items: titled nested sub-table inside a full-width cell */
#pvaView tr.pva-lwrap > td {
  background: var(--pva-band); padding: 6px 12px 10px 30px;
  border-bottom: 1px solid var(--pva-grid);
}
#pvaView .pva-ltable {
  border-collapse: collapse; width: 100%;
  font-variant-numeric: tabular-nums;
}
#pvaView .pva-ltable th, #pvaView .pva-ltable td {
  padding: 4px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--pva-grid);
  font-size: var(--text-eyebrow); color: var(--pva-ink2);
}
#pvaView .pva-ltable th {
  color: var(--pva-mut); font-size: 10px; text-transform: uppercase;
  letter-spacing: .3px; font-weight: 600;
}
#pvaView .pva-ltable th.pva-lbl, #pvaView .pva-ltable td.pva-lbl { text-align: left; }
#pvaView .pva-ltable tr:last-child td { border-bottom: 0; }
#pvaView .pva-ltable td.pva-lsku { font-weight: 600; color: var(--pva-ink); }
#pvaView .pva-ltable td.pva-ldesc {
  font-weight: 400; max-width: 380px; overflow: hidden; text-overflow: ellipsis;
}
#pvaView .pva-ltable td.pva-lreason {
  font-weight: 400; font-size: 10.5px; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: normal;
}
#pvaView .pva-ltable td.pva-lstate {
  font-weight: 400; font-size: 10px; text-transform: lowercase; letter-spacing: .3px;
}

/* ── Footnote / empty / retry ── */
#pvaView .pva-note {
  font-size: 11.5px; color: var(--pva-mut); line-height: 1.55; max-width: 920px;
}
#pvaView .pva-empty {
  background: var(--pva-surface); border: 1px solid var(--pva-ring);
  border-radius: var(--radius); padding: 40px 20px; text-align: center;
  color: var(--pva-ink2); font-size: var(--text-body);
}
#pvaView .pva-retry-btn {
  background: var(--primary-blue); color: #fff; border: 0; border-radius: 4px;
  padding: 6px 14px; font-size: var(--text-eyebrow); font-weight: 600;
  cursor: pointer; font-family: inherit;
}
#pvaView .pva-retry-btn:hover { background: var(--navy-hover); }