/**
 * YouMeOS Event Horizon — Admin Bar Styles
 *
 * Matches the native WP logo dropdown sizing and spacing so our
 * custom menus feel identical to the WordPress core ones.
 */

/* ── Shared: Match WP-logo dropdown width & item padding ── */
#wpadminbar .youmeos-admin-bar-btn .ab-sub-wrapper,
#wpadminbar .compass-admin-bar-btn .ab-sub-wrapper {
	min-width: 160px;
}

#wpadminbar .youmeos-admin-bar-btn .ab-submenu a,
#wpadminbar .compass-admin-bar-btn .ab-submenu a {
	padding: 0 12px !important;
	height: 28px;
	line-height: 28px;
}

/* ── YouMeOS Button ───────────────────────────────────── */
#wpadminbar .youmeos-admin-bar-btn > a {
	display: flex !important;
	align-items: center;
	gap: 6px;
	padding: 0 8px !important;
	height: 32px;
}

#wpadminbar .youmeos-admin-bar-btn > a img {
	height: 20px;
	width: 20px;
	display: block;
}

#wpadminbar .youmeos-admin-bar-btn .youmeos-ab-label {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
	background: linear-gradient(135deg, #62c9ff 0%, #a78bfa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

#wpadminbar .youmeos-admin-bar-btn > a:hover {
	background: rgba(98, 201, 255, 0.08) !important;
}

#wpadminbar .youmeos-admin-bar-btn > a:hover .youmeos-ab-label {
	background: linear-gradient(135deg, #fff 0%, #62c9ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

/* ── My Compass Button (Gold Omega) ───────────────────── */
#wpadminbar .compass-admin-bar-btn > a {
	display: flex !important;
	align-items: center;
	gap: 4px;
	padding: 0 8px !important;
	height: 32px;
}

#wpadminbar .compass-admin-bar-btn .compass-ab-omega {
	font-size: 20px !important;
	color: rgb(217, 190, 111) !important;
	width: 20px !important;
	height: 32px !important;
	line-height: 32px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-block !important;
	vertical-align: middle !important;
	box-sizing: border-box;
}

#wpadminbar .compass-admin-bar-btn .compass-ab-label {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
	color: rgb(217, 190, 111) !important;
}

#wpadminbar .compass-admin-bar-btn > a:hover {
	background: rgba(217, 190, 111, 0.08) !important;
}

#wpadminbar .compass-admin-bar-btn > a:hover .compass-ab-label {
	color: #fff !important;
}

#wpadminbar .compass-admin-bar-btn > a:hover .compass-ab-omega {
	color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE ADMIN BAR: Single-Row Fixed Layout & Icon-Only Buttons
   ═══════════════════════════════════════════════════════════════ */
@media screen and (max-width: 782px) {
	#wpadminbar {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 38px !important;
		min-height: 38px !important;
		max-height: 38px !important;
		z-index: 99999 !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		white-space: nowrap !important;
		background: #0d1117 !important;
	}

	#wpadminbar #wp-toolbar {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		width: 100% !important;
		height: 38px !important;
		justify-content: space-between !important;
	}

	#wpadminbar ul#wp-admin-bar-root-default,
	#wpadminbar ul#wp-admin-bar-top-secondary {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		height: 38px !important;
	}

	#wpadminbar li,
	#wpadminbar li.menupop {
		display: inline-flex !important;
		align-items: center !important;
		float: none !important;
		margin: 0 1px !important;
		padding: 0 !important;
		height: 38px !important;
	}

	/* Force all item links to compact width & hide direct text nodes */
	#wpadminbar .ab-item,
	#wpadminbar a.ab-item,
	#wpadminbar .ab-empty-item {
		font-size: 0 !important;
		line-height: 0 !important;
		color: transparent !important;
		padding: 0 6px !important;
		margin: 0 !important;
		height: 38px !important;
		min-height: 38px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		max-width: 38px !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
	}

	/* Force-hide ALL text nodes, labels, and spans inside all buttons */
	#wpadminbar .ab-item *,
	#wpadminbar .ab-item span,
	#wpadminbar .youmeos-ab-label,
	#wpadminbar .compass-ab-label,
	#wpadminbar .ab-label,
	#wpadminbar .display-name,
	#wpadminbar .howdy,
	#wpadminbar #wp-admin-bar-my-account .ab-item span,
	#wpadminbar #wp-admin-bar-compass-menu .compass-ab-label,
	#wpadminbar #wp-admin-bar-w4-setup-wizard .ab-label {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		font-size: 0 !important;
		line-height: 0 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Re-enable and style ONLY icons */
	#wpadminbar .ab-item .ab-icon,
	#wpadminbar .ab-item .compass-ab-omega,
	#wpadminbar .ab-item .dashicons,
	#wpadminbar .ab-item i,
	#wpadminbar .ab-item svg,
	#wpadminbar .ab-icon:before,
	#wpadminbar .dashicons:before,
	#wpadminbar .compass-ab-omega:before {
		display: inline-block !important;
		width: 20px !important;
		height: 20px !important;
		font-size: 16px !important;
		line-height: 20px !important;
		visibility: visible !important;
		opacity: 1 !important;
		color: rgba(255, 255, 255, 0.85) !important;
		margin: 0 !important;
		padding: 0 !important;
		text-indent: 0 !important;
	}

	/* Re-enable Gold Omega icon color */
	#wpadminbar .ab-item .compass-ab-omega {
		color: rgb(217, 190, 111) !important;
	}

	/* Re-enable user avatar image */
	#wpadminbar .ab-item img,
	#wpadminbar .ab-item .avatar {
		display: inline-block !important;
		width: 22px !important;
		height: 22px !important;
		min-width: 22px !important;
		min-height: 22px !important;
		max-width: 22px !important;
		max-height: 22px !important;
		visibility: visible !important;
		opacity: 1 !important;
		margin: 0 !important;
		border-radius: 50% !important;
	}

	/* Completely hide the search form and input box on mobile */
	#wpadminbar #adminbarsearch,
	#wpadminbar #adminbarsearch input,
	#wpadminbar #adminbarsearch .adminbar-input {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}

	/* Render Search as a single icon button */
	#wpadminbar #wp-admin-bar-search .ab-item:before {
		content: "\f179" !important;
		font-family: dashicons !important;
		font-size: 16px !important;
		display: inline-block !important;
		visibility: visible !important;
		opacity: 1 !important;
		color: rgba(255, 255, 255, 0.85) !important;
	}
}