/*
 * Общий CSS для labsearch.ru и miservis.ru.
 * Подключается ПОСЛЕ bootstrap.min.css в base_labsearch.html / base_miservis.html.
 * Единый акцентный цвет для обоих сайтов — см. docs/redesign/02_design_system.md.
 */

:root {
  /* --bs-body-bg НЕ переопределяем — оставляем белый Bootstrap-дефолт.
     Серый "холст" (--bs-body-bg) в Bootstrap 5.3 наследуют по умолчанию и
     .form-control/.form-select, и .card (--bs-card-bg: var(--bs-body-bg)) —
     так что просто перекрасив body, получаешь серые инпуты и карточки без
     контраста, а не белые "поверхности" на сером фоне. Возвращаться к этой
     идее — только вместе с отдельным --bs-card-bg и когда на сайте появится
     достаточно карточных страниц (Этап 2/3), чтобы это было оправдано. */
  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .375rem;

  --bs-primary: #0a6ebd;
  --bs-primary-rgb: 10, 110, 189;
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: #085897;
  --bs-link-hover-color-rgb: 8, 88, 151;
}

/*
 * Скомпилированный bootstrap.min.css с CDN хардкодит цвет внутри компонентных
 * переменных (--bs-btn-bg, --bs-form-*), а не выводит его из --bs-primary — так
 * устроена CDN-сборка без пересборки из Sass. Поэтому кнопки/чекбоксы/фокус
 * инпутов перекрашиваем отдельно. Ссылки (<a>), .text-primary, .bg-primary,
 * .border-primary, .text-bg-primary уже корректно следуют за --bs-primary(-rgb)
 * из коробки — их трогать не нужно.
 */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: var(--bs-link-hover-color);
  --bs-btn-active-bg: var(--bs-link-hover-color);
  --bs-btn-active-border-color: var(--bs-link-hover-color);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* ===== Общая разметка контента (перенесено из base-шаблонов без изменений) ===== */
.content {
  padding: 1rem 1rem;

  /* flex для увеличения размера, чтобы сдвинуть вниз футер на больших экранах */
  min-height: 75vh;
  display: flex;
  flex-direction: column;
}
@media (max-width: 767.98px) {
  .content {
    min-height: auto; /* мобильные без flex */
    display: block;
  }
}

