/* ============================================================
   HEADER FIX — финальная версия
   - Главное меню: иконки сверху, текст снизу
   - Подменю: плавное появление + плашки-кнопки (как в профиле)
   - Без мерцания при открытии
   ============================================================ */

/* === ПЕРЕМЕННЫЕ === */
:root {
	--hdr-bg:        #0f1230;
	--hdr-bg-2:      #1a1d3d;
	--hdr-border:    rgba(155,109,255,0.25);
	--hdr-accent:    #9b6dff;
	--hdr-accent-2:  #b794ff;
	--hdr-text:      #e0e3f0;
	--hdr-text-2:    #a8aec5;
	--hdr-text-3:    #6c7290;
}

/* ============================================================
   Z-INDEX FIX — уведомления и модалки поверх шапки
   ============================================================ */
[id^="noty_layout__"], .noty_layout, .noty_bar {
	z-index: 99999 !important;
}
.modal, .modal-backdrop { z-index: 10000 !important; }
.tooltip, .popover { z-index: 100000 !important; }

.wapper .header {
	z-index: 100 !important;
}


/* ============================================================
   ГЛАВНОЕ МЕНЮ — десктоп (>= 992px)
   ============================================================ */
@media (min-width: 992px) {

	.wapper .header {
		background: var(--hdr-bg) !important;
		border-bottom: 1px solid var(--hdr-border);
	}

	/* === ПУНКТЫ ГЛАВНОГО МЕНЮ === */
	.wapper .header .collapsible-menu:not(.user-menu) > li > a {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 4px !important;
		padding: 8px 14px !important;
		min-width: 70px !important;
		height: auto !important;

		font-family: 'Segoe UI', sans-serif !important;
		font-size: 11.5px !important;
		font-weight: 600 !important;
		line-height: 1.15 !important;
		letter-spacing: 0.2px !important;
		text-align: center !important;

		color: var(--hdr-text-2) !important;
		background: transparent !important;
		text-decoration: none !important;
		text-shadow: none !important;
		transform: none !important;

		border-radius: 8px !important;
		transition: background 0.15s ease, color 0.15s ease !important;

		white-space: normal !important;
		word-wrap: break-word !important;
	}

	/* Иконки в пунктах меню */
	.wapper .header .collapsible-menu:not(.user-menu) > li > a i,
	.wapper .header .collapsible-menu:not(.user-menu) > li > a .fa,
	.wapper .header .collapsible-menu:not(.user-menu) > li > a .fas,
	.wapper .header .collapsible-menu:not(.user-menu) > li > a .far,
	.wapper .header .collapsible-menu:not(.user-menu) > li > a .fab,
	.wapper .header .collapsible-menu:not(.user-menu) > li > a .fa-duotone,
	.wapper .header .collapsible-menu:not(.user-menu) > li > a [class^="glyphicon"] {
		font-size: 20px !important;
		line-height: 1 !important;
		margin: 0 !important;
		padding: 0 !important;
		color: var(--hdr-accent) !important;
		flex-shrink: 0 !important;
		text-shadow: none !important;
		transition: color 0.15s ease !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-width: 22px !important;
		height: 22px !important;
	}

	/* Hover */
	.wapper .header .collapsible-menu:not(.user-menu) > li > a:hover {
		background: var(--hdr-bg-2) !important;
		color: #ffffff !important;
		transform: none !important;
		text-shadow: none !important;
	}
	.wapper .header .collapsible-menu:not(.user-menu) > li > a:hover i,
	.wapper .header .collapsible-menu:not(.user-menu) > li > a:hover .fa,
	.wapper .header .collapsible-menu:not(.user-menu) > li > a:hover .fas,
	.wapper .header .collapsible-menu:not(.user-menu) > li > a:hover .far,
	.wapper .header .collapsible-menu:not(.user-menu) > li > a:hover .fab {
		color: var(--hdr-accent-2) !important;
	}

	/* Активный/открытый пункт */
	.wapper .header .collapsible-menu:not(.user-menu) > li > a.open,
	.wapper .header .collapsible-menu:not(.user-menu) > li > a.active,
	.wapper .header .collapsible-menu:not(.user-menu) > li.open > a,
	.wapper .header .collapsible-menu:not(.user-menu) > li.active > a {
		background: rgba(155, 109, 255, 0.14) !important;
		color: #ffffff !important;
	}

	/* Убираем подчёркивания */
	.wapper .header .collapsible-menu:not(.user-menu) > li > a::after,
	.wapper .header .collapsible-menu:not(.user-menu) > li > a::before {
		display: none !important;
		content: none !important;
	}
}


/* ============================================================
   ПОДМЕНЮ — ПЛАШКИ-КНОПКИ + ПЛАВНОЕ ПОЯВЛЕНИЕ
   Применяется ВЕЗДЕ (главное меню + профиль)
   ============================================================ */

/* Контейнер подменю — фиолетовая рамка, фон, тень */
.wapper .header .collapsible-menu > li > ul {
	background: var(--hdr-bg) !important;
	border: 1px solid var(--hdr-border) !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 32px rgba(0,0,0,.6) !important;
	padding: 6px !important;
	min-width: 220px;
	list-style: none !important;
	/* Начальное состояние — слегка прозрачное и сдвинуто вверх */
	opacity: 0;
	transform: translateY(-6px) scale(0.98);
	transform-origin: top center;
	transition: opacity 0.22s ease, transform 0.22s ease !important;
}

