/* packages/ui/formwidgets.css
 *
 * Составные виджеты формы настроек: выбор людей (`peoplefield.js`), редактор
 * групп «Кто чью команду видит» (`scopefield.js`) и конструктор расписания
 * недельного отчёта (`schedulefield.js`).
 *
 * Ни одного литерального цвета — только токены темы: у консоли один источник
 * палитры, и виджет, покрасивший себя мимо него, разъедется с соседями при
 * первой же правке темы.
 */

/* --- выбор людей ---------------------------------------------------------- */

.pf {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  min-width: 0;
}

.pf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  align-items: center;
}

.pf-empty {
  color: var(--ink-3);
  font-size: .8125rem;
}

.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1875rem .25rem .1875rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--ink);
  max-width: 100%;
}

.pf-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-chip-x {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 .25rem;
  border-radius: 999px;
}

.pf-chip-x:hover {
  color: var(--err);
}

.pf-chip-x:focus-visible,
.pf-hit:focus-visible,
.sc-add:focus-visible,
.sc-drop:focus-visible,
.sch-switch:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.pf-box {
  display: flex;
}

.pf-input {
  width: 100%;
  padding: .375rem .5rem;
  border: 1px solid var(--border);
  border-radius: .375rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .8125rem;
}

.pf-input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -1px;
}

/* Список подсказок перекрывает соседние строки формы, поэтому он всплывает
 * над ними, а не раздвигает их: раздвигание уводило бы поле из-под курсора
 * на каждой букве. */
.pf-pop {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: .25rem;
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--border-2);
  border-radius: .375rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.pf-hit {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .375rem .5rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .8125rem;
  text-align: left;
  cursor: pointer;
}

.pf-hit:hover {
  background: var(--blue-wash);
}

.pf-hit-who {
  display: flex;
  flex-direction: column;
  gap: .0625rem;
  min-width: 0;
}

.pf-hit-role {
  color: var(--ink-3);
  font-size: .75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* «Уже не работает» — предупреждение, а не подпись: этот человек в группе
 * доступа почти наверняка ошибка. */
.pf-hit-gone {
  color: var(--warn);
  font-size: .75rem;
}

.pf-hit-id {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: .75rem;
  flex: none;
}

.pf-note {
  padding: .375rem .5rem;
  color: var(--ink-2);
  font-size: .75rem;
}

/* --- группы «руководитель → сотрудники» ----------------------------------- */

.sc {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.sc-list {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.sc-empty {
  margin: 0;
  color: var(--ink-2);
  font-size: .8125rem;
}

.sc-group {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .625rem .75rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--surface-3);
}

.sc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}

.sc-title {
  color: var(--ink-2);
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sc-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: .5rem;
  align-items: start;
}

.sc-label {
  color: var(--ink-2);
  font-size: .8125rem;
  padding-top: .375rem;
}

.sc-warn {
  color: var(--warn);
  font-size: .75rem;
}

.sc-warn:empty {
  display: none;
}

.sc-add,
.sc-drop,
.sch-switch {
  border: 1px solid var(--border-2);
  border-radius: .375rem;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: .8125rem;
  padding: .25rem .625rem;
  cursor: pointer;
}

.sc-add {
  align-self: flex-start;
  color: var(--blue);
  border-color: var(--blue);
}

.sc-add:hover,
.sch-switch:hover {
  background: var(--blue-wash);
}

.sc-drop:hover {
  color: var(--err);
  border-color: var(--err);
}

.sc-raw:empty {
  display: none;
}

.sc-raw {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: .5rem .75rem;
  border: 1px dashed var(--border-2);
  border-radius: .5rem;
}

.sc-raw-note {
  margin: 0;
  color: var(--warn);
  font-size: .75rem;
}

.sc-raw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.sc-raw-text {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--ink);
  overflow-x: auto;
}

/* --- расписание недельного отчёта ----------------------------------------- */

.sch {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.sch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
}

.sch-label {
  color: var(--ink-2);
  font-size: .8125rem;
}

.sch-select {
  padding: .375rem .5rem;
  border: 1px solid var(--border);
  border-radius: .375rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .8125rem;
}

.sch-select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -1px;
}

.sch-said {
  color: var(--ink);
  font-size: .8125rem;
}

.sch-note {
  color: var(--ink-3);
  font-size: .75rem;
}

/* Не подпись, а предупреждение: это состояние соответствует сломанному
 * боевому значению, и выглядеть как пояснение оно не должно. */
.sch-warn {
  color: var(--warn);
  font-size: .75rem;
}

.sch-switch {
  align-self: flex-start;
}