/* Дашборд розничных продаж — только сетка и отступы; цветов — токены kt-ai */

.kt-ai-topbar {
  position: sticky; top: 0; z-index: var(--kt-ai-z-sticky);
  display: flex; align-items: center; gap: var(--kt-ai-space-6);
  height: 56px; padding: 0 var(--kt-ai-space-8);
  background: var(--kt-ai-bg-elevated);
  border-bottom: 1px solid var(--kt-ai-border);
}
.kt-ai-topbar .crumb { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-faint); }
.kt-ai-topbar .crumb strong { color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-semibold); }

.kt-ai-page-title-block { display: flex; flex-direction: column; gap: var(--kt-ai-space-2); }
.kt-ai-page-title-block .kt-ai-sub { color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm); }

.kt-ai-toolbar { display: flex; align-items: center; gap: var(--kt-ai-space-5); flex-wrap: wrap; }

.kt-ai-kpi-strip { padding: 0; }
.kt-ai-kpi-strip .kt-ai-kpi { flex: 1 1 130px; }
.kt-ai-kpi .value[data-revisit] {
  cursor: pointer; text-decoration: underline dotted;
  text-underline-offset: 3px; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.row-go { color: var(--kt-ai-fg-faint); font-size: var(--kt-ai-text-base); }
.kt-ai-table tr[data-city]:hover { background: var(--kt-ai-bg-soft); }

/* ---- города: строка с мини-баром доли ---- */
.city-cell { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.city-name { font-weight: var(--kt-ai-weight-medium); font-size: var(--kt-ai-text-sm); }
.city-meta { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
.share-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 110px; }
.share-value { font-variant-numeric: tabular-nums; font-size: var(--kt-ai-text-sm); }
.share-track {
  display: block;
  width: 100%; height: 4px; border-radius: var(--kt-ai-radius-full);
  background: var(--kt-ai-bg-active); overflow: hidden;
}
.share-fill { display: block; height: 100%; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-chart-blue); }

.growth-up { color: var(--kt-ai-status-ok-fg); }
.growth-down { color: var(--kt-ai-status-risk-fg); }
.growth-flat { color: var(--kt-ai-fg-muted); }

/* ---- фильтры-чипы ---- */
.kt-ai-filterbar { display: flex; gap: var(--kt-ai-space-3); flex-wrap: wrap; align-items: center; }
.chips-row { display: flex; gap: var(--kt-ai-space-3); flex-wrap: wrap; }

/* ---- график: столбцы ---- */
.kt-ai-chart-card {
  border: 1px solid var(--kt-ai-card-border);
  border-radius: var(--kt-ai-radius-2xl);
  background: var(--kt-ai-card-bg);
  padding: var(--kt-ai-pad-card);
}
.cc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-6); }
.cc-title { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); }
.cc-sub { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); margin-top: 2px; }
.cc-bars { display: flex; align-items: flex-end; gap: 6px; height: 190px; }
.cc-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.cc-bar > i {
  display: block; width: 100%; min-height: 3px;
  background: var(--cc-color, var(--kt-ai-chart-blue));
  border-radius: 2px; opacity: .85;
  transition: opacity var(--kt-ai-dur-fast);
}
.cc-bar:hover > i, .cc-bar[data-kt-tip-open="true"] > i { opacity: 1; }
.cc-axis { display: flex; gap: 6px; margin-top: var(--kt-ai-space-3); }
.cc-axis span { flex: 1 1 0; min-width: 0; text-align: center; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); }

/* ---- сетка карточек на детально-городском экране ---- */
.city-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-stack-block); align-items: start; }
.city-grid .kt-ai-chart-card, .city-grid .kt-ai-card { margin-bottom: 0; }

/* ---- товарная матрица ---- */
.cat-cell { display: flex; flex-direction: column; gap: 2px; }
.cat-name { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-medium); }
.cat-share { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }

/* ---- вывод ---- */
.kt-ai-conclusion { margin-top: 0; padding-top: var(--kt-ai-space-6); }
.kt-ai-conclusion .text { font-size: var(--kt-ai-text-sm); line-height: 1.6; color: var(--kt-ai-fg-muted); max-width: 78ch; }
.kt-ai-conclusion .text + .text { margin-top: var(--kt-ai-space-4); }

/* мини-бар доли позиции в «Топе позиций» */
.cta-bar { display: block; height: 6px; margin-top: 6px; border-radius: var(--kt-ai-radius-full); background: var(--kt-ai-bg-active); overflow: hidden; }
.cta-bar span { display: block; height: 100%; border-radius: var(--kt-ai-radius-full); background: var(--cc-color, var(--kt-ai-chart-green)); }

/* ---- пустое состояние ---- */
.kt-ai-empty { padding: var(--kt-ai-space-11) var(--kt-ai-space-8); text-align: center; color: var(--kt-ai-fg-muted); }
.kt-ai-empty .kt-icon { margin-bottom: var(--kt-ai-space-4); }
.kt-ai-empty p { margin: 0 0 var(--kt-ai-space-4); }

/* ---- мобильная ширина ---- */
@media (max-width: 639.98px) {
  .kt-ai-topbar { padding: 0 var(--kt-ai-space-6); }
  .kt-ai-work-column { padding: var(--kt-ai-space-8) var(--kt-ai-space-5) var(--kt-ai-space-10); }
  .kt-ai-toolbar { flex-direction: column; align-items: stretch; }
  .kt-ai-toolbar .kt-ai-segmented { width: 100%; }
  .kt-ai-toolbar .kt-ai-segmented .seg { flex: 1 1 auto; text-align: center; }
  .city-grid { grid-template-columns: 1fr; }
  .cc-bars { gap: 4px; }
  .cc-axis { gap: 4px; }

  /* на мобильном таблица городов уезжает в горизонтальный скролл */
  .kt-ai-table-wrap { overflow-x: auto; }
  .kt-ai-table { min-width: 560px; }
}