/* ============================================================
   USERS PAGE FIX — стиль для /users в едином стиле сайта
   - Карточки пользователей как плашки-кнопки
   - Аватарки круглые с фиолетовой обводкой
   - Действия (Друзья/Сообщение/Редактировать/Удалить) как кнопки
   - Поиск и select в тёмной теме
   ============================================================ */

:root {
	--users-bg-card:    #15183a;
	--users-bg-row:     rgba(155, 109, 255, 0.04);
	--users-bg-hover:   rgba(155, 109, 255, 0.10);
	--users-border:     rgba(155, 109, 255, 0.18);
	--users-accent:     #9b6dff;
	--users-accent-2:   #b794ff;
	--users-text:       #e0e3f0;
	--users-text-2:     #a8aec5;
	--users-text-3:     #6c7290;
	--users-danger:     #ff5577;
}

/* ============================================================
   ОБЁРТКА БЛОКА — block block-search
   ============================================================ */
.block.block-search {
	background: var(--users-bg-card) !important;
	border: 1px solid var(--users-border) !important;
	border-radius: 14px !important;
	padding: 0 !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
	overflow: hidden !important;
}

/* Заголовок «Пользователи» */
.block.block-search .block_head {
	background: transparent !important;
	color: var(--users-text) !important;
	font-family: 'Segoe UI', sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-align: center !important;
	padding: 16px !important;
	border-bottom: 1px solid var(--users-border) !important;
	letter-spacing: 0.5px !important;
}

/* ============================================================
   БЛОК ПОИСКА — поле + select
   ============================================================ */
.block.block-search .input-search {
	background: rgba(0, 0, 0, 0.2) !important;
	padding: 12px 14px !important;
	border-bottom: 1px solid var(--users-border) !important;
	cursor: pointer !important;
}

.block.block-search .input-search .input-group {
	display: flex !important;
	flex-direction: row !important;
	gap: 10px !important;
	align-items: stretch !important;
	background: transparent !important;
	border: none !important;
}

/* Поле ввода логина */
.block.block-search #search_login,
.block.block-search input.form-control {
	flex: 1 !important;
	background: rgba(15, 18, 48, 0.6) !important;
	border: 1px solid var(--users-border) !important;
	border-radius: 8px !important;
	color: var(--users-text) !important;
	font-family: 'Segoe UI', sans-serif !important;
	font-size: 13px !important;
	padding: 10px 14px !important;
	height: 42px !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, background 0.15s ease !important;
}
.block.block-search #search_login::placeholder,
.block.block-search input.form-control::placeholder {
	color: var(--users-text-3) !important;
	opacity: 1 !important;
}
.block.block-search #search_login:focus,
.block.block-search input.form-control:focus {
	border-color: var(--users-accent) !important;
	background: rgba(15, 18, 48, 0.9) !important;
	box-shadow: 0 0 0 3px rgba(155, 109, 255, 0.12) !important;
}

/* Select группы — кастомная стрелка */
.block.block-search #groups,
.block.block-search select.form-control {
	flex: 0 0 180px !important;
	background: rgba(15, 18, 48, 0.6) !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239b6dff' d='M6 9L1 3h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 12px !important;
	border: 1px solid var(--users-border) !important;
	border-radius: 8px !important;
	color: var(--users-text) !important;
	font-family: 'Segoe UI', sans-serif !important;
	font-size: 13px !important;
	padding: 10px 36px 10px 14px !important;
	height: 42px !important;
	outline: none !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease !important;
}
.block.block-search #groups option,
.block.block-search select.form-control option {
	background: var(--users-bg-card) !important;
	color: var(--users-text) !important;
}
.block.block-search #groups:focus,
.block.block-search select.form-control:focus {
	border-color: var(--users-accent) !important;
	box-shadow: 0 0 0 3px rgba(155, 109, 255, 0.12) !important;
}

/* ============================================================
   СПИСОК ПОЛЬЗОВАТЕЛЕЙ — #users
   ============================================================ */
#users {
	padding: 8px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

/* Каждая строка пользователя — это div у тебя в верстке.
   Не знаю точного класса, поэтому стилизуем все прямые div
   внутри #users. */
#users > div {
	background: var(--users-bg-row) !important;
	border: 1px solid var(--users-border) !important;
	border-radius: 12px !important;
	padding: 12px !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 14px !important;
	transition: background 0.15s ease, border-color 0.15s ease !important;
}
#users > div:hover {
	background: var(--users-bg-hover) !important;
	border-color: rgba(155, 109, 255, 0.30) !important;
}

