/* Отчёты, рейтинг, выгрузка и печатная форма отчёта.

   Токены цвета и базовые компоненты (карточка, таблица, метка, вкладки,
   сводка) — в стиль.css. Здесь только то, что нужно разделам «Отчёты»
   и «Мои отчёты», и печатная форма: кнопка «PDF» открывает окно печати
   браузера, отчёт сохраняется в PDF на листах А4. */

/* ─────────────────────── каркас ─────────────────────── */

.отчёты .заголовок-раздела { align-items: center; }
.отчёт-действия .тихая { gap: 7px; }
.отчёт-тело { transition: opacity .2s; }
.отчёт-тело.отчёт-обновление { opacity: .55; pointer-events: none; }
.отчёт-карточка { margin-bottom: 20px; }
.отчёт-карточка + .отчёт-карточка, .итог-сетка + .отчёт-карточка { margin-top: 0; }
.отчёт-карточка > .прокрутка { border-top: 0; }
.шапка-карточки .справа select { height: 36px; min-width: 200px; font-size: 14px; }
.отчёт-тихо { color: var(--тихий); font-size: 13px; }
.отчёт-подпись { padding: 10px 22px 16px; font-size: 12.5px; color: var(--тихий); }
.отчёт-описание {
  margin: 0 0 20px; padding: 14px 18px; white-space: pre-line;
  font-size: 14.5px; line-height: 1.6; color: var(--приглушён);
  background: var(--поверхность-2); border: 1px solid var(--линия); border-left: 3px solid var(--бренд); border-radius: 6px;
}
.отчёт-карточка .отчёт-описание { margin: 4px 22px 20px; }
.отчёт-плашка {
  margin-bottom: 16px; padding: 12px 16px; font-size: 14px; border-radius: 6px;
  color: var(--золото-текст); background: var(--золото-фон); border: 1px solid transparent;
}
.печать-шапка { display: none; }

/* ─────────────────────── фильтры ─────────────────────── */

