/* ==========================================================================
   Reports screen — layout only. Every colour / radius / shadow / space comes
   from tokens.css. Shared components (.card .btn .input .table .segment
   .badge .empty .field .stack .row) live in app.css and are reused as-is.
   ========================================================================== */

/* --- sticky range bar ---------------------------------------------------- */
.rep-bar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  align-items: flex-start;
  row-gap: var(--s3);
}
.rep-bar-main {
  display: flex; align-items: center; gap: var(--s5);
  flex-wrap: wrap; min-width: 0;
}
.rep-bar-titles { min-width: 0; }
.rep-range-label {
  font-size: var(--fs-sm); color: var(--text-muted); font-weight: 650;
  white-space: nowrap;
}
.rep-presets { flex-wrap: wrap; }

.rep-bar-side {
  margin-left: auto; display: flex; align-items: center;
  gap: var(--s4); flex-wrap: wrap;
}
.rep-dates { display: flex; align-items: center; gap: var(--s2); }
.rep-date-label { white-space: nowrap; }
.rep-date { width: 158px; min-height: 40px; padding: 0 var(--s3); }
.rep-exports { display: flex; align-items: center; gap: var(--s2); }

/* --- page skeleton ------------------------------------------------------- */
.rep-page {
  display: flex; flex-direction: column; gap: var(--s5);
  max-width: 1440px; margin: 0 auto; width: 100%;
}
.rep-panel { overflow: hidden; }
.rep-panel-body { padding: var(--s5); }
.rep-panel-sub { font-size: var(--fs-sm); font-weight: 650; color: var(--text-muted); }

.rep-loading {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  padding: var(--s10) var(--s5); color: var(--text-muted); font-size: var(--fs-sm);
}

/* skeleton shimmer — a panel is never blank while it loads */
.rep-skel {
  height: 12px; width: 100%; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--cream-100), var(--cream-200), var(--cream-100));
  background-size: 200% 100%;
  animation: rep-pulse 1.3s ease-in-out infinite;
}
.rep-skel.w-40 { width: 40%; }
.rep-skel.w-60 { width: 60%; }
.rep-skel.tall { height: 36px; width: 72%; }
.rep-skel.mid  { height: 24px; width: 56%; }
@keyframes rep-pulse { to { background-position: -200% 0; } }

