/* ============================================================
   Spot LMS — кастомная тема (18.08.2026)
   Современный вид: индиго-палитра, мягкие тени, живые переходы.
   Без излишеств: тонкие анимации, «дорого и спокойно».
   ============================================================ */

:root {
  --brand: #4f46e5;          /* индиго */
  --brand-dark: #4338ca;
  --brand-deep: #312e81;
  --brand-soft: #eef2ff;     /* подложка под hover/выбранное */
  --bg-body: #f6f7fb;
  --card-shadow: 0 2px 12px rgba(30, 27, 75, .07);
  --card-shadow-hover: 0 10px 28px rgba(30, 27, 75, .13);
  --radius: 16px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

body {
  background: var(--bg-body);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Шапка: тёмный градиент вместо плоского синего ---------- */
.navbar {
  background: linear-gradient(120deg, var(--brand-deep) 0%, var(--brand) 55%, #6d28d9 100%) !important;
  box-shadow: 0 2px 14px rgba(49, 46, 129, .35);
}
.navbar-brand {
  font-weight: 800;
  letter-spacing: -.02em;
}
.nav-link {
  border-radius: 10px;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav-link:hover { background: rgba(255, 255, 255, .12); }
.nav-link.active { background: rgba(255, 255, 255, .18); font-weight: 600; }
.nav-link:focus-visible { outline: none; box-shadow: 0 0 0 .18rem rgba(255, 255, 255, .35); }

/* Пункты меню на десктопе: зазор между ними, чтобы подсветки не слипались */
/* min-width:0 — разрешаем шапке и списку сжиматься, иначе пункты распирают шапку;
   overflow:hidden — не влезшие пункты обрезаются, а не рисуются поверх соседей;
   white-space:nowrap — текст пункта не переносится на 2 строки при сжатии */
#nav, #navMain { min-width: 0; }
#navMain { overflow: hidden; }
#navMoreWrap { flex-shrink: 0; margin-left: 8px; margin-right: 10px; }
.navbar-nav .nav-link { white-space: nowrap; }
/* Пункты не сжимаются при нехватке места — их ширина остаётся честной для fitNav */
.navbar-expand-sm .navbar-nav .nav-item { flex-shrink: 0; }
@media (min-width: 576px) {
  .navbar-expand-sm .navbar-nav { gap: 6px; }
  .navbar-expand-sm .navbar-nav .nav-link { padding: .5rem .95rem; }
}

/* Кнопка «Ещё ▾»: тот же стиль и высота, что у «ЛК»/«Выйти» */
.btn-more {
  padding: .45rem .85rem;
}
.btn-more:hover { background: rgba(255, 255, 255, .12); }

/* Выпадающий список «Ещё»: светлый, на тёмной шапке */
.nav-more-menu {
  border: none;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(30, 27, 75, .2);
  padding: .4rem;
  min-width: 230px;
}
.nav-more-menu .nav-link {
  color: #1f2937;
  border-radius: 10px;
  padding: .55rem 1rem;
  font-weight: 500;
}
.nav-more-menu .nav-link:hover { background: var(--brand-soft); color: var(--brand-dark); }
.nav-more-menu .nav-link.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.nav-more-menu .nav-link .badge { vertical-align: 1px; }

/* Кнопка «Выйти»: не прижата, по центру строки, чуть шире */
.btn-logout {
  color: rgba(255, 255, 255, .92);
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 10px;
  padding: .45rem 1.15rem;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.2;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .16s var(--ease);
}
.btn-logout:hover, .btn-logout:focus, .btn-logout.active {
  background: #fff;
  border-color: #fff;
  color: var(--brand-deep);
  transform: translateY(-1px);
}
.btn-logout:active { transform: translateY(0); }
/* Кнопка «ЛК» (личный кабинет): компактнее, но не уже «Выйти» */
.btn-lk { padding: .45rem .7rem; }
@media (max-width: 575.98px) {
  .btn-logout { width: 100%; text-align: center; }
}

/* ---------- Карточки ---------- */
.card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}

/* Кликабельные карточки/пункты списка: лёгкий подъём при наведении */
a.card, a.list-group-item, .list-group-item-action {
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
a.card:hover, .list-group-item-action:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--brand);
}

/* ---------- Кнопки: живой отклик ---------- */
.btn {
  border-radius: 12px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(79, 70, 229, .32);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(79, 70, 229, .25); }
.btn-outline-primary {
  color: var(--brand);
  border-color: #c7d2fe;
}
.btn-outline-primary:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(79, 70, 229, .18);
}
.btn-outline-primary:active { transform: translateY(0); }
.btn-outline-danger:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(220, 53, 69, .18); }
.btn-outline-danger:active { transform: translateY(0); }
.btn-outline-light:hover { transform: translateY(-1px); }
.btn-lg { border-radius: 14px; }

