.adpresso-debug-highlight {
	outline: 3px solid #008ec2 !important;
	position: relative;
	z-index: 5555;
	box-shadow: 0 0 15px rgba(0, 142, 194, 0.5);

	&::after {
		content: "AdPresso Debug";
		position: absolute;
		top: -20px;
		left: 0;
		background: #008ec2;
		color: white;
		font-size: 10px;
		padding: 2px 6px;
		border-radius: 3px 3px 0 0;
		pointer-events: none;
	}
}


/* Scoping auf #wpadminbar */
#wpadminbar {
	/* Colors */
	--ap-color-info: #00a0d2;
	--ap-color-warning: #ffb900;
	--ap-color-error: #d63638;
	--ap-color-success: #46b450;
	--ap-color-debug: #999;
	--ap-color-action: #008ec2;
	--ap-color-text-main: #2c3338;
	--ap-color-text-muted: #646970;
	--ap-bg-light: #f0f0f1;
	--ap-bg-white: #ffffff;
	--ap-border: #dcdcde;

	.dashicons {
		font-family: 'dashicons', serif;
	}

	/* --- Top Level Menu Items (Highlight / Hide) --- */
	/* FIX: Wir stellen sicher, dass die Links im Hauptmenü lesbar sind */
	.adpresso-debug-highlight-button a.ab-item,
	.adpresso-debug-toggle-placements-button a.ab-item {
		color: red !important;
		font-weight: normal;
	}

	.adpresso-debug-highlight-button.active a.ab-item {
		color: var(--ap-color-info) !important;
		font-weight: bold;
	}

	/* --- Container Layout --- */
	#wp-admin-bar-adpresso-debug-default {
		max-height: calc(100vh - 60px);
		overflow-y: auto;
		overflow-x: hidden;
		min-width: 650px;
		background: var(--ap-bg-light);
		padding: 0;
		box-shadow: 0 4px 10px rgba(0,0,0,0.1);

		&.hide-unused-mode {
			li.is-unused {
				display: none !important;
			}
		}

		/* Logic für Hide Skipped Toggle */
		&.hide-skipped-mode {
			li.is-skipped {
				display: none !important;
			}
		}

		> li.adpresso-debug-item {
			margin: 0;
			padding: 0;
			list-style: none;
			background: transparent;

			> .ab-item.adpresso-debug-container {
				height: auto !important;
				line-height: 1.4 !important;
				padding: 12px 15px !important;
				display: flex !important;
				flex-direction: column;
				gap: 8px;
				background: var(--ap-bg-white);
				color: var(--ap-color-text-main) !important;
				border-bottom: 1px solid var(--ap-border);
				white-space: normal !important;
				position: relative;

				&:hover {
					background: #fcfcfc;
					color: var(--ap-color-text-main) !important;
				}
			}

			&.is-fallback {
				border-left-color: #d63638; /* Rot markieren */
				background-color: rgba(255, 0, 0, 0.03);

				.adpresso-debug-header::after {
					content: "FALLBACK ACTIVE";
					font-size: 9px;
					background: #d63638;
					color: white;
					padding: 1px 4px;
					border-radius: 3px;
					margin-left: 10px;
					font-weight: bold;
				}
			}

			&.is-pending {
				border-left-color: #ffc107; /* Gelb */
				opacity: 0.8;
			}
		}
	}

	/* --- Status Indikatoren --- */
	.adpresso-debug-item {
		border-left: 4px solid var(--ap-color-success);

		&.is-skipped {
			border-left-color: var(--ap-color-debug);
			opacity: 0.75;
			.adpresso-title {
				text-decoration: line-through;
				color: var(--ap-color-text-muted);
			}
		}

		&.is-error {
			border-left-color: var(--ap-color-error);
			background-color: rgba(214, 54, 56, 0.05);
		}

		/* Valid aber Hook nicht gefeuert */
		&.is-warning {
			border-left-color: var(--ap-color-warning);
		}

		&.hook-not-fired .adpresso-debug-header {
			&::after {
				content: "Hook not fired!";
				display: inline-block;
				font-size: 10px;
				background: var(--ap-color-warning);
				color: #000;
				padding: 2px 5px;
				border-radius: 3px;
				margin-left: auto; /* Ganz nach rechts */
				font-weight: 600;
			}
		}
	}

	/* --- Row 1: Header --- */
	.adpresso-debug-header {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		gap: 8px;

		.adpresso-id {
			color: var(--ap-color-text-muted);
			font-family: monospace;
			font-size: 11px;
			min-width: 45px;
		}

		.adpresso-title {
			font-weight: 600;
			font-size: 13px;
			color: var(--ap-color-text-main);
			margin-right: 10px;
		}

		.adpresso-actions {
			display: flex;
			gap: 6px;
			margin-left: 5px;

			.dashicons {
				color: #a7aaad;
				cursor: pointer;
				transition: color 0.2s;
				font-size: 18px;
				line-height: 20px;
				&:hover { color: var(--ap-color-action); }
			}
		}
	}

	/* --- Badges --- */
	.adpresso-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 2px 8px;
		border-radius: 12px;
		font-size: 10px;
		font-weight: 600;
		text-transform: uppercase;
		color: #fff !important;
		line-height: 1.2;
		box-shadow: 0 1px 2px rgba(0,0,0,0.1);

		&.is-ssr { background-color: #0073aa; }
		&.is-js { background-color: #ca4a1f; }

		/* FIX: Manual Badges nicht mehr weiß auf weiß */
		&.is-trigger { background-color: #555; }

		/* Placement Types */
		&.type-header { background-color: #0073aa; }
		&.type-content { background-color: #d54e21; }
		&.type-footer { background-color: #2c3338; }
		&.type-ad { background-color: #4caf50; }
		&.type-above-title { background-color: #cb846e; }
		&.type-ad-bar { background-color: #17d3e7; }
		&.type-group { background-color: #ff9800; }
		&.type-manual { background-color: #607d8b; }
		&.type-post-top {background-color: #9ab55f;}
		&.type-post-bottom {background-color: #6af61a;}
		&.type-sidebar { background-color: #9c27b0; }
		&.type-popup { background-color: #e91e63; }
		&.type-background { background-color: #673ab7; }
	}

	.adpresso-edit-link {
		text-decoration: none;
		color: #a7aaad;
		margin-left: 5px;
		transition: color 0.2s;
		vertical-align: middle;

		.dashicons {
			font-size: 14px; /* Kleiner als Placement Edit */
			width: 14px;
			height: 14px;
		}

		&:hover {
			color: var(--ap-color-action);
		}
	}

	/* --- Group Info Text (NEU) --- */
	.adpresso-group-info {
		font-size: 10px;
		color: #888;
		margin-left: 8px;
		font-weight: normal;
		background: rgba(0,0,0,0.05);
		padding: 1px 5px;
		border-radius: 3px;
	}

	/* --- Row 2: Payload --- */
	.adpresso-debug-payload {
		display: flex;
		align-items: center;
		background: #f6f7f7;
		padding: 8px 12px;
		border-radius: 4px;
		border-left: 4px solid #ccc;
		margin-top: 4px;

		.dashicons {
			font-size: 18px;
			width: 18px;
			height: 18px;
			margin-right: 8px;
			line-height: 20px;
		}

		span {
			font-size: 12px;
			font-weight: 500;
		}

		&.status-valid {
			border-left-color: var(--ap-color-success);
			.dashicons { color: var(--ap-color-success); }
		}
		&.status-invalid {
			border-left-color: var(--ap-color-error);
			background-color: rgba(214, 54, 56, 0.05);
			.dashicons { color: var(--ap-color-error); }
		}
	}

	/* --- Row 3: Candidates --- */
	.adpresso-candidate-list {
		margin: 6px 0 0 20px !important;
		padding: 0 !important;
		list-style: none !important;
		display: block !important;

		li {
			display: flex !important;
			align-items: center;
			padding: 3px 0;
			font-size: 12px;
			color: var(--ap-color-text-muted);
			border-bottom: 1px solid rgba(0,0,0,0.03);

			&:last-child { border-bottom: none; }

			.candidate-icon {
				margin-right: 6px;
				font-size: 14px;
				width: 16px;
				text-align: center;
				flex: 0 0 auto;
			}

			.candidate-title {
				flex: 0 0 auto;
				white-space: nowrap;
			}

			&.status-selected {
				color: var(--ap-color-success) !important;
				font-weight: 600;
			}

			&.status-rejected {
				color: var(--ap-color-text-muted) !important;
				opacity: 0.8;
				.candidate-title { text-decoration: line-through; }
			}

			.candidate-reason {
				background: #e0e0e0;
				color: #444;
				font-size: 10px;
				padding: 1px 5px;
				border-radius: 3px;
				margin-left: 8px;
				font-style: italic;
				flex: 1 1 auto;
				min-width: 0;

				&.is-live-update {
					border: 1px solid var(--ap-color-action);
					background: #f0f6fc;
					color: var(--ap-color-text-main);
				}
			}

			.adpresso-edit-link {
				margin-left: auto;
				opacity: 1;
				color: blue !important;
			}
		}
	}

	.adpresso-debug-highlight {
		outline: none;
		position: relative;
		z-index: 999999;
		box-shadow: 0 0 15px rgba(0, 142, 194, 0.5);

		&::after {
			content: '';
		}
	}

}