/* Виджет «Поставщик» — обработчик UF-поля (placement USERFIELD_TYPE).
   Вид приближен к системной плитке «Клиент» в карточке сделки Битрикс24. */
:root{
  --b24-border:#e3e7ec; --b24-border-strong:#d5dadf;
  --b24-text:#333a44; --b24-muted:#8b95a1; --b24-label:#a3acb6;
  --b24-link:#2067b0; --b24-accent:#3bc8f5; --b24-hover:#f4f7f9; --b24-input:#fafbfc;
  --supplier:#1c8a5b; --supplier-soft:#e8f5ee;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:transparent}
body{
  font-family:'Helvetica Neue',Helvetica,Arial,'Segoe UI',sans-serif;
  font-size:14px;line-height:1.4;color:var(--b24-text);
  -webkit-font-smoothing:antialiased;padding:2px;
}
.ico{width:14px;height:14px;flex:0 0 14px;color:var(--b24-muted)}
a{color:var(--b24-link);text-decoration:none;cursor:pointer}
a:hover{text-decoration:underline}

/* состояние загрузки / ошибки */
.state{padding:12px;color:var(--b24-muted);font-size:13px}
.state.err{color:#c0392b}

/* ── плитка сущности (view) ── */
.entity{
  display:flex;align-items:flex-start;gap:12px;padding:10px 12px;
  border:1px solid var(--b24-border);border-radius:8px;background:#fff;
  transition:background .12s,border-color .12s;
}
.entity:hover{background:var(--b24-hover);border-color:var(--b24-border-strong)}
.avatar{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:14px;color:#fff;letter-spacing:.3px;
  background:linear-gradient(135deg,#27a36b,#1c8a5b);
}
.entity-main{flex:1;min-width:0}
.entity-name{font-size:15px;font-weight:600;color:var(--b24-link)}
.entity-tag{
  display:inline-block;margin-left:8px;font-size:11px;font-weight:600;
  padding:1px 7px;border-radius:10px;vertical-align:middle;
  background:var(--supplier-soft);color:var(--supplier);
}
.contact-line{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px}
.sub-contacts{margin-top:8px;padding-top:8px;border-top:1px dashed var(--b24-border)}
.sub-contact{display:flex;align-items:center;gap:8px;padding:3px 0}
.sub-avatar{
  width:24px;height:24px;border-radius:50%;flex:0 0 24px;
  background:#cfd8e0;color:#5a6672;font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.sub-role{color:var(--b24-muted);font-size:12px}
.entity-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}

/* кнопки */
.btn{
  font-family:inherit;font-size:13px;cursor:pointer;border-radius:6px;
  padding:6px 12px;border:1px solid transparent;white-space:nowrap;
  transition:background .12s,border-color .12s,filter .12s;
}
.btn-ghost{background:#fff;border-color:var(--b24-border-strong);color:var(--b24-text)}
.btn-ghost:hover{background:var(--b24-hover)}
.btn-link{background:none;border:0;color:var(--b24-link);padding:4px 0}
.btn-link:hover{text-decoration:underline}
.btn-primary{background:var(--supplier);color:#fff}
.btn-primary:hover{background:#16744c}
.btn-primary:disabled{opacity:.5;cursor:default}

/* пусто */
.empty-bind{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  border:1px dashed var(--b24-border-strong);border-radius:8px;
  color:var(--b24-muted);cursor:pointer;background:var(--b24-input);
}
.empty-bind:hover{border-color:var(--supplier);color:var(--supplier)}

/* ── edit ── */
.editbox{border:1px solid var(--supplier);border-radius:8px;padding:12px;background:#fff}
.editbox .lead{font-size:12px;color:var(--b24-muted);margin-bottom:8px}
.search{
  width:100%;padding:9px 11px;border:1px solid var(--b24-border-strong);
  border-radius:6px;font-family:inherit;font-size:14px;background:var(--b24-input);
}
.search:focus{outline:none;border-color:var(--supplier);background:#fff}
.results{margin-top:8px;border:1px solid var(--b24-border);border-radius:6px;overflow:hidden}
.results:empty{display:none}
.result{display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--b24-border)}
.result:last-child{border-bottom:0}
.result:hover,.result.sel{background:var(--supplier-soft)}
.result .r-ava{width:28px;height:28px;border-radius:50%;flex:0 0 28px;background:#cfe6d8;color:#1c8a5b;font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center}
.result .r-name{font-weight:600}
.result .r-meta{color:var(--b24-muted);font-size:12px}
.create-row{padding:9px 10px;color:var(--supplier);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;background:var(--supplier-soft)}
.create-row:hover{filter:brightness(.97)}
.edit-actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}