/* ============================================================
   Reports — the pantry dashboard.

   Colour is meaning here, not decoration: an area keeps the same
   colour in the ring, the bars and the dots, so "the gold slice"
   and "Household" are the same thought. Everything is drawn from
   theme variables, so it follows light/dark without a second set
   of rules.
   ============================================================ */

/* one variable per series — the marks below all read --c */
.a-food      { --c: var(--accent); }
.a-bar       { --c: var(--amber); }
.a-prep      { --c: var(--blue); }
.a-household { --c: var(--gold); }
.s-used      { --c: var(--accent); }
.s-toss      { --c: var(--red); }
.s-spend     { --c: var(--blue); }

.cdot {
  display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  background: var(--c, var(--accent)); flex: none; margin-right: 7px;
}

/* ---------- head: blurb on the left, window picker on the right ---------- */
.rep-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.rep-head > div { flex: 1; min-width: 280px; }
.rep-head .page-sub { margin-bottom: 0; max-width: 74ch; }
.rep-range, .rep-seg {
  display: inline-flex; gap: 2px; padding: 3px; flex: none;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 11px;
}
.rep-range button, .rep-seg button {
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  font: inherit; font-size: 12px; font-weight: 650; padding: 6px 11px; border-radius: 8px;
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.rep-range button:hover, .rep-seg button:hover { color: var(--text); }
.rep-range button.on, .rep-seg button.on {
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-card);
}
.rep-seg { padding: 2px; }
.rep-seg button { font-size: 11.5px; padding: 5px 9px; }
.rep-seg.right { margin-left: 8px; }
.rep-card h4 small + .rep-seg.right { margin-left: 8px; }

