/* Стили дашборда: только сетка и мелочи. Цвета — токенами ДС, без 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); } }