.greenmetrics-dashboard {
	margin-top: 20px;
}

.greenmetrics-stats {
	background: #fff;
	padding: 20px;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	margin-bottom: 20px;
}

.stats-container {
	display: flex;
	gap: 20px;
	margin-top: 20px;
}

.stat-box {
	flex: 1;
	background: #f8f9fa;
	padding: 20px;
	border-radius: 4px;
	text-align: center;
}

.stat-value {
	font-size: 24px;
	font-weight: bold;
	color: #1a73e8;
	margin: 10px 0;
}

.stat-label {
	color: #666;
	font-size: 14px;
}

.greenmetrics-settings {
	background: #fff;
	padding: 20px;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	margin-bottom: 20px;
}

.greenmetrics-optimization {
	background: #fff;
	padding: 20px;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.suggestions-list {
	margin-top: 20px;
}

/* Form styling */
.form-table th {
	width: 200px;
}

.form-table input[type="checkbox"] {
	margin-right: 10px;
}

/* Responsive design */
@media screen and (max-width: 782px) {
	.stats-container {
		flex-direction: column;
	}

	.stat-box {
		margin-bottom: 10px;
	}
}

.greenmetrics-admin-container {
	margin: 20px auto 40px;
	max-width: 1340px;
	padding: 0 20px;
}

.greenmetrics-admin-stats,
.greenmetrics-metrics-trends,
.greenmetrics-admin-settings {
	background: #fff;
	padding: 25px;
	margin-bottom: 30px;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.greenmetrics-admin-stats h2,
.greenmetrics-metrics-trends h2,
.greenmetrics-admin-settings h2 {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 20px;
	color: #1d2327;
	font-weight: 600;
	padding-bottom: 10px;
}

.greenmetrics-admin-stats h3 {
	margin: 30px 0 20px;
	font-size: 18px;
	color: #2c3338;
	font-weight: 500;
}

.greenmetrics-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin: 20px 0 30px;
}

.greenmetrics-stat-card {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;
	border: 1px solid rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: fadeInUp 0.5s ease forwards;
	opacity: 0;
}

.greenmetrics-stat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
	border-color: rgba(0, 0, 0, 0.08);
}

.greenmetrics-stat-card h4 {
	margin: 0 0 15px;
	font-size: 15px;
	color: #50575e;
	font-weight: 500;
	display: flex;
	align-items: center;
}

.greenmetrics-stat-card h4::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	opacity: 0.7;
}

/* Icons for each metric type */
.greenmetrics-stat-card h4:has(+ #total-carbon-footprint)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17,8C8,10,5.9,16.17,3.82,21.34L5.71,22l1-2.3A4.49,4.49,0,0,0,8,20C19,20,22,3,22,3,21,5,14,5.25,9,6.25S2,11.5,2,13.5a6.23,6.23,0,0,0,1.4,3.3L3,19l1.76,1.37A10.23,10.23,0,0,1,4,17C4,16,7,8,17,8Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17,8C8,10,5.9,16.17,3.82,21.34L5.71,22l1-2.3A4.49,4.49,0,0,0,8,20C19,20,22,3,22,3,21,5,14,5.25,9,6.25S2,11.5,2,13.5a6.23,6.23,0,0,0,1.4,3.3L3,19l1.76,1.37A10.23,10.23,0,0,1,4,17C4,16,7,8,17,8Z'/%3E%3C/svg%3E");
	color: #4CAF50;
}

