/* styles/pages/kpi-v2.css — «KPI v2» (#/kpi-v2). Префикс .kv2-; общие куски (.tv2-top, плитки, кнопки, вкладки) берём из tasks-v2.css.
   Только токены скина (classic | noir), ни одного hex. Движение только функциональное; prefers-reduced-motion - без переходов. */

.kv2 { --kv2-cols: minmax(190px, 1.25fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(130px, .9fr) 92px 236px; }

/* период */
.kv2-nav { display: inline-flex; align-items: center; gap: 6px; }
.kv2-nav__l { min-width: 128px; text-align: center; font: 600 12px var(--font-sans); color: var(--text-secondary); }
.kv2-nav .tv2-btn { padding: 7px 11px; font-size: 14px; line-height: 1; }

/* таблица */
.kv2-th, .kv2-row { display: grid; grid-template-columns: var(--kv2-cols); gap: 16px; align-items: center; padding: 0 20px; }
.kv2-th { padding-top: 10px; padding-bottom: 10px; background: var(--tv2-row); font: 700 10px var(--font-sans); letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); }
.kv2-row { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--tv2-line); transition: background .15s; }
.kv2-row:hover, .kv2-row.is-open { background: var(--tv2-row); }
.kv2-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kv2-who > div { min-width: 0; }
.kv2-who b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv2-who span:not(.tv2-av) { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* показатель: подпись + значение, полоска, примечание */
.kv2-m { min-width: 0; display: grid; gap: 5px; }
.kv2-m__t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11.5px; color: var(--text-secondary); }
.kv2-m__t b { font: 700 12.5px var(--font-mono); white-space: nowrap; }
.kv2-m small { font-size: 10.5px; color: var(--text-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv2-bar { display: block; height: 5px; border-radius: 3px; background: var(--tv2-line); overflow: hidden; }
.kv2-fill { display: block; height: 100%; border-radius: 3px; background: var(--tv2-accent); transition: width .25s; }
.kv2-fill--good { background: var(--tv2-good); } .kv2-fill--warn { background: var(--tv2-warn); } .kv2-fill--bad { background: var(--tv2-bad); } .kv2-fill--none { background: transparent; }
.kv2-v--good { color: var(--tv2-good); } .kv2-v--warn { color: var(--tv2-warn); } .kv2-v--bad { color: var(--tv2-bad); } .kv2-v--none { color: var(--text-muted); }
.kv2-m--none .kv2-m__t b { color: var(--text-muted); }

/* итог */
.kv2-score { text-align: center; }
.kv2-score b { display: block; font: 700 22px/1 var(--font-mono); }
.kv2-score small { display: block; margin-top: 5px; font-size: 10.5px; color: var(--text-muted); }

/* действия */
.kv2-act { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.kv2-ok { background: var(--tv2-good); border-color: var(--tv2-good); color: var(--text-inverse, var(--bg-base)); }
.kv2-ok:hover { border-color: var(--tv2-good); background: color-mix(in srgb, var(--tv2-good) 86%, var(--text-primary)); }
.kv2-act .tv2-btn:disabled, .kv2-g__a .tv2-btn:disabled { opacity: .5; cursor: progress; }
.kv2-done { font: 600 11.5px var(--font-sans); color: var(--tv2-good); white-space: nowrap; }

/* раскрытая строка */
.kv2-det { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; padding: 16px 20px 20px; border-bottom: 1px solid var(--tv2-line); background: var(--tv2-row); }
.kv2-det h4 { margin: 0 0 10px; font: 700 10px var(--font-sans); letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); }
.kv2-g { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px auto; gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; border: 1px solid var(--tv2-line); background: var(--tv2-card); }
.kv2-g--rejected { border-color: color-mix(in srgb, var(--tv2-bad) 45%, var(--tv2-line)); }
.kv2-g__t { min-width: 0; }
.kv2-g__t b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.kv2-g__t span { display: block; margin-top: 3px; font: 500 10.5px var(--font-mono); color: var(--text-muted); }
.kv2-g__t em { display: block; margin-top: 5px; font-style: normal; font-size: 11px; color: var(--tv2-bad); }
.kv2-g__p { text-align: right; font: 700 14px var(--font-mono); }
.kv2-g__a { display: inline-flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.kv2-g__a .tv2-btn { padding: 6px 10px; font-size: 11px; }
.kv2-badge { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--tv2-line); font: 700 10px var(--font-sans); letter-spacing: .2px; color: var(--text-secondary); white-space: nowrap; }
.kv2-badge--approved { color: var(--tv2-good); border-color: color-mix(in srgb, var(--tv2-good) 45%, var(--tv2-line)); }
.kv2-badge--draft { color: var(--tv2-warn); border-color: color-mix(in srgb, var(--tv2-warn) 45%, var(--tv2-line)); }
.kv2-badge--rejected { color: var(--tv2-bad); border-color: color-mix(in srgb, var(--tv2-bad) 45%, var(--tv2-line)); }
.kv2-hist { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.kv2-hist th { text-align: left; padding: 6px 8px 6px 0; font: 700 10px var(--font-sans); letter-spacing: .2px; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--tv2-line); }
.kv2-hist td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--tv2-line); font-family: var(--font-mono); color: var(--text-secondary); }
.kv2-hist td:first-child { font-family: var(--font-sans); color: var(--text-primary); text-transform: capitalize; }
.kv2-det .tv2-empty { padding: 10px 0; }

