/* Дашборд KPI — свои стили поверх ДС. Цвета и размеры — только токены. */
/* Слайды презентации */

.kt-deck {
  min-height: 100dvh;
  padding-top: 74px;
  padding-bottom: 70px;
}

.kt-slide {
  display: none;
}

.kt-slide.is-active {
  display: block;
}

.kt-slide-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--kt-ai-space-8) 20px var(--kt-ai-space-12);
}

/* Заголовок слайда */
.slide-head {
  display: flex;
  align-items: baseline;
  gap: var(--kt-ai-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--kt-ai-space-2);
}

.slide-head h2 {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
}

.slide-sub {
  color: var(--kt-ai-fg-muted);
  font-size: var(--kt-ai-text-md);
  margin-bottom: var(--kt-ai-space-7);
  max-width: 78ch;
}

/* Кольцо NPS */
.nps-block { display: flex; align-items: center; gap: var(--kt-ai-space-5); }

.nps-donut { position: relative; width: 110px; height: 110px; flex-shrink: 0; }

.nps-donut svg { width: 100%; height: 100%; display: block; }

.nps-donut .ring-bg { stroke: var(--kt-ai-border); }
.nps-donut .ring-fg { stroke: var(--kt-ai-brand-blue); stroke-linecap: round; transition: stroke-dashoffset 600ms ease; }

.kt-ai-kpi[data-tone="blue"] { border-color: var(--kt-ai-brand-blue); box-shadow: inset 0 0 0 1px var(--kt-ai-brand-blue); }
.kt-ai-kpi[data-tone="blue"] .label { color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); }
.kt-ai-kpi[data-tone="blue"] .value { color: var(--kt-ai-brand-blue); }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kt-ai-space-5);
  margin-top: var(--kt-ai-space-7);
}

.kpi-row .kt-ai-card { text-align: left; }

.delta {
  font-size: var(--kt-ai-text-2xs);
  font-weight: var(--kt-ai-weight-medium);
  font-variant-numeric: tabular-nums;
}
.delta.ok { color: var(--kt-ai-status-ok-fg); }
.delta.warn { color: var(--kt-ai-status-warn-fg); }

/* Топ-регионы на первом экране */
.regions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--kt-ai-space-4);
}

.region-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--kt-ai-space-4);
  border: 1px solid var(--kt-ai-card-border);
  border-radius: var(--vibe-card-radius);
  background: var(--kt-ai-card-bg);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  text-align: left;
  font: inherit;
}

.region-row:hover { border-color: var(--kt-ai-border-strong); }

.region-row.is-active { border-color: var(--kt-ai-brand-blue); box-shadow: var(--kt-ai-focus-shadow); }

.region-row .r-name { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-medium); }
.region-row .r-val { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); font-variant-numeric: tabular-nums; }

/* Слайдер (динамический график) */
.chart-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--kt-ai-border);
  border-radius: var(--kt-ai-radius-full);
  outline: none;
}

.chart-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kt-ai-bg-elevated);
  border: 2px solid var(--kt-ai-brand-blue);
  cursor: pointer;
  box-shadow: var(--kt-ai-card-shadow);
}

.chart-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kt-ai-bg-elevated);
  border: 2px solid var(--kt-ai-brand-blue);
  cursor: pointer;
  box-shadow: var(--kt-ai-card-shadow);
}

.chart-slider:focus-visible { box-shadow: var(--kt-ai-focus-shadow); }

.slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--kt-ai-text-2xs);
  color: var(--kt-ai-fg-faint);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}

/* Кастомные графики */
.kt-chart { position: relative; }

.cc-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 200px;
  padding-top: 18px;
}

.cc-bars .cc-bar {
  flex: 1;
  min-width: 14px;
  background: var(--kt-ai-chart-blue);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.cc-bars .cc-bar:hover, .cc-bars .cc-bar:focus-visible { opacity: .78; outline: none; }
.cc-bars .cc-bar.is-dim { background: var(--kt-ai-chart-bar-fill); opacity: 1; }
.cc-bars .cc-bar.is-dim:hover { opacity: .9; }

.cc-labels {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.cc-labels span {
  flex: 1;
  min-width: 14px;
  text-align: center;
  font-size: var(--kt-ai-text-2xs);
  color: var(--kt-ai-fg-faint);
  font-variant-numeric: tabular-nums;
}

/* Горизонтальные полосы регионов */
.cc-hbars { display: flex; flex-direction: column; gap: var(--kt-ai-space-4); }

.cc-hbar-row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: center;
  gap: var(--kt-ai-space-4);
}

.cc-hbar-row .h-name { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-medium); }