.greenmetrics-stat-card h4:has(+ #total-energy-consumption)::before,
.greenmetrics-stat-card h4:has(+ #avg-energy-consumption)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z'/%3E%3C/svg%3E");
	color: #FF9800;
}

.greenmetrics-stat-card h4:has(+ #total-data-transfer)::before,
.greenmetrics-stat-card h4:has(+ #avg-data-transfer)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z'/%3E%3C/svg%3E");
	color: #2196F3;
}

.greenmetrics-stat-card h4:has(+ #total-requests)::before,
.greenmetrics-stat-card h4:has(+ #avg-requests)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3,22V8H7V22H3M10,22V2H14V22H10M17,22V14H21V22H17Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3,22V8H7V22H3M10,22V2H14V22H10M17,22V14H21V22H17Z'/%3E%3C/svg%3E");
	color: #9C27B0;
}

.greenmetrics-stat-card h4:has(+ #total-views)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z'/%3E%3C/svg%3E");
	color: #00BCD4;
}

.greenmetrics-stat-card h4:has(+ #avg-load-time)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z'/%3E%3C/svg%3E");
	color: #FFC107;
}

.greenmetrics-stat-card h4:has(+ #median-load-time)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z'/%3E%3C/svg%3E");
	color: #FF9800;
}

.greenmetrics-stat-card h4:has(+ #performance-score)::before,
.greenmetrics-stat-card h4:has(+ #avg-carbon-footprint)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13,2.03V2.05L13,4.05C17.39,4.59 20.5,8.58 19.96,12.97C19.5,16.61 16.64,19.5 13,19.93V21.93C18.5,21.38 22.5,16.5 21.95,11C21.5,6.25 17.73,2.5 13,2.03M11,2.06C9.05,2.25 7.19,3 5.67,4.26L7.1,5.74C8.22,4.84 9.57,4.26 11,4.06V2.06M4.26,5.67C3,7.19 2.25,9.04 2.05,11H4.05C4.24,9.58 4.8,8.23 5.69,7.1L4.26,5.67M2.06,13C2.26,14.96 3.03,16.81 4.27,18.33L5.69,16.9C4.81,15.77 4.24,14.42 4.06,13H2.06M7.1,18.37L5.67,19.74C7.18,21 9.04,21.79 11,22V20C9.58,19.82 8.23,19.25 7.1,18.37M16.82,15.19L12.71,11.08C13.12,10.04 12.89,8.82 12.03,7.97C11.13,7.06 9.78,6.88 8.69,7.38L10.63,9.32L9.28,10.68L7.29,8.73C6.75,9.82 7,11.17 7.88,12.08C8.74,12.94 9.96,13.16 11,12.76L15.11,16.86C15.29,17.05 15.56,17.05 15.74,16.86L16.78,15.83C17,15.65 17,15.33 16.82,15.19Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13,2.03V2.05L13,4.05C17.39,4.59 20.5,8.58 19.96,12.97C19.5,16.61 16.64,19.5 13,19.93V21.93C18.5,21.38 22.5,16.5 21.95,11C21.5,6.25 17.73,2.5 13,2.03M11,2.06C9.05,2.25 7.19,3 5.67,4.26L7.1,5.74C8.22,4.84 9.57,4.26 11,4.06V2.06M4.26,5.67C3,7.19 2.25,9.04 2.05,11H4.05C4.24,9.58 4.8,8.23 5.69,7.1L4.26,5.67M2.06,13C2.26,14.96 3.03,16.81 4.27,18.33L5.69,16.9C4.81,15.77 4.24,14.42 4.06,13H2.06M7.1,18.37L5.67,19.74C7.18,21 9.04,21.79 11,22V20C9.58,19.82 8.23,19.25 7.1,18.37M16.82,15.19L12.71,11.08C13.12,10.04 12.89,8.82 12.03,7.97C11.13,7.06 9.78,6.88 8.69,7.38L10.63,9.32L9.28,10.68L7.29,8.73C6.75,9.82 7,11.17 7.88,12.08C8.74,12.94 9.96,13.16 11,12.76L15.11,16.86C15.29,17.05 15.56,17.05 15.74,16.86L16.78,15.83C17,15.65 17,15.33 16.82,15.19Z'/%3E%3C/svg%3E");
	color: #4CAF50;
}

.greenmetrics-stat-value {
	font-size: 28px;
	font-weight: 600;
	color: #1d2327;
	margin: 0;
	line-height: 1.2;
	position: relative;
	z-index: 1;
}

/* Colors for different sections */
.greenmetrics-stat-card.total .greenmetrics-stat-value {
	color: #2E7D32;
}

.greenmetrics-stat-card.average .greenmetrics-stat-value {
	color: #1565C0;
}

/* Section heading styles */
.greenmetrics-admin-stats h3 {
	position: relative;
	padding-left: 15px;
	font-size: 18px;
	font-weight: 500;
	margin: 30px 0 15px;
	color: #1d2327;
}

.greenmetrics-admin-stats h3::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 18px;
	background: #4CAF50;
	border-radius: 4px;
}

.greenmetrics-admin-stats .greenmetrics-environmental-context h3::before {
	display: none;
}

.greenmetrics-admin-stats h3:nth-of-type(2)::before {
	background: #2196F3;
}


.greenmetrics-admin-sidebar {
	width: 300px;
	flex-shrink: 0;
}

.greenmetrics-admin-card {
	background: #fff;
	padding: 20px;
	margin: 20px 0;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.greenmetrics-admin-card h3 {
	margin-top: 0;
	color: #23282d;
	font-size: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e2e4e7;
}

.usage-section {
	margin-bottom: 20px;
}

.usage-section h4 {
	margin: 20px 0 10px;
	color: #23282d;
	font-size: 14px;
}

.usage-section h5 {
	margin: 15px 0 10px;
	color: #23282d;
	font-size: 13px;
}

.usage-section p {
	margin: 0 0 10px;
	color: #50575e;
	line-height: 1.5;
}

.code-block {
	background: #f0f0f1;
	padding: 10px;
	border-radius: 4px;
	margin: 10px 0;
	overflow-x: auto;
}

.code-block code {
	white-space: pre;
	font-family: Consolas, Monaco, monospace;
	font-size: 12px;
	color: #1d2327;
	display: block;
}

.attributes-list {
	margin: 10px 0;
	padding-left: 20px;
	max-width: 100%;
}

.attributes-list li {
	margin-bottom: 8px;
	color: #50575e;
	line-height: 1.5;
	word-break: break-word;
}

.attributes-list code {
	background: #f0f0f1;
	padding: 2px 4px;
	border-radius: 3px;
	font-size: 12px;
	color: #1d2327;
	white-space: normal;
	display: inline-block;
	max-width: 100%;
	overflow-wrap: break-word;
}

.attributes-list strong {
	color: #23282d;
}

/* Responsive adjustments */
@media screen and (max-width: 782px) {
	.greenmetrics-admin-sidebar {
		margin-top: 20px;
	}

	.code-block {
		max-width: 100%;
	}

	.greenmetrics-stats-grid {
		grid-template-columns: 1fr;
	}

	.greenmetrics-stat-card {
		margin-bottom: 10px;
	}

	.greenmetrics-admin-container {
		padding: 0 15px;
	}
}

/* Metrics Section */
.greenmetrics-metrics-section {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 20px;
	margin-bottom: 30px;
}

.greenmetrics-metrics-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.greenmetrics-metric-card {
	background: #f8f9fa;
	border-radius: 6px;
	padding: 20px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.greenmetrics-metric-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.greenmetrics-metric-value {
	font-size: 24px;
	font-weight: 600;
	color: #1d2327;
	margin-bottom: 8px;
}

.greenmetrics-metric-label {
	font-size: 14px;
	color: #50575e;
}

/* Optimization Section */
.greenmetrics-optimization-section {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 20px;
	margin-bottom: 30px;
}

.greenmetrics-suggestions-list {
	margin-top: 20px;
}

.greenmetrics-suggestion-item {
	display: flex;
	align-items: flex-start;
	padding: 15px;
	border-bottom: 1px solid #e2e4e7;
}

.greenmetrics-suggestion-item:last-child {
	border-bottom: none;
}

.greenmetrics-suggestion-icon {
	margin-right: 15px;
	color: #2271b1;
}

.greenmetrics-suggestion-content {
	flex: 1;
}

.greenmetrics-suggestion-title {
	font-weight: 600;
	margin-bottom: 5px;
}

.greenmetrics-suggestion-description {
	color: #50575e;
	margin-bottom: 10px;
}

.greenmetrics-suggestion-actions {
	display: flex;
	gap: 10px;
}

/* Settings Section */
.greenmetrics-settings-section {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 20px;
}

/* Form field styling */
.form-field {
	margin-bottom: 20px;
}

.form-field:last-child {
	margin-bottom: 0;
}

.form-field label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}

.form-field input[type="text"],
.form-field select {
	width: 100%;
	max-width: 400px;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
}

.form-field input[type="text"]:focus,
.form-field select:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	outline: 2px solid transparent;
}

.form-field .description {
	margin-top: 4px;
	color: #666;
	font-style: italic;
	font-size: 13px;
}

/* Color picker styling */
.wp-picker-container {
	display: inline-block;
}

.wp-picker-container .wp-color-result {
	margin: 0 6px 0 0;
	height: 30px;
	border-radius: 3px;
	box-shadow: none;
}

.wp-picker-container .wp-color-result-text {
	line-height: 28px;
	padding: 0 10px;
	border-radius: 0 2px 2px 0;
}

.wp-picker-container .button {
	height: 30px;
	margin-left: 6px;
	padding: 0 10px;
	line-height: 28px;
	background: #f7f7f7;
	border-color: #ccc;
	color: #555;
	border-radius: 3px;
}

.wp-picker-container .button:hover {
	background: #f0f0f0;
	border-color: #999;
	color: #23282d;
}

/* Form styling */
.form-table th {
	width: 200px;
}

.form-table input[type="checkbox"] {
	margin-right: 10px;
}

/* Responsive Design */
@media screen and (max-width: 782px) {
	.greenmetrics-admin-container {
		flex-direction: column;
	}

	.greenmetrics-admin-sidebar {
		width: 100%;
	}

	.greenmetrics-metrics-grid {
		grid-template-columns: 1fr;
	}

	.greenmetrics-suggestion-item {
		flex-direction: column;
	}

	.greenmetrics-suggestion-icon {
		margin-bottom: 10px;
	}

	.greenmetrics-suggestion-actions {
		margin-top: 10px;
	}
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin: 20px 0;
}

.stat-card {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-card h3 {
	margin: 0 0 10px 0;
	color: #23282d;
	font-size: 16px;
}

.stat-value {
	font-size: 24px;
	font-weight: bold;
	color: #0073aa;
	margin: 0;
}

.stat-range {
	font-size: 12px;
	color: #666;
	margin: 5px 0 0 0;
}

.error {
	color: #dc3232;
	padding: 10px;
	background: #fff;
	border-left: 4px solid #dc3232;
	margin: 10px 0;
}

/* Environmental Impact Context */
.greenmetrics-environmental-context {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
	margin-bottom: 30px;
}

.greenmetrics-environmental-context .context-item {
	display: flex;
	padding: 25px;
	border-radius: 12px;
	color: white;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	overflow: hidden;
	position: relative;
}

.greenmetrics-environmental-context .context-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.greenmetrics-environmental-context .context-item.carbon {
	background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
}

.greenmetrics-environmental-context .context-item.energy {
	background: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}

.greenmetrics-environmental-context .context-icon {
	margin-right: 20px;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}

.greenmetrics-environmental-context .context-content {
	flex: 1;
	position: relative;
	z-index: 2;
}

.greenmetrics-environmental-context h3 {
	margin: 0 0 15px !important;
	padding: 0 !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	color: white !important;
}

.greenmetrics-environmental-context p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

.greenmetrics-environmental-context p strong {
	color: white;
	font-weight: 600;
}

.greenmetrics-environmental-context .context-item::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 200px;
	height: 200px;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	transform: translate(50%, -50%);
	z-index: 1;
}

/* Optimization Suggestions */
.optimization-suggestions .optimization-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.optimization-suggestions .optimization-item {
	padding: 16px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	display: flex;
	gap: 15px;
}

.optimization-suggestions .optimization-item:last-child {
	border-bottom: none;
}

.optimization-suggestions .optimization-icon {
	flex: 0 0 36px;
	color: #2271b1;
}

.optimization-suggestions .optimization-content {
	flex: 1;
}

.optimization-suggestions h4 {
	margin: 0 0 8px 0;
	font-size: 16px;
	color: #1d2327;
}

.optimization-suggestions p {
	margin: 0 0 10px 0;
	color: #50575e;
}

.optimization-suggestions .optimization-tips {
	margin: 10px 0 0 15px;
	padding: 0;
	color: #50575e;
}

.optimization-suggestions .optimization-tips li {
	margin-bottom: 5px;
}

.optimization-suggestions strong {
	color: #2271b1;
}

.optimization-suggestions .optimization-item.good-status .optimization-icon {
	color: #46b450; /* WordPress success green */
}

.optimization-suggestions .optimization-item.needs-improvement .optimization-icon {
	color: #ffb900; /* WordPress warning yellow */
}

/* Dashboard Header */
.greenmetrics-admin-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30px 0;
	padding: 15px 20px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.greenmetrics-admin-header .header-content {
	display: flex;
	align-items: center;
}

.greenmetrics-admin-header h1 {
	font-size: 24px;
	margin: 0 0 0 15px;
	color: #1d2327;
	font-weight: 600;
}

.greenmetrics-admin-header img {
	width: 40px;
	height: 40px;
}

.greenmetrics-admin-header .version {
	padding: 4px 8px;
	background: #f0f6fc;
	border-radius: 20px;
	font-size: 12px;
	color: #2271b1;
	font-weight: 500;
}

/* Icon Selection Styles */
.icon-options {
	margin: 5px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.icon-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	padding: 10px;
	border: 2px solid #ddd;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	background-color: #fff;
	margin: 5px;
}

.icon-option:hover {
	border-color: #0073aa;
	background-color: #f8f9fa;
}

.icon-option.selected {
	border-color: #0073aa;
	background-color: #f0f7fc;
	box-shadow: 0 0 0 1px #0073aa;
}

.icon-option svg {
	width: 36px;
	height: 36px;
	fill: #0073aa;
	margin-bottom: 8px;
}

.icon-option span {
	font-size: 12px;
	text-align: center;
	color: #555;
}

#custom-icon-field-wrapper {
	margin-top: 10px;
}

/* Improve select display */
#badge_icon_type {
	min-width: 200px;
	max-width: 100%;
}

/* Preview styles for the badge */
.preview-container .icon-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
}

