/* Базовые стили интерфейса — фирменный стиль HT-lab (палитра/шрифт сверены
   с реальными продуктами компании: ht-lab.ru и logon.maintest.ru).
   Требования раздела 11.5: основной текст >= 16px, межстрочный интервал >= 1.5,
   контраст не ниже 4.5:1, видимый фокус, корректная вёрстка при 1280-1920 px.
   Шрифт Roboto — самостоятельно размещён в app/static/fonts (см. Roboto-LICENSE.txt,
   OFL-1.1) по тому же принципу, что и DejaVu Sans для PDF: CDN и внешние
   подключения запрещены (раздел 13.1), font-src/style-src CSP — только 'self'. */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Roboto-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Roboto-Bold.ttf") format("truetype");
}

:root {
  --color-bg: #ffffff;
  --color-surface: #f3f3f3;       /* HT-lab: --color-gray--light */
  --color-surface-soft: #f8f8f8;
  --color-border: #d9d9d9;        /* HT-lab: --color-gray */
  --color-text: #151515;          /* HT-lab: --color-gray--darker, контраст ~18.5:1 */
  --color-text-muted: #5a5a5a;    /* HT-lab: --color-gray--dark, контраст ~7.3:1 */
  --color-accent: #017c90;        /* HT-lab: --color-primary (фирменный бирюзовый) */
  --color-accent-dark: #005d6c;   /* HT-lab: тёмный бирюзовый (hover/active) */
  --color-accent-light: #e6f4f6;  /* HT-lab: --color-primary--light (подложки/выделение) */

  --status-grey: #5a5a5a;
  --status-blue: #017c90;
  --status-green: #1f8a5b;
  --status-orange: #b45309;
  --status-red: #dd0808;          /* HT-lab: цвет ошибок формы входа maintest */
  --status-red-bg: #f6e6e6;       /* HT-lab: подложка сообщения об ошибке */
  --status-purple: #6d28d9;       /* «Ожидает пересдачи» — намеренно не красный/оранжевый,
                                      чтобы не путать с «Просрочен»/«Не пройден» */

  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans", Arial, sans-serif;

  --content-width: 820px;
  --menu-width: 250px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 2px 10px rgba(21, 21, 21, 0.06);
  --shadow-card-hover: 0 6px 20px rgba(21, 21, 21, 0.1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--color-text);
}

.pre-line {
  white-space: pre-line;
}

/* --- Доступность --------------------------------------------------------- */

/* Текстовые ссылки: в покое без подчёркивания, при наведении оно возвращается —
   так интерфейс выглядит спокойнее, но ссылка остаётся отличимой не только
   цветом (важно для слабо различающих цвет, раздел 11.5). */
a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* --- Шапка --------------------------------------------------------------- */

.app-header {
  background: var(--color-bg);
  border-bottom: 3px solid var(--color-accent);
}

.app-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
}

.app-header__brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-right: auto;
}

.app-header__org {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-text);
  text-decoration: none;
}

.app-header__subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.app-header__links {
  display: flex;
  gap: 1.25rem;
}

.app-header__user {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.app-header__name {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  font-size: 0.95rem;
}

.app-header__role {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.app-header__logout {
  margin: 0;
}

.bell {
  position: relative;
  text-decoration: none;
  font-size: 1.2rem;
}

.bell__badge {
  position: absolute;
  top: -0.4rem;
  right: -0.6rem;
  min-width: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--status-red);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.25rem;
  text-align: center;
}

/* --- Каркас страницы ----------------------------------------------------- */

.app-body {
  flex: 1 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem;
}

.side-menu {
  flex: 0 0 var(--menu-width);
  width: var(--menu-width);
  padding: 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.side-menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  margin: 0.1rem 0;
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
}

.side-menu a:hover {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.side-menu a[aria-current="page"] {
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
}

/* .app-main не ограничивается --content-width намеренно: этот параметр
   задаёт удобную ширину ЧТЕНИЯ (текст, форма из одной колонки) и применяется
   точечно у самих читаемых компонентов (.md-preview, .question-block и т.д.),
   а не у контейнера страницы целиком — иначе широкие таблицы отчётов
   сжимаются в узкую колонку и слова переносятся некрасиво почти на каждой
   строке (ФИО, должность, статус назначения). */
.app-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Страницы прохождения курса (теория, тест, результат) — единственные, где
   вся страница представляет собой одну читаемую колонку. Без бокового меню
   она прижималась к левому краю широкого экрана, оставляя половину окна
   пустой. Здесь --content-width применяется к контейнеру целиком и колонка
   центрируется; на отчётах с широкими таблицами класс не ставится, поэтому
   оговорка выше остаётся в силе. */
.reading-page .app-main {
  max-width: var(--content-width);
  margin-inline: auto;
}

.app-main h1 {
  font-size: 1.75rem;
  line-height: 1.3;
  margin-top: 0;
  font-weight: 700;
}

.app-main h2 {
  font-size: 1.3rem;
  line-height: 1.35;
  margin-top: 2rem;
  font-weight: 700;
}

.lead {
  font-size: 1.05rem;
  color: var(--color-text-muted);
}

code {
  padding: 0.1rem 0.3rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.9em;
}

.app-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* --- Формы ----------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 420px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field label {
  font-weight: 600;
  font-size: 0.95rem;
}

.field input[type="text"],
.field input[type="password"],
.field select {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus-visible,
.field select:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* --- Панель поиска/фильтров и пагинация ------------------------------------ */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0;
}

.toolbar input[type="text"],
.toolbar select,
.toolbar input[type="file"] {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  background: var(--color-bg);
  color: var(--color-text);
}

/* Текстовые фильтры-поиск были фиксированной браузерной ширины (~20 символов)
   и обрезали собственный placeholder ("Поиск по ФИО или логин" не помещался
   целиком) — задаём достаточную минимальную ширину. */
.toolbar input[type="text"] {
  min-width: 15rem;
}

.toolbar input[type="date"] {
  min-width: 9rem;
}

.toolbar input:focus-visible,
.toolbar select:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.pagination {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}

/* --- Список чекбоксов (группы в форме пользователя) ------------------------ */

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
}

/* --- Ссылки-кнопки внутри таблиц ------------------------------------------- */

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.table-actions form {
  margin: 0;
}

.link-btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-accent);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}

