/* ============================================================
   BikeBid — Reports page
   Builds on app.css (sidebar, .card, .btn, colours)
   ============================================================ */

.main.reports{ }

/* page header */
.rpage-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px; flex-wrap:wrap; }
.rpage-head h1{ font-size:36px; font-weight:800; letter-spacing:-.028em; margin:0 0 7px; }
.rpage-head p{ margin:0; color:var(--ink-3); font-size:15px; }
.rhead-acts{ display:flex; gap:12px; flex:none; align-items:center; }

/* date range pill */
.range-pick{ position:relative; }
.range-btn{ display:flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid var(--line);
  border-radius:12px; background:var(--card); font-family:inherit; font-weight:600; font-size:14px; color:var(--ink); cursor:pointer; }
.range-btn:hover{ background:var(--bg); }
.range-btn i[data-lucide]{ width:17px; height:17px; color:var(--ink-3); }
.range-btn .cal{ color:var(--blue); }
.range-btn .chev{ margin-left:2px; }
.range-menu{ position:absolute; right:0; top:calc(100% + 8px); background:var(--card); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 16px 40px rgba(16,24,40,.16); padding:7px; min-width:210px; display:none; z-index:200; }
.range-menu.open{ display:block; }
.range-menu button{ width:100%; text-align:left; padding:10px 12px; border:none; background:transparent; border-radius:9px;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer; }
.range-menu button:hover{ background:var(--bg); }
.range-menu button.active{ background:var(--blue-50); color:var(--blue); }

.btn.compact{ padding:12px 18px; font-size:14px; }
.btn.compact i[data-lucide]{ width:18px; height:18px; }