.preview-container .icon-container svg,
.preview-container .icon-container img {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Color Picker Styling */
.wp-picker-container {
	margin-top: 4px;
	display: block;
}

.wp-picker-container .wp-color-result {
	margin: 0 6px 6px 0;
	height: 30px;
}

.wp-picker-container .wp-color-result-text {
	line-height: 28px;
}

/* Important: Don't hide any input elements */
.wp-picker-container .wp-picker-input-wrap {
	display: inline-block;
	vertical-align: top;
}

/* Make sure the label is visible but compact */
.wp-picker-container .wp-picker-input-wrap label {
	display: inline-block;
	margin-right: 2px;
}

.wp-picker-container input[type="text"].wp-color-picker {
	display: inline-block;
	vertical-align: top;
	margin: 0 4px 0 0;
	height: 28px;
	width: 80px;
}

.wp-picker-container .button.wp-picker-clear {
	display: inline-block;
	height: 28px;
	line-height: 26px;
	padding: 0 10px;
	margin: 0;
	font-size: 12px;
}

.wp-color-result .color-alpha {
	height: 100% !important;
}

/* Form-field specific color picker styling */
.form-field .wp-picker-container {
	display: block;
	margin-top: 6px;
}

.form-field .wp-picker-container .wp-picker-holder {
	margin-top: 6px;
}

.form-field .wp-picker-container.wp-picker-active {
	display: block;
}

/* Ensure proper alignment for color picker input group */
.form-field .wp-picker-container .wp-picker-input-wrap {
	display: inline-block;
	vertical-align: top;
}

/* Ensure the color text input has a proper width */
.form-field .wp-picker-container input[type="text"].wp-color-picker {
	height: 28px;
	width: 80px;
	margin: 0 4px 0 0;
}

/* Style the clear/reset button */
.form-field .wp-picker-container .button.wp-picker-clear {
	height: 28px;
	line-height: 26px;
	padding: 0 10px;
	margin: 0;
	font-size: 12px;
}

/* Preview Container Styles */
.preview-container {
	border-radius: 4px;
}

#badge-preview-container {
	padding: 15px;
}

