/* ==========================================================================
   Мобильная адаптация ЛК ИНОПР.
   Подключается после bootstrap на всех страницах:
   vendor/head.php, cards/vendor/head.php, quiz-take.php, fundraiser_report.php.
   ========================================================================== */

main {
  overflow-wrap: break-word;
}

/* Раскрытое меню не должно обрезаться на низких экранах:
   html/body имеют overflow: hidden (vendor/navbar.php). */
@media (max-width: 991.98px) {
  .navbar-collapse {
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Карточки повторения: длинный текст скроллится, а не режется. */
.flip-container .flip-front,
.flip-container .flip-back {
  overflow-y: auto;
}

@media (max-width: 575.98px) {
  /* Крупный базовый шрифт (body.fs-5) на телефонах только распирает вёрстку. */
  body.fs-5 {
    font-size: 1rem !important;
  }

  /* Шапки страниц: заголовок и кнопки переносятся, а не наезжают друг на друга. */
  main > .d-flex {
    flex-wrap: wrap;
  }

  /* Карточка профиля: длинное ФИО не наезжает на бейдж статуса. */
  main .d-flex:has(> .me-auto) {
    flex-wrap: wrap;
  }
  main .d-flex > .me-auto {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Текстовые блоки во flex-строках должны сжиматься... */
  main .d-flex > .flex-grow-1 {
    min-width: 0;
  }

  /* ...а короткие метки с nowrap — нет (иначе текст вылезет на соседей). */
  main .d-flex > .text-nowrap {
    flex-shrink: 0;
  }

  /* Карточка итогового теста: бейдж + результат + кнопка. */
  main [data-quiz-action].d-flex {
    flex-wrap: wrap;
  }

  /* Поиск в «Правах» и «Управлении тестами». */
  main .d-flex:has(> #caps-search),
  main .d-flex:has(> #newbie-search) {
    flex-wrap: wrap;
  }
  #caps-search,
  #newbie-search {
    max-width: 100% !important;
    flex: 1 1 100%;
  }

  /* Форма запуска теста: фиксированные блоки на всю ширину. */
  main .d-flex.flex-wrap > div[style*="min-width:230px"],
  main .d-flex.flex-wrap > div[style*="width:100px"] {
    width: 100% !important;
    min-width: 0 !important;
  }
  main .d-flex.flex-wrap > div.d-flex.gap-2 {
    width: 100%;
    flex-wrap: wrap;
  }
  main .d-flex.flex-wrap > div.d-flex.gap-2 > .btn {
    flex: 1 1 auto;
  }

  /* Модерация: кнопки «Принять»/«Отклонить» отдельной строкой. */
  #pending-list > .d-flex {
    flex-wrap: wrap;
  }
  #pending-list > .d-flex > .d-flex {
    width: 100%;
  }
  #pending-list > .d-flex > .d-flex .btn {
    flex: 1;
  }

  /* Таблицы: плотнее, чтобы больше влезало до горизонтального скролла. */
  .table > :not(caption) > * > * {
    padding: .35rem .45rem;
  }

  /* quiz-take: шапка с таймером и низ формы. */
  .sticky-top .container.d-flex {
    flex-wrap: wrap;
  }
  .sticky-top .container.d-flex > span:first-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #quiz-form > .d-flex {
    flex-wrap: wrap;
    gap: .5rem;
  }
  #quiz-form > .d-flex .btn {
    width: 100%;
  }

  /* Карточки (FSRS): настройки в столбик, шапка переносится. */
  .modal .settings-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .modal .settings-row .settings-label {
    min-width: 0;
  }
  .modal .settings-hint {
    margin-top: 0;
  }
  .retention-labels {
    gap: 6px;
  }
  .top-bar {
    flex-wrap: wrap;
  }
  .flip-container .flip-card,
  .flip-container .flip-front,
  .flip-container .flip-back {
    min-height: 420px;
  }
  .flip-container .card-front-content {
    justify-content: flex-start;
    padding: 48px 18px 24px;
  }
  /* Длинное название колоды не наезжает на счётчик карточек. */
  .flip-container .card-section-label {
    max-width: calc(100% - 80px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Отчёт по сборам. */
  .toolbar {
    flex-wrap: wrap;
  }
  .report {
    padding: 0 12px 32px;
  }
  .report table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  /* Список заседаний: дата переносится, а не сжимает заголовок. */
  main .d-flex > .text-nowrap[style*="min-width:105px"] {
    min-width: 0 !important;
    white-space: normal !important;
    flex: 0 0 6.8em;
  }

  /* Экран учёта: панель статистики без жёсткой ширины. */
  main .bg-body[style*="min-width:250px"] {
    min-width: 0 !important;
  }

  /* Колоды карточек — в одну колонку. */
  .deck-grid {
    grid-template-columns: 1fr;
  }
}