dashbord/style.css

/* Стили дашборда: только сетка и мелочи. Цвета — токенами ДС, без hex. */

.dash-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--kt-ai-space-8) var(--kt-ai-space-5) var(--kt-ai-space-11);
}

.dash-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--kt-ai-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--kt-ai-space-6);
}

.dash-title { display: flex; flex-direction: column; gap: var(--kt-ai-space-2); }
.dash-title h1 {
  margin: 0;
  font-size: var(--kt-ai-text-2xl);
  font-weight: var(--kt-ai-weight-semibold);
  letter-spacing: -.02em;
}

.dash-actions { display: flex; align-items: center; gap: var(--kt-ai-space-4); flex-wrap: wrap; }

/* ---------- KPI ---------- */
.kpi-strip {
  display: grid;
  gap: var(--kt-ai-space-4);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  margin-bottom: var(--kt-ai-space-6);
}
.kpi-strip .kt-ai-kpi {
  background: var(--kt-ai-card-bg);
  border: 1px solid var(--kt-ai-card-border);
  border-radius: var(--kt-ai-radius-2xl);
  box-shadow: var(--kt-ai-card-shadow);
  padding: var(--kt-ai-space-6) var(--kt-ai-space-6);
  gap: var(--kt-ai-space-1);
}
.kpi-strip .kt-ai-kpi .value { font-size: var(--kt-ai-text-xl); }
.kpi-strip .kt-ai-kpi .hint { color: var(--kt-ai-fg-faint); }
.delta { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.delta[data-tone="ok"] { color: var(--kt-ai-status-ok-fg); }
.delta[data-tone="risk"] { color: var(--kt-ai-status-risk-fg); }
.delta .kt-icon { width: 12px; height: 12px; }

/* ---------- Линейный график ---------- */
.line-chart-wrap { position: relative; }
.kt-line { display: block; width: 100%; height: 208px; }
.kt-line .grid line { stroke: var(--kt-ai-border); stroke-width: 1; }
.kt-line .line {
  stroke: var(--kt-ai-chart-blue);
  stroke-width: 2.5;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.kt-line .area { fill: var(--kt-ai-primary-subtle); opacity: .35; }
.kt-line circle.pt {
  fill: var(--kt-ai-card-bg);
  stroke: var(--kt-ai-chart-blue);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.kt-line circle.pt:hover { fill: var(--kt-ai-chart-blue); }
.cc-axis[data-line="true"] { justify-content: space-between; }
.cc-axis[data-line="true"] span { flex: 0 1 auto; max-width: 90px; }

/* ---------- Сетка блоков ---------- */
.charts-grid { display: grid; grid-template-columns: 1fr; gap: var(--kt-ai-space-5); margin-bottom: var(--kt-ai-space-6); }
.charts-grid .cc-bars { min-height: 120px; }
.charts-grid .cc-bar { --bar-w: var(--bar-w, 24px); }
.charts-grid .cc-bar > i { width: var(--bar-w); margin: 0 auto; }
.charts-grid .cc-axis { display: none; }

.block-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kt-ai-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--kt-ai-space-3);
}
.block-title .kt-ai-label { margin: 0; }

/* ---------- Топ сотрудников ---------- */
.top-list { display: flex; flex-direction: column; }
.top-row {
  display: grid;
  grid-template-columns: 28px minmax(140px, 26%) 1fr auto;
  gap: var(--kt-ai-space-4);
  align-items: center;
  padding: var(--kt-ai-space-4) 0;
  border-bottom: 1px solid var(--kt-ai-divider);
}
.top-row:last-child { border-bottom: none; }
.top-name { font-size: var(--kt-ai-text-sm); min-width: 0; }
.top-name .sub { display: block; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); }
.top-bar { height: 8px; border-radius: 4px; background: var(--kt-ai-bg-sunken); overflow: hidden; }
.top-bar i { display: block; height: 100%; border-radius: 4px; background: var(--kt-ai-chart-blue); }
.top-val { font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); font-variant-numeric: tabular-nums; }

/* ---------- Тулбар над таблицей ---------- */
.dash-toolbar {
  display: flex;
  align-items: center;
  gap: var(--kt-ai-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--kt-ai-space-5);
}
.dash-toolbar .kt-ai-input { width: min(280px, 100%); }

/* ---------- Таблица ---------- */
.kt-ai-table th.num,
.kt-ai-table thead th:has(.th-sort) { text-align: right; }
.rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  border-radius: var(--kt-ai-radius-tag);
  background: var(--kt-ai-bg-active);
  color: var(--kt-ai-fg-muted);
  font-size: var(--kt-ai-text-2xs);
  font-weight: var(--kt-ai-weight-semibold);
  font-variant-numeric: tabular-nums;
}
tr[data-top="true"] .rank { background: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); }

.progress-cell { display: flex; flex-direction: column; gap: 6px; min-width: 132px; }
.progress-line { display: flex; align-items: center; gap: var(--kt-ai-space-3); }
.progress-track { flex: 1; height: 6px; border-radius: 3px; background: var(--kt-ai-bg-sunken); overflow: hidden; }
.progress-track i { display: block; height: 100%; border-radius: 3px; background: var(--kt-ai-chart-blue); }
.progress-num { font-size: var(--kt-ai-text-2xs); font-variant-numeric: tabular-nums; color: var(--kt-ai-fg-muted); }
tr[data-top="true"] .progress-track i { background: var(--kt-ai-primary); }

/* ---------- Подвал ---------- */
.dash-footer {
  margin-top: var(--kt-ai-space-10);
  display: flex;
  align-items: center;
  gap: var(--kt-ai-space-4);
  flex-wrap: wrap;
  color: var(--kt-ai-fg-faint);
  font-size: var(--kt-ai-text-2xs);
  border-top: 1px solid var(--kt-ai-border);
  padding-top: var(--kt-ai-space-5);
}

/* ---------- Адаптив ---------- */
@media (min-width: 860px) {
  .charts-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 639px) {
  .dash-title-row { flex-direction: column; align-items: stretch; }
  .dash-actions { justify-content: space-between; }
  .dash-toolbar .kt-ai-input { width: 100%; }
  .dash-toolbar .kt-ai-select-wrap { min-width: 0; width: 100%; }
  .top-row { grid-template-columns: 24px minmax(110px, 1fr); }
  .top-bar, .top-val { display: none; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}