.link-btn:hover {
  text-decoration: underline;
}

.link-btn--danger {
  color: var(--status-red);
}

.table-actions input[type="date"] {
  min-width: 9rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
}

/* --- Печать (список временных паролей) ------------------------------------- */

@media print {
  .app-header, .side-menu, .app-footer, .no-print {
    display: none !important;
  }
  .app-body {
    display: block;
    max-width: none;
    padding: 0;
  }
  .app-main {
    max-width: none;
  }
}

/* --- Кнопки -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.4rem;
  min-height: 2.75rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-accent);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* .btn применяется и к <a>, и к <button>. Общее правило `a:hover` (ниже)
   имеет более высокую специфичность, чем класс `.btn` (тип+псевдокласс
   против одного класса) и перебивало белый цвет текста — на тёмном фоне
   ховера подпись становилась нечитаемой. Переопределяем явно. */
.btn:hover,
.btn:hover:visited {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #fff;
  /* Кнопки не подчёркиваются никогда — общее `a:hover` (0,1,1) перебивает
     класс `.btn` (0,1,0), поэтому снимать подчёркивание нужно явно. */
  text-decoration: none;
  box-shadow: var(--shadow-card);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--color-border);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  color: var(--color-accent);
}

.btn--ghost:hover {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  box-shadow: none;
  text-decoration: none;
}

.btn--small {
  padding: 0.3rem 0.85rem;
  min-height: auto;
  font-size: 0.85rem;
}

/* Необратимое действие (удаление курса) — визуально отделено от обычных
   кнопок, чтобы его нельзя было нажать «на автомате». */
.btn--danger {
  background: var(--status-red);
  border-color: var(--status-red);
  color: #fff;
}

.btn--danger:hover,
.btn--danger:hover:visited {
  background: var(--status-red);
  border-color: var(--status-red);
  color: #fff;
  filter: brightness(0.9);
}

/* --- Бейджи статусов (раздел 10.1) --------------------------------------- */

.badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge--grey   { background: var(--status-grey); }
.badge--blue   { background: var(--status-blue); }
.badge--green  { background: var(--status-green); }
.badge--orange { background: var(--status-orange); }
.badge--red    { background: var(--status-red); }
.badge--purple { background: var(--status-purple); }

/* --- Сообщения ----------------------------------------------------------- */

.messages {
  margin-bottom: 1.5rem;
}

.message {
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.5rem;
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-soft);
}

