/* Секция «Поделиться проектом» — клиентские доступы.
   Префикс shr-. Цвета берём из переменных дашборда, чтобы секция жила в трёх палитрах.
   v1.0 — 31.08.2026 */

:root {
  --shr-radius: 10px;
  --shr-gap: 12px;
}

/* --- кнопка на карточке проекта ---
   .pb — flex-колонка, поэтому кнопку прижимаем к левому краю и не даём растянуться на всю ширину */
.shr-btn {
  display: inline-flex;
  align-self: flex-start;
  width: auto;
  flex: none;
  align-items: center;
  gap: 6px;
  margin: 2px 0 2px;
  padding: 5px 10px;
  border: 1px solid var(--line, #e3e7ef);
  border-radius: 8px;
  background: var(--card, #fff);
  color: var(--muted, #6b7280);
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.shr-btn:hover { border-color: var(--accent, #4f46e5); color: var(--accent, #4f46e5); }
.shr-btn__ic { width: 14px; height: 14px; fill: currentColor; flex: none; }
.shr-btn--on { border-color: var(--accent, #4f46e5); color: var(--accent, #4f46e5); }

/* --- модальное окно --- */
.shr-modal[hidden] { display: none; }
.shr-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow: auto;
  background: rgba(17, 24, 39, .45);
}
.shr-modal__box {
  width: 100%;
  max-width: 560px;
  background: var(--card, #fff);
  color: var(--text, #111827);
  border-radius: var(--shr-radius);
  box-shadow: 0 20px 60px rgba(17, 24, 39, .25);
  padding: 22px 24px 24px;
}
.shr-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--shr-gap);
  margin-bottom: 4px;
}
.shr-modal__title { margin: 0; font-size: 17px; font-weight: 700; }
.shr-modal__sub { margin: 0 0 18px; font-size: 13px; color: var(--muted, #6b7280); }
.shr-modal__close {
  border: 0; background: none; cursor: pointer; padding: 2px 6px;
  font-size: 22px; line-height: 1; color: var(--muted, #6b7280);
}
.shr-modal__close:hover { color: var(--text, #111827); }

/* --- список доступов --- */
.shr-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.shr-item {
  border: 1px solid var(--line, #e3e7ef);
  border-radius: 8px;
  padding: 12px 14px;
}
.shr-item--off { opacity: .55; }
.shr-item__top { display: flex; align-items: center; justify-content: space-between; gap: var(--shr-gap); }
.shr-item__login { font-weight: 600; font-size: 14px; word-break: break-all; }
.shr-item__meta { font-size: 12px; color: var(--muted, #6b7280); margin-top: 3px; }
.shr-item__acts { display: flex; gap: 6px; flex: none; }

.shr-empty { font-size: 13px; color: var(--muted, #6b7280); padding: 14px 0 18px; }

/* --- форма нового доступа --- */
.shr-form { border-top: 1px solid var(--line, #e3e7ef); padding-top: 16px; }
.shr-form__row { display: flex; gap: var(--shr-gap); flex-wrap: wrap; }
.shr-field { flex: 1 1 200px; display: flex; flex-direction: column; gap: 5px; }
.shr-field__label { font-size: 12px; color: var(--muted, #6b7280); }
.shr-field__input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--line, #e3e7ef);
  border-radius: 8px;
  background: var(--bg, #fff);
  color: var(--text, #111827);
  font: inherit;
  font-size: 14px;
}
.shr-field__input:focus { outline: 2px solid var(--accent, #4f46e5); outline-offset: -1px; }
.shr-field__hint { font-size: 11px; color: var(--muted, #6b7280); }

.shr-actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.shr-action {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line, #e3e7ef);
  background: var(--card, #fff);
  color: var(--text, #111827);
  font: inherit; font-size: 13px; cursor: pointer;
}
.shr-action:hover { border-color: var(--accent, #4f46e5); }
.shr-action--main {
  background: var(--accent, #4f46e5);
  border-color: var(--accent, #4f46e5);
  color: #fff;
  font-weight: 600;
}
.shr-action--main:hover { filter: brightness(1.06); }
.shr-action--danger:hover { border-color: #dc2626; color: #dc2626; }
.shr-action[disabled] { opacity: .55; cursor: default; }

/* --- готовый доступ: показывается один раз --- */
.shr-result {
  margin-top: 16px;
  border: 1px solid var(--accent, #4f46e5);
  border-radius: 8px;
  padding: 14px;
  background: color-mix(in srgb, var(--accent, #4f46e5) 6%, transparent);
}
.shr-result__title { font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.shr-result__grid { display: grid; grid-template-columns: 92px 1fr; gap: 6px 10px; font-size: 13px; }
.shr-result__k { color: var(--muted, #6b7280); }
.shr-result__v { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.shr-result__note { margin: 10px 0 0; font-size: 12px; color: var(--muted, #6b7280); }

.shr-msg { margin-top: 10px; font-size: 13px; }
.shr-msg--err { color: #dc2626; }
.shr-msg--ok { color: #16a34a; }

/* --- мобильная вёрстка --- */
@media (max-width: 560px) {
  .shr-modal { padding: 16px 10px; }
  .shr-modal__box { padding: 18px 16px 20px; }
  /* в колонке flex-basis растягивал бы поля по высоте — фиксируем высоту по содержимому */
  .shr-form__row { flex-direction: column; }
  .shr-field { flex: none; }
  .shr-item__top { flex-direction: column; align-items: flex-start; }
  .shr-result__grid { grid-template-columns: 1fr; gap: 2px 0; }
  .shr-result__k { margin-top: 6px; }
}