/* ---------- Формы ---------- */
.form-control, .form-select {
  border-radius: 12px;
  border-color: #e2e5f0;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .22rem rgba(79, 70, 229, .15);
}

/* ---------- Варианты ответа в тесте ---------- */
.option-btn {
  border-radius: 14px;
  border-width: 1.5px;
  border-color: #dfe3f2;
  background: #fff;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease),
              background-color .15s var(--ease), border-color .15s var(--ease);
}
.option-btn:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(79, 70, 229, .14);
}
.option-btn:active { transform: translateY(0); }
.option-btn.active {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(79, 70, 229, .3);
}

/* ---------- Появление вопроса: лёгкий fade-up ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise-in { animation: riseIn .38s var(--ease) both; }

/* ---------- Прогресс теста ---------- */
.progress { border-radius: 99px; background: #e8eaf6; }
.progress-bar {
  background: linear-gradient(90deg, var(--brand), #6d28d9);
  border-radius: 99px;
  transition: width .35s var(--ease);
}

/* ---------- Кнопка «Наверх» ---------- */
#backToTop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1050;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(49, 46, 129, .35);
}
#backToTop:hover { transform: translateY(-2px); }

/* ---------- Адаптивная шапка: пункты меню не переносятся на новую строку ---------- */
.navbar-collapse { flex-wrap: nowrap; }

/* ---------- Мультивыбор в назначениях ---------- */
.msel { position: relative; }
.msel-btn {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e5f0;
  border-radius: 12px;
  padding: .375rem .75rem;
  font-size: 1rem;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.msel-btn:hover { border-color: var(--brand); }
.msel-btn:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 .22rem rgba(79, 70, 229, .15); }
.msel-btn::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.msel-menu {
  display: none;
  position: absolute;
  z-index: 1060;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: none;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(30, 27, 75, .18);
  padding: .4rem;
}
.msel-menu.open { display: block; }
.msel-search {
  width: 100%;
  border: 1px solid #e2e5f0;
  border-radius: 10px;
  padding: .4rem .7rem;
  font-size: .9rem;
  margin-bottom: .35rem;
  background: #f8f9fe;
}
.msel-search:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 .18rem rgba(79, 70, 229, .12); }
.msel-items { max-height: 220px; overflow-y: auto; }
.msel-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 10px;
  padding: .5rem .8rem;
  font-size: .92rem;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msel-item:hover { background: #f3f4fb; }
.msel-item.selected {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 600;
}
.msel-empty { padding: .6rem .8rem; color: #6b7280; font-size: .88rem; }

/* Списки материалов/тестов в таблице назначений: навёл — раскрылось */
.asg-pop {
  position: relative;
  display: inline-block;
  border-bottom: 1px dashed #c7d2fe;
  cursor: default;
  font-weight: 600;
  color: var(--brand-dark);
}
.asg-pop-list {
  display: none;
  position: absolute;
  z-index: 1050;
  top: 100%;
  left: 0;
  min-width: 220px;
  max-width: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(30, 27, 75, .18);
  padding: .45rem .7rem;
  font-weight: 400;
  color: #1f2937;
}
.asg-pop-list span {
  display: block;
  padding: .2rem 0;
  border-bottom: 1px solid #f1f3fa;
  font-size: .85rem;
  white-space: normal;
}
.asg-pop-list span:last-child { border-bottom: none; }
.asg-pop:hover .asg-pop-list, .asg-pop:focus-within .asg-pop-list { display: block; }

/* Кнопка «Назначить»: всегда в одну строку */
.btn-assign { white-space: nowrap; }

/* Компактная кнопка-иконка (удалить слушателя ✕) */
.btn-icon { padding: .25rem .55rem; line-height: 1.2; }

/* ---------- Мелочи ---------- */
h1.h3, h2.h5, .h6 { letter-spacing: -.015em; }
.stat-num { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.table thead th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  color: #6b7280; border-bottom-width: 1px;
}
.list-group-item { border-color: #eef0f8; }
.badge { border-radius: 8px; }

/* Лёгкая тень-подложка под шапкой таблиц/форм */
.card .table-responsive { border-radius: 12px; }

/* ---------- Видео-плеер ---------- */
.video-frame { border-radius: 16px; overflow: hidden; box-shadow: var(--card-shadow); }
.video-frame iframe { border: 0; }

/* ---------- Чтение материала (PDF в браузере) ---------- */
.reader { max-width: 920px; margin: 0 auto; }
.reader-pages .pdf-page {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 16px rgba(30, 27, 75, .1);
  margin-bottom: 14px;
  overflow: hidden;
}
.pdf-page-ph { height: 900px; }
.pdf-canvas { display: block; margin: 0 auto; }

.reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(30, 27, 75, .12);
  z-index: 1050;
}
.reading-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), #6d28d9);
  transition: width .15s linear;
}