/* ---------- the five numbers along the top ---------- */
.rep-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.rep-tile {
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface);
  padding: 13px 15px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--shadow-card); text-align: left; font: inherit; color: var(--text);
}
button.rep-tile { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
button.rep-tile:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.rep-tile .rt-top {
  display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
}
.rep-tile .rt-top .ic { width: 13px; height: 13px; }
.rep-tile b {
  font-size: 27px; font-weight: 800; line-height: 1.15; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.rep-tile small { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
.rep-tile.hero {
  background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}
.rep-tile.hero .rt-top, .rep-tile.hero b { color: var(--green-dark); }
.rep-tile.bad .rt-top { color: var(--red); }

/* ---------- the card grid ---------- */
.rep-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
  gap: 14px; align-items: start; margin-bottom: 14px;
}
.rep-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.rep-cols .pcard, .rep-grid .pcard { margin: 0; }
.rep-card .hist-list { max-height: 292px; }
.rep-card .hist-row { gap: 9px; }
/* the product name is the wide, clickable part of every row on this page */
.rep-card .hist-when.name {
  flex: 1; min-width: 0; color: var(--text); cursor: pointer; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center;
}
.rep-card .hist-when.name:hover { color: var(--accent); }
.rep-card .rep-note {
  color: var(--text-muted); font-size: 11.5px; text-align: right; flex: none;
  min-width: 84px; max-width: 132px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rep-card .hist-act { font-size: 11.5px; color: var(--text-soft); font-weight: 600; }
.rep-card .toss-ink { color: var(--amber); font-style: normal; }
.rep-card .helper { color: var(--text-muted); font-size: 12.5px; line-height: 1.55; }
.rep-card .helper b { color: var(--text-soft); }
.rep-line { font-size: 12.5px; color: var(--text-soft); margin-bottom: 12px; line-height: 1.5; }
.rep-line b { color: var(--text); font-weight: 750; font-variant-numeric: tabular-nums; }
.rep-line i { font-style: normal; }
.rep-foot {
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
}
.rep-foot b { color: var(--text-soft); }
.rep-sub-head {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin: 14px 0 4px;
}
.rep-gap {
  margin-top: 12px; padding: 9px 11px; border-radius: 10px; font-size: 11.5px;
  background: var(--surface-3); color: var(--text-muted); line-height: 1.5;
}
.rep-gap b { color: var(--text-soft); }
.rep-gap .ic { width: 13px; height: 13px; vertical-align: -.15em; margin-right: 4px; }
.linkish {
  border: none; background: none; padding: 0; font: inherit; color: var(--accent);
  font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.linkish:hover { color: var(--accent-hover); }

/* ---------- the ring, and its key ---------- */
.rep-donut-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.cdonut { width: 132px; height: 132px; flex: none; }
.cdonut-track { fill: none; stroke: var(--surface-3); stroke-width: 15; }
.cdonut-arc { fill: none; stroke-width: 15; stroke-linecap: butt; }
.cdonut-v {
  text-anchor: middle; font-size: 21px; font-weight: 800; fill: var(--text);
  font-variant-numeric: tabular-nums;
}
.cdonut-l { text-anchor: middle; font-size: 9.5px; font-weight: 600; fill: var(--text-muted); }
.rep-legend { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 150px; }
.rep-legend.tight { flex-direction: row; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.rep-key { display: flex; align-items: center; font-size: 12px; color: var(--text-soft); }
.rep-key b { margin-left: auto; padding-left: 10px; font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; }
.rep-legend.tight .rep-key b { margin-left: 6px; }
.rep-key small { color: var(--text-muted); font-size: 11px; margin-left: 7px; min-width: 30px; text-align: right; }

/* ---------- horizontal breakdown bars ---------- */
.crows { display: flex; flex-direction: column; gap: 6px; }
.crow { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.crow[role="button"] { cursor: pointer; border-radius: 7px; }
.crow[role="button"]:hover .crow-lab { color: var(--accent); }
.crow-lab {
  display: flex; align-items: center; width: 40%; min-width: 0; color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crow-lab small { color: var(--text-muted); font-size: 10.5px; margin-left: 6px; }
.crow-track { flex: 1; height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.crow-track i { display: block; height: 100%; border-radius: 999px; background: var(--c, var(--accent)); }
.crow-v { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); min-width: 62px; text-align: right; }

/* ---------- columns ---------- */
.chart-wrap { display: flex; gap: 8px; align-items: stretch; }
.chart-axis {
  display: flex; flex-direction: column; justify-content: space-between; flex: none;
  font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums;
  padding-bottom: 16px; text-align: right; min-width: 34px;
}
.rbars { display: flex; gap: 3px; align-items: flex-end; flex: 1; min-width: 0; }
.rbar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rbar-stack {
  width: 100%; height: var(--rb-h, 132px); display: flex; flex-direction: column-reverse;
  border-radius: 4px; overflow: hidden; background: var(--surface-3);
}
.rbar-stack i { display: block; width: 100%; background: var(--c, var(--accent)); }
.rbar.nil .rbar-stack { background: var(--surface-2); }
.rbar:hover .rbar-stack { outline: 1.5px solid var(--border-strong); }
.rbar-lab {
  font-size: 9.5px; color: var(--text-muted); height: 12px; line-height: 12px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ---------- the spend line ---------- */
.cline { width: 100%; height: var(--cl-h, 92px); overflow: visible; }
.cline-path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cline-fill { fill: color-mix(in srgb, var(--blue) 13%, transparent); stroke: none; }
.cline-dot { fill: var(--surface); stroke: var(--blue); stroke-width: 2; }
.cline-labs { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin: 4px 0 0 42px; }

.chart-empty {
  padding: 26px 14px; text-align: center; color: var(--text-muted); font-size: 12px;
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: 11px; line-height: 1.6;
}
.chart-empty .ic { width: 13px; height: 13px; vertical-align: -.15em; }

/* ---------- disposal reasons ---------- */
.toss-reasons { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.toss-reason {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber);
}
.toss-reason b { font-weight: 700; }

@media (max-width: 720px) {
  .rep-head .rep-range { width: 100%; overflow-x: auto; }
  /* minmax(0, 1fr), not 1fr: a bare `1fr` track still refuses to go below the
     widest thing in it, and "Finish Ultimate Plus Dishwashing Tablets Lemon
     80 pack" is a 385px product name that never wraps. The whole card was
     coming out 522px wide on a 337px screen, and every bar, ring and row on
     the page ran off the right edge with it. */
  .rep-grid, .rep-cols { grid-template-columns: minmax(0, 1fr); }
  .rep-card .rep-note { display: none; }
  .crow-lab { width: 46%; }

  /* the ring and its key stack rather than sharing a line neither fits on */
  .rep-donut-row { gap: 12px; }
  .cdonut { width: 108px; height: 108px; }

  /* a value column that reserves 62px for "$1,375.85" leaves the label 30px */
  .crow { gap: 7px; }
  .crow-v { min-width: 0; }

  /* a card heading carrying its own By product / Most recent switch runs out
     of line at 320px — let the switch drop under the title instead */
  .rep-card h4 { flex-wrap: wrap; row-gap: 8px; }
}