/* окно «Отклонить план» */
#kv2-rj label { display: block; margin: 12px 0 6px; font: 600 12px var(--font-sans); }
#kv2-rj textarea { width: 100%; resize: vertical; }
#kv2-rj .ctr-err { margin: 6px 0 0; font-size: 12px; color: var(--status-danger); }
.modal__list { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-secondary); }

@media (max-width: 1180px) { .kv2 { --kv2-cols: minmax(170px, 1.2fr) minmax(130px, 1fr) minmax(130px, 1fr) 84px 236px; } .kv2-th > :nth-child(4), .kv2-row > :nth-child(4) { display: none; } }
@media (max-width: 900px) { .kv2-det { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .kv2 .tv2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .kv2 .tv2-tile { padding: 12px 14px; } .kv2 .tv2-tile__v { font-size: 24px; }
  .kv2-th { display: none; }
  .kv2-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who score" "t t" "g g" "d d" "a a"; gap: 10px 12px; padding: 14px 16px; }
  .kv2-row > :nth-child(4) { display: grid; }
  .kv2-row .kv2-who { grid-area: who; } .kv2-row .kv2-score { grid-area: score; text-align: right; }
  .kv2-row > :nth-child(2) { grid-area: t; } .kv2-row > :nth-child(3) { grid-area: g; } .kv2-row > :nth-child(4) { grid-area: d; } .kv2-row .kv2-act { grid-area: a; justify-content: flex-start; }
  .kv2-act .tv2-btn { flex: 1 1 auto; }
  .kv2-det { padding: 14px 16px 18px; }
  .kv2-g { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t p" "b b" "a a"; gap: 8px 12px; }
  .kv2-g > .kv2-g__t { grid-area: t; } .kv2-g > .kv2-g__p { grid-area: p; } .kv2-g > .kv2-badge { grid-area: b; justify-self: start; } .kv2-g > .kv2-g__a { grid-area: a; justify-content: flex-start; }
  .kv2-nav { width: 100%; justify-content: space-between; } .kv2-nav__l { flex: 1; }
  .kv2-hist { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { .kv2-row, .kv2-fill { transition: none; } }

/* дерево KPI: компания ▸ подразделения ▸ сотрудники. Просадка - красная полоса слева и подпись, норма - зелёная точка в легенде */
.kt-legend { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); }
.kt-legend .kt-dot { margin-left: 8px; }
.kt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.kt-dot--good { background: var(--tv2-good); } .kt-dot--warn { background: var(--tv2-warn); } .kt-dot--bad { background: var(--tv2-bad); }
.kt-th, .kt-row { display: grid; grid-template-columns: minmax(240px, 2.2fr) minmax(120px, 1.1fr) 64px 112px 252px; gap: 16px; align-items: center; padding: 0 20px; }
.kt-th { padding-top: 10px; padding-bottom: 10px; background: var(--tv2-row); font: 700 10px var(--font-sans); letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); }
.kt-row { position: relative; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--tv2-line); transition: background .15s; }
.kt-row:hover { background: var(--tv2-row); }
.kt-row.is-drag::before, .kt-row--user.kt-t--bad::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tv2-bad); }
.kt-row--company { background: var(--tv2-row); padding-top: 14px; padding-bottom: 14px; }
.kt-row--company .kt-name { font-size: 15px; }
.kt-lead { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: calc(var(--kt-d, 0) * 22px); }
.kt-chev { flex: none; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; }
.kt-chev:hover:not(.kt-chev--none) { background: var(--tv2-line); color: var(--text-primary); }
.kt-chev:focus-visible, .kt-name--btn:focus-visible { outline: 2px solid var(--border-focus, var(--tv2-accent)); outline-offset: 2px; }
.kt-chev svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.kt-chev[aria-expanded="true"] svg { transform: rotate(90deg); }
.kt-chev--none { cursor: default; }
.kt-who { min-width: 0; display: grid; gap: 2px; }
.kt-name { font: 600 13px var(--font-sans); color: var(--text-primary); text-align: left; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-name--btn { padding: 0; border: 0; background: transparent; cursor: pointer; }
a.kt-name:hover { color: var(--tv2-accent); text-decoration: underline; }
.kt-row--user .kt-name { font-weight: 500; }
.kt-who span { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-pct { font: 700 15px var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.kt-flag { font: 600 11px var(--font-sans); color: var(--tv2-bad); }
.kt-act { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 860px) {
  .kt-th { display: none; }
  .kt-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l p" "b b" "f f" "a a"; gap: 6px 12px; padding: 12px 14px; }
  .kt-lead { padding-left: calc(var(--kt-d, 0) * 12px); }
  .kt-lead { grid-area: l; } .kt-pct { grid-area: p; } .kt-bar { grid-area: b; } .kt-flag { grid-area: f; } .kt-act { grid-area: a; justify-content: flex-start; flex-wrap: wrap; } .kt-act:empty { display: none; }
  .kt-flag:empty { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kt-row, .kt-chev svg { transition: none; } }