/* ============================================================
   SIDEBAR FIX — стиль левого мини-профиля и меню
   Цель: красивые плашки-кнопки с иконками (как на референсе)
   ============================================================ */

/* Используем те же CSS-переменные что и в шапке */
:root {
	--sb-bg:        rgba(26, 29, 61, 0.6);    /* фон плашки */
	--sb-bg-hover:  rgba(155, 109, 255, 0.18); /* фон при ховере */
	--sb-bg-card:   #15183a;                   /* фон всего блока */
	--sb-border:    rgba(155,109,255,0.18);
	--sb-accent:    #9b6dff;
	--sb-accent-2:  #b794ff;
	--sb-text:      #e0e3f0;
	--sb-text-2:    #a8aec5;
	--sb-text-3:    #6c7290;
	--sb-balance:   #ffa040;
	--sb-danger:    #ff5577;
}

/* ============================================================
   ОБЁРТКА БЛОКА МИНИ-ПРОФИЛЯ
   ============================================================ */
#mini-profile .block.mini-profile {
	background: var(--sb-bg-card) !important;
	border: 1px solid var(--sb-border) !important;
	border-radius: 14px !important;
	padding: 14px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

/* ============================================================
   ШАПКА БЛОКА — АВА + НИК + РАНГ
   ============================================================ */
#mini-profile .block.mini-profile .block_head {
	background: transparent !important;
	border: none !important;
	padding: 4px 4px 12px !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	min-height: auto !important;
}

#mini-profile .block.mini-profile .block_head a {
	flex-shrink: 0;
	display: block;
	line-height: 0;
}

/* Аватарка — круглая с фиолетовой обводкой */
#mini-profile .block.mini-profile .block_head img {
	width: 54px !important;
	height: 54px !important;
	min-width: 54px !important;
	max-width: 54px !important;
	border-radius: 50% !important;
	border: 2px solid var(--sb-accent) !important;
	object-fit: cover !important;
	box-sizing: border-box !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Колонка с ником и рангом */
#mini-profile .block.mini-profile .block_head > div {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 2px !important;
	min-width: 0 !important;
	flex: 1 !important;
}

#mini-profile .block.mini-profile .block_head > div p {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.3 !important;
	font-size: 14px !important;
}

/* Ник */
#mini-profile .block.mini-profile .block_head > div p:first-child b {
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 14px !important;
}

/* Ранг (Создатель и т.д.) — оставляем цвет от движка но размер уменьшаем */
#mini-profile .block.mini-profile .block_head > div p:last-child {
	font-size: 12px !important;
}

/* Разделительная линия — тонкая фиолетовая */
#mini-profile .block.mini-profile > .block_head + hr,
#mini-profile .block.mini-profile hr {
	background: var(--sb-border) !important;
	background-color: var(--sb-border) !important;
	border: none !important;
	height: 1px !important;
	margin: 4px 0 12px 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
}

/* ============================================================
   ВЕРТИКАЛЬНОЕ МЕНЮ — ПЛАШКИ-КНОПКИ
   ============================================================ */
#mini-profile .vertical-navigation {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

#mini-profile .vertical-navigation > li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	width: 100% !important;
}

/* Пункт второго li (где for-цикл рендерит ссылки) — flex-column для гэпа */
#mini-profile .vertical-navigation > li:not(.user-balance) {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

/* Все ссылки (кроме баланса) — плашки-кнопки */
#mini-profile .vertical-navigation > li > a:not([class*="balance"]),
#mini-profile .vertical-navigation > li > a {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 11px 14px !important;
	background: var(--sb-bg) !important;
	border: 1px solid transparent !important;
	border-radius: 10px !important;
	color: var(--sb-text-2) !important;
	font-family: 'Segoe UI', sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
	text-align: left !important;
	line-height: 1.3 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	cursor: pointer !important;
	margin: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transform: none !important;
	position: relative !important;
}

/* Иконки в плашках — фиолетовые, фиксированный размер */
#mini-profile .vertical-navigation > li > a > i,
#mini-profile .vertical-navigation > li > a .fa,
#mini-profile .vertical-navigation > li > a .fas,
#mini-profile .vertical-navigation > li > a .far,
#mini-profile .vertical-navigation > li > a .fab,
#mini-profile .vertical-navigation > li > a .fa-duotone,
#mini-profile .vertical-navigation > li > a [class^="fa-"] {
	font-size: 16px !important;
	color: var(--sb-accent) !important;
	min-width: 20px !important;
	width: 20px !important;
	text-align: center !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
}

