/* ─── FUN Padel · Продажи — Sales-specific styles ──────────────────────────── */

/* ── Grid layouts ─────────────────────────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:1.7fr 1fr;gap:16px}
.grid2--equal{grid-template-columns:1fr 1fr}

/* ── Chart card ───────────────────────────────────────────────────────────── */
.chart-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:22px 24px;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:16px;
}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chart-title{font-size:14px;font-weight:700}

/* ── Segment switcher ─────────────────────────────────────────────────────── */
.seg-ctrl{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex-shrink:0}
.seg-btn{
  padding:5px 13px;border:none;background:none;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);
  cursor:pointer;transition:background .12s,color .12s;
}
.seg-btn:not(:first-child){border-left:1px solid var(--line)}
.seg-btn--active{background:var(--graphite);color:#fff}

/* ── Area chart SVG ───────────────────────────────────────────────────────── */
.area-wrap{position:relative}
.area-svg{width:100%;height:auto;display:block;overflow:visible}
.area-grid-line{stroke:var(--line-soft);stroke-width:1}
.area-grid-label{
  font-family:'IBM Plex Mono',monospace;font-size:10px;
  fill:var(--ink-faint);text-anchor:end;
}
.area-x-label{
  font-family:'Manrope',system-ui,sans-serif;font-size:10.5px;
  fill:var(--ink-faint);text-anchor:middle;
}

/* ── Donut chart ──────────────────────────────────────────────────────────── */
.donut-wrap{display:flex;align-items:center;gap:20px}
.donut-svg{flex-shrink:0;width:140px;height:140px}
.donut-center{
  font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:13px;font-weight:600;fill:var(--ink);text-anchor:middle;dominant-baseline:middle;
}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:9px}
.donut-item{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.donut-item-left{display:flex;align-items:center;gap:8px}
.donut-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.donut-name{color:var(--ink-soft)}
.donut-pct{
  font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:12.5px;font-weight:600;color:var(--ink-faint);
}

/* ── Category bars ────────────────────────────────────────────────────────── */
.cat-bars{display:flex;flex-direction:column;gap:11px}
.cat-row{display:flex;align-items:center;gap:10px}
.cat-name{font-size:13px;color:var(--ink-soft);width:90px;flex-shrink:0;text-align:right}
.cat-track{flex:1;height:8px;background:var(--line-soft);border-radius:4px;overflow:hidden}
.cat-fill{height:100%;border-radius:4px;background:var(--accent);transition:width .4s ease}
.cat-val{
  font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:12.5px;font-weight:500;color:var(--ink-soft);
  width:68px;flex-shrink:0;text-align:right;
}

/* ── Top products list ────────────────────────────────────────────────────── */
.top-list{display:flex;flex-direction:column;gap:10px}
.top-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px}
.top-item:hover{background:var(--line-soft)}
.top-rank{
  width:24px;height:24px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;flex-shrink:0;
  background:var(--line-soft);color:var(--ink-faint);
}
.top-rank--1{background:var(--graphite);color:#fff}
.top-info{flex:1;min-width:0}
.top-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.top-meta{font-size:12px;color:var(--ink-faint)}
.top-rev{
  font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:1100px){
  .grid2{grid-template-columns:1fr;gap:14px}
  .grid2--equal{grid-template-columns:1fr}
}
@media(max-width:640px){
  .cat-name{width:70px}
  .donut-wrap{flex-direction:column}
  .donut-svg{width:120px;height:120px}
}