/*
 * Тема поверх Bootstrap 5.3.
 * Порядок: bootstrap.min.css → этот файл → styles.css → responsive.css → experiment-tables.css
 *
 * Палитра: монохром + один «родственный» оттенок (аналог на цветовом круге) для success.
 * Один базовый hue (~218°), различие только в насыщенности и светлоте — визуально ровно.
 * Кнопки: тот же hue, но ниже хрома и без L как у «экранного» синего (#0d6efd) — спокойный акцент.
 */
:root,
[data-bs-theme="light"] {
  --app-h: 218;
  --app-s-strong: 16%;
  --app-s-mid: 11%;
  --app-s-soft: 7%;
  /* Акцент для заливки: чуть меньше S, чем у шапки — меньше «кричит», чем Bootstrap primary */
  --app-btn-chroma: 11%;
  --app-btn-l: 41%;
  --app-btn-l-hover: 34%;
  --app-btn-l-active: 30%;

  --app-header-bg: hsl(var(--app-h) var(--app-s-strong) 44%);
  --app-header-hover: hsl(var(--app-h) calc(var(--app-s-strong) + 2%) 37%);
  --bs-body-bg: hsl(var(--app-h) var(--app-s-soft) 97%);
  --bs-body-color: hsl(var(--app-h) var(--app-s-mid) 22%);
  --bs-primary: hsl(var(--app-h) var(--app-btn-chroma) var(--app-btn-l));
  --bs-primary-rgb: 94, 103, 116;
  --bs-secondary: hsl(var(--app-h) var(--app-s-mid) 48%);
  --bs-secondary-rgb: 115, 125, 140;
  /* success: тот же «холодный» ряд, hue +14° (аналог), та же низкая насыщенность */
  --bs-success: hsl(200 var(--app-s-mid) 40%);
  --bs-success-rgb: 86, 118, 128;
  --bs-link-color: hsl(var(--app-h) var(--app-btn-chroma) 34%);
  --bs-link-hover-color: hsl(var(--app-h) var(--app-btn-chroma) 28%);
  --bs-border-radius: 0.5rem;
  --bs-card-border-width: 0;
  --bs-border-color: hsl(var(--app-h) var(--app-s-mid) 88%);
  --bs-tertiary-bg: hsl(var(--app-h) var(--app-s-soft) 93%);
  --bs-focus-ring-color: hsl(var(--app-h) var(--app-btn-chroma) 40% / 0.32);
}

/* Явно перебиваем переменные Bootstrap у кнопок (в .min.css зашит яркий #0d6efd) */
.btn-primary {
  --bs-btn-color: #f6f7f9;
  --bs-btn-bg: hsl(var(--app-h) var(--app-btn-chroma) var(--app-btn-l));
  --bs-btn-border-color: hsl(var(--app-h) var(--app-btn-chroma) calc(var(--app-btn-l) - 4%));
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: hsl(var(--app-h) var(--app-btn-chroma) var(--app-btn-l-hover));
  --bs-btn-hover-border-color: hsl(var(--app-h) var(--app-btn-chroma) calc(var(--app-btn-l-hover) - 2%));
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: hsl(var(--app-h) var(--app-btn-chroma) var(--app-btn-l-active));
  --bs-btn-active-border-color: hsl(var(--app-h) var(--app-btn-chroma) calc(var(--app-btn-l-active) - 2%));
  --bs-btn-disabled-color: rgba(255, 255, 255, 0.72);
  --bs-btn-disabled-bg: hsl(var(--app-h) var(--app-s-soft) 68%);
  --bs-btn-disabled-border-color: hsl(var(--app-h) var(--app-s-soft) 65%);
}

.btn-outline-primary {
  --bs-btn-color: hsl(var(--app-h) var(--app-btn-chroma) 30%);
  --bs-btn-border-color: hsl(var(--app-h) var(--app-btn-chroma) 52%);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: hsl(var(--app-h) var(--app-btn-chroma) var(--app-btn-l));
  --bs-btn-hover-border-color: hsl(var(--app-h) var(--app-btn-chroma) var(--app-btn-l));
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: hsl(var(--app-h) var(--app-btn-chroma) var(--app-btn-l-hover));
  --bs-btn-active-border-color: hsl(var(--app-h) var(--app-btn-chroma) var(--app-btn-l-hover));
  --bs-btn-disabled-color: hsl(var(--app-h) var(--app-s-mid) 58%);
  --bs-btn-disabled-border-color: hsl(var(--app-h) var(--app-s-mid) 82%);
}

/* Шапка сценария */
.app-navbar {
  background-color: var(--app-header-bg) !important;
  min-height: 4rem;
}

.app-navbar .navbar-brand,
.app-navbar .nav-link {
  color: #fff !important;
}

.app-navbar .navbar-brand:hover,
.app-navbar .nav-link:hover {
  color: #fff !important;
  background-color: var(--app-header-hover);
}