/* ===== Старые табличные классы (перенесено без изменений; заменяются в Этапе 2/3) ===== */
.data_table, .details_table { width: 100%; padding: 5px 10px; font-size: 12px; }
.data_table tr:hover { background-color: #eee }
.data_table td { padding: 3px 5px; }
.details_table tr:hover { background-color: #eee }
.details_table td:first-child { width: 300px; }
.details_table td { padding: 3px 5px; }

.dl-table dt {
  font-weight: 600;
  color: #444;
}
.dl-table dd {
  margin: 2px 0 6px 30px;
  word-break: break-word;
}

.dl-inline {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 6px 12px;
  margin: 0;
}
.dl-inline > dt {
  font-weight: 600;
  color: #444;
  margin: 0;
}
.dl-inline > dd {
  margin: 0;
  word-break: break-word;
}

.nowrap { white-space: nowrap; }

/* ===== Навбар / мультиселект (перенесено без изменений) ===== */
input::placeholder, .multiselect-dropdown span.placeholder { color: #888 !important; }

/* Bootstrap 5.3 (в 5.0.2, который был раньше, этого не было) добавил свой компонент
   "Placeholders" (skeleton-загрузка) с классом .placeholder: background-color:currentcolor
   + opacity:.5 — фон = цвету текста. static/multiselect-dropdown.js независимо использует
   тот же класс .placeholder для подсказки "выберите значения" — после апгрейда Bootstrap
   текст и фон совпадали (оба #888), подсказка становилась невидимым серым прямоугольником.
   Глушим здесь, а не трогаем сам multiselect-dropdown.js. */
.multiselect-dropdown span.placeholder {
  background-color: transparent;
  opacity: 1;
  animation: none;
  cursor: default;
}

/* Белый текст при наведении — только для ссылок верхнего уровня (тёмный фон
   .navbar-dark). .dropdown-item живёт в открывшемся .dropdown-menu — а у него
   светлый фон по умолчанию (Bootstrap), так что то же самое правило делало
   текст пункта меню белым на белом при наведении — почти нечитаемо. */
.navbar a:hover:not(.dropdown-item), .navbar a:visited:hover:not(.dropdown-item) {
  color: white !important;
}
.navbar .btn-outline-light:hover {
  color: #000 !important;
  background-color: #fff !important;
}

.multiselect-dropdown span.optext { margin-right: 30px !important; }
/* исправление multiselect, чтобы длинный текст не переносился после чекбокса а оставался с ним, переносится конец текста */
.multiselect-dropdown-list div {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}
.multiselect-dropdown-list input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px; /* если нужно строго по первой строке */
}
.multiselect-dropdown-list label {
  white-space: normal;
  word-break: break-word;
  flex: 1;
}

/* мобильный фикс мультиселекта в одном месте вместо повторения @media на каждой
   странице (был баг на licenses_filter.html — фиксированные 800px не схлопывались) */
@media (max-width: 767.98px) {
  .multiselect-dropdown {
    width: 100% !important;
    max-width: 100%;
  }
}

/* =====================================================================
   Новые компоненты редизайна (rd-*) — используются постепенно, начиная
   с Этапа 1/2 (см. docs/redesign/04_roadmap.md). Часть страниц ещё не
   переведена и продолжает использовать классы выше.
   ===================================================================== */

.rd-data-table {
  /* 13px: компромисс между старыми 12px (в таблицах) и стандартным Bootstrap-телом ~16px.
     Не table-sm (padding .25rem = 4px) — с бóльшим шрифтом это читалось хуже, чем
     старые 12px/table-sm вместе: крупнее текст в той же тесноте. Полный .table
     без table-sm даёт padding .5rem (8px) — это и есть настоящее улучшение читаемости,
     не просто увеличение шрифта. */
  --rd-table-font-size: .8125rem;
  font-size: var(--rd-table-font-size);
}
.rd-data-table .rd-code,
.rd-code { font-family: var(--bs-font-monospace); }

/* Bootstrap .badge по умолчанию font-size: .75em — рассчитано на бейдж рядом с крупным
   текстом (заголовки, навбар), а не на наш случай: бейдж почти всегда САМО ЗНАЧЕНИЕ
   (статус, класс риска, вид лицензии) — в таблице, в dl/dd, в списке — и .75em делает
   его каждый раз заметно мельче соседнего текста. Правили это точечно уже 2 раза в разных
   местах — переносим в глобальное правило. Если где-то реально нужен маленький бейдж
   (второстепенная пометка) — обернуть в <small> (em-размер отработает правильно
   каскадом), а не полагаться на дефолт Bootstrap. */
.badge { font-size: 1em; }

.rd-filter-panel {
  background: var(--bs-tertiary-bg, #f1f3f5);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.rd-filter-panel__title {
  font-weight: 600;
  font-size: .95rem;
  color: var(--bs-secondary-color, #555);
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .75rem;
}
/* Группировка связанных полей (например регион + область поиска) — светлая
   карточка-«чип» внутри панели, а не полоса слева (была border-left: 2px solid
   black — хардкод цвета и мёртвый border-radius, который ни на что не влиял,
   т.к. виден только левый край). Чип с фоном/рамкой считывается как единый
   блок при беглом взгляде, что и есть смысл группировки. */
.rd-filter-panel .rd-filter-group {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-sm);
  padding: .6rem .75rem .55rem;
  margin: .75rem 0;
}

/* Разделитель между парами dt/dd через padding (не margin — margin между
   flex-элементами не даёт надёжного отступа, когда dt (переносится на 2-3 строки)
   и dd (одна строка или пусто) разной высоты в одной flex-линии .row). padding
   не схлопывается никогда, в отличие от margin — этого достаточно без border. */
dl.row dt {
  font-weight: 600;
  color: #212529;
  padding-top: .65rem;
}
dl.row dd {
  color: #000;
  word-break: break-word;
  padding-top: .65rem;
}
dl.row dt:first-of-type,
dl.row dd:first-of-type {
  padding-top: 0;
}

.rd-news-card .rd-news-date { font-weight: 600; }

/* Карточка-ссылка целиком (например useful_links.html) — вся card кликабельна,
   лёгкий подъём + акцентная рамка при наведении сигнализируют кликабельность. */
.rd-link-card {
  transition: box-shadow .15s ease, border-color .15s ease;
}
.rd-link-card:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
}
.rd-link-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #e8f2fa;
  color: var(--bs-primary);
  font-size: 1.25rem;
}

/* Вертикальный таймлайн (например история событий аккредитации). Каждый
   .rd-timeline-item "владеет" сегментом линии под собой через border-left —
   не нужен один сплошной абсолютно спозиционированный элемент на весь
   контейнер, само подстраивается под переменную высоту содержимого. */
.rd-timeline-item {
  position: relative;
  padding-left: 1.75rem;
  padding-bottom: 2rem;
  margin-left: .5rem;
  border-left: 2px solid var(--bs-border-color);
}
.rd-timeline-item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.rd-timeline-marker {
  position: absolute;
  left: -.5rem;
  top: .3rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--bs-primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--bs-primary);
}
/* Цвет по типу события (расширение/подтверждение — success, сокращение — danger). */
.rd-timeline-marker--success {
  background-color: var(--bs-success);
  box-shadow: 0 0 0 2px var(--bs-success);
}
.rd-timeline-marker--danger {
  background-color: var(--bs-danger);
  box-shadow: 0 0 0 2px var(--bs-danger);
}
/* Без ободка — у события нет данных области аккредитации (нечего разворачивать). */
.rd-timeline-marker--no-ring {
  box-shadow: none;
}

/* Заголовок-триггер сворачиваемого блока (например "Архивные обновления") —
   стрелка поворачивается вслед за aria-expanded, который Bootstrap сам
   переключает на data-bs-toggle="collapse" элементе, без своего JS. */
.rd-collapse-toggle .bi-chevron-down {
  transition: transform .2s ease;
}
.rd-collapse-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

/* Акцентная граница сверху у футера — вместо дефолтного серого border-top,
   единственный явный "бренд"-штрих в футере (кроме ссылок/бейджей). */
.rd-footer {
  border-top: 2px solid var(--bs-primary);
}

/* Фон навбара — вместо дефолтного Bootstrap bg-dark (#212529, нейтральный,
   никак не связан с акцентом). Подобран так, чтобы хue совпадал с --bs-primary
   (#0a6ebd), но оставался достаточно тёмным для .navbar-dark (белый текст). */
.rd-navbar {
  background-color: #1c2733;
}

/* Аккордеон с широкой таблицей (область аккредитации) внутри timeline-item.
   Границу accordion-item (в том числе у шапки-адреса) НЕ убираем — иначе адрес
   перестаёт выглядеть как раскрываемый блок и читается просто текстом. Убираем
   только горизонтальный паддинг accordion-body: таблица примыкает прямо к
   границе карточки вместо зазора, который вместе с линией таймлайна слева
   визуально путался с границей самой таблицы. */
.rd-scope-accordion .accordion-body {
  --bs-accordion-body-padding-x: 0;
}