/* Admin Toolbar Styles */
.admin-toolbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
	color: white;
	padding: 8px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 1001;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	font-family: "Ponomar", "Times New Roman", "DejaVu Serif", Georgia, serif;
}

.admin-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.admin-badge {
	background: rgba(255, 255, 255, 0.2);
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: bold;
}

.admin-name {
	font-size: 14px;
	font-weight: 500;
}

.admin-actions {
	display: flex;
	gap: 8px;
}

.admin-btn {
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border: none;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: "Ponomar", "Times New Roman", "DejaVu Serif", Georgia, serif;
}

.admin-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-1px);
}

.admin-btn.logout-btn {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.admin-btn.logout-btn:hover {
	background: rgba(255, 255, 255, 0.25);
}

/* Adjust header position when admin toolbar is present */
body:has(.admin-toolbar) .header,
body.has-admin-toolbar .header {
	top: 40px;
}

/* When admin toolbar is present, push main content down to clear header */
body:has(.admin-toolbar) .blog-main,
body.has-admin-toolbar .blog-main {
	/* Desktop: header height (90px) + toolbar offset (40px) */
	margin-top: calc(90px + 40px);
}

/* Match blog header heights at <=1200px */
@media (max-width: 1200px) {
	body:has(.admin-toolbar) .blog-main,
	body.has-admin-toolbar .blog-main {
		/* header height (80px) + toolbar offset (40px) */
		margin-top: calc(80px + 40px);
	}
}

/* Match blog header heights at <=900px */
@media (max-width: 900px) {
	body:has(.admin-toolbar) .blog-main,
	body.has-admin-toolbar .blog-main {
		/* header height (70px) + toolbar offset (40px) */
		margin-top: calc(70px + 40px);
	}
}

/* Responsive admin toolbar */
@media (max-width: 768px) {
	.admin-toolbar {
		padding: 6px 15px;
		flex-direction: column;
		gap: 8px;
		height: auto;
	}

	.admin-info {
		order: 1;
	}

	.admin-actions {
		order: 2;
		flex-wrap: wrap;
		justify-content: center;
	}

	.admin-btn {
		padding: 4px 8px;
		font-size: 11px;
	}

	body:has(.admin-toolbar) .header,
	body.has-admin-toolbar .header {
		top: 70px;
	}

	/* Match the increased header offset on tablets (header 65px + toolbar 70px) */
	body:has(.admin-toolbar) .blog-main,
	body.has-admin-toolbar .blog-main {
		margin-top: calc(65px + 70px);
	}
}

@media (max-width: 480px) {
	.admin-toolbar {
		padding: 4px 10px;
	}

	.admin-badge {
		font-size: 10px;
		padding: 3px 6px;
	}

	.admin-name {
		font-size: 12px;
	}

	.admin-btn {
		padding: 3px 6px;
		font-size: 10px;
	}

	body:has(.admin-toolbar) .header,
	body.has-admin-toolbar .header {
		top: 65px;
	}

	/* Match the increased header offset on mobile (header 60px + toolbar 65px) */
	body:has(.admin-toolbar) .blog-main,
	body.has-admin-toolbar .blog-main {
		margin-top: calc(60px + 65px);
	}
}