/* persona.css — персоны: стили/жанры, роли, «добавить себя в персоны» и пометка
   неуправляемой страницы в списках (задача COL-4, 23.09.2026).

   «Таблетки» стилей на странице персоны используют общий класс .cb-collective-style
   (assets/templates/clubber/collective.css) — как на странице коллектива. Здесь
   продублирован тот же вид под своим именем .cb-persona-style: он нужен там, где
   collective.css не подключён (вкладка «персона» в настройках). */

/* --------------------------------------------- пометка «страница ведётся сайтом» -- */

.cb-person-managed {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 12px;
  background: #fff8e6;
  border: 1px solid #f3e2b8;
  color: #8a6d3b;
  font-size: 12px;
  vertical-align: middle;
}

.cb-person-managed-note {
  color: #8a949c;
  font-size: 12px;
  line-height: 1.4;
}

/* карточка неуправляемой страницы чуть отличается фоном — видно, что ведёт сайт */
.cb-person-managed-item .table-places-item-data-cnt { background: #fffdf6; }

/* --------------------------------------------------------- стили/жанры и роли -- */

.cb-persona-styles { margin: 10px 0 14px; }

.cb-persona-style,
.cb-persona-role {
  display: inline-block;
  padding: 4px 12px;
  margin: 0 8px 8px 0;
  border-radius: 14px;
  background: #eaf8fd;
  color: #0099d2;
  font-size: 13px;
}

.cb-persona-role { background: #f1f0fb; color: #5b53b8; }

.cb-persona-block { margin: 0 0 22px; }
.cb-persona-block-title {
  font-size: 16px;
  font-weight: 700;
  color: #16232b;
  border-bottom: 1px solid #e7edf1;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.cb-persona-state {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 12px;
}

.cb-persona-state-on { background: #eafaf1; border: 1px solid #bfe8d0; color: #2f7d4f; }
.cb-persona-state-off { background: #f4f6f8; border: 1px solid #e2e8ec; color: #5c6b74; }

.cb-persona-form { max-width: 760px; }
.cb-persona-form label { display: block; font-size: 12px; color: #6b7b84; margin-bottom: 4px; }
.cb-persona-form select,
.cb-persona-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: 14px;
  color: #2b3a42;
  border: 1px solid #dfe6ea;
  border-radius: 8px;
  background: #fff;
  outline: none;
}
.cb-persona-form input[type="text"]::placeholder { color: #a8b4bb; }
.cb-persona-form input[type="text"]:focus,
.cb-persona-form select:focus { border-color: #00aeef; box-shadow: 0 0 0 3px rgba(0,174,239,.16); }

.cb-persona-row { margin-bottom: 14px; }
.cb-persona-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.cb-persona-hint { font-size: 12px; color: #8a949c; max-width: 460px; }
.cb-persona-more {
  background: none;
  border: 0;
  padding: 0;
  color: #00aeef;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px dashed #9fd3ec;
}
#cbPersonStyleList input[type="text"],
#cbPersonRoleList input[type="text"] { margin-bottom: 6px; }

.cb-persona-list { margin: 0 0 10px; }
.cb-persona-list-item {
  display: inline-block;
  margin: 0 8px 8px 0;
  background: #eaf8fd;
  border-radius: 14px;
  padding: 4px 6px 4px 12px;
  font-size: 13px;
  color: #0099d2;
}
.cb-persona-list-item form { display: inline; }
.cb-persona-list-remove {
  background: none;
  border: 0;
  cursor: pointer;
  color: #8ab4cb;
  font-size: 14px;
  padding: 0 4px;
}
.cb-persona-list-remove:hover { color: #d6336c; }

/* ------------------------------------------------- ссылки внешних ресурсов -- */

.cb-persona-link-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.cb-persona-link-row select { flex: 0 0 200px; }
.cb-persona-link-row input[type="text"] { flex: 1 1 auto; margin-bottom: 0; }

/* кнопки-ссылки на странице персоны (рядом с «Подписаться на персону») */
.cb-persona-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.cb-persona-link {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 18px;
  background: #eaf8fd;
  color: #0099d2;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid #d6ebf7;
}
.cb-persona-link:hover { background: #ddeff9; }