/**
 * WASP Patterns Pro - Premium Styles
 * "The Auditor Look" - Clean, Flat, Semantic.
 * 
 * Includes Editor-specific overrides for proper backend rendering.
 * 
 * @package WASP_Patterns_Pro
 * @version 1.2.0
 */

/* =========================================
 * 1. The "Data Card" Container
 * Wraps all charts in a clean white box
 * ========================================= */
.wasp-data-card {
	border: 1px solid var(--wp--preset--color--neutral-2, #e5e7eb);
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.02);
	background-color: #fff;
	overflow: hidden;
	/* Force sizing in Editor */
	max-width: 100%; 
	box-sizing: border-box;
}

.wasp-chart-header {
	margin-bottom: 1.5rem !important;
	border-bottom: 1px solid var(--wp--preset--color--neutral-2, #e5e7eb);
	padding-bottom: 1rem;
	margin-top: 0 !important; /* Editor fix */
}

/* =========================================
 * 2. Bar Chart (Horizontal)
 * ========================================= */
.wasp-bar-row {
	margin-bottom: 1rem;
}

.wasp-bar-label-group {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.25rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.wasp-bar-label-group p {
	margin: 0 !important;
}

.wasp-bar-track {
	height: 8px !important;
	min-height: 8px !important;
	background-color: var(--wp--preset--color--neutral-1, #f3f4f6) !important;
	border-radius: 99px;
	overflow: hidden;
	width: 100%; /* Ensure full width in editor */
	padding: 0 !important;
}

.wasp-bar-fill {
	height: 100% !important;
	min-height: 8px !important; /* Force visibility in editor */
	border-radius: 99px;
	transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover Effect: Bar glows slightly */
.wasp-bar-row:hover .wasp-bar-fill {
	filter: brightness(1.1);
}

/* =========================================
 * 3. Column Chart (Vertical)
 * ========================================= */
.wasp-column-chart-container {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	height: 250px;
	padding: 20px 0;
	background-image: linear-gradient(var(--wp--preset--color--neutral-2, #e5e7eb) 1px, transparent 1px);
	background-size: 100% 50px;
	background-position: bottom;
	border-bottom: 2px solid var(--wp--preset--color--neutral-2, #e5e7eb);
	gap: 10px;
}

.wasp-col-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	flex: 1;
}

/* Editor Fix: Ensure columns don't collapse */
.wasp-col-bar {
	width: 40px !important;
	border-radius: 4px 4px 0 0;
	min-height: 2px;
	transition: height 0.3s ease;
}

.wasp-col-value {
	font-size: 0.75rem;
	font-weight: 700;
	margin: 0 0 5px 0 !important;
	text-align: center;
}

.wasp-col-label {
	margin: 10px 0 0 0 !important;
	font-size: 0.75rem;
	color: var(--wp--preset--color--neutral-3, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
}

/* =========================================
 * 4. Risk Meter (Gauge)
 * ========================================= */
.wasp-risk-card {
	text-align: center;
}

.wasp-risk-score {
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	margin: 10px 0 !important;
}

.wasp-risk-track {
	height: 16px !important;
	min-height: 16px !important;
	border-radius: 99px;
	background: linear-gradient(to right, 
		var(--wp--preset--color--accent-1, #28544B) 0%, 
		var(--wp--preset--color--accent-1, #28544B) 33%, 
		var(--wp--preset--color--accent-4, #C69F4B) 33%, 
		var(--wp--preset--color--accent-4, #C69F4B) 66%, 
		var(--wp--preset--color--accent-2, #981623) 66%, 
		var(--wp--preset--color--accent-2, #981623) 100%
	);
	position: relative;
	margin: 20px 0;
	padding: 0 !important;
	overflow: visible !important; /* Allow needle to stick out */
}

.wasp-risk-marker {
	position: absolute;
	top: -8px;
	width: 4px;
	height: 32px;
	background: var(--wp--preset--color--contrast, #111622);
	border: 2px solid #fff;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	transform: translateX(-50%);
	z-index: 10; /* Ensure visibility in editor */
	transition: left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.wasp-risk-labels {
	display: flex;
	justify-content: space-between;
}

.wasp-risk-labels p {
	margin: 0 !important;
}

/* =========================================
 * 5. EDITOR SPECIFIC OVERRIDES
 * This fixes the "Lousy" look in the backend
 * ========================================= */
.editor-styles-wrapper .wasp-data-card {
	margin: 0 !important; /* Remove weird editor margins */
}

.editor-styles-wrapper .wasp-data-card .wp-block-group {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.editor-styles-wrapper .wasp-col-group p {
	margin-bottom: 0 !important; /* Tighten text in columns */
	margin-top: 0 !important;
}

/* Fix Flexbox collapsing in Editor Sidebar */
.editor-styles-wrapper .wasp-bar-label-group {
	width: 100%;
}

.editor-styles-wrapper .wasp-bar-row {
	margin-bottom: 1rem !important;
}

.editor-styles-wrapper .wasp-bar-track {
	padding: 0 !important;
	margin: 0 !important;
}

.editor-styles-wrapper .wasp-bar-fill {
	padding: 0 !important;
	margin: 0 !important;
}

/* Ensure column chart renders in editor */
.editor-styles-wrapper .wasp-column-chart-container {
	display: flex !important;
	min-height: 250px;
}

.editor-styles-wrapper .wasp-col-group {
	display: flex !important;
	flex-direction: column !important;
}

/* Risk meter editor fixes */
.editor-styles-wrapper .wasp-risk-track {
	overflow: visible !important;
}

/* =========================================
 * 6. Mobile Responsiveness
 * ========================================= */
@media (max-width: 600px) {
	.wasp-column-chart-container {
		gap: 4px;
		height: 200px;
	}
	
	.wasp-col-bar {
		width: 100% !important;
		max-width: 30px;
	}
	
	.wasp-col-value {
		font-size: 0.65rem;
	}
	
	.wasp-risk-score {
		font-size: 3rem !important;
	}
}