/* screens.css — стили отдельных экранов:
   вход, шапка, чаты, профиль, поиск, клубы, настройки и админка. */

/* ════════ Экран входа ════════ */

/* Две половины на весь экран: синяя с описанием и белая с формой.
   Если человек уже вошёл (класс logged-in на html) — форму прячем,
   иначе при обновлении она на мгновение перекрыла бы приложение. */
#screen-auth {
  display: grid;
  grid-template-columns: 1fr 420px;
  min-height: 100vh;
}

html.logged-in #screen-auth {
  display: none;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px;
  background: var(--accent-gradient);
  color: #fff;
}

.auth-brand .logo__icon {
  background: rgba(255, 255, 255, 0.2);
}

.auth-brand__tagline {
  max-width: 400px;
  margin-top: 24px;
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0.9;
}

/* Список возможностей с галочками */
.auth-brand__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
  list-style: none;
  opacity: 0.85;
}

.auth-brand__features li::before {
  content: '✓';
  margin-right: 10px;
  font-weight: 700;
}

.auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px;
  background: var(--bg-elevated);
}

/* Голубая плашка «закрытая платформа» с замком */
.auth-notice {
  display: flex;
  gap: 12px;
  padding: 14px;
  margin-bottom: 20px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.auth-notice .icon {
  color: var(--accent);
}

/* ════════ Шапка ════════ */

/* Прилипает к верху окна при прокрутке */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.topnav {
  display: flex;
  gap: 4px;
}

.topnav__item {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.topnav__item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.topnav__item.is-active {
  background: var(--accent-light);
  color: var(--accent);
}

/* Строка поиска людей */
.topbar__search {
  flex: 1;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
}

.topbar__search input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  color: var(--text);
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ════════ Чаты ════════ */

/* Три колонки на всю высоту окна: список, переписка, информация */
.chat-layout {
  display: grid;
  grid-template-columns: 320px 1fr 300px;
  height: calc(100vh - var(--topbar-h));
}

/* Левая колонка: заголовок, фильтры, список */
.chat-sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--bg-elevated);
}

.chat-sidebar__title {
  padding: 16px 16px 12px;
  font-size: 1.1rem;
}

.chat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--border);
}

.chat-filter {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.chat-filter:hover {
  border-color: var(--accent-muted);
  color: var(--accent);
}

.chat-filter.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.chat-list {
  flex: 1;
  overflow-y: auto;
}

/* Один чат в списке */
.chat-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  cursor: pointer;
}

.chat-item:hover {
  background: var(--bg-hover);
}

.chat-item.is-active {
  background: var(--accent-light);
  border-left-color: var(--accent);
}

.chat-item__body {
  flex: 1;
  min-width: 0; /* чтобы длинный текст обрезался многоточием, а не растягивал колонку */
}

.chat-item__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* Имя и превью — в одну строку, лишнее заменяется на «…» */
.chat-item__name,
.chat-item__preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item__name {
  font-weight: 600;
  font-size: 0.9rem;
}

