dashbord-roznichnyh-prodazh-7/style.css

/* Дашборд розничных продаж — только сетка, отступы и мелкие детали.
   Основные стили — из дизайн-системы (kt-ai-*) и vibe-theme.css. */

/* Шапка приложения (topbar) */
.app-shell {
  min-height: 100dvh;
  background: var(--kt-ai-bg);
  color: var(--kt-ai-fg);
  font-family: var(--kt-ai-font-sans);
  font-size: var(--kt-ai-text-sm);
  line-height: var(--kt-ai-leading-normal);
  -webkit-font-smoothing: antialiased;
}
.app-topbar {
  position: sticky;
  top: 0;
  z-index: var(--kt-ai-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--kt-ai-space-4);
  padding: var(--kt-ai-space-4) var(--kt-ai-space-8);
  background: var(--kt-ai-bg-elevated);
  border-bottom: 1px solid var(--kt-ai-border);
}
.app-topbar .brand {
  display: flex;
  align-items: center;
  gap: var(--kt-ai-space-4);
  min-width: 0;
}
.app-topbar .brand img {
  height: 26px;
  width: auto;
  flex-shrink: 0;
}
.app-topbar .brand .nm {
  font-size: var(--kt-ai-text-md);
  font-weight: var(--kt-ai-weight-semibold);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-topbar .spacer { flex: 1; }

.app-content {
  max-width: var(--kt-ai-content-wide);
  margin: 0 auto;
  padding: var(--kt-ai-space-8);
}

/* Панель фильтров */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--kt-ai-space-5);
  margin-bottom: var(--kt-ai-space-7);
}
.filterbar .kt-ai-field {
  margin-bottom: 0;
  min-width: 130px;
}
.filterbar .field-period { flex: 1 1 170px; max-width: 220px; }
.filterbar .field-group { flex: 1 1 220px; max-width: 300px; }
.filterbar .field-search { flex: 2 1 260px; }

/* Кастомная ячейка KPI — карточкой с очень мягкой тенью (стандартный стиль) */
.kt-ai-kpi-strip[data-cards="true"] .kt-ai-kpi {
  padding: var(--kt-ai-space-5);
  border: 1px solid var(--kt-ai-border);
  border-radius: var(--kt-ai-radius-xl);
  background: var(--kt-ai-bg-elevated);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

/* Тона значений в KPI */
.value.up { color: var(--kt-ai-status-ok-fg); }
.value.down { color: var(--kt-ai-status-risk-fg); }

/* Тона в таблице */
.tone { display: inline-block; margin-left: var(--kt-ai-space-2); font-size: var(--kt-ai-text-2xs); }
.tone.ok { color: var(--kt-ai-status-ok-fg); }
.tone.warn { color: var(--kt-ai-status-warn-fg); }
.tone.risk { color: var(--kt-ai-status-risk-fg); }
.tone.up { color: var(--kt-ai-status-ok-fg); }
.tone.down { color: var(--kt-ai-status-risk-fg); }
.tone.flat { color: var(--kt-ai-fg-faint); }
td .tone { margin-left: var(--kt-ai-space-2); }

/* Сетка экранов */
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--kt-ai-space-7);
  align-items: start;
}
.dash-col-main {
  display: flex;
  flex-direction: column;
  gap: var(--kt-ai-space-7);
  min-width: 0;
}
.dash-col-side {
  position: sticky;
  top: var(--kt-ai-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--kt-ai-space-6);
}

/* Заголовок карточки с деталями */
.detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kt-ai-space-4);
  padding: var(--kt-ai-space-5) var(--kt-ai-space-6);
  border-bottom: 1px solid var(--kt-ai-border);
}

/* Легенда линейного графика */
.chart-legend {
  display: flex;
  align-items: center;
  gap: var(--kt-ai-space-5);
  flex-shrink: 0;
}
.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--kt-ai-space-3);
  font-size: var(--kt-ai-text-2xs);
  color: var(--kt-ai-fg-muted);
  white-space: nowrap;
}
.chart-legend i {
  width: 10px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

/* Донат */
.donut-flex {
  display: flex;
  gap: var(--kt-ai-space-6);
  align-items: center;
}
.donut-legend { flex: 1; min-width: 0; }
.donut-legend-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto 44px;
  gap: var(--kt-ai-space-3);
  align-items: baseline;
  padding: 4px 0;
  font-size: var(--kt-ai-text-xs);
  border-bottom: 1px solid var(--kt-ai-border);
}
.donut-legend-row:last-child { border-bottom: none; }
.donut-legend-row .dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  align-self: center;
}
.donut-legend-row .nm {
  font-size: var(--kt-ai-text-xs);
  color: var(--kt-ai-fg-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.donut-legend-row .val {
  font-weight: var(--kt-ai-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.donut-legend-row .pct {
  text-align: right;
  color: var(--kt-ai-fg-faint);
  font-variant-numeric: tabular-nums;
}

/* Подвал */
.app-foot {
  max-width: var(--kt-ai-content-wide);
  margin: 0 auto;
  padding: var(--kt-ai-space-6) var(--kt-ai-space-8) var(--kt-ai-space-9);
  display: flex;
  align-items: center;
  gap: var(--kt-ai-space-4);
  font-size: var(--kt-ai-text-2xs);
  color: var(--kt-ai-fg-faint);
}
.app-foot .spacer { flex: 1; }

/* ---------- Адаптив ---------- */

@media (max-width: 1080px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-col-side {
    position: static;
    order: -1;
  }
}

@media (max-width: 720px) {
  .app-topbar { padding: var(--kt-ai-space-4) var(--kt-ai-space-5); }
  .app-content { padding: var(--kt-ai-space-5); padding-top: var(--kt-ai-space-6); }
  .filterbar { gap: var(--kt-ai-space-4); }
  .filterbar .field-period { flex: 1 1 42%; max-width: none; }
  .filterbar .field-group { flex: 1 1 55%; max-width: none; }
  .filterbar .field-search { flex: 1 1 100%; }
  .kt-ai-banner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .app-topbar .brand .nm { font-size: var(--kt-ai-text-sm); }
}