/* v3-stats.css — «Статистика» по design-canvas/Stats.dc.html (1 в 1). */
.v3s { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 0; }
.v3s-rest { flex-grow: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }

/* ── Шапка: сегмент периода и «Скачать Excel» ── */
.v3s-head { flex-shrink: 0; }
.v3s-seg { display: flex; gap: 3px; padding: 3px; border-radius: 17px; background: var(--t-nested); border: 1px solid var(--t-line); }
.v3s-seg button { white-space: nowrap; border: 0; padding: 8px 14px; border-radius: 14px; font: inherit; font-size: 13.5px;
  font-weight: 650; background: transparent; color: var(--t-ink-2); cursor: pointer; }
.v3s-seg button.on { background: var(--t-surface); color: var(--t-blue-ink); box-shadow: 0 1px 3px rgba(22,26,36,.16); }
.v3s-xls { flex-shrink: 0; display: flex; align-items: center; gap: 7px; white-space: nowrap; height: 40px; padding: 0 18px 0 14px;
  border-radius: 20px; border: 1px solid var(--t-line); background: var(--t-surface); color: var(--t-ink); font: inherit;
  font-size: 14px; font-weight: 600; box-shadow: 0 1px 2px rgba(22,26,36,.06); cursor: pointer; }
.v3s-xls:hover { background: var(--t-row); }
.v3s-xls svg { stroke: var(--t-blue); }

/* ── Плитки ── */
.v3s-kpis { display: flex; gap: 14px; flex-shrink: 0; }
.v3s-kpi { flex: 1 1 0; min-width: 0; padding: 16px 18px; border-radius: 26px; background: var(--t-surface);
  border: 1px solid var(--t-line); box-shadow: var(--sh-panel); display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; }