.отчёт-фильтры { margin-bottom: 18px; overflow: visible; }
.отчёт-фильтры-сетка {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 14px; align-items: end;
  padding: 16px 18px;
}
.отчёт-поле { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.отчёт-поле[hidden] { display: none; }
.отчёт-поле > span {
  font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--тихий);
}
.отчёт-поле select, .отчёт-поле input[type=date] { height: 40px; font-size: 14px; }
.отчёт-даты { grid-column: span 2; }
.отчёт-даты-пара { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.отчёт-сброс { justify-self: start; height: 40px; }

/* Выпадающий список с флажками (территории, компетенции). */
.отчёт-выбор { position: relative; }
.отчёт-выбор > summary {
  display: flex; align-items: center; height: 40px; padding: 0 38px 0 14px;
  font-size: 14px; list-style: none; cursor: pointer; user-select: none;
  background: var(--поверхность) no-repeat right 14px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8e9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  border: 1px solid var(--линия-2); border-radius: 6px;
}
.отчёт-выбор > summary::-webkit-details-marker { display: none; }
.отчёт-выбор[open] > summary { border-color: var(--бренд); box-shadow: 0 0 0 4px rgb(var(--бренд-rgb) / .14); }
.отчёт-выбор-итог { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.отчёт-выбор-список {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: min(420px, 90vw);
  max-height: 340px; overflow: auto; padding: 6px 0;
  background: var(--поверхность); border: 1px solid var(--линия-2); border-radius: 6px; box-shadow: var(--тень-3);
}
.отчёт-выбор-пункт {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px; font-size: 14px; cursor: pointer;
}
.отчёт-выбор-пункт:hover { background: var(--бренд-бледный); }
.отчёт-выбор-пункт input { flex: none; margin: 0; }
.отчёт-выбор-пункт small { margin-left: auto; padding-left: 10px; font-size: 11.5px; color: var(--тихий); }
.отчёт-выбор-низ { padding: 6px 8px 2px; border-top: 1px solid var(--линия); margin-top: 4px; }

/* Настройки вкладки: вид рейтинга, уровень тренажёра. */
.отчёт-панель { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin: 0 0 18px; }
.отчёт-панель .вкладки { margin: 0; }
.отчёт-панель .отчёт-поле { min-width: 240px; }
.отчёт-флажок { display: inline-flex; align-items: center; gap: 9px; height: 40px; font-size: 14px; color: var(--приглушён); cursor: pointer; }
.отчёт-переключатель { margin-bottom: 18px; }
.отчёт-переключатель a { cursor: pointer; }

/* ─────────────────────── плитки и числа ─────────────────────── */

.отчёт-плитки { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.отчёт-плитки .сводка-значение { font-size: 26px; }
.отчёт-плитка-пояснение { margin-top: 4px; font-size: 12.5px; color: var(--приглушён); }

.отчёт-дельта { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 650; white-space: nowrap; }
.отчёт-дельта.рост { color: var(--успех); }
.отчёт-дельта.спад { color: var(--ошибка); }
.отчёт-дельта.ноль { color: var(--тихий); }
.легенда-отметка { font-size: 13px; font-weight: 600; }

.отчёт-динамика { display: grid; gap: 4px; padding: 14px 22px 8px; }
.отчёт-динамика-строка { padding: 10px 0; border-bottom: 1px dashed var(--линия-2); }
.отчёт-динамика-строка:last-child { border-bottom: 0; }
.отчёт-динамика-имя { font-size: 14.5px; font-weight: 560; line-height: 1.4; }
.отчёт-динамика-числа { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 3px;
  font-variant-numeric: tabular-nums; }
.отчёт-динамика-числа > span:first-child { font-size: 17px; font-weight: 650; }

.отчёт-вход-выход { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Пары полос — когда компетенций меньше трёх. */
.отчёт-пары { display: grid; gap: 16px; padding: 20px 22px; }
.отчёт-пара-имя { font-weight: 600; margin-bottom: 6px; }
.отчёт-пара-строка { display: grid; grid-template-columns: 90px 1fr 48px; gap: 10px; align-items: center; font-size: 13px; }
.отчёт-пара-строка b { text-align: right; font-variant-numeric: tabular-nums; }
.отчёт-пара-строка.прежняя .полоса i { background: rgb(var(--чернила) / .25); }

/* ─────────────────────── матрицы ─────────────────────── */

.отчёт-матрица-обёртка { padding: 14px 16px 4px; overflow-x: auto; }
.отчёт-матрица td.отчёт-ячейка-уровня {
  height: 44px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--текст);
  background: rgb(var(--бренд-rgb) / calc(.05 + var(--доля, 0) * .75));
}
.отчёт-матрица td.отчёт-ячейка-уровня.сильная { color: #fff; }
.отчёт-матрица-обёртка + .отчёт-подпись { padding-top: 0; }
.отчёт-уровни-описания {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; padding: 4px 22px 18px; font-size: 14px;
}
.отчёт-уровни-описания dt { font-weight: 650; }
.отчёт-уровни-описания dd { margin: 0; color: var(--приглушён); }

/* Общий уровень мастерства: строка уровней с отметкой своего. */
.отчёт-мастерство-блок { display: flex; align-items: center; gap: 26px; padding: 20px 22px; }
.отчёт-мастерство-текст { flex: 1; min-width: 0; display: grid; gap: 8px; }
.отчёт-мастерство-текст p { margin: 0; color: var(--приглушён); font-size: 14px; }
.отчёт-мастерство-имя { font-family: var(--шрифт-голос); font-size: 24px; font-weight: 560; letter-spacing: -.01em; }
.отчёт-мастерство { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 4px; }
.отчёт-мастерство-уровень {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-width: 0;
  background: var(--поверхность-2); border: 1px solid var(--линия); border-radius: 6px;
}
.отчёт-мастерство-уровень b { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.отчёт-мастерство-уровень small { font-size: 12px; color: var(--тихий); }
.отчёт-мастерство-уровень.текущий { color: #fff; background: var(--градиент); border-color: transparent; box-shadow: var(--тень-бренда); }
.отчёт-мастерство-уровень.текущий small { color: rgba(255, 255, 255, .8); }
.отчёт-мастерство-уровень.прежний { border: 1.5px dashed var(--тихий); }

/* ─────────────────────── таблицы ─────────────────────── */

.отчёт-таблица th { white-space: normal; vertical-align: bottom; line-height: 1.35; }
.отчёт-таблица td { font-size: 13.5px; }
.отчёт-таблица td.отчёт-текст { white-space: normal; min-width: 180px; line-height: 1.45; }
.отчёт-таблица th.сортируемая { cursor: pointer; user-select: none; }
.отчёт-таблица th.сортируемая:hover { color: var(--бренд); }
.отчёт-строка-ссылка { cursor: pointer; }
.отчёт-обрезка { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 380px; }
.отчёт-отступ { display: inline-block; padding-left: 18px; color: var(--приглушён); }
.отчёт-снят { color: var(--тихий); text-decoration: line-through; }
.отчёт-журнал td:nth-child(5) { max-width: 420px; }

/* Распределение выбора уровней U1–U4. */
.отчёт-распределение { display: flex; width: 220px; height: 22px; overflow: hidden; border-radius: 4px; background: var(--холст-2); }
.отчёт-распределение i {
  display: flex; align-items: center; justify-content: center; min-width: 2px;
  font-size: 11px; font-style: normal; font-weight: 650; color: #fff; font-variant-numeric: tabular-nums;
}
:is(.отчёт-распределение, .отчёт-легенда-у) .у1 { --цвет-у: #d8594f; }
:is(.отчёт-распределение, .отчёт-легенда-у) .у2 { --цвет-у: #e9a23b; }
:is(.отчёт-распределение, .отчёт-легенда-у) .у3 { --цвет-у: #8b7ff2; }
:is(.отчёт-распределение, .отчёт-легенда-у) .у4 { --цвет-у: var(--кнопка); }
.отчёт-распределение i, .отчёт-легенда-у span::before { background: var(--цвет-у); }
.отчёт-легенда-у { display: inline-flex; gap: 12px; }
.отчёт-легенда-у span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.отчёт-легенда-у span::before { content: ''; width: 11px; height: 11px; border-radius: 3px; }

/* ─────────────────────── профиль рисков ─────────────────────── */

.отчёт-риски { display: grid; }
.отчёт-риск { padding: 16px 22px; border-bottom: 1px solid var(--линия); }
.отчёт-риск:last-child { border-bottom: 0; }
.отчёт-риск-шапка { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.отчёт-риск p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; }
.отчёт-риск .отчёт-таблица { margin-top: 12px; border: 1px solid var(--линия); border-radius: 6px; overflow: hidden; }

/* ─────────────────────── отчёт пользователя ─────────────────────── */

.отчёт-герой {
  display: flex; align-items: center; gap: 24px; margin-bottom: 20px; padding: 22px 26px;
  background: var(--поверхность); border: 1px solid var(--линия); border-radius: var(--р-б); box-shadow: var(--тень-2);
}
.отчёт-герой-текст { flex: 1; min-width: 0; }
.отчёт-герой-текст h2 { margin: 0 0 10px; font-family: var(--шрифт-голос); font-size: 26px; font-weight: 560; }
.отчёт-герой-метки { display: flex; flex-wrap: wrap; gap: 8px; }
.отчёт-сведения {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 20px; margin: 16px 0 0;
}
.отчёт-сведения dt { font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--тихий); }
.отчёт-сведения dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 560; }

.отчёт-этапы { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 22px 6px; }
.отчёт-этап {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--поверхность-2); border: 1px solid var(--линия); border-radius: 6px;
}
.отчёт-этап b { display: block; font-size: 14.5px; }
.отчёт-этап small { font-size: 12.5px; color: var(--тихий); }
.отчёт-этап-знак {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: var(--тихий); background: var(--холст-2);
}
.отчёт-этап.готово .отчёт-этап-знак { color: var(--успех); background: var(--успех-фон); }
.отчёт-этап.идёт .отчёт-этап-знак { color: var(--бренд); background: var(--бренд-светлый); }
.отчёт-факты { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 12px 22px 18px; }

.отчёт-диаграмма-столбцы { padding: 16px 18px 6px; }
.отчёт-столбцы svg { display: block; width: 100%; max-width: 820px; height: auto; margin: 0 auto; }

.отчёт-аватар { margin-bottom: 20px; }
.отчёт-аватар-образ { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); }
.отчёт-аватар .отчёт-описание { margin: 14px 0 0; }

/* ─────────────────────── узкий экран ─────────────────────── */

@media (max-width: 760px) {
  .отчёт-даты { grid-column: auto; }
  .отчёт-этапы { grid-template-columns: 1fr; }
  .отчёт-герой, .отчёт-мастерство-блок { flex-direction: column; align-items: flex-start; }
  .отчёт-мастерство { grid-auto-flow: row; }
  .шапка-карточки { flex-wrap: wrap; }
  .шапка-карточки .справа select { min-width: 0; }
}

/* ─────────────────────── печатная форма ─────────────────────── */

@media print {
  @page { size: A4 portrait; margin: 12mm 10mm 14mm; }

  html, body { background: #fff !important; }
  body { font-size: 10pt; line-height: 1.4; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .каркас { padding-left: 0 !important; }
  main { max-width: none !important; margin: 0 !important; padding: 0 !important; animation: none !important; }
  * { animation: none !important; transition: none !important; }

  /* Меню, фильтры, вкладки и кнопки на бумаге не нужны. */
  .меню-боковое, .мобильная-шапка, .меню-подложка, .уведомления, .вкладки, .отчёт-фильтры, .отчёт-панель, .отчёт-действия, .заголовок-раздела,
  .не-печатать, .назад, button, .плашка-демо { display: none !important; }

  .печать-шапка { display: block; margin: 0 0 6mm; padding: 0 0 4mm; border-bottom: 1.5pt solid #4b3fe0; }
  .печать-система { font-size: 9pt; letter-spacing: .06em; text-transform: uppercase; color: #5c5f6d; }
  .печать-название { margin: 1mm 0; font-size: 16pt; font-weight: 700; color: #17181f; }
  .печать-дата { font-size: 9.5pt; color: #5c5f6d; }
  .печать-фильтры { margin: 2mm 0 0; padding: 0 0 0 4mm; font-size: 9pt; color: #17181f; }
  .печать-фильтры li { margin: 0; }

  .карточка, .стиль-карточка, .сводка-цифра, .отчёт-герой, .отчёт-этап, .отчёт-описание {
    box-shadow: none !important; border-color: #cfcdc5 !important;
  }
  .отчёт-карточка, .итог-сетка, .стиль-карточка, .отчёт-герой, .сводка, .отчёт-описание, .отчёт-риск { break-inside: avoid; }
  .отчёт-длинная { break-inside: auto; }
  .отчёт-карточка { margin-bottom: 5mm; }
  .шапка-карточки { padding: 3mm 4mm; font-size: 11pt; break-after: avoid; }

  .итог-сетка { grid-template-columns: 1.1fr .9fr !important; gap: 4mm; margin-bottom: 5mm; }
  .сводка { grid-template-columns: repeat(4, 1fr) !important; gap: 3mm; margin-bottom: 5mm; }
  .сводка-цифра { padding: 3mm; }
  .сводка-значение, .отчёт-плитки .сводка-значение { font-size: 15pt; }
  .сводка-имя, .отчёт-плитка-пояснение { font-size: 8pt; }
  .диаграмма-и-легенда { padding: 2mm; }
  .диаграмма svg { max-width: 100mm; }
  .отчёт-столбцы svg { max-width: 180mm; }

  .диаграмма-легенда { gap: 3mm; flex-wrap: wrap; }
  .легенда, .легенда-отметка { font-size: 8pt; }
  .отчёт-динамика-имя { font-size: 9.5pt; }
  .отчёт-динамика-числа > span:first-child { font-size: 11pt; }
  .отчёт-группировка { display: none !important; }

  /* Таблицы — во всю ширину листа, шапка повторяется на каждой странице. */
  .карточка > table, .карточка > .прокрутка, .прокрутка { display: block; overflow: visible !important; }
  .карточка > table, .прокрутка > table { display: table; width: 100%; }
  table, .отчёт-таблица td { font-size: 8pt !important; }
  th, td { padding: 1.2mm 1.4mm !important; white-space: normal !important; }
  th { font-size: 7pt !important; letter-spacing: .03em !important; }
  .отчёт-вход-выход span { white-space: nowrap; }
  .отчёт-таблица .отчёт-дельта { font-size: 7.5pt; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  tbody tr:hover { background: none; }
  .отчёт-обрезка { display: inline; -webkit-line-clamp: unset; max-width: none; }
  .отчёт-таблица td.отчёт-текст { min-width: 0; }
  .отчёт-распределение { width: 38mm; }
  .отчёт-матрица-обёртка, .отчёт-выбор-список { overflow: visible; }
  a { color: inherit; text-decoration: none; }
}

/* Переключатель диаграммы «по компонентам / по индикаторам». */
.отчёт-срезы { display: flex; gap: 4px; margin: 0 18px 6px; }
.отчёт-срезы button[aria-pressed="true"] { background: var(--бренд-светлый); }