#badge-preview-container.top-left {
	top: 0;
	left: 0;
}

#badge-preview-container.top-right {
	top: 0;
	right: 0;
}

#badge-preview-container.bottom-left {
	bottom: 0;
	left: 0;
}

#badge-preview-container.bottom-right {
	bottom: 0;
	right: 0;
}

/* Badge Styles */
.greenmetrics-badge {
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	border-radius: 4px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.greenmetrics-badge.small {
	font-size: 12px;
	padding: 6px 10px;
}

.greenmetrics-badge.medium {
	font-size: 14px;
	padding: 8px 12px;
}

.greenmetrics-badge.large {
	font-size: 16px;
	padding: 10px 14px;
}

.greenmetrics-badge .icon-container {
	display: inline-flex;
	margin-right: 6px;
}


/* Metrics checkboxes styling */
.metrics-checkboxes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	border: 1px solid #ddd;
	padding: 15px;
	margin-bottom: 10px;
	background: #f9f9f9;
	border-radius: 4px;
	max-height: 200px;
	overflow-y: auto;
}

.metrics-checkbox-label {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.metrics-checkbox-label:hover {
	background-color: rgba(0, 115, 170, 0.05);
}

.metrics-checkbox-label input {
	margin-right: 8px;
}

@media screen and (max-width: 782px) {
	.metrics-checkboxes {
		grid-template-columns: 1fr;
	}
}

/* Two-column layout for display settings */

.greenmetrics_page_greenmetrics_display .greenmetrics-admin-settings-column {
	background: #fff;
	border-radius: 4px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.greenmetrics-admin-preview-column {
	background: #f9f9f9;
	border-radius: 4px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Consistent tabbed layout structure for all admin pages */

/* Tab content wrappers should be full width */
.greenmetrics-tabs-content {
	width: 100%;
}

/* Tab content should be full width */
.greenmetrics-tab-content {
	width: 100%;
}

/* Default two-column layout for admin content */
.greenmetrics-admin-content-wrapper {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
	margin-top: 20px;
}

/* Special layouts for specific tabs */
/* Templates tab in Email Reporting uses 3:2 ratio for template editing */
#tab-templates .greenmetrics-admin-content-wrapper {
	grid-template-columns: 3fr 2fr;
	margin-top: 0;
}
#tab-templates .greenmetrics-admin-content-wrapper .greenmetrics-admin-card {
	margin-top: 0;
}
.badge-preview {
	background: #fff;
	border-radius: 4px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

@media (max-width: 782px) {
	.greenmetrics-admin-content-wrapper {
		grid-template-columns: 1fr;
	}
}

/* Data Export Styles */
.date-range-inputs {
	display: flex;
	gap: 15px;
	margin-bottom: 10px;
}

.date-range-inputs label {
	display: flex;
	align-items: center;
	gap: 5px;
}

.date-range-inputs input[type="date"] {
	padding: 5px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

#export-page-id {
	max-width: 400px;
}

.greenmetrics-admin-preview-sticky {
	position: sticky;
	top: 32px; /* WP Admin bar height */
}

/* Preview styles */
.badge-preview-panel {
	position: relative;
	background-color: #f9f9f9;
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23eeeeee' fill-opacity='0.6' fill-rule='evenodd'/%3E%3C/svg%3E");
	border: 1px solid #eee;
	border-radius: 8px;
	height: 200px;
	overflow: hidden;
	margin-bottom: 20px;
}

/* Remove the badge placeholder */
/* .badge-preview-panel:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	height: 60px;
	background-image: url("data:image/svg+xml,%3Csvg width='120' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='120' height='30' rx='4' fill='%23e0e0e0'/%3E%3Ccircle cx='20' cy='15' r='8' fill='%23f0f0f0'/%3E%3Crect x='35' y='10' width='70' height='10' rx='2' fill='%23f0f0f0'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.7;
	pointer-events: none;
} */

.popover-preview-panel {
	margin-bottom: 20px;
}

.preview-section {
	margin-bottom: 30px;
}

.preview-section h3 {
	border-bottom: 1px solid #eee;
	margin-bottom: 15px;
}

/* Responsive adjustments */
@media screen and (max-width: 1200px) {
	.greenmetrics-admin-content-wrapper {
		grid-template-columns: 1fr;
	}

	.greenmetrics-admin-settings-column,
	.greenmetrics-admin-preview-column {
		width: 100%;
		max-width: 100%;
	}

	.greenmetrics-admin-preview-sticky {
		position: relative;
		top: 0;
		width: 100%;
		margin-top: 20px;
	}
}

/* Badge preview positions */
#badge-preview-container.top-left {
	top: 15px;
	left: 15px;
}

#badge-preview-container.top-right {
	top: 15px;
	right: 15px;
}