.v3s-kpi.acc { background: var(--t-blue-tint); border: 1.5px solid rgba(10,95,208,.35); box-shadow: none; }
.v3s-kl { font-size: 13px; font-weight: 700; color: var(--t-ink-3); }
.v3s-kpi.acc .v3s-kl { color: var(--t-blue-ink); }
.v3s-kv { font-size: 30px; font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.v3s-ks { font-size: 13px; color: var(--t-ink-2); }

/* ── Две панели ── */
.v3s-panels { flex-grow: 1; min-height: 0; display: flex; gap: 14px; }
.v3s-main, .v3s-side { display: flex; flex-direction: column; overflow: hidden; }
.v3s-main { flex-grow: 1; min-width: 0; container: v3smain / inline-size; }
.v3s-side { width: clamp(300px, 34.4%, 400px); flex-shrink: 0; }
.v3s-in { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; overflow: auto; flex-grow: 1; scrollbar-width: none; }
.v3s-in::-webkit-scrollbar { display: none; }
.v3s-side .v3s-in { padding: 18px; gap: 12px; }
.v3s-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.v3s-h h3 { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -.015em; flex-grow: 1; color: var(--t-ink); }
.v3s-mh { margin-top: 8px; }
.v3s-leg { display: flex; gap: 12px; font-size: 12.5px; color: var(--t-ink-3); white-space: nowrap; }
.v3s-leg > span { display: flex; align-items: center; gap: 5px; }
.v3s-leg i { width: 10px; height: 10px; border-radius: 3px; }
.v3s-leg i.d { background: #b9d3f5; }
.v3s-leg i.f { background: #e0313f; }
.v3s .r { text-align: right; }

/* ── По месяцам ── */
.v3s-chart { height: 200px; flex-shrink: 0; display: flex; gap: 16px; padding: 4px 6px 0; }
.v3s-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.v3s-cv { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.v3s-bar { flex-grow: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.v3s-bf { background: #e0313f; border-radius: 8px 8px 0 0; min-height: 4px; }
.v3s-bd { background: #b9d3f5; border-radius: 0 0 8px 8px; }
.v3s-bd.top { border-radius: 8px; }
.v3s-col.cur .v3s-bd { background: var(--t-blue-grad); }
.v3s-cl { font-size: 12.5px; font-weight: 650; color: var(--t-ink-3); }
.v3s-col.cur .v3s-cl { color: var(--t-blue-ink); }

/* ── Менеджеры ── */
.v3s-mhead, .v3s-mrow { display: grid; grid-template-columns: minmax(0, 1fr) 60px 70px 60px 110px; gap: 10px; }
.v3s-mhead { padding: 0 14px 6px; font-size: 11.5px; font-weight: 700; color: var(--t-ink-3); }
.v3s-tbl { border-radius: 18px; border: 1px solid var(--t-line); overflow: hidden; flex-shrink: 0; }
.v3s-mrow { align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(60,66,78,.08); font-variant-numeric: tabular-nums; }
.v3s-mn { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3s-mf { font-weight: 650; color: var(--t-ink); }
.v3s-mf.hot { color: #b3202e; }
.v3s-share { display: flex; align-items: center; gap: 6px; }
.v3s-track { flex-grow: 1; height: 5px; border-radius: 3px; background: rgba(60,66,78,.1); display: flex; }
.v3s-track > span { background: #e8890c; border-radius: 3px; }
.v3s-track > span.hot { background: #e0313f; }
.v3s-pct { font-size: 12px; font-weight: 700; width: 34px; text-align: right; flex-shrink: 0; white-space: nowrap; }

/* ── Средний день машины ── */
.v3s-vhead, .v3s-vrow { display: grid; grid-template-columns: 70px repeat(3, minmax(0, 1fr)); gap: 8px; }
.v3s-vhead { padding: 8px 14px; font-size: 11.5px; font-weight: 700; color: var(--t-ink-3); background: var(--t-row); }
.v3s-vrow { align-items: center; padding: 9px 14px; border-bottom: 1px solid rgba(60,66,78,.08); font-variant-numeric: tabular-nums; }
.v3s-vrow .b { font-weight: 650; }
.v3s-vn { display: flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.v3s-vn i { width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0; }

/* ── Срывы повторяются ── */
.v3s-reps { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 22px; background: var(--t-nested); margin-top: 4px; flex-shrink: 0; }
.v3s-caps { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t-ink-3); }
.v3s-hint { font-size: 12.5px; color: var(--t-ink-3); }
.v3s-rep { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--t-surface); cursor: pointer; }
.v3s-rep:hover { background: var(--t-row); }
.v3s-rep.none { cursor: default; color: var(--t-ink-3); }
.v3s-rep.none:hover { background: var(--t-surface); }
.v3s-rt { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.v3s-rt b { font-weight: 700; }
.v3s-rt span { font-size: 12.5px; color: var(--t-ink-3); }
.v3s-rep.none .v3s-rt span { font-size: 14px; }

/* узкая панель (узкий компьютер): у чисел в «Менеджерах» колонки поуже, имени остаётся место */
@container v3smain (max-width: 620px) {
  .v3s-mhead, .v3s-mrow { grid-template-columns: minmax(0, 1fr) 46px 54px 48px 96px; gap: 8px; }
  .v3s-chart { gap: 10px; }
}

/* ── Тёмная тема: светлые тона макета — оттенком ── */
[data-theme="dark"] .v3s-kpi.acc { border-color: rgba(77,163,255,.4); }
[data-theme="dark"] .v3s-bd, [data-theme="dark"] .v3s-leg i.d { background: rgba(77,163,255,.32); }
[data-theme="dark"] .v3s-col.cur .v3s-bd { background: var(--t-blue-grad); }
[data-theme="dark"] .v3s-mf.hot { color: var(--t-bad-ink); }
[data-theme="dark"] .v3s-mrow, [data-theme="dark"] .v3s-vrow { border-bottom-color: rgba(255,255,255,.06); }
[data-theme="dark"] .v3s-track { background: rgba(255,255,255,.1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .v3s-kpi.acc { border-color: rgba(77,163,255,.4); }
  :root:not([data-theme]) .v3s-bd, :root:not([data-theme]) .v3s-leg i.d { background: rgba(77,163,255,.32); }
  :root:not([data-theme]) .v3s-col.cur .v3s-bd { background: var(--t-blue-grad); }
  :root:not([data-theme]) .v3s-mf.hot { color: var(--t-bad-ink); }
  :root:not([data-theme]) .v3s-mrow, :root:not([data-theme]) .v3s-vrow { border-bottom-color: rgba(255,255,255,.06); }
  :root:not([data-theme]) .v3s-track { background: rgba(255,255,255,.1); }
}

/* ── Телефон: MobStats.dc.html (свои классы .v3sm-*; сегмент — общий .v3s-seg) ── */
@media (max-width: 860px) {
  .v3sm { font-size: 15px; line-height: normal; color: var(--t-ink); }
  .v3sm-top { padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 8px; }
  .v3sm-title { margin: 0; font-size: 30px; font-weight: 760; letter-spacing: -.03em; line-height: 1.1; }
  .v3sm-body, .v3sm-rest { display: flex; flex-direction: column; gap: 10px; }
  .v3sm-body { padding: 0 14px 14px; }

  .v3sm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .v3sm-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 13px 14px; box-sizing: border-box;
    border-radius: 20px; background: var(--t-surface); border: 1px solid var(--t-line); }
  .v3sm-kpi.acc { background: var(--t-blue-tint); border: 1.5px solid rgba(10,95,208,.35); }
  .v3sm-kl { font-size: 13px; font-weight: 700; color: var(--t-ink-3); }
  .v3sm-kpi.acc .v3sm-kl { color: var(--t-blue-ink); }
  .v3sm-kv { font-size: 24px; font-weight: 760; letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .v3sm-ks { font-size: 12.5px; color: var(--t-ink-2); }

  .v3sm-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 22px; background: var(--t-surface); }
  .v3sm-h { font-weight: 750; }
  .v3sm-chart { height: 150px; display: flex; gap: 8px; }
  .v3sm-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
  .v3sm-cv { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .v3sm-bar { flex-grow: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
  .v3sm-bf { background: #e0313f; border-radius: 5px 5px 0 0; min-height: 3px; }
  .v3sm-bd { background: #b9d3f5; border-radius: 0 0 5px 5px; }
  .v3sm-bd.top { border-radius: 5px; }
  .v3sm-col.cur .v3sm-bd { background: var(--t-blue-grad); }
  .v3sm-cl { font-size: 11.5px; font-weight: 650; color: var(--t-ink-3); }

  .v3sm-mrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(60,66,78,.08); }
  .v3sm-mn { font-weight: 650; flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v3sm-mt { font-size: 14px; color: var(--t-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .v3sm-mf { min-width: 64px; text-align: right; font-weight: 700; white-space: nowrap; color: var(--t-ink); }
  .v3sm-mf.hot { color: #b3202e; }
  .v3sm-none { padding: 4px 0; color: var(--t-ink-3); }

  [data-theme="dark"] .v3sm-kpi.acc { border-color: rgba(77,163,255,.4); }
  [data-theme="dark"] .v3sm-bd { background: rgba(77,163,255,.32); }
  [data-theme="dark"] .v3sm-col.cur .v3sm-bd { background: var(--t-blue-grad); }
  [data-theme="dark"] .v3sm-mf.hot { color: var(--t-bad-ink); }
  [data-theme="dark"] .v3sm-mrow { border-bottom-color: rgba(255,255,255,.06); }
}
@media (max-width: 860px) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .v3sm-kpi.acc { border-color: rgba(77,163,255,.4); }
  :root:not([data-theme]) .v3sm-bd { background: rgba(77,163,255,.32); }
  :root:not([data-theme]) .v3sm-col.cur .v3sm-bd { background: var(--t-blue-grad); }
  :root:not([data-theme]) .v3sm-mf.hot { color: var(--t-bad-ink); }
  :root:not([data-theme]) .v3sm-mrow { border-bottom-color: rgba(255,255,255,.06); }
}