/*
 * staff.css — справочник сотрудников (webapp/staff-panel.js).
 *
 * Подключается ПОСЛЕ app.css, как modal.css, tour.css и stats.css.
 *
 * Всё здесь про одно: список длинный. Двадцать два человека двухэтажными
 * строками — это полтора экрана в карточке настроек, мимо которой надо
 * пролистать к остальным. Строка в один ряд и своя прокрутка держат
 * карточку на месте, сколько бы людей ни завели.
 */
  #staff-note { display: none; margin-top: 8px; font-size: 12.5px; color: var(--hint); }
  #staff-note.staff-err { color: var(--danger); }

  /* Своя прокрутка: карточка перестаёт расти после десятка записей.
     overscroll-behavior — чтобы прокрутка списка не утягивала за собой
     страницу настроек, когда дошли до края. */
  #staff-list {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: 6px;
  }
  #staff-list .row-item { padding: 6px 10px; margin-top: 4px; }
  /* Имя и аккаунт в один ряд; сжимается и обрывается ИМЯ — аккаунт короткий
     и по нему человека узнают. */
  #staff-list .who {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
  }
  /* Кто подавал заявки: залитая точка — да, пустая — ещё нет. Значение
     объяснено в подсказке карточки и в title самой точки. */
  #staff-list .staff-dot {
    flex: 0 0 auto;
    width: 7px; height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--hint);
    opacity: .45;
  }
  #staff-list .staff-dot.on {
    background: var(--ok);
    border-color: var(--ok);
    opacity: 1;
  }

  #staff-list .staff-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
  }
  #staff-list .sub { flex: 0 0 auto; margin: 0; font-size: 11.5px; }
  #staff-list .row-del { padding: 2px 7px; font-size: 12px; }