.message--success { border-left-color: var(--status-green); background: #eaf6ef; }
.message--error   { border-left-color: var(--status-red); background: var(--status-red-bg); }
.message--warning { border-left-color: var(--status-orange); background: #fbf1e4; }
.message--info    { border-left-color: var(--status-blue); background: var(--color-accent-light); }

/* --- Таблицы (единый компонент, раздел 10.1) ----------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.table th {
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table tbody tr:hover {
  background: var(--color-accent-light);
}

/* --- Markdown: редактор и предпросмотр (раздел 9.3, 10.3) ------------------ */

.md-editor {
  width: 100%;
  max-width: 720px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.5;
  resize: vertical;
  background: var(--color-bg);
  color: var(--color-text);
}

.md-preview {
  max-width: var(--content-width);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.md-preview :first-child {
  margin-top: 0;
}

.md-preview abbr {
  text-decoration: underline dotted;
  cursor: help;
}

/* Врезки «Запомните» в теории: цитата Markdown (`> ...`) — единственный
   доступный составителю способ выделить блок (таблицы GFM не поддержаны,
   см. app/markdown_render.py). Ключевые проверяемые факты выносятся сюда,
   чтобы они не терялись в сплошном тексте. */
.md-preview blockquote {
  margin: 1.1rem 0;
  padding: 0.9rem 1.1rem;
  border: 0;
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-accent-light);
}

.md-preview blockquote > :first-child {
  margin-top: 0;
}

.md-preview blockquote > :last-child {
  margin-bottom: 0;
}

.md-preview img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* --- Копируемая строка (например, ссылка на загруженное изображение) ------- */

.copy-box {
  width: 100%;
  max-width: 420px;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  background: var(--color-bg);
  color: var(--color-text);
}

/* --- Строка варианта ответа (банк вопросов) --------------------------------- */

.option-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.option-row input[type="text"] {
  flex: 1 1 auto;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  background: var(--color-bg);
  color: var(--color-text);
}

/* --- Предпросмотр вопроса (раздел 9.3) -------------------------------------- */

.preview-question {
  margin-bottom: 1.5rem;
}

.preview-question ul {
  list-style: none;
  padding-left: 0;
}

.preview-question li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}

/* --- Вкладки кабинета, CSS-only (раздел 10.2) ------------------------------ */

.tabs__radio {
  position: absolute;
  left: -9999px;
}

.tabs__labels {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.tabs__label {
  padding: 0.6rem 1rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  font-weight: 600;
}

.tabs__panel {
  display: none;
}

#tab-primary:checked ~ .tabs__labels label[for="tab-primary"],
#tab-periodic:checked ~ .tabs__labels label[for="tab-periodic"],
#tab-targeted:checked ~ .tabs__labels label[for="tab-targeted"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

#tab-primary:checked ~ #panel-primary,
#tab-periodic:checked ~ #panel-periodic,
#tab-targeted:checked ~ #panel-targeted {
  display: block;
}

.tabs__radio:focus-visible ~ .tabs__labels label {
  outline: none;
}

#tab-primary:focus-visible ~ .tabs__labels label[for="tab-primary"],
#tab-periodic:focus-visible ~ .tabs__labels label[for="tab-periodic"],
#tab-targeted:focus-visible ~ .tabs__labels label[for="tab-targeted"] {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* --- Карточка курса (раздел 10.2) ------------------------------------------ */

.course-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.4rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease;
}

.course-card:hover {
  box-shadow: var(--shadow-card-hover);
}

.course-card--overdue {
  border-color: var(--status-red);
  background: var(--status-red-bg);
}

.course-card__main {
  /* Без flex-basis/min-width длинный заголовок (например, «Инструктаж по
     149-ФЗ...») занимал почти всю ширину карточки, кнопке справа не
     хватало места в строке — flex-wrap переносил её на отдельную «линию»
     флекс-контейнера, и align-items: center центрировал её там где
     попало (иногда вровень с заголовком). min-width: 0 разрешает тексту
     переноситься внутри своей колонки вместо переполнения ряда. */
  flex: 1 1 320px;
  min-width: 0;
}

.course-card__main h3 {
  margin: 0 0 0.25rem;
}

.course-card__actions {
  flex-shrink: 0;
}

/* --- Полоса прогресса (теория, раздел 10.3) -------------------------------- */

.progress-bar {
  width: 100%;
  max-width: var(--content-width);
  height: 8px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
  margin-bottom: 0.4rem;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-accent);
  transition: width 0.2s ease;
}

.step-indicator {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 0;
}

/* Подсказка о чтении экрана (БП-06). Место под неё зарезервировано всегда:
   раньше элемент удалялся из DOM при выполнении условия и кнопки под ним
   подпрыгивали. Видимый текст переключается по data-state, высота — нет. */
.lesson-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.6rem;
  margin: 1.25rem 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Ряд кнопок экрана теории и блок предупреждения о тесте — с воздухом:
   вплотную к карточке теории и друг к другу они читались как одна
   слипшаяся масса. */
.lesson-actions {
  margin-top: 1.25rem;
}

#test-transition {
  margin-top: 1.5rem;
}

.lesson-hint__read,
.lesson-hint[data-state="read"] .lesson-hint__reading {
  display: none;
}

.lesson-hint[data-state="read"] {
  color: var(--status-green);
  font-weight: 700;
}