/* Аватарка — круглая, фиолетовая обводка */
#users > div img {
	width: 60px !important;
	height: 60px !important;
	min-width: 60px !important;
	max-width: 60px !important;
	border-radius: 50% !important;
	border: 2px solid var(--users-accent) !important;
	box-sizing: border-box !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
}

/* Контент справа от авы */
#users > div > div {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	min-width: 0 !important;
}

/* Ник пользователя (первая <a> с title=) — крупный, с цветом ранга */
#users > div > div > a:first-child,
#users > div > div > a[title] {
	font-family: 'Segoe UI', sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	display: inline-block !important;
	margin-right: 8px !important;
	/* НЕ перебиваем color — он от inline style ранга */
	background: none !important;
	background-image: none !important;
	background-color: transparent !important;
	padding: 0 !important;
	text-shadow: none !important;
}

/* Группа пользователя — в скобках после ника, серым */
#users > div > div {
	color: var(--users-text-2) !important;
	font-size: 13px !important;
}

/* === ДЕЙСТВИЯ — кнопки-плашки === */
/* Все ссылки кроме первой (которая с title=) — кнопки */
#users > div > div > a:not([title]),
#users > div > div > a[onclick] {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 12px !important;
	background: rgba(155, 109, 255, 0.08) !important;
	border: 1px solid rgba(155, 109, 255, 0.18) !important;
	border-radius: 7px !important;
	color: var(--users-text-2) !important;
	font-family: 'Segoe UI', sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	margin: 4px 6px 4px 0 !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	line-height: 1.2 !important;
	text-shadow: none !important;
}
#users > div > div > a:not([title]):hover,
#users > div > div > a[onclick]:hover {
	background: rgba(155, 109, 255, 0.18) !important;
	border-color: rgba(155, 109, 255, 0.35) !important;
	color: #ffffff !important;
}

/* Кнопка "Удалить пользователя" — красноватая */
#users > div > div > a[onclick*="dell_user"] {
	background: rgba(255, 85, 119, 0.08) !important;
	border-color: rgba(255, 85, 119, 0.25) !important;
	color: var(--users-danger) !important;
}
#users > div > div > a[onclick*="dell_user"]:hover {
	background: rgba(255, 85, 119, 0.16) !important;
	border-color: rgba(255, 85, 119, 0.45) !important;
	color: #ff7799 !important;
}

/* Убираем псевдоэлементы ::after от старого CSS */
#users > div > div > a::after,
#users > div > div > a::before {
	display: none !important;
	content: none !important;
}

/* ============================================================
   ПАГИНАЦИЯ
   ============================================================ */
#pagination2 {
	margin-top: 16px !important;
	display: flex !important;
	justify-content: center !important;
	gap: 4px !important;
	flex-wrap: wrap !important;
}
#pagination2 a,
#pagination2 span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 36px !important;
	height: 36px !important;
	padding: 0 12px !important;
	background: rgba(155, 109, 255, 0.06) !important;
	border: 1px solid var(--users-border) !important;
	border-radius: 7px !important;
	color: var(--users-text-2) !important;
	font-family: 'Segoe UI', sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
}
#pagination2 a:hover {
	background: rgba(155, 109, 255, 0.16) !important;
	border-color: rgba(155, 109, 255, 0.30) !important;
	color: #ffffff !important;
}
#pagination2 .active,
#pagination2 .current,
#pagination2 a.active {
	background: var(--users-accent) !important;
	border-color: var(--users-accent) !important;
	color: #ffffff !important;
}

/* ============================================================
   АДАПТИВ — мобильная версия
   ============================================================ */
@media (max-width: 767.99px) {
	.block.block-search .input-search .input-group {
		flex-direction: column !important;
		gap: 8px !important;
	}
	.block.block-search #groups,
	.block.block-search select.form-control {
		flex: 1 !important;
		width: 100% !important;
	}
	#users > div {
		padding: 10px !important;
		gap: 10px !important;
	}
	#users > div img {
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		max-width: 48px !important;
	}
	#users > div > div > a:not([title]),
	#users > div > div > a[onclick] {
		padding: 5px 10px !important;
		font-size: 11.5px !important;
	}
}