/* Анализ экзаменов — дополняет styles.css (токены, shell, кнопки оттуда) */

.selectors {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 14px;
  align-items: end;
}
/* компактные поля фильтров (портфолио / анализ) */
.selectors .field { gap: 5px; }
.selectors .field label { font-size: 11px; }
.selectors .field select,
.selectors .field input[type="text"],
.selectors .field input[type="number"],
.selectors .field input[type="date"] {
  font-size: 13.5px; padding: 8px 11px; border-radius: 10px;
}
.selectors .field select { padding-right: 32px; background-position: right 10px center; }
.selectors .btn { font-size: 13px; padding: 8px 14px; }
.field--grow { grid-column: span 1; }

#report { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }

/* ── полоса-график экзаменов серии ── */
.strip-wrap { overflow-x: auto; padding-bottom: 2px; }
.strip { display: flex; gap: 10px; min-width: min-content; }
.ex-chip {
  flex: 0 0 auto; min-width: 92px; text-align: left; cursor: pointer;
  font: inherit; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px;
}
.ex-chip .ex-label { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.ex-chip .ex-sub { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ex-chip.done:hover { border-color: var(--green); background: var(--green-soft); }
.ex-chip.done .ex-label { color: var(--green-dark); }
.ex-chip.active { border-color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 2px var(--green-soft); }
.ex-chip.soon { border-style: dashed; cursor: default; opacity: .75; }
.ex-chip.soon .ex-label { color: var(--ink-3); font-weight: 600; }
.ex-chip.overview { min-width: 110px; }
.ex-chip.overview .ex-label { color: var(--ink); }
.ex-chip.final {
  border-style: dashed; border-color: var(--violet); background: var(--violet-bg);
  cursor: default; min-width: 130px;
}
.ex-chip.final .ex-label { color: var(--violet); font-size: 12.5px; }
.ex-chip.final .ex-sub { color: var(--violet); opacity: .8; }

/* ── таблица типов экзаменов / таблица экзаменов типа ── */
.ttable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ttable th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-2);
  padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ttable td { padding: 13px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.ttable .num { text-align: right; font-variant-numeric: tabular-nums; }
.ttable tr:last-child td { border-bottom: 0; }
.type-row { cursor: pointer; }
.type-row:hover td { background: var(--green-soft); }
.t-name { font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
.type-row:hover .t-name { color: var(--green-dark); }
.t-meta { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.t-btn { width: 44px; text-align: center; }
.t-expand, .t-go {
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  font-size: 14px; line-height: 1; display: inline-grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
}
.t-expand:hover { border-color: var(--green); color: var(--green); }
.t-expand.on { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); }
.t-go { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.t-go:hover { background: var(--green-dark); }
.progress-row td { background: var(--surface-2); padding: 6px 14px 16px; }
.progress-inner { padding: 8px 6px 0; }
.progress-title {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 4px;
}
.soon-row td { color: var(--ink-3); }
.soon-row .t-name { color: var(--ink-3); font-weight: 500; }
.final-row td { background: var(--violet-bg); }
.final-row .t-name, .final-row .t-meta { color: var(--violet); }

/* ── стартовая страница: список экзаменов + раскрытие ── */
.index-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 4px;
}
.index-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.index-hint { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-3); }
.expand-btn {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--green); background: var(--green-soft); color: var(--green-dark);
}
.expand-btn:hover { background: var(--green); color: #fff; }
.expand-btn.on { background: var(--green); color: #fff; }

.ex-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-top: 14px;
}
.ex-card {
  text-align: left; font: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
.ex-card.done:hover { border-color: var(--green); box-shadow: 0 4px 14px -8px rgba(20,107,95,.4); transform: translateY(-1px); }
.ex-card-top { display: flex; align-items: center; justify-content: space-between; }
.ex-card-label { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.ex-card-status.done { color: var(--green); font-weight: 700; }
.ex-card-status.soon { color: var(--ink-3); }
.ex-card-avg { font-size: 26px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ex-card.soon .ex-card-avg { color: var(--ink-3); }
.ex-card-foot { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.ex-card.soon { border-style: dashed; opacity: .8; cursor: default; }
.ex-card.final { border-style: dashed; border-color: var(--violet); background: var(--violet-bg); cursor: default; }
.ex-card.final .ex-card-label { color: var(--violet); }
.ex-card.final .ex-card-avg { color: var(--violet); }
.expanded { margin-top: 20px; display: flex; flex-direction: column; gap: 18px; }

/* ── таблица результатов одного экзамена ── */
.stable { width: 100%; border-collapse: collapse; font-size: 13px; }
.stable th {
  position: sticky; top: 0; background: var(--surface-2); z-index: 1;
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  text-align: left; padding: 8px 9px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.stable td { padding: 7px 9px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.stable .num { text-align: right; font-variant-numeric: tabular-nums; }
.stable .rk { color: var(--ink-3); }
.stable .grp { color: var(--ink-2); font-size: 12.5px; }
.stable .sc { color: var(--ink-2); }
.stable .total { font-weight: 700; }
.stable .rnk { color: var(--ink-3); }
.stable tr:hover td { background: #fbfcfb; }
.stable tr.below .total { color: var(--low); }
.stable tr.below td:nth-child(2) { color: var(--low); }
.stable tr.absent td { color: var(--ink-3); font-style: italic; background: var(--surface-2); }
.stable th.sortable { cursor: pointer; user-select: none; }
.stable th.sortable:hover { color: var(--green); }
.stable th.sortable.act { color: var(--green); }
.stable td.sc.fail { color: var(--low); font-weight: 600; }
.stable td.pname { color: var(--ink-2); font-size: 12.5px; }

/* пороги и «сдали» в блоке предметов */
.subj-th {
  font-size: 10.5px; color: var(--ink-3); background: var(--surface-2);
  border-radius: 5px; padding: 1px 6px; margin-left: 8px; font-weight: 500;
}
.subj-pass { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.subj-pass.ok { color: var(--ok); background: var(--ok-bg); }
.subj-pass.mid { color: var(--mid); background: var(--mid-bg); }
.subj-pass.low { color: var(--low); background: var(--low-bg); }

/* кликабельные строки групп */
.gtable tr.clickable { cursor: pointer; }
.gtable tr.clickable:hover td { background: var(--green-soft); }
.gtable tr.clickable .g-name { color: var(--green-dark); font-weight: 600; }

/* хлебные крошки группы */
.crumb { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.crumb-btn {
  font: inherit; font-size: 14px; cursor: pointer; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px;
}
.crumb-btn:hover { background: var(--surface-2); color: var(--ink); }
.crumb-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }

/* ── заголовок секции ── */
.section-title {
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin: 6px 2px 0;
}

/* ── KPI-плитки ── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 18px 20px;
}
.kpi .kpi-label { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.kpi .kpi-value {
  font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin-top: 6px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kpi .kpi-sub { font-size: 13px; margin-top: 4px; color: var(--ink-3); }
.delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--low); }
.delta.flat { color: var(--ink-3); }
.kpi.accent { border-color: var(--green-line); background: var(--green-soft); }

/* ── карточка-блок ── */
.block {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 22px 24px;
}
.block > h3 {
  margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -.02em;
}
.block > .hint { margin: 0 0 18px; font-size: 13px; color: var(--ink-3); }

/* ── столбчатый график динамики ── */
.chart { width: 100%; overflow-x: auto; }
.bars { display: flex; align-items: flex-end; gap: 14px; min-height: 220px; padding-top: 24px; }
.bar-col { flex: 1; min-width: 54px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bar-wrap { width: 100%; display: flex; align-items: flex-end; justify-content: center; height: 180px; }
.bar {
  width: 62%; max-width: 64px; border-radius: 8px 8px 3px 3px;
  background: var(--green); position: relative;
  display: flex; justify-content: center; align-items: flex-start;
  transition: height .3s ease;
}
.bar.first { background: #b8c2bd; }
.bar-val {
  position: absolute; top: -22px; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.bar-lbl { font-size: 12.5px; color: var(--ink-2); font-weight: 500; text-align: center; }
.bar-n { font-size: 11px; color: var(--ink-3); }

/* ── таблица по группам ── */
.gtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.gtable th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-2);
  padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.gtable td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.gtable tr:last-child td { border-bottom: 0; }
.gtable tr:hover td { background: #fbfcfb; }
.gtable .g-name { font-weight: 600; }
.gtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.gtable .avg-big { font-size: 15px; font-weight: 700; }

.pill-d {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 3px 9px; border-radius: 999px;
}
.pill-d.up { color: var(--ok); background: var(--ok-bg); }
.pill-d.down { color: var(--low); background: var(--low-bg); }
.pill-d.flat { color: var(--ink-3); background: var(--surface-2); }
.pill-d.new { color: var(--violet); background: var(--violet-bg); }

/* спарклайн */
.spark { display: block; }

/* ── предметы (горизонтальные бары) ── */
.subjects { display: flex; flex-direction: column; gap: 12px; }
.subj-row { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 14px; }
.subj-name { font-size: 13.5px; color: var(--ink-2); }
.subj-track { height: 22px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.subj-fill { height: 100%; border-radius: 6px; transition: width .3s ease; }
.subj-fill.lv-ok { background: var(--ok); }
.subj-fill.lv-mid { background: #e0a94a; }
.subj-fill.lv-low { background: var(--low); }
.subj-meta { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; gap: 10px; align-items: center; min-width: 150px; }
.subj-meta b { font-weight: 700; min-width: 34px; text-align: right; }
.subj-pct { color: var(--ink-3); min-width: 38px; }

/* ── списки учеников ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mini-list { display: flex; flex-direction: column; gap: 2px; }
.mini-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px;
}
.mini-row:hover { background: var(--surface-2); }
.mini-rank {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--surface-2); color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.mini-row.top .mini-rank { background: var(--green-soft); color: var(--green); }
.mini-name { flex: 1; font-size: 14px; }
.mini-name small { color: var(--ink-3); margin-left: 6px; font-size: 12px; }
.mini-score { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }

.empty-note { color: var(--ink-3); font-size: 14px; padding: 40px; text-align: center; }

/* подпись про порог вместо поля ввода */
.pass-note {
  font-size: 13.5px; padding: 8px 11px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2);
}
.pass-note b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pn-dim { color: var(--ink-3); font-size: 12px; }

/* дельта без чипа */
.d-plain { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.d-plain.up { color: var(--ok); }
.d-plain.down { color: var(--low); }
.d-plain.flat { color: var(--ink-3); }
.d-cell { min-width: 52px; }

/* тренд в списке типов */
.t-trend { width: 84px; line-height: 0; }

/* цветовая шкала баллов: красный → зелёный.
   Специфичность (0,2,0) — чтобы перебить `.stable .sc { color: … }` выше. */
.stable .sc1, td.sc1 { color: #c0392f; }
.stable .sc2, td.sc2 { color: #cf7434; }
.stable .sc3, td.sc3 { color: #a8871a; }
.stable .sc4, td.sc4 { color: #4f9a53; }
.stable .sc5, td.sc5 { color: #1e7043; font-weight: 700; }
.stable .sc.ok, .sc.ok { color: var(--ok); }
.stable .sc.bad, .sc.bad { color: var(--low); }
.sc.miss, td.miss { color: #cfd5d1; }

/* кликабельный предмет */
.subj-row.clickable { cursor: pointer; border-radius: 8px; padding: 2px 4px; margin: 0 -4px; }
.subj-row.clickable:hover { background: var(--surface-2); }
.subj-go { color: var(--ink-3); font-weight: 700; }
.subj-row.clickable:hover .subj-go { color: var(--green); }
.crumb-sub { font-size: 12.5px; color: var(--ink-3); }
.sub-scroll { max-height: 420px; overflow: auto; }

/* ── сводная таблица ── */
.sum-block .cnt { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.sum-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.sum-search, .sum-tools select {
  font: inherit; font-size: 13px; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.sum-search { min-width: 190px; }
.sum-search:focus, .sum-tools select:focus {
  outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft);
}
.f-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.f-chip {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
}
.f-chip:hover { border-color: var(--green); color: var(--ink); }
.f-chip.on { background: var(--green); border-color: var(--green); color: #fff; }
/* «ниже порога» — красным */
.f-chip.risk { color: var(--low); border-color: #f0d5d1; font-variant-numeric: tabular-nums; }
.f-chip.risk:hover { border-color: var(--low); }
.f-chip.risk.on { background: var(--low); border-color: var(--low); color: #fff; }
/* переключатель режима таблицы */
.f-chip.mode { border-color: var(--green-line); color: var(--green-dark); }
.f-chip.mode.on { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

/* чип сводной таблицы в полосе */
.ex-chip.sum-chip { border-style: solid; border-color: var(--green-line); background: var(--green-soft); }
.ex-chip.sum-chip .ex-label { color: var(--green-dark); }
.ex-chip.sum-chip:hover { border-color: var(--green); }

/* матрица «по предметам» */
.matrix .mx-top th { text-align: center; }
.matrix .ex-grp {
  background: var(--green-soft); color: var(--green-dark);
  border-left: 2px solid var(--surface); text-align: center; font-size: 11.5px;
}
.matrix .tot-col { background: #f6f8f6; font-weight: 700; }
.matrix .tot-grp { background: #eef3ef; color: var(--ink-2); }
.matrix td, .matrix th { padding-left: 6px; padding-right: 6px; }

.sum-scroll { max-height: 620px; overflow: auto; }
.sum-table { font-size: 12.5px; }
.sum-table th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2);
  padding: 7px 8px; font-size: 11px; white-space: nowrap;
}
.sum-table td { padding: 4px 8px; white-space: nowrap; }
.sum-table .s-fio { font-weight: 600; }
.sum-table tbody tr:hover td { background: #fbfcfb; }
.sum-table .avg-big { font-weight: 800; }

/* закреплённые слева колонки: № и ФИО остаются на месте при прокрутке вправо */
.sum-table tbody .rk,
.sum-table tbody .s-fio,
.sum-table thead th:nth-child(1),
.sum-table thead th:nth-child(2) {
  position: sticky; z-index: 3;
}
.sum-table tbody .rk, .sum-table thead th:nth-child(1) { left: 0; width: 38px; min-width: 38px; }
.sum-table tbody .s-fio, .sum-table thead th:nth-child(2) { left: 38px; min-width: 158px; }
.sum-table tbody .rk, .sum-table tbody .s-fio { background: var(--surface); }
.sum-table thead th:nth-child(1), .sum-table thead th:nth-child(2) { z-index: 5; background: var(--surface-2); }
/* граница-подсказка, где заканчивается закреплённая часть */
.sum-table tbody .s-fio, .sum-table thead th:nth-child(2) { box-shadow: 1px 0 0 var(--line); }
.sum-table tbody tr:hover .rk, .sum-table tbody tr:hover .s-fio { background: #fbfcfb; }
/* в матрице верхняя строка шапки — над закреплёнными колонками */
.matrix .mx-top th:nth-child(1), .matrix .mx-top th:nth-child(2) { z-index: 6; }

/* ФИО-ссылка в портфолио ученика */
.st-link { color: inherit; text-decoration: none; border-bottom: 1px dashed #c3cbc6; }
.st-link:hover { color: var(--green-dark); border-bottom-color: var(--green); }

@media (max-width: 820px) {
  .two-col { grid-template-columns: 1fr; }
  .subj-row { grid-template-columns: 130px 1fr auto; }
}

/* Цели куратора в портфолио: к чему шли и что получилось. */
.goals-card { padding: 14px 18px; margin-bottom: 14px; }
.goals-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.goals-h h3 { margin: 0; font-size: 15px; }
.goals-h span { font-size: 12px; color: var(--ink-3); }
.goals-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.goals-table th {
  padding: 6px 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  text-align: left; border-bottom: 1px solid var(--line);
}
.goals-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-2); }
.goals-table tr:last-child td { border-bottom: 0; }
.goals-table .c { text-align: center; }
.goal-when { display: block; font-size: 10.5px; color: var(--ink-3); }
.goal-ok { color: var(--green-dark); font-weight: 700; }
.goal-low { color: var(--low); font-weight: 700; }