.chat-item__time {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.chat-item__preview {
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.chat-item__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

/* Центральная колонка: шапка чата, сообщения, поле ввода */
.chat-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.chat-header h2 {
  font-size: 1rem;
}

.chat-header__meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Лента сообщений (и в чатах, и в чате клуба) */
.chat-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
}

/* Одно сообщение: аватарка + «пузырь» */
.message {
  display: flex;
  gap: 12px;
  max-width: 75%;
}

.message .avatar,
.message__author {
  cursor: pointer; /* по аватарке и имени открывается профиль */
}

.message__bubble {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
}

.message__author {
  margin-bottom: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}

.message__text {
  font-size: 0.9rem;
  overflow-wrap: anywhere; /* длинное слово без пробелов не вылезет за пузырь */
}

.message__time {
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Свои сообщения — справа и синие */
.message--own {
  align-self: flex-end;
}

.message--own .message__bubble {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.message--own .message__time {
  color: rgba(255, 255, 255, 0.7);
}

/* Сообщение, где упоминается моё имя (настройка «Упоминания») */
.message--mention .message__bubble {
  border-color: var(--accent);
  background: var(--accent-light);
}

/* Компактный режим (настройка во «Внешнем виде»): меньше отступов в чатах */
.compact .chat-item { padding: 8px 16px; }
.compact .chat-messages { gap: 8px; padding: 12px 20px; }
.compact .message__bubble { padding: 6px 10px; }
.compact .message__time { margin-top: 2px; }

/* Реакции под сообщением: «👍 18» */
.reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.reaction {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--bg-hover);
}

.message--own .reaction {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.15);
}

/* Низ чата: поле ввода или плашка «только чтение» */
.chat-input {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}

.chat-input__form {
  display: flex;
  gap: 8px;
}

.chat-input__form input {
  flex: 1;
}

.chat-input__readonly {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* Правая колонка: информация о чате */
.chat-info {
  padding: 20px;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  background: var(--bg-elevated);
}

.chat-info__title {
  margin-bottom: 8px;
  font-weight: 600;
}

.chat-info__desc {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ════════ Профиль ════════ */

.profile-layout {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 32px;
}

.profile-header__name {
  font-size: 1.6rem;
}

.profile-header__about {
  margin-top: 4px;
  color: var(--text-secondary);
}

.profile-header__status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 16px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ════════ Экраны с меню слева: поиск, настройки, админка ════════ */

.side-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - var(--topbar-h));
}

/* Левое меню */
.side-nav {
  padding: 24px;
  border-right: 1px solid var(--border);
  background: var(--bg-elevated);
}

.side-nav h2 {
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.side-nav .badge {
  margin: -12px 0 20px;
}

.side-nav__item {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-align: left;
  font-weight: 500;
  color: var(--text-secondary);
}

.side-nav__item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.side-nav__item.is-active {
  background: var(--accent-light);
  color: var(--accent);
}

/* «Выйти» — красным и отдельно от остальных пунктов */
.side-nav__item--danger {
  margin-top: 24px;
  color: var(--danger);
}

.side-nav__item--danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Правая часть */
.side-content {
  padding: 32px;
}

.side-content h3 {
  margin-bottom: 24px;
  font-size: 1.2rem;
}

.side-content--narrow {
  max-width: 640px;
}

/* ════════ Поиск ════════ */

.user-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* Карточка человека: всё по центру, «Написать» внизу */
.user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  text-align: center;
  cursor: pointer;
}

.user-card:hover,
.club-card:hover {
  border-color: var(--accent-muted);
  box-shadow: var(--shadow-md);
}

.user-card__name {
  margin-top: 4px;
  font-weight: 600;
}

.user-card__about {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.user-card .tag-list {
  justify-content: center;
}

.user-card .btn {
  margin-top: auto; /* кнопки во всех карточках — на одной линии внизу */
}

/* ════════ Клубы ════════ */

.page {
  padding: 24px;
}

.club-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.club-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  cursor: pointer;
}

/* Синяя полоса с эмодзи клуба */
.club-card__banner {
  height: 100px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: var(--accent-gradient);
}

.club-card__body {
  padding: 16px;
}

.club-card__name {
  font-weight: 600;
}

/* Описание — не больше двух строк */
.club-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.club-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Страница клуба */
.club-header {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
}

.club-header__banner {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 3rem;
  background: var(--accent-gradient);
}

.club-header__name {
  font-size: 1.5rem;
}

.club-header__desc {
  margin-top: 8px;
  color: var(--text-secondary);
}

.club-header__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 16px;
}

/* Чат клуба: лента в рамке + поле ввода под ней */
.club-chat {
  max-height: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.club-chat__input {
  margin-top: 12px;
}

/* ════════ Настройки ════════ */

/* Строка с переключателем справа */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.settings-row__label {
  font-weight: 500;
}

/* Переключатель: серая «таблетка», синяя когда включён. Кружок рисуется через ::after */
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--bg-active);
  cursor: pointer;
  transition: background 0.2s;
}

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform 0.2s;
}

.toggle--on {
  background: var(--accent);
}

.toggle--on::after {
  transform: translateX(20px);
}

/* Выбор темы: две карточки с превью */
.theme-picker {
  display: flex;
  gap: 12px;
}

.theme-option {
  flex: 1;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
}

.theme-option.is-active {
  border-color: var(--accent);
}

.theme-option__preview {
  height: 48px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
}

.theme-option__preview--light { background: #f8fafc; border: 1px solid #e2e8f0; }
.theme-option__preview--dark { background: #0f172a; border: 1px solid #334155; }

/* ════════ Админ-панель ════════ */

/* Карточки с цифрами */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.stat {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

.stat__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
}

/* Форма над таблицей: «Новый канал», «Новое объявление» */
.admin-form {
  max-width: 560px;
  margin-bottom: 24px;
}

.admin-form h4 {
  margin-bottom: 16px;
}

.admin-form .btn + .btn {
  margin-left: 8px;
}

/* Несколько кнопок в ячейке таблицы — в ряд */
.actions {
  display: flex;
  gap: 8px;
}