/* profile_select.css — единый селектор выбора сотрудника с аватарками.
   Стиль портирован из сайдбара тикета на карте абонентов (mtk-ps-*).
   Подключается ко всем местам выбора сотрудника в биллинге (build 1478). */
.psel { position: relative; }
.psel-trigger {
  width: 100%; display: flex; align-items: center; gap: 8px; background: #fff;
  /* build 1570: высота = form-control-sm (~31px), вровень с поиском/периодом/областью */
  border: 1px solid #ced4da; border-radius: 8px; padding: 3px 10px; font-size: .82rem;
  cursor: pointer; text-align: left; min-height: 31px; color: #212529;
}
.psel-trigger:focus-visible { outline: 2px solid var(--brand-primary, #43b77a); outline-offset: 1px; }
.psel-trigger[disabled] { cursor: default; background: #f3f4f6; color: #888; }
.psel-trig { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.psel-trig-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psel-trig-empty { color: #888; flex: 1 1 auto; }
.psel-chev { margin-left: auto; color: #888; font-size: .7rem; flex-shrink: 0; }
/* build 1570: аватар в триггере — компактный, чтобы не распирал высоту 31px */
.psel-trigger .psel-av { width: 22px; height: 22px; }
.psel-av { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.psel-av-ini {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: .72rem;
}
/* Меню: по умолчанию position:absolute внутри .psel; при портировании в body — fixed
   (координаты ставит JS), чтобы не обрезалось overflow-контейнерами. */
.psel-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: #fff;
  border: 1px solid #dee2e6; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.14);
  z-index: 3000; overflow: hidden; min-width: 220px;
}
.psel-menu.psel-menu-up { top: auto; bottom: calc(100% + 4px); box-shadow: 0 -6px 20px rgba(0,0,0,.16); }
.psel-menu.psel-menu-fixed { position: fixed; left: auto; right: auto; }
.psel-search {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid #eef0f3; color: #888;
}
.psel-search input { border: 0; outline: 0; flex: 1 1 auto; font-size: .82rem; background: transparent; color: inherit; }
.psel-list { max-height: 280px; overflow-y: auto; padding: 4px; }
.psel-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.psel-item:hover { background: rgba(67,183,122,.08); }
.psel-item.sel { background: rgba(67,183,122,.14); }
.psel-item-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.psel-item-name { font-size: .84rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psel-item-role { font-size: .72rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psel-check { color: var(--brand-primary, #43b77a); opacity: 0; font-size: .8rem; flex-shrink: 0; }
.psel-item.sel .psel-check { opacity: 1; }
/* build 1552: кружок с кол-вом сделок справа */
.psel-item-count {
  flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: #e9ecef; color: #495057; font-size: .72rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
[data-bs-theme="dark"] .psel-item-count, body.dark-theme .psel-item-count { background: #2a2f37; color: #adb5bd; }
.psel-empty-hint { padding: 12px; text-align: center; color: #94a3b8; font-size: .8rem; }

/* Тёмная тема — оба селектора (attr + класс), как принято в проекте */
[data-bs-theme="dark"] .psel-trigger, body.dark-theme .psel-trigger { background: #22262c; border-color: #3a3f47; color: #e4e6eb; }
[data-bs-theme="dark"] .psel-trigger[disabled], body.dark-theme .psel-trigger[disabled] { background: #23272e; color: #8b95a3; }
[data-bs-theme="dark"] .psel-menu, body.dark-theme .psel-menu { background: #1e2228; border-color: #3a3f47; }
[data-bs-theme="dark"] .psel-search, body.dark-theme .psel-search { border-color: #3a3f47; }
[data-bs-theme="dark"] .psel-search input, body.dark-theme .psel-search input { color: #e4e6eb; }
[data-bs-theme="dark"] .psel-item:hover, body.dark-theme .psel-item:hover { background: rgba(67,183,122,.15); }
[data-bs-theme="dark"] .psel-item.sel, body.dark-theme .psel-item.sel { background: rgba(67,183,122,.22); }
[data-bs-theme="dark"] .psel-item-role, body.dark-theme .psel-item-role { color: #8b95a3; }

/* build 1550: мобильная адаптация — крупнее тач-таргеты, меню шире */
@media (max-width: 575.98px) {
  .psel-trigger { min-height: 44px; font-size: 16px; padding: 8px 11px; }
  .psel-menu { min-width: 0; }
  .psel-menu.psel-menu-fixed { left: 8px !important; right: 8px !important; max-width: calc(100vw - 16px); }
  .psel-search input { font-size: 16px; }  /* iOS не зумит при фокусе */
  .psel-item { padding: 10px 9px; }
  .psel-item-name { font-size: .95rem; }
  .psel-list { max-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
  .psel-item, .psel-trigger { transition: none; }
}