#badge-preview-container.bottom-left {
	bottom: 15px;
	left: 15px;
}

#badge-preview-container.bottom-right {
	bottom: 15px;
	right: 15px;
}

/* Enhanced Visual Grouping for Settings Cards */
.settings-card {
	margin-bottom: 25px;
	border: 1px solid #e2e4e7;
	border-radius: 10px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s ease;
	overflow: hidden;
}

.settings-card:hover {
	box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
}

.settings-card-header {
	background-color: #f8f9fa;
	padding: 15px 20px;
	margin: 0;
	border-bottom: 1px solid #e2e4e7;
	font-size: 16px;
	font-weight: 600;
	color: #23282d;
	display: flex;
	align-items: center;
}

.settings-card-header .card-icon {
	margin-right: 10px;
	color: #0073aa;
	width: 20px;
	height: 20px;
}

.settings-card-content {
	padding: 20px;
	background-color: #fff;
}

/* Card categories */
.settings-card.badge-display {
	border-left: 4px solid #4CAF50;
}

.settings-card.badge-appearance {
	border-left: 4px solid #2196F3;
}

.settings-card.popover-content {
	border-left: 4px solid #9C27B0;
}

.settings-card.popover-appearance {
	border-left: 4px solid #FF9800;
}

/* Form field spacing and styling */
.form-field {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #f0f0f1;
}

.form-field:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.form-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

/* Style the descriptions coming from the render functions */
.form-field .description {
	display: block;
	margin-top: 8px;
	color: #666;
	font-style: italic;
	font-size: 13px;
}

/* Styling for icon-related settings */
.form-field.icon-settings {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #f0f0f1;
}

/* Fix input styles within the form fields */
.form-field input[type="text"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
	width: 100%;
	max-width: 400px;
}

/* Checkbox styling */
.form-field input[type="checkbox"] {
	margin-top: 6px;
}

/* Hidden fields - important for JS functionality */
.form-field.custom-icon-field {
	display: none;
}

.form-field.custom-icon-field.visible {
	display: block;
}

/* Metrics checkboxes styling */
.metrics-checkboxes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	border: 1px solid #ddd;
	padding: 15px;
	margin-bottom: 10px;
	background: #f9f9f9;
	border-radius: 4px;
	max-height: 200px;
	overflow-y: auto;
}