/* Полоса шагов — тот же фон, что и вся шапка (без отдельного «светлого» блока) */
.app-navbar .nav-link.headerA {
  background-color: transparent !important;
}

.app-navbar .nav-link.headerA:hover {
  background-color: var(--app-header-hover) !important;
}

/* Шаги в шапке: светлый текст; текущий — белый + лёгкая подсветка на общем фоне */
.app-navbar .nav-link.headerA.headerCompleted {
  color: hsl(var(--app-h) 42% 86%) !important;
}

.app-navbar .nav-link.headerA.headerCurrent {
  background-color: hsl(0 0% 100% / 0.16) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: 0 0 12px rgb(255 255 255 / 0.35);
}

/* Следующий этап по прогрессу (когда открыта другая страница) */
.app-navbar .nav-link.headerA.headerNext {
  background-color: hsl(0 0% 100% / 0.08) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.app-navbar .nav-link.headerA.headerNext:hover {
  background-color: hsl(0 0% 100% / 0.16) !important;
}

.app-navbar .nav-link.headerA.headerUnavailable {
  color: rgba(255, 255, 255, 0.4) !important;
}

.app-navbar .nav-link.headerA.headerCompleted:hover {
  color: hsl(var(--app-h) 35% 94%) !important;
}

.app-navbar .nav-link.headerA.headerCurrent:hover {
  color: #fff !important;
  background-color: hsl(0 0% 100% / 0.24) !important;
}

.app-navbar .nav-link.headerA.headerUnavailable:hover {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Карточка этапа: тень из того же hue */
.app-stage-card {
  box-shadow:
    0 2px 14px hsl(var(--app-h) var(--app-s-mid) 30% / 0.07),
    0 0 1px hsl(var(--app-h) var(--app-s-mid) 30% / 0.05);
}

/* Нижняя панель навигации */
.app-bottom-nav {
  z-index: 1030;
  backdrop-filter: blur(8px);
  background-color: hsl(var(--app-h) var(--app-s-soft) 97% / 0.94) !important;
  border-top: 1px solid var(--bs-border-color);
}

/* Запас под sticky-панель «Назад / Далее», чтобы контент не упирался снизу */
.app-main--bottom-nav {
  padding-bottom: 6.25rem;
}

@media (min-width: 768px) {
  .app-main--bottom-nav {
    padding-bottom: 6.5rem;
  }
}

/* Балл этапа: фиксированный слот — до и после подстановки текста размеры те же (нет сдвига страницы) */
.app-stage-score-row {
  width: 100%;
  max-width: 100%;
  height: 3rem;
  min-height: 3rem;
  max-height: 3rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.app-stage-score-row .score-display {
  box-sizing: border-box;
  /* «Балл: NNN/NNN» + padding; одинаково при пустом #score (внутри всё равно есть span) */
  width: 14rem;
  max-width: min(14rem, 100%);
  height: 2.625rem;
  min-height: 2.625rem;
  max-height: 2.625rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: clamp(0.875rem, 2.5vw, 1.0625rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-stage-score-row #score:empty::before {
  content: "\00a0";
}

/* Модалка обратной связи поверх sticky-навигации (раньше z-index: 30) */
#feedbackPopUp {
  z-index: 1050 !important;
}

/* Кнопка «Далее» в неактивном состоянии — нейтральный серый той же температуры */
.btn.next-button.disabled,
.next-button.disabled {
  background-color: hsl(var(--app-h) var(--app-s-mid) 52%) !important;
  border-color: hsl(var(--app-h) var(--app-s-mid) 52%) !important;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
}

/* Поля в матрицах: не раздувать до 16px из responsive.css на всю страницу */
table.app-table input[type="number"],
table.app-table input[type="text"] {
  font-size: 0.6875rem !important;
  min-height: 0 !important;
}

/* Инфопанель этапа: JS переключает .hidden ↔ .grid */
#info.grid {
  display: grid !important;
  grid-template-columns: auto auto;
  gap: 0.125rem;
  align-content: start;
}

/* Шаги в шапке: поверх Bootstrap .nav-link */
.app-navbar .navbar-nav .nav-link.headerA {
  border-radius: 0;
  min-height: 4rem;
}

/* Профиль: контейнер под круговые диаграммы (Chart.js responsive; на xs легенда снизу — больше высоты) */
.profile-chart-host {
  position: relative;
  width: 100%;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  height: 420px;
}

@media (min-width: 768px) {
  .profile-chart-host {
    height: 360px;
  }
}

@media (min-width: 1200px) {
  .profile-chart-host {
    height: 400px;
    max-width: 100%;
  }
}

/* Профиль: контрольное занятие — селектор сложности в одной строке с названием */
.profile-exam-difficulty-select {
  min-width: 9.5rem;
}

@media (min-width: 576px) {
  .profile-exam-difficulty-select {
    min-width: 10.75rem;
  }
}