/* ===== KPI tiles ===== */
.kpis{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.kpi{ padding:18px; }
.kpi .kico{ width:38px; height:38px; border-radius:10px; background:var(--blue-50); color:var(--blue);
  display:flex; align-items:center; justify-content:center; }
.kpi .kico i[data-lucide]{ width:19px; height:19px; }
.kpi .klbl{ font-size:12.5px; color:var(--ink-3); font-weight:600; margin:13px 0 5px; }
.kpi .kbig{ font-size:28px; font-weight:800; letter-spacing:-.025em; line-height:1; }
.kpi .kdelta{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; margin-top:9px; white-space:nowrap; min-width:0; }
.kpi .kdelta .pct{ display:inline-flex; align-items:center; gap:2px; flex:none; }
.kpi .kdelta.up .pct{ color:var(--green); }
.kpi .kdelta.down .pct{ color:var(--red); }
.kpi .kdelta .vs{ color:var(--ink-4); font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.kpi .kdelta i[data-lucide]{ width:13px; height:13px; }

/* ===== chart cards ===== */
.card-h2{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.card-h2 .ttl{ display:flex; align-items:center; gap:7px; font-size:18px; font-weight:700; }
.card-h2 .ttl i[data-lucide]{ width:15px; height:15px; color:var(--ink-4); }

/* granularity select */
.gsel{ appearance:none; -webkit-appearance:none; font-family:inherit; font-weight:600; font-size:13px; color:var(--ink-2);
  background:var(--card); border:1px solid var(--line); border-radius:9px; padding:7px 30px 7px 12px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; }
.gsel:focus{ outline:none; border-color:var(--blue); }

/* trend + donut row */
.charts-row{ display:grid; grid-template-columns:1.62fr 1fr; gap:22px; margin-bottom:24px; align-items:stretch; }
.chart-card{ padding:22px 24px; display:flex; flex-direction:column; }

.legend{ display:flex; gap:18px; margin:14px 0 6px; }
.legend .li{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink-2); }
.legend .dot{ width:18px; height:5px; border-radius:3px; }
.legend .dot.won{ background:var(--green); }
.legend .dot.lost{ background:var(--red); }
.legend .dot.active{ background:var(--blue); }

.trend-wrap{ flex:1; min-height:0; }
.trend-wrap svg{ width:100%; height:auto; display:block; }
.gridline{ stroke:var(--line); stroke-width:1; stroke-dasharray:3 4; }
.axis-lbl{ fill:var(--ink-4); font-size:11px; font-family:inherit; font-weight:600; }
.tdot{ fill:#fff; stroke-width:2; }

/* donut */
.donut-card{ display:flex; flex-direction:column; }
.donut-body{ display:flex; align-items:center; gap:18px; flex:1; }
.donut-wrap{ position:relative; flex:none; width:188px; height:188px; }
.donut-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-center .n{ font-size:30px; font-weight:800; letter-spacing:-.02em; }
.donut-center .l{ font-size:11.5px; color:var(--ink-3); font-weight:600; margin-top:2px; }
.donut-legend{ flex:1; min-width:0; }
.dl-row{ display:flex; align-items:center; gap:9px; padding:7px 0; }
.dl-row .dd{ width:11px; height:11px; border-radius:50%; flex:none; }
.dl-row .dd.won{ background:var(--green); }
.dl-row .dd.lost{ background:var(--red); }
.dl-row .nm{ font-weight:600; font-size:14px; }
.dl-row .val{ margin-left:auto; font-weight:700; font-size:13.5px; color:var(--ink-2); }
.dl-sep{ height:1px; background:var(--line-2); margin:12px 0; }
.dl-win{ display:flex; align-items:center; justify-content:space-between; }
.dl-win .k{ font-weight:600; font-size:14px; }
.dl-win .v{ font-weight:800; font-size:18px; color:var(--green); }

/* ===== bottom row ===== */
.bottom-row{ display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:22px; align-items:start; }

/* bar chart */
.bars-wrap{ margin-top:18px; }
.bars-wrap svg{ width:100%; height:auto; display:block; }
.bar-val{ fill:var(--ink); font-size:13px; font-weight:800; font-family:inherit; text-anchor:middle; }
.bar-cat{ fill:var(--ink-3); font-size:12px; font-weight:600; font-family:inherit; text-anchor:middle; }
.bar-axis{ fill:var(--ink-4); font-size:11px; font-weight:600; font-family:inherit; text-anchor:end; }

/* wholesalers table */
.rwt{ width:100%; border-collapse:collapse; margin-top:8px; }
.rwt th{ text-align:left; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-4);
  padding:0 0 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.rwt th.num, .rwt td.num{ text-align:right; padding-left:10px; }
.rwt td{ padding:13px 0; border-bottom:1px solid var(--line-2); font-size:13.5px; }
.rwt tr:last-child td{ border-bottom:none; }
.rwt .wn{ font-weight:700; }
.rwt .num{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink-2); }
.rwt .wr{ font-weight:800; color:var(--green); }
.rwt .ho{ font-weight:800; }
.rwt-foot{ display:flex; align-items:center; justify-content:center; gap:8px; color:var(--blue); font-weight:700;
  font-size:14px; padding-top:18px; cursor:pointer; }
.rwt-foot i[data-lucide]{ width:16px; height:16px; }
.empty-state{ padding:30px 10px; text-align:center; color:var(--ink-4); font-size:13px; font-weight:600; }

/* recent activity */
.ract{ display:flex; flex-direction:column; }
.ract .ri{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-2); }
.ract .ri:last-child{ border-bottom:none; }
.ract .rico{ width:34px; height:34px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center; }
.ract .rico.won{ background:#fef3c7; color:#b45309; }
.ract .rico.created{ background:var(--blue-50); color:var(--blue); }
.ract .rico.offer{ background:#ede9fe; color:#7c3aed; }
.ract .rico.lost{ background:#fee2e2; color:var(--red); }
.ract .rico i[data-lucide]{ width:16px; height:16px; }
.ract .rt{ font-size:13.5px; font-weight:700; line-height:1.25; }
.ract .rs{ font-size:12.5px; color:var(--ink-3); margin-top:1px; }
.ract .rdate{ margin-left:auto; text-align:right; flex:none; }
.ract .rdate .d{ font-size:12px; color:var(--ink-3); font-weight:600; }
.ract .rdate .t{ font-size:11.5px; color:var(--ink-4); }

/* footer note */
.rfoot-note{ text-align:center; color:var(--ink-4); font-size:12.5px; margin:30px 0 8px; }

@media (max-width:1280px){
  .kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .charts-row{ grid-template-columns:1fr; }
  .bottom-row{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}