/* --- KPI tiles ----------------------------------------------------------- */
.rep-kpis {
  display: grid; gap: var(--s4);
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
.rep-kpi {
  display: flex; flex-direction: column; justify-content: center; gap: var(--s1);
  min-height: 108px; padding: var(--s4) var(--s5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.rep-kpi-label {
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .7px;
}
.rep-kpi-value { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.6px; }
.rep-kpi-sub { font-size: var(--fs-xs); color: var(--text-faint); }

.rep-kpi.hero {
  background: linear-gradient(155deg, var(--ink-700), var(--ink-900));
  border-color: var(--ink-700); box-shadow: var(--sh-2);
  color: var(--text-on-dark);
}
.rep-kpi.hero .rep-kpi-label { color: var(--gold-300); }
.rep-kpi.hero .rep-kpi-value { font-size: var(--fs-4xl); color: var(--gold-300); }
.rep-kpi.hero .rep-kpi-sub { color: var(--text-on-dark-muted); }
.rep-kpi.hero .rep-skel {
  background: linear-gradient(90deg, var(--ink-600), var(--ink-700), var(--ink-600));
  background-size: 200% 100%;
}

/* secondary figures — discount + voided */
.rep-minis {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.rep-mini {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface-sunken);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
}
.rep-mini-label { font-size: var(--fs-sm); font-weight: 650; color: var(--text-muted); }
.rep-mini-value { font-size: var(--fs-lg); font-weight: 800; }
.rep-mini-sub { margin-left: auto; font-size: var(--fs-xs); color: var(--text-faint); }
.rep-mini.warn { background: var(--warn-bg); border-color: var(--warn); border-style: solid; }
.rep-mini.warn .rep-mini-value, .rep-mini.warn .rep-mini-label { color: var(--warn); }

/* --- sales trend chart (hand-built, no libraries) ------------------------ */
.rep-chart { --rep-yw: 68px; --rep-h: 212px; }
.rep-chart-body { display: flex; align-items: stretch; gap: var(--s3); }

.rep-yaxis {
  width: var(--rep-yw); flex: none; height: var(--rep-h);
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: right;
}
.rep-ylabel {
  font-size: var(--fs-xs); color: var(--text-faint); line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rep-plot { position: relative; flex: 1; min-width: 0; height: var(--rep-h); }
.rep-grid {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
}
.rep-line { display: block; height: 1px; background: var(--line); }
.rep-line:last-child { background: var(--line-strong); }

.rep-cols {
  position: absolute; inset: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: var(--s1); align-items: stretch;
}
.rep-col {
  display: block; height: 100%; padding: 0; border: 0; background: transparent;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: background var(--t-fast);
}
.rep-col:hover, .rep-col.hot { background: var(--cream-100); }
.rep-track { width: 100%; height: 100%; display: flex; align-items: flex-end; }
.rep-barfill {
  width: 100%; height: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--cream-200);
  transition: height var(--t-med), filter var(--t-fast);
}
.rep-barfill.on {
  min-height: 3px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
}
.rep-col.hot .rep-barfill.on { filter: brightness(1.1); }

.rep-tip {
  position: absolute; top: var(--s2); left: 50%; z-index: 2;
  transform: translateX(-50%); pointer-events: none;
  padding: var(--s2) var(--s3); text-align: center; white-space: nowrap;
  background: var(--ink-800); color: var(--text-on-dark);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  font-size: var(--fs-xs);
}
.rep-tip[hidden] { display: none; }
.rep-tip-label { color: var(--text-on-dark-muted); }
.rep-tip-val {
  font-size: var(--fs-lg); font-weight: 800; color: var(--gold-300);
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.rep-tip-sub { color: var(--text-on-dark-muted); }

/* all-zero range still reads as a deliberate chart, not a broken one */
.rep-zero {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none;
  font-size: var(--fs-sm); font-weight: 650; color: var(--text-faint);
}

.rep-xlabels {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: var(--s1); margin-top: var(--s2);
  padding-left: calc(var(--rep-yw) + var(--s3));
}
.rep-xlabel {
  font-size: var(--fs-xs); color: var(--text-faint);
  text-align: center; white-space: nowrap; overflow: hidden; min-height: 14px;
}

/* --- ranked lists (payments / top items / categories) -------------------- */
.rep-split {
  display: grid; gap: var(--s5); align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rep-rows { display: flex; flex-direction: column; gap: var(--s4); }
.rep-row { display: flex; flex-direction: column; gap: var(--s2); }
.rep-row-head {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-sm); min-width: 0;
}
.rep-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.rep-dot.sm { width: 8px; height: 8px; }
.rep-row-name { font-weight: 650; min-width: 0; }
.rep-row-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rep-row-amt { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-row-pct {
  width: 42px; text-align: right; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.rep-rank {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--cream-100);
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 800;
}
.rep-share {
  height: 8px; border-radius: var(--r-pill);
  background: var(--cream-100); overflow: hidden;
}
.rep-share-fill {
  height: 100%; border-radius: var(--r-pill);
  background: var(--gold-500); transition: width var(--t-med);
}
.rep-share-fill.gold { background: linear-gradient(90deg, var(--gold-400), var(--gold-600)); }

/* --- bill history -------------------------------------------------------- */
.rep-bills-body.is-busy { opacity: .5; pointer-events: none; transition: opacity var(--t-fast); }
.rep-bills-head { flex-wrap: wrap; row-gap: var(--s2); }
.rep-search { max-width: 320px; min-height: 40px; }
.rep-mode { width: 172px; min-height: 40px; }
.rep-table-wrap { max-height: none; overflow-x: auto; }
.rep-table { min-width: 720px; }
.rep-table tbody tr:focus-visible { background: var(--cream-100); }
.rep-pay { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }

.rep-pager {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s5); border-top: 1px solid var(--line);
}
.rep-pager-info { font-size: var(--fs-sm); color: var(--text-muted); }

/* --- bill detail modal --------------------------------------------------- */
.rep-detail-head { display: flex; align-items: center; gap: var(--s3); }
.rep-detail-no { font-size: var(--fs-xl); font-weight: 800; }
.rep-detail-when { font-size: var(--fs-sm); color: var(--text-muted); }
.rep-token {
  text-align: center; padding: var(--s1) var(--s3);
  background: var(--cream-100); border-radius: var(--r-md);
}
.rep-token-cap {
  font-size: var(--fs-xs); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .6px;
}
.rep-token-no { font-size: var(--fs-xl); font-weight: 800; line-height: 1.15; }

.rep-void-note {
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--danger-bg); color: var(--danger); font-size: var(--fs-sm);
}
.rep-lines { font-size: var(--fs-sm); }
.rep-line-code { margin-right: var(--s1); }

.rep-tots {
  display: flex; flex-direction: column; gap: var(--s2);
  padding-top: var(--s3); border-top: 1px solid var(--line);
}
.rep-tot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.rep-tot .num { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.rep-tot.grand {
  font-size: var(--fs-lg); font-weight: 800; color: var(--text);
  padding-top: var(--s2); border-top: 1px solid var(--line);
}
.rep-tot.grand .num { font-weight: 800; }
.rep-detail-meta {
  display: flex; flex-direction: column; gap: var(--s1);
  font-size: var(--fs-sm); color: var(--text-muted);
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1200px) {
  .rep-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .rep-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-kpi.hero { grid-column: 1 / -1; }
  .rep-bar-side { margin-left: 0; width: 100%; }
  .rep-dates { flex: 1; min-width: 0; }
  .rep-date { flex: 1; width: auto; min-width: 0; }
}
@media (max-width: 860px) {
  .rep-split { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .rep-bar { padding: var(--s3) var(--s4); }
  .rep-bar-main { gap: var(--s3); width: 100%; }
  .rep-presets { display: flex; width: 100%; }
  .rep-presets > button { padding: 0 var(--s2); font-size: var(--fs-sm); }
  .rep-exports { width: 100%; }
  .rep-exports .btn { flex: 1; }
  .rep-scroll { padding: var(--s4); }
  .rep-page { gap: var(--s4); }
  .rep-panel-body, .rep-pager { padding: var(--s4); }
  .rep-kpis { grid-template-columns: 1fr; }
  .rep-kpi { min-height: 0; padding: var(--s3) var(--s4); }
  .rep-kpi.hero .rep-kpi-value { font-size: var(--fs-3xl); }
  .rep-chart { --rep-h: 168px; --rep-yw: 50px; }
  .rep-search { max-width: none; flex: 1; min-width: 0; }
  .rep-mode { width: 100%; }
  .rep-pager .btn { flex: 1; }
}