/* Hover для плашек */
#mini-profile .vertical-navigation > li > a:hover {
	background: var(--sb-bg-hover) !important;
	color: #ffffff !important;
	border-color: var(--sb-border) !important;
	transform: none !important;
	text-shadow: none !important;
}
#mini-profile .vertical-navigation > li > a:hover i,
#mini-profile .vertical-navigation > li > a:hover .fa,
#mini-profile .vertical-navigation > li > a:hover .fas,
#mini-profile .vertical-navigation > li > a:hover .far,
#mini-profile .vertical-navigation > li > a:hover .fab {
	color: var(--sb-accent-2) !important;
}

/* Убираем подчёркивания при ховере (от старого CSS) */
#mini-profile .vertical-navigation > li > a::before,
#mini-profile .vertical-navigation > li > a::after,
#mini-profile .vertical-navigation > li > a:hover::before,
#mini-profile .vertical-navigation > li > a:hover::after {
	display: none !important;
	content: none !important;
}

/* ============================================================
   ПУНКТ БАЛАНСА — особенный (с кнопкой +)
   ============================================================ */
#mini-profile .vertical-navigation > li.user-balance {
	margin-bottom: 6px !important;
}

#mini-profile .vertical-navigation > li.user-balance > a {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px 14px !important;
	background: var(--sb-bg) !important;
	border: 1px solid var(--sb-border) !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	white-space: normal !important;
}

/* Иконка корзины слева — фиолетовая, крупнее */
#mini-profile .vertical-navigation > li.user-balance > a > i {
	font-size: 22px !important;
	color: var(--sb-accent) !important;
	min-width: 28px !important;
	width: 28px !important;
	flex-shrink: 0 !important;
}

/* Контейнер с "Баланс" + цифрами + кнопкой */
#mini-profile .vertical-navigation > li.user-balance > a > div {
	display: flex !important;
	align-items: center !important;
	flex: 1 !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	min-width: 0 !important;
}

/* "Баланс" подпись */
#mini-profile .vertical-navigation > li.user-balance > a > div > p {
	display: block !important;
	font-size: 11px !important;
	color: var(--sb-text-3) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	width: 100% !important;
	font-weight: 500 !important;
}
#mini-profile .vertical-navigation > li.user-balance > a > div br {
	display: none !important;
}

/* Сумма баланса */
#mini-profile .vertical-navigation > li.user-balance > a > div > #balance,
#mini-profile .vertical-navigation > li.user-balance > a > div > span {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	flex: 1 !important;
	min-width: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Кнопка + (пополнить) */
#mini-profile .vertical-navigation > li.user-balance > a > div > button.btn {
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	padding: 0 !important;
	border-radius: 8px !important;
	background: var(--sb-accent) !important;
	border: none !important;
	color: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
	transition: background 0.15s ease !important;
	box-shadow: none !important;
}
#mini-profile .vertical-navigation > li.user-balance > a > div > button.btn:hover {
	background: var(--sb-accent-2) !important;
}
#mini-profile .vertical-navigation > li.user-balance > a > div > button.btn i {
	font-size: 12px !important;
	color: #ffffff !important;
	margin: 0 !important;
}

#mini-profile .vertical-navigation > li.user-balance > a:hover {
	border-color: var(--sb-accent) !important;
}

/* ============================================================
   "Онлайн серверов" — отдельный стиль с пульсирующим бейджем
   ============================================================ */
#online_servers .pulse {
	margin-left: auto !important;
	background: var(--sb-accent) !important;
	color: #ffffff !important;
	padding: 2px 8px !important;
	border-radius: 12px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	min-width: 24px !important;
	text-align: center !important;
}

/* ============================================================
   АДАПТИВНОСТЬ — мобильные
   ============================================================ */
@media (max-width: 991.99px) {
	#mini-profile .block.mini-profile {
		padding: 12px !important;
	}
	#mini-profile .block.mini-profile .block_head img {
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		max-width: 48px !important;
	}
	#mini-profile .vertical-navigation > li > a {
		padding: 10px 12px !important;
		font-size: 12.5px !important;
	}
}