.metrics-checkbox-label {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.metrics-checkbox-label:hover {
	background-color: rgba(0, 115, 170, 0.05);
}

.metrics-checkbox-label input {
	margin-right: 8px;
}

@media screen and (max-width: 782px) {
	.metrics-checkboxes {
		grid-template-columns: 1fr;
	}
}

/* Date Range Selector Styles */
.greenmetrics-date-range {
	margin: 20px 0;
	padding: 20px;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #e2e4e7;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.greenmetrics-date-range-title {
	margin-top: 0;
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: normal;
}

.greenmetrics-date-range-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.greenmetrics-date-btn {
	min-width: 110px;
	text-align: center;
	border-radius: 4px;
	font-weight: 500;
	transition: all 0.2s ease;
	height: 36px;
	line-height: 34px;
	padding: 0 15px;
	position: relative;
}

.greenmetrics-date-btn.active {
	background: #4CAF50;
	color: white;
	border-color: #3d8b40;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.greenmetrics-date-btn:hover:not(.active) {
	background: #f5f5f5;
	border-color: #c3c4c7;
}

.greenmetrics-date-btn.loading {
	opacity: 0.8;
	pointer-events: none;
}

.greenmetrics-date-btn.loading:after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255,255,255,0.3);
	border-radius: 50%;
	border-top-color: white;
	right: 8px;
	top: 50%;
	margin-top: -8px;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.greenmetrics-custom-date-range {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-left: 15px;
	padding-left: 15px;
	border-left: 1px solid #e2e4e7;
}

.greenmetrics-date-input {
	width: 150px;
	padding: 8px 12px;
	height: 36px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05) inset;
	transition: border-color 0.2s ease;
}

.greenmetrics-date-input:focus {
	border-color: #4CAF50;
	box-shadow: 0 0 0 1px #4CAF50;
	outline: none;
}

/* Metrics Trends Section */
.greenmetrics-metrics-trends {
	margin: 30px 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	overflow: hidden;
	padding-top: 25px;
}

/* Chart Styles */
.greenmetrics-metrics-chart {
	margin-top: 20px;
}

.greenmetrics-chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.greenmetrics-chart-header h3 {
	margin: 0;
	padding-left: 0 !important;
}

.greenmetrics-chart-header h3::before {
	display: none !important;
}

.greenmetrics-chart-header .force-refresh {
	background-color: #f0f0f1;
	border-color: #c3c4c7;
}

.greenmetrics-metrics-chart {
	padding: 20px;
}

.greenmetrics-chart-container {
	position: relative;
	height: 400px;
	width: 100%;
	margin-bottom: 30px;
	border-radius: 6px;
	padding: 15px;
	background: #fdfdfd;
	border: 1px solid #f0f0f1;
	transition: all 0.3s ease;
}

.greenmetrics-chart-container.loading {
	opacity: 0.7;
}

.greenmetrics-chart-container.loading:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	margin-left: -15px;
	border: 3px solid rgba(76, 175, 80, 0.2);
	border-radius: 50%;
	border-top-color: #4CAF50;
	animation: spin 1s linear infinite;
	z-index: 10;
}

.greenmetrics-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 20px;
	padding: 15px;
	background: #f9f9f9;
	border-radius: 6px;
	border: 1px solid #f0f0f1;
}

.greenmetrics-chart-legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid #f0f0f1;
	transition: all 0.2s ease;
}

.greenmetrics-chart-legend-item:hover {
	background: #f5f5f5;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.greenmetrics-chart-legend-item .color-indicator {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	margin-right: 5px;
}

.greenmetrics-chart-legend-item label {
	cursor: pointer;
	font-weight: 500;
	user-select: none;
}

.chart-toggle {
	margin: 0;
}

/* Color indicators for each metric */
.greenmetrics-chart-legend-item.carbon_footprint .color-indicator {
	background-color: rgb(255, 99, 132);
}

.greenmetrics-chart-legend-item.energy_consumption .color-indicator {
	background-color: rgb(54, 162, 235);
}

.greenmetrics-chart-legend-item.data_transfer .color-indicator {
	background-color: rgb(75, 192, 192);
}

.greenmetrics-chart-legend-item.http_requests .color-indicator {
	background-color: rgb(153, 102, 255);
}

.greenmetrics-chart-legend-item.page_views .color-indicator {
	background-color: rgb(255, 159, 64);
}

/* Responsive styles */
@media screen and (max-width: 782px) {
	.greenmetrics-date-range-controls {
		flex-direction: column;
		align-items: flex-start;
	}

	.greenmetrics-custom-date-range {
		margin-left: 0;
		margin-top: 15px;
		padding-left: 0;
		padding-top: 15px;
		border-left: none;
		border-top: 1px solid #e2e4e7;
		width: 100%;
	}

	.greenmetrics-date-input {
		width: 100%;
	}

	.greenmetrics-chart-container {
		height: 300px;
	}
}

.greenmetrics-font-size-wrapper {
	max-width: 200px;
}

.font-size-control {
	display: flex;
	align-items: center;
	gap: 8px;
}

.font-size-input-group {
	display: flex;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	overflow: hidden;
}

.font-size-input-group input[type="number"] {
	border: none;
	width: 60px;
	text-align: right;
	-moz-appearance: textfield;
	appearance: textfield;
}

.font-size-input-group input[type="number"]::-webkit-outer-spin-button,
.font-size-input-group input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.font-size-unit {
	display: flex;
	align-items: center;
	padding: 0 8px;
	background: #f0f0f1;
	border-left: 1px solid #8c8f94;
}

.font-size-arrows {
	display: flex;
	flex-direction: column;
}

