/* Вкладка «KPI». Префикс kpi-.
   Оформление берётся из токенов Дашборда (--ink/--muted/--line/--pale/--s5/--c1…),
   поэтому вкладка одинаково выглядит во всех трёх палитрах.

   Исключение — три цвета светофора. Зона проекта означает одно и то же
   независимо от палитры, поэтому зелёный/оранжевый/красный заданы явно
   и повторяют заливку исходной Google-таблицы. */

:root{
  --kpi-g:#D9EAD3; --kpi-g-ink:#1E6B3A;
  --kpi-y:#FCE5CD; --kpi-y-ink:#8A5312;
  --kpi-r:#EA9999; --kpi-r-ink:#7E1D1D;
}

#kpi-screen[hidden]{display:none}

/* ---------------------------------------------------------------- шапка */

.kpi-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
/* выбор года — сегментированный переключатель, как .seg в отчёте */
.kpi-seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--line);border:0}
.kpi-seg button{border:0;background:none;color:var(--text);font:400 14px/1.2 var(--font);
  padding:7px 14px;border-radius:8px;cursor:pointer;transition:.14s}
.kpi-seg button:hover{color:var(--ink)}
.kpi-seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(24,36,73,.12)}

/* сводка */
.kpi-sum{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px}
.kpi-sum div{background:#fff;border-radius:14px;padding:16px 18px;box-shadow:var(--wba-shadow,0 12px 30px rgba(24,36,73,.07))}
.kpi-sum span{display:block;font-size:13px;color:var(--muted);margin-bottom:3px}
.kpi-sum b{font-size:26px;font-weight:600;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi-sum div.g b{color:var(--kpi-g-ink)}
.kpi-sum div.y b{color:var(--kpi-y-ink)}
.kpi-sum div.r b{color:var(--kpi-r-ink)}

/* фильтр по исполнителям */
.kpi-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}

/* ---------------------------------------------------------------- матрица */

.kpi-list{background:#fff;border:0;border-radius:14px;overflow:hidden;margin-bottom:18px;box-shadow:var(--wba-shadow,0 12px 30px rgba(24,36,73,.07))}
.kpi-scroll{overflow-x:auto}
.kpi-head,.kpi-row-main{display:grid;
  grid-template-columns:minmax(190px,1.6fr) repeat(var(--kpi-mn),minmax(38px,1fr)) minmax(74px,.8fr);
  gap:2px;align-items:center;min-width:760px}
.kpi-head{padding:12px 16px 10px;background:#fff;border-bottom:2px solid var(--blue);
  font-size:13px;font-weight:600;color:var(--ink)}
.kpi-head span:not(:first-child){text-align:center}
.kpi-head span:last-child{text-align:right}

.kpi-row{border-bottom:1px solid var(--wba-row,#e8edf6)}
.kpi-row:last-child{border-bottom:none}
.kpi-row-main{width:100%;padding:9px 16px;border:0;background:transparent;font:inherit;color:inherit;
  text-align:left;cursor:pointer}
.kpi-row-main:hover{background:var(--pale)}
.kpi-row-main:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

.kpi-name{display:block;font-size:14.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi-who{display:block;font-size:12px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* ячейка месяца — квадрат светофора */
.kpi-z{display:block;margin:0 auto;width:30px;height:26px;border-radius:5px;
  font-size:12px;font-weight:800;line-height:26px;text-align:center;color:var(--muted);
  background:var(--s5);font-variant-numeric:tabular-nums}
.kpi-z.g{background:var(--kpi-g);color:var(--kpi-g-ink)}
.kpi-z.y{background:var(--kpi-y);color:var(--kpi-y-ink)}
.kpi-z.r{background:var(--kpi-r);color:var(--kpi-r-ink)}
.kpi-z.e{background:transparent;color:var(--s6)}
.kpi-avg{text-align:right;font-size:12.5px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------------------------------------------------------- детали */

.kpi-det{padding:4px 16px 18px;background:var(--pale);border-top:1px solid var(--wba-row,#e8edf6)}
.kpi-det[hidden]{display:none}
.kpi-links{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 10px;font-size:12px}
.kpi-links a{color:var(--blue);text-decoration:none;font-weight:600}
.kpi-links a:hover{text-decoration:underline}
.kpi-links span{color:var(--muted)}

.kpi-tw{overflow-x:auto}
table.kpi-t{width:100%;border-collapse:collapse;min-width:640px;background:#fff;
  border:0;border-radius:10px;overflow:hidden}
table.kpi-t th,table.kpi-t td{padding:8px 10px;font-size:13px;text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--wba-row,#e8edf6);font-variant-numeric:tabular-nums}
table.kpi-t thead th{background:#fff;color:var(--ink);font-weight:600;font-size:12.5px;border-bottom:2px solid var(--blue)}
table.kpi-t th.l,table.kpi-t td.l{text-align:left}
table.kpi-t tbody tr:last-child td{border-bottom:none}
table.kpi-t tbody tr:hover{background:var(--pale)}
table.kpi-t td.m{font-weight:700;color:var(--ink)}
.kpi-d{font-weight:700}
.kpi-d.ok{color:var(--kpi-g-ink)}
.kpi-d.bad{color:var(--kpi-r-ink)}
.kpi-t .kpi-z{width:26px;height:22px;line-height:22px;font-size:11px;margin:0 0 0 auto}

/* ---------------------------------------------------------------- архив */

.kpi-arch{margin-top:6px}
.kpi-arch-h{display:flex;align-items:center;gap:9px;border:0;background:transparent;cursor:pointer;
  padding:6px 0;font:600 14px/1 var(--font);color:var(--muted)}
.kpi-arch-h:hover{color:var(--ink)}
.kpi-arch-h i{font-style:normal;font-size:12px;font-weight:600;background:var(--soft);color:var(--ink);
  border-radius:6px;padding:1px 7px}
.kpi-arch-h b{font-size:11px;transition:.15s}
.kpi-arch-h[aria-expanded="true"] b{transform:rotate(90deg);display:inline-block}

.kpi-note{padding:26px 16px;text-align:center;color:var(--muted)}

@media(max-width:900px){
  .kpi-sum{grid-template-columns:repeat(2,1fr)}
}

/* План вводится руками: поле ввода вместо текста. Узкое, без рамки — пока не наведёшь. */
.kpi-t td.kpi-plan{padding:2px 6px}
.kpi-in{width:100%;max-width:110px;box-sizing:border-box;padding:4px 6px;border:1px solid transparent;
  border-radius:6px;background:transparent;color:inherit;font:inherit;text-align:right;
  font-variant-numeric:tabular-nums}
.kpi-in:hover{border-color:var(--line)}
.kpi-in:focus{outline:none;border-color:var(--blue);background:#fff}
.kpi-in::placeholder{color:var(--muted);opacity:.6}
.kpi-in.saving{opacity:.5}
.kpi-in.bad{border-color:#c0392b;background:#fff5f4}