/**
 * AdPresso Admin Bar Styles
 * TODO: Needs rewrite in SCSS
 */

:root {
	--info-color: #00a0d2;
	--warning-color: #ffb900;
	--error-color: #d63638;
	--success-color: #46b450;
	--debug-color: #999;
	--action-color: #008ec2;
}

/* AdPresso Icon in the main menu */
#wp-admin-bar-adpresso-notifications > .ab-item:before {
	content: "\f466";
	font-family: 'dashicons';
	padding-right: 6px;
}

/* Benachrichtigungsfarben */
#wpadminbar .adpresso-adminbar-notice.adpresso-notice-error > a { color: var(--error-color); }
#wpadminbar .adpresso-adminbar-notice.adpresso-notice-info > a { color: var(--info-color); }
#wpadminbar .adpresso-adminbar-notice.adpresso-notice-warning > a { color: var(--warning-color); }

/* Icons */
.adpresso-icon {
	margin-right: 6px;
	vertical-align: middle;
	font-size: 16px;
	opacity: 0.8;
}

/* Icon-Farben nach Typ */
.adpresso-notice-info .adpresso-icon { color: var(--info-color); }
.adpresso-notice-warning .adpresso-icon { color: var(--warning-color); }
.adpresso-notice-error .adpresso-icon { color: var(--error-color); }
.adpresso-notice-success .adpresso-icon { color: var(--success-color); }
.adpresso-notice-debug .adpresso-icon { color: var(--debug-color); }
.adpresso-notice-action .adpresso-icon { color: var(--action-color); }

/* Message */
.adpresso-message {
	display: inline-block;
	margin-right: 8px;
	vertical-align: middle;
}

/* Badges */
#wp-admin-bar-adpresso-debug .adpresso-debug-badge {
	display: inline-block;
	background: var(--error-color);
	color: #fff;
	border-radius: 10px;
	padding: 1px 6px;
	font-size: 10px;
	line-height: 1.4;
	vertical-align: middle;
	margin: 0 8px;
}

/* Badge-Farben nach Typ */
.adpresso-notice-success .adpresso-badge { background: var(--success-color); }
.adpresso-notice-warning .adpresso-badge { background: var(--warning-color); }
.adpresso-notice-debug .adpresso-badge { background: #666; }

/* Scrollbarer Debug-Bereich */
#wp-admin-bar-adpresso-debug-default {
	max-height: calc(100vh - 150px);
	overflow-y: auto;
	overflow-x: hidden;
}

#wp-admin-bar-adpresso-debug-default > li {
	display: flex;
}

/* Debug-Item Styling */
.adpresso-debug-item .ab-item {
	transition: all 0.2s ease-in-out;
}

/* Status-Darstellung */
.adpresso-debug-item.debug-text-red > .ab-item { color: var(--error-color) !important; }
.adpresso-debug-item.debug-text-green > .ab-item { color: var(--success-color) !important; }
.adpresso-debug-item.debug-strikethrough > .ab-item { text-decoration: line-through; }

.adpresso-debug-item.debug-hook-not-fired > .ab-item {
	opacity: 0.7;
	border-left: 3px solid var(--warning-color);
}

/* Hover-Stile */
.adpresso-debug-item.debug-status-skipped > .ab-item:hover,
.adpresso-debug-item.debug-hook-not-fired > .ab-item:hover {
	color: var(--error-color) !important;
	background: rgba(255, 0, 0, 0.05) !important;
}

