/* control.css — «Контроль исполнения» (ТЗ ЭДО-2 §5, 22.10). Префикс .cn-; общие куски — .c1-* (c1.css). Цвета — токены темы; процент «в срок»: ≥90 зелёный, 70–89 жёлтый, <70 красный. */

.cn { --cn-line: color-mix(in srgb, var(--text-primary) 9%, transparent); --cn-good: var(--status-success); --cn-warn: var(--status-warning); --cn-bad: var(--status-danger); --cn-info: var(--status-info); }
.cn-range { align-self: end; padding-bottom: 8px; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* пять карточек сверху: цифра крупно, подпись мелко; кнопки-фильтры */
.cn-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cn-m { appearance: none; text-align: left; display: grid; gap: 6px; align-content: space-between; min-height: 92px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--cn-line); background: var(--bg-secondary); color: inherit; font: inherit; cursor: pointer; }
.cn-m b { font: 700 32px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.cn-m span { font-size: 12.5px; color: var(--text-secondary); line-height: 1.3; }
.cn-m:hover { border-color: var(--border-strong); }
.cn-m[aria-pressed="true"] { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary)); }
.cn-m--bad b { color: var(--cn-bad); } .cn-m--soon b { color: var(--cn-warn); } .cn-m--info b { color: var(--cn-info); } .cn-m--warn b { color: var(--cn-warn); }
.cn-m:focus-visible, .cn-sort:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.cn-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cn-count { font-size: 13px; color: var(--text-secondary); } .cn-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* таблицы: заголовки сортируются, второй ряд — подпись мельче */
.cn-tw { overflow-x: auto; border: 1px solid var(--cn-line); border-radius: 12px; background: var(--bg-secondary); }
.cn-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 860px; }
.cn-table th { text-align: left; padding: 11px 14px; font: 600 11.5px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--cn-line); white-space: nowrap; }
.cn-table td { padding: 12px 14px; border-top: 1px solid var(--cn-line); vertical-align: top; }
.cn-table tbody tr:first-child td { border-top: 0; }
.cn-table td small, .cn small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.cn-sort { appearance: none; background: none; border: 0; padding: 0; min-height: 28px; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.cn-sort:hover { color: var(--text-primary); }
.cn-no { font: 500 12px var(--font-mono, monospace); color: var(--text-muted); } .cn-t { font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.cn-due { font-variant-numeric: tabular-nums; } .cn-due--over { color: var(--cn-bad); font-weight: 600; } .cn-due--soon { color: var(--cn-warn); font-weight: 600; }

/* процент и полоска */
.cn-pct { font-variant-numeric: tabular-nums; margin-right: 8px; } .cn-pct--good { color: var(--cn-good); } .cn-pct--warn { color: var(--cn-warn); } .cn-pct--bad { color: var(--cn-bad); } .cn-pct--muted { color: var(--text-muted); }
.cn-meter { display: inline-block; vertical-align: middle; width: 72px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text-primary) 12%, transparent); overflow: hidden; }
.cn-meter i { display: block; height: 100%; border-radius: 3px; background: var(--text-muted); }
.cn-meter--good i { background: var(--cn-good); } .cn-meter--warn i { background: var(--cn-warn); } .cn-meter--bad i { background: var(--cn-bad); }

/* рейтинг «лучшие» / «нужно подтянуть» */
.cn-ranks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cn-rank__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cn-rank__l li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; }
.cn-rank__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--font-sans); background: color-mix(in srgb, var(--text-primary) 10%, transparent); color: var(--text-secondary); }
.cn-rank__w { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }

@media (max-width: 1100px) { .cn-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .cn-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cn-m { min-height: 84px; } .cn-m b { font-size: 28px; }
  .cn-ranks { grid-template-columns: 1fr; }
  .cn-btns { width: 100%; } .cn-btns .btn { flex: 1 1 auto; min-height: 44px; }
  .cn-sort { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .cn * { transition: none !important; animation: none !important; } }