/* Когда mix.js добавил inline style="display: block" + наш JS добавил класс */
.wapper .header .collapsible-menu > li > ul.hl-anim-open,
.wapper .header .collapsible-menu > li > ul[style*="display: block"] {
	opacity: 1 !important;
	transform: translateY(0) scale(1) !important;
}

/* === АНИМАЦИЯ САМИХ ПУНКТОВ — синхронно с контейнером === */
/* Скрываем содержимое пунктов пока ul не открыт */
.wapper .header .collapsible-menu > li > ul > li {
	opacity: 0;
	transition: opacity 0.18s ease 0s !important;
}
.wapper .header .collapsible-menu > li > ul > li > a {
	opacity: 0;
	transition: opacity 0.18s ease !important;
}

/* Когда ul открыт — пункты появляются */
.wapper .header .collapsible-menu > li > ul.hl-anim-open > li,
.wapper .header .collapsible-menu > li > ul[style*="display: block"] > li,
.wapper .header .collapsible-menu > li > ul.hl-anim-open > li > a,
.wapper .header .collapsible-menu > li > ul[style*="display: block"] > li > a {
	opacity: 1;
}

/* Чуть-чуть задержка чтобы плашка появилась первой, потом текст */
.wapper .header .collapsible-menu > li > ul.hl-anim-open > li > a,
.wapper .header .collapsible-menu > li > ul[style*="display: block"] > li > a {
	transition-delay: 0.05s !important;
}

/* Скрываем pseudo-элементы старого стиля */
.wapper .header .collapsible-menu > li > ul::before,
.wapper .header .collapsible-menu > li > ul::after {
	display: none !important;
	content: none !important;
}

/* === ПУНКТ ПОДМЕНЮ — ПЛАШКА-КНОПКА === */
.wapper .header .collapsible-menu > li > ul > li {
	display: block !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 0 3px 0 !important;
	list-style: none !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1 !important;
}
.wapper .header .collapsible-menu > li > ul > li:last-child {
	margin-bottom: 0 !important;
}

/* Скрываем служебные элементы */
.wapper .header .collapsible-menu > li > ul > script,
.wapper .header .collapsible-menu > li > ul > style,
.wapper .header .collapsible-menu > li > ul > li:empty {
	display: none !important;
}

/* Ссылка-плашка */
.wapper .header .collapsible-menu > li > ul > li > a {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	padding: 9px 12px !important;
	margin: 0 !important;
	border-radius: 8px !important;
	background: rgba(155, 109, 255, 0.06) !important;
	border: 1px solid rgba(155, 109, 255, 0.10) !important;
	color: var(--hdr-text-2) !important;
	font-family: 'Segoe UI', sans-serif !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	text-shadow: none !important;
	transform: none !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
	width: 100% !important;
	box-sizing: border-box !important;
	height: auto !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* Иконки в подменю — все одной ширины */
.wapper .header .collapsible-menu > li > ul > li > a i,
.wapper .header .collapsible-menu > li > ul > li > a .fa,
.wapper .header .collapsible-menu > li > ul > li > a .fas,
.wapper .header .collapsible-menu > li > ul > li > a .far,
.wapper .header .collapsible-menu > li > ul > li > a .fab,
.wapper .header .collapsible-menu > li > ul > li > a .fa-duotone,
.wapper .header .collapsible-menu > li > ul > li > a [class^="glyphicon"] {
	font-size: 14px !important;
	width: 18px !important;
	min-width: 18px !important;
	max-width: 18px !important;
	text-align: center !important;
	color: var(--hdr-accent) !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}

/* Hover плашки */
.wapper .header .collapsible-menu > li > ul > li > a:hover,
.wapper .header .collapsible-menu > li > ul > li:hover > a {
	background: rgba(155, 109, 255, 0.16) !important;
	border-color: rgba(155, 109, 255, 0.30) !important;
	color: #ffffff !important;
	transform: none !important;
	text-shadow: none !important;
}
.wapper .header .collapsible-menu > li > ul > li > a:hover i,
.wapper .header .collapsible-menu > li > ul > li:hover > a i {
	color: var(--hdr-accent-2) !important;
}

/* Убираем подчёркивания/псевдоэлементы */
.wapper .header .collapsible-menu > li > ul > li > a::after,
.wapper .header .collapsible-menu > li > ul > li > a::before {
	display: none !important;
	content: none !important;
}


/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ (< 992px)
   ============================================================ */
@media (max-width: 991.99px) {
	.wapper .header {
		background: var(--hdr-bg) !important;
		border-bottom: 1px solid var(--hdr-border);
	}
	.wapper .header .collapsible-menu:not(.user-menu) {
		background: var(--hdr-bg) !important;
	}
	.wapper .header .collapsible-menu:not(.user-menu) > li > a {
		color: var(--hdr-text-2) !important;
		text-shadow: none !important;
		transform: none !important;
	}
	.wapper .header .collapsible-menu:not(.user-menu) > li > a:hover {
		color: var(--hdr-accent-2) !important;
		background: var(--hdr-bg-2) !important;
	}
	.wapper .header .collapsible-menu:not(.user-menu) > li > a i,
	.wapper .header .collapsible-menu:not(.user-menu) > li > a .fa,
	.wapper .header .collapsible-menu:not(.user-menu) > li > a .fas {
		color: var(--hdr-accent) !important;
	}
}