/* Дашборды. Файлы стилей подключаются в templates/base.html по порядку. */

/* ===== Дашборды ===== */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.stat { margin: 0; }
.stat .value { font-size: 34px; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; margin-top: 6px; }
.stat .value.danger { color: var(--danger); }
.stat .unit { font-size: 20px; color: var(--muted); font-weight: 600; margin-left: 2px; }
.chart-card { max-width: 860px; }
.hbars { display: grid; gap: 4px; }
.hbar-row {
  display: grid;
  grid-template-columns: 140px 1fr 110px;
  align-items: center;
  gap: 16px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
}
.hbar-row:hover { background: var(--surface-2); color: var(--text); }
.hbar-row:hover .hbar-fill { filter: brightness(.92); }
.hbar-label { font-weight: 550; color: var(--text-2); }
.hbar-track { height: 22px; display: flex; align-items: center; border-left: 1px solid var(--border-strong); }
.hbar-fill { height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; transition: filter .15s; }
.hbar-value { font-variant-numeric: tabular-nums; }

/* ===== Кольцевая диаграмма «Затраченное время по сотрудникам» ===== */
.chart-card + .chart-card { margin-top: 16px; }
.donut-chart { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; }
.donut { width: 220px; height: 220px; }
/* 2px «зазор» цвета фона между долями */
.donut path { stroke: var(--surface); stroke-width: 2; stroke-linejoin: round; transition: opacity .15s; cursor: default; }
.donut-total { text-anchor: middle; font-size: 26px; font-weight: 750; fill: var(--text); font-variant-numeric: tabular-nums; }
.donut-unit { text-anchor: middle; font-size: 12px; fill: var(--muted); }
/* Наведение на долю или строку легенды — остальные доли бледнеют */
.donut-chart.hovering .donut path:not(.active) { opacity: .3; }
.donut-chart.hovering .donut-legend tr:not(.active) td { color: var(--muted); }
.donut-legend { width: 100%; border-collapse: collapse; }
.donut-legend th, .donut-legend td { padding: 7px 10px; }
.donut-legend td:nth-child(n+2), .donut-legend th:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.donut-legend tbody tr { cursor: default; }
.donut-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 0; }
@media (max-width: 640px) {
  .donut-chart { grid-template-columns: 1fr; justify-items: center; }
}

/* ===== Свои дашборды ===== */
.custom-dashboard { margin-top: 16px; }
.custom-dashboard .card-head .count { text-transform: none; }
.hbar-fill.neutral { background: var(--accent); }
.big-number { padding: 6px 0 4px; }
.big-number .value { font-size: 44px; }
.dashboard-builder { margin-top: 16px; }
.dashboard-builder > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; }
.dashboard-builder > summary::-webkit-details-marker { display: none; }
.dashboard-builder[open] > summary { margin-bottom: 14px; }