/* Общие стили публичных страниц и кабинета bizdiler.com.
   Появился 2026-08-11 вместе с полосой прокрутки: до этого у branding не
   было ни одного CSS-файла — всё жило в inline-блоках каждой страницы. */

/* ---------------------------------------------------------------------------
   Полоса прокрутки — ЕДИНЫЙ вид в трёх продуктах (website, branding, SalesMap;
   решение пользователя 2026-08-11).

   Цвета записаны ЛИТЕРАЛАМИ, а не токенами, намеренно: наборы у продуктов свои
   (ink-300 = #9aa3b1 в website/branding, #aeb7c4 в SalesMap), и через токены
   полосы разъехались бы по оттенку — а вся суть правки в том, чтобы они
   выглядели одинаково. Меняя цвет, правь во всех трёх файлах.

   Ползунок нейтральный (серо-синий ink), а НЕ янтарный: на длинных таблицах
   кабинета фирменная полоса перетягивает внимание с данных.

   Рамка 2px цвета дорожки визуально сужает ползунок до 6px, но полоса
   сохраняет все 10px площади захвата курсором — тонкая полоса, в которую
   трудно попасть, хуже системной.

   Firefox понимает только `scrollbar-width`/`scrollbar-color`, WebKit/Blink —
   псевдоэлементы; вместе покрывают всё, что нас касается. Обе строки для
   Firefox наследуемые, поэтому хватает `html` — вложенные скроллящиеся блоки
   подхватят их сами. Дорожка НЕ прозрачная: на прозрачной в Chrome сквозь
   полосу просвечивает контент и ползунок теряется.
--------------------------------------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: #9aa3b1 #f7f9fa;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: #f7f9fa;
}

::-webkit-scrollbar-thumb {
  background: #9aa3b1;
  border: 2px solid #f7f9fa;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #7c8696;
}

/* Тёмные поверхности (сайдбар кабинета SalesMap, тёмные секции лендингов):
   светлый ползунок на ink-900 выглядит грязным пятном, поэтому своя пара
   цветов. Вешается классом на сам прокручиваемый элемент. */
.scrollbar-dark {
  scrollbar-color: #3e4855 #11151c;
}

.scrollbar-dark::-webkit-scrollbar-track,
.scrollbar-dark::-webkit-scrollbar-corner {
  background: #11151c;
}

.scrollbar-dark::-webkit-scrollbar-thumb {
  background: #3e4855;
  border-color: #11151c;
}

.scrollbar-dark::-webkit-scrollbar-thumb:hover {
  background: #5b6675;
}

/* ---------------------------------------------------------------------------
   Поиск по длинному <select> (scripts/searchable-select.js).

   Понадобилось из-за стран: их 249, и нативным списком свою не найти. Скрипт
   оставляет оригинальный <select> носителем значения, а поверх рисует кнопку
   со стрелкой и панель с поиском — здесь только вид, никакой логики.

   ЗАКРЫТОЕ СОСТОЯНИЕ ОБЯЗАНО ЧИТАТЬСЯ КАК СЕЛЕКТ. Первая версия рисовала
   обычное поле ввода, и оно было неотличимо от соседнего «Company name»:
   человек не понимал, что значение выбирается из списка, и печатал своё.
   Отсюда стрелка вниз и курсор-указатель.

   Цвета литералами по той же причине, что у полосы прокрутки: наборы токенов
   у продуктов разные, а выглядеть это должно одинаково.
--------------------------------------------------------------------------- */
.bd-ss { position: relative; }

/* Кнопка наследует класс селекта (.fld), поэтому здесь только раскладка:
   текст слева, стрелка справа, как в нативном поле. */
.bd-ss-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}

.bd-ss-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Плейсхолдер приглушён — иначе «ничего не выбрано» читается как выбранное. */
.bd-ss-btn.is-empty .bd-ss-label { color: #9aa3b1; }

.bd-ss-arrow {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #9aa3b1;
  transition: transform .15s ease;
}

.bd-ss-btn[aria-expanded="true"] .bd-ss-arrow { transform: rotate(180deg); }

/* Форму не отправили из-за пустого обязательного поля: сам select прозрачный,
   и подсказка браузера всплывает «в пустоте» — подсвечиваем кнопку. */
.bd-ss-btn.is-invalid { border-color: #b3261e; }

.bd-ss-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid #e6eaee;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(17, 21, 28, .12);
}

.bd-ss-search {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  color: #11151c;
  background: #f7f9fa;
  border: 1px solid #e6eaee;
  border-radius: 8px;
  outline: none;
}

.bd-ss-search:focus { border-color: #ffc83e; background: #fff; }

.bd-ss-list {
  /* ~240px — примерно шесть строк: список заметно прокручиваемый, но не
     накрывает собой остальную форму. */
  max-height: 240px;
  overflow-y: auto;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.bd-ss-item {
  padding: 8px 12px;
  font-size: 15px;
  line-height: 1.4;
  color: #11151c;
  border-radius: 8px;
  cursor: pointer;
}

/* Наведение мышью и выбор с клавиатуры — ОДИН вид: две разные подсветки
   одновременно читаются как два курсора. */
.bd-ss-item:hover,
.bd-ss-item.is-active { background: #f7f9fa; }

.bd-ss-item.is-selected { font-weight: 700; }

.bd-ss-empty {
  padding: 10px 12px;
  font-size: 14px;
  color: #9aa3b1;
}