.cc-hbar-track {
  position: relative;
  height: 20px;
  background: var(--kt-ai-bg-sunken);
  border-radius: 2px;
  overflow: visible;
}

.cc-hbar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--kt-ai-chart-blue);
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.cc-hbar-fill:hover, .cc-hbar-fill:focus-visible { opacity: .78; outline: none; }

.cc-hbar-row .h-val {
  font-size: var(--kt-ai-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--kt-ai-fg);
  min-width: 72px;
  text-align: right;
}

/* Дуги услуг */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--kt-ai-space-5);
}

.service-card { text-align: left; }

.service-head { display: flex; align-items: center; gap: var(--kt-ai-space-3); margin-bottom: var(--kt-ai-space-4); }

.service-ic {
  width: 32px;
  height: 32px;
  border-radius: var(--kt-ai-radius-lg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--kt-ai-primary-subtle);
  color: var(--kt-ai-fg);
}

.service-ic svg { width: 18px; height: 18px; }

.service-name { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-medium); }

.arc-row { display: flex; align-items: center; gap: var(--kt-ai-space-3); margin-top: var(--kt-ai-space-3); }

.arc { width: 120px; height: 72px; flex-shrink: 0; }
.arc svg { width: 100%; height: 100%; display: block; }
.arc .arc-bg { fill: none; stroke: var(--kt-ai-border); stroke-width: 10; }
.arc .arc-fg { fill: none; stroke-width: 10; stroke-linecap: butt; transition: stroke-dashoffset 600ms ease; }

.arc-info { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.arc-info .a-val { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); letter-spacing: -.01em; }
.arc-info .a-sub { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }

/* Навигация слайдов */
.deck-nav {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--kt-ai-space-4);
  background: var(--kt-ai-card-bg);
  border: 1px solid var(--kt-ai-card-border);
  border-radius: var(--kt-ai-radius-full);
  padding: 6px var(--kt-ai-space-4) 6px 6px;
  box-shadow: var(--kt-ai-card-shadow);
  z-index: var(--kt-ai-z-sticky);
}

.deck-dots { display: flex; gap: 6px; }

.deck-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kt-ai-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.deck-dot:hover { background: var(--kt-ai-border-strong); }
.deck-dot.is-active { background: var(--kt-ai-brand-blue); transform: scale(1.25); }

.deck-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--kt-ai-card-border);
  background: var(--kt-ai-bg-elevated);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--kt-ai-fg);
  transition: background 120ms ease, opacity 120ms ease;
}

.deck-arrow:hover { background: var(--kt-ai-bg-hover); }
.deck-arrow:disabled { opacity: .35; cursor: default; }
.deck-arrow svg { width: 16px; height: 16px; }

.deck-counter {
  font-size: var(--kt-ai-text-xs);
  color: var(--kt-ai-fg-muted);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: center;
}

/* Шапка с логотипом */
.page-brand { display: flex; align-items: center; gap: var(--kt-ai-space-3); }
.page-brand img { height: 26px; display: block; }
.page-brand .brand-name { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-medium); }

.period-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.period-chip .ic { display: grid; place-items: center; }
.period-chip .ic svg { width: 14px; height: 14px; }

/* Подпись источника данных */
.slide-foot {
  margin-top: var(--kt-ai-space-9);
  padding-top: var(--kt-ai-space-4);
  border-top: 1px solid var(--kt-ai-divider);
  font-size: var(--kt-ai-text-2xs);
  color: var(--kt-ai-fg-faint);
  display: flex;
  gap: var(--kt-ai-space-4);
  flex-wrap: wrap;
}

/* Адаптив */
@media (max-width: 832px) {
  .cc-hbar-row { grid-template-columns: 110px 1fr auto; }
  .cc-hbar-row .h-name { font-size: var(--kt-ai-text-sm); }
  .slide-head h2 { font-size: 22px; }
  .nps-block { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .kpi-row { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .cc-bars { height: 160px; gap: 4px; }
  .cc-labels span { font-size: 10px; }
  .deck-nav { gap: var(--kt-ai-space-3); padding: 6px var(--kt-ai-space-3) 6px 6px; width: calc(100% - 24px); justify-content: center; }
  .deck-counter { min-width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .nps-donut .ring-fg, .arc .arc-fg, .cc-bars .cc-bar, .cc-hbar-fill, .deck-dot { transition: none; }
}