.font-size-arrows .dashicons {
	cursor: pointer;
	color: #2271b1;
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.font-size-arrows .dashicons:hover {
	color: #135e96;
}

.wp-core-ui .greenmetrics-date-range .greenmetrics-date-btn.active,
.wp-core-ui .greenmetrics-date-range .greenmetrics-date-btn.active:hover {
	background: #4CAF50 !important;
	color: white !important;
	border-color: #3d8b40 !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.wp-core-ui .greenmetrics-date-range .greenmetrics-date-btn:hover:not(.active) {
	background: #f5f5f5 !important;
	border-color: #c3c4c7 !important;
	color: #2c3338 !important;
}

/* Add background details to stats cards */
.greenmetrics-stat-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 80px;
	height: 80px;
	background-color: currentColor;
	opacity: 0.03;
	border-radius: 50%;
	transform: translate(40%, 40%);
	z-index: 0;
	transition: all 0.3s ease;
}

.greenmetrics-stat-card.total::after {
	color: #4CAF50;
}

.greenmetrics-stat-card.average::after {
	color: #2196F3;
}

/* Fade-in animation for stats cards */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.greenmetrics-stat-card {
	animation: fadeInUp 0.5s ease forwards;
	opacity: 0;
}

/* Staggered animation for cards */
.greenmetrics-stat-card:nth-child(1) { animation-delay: 0.1s; }
.greenmetrics-stat-card:nth-child(2) { animation-delay: 0.2s; }
.greenmetrics-stat-card:nth-child(3) { animation-delay: 0.3s; }
.greenmetrics-stat-card:nth-child(4) { animation-delay: 0.4s; }
.greenmetrics-stat-card:nth-child(5) { animation-delay: 0.5s; }
.greenmetrics-stat-card:nth-child(6) { animation-delay: 0.6s; }
.greenmetrics-stat-card:nth-child(7) { animation-delay: 0.7s; }
.greenmetrics-stat-card:nth-child(8) { animation-delay: 0.8s; }

/* Additional styling for headings */
.greenmetrics-admin-stats h2,
.greenmetrics-metrics-trends h2,
.greenmetrics-admin-settings h2 {
	display: inline-block;
	position: relative;
	margin-bottom: 30px;
}

.greenmetrics-admin-stats h2::after,
.greenmetrics-metrics-trends h2::after,
.greenmetrics-admin-settings h2::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 60px;
	height: 3px;
	background: #4CAF50;
	border-radius: 2px;
}

/* Toggle switch styling */
.toggle-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	margin-top: 4px;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-switch .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 34px;
}

.toggle-switch .slider:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}

.toggle-switch input:checked + .slider {
	background-color: #0073aa;
}

.toggle-switch input:focus + .slider {
	box-shadow: 0 0 1px #0073aa;
}

.toggle-switch input:checked + .slider:before {
	transform: translateX(18px);
}

/* Tab Navigation Styles - Consistent across all pages */
.greenmetrics-tabs-nav {
	margin-bottom: 20px;
}

.greenmetrics-tabs-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #ccc;
	background: #f0f0f1;
}

.greenmetrics-tab-item {
	padding: 12px 20px;
	margin: 0;
	cursor: pointer;
	font-weight: 500;
	color: #555;
	background-color: #f0f0f1;
	border: none;
	margin-right: 5px;
	display: flex;
	align-items: center;
	transition: all 0.2s ease;
	position: relative;
}

.greenmetrics-tab-item .dashicons {
	margin-right: 8px;
	vertical-align: middle;
	color: #666;
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.greenmetrics-tab-item:hover {
	color: #2271b1;
}

.greenmetrics-tab-item.active {
	background-color: #fff;
	color: #2271b1;
	border-top: 3px solid #2271b1;
	padding-top: 9px;
}

.greenmetrics-tab-item.active:after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: #fff;
}

.greenmetrics-tab-item.active .dashicons {
	color: #2271b1;
}

/* Tab Content Styles - Consistent across all pages */
.greenmetrics-tab-content {
	display: none;
	width: 100%;
}

.greenmetrics-tab-content.active {
	display: block;
}

/* Accordion Styles */
.settings-card {
	margin-bottom: 20px;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.accordion-trigger {
	cursor: pointer;
	position: relative;
	padding: 15px;
	transition: all 0.2s ease;
	background-color: #fff;
	border-bottom: 1px solid #e5e5e5;
	display: flex;
	align-items: center;
	margin-bottom: 0;
}

.accordion-trigger:hover {
	background-color: #f8f8f8;
}

.accordion-trigger.active {
	background-color: #f9f9f9;
}

.accordion-trigger .card-icon {
	margin-right: 8px;
	vertical-align: middle;
}

.accordion-icon {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	transition: transform 0.3s ease;
	color: #777;
}

.accordion-trigger.active .accordion-icon {
	transform: translateY(-50%) rotate(180deg);
}

.accordion-content {
	display: none;
	overflow: hidden;
	transition: max-height 0.3s ease;
	padding: 20px;
	background-color: #fff;
}

.accordion-content.active {
	display: block;
}

/* Card specific styling */
.badge-display {
	border-left: 4px solid #0073aa;
}

.badge-appearance {
	border-left: 4px solid #00a0d2;
}

.popover-content {
	border-left: 4px solid #46b450;
}

.popover-appearance {
	border-left: 4px solid #ffb900;
}

/* Accordion title icons */
.badge-display .accordion-trigger .card-icon {
	color: #0073aa;
}

.badge-appearance .accordion-trigger .card-icon {
	color: #00a0d2;
}

.popover-content .accordion-trigger .card-icon {
	color: #46b450;
}

.popover-appearance .accordion-trigger .card-icon {
	color: #ffb900;
}

/* Preview Styles */
.preview-container {
	border-radius: 4px;
}

.greenmetrics-admin-preview-sticky {
	position: sticky;
	top: 32px;
}

.badge-preview h2 {
	margin-top: 0;
	font-size: 18px;
	font-weight: 500;
	color: #333;
}

.badge-preview .description {
	color: #666;
	margin-bottom: 20px;
}

.preview-section {
	margin-bottom: 30px;
}

.preview-section h3 {
	font-size: 14px;
	font-weight: 500;
	color: #333;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	margin-bottom: 15px;
}

.badge-preview-panel {
	position: relative;
	height: 150px;
	background: #f9f9f9;
	border: 1px solid #eee;
	border-radius: 4px;
	margin-bottom: 20px;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
}

.popover-preview-panel {
	background: #f9f9f9;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 15px;
	display: flex;
	justify-content: center;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
}

#popover-preview-container {
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

#badge-preview-container {
	padding: 15px;
}

