/* Панель продавца и графики.
 * Классы .chart*, .barlist*, .ring* использует components/chart.js —
 * без них графики не отрисуются нигде в приложении.
 */

/* ==================== ГРАФИКИ ==================== */

.chart-fig { margin: 0; }
.chart-wrap { position: relative; }
.chart { display: block; overflow: visible; }
.chart__line {
  /* Линия прорисовывается слева направо при появлении графика. */
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: chart-draw 1.1s var(--ease-out) forwards;
}
@keyframes chart-draw { to { stroke-dashoffset: 0; } }

.chart__tip {
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
.chart__tip-day { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.chart__tip-val {
  font-size: var(--fs-sm);
  font-weight: 780;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.chart-cap { margin-top: var(--sp-3); }
.chart-table__toggle {
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--brand-text);
  padding: var(--sp-2) 0;
}
.chart-table { margin-top: var(--sp-2); max-height: 260px; overflow-y: auto; }
.chart-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.chart-table th, .chart-table td {
  text-align: left;
  padding: 7px 4px;
  border-bottom: 1px solid var(--border);
}
.chart-table th { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; }
.chart-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.chart-empty { padding: var(--sp-6) var(--sp-4); text-align: center; }

/* Полосы одноцветные: идентичность несёт подпись строки, а не оттенок —
   так набор читается и в чёрно-белой печати, и при дальтонизме. */
.barlist { display: flex; flex-direction: column; gap: var(--sp-3); }
.barlist__row { display: flex; flex-direction: column; gap: 5px; }
.barlist__row.is-tappable { cursor: pointer; }
.barlist__row.is-tappable:active { opacity: .7; }
.barlist__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.barlist__label { color: var(--text-2); font-weight: 600; flex: 1; min-width: 0; }
.barlist__value {
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.barlist__track {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-2);
  overflow: hidden;
}
.barlist__fill {
  height: 100%;
  border-radius: 4px;
  background: var(--brand);
  transform-origin: left;
  animation: bar-grow .7s var(--ease-spring);
}
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.barlist__sub { margin-top: 1px; }

.ring-wrap { position: relative; display: inline-grid; place-items: center; }
.ring { display: block; }
.ring__center {
  position: absolute;
  text-align: center;
  pointer-events: none;
}
.ring__value {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ring__label { margin-top: 1px; }

/* ==================== ПАНЕЛЬ ==================== */

.sl-calm {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.sl-calm__icon {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--success-bg);
  color: var(--success-500);
  flex: none;
}

.sl-quicks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.sl-quick {
  flex-direction: column;
  gap: 6px;
  min-height: 82px;
  padding: var(--sp-3);
  font-size: var(--fs-sm);
}

/* ==================== ПРИГЛАШЕНИЕ СТАТЬ ПРОДАВЦОМ ==================== */

.sl-hero {
  padding: var(--sp-6) var(--sp-4);
  border-radius: var(--r-xl);
  background: var(--accent-grad-soft);
  border: 1px solid var(--brand-soft-2);
  text-align: center;
}
.sl-hero__art {
  width: 68px; height: 68px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  background: var(--accent-grad);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.sl-hero__title {
  font-size: var(--fs-h1);
  font-weight: 780;
  letter-spacing: -0.03em;
}
.sl-hero__text {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.55;
}

/* ==================== СПИСОК ТОВАРОВ ==================== */

.sp-row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast) linear;
}
.sp-row:active { background: var(--surface-2); }
.sp-row.is-checked { background: var(--brand-soft); }
.sp-row__img { width: 62px; flex: none; }
.sp-row__img .img-box { border-radius: var(--r-sm); }
.sp-row__body { flex: 1; min-width: 0; }
.sp-row__stats {
  display: flex;
  gap: var(--sp-3);
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-wrap: wrap;
}
.sp-row__stats span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
/* Подсказка «тут есть меню». Не кнопка — нажимается вся строка. */
.sp-row__more { color: var(--text-muted); flex: none; display: flex; }

/* Шапка меню товара: что именно сейчас редактируем. */
.sp-menu__head {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.sp-menu__img { width: 54px; flex: none; }
.sp-menu__img .img-box { border-radius: var(--r-sm); }
.sp-menu__body { flex: 1; min-width: 0; }

.sp-check {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: grid;
  place-items: center;
  color: transparent;
  flex: none;
  transition: all var(--t-fast) var(--ease-spring);
}
.sp-check.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.sp-bulk {
  align-items: center;
  gap: var(--sp-2);
}