.lesson-hint[data-state="read"] .lesson-hint__read {
  display: inline;
}

.lesson-hint[data-state="read"]::before {
  content: "✓";
}

/* Кнопка перехода вперёд + таймер под ней — колонкой, чтобы таймер стоял
   именно под этой кнопкой, а не под всем рядом [Назад][Далее]. */
.lesson-next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.lesson-timer {
  margin: 0;
  min-height: 1.1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.lesson-timer:empty {
  min-height: 0;
}

/* --- Тест: панель, навигатор, таймер (раздел 10.3, БП-11/12) --------------- */

.attempt-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.attempt-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.1rem;
}

.attempt-timer--warning {
  color: var(--status-orange);
}

.attempt-timer--critical {
  color: var(--status-red);
}

.save-indicator {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.save-indicator--saved {
  color: var(--status-green);
}

.save-indicator--pending {
  color: var(--color-text-muted);
}

.save-indicator--error {
  color: var(--status-red);
}

.question-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.question-nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
}

.question-nav__item:hover {
  border-color: var(--color-accent);
}

.question-nav__item--answered {
  background: var(--color-accent-light);
  border-color: var(--status-green);
  color: var(--status-green);
}

.question-nav__item--current {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
}

.question-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.4rem;
  margin-bottom: 1rem;
  max-width: var(--content-width);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.question-block legend {
  padding: 0 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.question-text {
  font-weight: 600;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* --- Результат теста и разбор (раздел 10.3) -------------------------------- */

.result-banner {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-lg);
  border-left: 5px solid var(--color-border);
  background: var(--color-surface-soft);
  box-shadow: var(--shadow-card);
}

.result-banner--pass {
  border-left-color: var(--status-green);
  background: #eaf6ef;
}

.result-banner--fail {
  border-left-color: var(--status-red);
  background: var(--status-red-bg);
}

/* Поздравление внутри той же плашки — отделяется тонкой линией, а не
   вторым блоком (иначе на странице подряд шли две одинаковые карточки). */
.result-banner__congrats {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.review-item {
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-border);
  border-radius: var(--radius-lg);
  max-width: var(--content-width);
  background: var(--color-bg);
}

.review-item--correct {
  border-left-color: var(--status-green);
}

.review-item--incorrect {
  border-left-color: var(--status-red);
}

.options--review {
  list-style: none;
  padding-left: 0;
}

.options--review li {
  padding: 0.2rem 0;
}

.option--correct {
  color: var(--status-green);
  font-weight: 600;
}

.option--chosen:not(.option--correct) {
  color: var(--status-red);
}

.explanation {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* --- Обучающий гид (раздел 11.5) -------------------------------------------- */

.tour-step {
  max-width: var(--content-width);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}

/* --- Уведомления (раздел 9.1) ----------------------------------------------- */

.notification-list {
  list-style: none;
  padding-left: 0;
  max-width: var(--content-width);
}

.notification-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.notification-item--unread {
  background: var(--color-accent-light);
  font-weight: 600;
}

/* --- Диалог подтверждения завершения теста ---------------------------------- */

#submit-confirm-dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  max-width: 420px;
  box-shadow: var(--shadow-card-hover);
}

#submit-confirm-dialog::backdrop {
  background: rgba(21, 21, 21, 0.5);
}

/* --- Дашборд администратора: плитки-показатели (раздел 10.6, M6) ------------ */

.dashboard-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dashboard-tile {
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.dashboard-tile__value {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent-dark);
}

.dashboard-tile__label {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 0.35rem;
}

.dashboard-tile--warning .dashboard-tile__value { color: var(--status-orange); }
.dashboard-tile--danger  .dashboard-tile__value { color: var(--status-red); }

.dashboard-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.dashboard-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}

/* --- Страница входа / смены пароля: центрированная карточка ----------------
   Была одна из явных проблем текущего интерфейса: `.form` внутри `.app-body`
   (flex, align-items: flex-start) прижималась к левому верхнему углу вместо
   того, чтобы читаться как отдельный, самостоятельный экран входа —
   а именно так оформлена страница входа у самого HT-lab (logon.maintest.ru):
   карточка по центру, логотип сверху, крупная кнопка. `.auth-page` ставится
   на <body> только для login.html/password_change.html (см. base.html). */

.auth-page .app-body {
  min-height: 65vh;
}

.auth-page .app-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 2.25rem 2.25rem 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-card-hover);
  text-align: center;
}

.auth-card h1 {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  text-align: center;
}

.auth-card .form {
  max-width: none;
  text-align: left;
}

.auth-card .messages {
  text-align: left;
}

.auth-card .btn {
  width: 100%;
}

.auth-card__footer {
  margin-top: 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}