/* Badge positioning classes */
#badge-preview-container.top-left {
	top: 0;
	left: 0;
}

#badge-preview-container.top-right {
	top: 0;
	right: 0;
}

#badge-preview-container.bottom-left {
	bottom: 0;
	left: 0;
}

#badge-preview-container.bottom-right {
	bottom: 0;
	right: 0;
}

/* Badge styling */
.greenmetrics-badge {
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	border-radius: 4px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.greenmetrics-badge.small {
	font-size: 12px;
	padding: 4px 8px;
}

.greenmetrics-badge.medium {
	font-size: 14px;
	padding: 8px 16px;
}

.greenmetrics-badge.large {
	font-size: 16px;
	padding: 12px 24px;
}

.greenmetrics-badge .icon-container {
	display: inline-flex;
	margin-right: 6px;
}

.icon-option svg {
	width: 36px;
	height: 36px;
}

/* Metrics selection checkboxes */
.metrics-checkboxes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	padding: 15px;
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.metrics-checkbox-label {
	display: flex;
	align-items: center;
}

.metrics-checkbox-label input {
	margin-right: 8px;
}

.settings-card-header {
	background: #f9f9f9;
	padding: 15px 20px;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
	align-items: center;
	font-size: 15px;
	font-weight: 600;
	color: #23282d;
}

.settings-card-header .card-icon {
	margin-right: 8px;
	color: #0073aa;
}

.settings-card-content {
	padding: 20px;
}

/* Form field styling */
.form-field {
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
}

.form-field:last-child {
	margin-bottom: 0;
}

.form-field label {
	margin-bottom: 8px;
	font-weight: 500;
	font-size: 14px;
	color: #23282d;
}

.form-field input[type="text"],
.form-field select,
.form-field textarea {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 8px 12px;
	font-size: 14px;
	transition: all 0.2s ease;
	max-width: 400px;
}

.form-field input[type="text"]:focus,
.form-field select:focus,
.form-field textarea:focus {
	border-color: #0073aa;
	box-shadow: 0 0 0 1px #0073aa;
	outline: none;
}

/* Usage instructions styling */
.code-block {
	background: #f5f5f5;
	padding: 15px;
	border-radius: 4px;
	margin: 15px 0;
	overflow-x: auto;
}

.attributes-list {
	padding-left: 20px;
}

.attributes-list li {
	margin-bottom: 8px;
}

.tip-box {
	background: #f8f9fa;
	border-left: 4px solid #0073aa;
	padding: 12px 15px;
	margin-top: 15px;
	border-radius: 0 4px 4px 0;
}

/* Guide cards for the usage instructions */
.guide-card {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	padding: 20px;
	margin-bottom: 20px;
	border: 1px solid rgba(0,0,0,0.06);
}

.guide-card h3 {
	margin-top: 0;
	margin-bottom: 15px;
	font-size: 16px;
	color: #23282d;
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 10px;
}

.guide-card ol {
	margin-left: 20px;
	line-height: 1.6;
}

/* Sticky Submit Container */
.sticky-submit-container {
	position: sticky;
	bottom: 0;
	background: #fff;
	padding: 15px 0;
	margin-top: 20px;
	z-index: 100;
	text-align: left;
}

.sticky-submit-container .button-primary {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
	text-decoration: none;
	text-shadow: none;
	padding: 0 16px;
	height: 32px;
	line-height: 30px;
	font-size: 13px;
	border-radius: 3px;
	font-weight: 500;
	box-shadow: none;
}

.sticky-submit-container .button-primary:hover {
	background: #135e96;
	border-color: #135e96;
	color: #fff;
}

/* Font Size Control Styles */
.greenmetrics-font-size-wrapper {
	margin-bottom: 15px;
}

.font-size-control {
	display: flex;
	align-items: center;
	max-width: 165px;
	position: relative;
	margin-bottom: 5px;
}

.font-size-input-group {
	display: flex;
	border: 1px solid #8d96a0;
	border-radius: 4px;
	overflow: hidden;
	flex: 1;
}

.font-size-number {
	border: none !important;
	box-shadow: none !important;
	flex: 1;
	text-align: center;
	padding: 0 5px !important;
	min-height: 30px;
	-moz-appearance: textfield;
	width: 65px !important;
	font-size: 13px !important;
}

.font-size-number:focus {
	outline: none !important;
}

.font-size-number::-webkit-outer-spin-button,
.font-size-number::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.font-size-unit {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f1;
	min-width: 30px;
	color: #50575e;
	border-left: 1px solid #8d96a0;
	font-size: 13px;
}

.font-size-arrows {
	display: flex;
	flex-direction: column;
	margin-left: 6px;
	height: 30px;
	justify-content: space-between;
}

.font-size-arrows .dashicons {
	font-size: 18px;
	height: 15px;
	width: 15px;
	cursor: pointer;
	color: #2271b1;
	transition: color 0.2s ease;
	line-height: 15px;
}

.font-size-arrows .dashicons:hover {
	color: #135e96;
}