/*
 * Dropdown-only improvements for #cssmenu.
 * Does NOT change the top-level menu layout/size.
 */

@media all and (min-width: 769px) {
	/* Let dropdown grow wide enough for one-line labels */
	#cssmenu > ul > li > ul,
	#cssmenu ul.admin-dropdown {
		min-width: 280px;
		width: max-content;
		max-width: none;
	}

	#cssmenu ul.admin-dropdown {
		min-width: 320px;
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}

	/* Non-clickable section labels in Admin dropdown */
	#cssmenu ul.admin-dropdown > li.admin-menu-group {
		height: auto !important;
		min-height: 0 !important;
		pointer-events: none;
		cursor: default;
	}

	#cssmenu ul.admin-dropdown > li.admin-menu-group > span {
		display: block;
		padding: 10px 18px 4px;
		color: #9ca3af;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		white-space: nowrap;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	#cssmenu ul.admin-dropdown > li.admin-menu-group:first-child > span {
		border-top: 0;
		padding-top: 6px;
	}

	#cssmenu ul ul ul {
		min-width: 280px;
		width: max-content;
	}

	/*
	 * Legacy menu forces each dropdown row to height:35px, which clips text.
	 * Keep one-line labels (nowrap) and allow row height to fit.
	 */
	#cssmenu ul ul li,
	#cssmenu li:hover > ul > li,
	#cssmenu li.sfHover > ul > li {
		height: auto !important;
		min-height: 35px !important;
		max-height: none !important;
		width: auto !important;
		overflow: visible !important;
		-webkit-transition: none !important;
		-moz-transition: none !important;
		transition: none !important;
	}

	#cssmenu ul ul li a,
	#cssmenu li:hover > ul > li > a {
		display: block !important;
		height: auto !important;
		min-height: 0 !important;
		width: auto !important;
		overflow: visible !important;
		white-space: nowrap !important;
		line-height: 1.35 !important;
		padding: 11px 18px !important;
		color: #fff !important;
		background: #303236 !important;
		text-transform: none !important;
		font-weight: 600 !important;
	}

	#cssmenu ul ul li a:hover,
	#cssmenu ul ul li:hover > a {
		background: #2563eb !important;
		color: #ffffff !important;
	}

	/* Nested submenu: attach flush to parent item (avoid legacy margin-left:100% + left:100%) */
	#cssmenu ul ul li.has-sub {
		position: relative !important;
	}

	#cssmenu ul ul ul {
		position: absolute !important;
		top: 0 !important;
		left: -9999px !important;
		margin: 0 !important;
		margin-left: 0 !important;
		background: #303236 !important;
		border: 1px solid #1f2226;
		border-radius: 4px;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
		z-index: 10060;
	}

	#cssmenu ul ul li:hover > ul,
	#cssmenu ul ul li.sfHover > ul {
		left: 100% !important;
		margin-left: 0 !important;
		top: 0 !important;
	}
}

@media all and (max-width: 768px) {
	#cssmenu ul ul li,
	#cssmenu li:hover > ul > li {
		height: auto !important;
		overflow: visible !important;
	}

	#cssmenu ul ul li a {
		height: auto !important;
		white-space: normal !important;
		overflow: visible !important;
		color: #fff !important;
	}

	#cssmenu ul.admin-dropdown > li.admin-menu-group > span {
		display: block;
		padding: 12px 20px 4px 20px;
		color: #9ca3af;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	#cssmenu ul.admin-dropdown > li.admin-menu-group:first-child > span {
		border-top: 0;
	}
}