/* Typ-Badges */
.adpresso-debug-type-badge { vertical-align: middle; }
.adpresso-debug-type-header { background-color: #0073aa !important; }
.adpresso-debug-type-content { background-color: #d54e21 !important; }
.adpresso-debug-type-footer { background-color: #333 !important; }
.adpresso-debug-type-ad { background-color: #4caf50 !important; }
.adpresso-debug-type-group { background-color: #ff9800 !important; }
.adpresso-debug-type-above-title { background-color: #2196f3 !important; }
.adpresso-debug-type-post-top { background-color: #8bc34a !important; }
.adpresso-debug-type-post-bottom { background-color: #ff5722 !important; }
.adpresso-debug-type-manual { background-color: #607d8b !important; }
.adpresso-debug-type-ad-bar { background-color: #9c27b0 !important; }

/* Ad-Liste */
.adpresso-debug-ad-list {
	width: 100%;
	flex-basis: 100%;
	list-style: none;
	margin: 5px 0 5px 25px;
	padding: 0;
	font-size: 0.9em;
}

.adpresso-debug-ad-list li { padding: 2px 0; }
.adpresso-debug-ad-item.debug-ad-status-pending { color: #ccc; }
.adpresso-debug-ad-item.debug-ad-status-displayed { color: var(--success-color) !important; }
.adpresso-debug-ad-item.debug-ad-status-skipped-vc,
.adpresso-debug-ad-item.debug-ad-status-skipped-fc,
.adpresso-debug-ad-item.debug-ad-status-skipped-limit {
	color: var(--error-color) !important;
	text-decoration: line-through;
}

/* Debug-Item Layout */
#wp-admin-bar-adpresso-debug-default .adpresso-debug-item > .ab-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0 !important;
	min-height: var(--wp-admin--admin-bar--height, 32px);
	border-bottom: 1px solid #444;
	flex-grow: 1;
	flex-shrink: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: 10px;
	height: auto !important;
	line-height: inherit !important;
}

#wp-admin-bar-adpresso-debug-default .adpresso-debug-item:last-child {
	border-bottom: none;
}

/* Action Icons */
.adpresso-debug-actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

#wp-admin-bar-adpresso-debug .adpresso-debug-actions .adpresso-debug-action-icon {
	font-family: dashicons !important;
	display: inline-block;
	margin-left: 6px;
	font-size: 24px;
	line-height: 1;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.2s;
}

.adpresso-debug-item .adpresso-debug-action-icon:hover {
	opacity: 1;
}

/* Gruppen-Items */
#wp-admin-bar-adpresso-debug .adpresso-debug-group-item > ul {
	min-width: 200px;
}

/* Highlight-Funktionalität */
#wp-admin-bar-adpresso-debug-highlight-toggle.active .ab-item {
	background: rgba(0, 115, 170, 0.2) !important;
}

#wp-admin-bar-adpresso-debug-highlight-toggle span.dashicons,
#wp-admin-bar-adpresso-debug-toggle-placements span.dashicons {
	font-family: dashicons !important;
}

.adpresso-debug-highlight {
	outline: 3px solid #007cba !important;
	box-shadow: 0 0 15px rgba(0, 115, 170, 0.7) !important;
	z-index: 99999 !important;
	transition: outline 0.2s ease-in-out;
}

/* Separator */
#wp-admin-bar-adpresso-debug-separator .ab-item {
	height: 1px !important;
	background: #444;
	padding: 0 !important;
	cursor: default;
	width: 100%;
}

#wp-admin-bar-adpresso-debug-separator .ab-item:hover {
	background: #444 !important;
}

/* Der äußere Container (li) sorgt für den Abstand und die untere Linie */
#wp-admin-bar-adpresso-debug-default .adpresso-debug-item {
	display: flex; /* Richtet den Inhalts-Div und die Aktionen-Divs nebeneinander aus */
	align-items: center;
	border-bottom: 1px solid #444;
	padding: 0 10px;
}

/* Der Inhalts-Container (div.ab-item) wird jetzt zum Grid */
#wp-admin-bar-adpresso-debug-default .adpresso-debug-item > .ab-item {
	flex-grow: 1;
	display: grid;
	grid-template-columns: minmax(300px, 2fr) minmax(120px, 1fr) minmax(100px, 1fr) minmax(250px, 1fr) minmax(50px, 2fr) minmax(100px, 1fr);

	gap: 15px;
	align-items: center;
	padding: 8px 0;
	overflow: hidden;
}

#wp-admin-bar-adpresso-debug-default .adpresso-debug-item .adpresso-debug-col {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}