@media (max-width: 576px) {
  .stat-num { font-size: 1.6rem; }
  .navbar .container { padding-left: 10px; padding-right: 10px; }
  .option-btn { padding: .9rem 1rem; }
}

/* ---------- AOS-появление: скрытие ТОЛЬКО если JS добавил aos-init ----------
   (если aos.js не загрузился/упал — контент остаётся видимым, без риска «пустых страниц») */
[data-aos].aos-init { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
[data-aos].aos-init.aos-animate { opacity: 1; transform: none; }

/* ---------- Мобильное меню: пункты с отступом внутри подсветки ---------- */
@media (max-width: 575.98px) {
  .navbar-nav { gap: 3px; padding-top: 6px; }
  .navbar-nav .nav-link { padding: .65rem 1.1rem; }
}

/* ---------- Таблицы: обрезка и компактность ТОЛЬКО на телефоне, на десктопе всё целиком ---------- */
@media (max-width: 767.98px) {
  .table th, .table td { padding: .45rem .5rem; }
  .table td.cell-title { max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .table td.cell-name { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .table td.cell-truncate { max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Меню действий в таблицах (слушатели/методисты): единая ширина пунктов */.act-menu { min-width: 200px; }
.act-menu .dropdown-item { padding: 0.45rem 1rem; }

/* Компания в списке слушателей: не раздувает строку */.emp-company-sel { max-width: 180px; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Липкие колонки в таблицах: ФИО слева, Действия справа — видны при любой ширине окна */.sticky-left, .sticky-right { position: sticky; background: #fff; z-index: 1; }.sticky-left { left: 0; }.sticky-right { right: 0; box-shadow: -6px 0 8px -8px rgba(0,0,0,.25); }.table-responsive thead .sticky-left, .table-responsive thead .sticky-right { z-index: 2; }
.table { min-width: 520px; }
@media (max-width: 575.98px) { .table { min-width: 0; } }

/* Слушатели: пропорции колонок (ФИО уже, компания — нормальная ширина) */.emp-fio { width: 24%; min-width: 150px; }.emp-company { width: 190px; }.emp-company-sel { max-width: 100%; }

/* Кнопка «Ещё» в шапке: ровно по высоте и центру как ЛК/Выйти */.btn-more { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }

/* Кнопка «Ещё»: центрируем в обёртке — ровно с ЛК/Выйти */#navMoreWrap { display: flex; align-items: center; }

/* Поле даты в назначениях: та же высота/стиль, что у msel-кнопок */.asg-date {
  width: 100%;
  background: #fff;
  border: 1px solid #e2e5f0;
  border-radius: 12px;
  padding: .375rem .75rem;
  font-size: 1rem;
  color: #1f2937;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.asg-date:hover { border-color: var(--brand); }
.asg-date:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 .22rem rgba(79, 70, 229, .15); }
.asg-date-hint { font-size: .75rem; }