/**
 * Intelliguard Elements — Analytics Preview widget styles.
 *
 * Canonical replacement for the three per-product analytics-preview widgets
 * (miraprep / mcws / mccab). Recreates src/components/RfidAnalyticsPreview.tsx
 * with pure CSS (no JS chart library): a conic-gradient donut, width-% bars
 * and severity insight chips inside a responsive 3->1 tile grid.
 *
 * All selectors are scoped under the `ig-ap` prefix. Brand tokens are declared
 * on the section wrapper `.ig-ap` so the widget is self-contained.
 */

/* =========================================================================
   Wrapper + brand tokens
   ========================================================================= */
.ig-ap {
	--ig-navy: hsl(225 70% 17%);
	--ig-navy-light: hsl(225 50% 30%);
	--ig-gold: hsl(38 91% 55%);
	--ig-gold-light: hsl(38 91% 70%);
	--ig-teal: hsl(174 60% 42%);
	--ig-teal-light: hsl(174 50% 60%);
	--ig-background: var(--ig-surface, hsl(0 0% 100%));
	--ig-foreground: var(--ig-ink, hsl(225 70% 17%));
	--ig-primary: hsl(225 70% 17%);
	--ig-muted: hsl(220 20% 96%);
	--ig-muted-foreground: hsl(220 10% 46%);
	--ig-border: hsl(220 20% 90%);
	--ig-card: hsl(0 0% 100%);
	--ig-radius: 0.75rem;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	box-sizing: border-box;
	display: block;
	padding: 5rem 0;
	background: var(--ig-background);
}

.ig-ap * {
	box-sizing: border-box;
}

.ig-ap__container {
	width: 100%;
	max-width: 72rem; /* matches the React max-w-6xl panel column */
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
}

/* =========================================================================
   Header (eyebrow / heading / description)
   ========================================================================= */
.ig-ap__head {
	text-align: center;
	max-width: 48rem;
	margin: 0 auto 2.5rem;
}

.ig-ap__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--ig-gold);
	margin-bottom: 0.75rem;
}

.ig-ap__heading {
	font-size: clamp(1.875rem, 4vw, 2.25rem);
	font-weight: 700;
	color: var(--ig-primary);
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

.ig-ap__desc {
	color: var(--ig-muted-foreground);
	line-height: 1.7;
	margin: 0;
}

/* =========================================================================
   Dashboard panel
   ========================================================================= */
.ig-ap__panel {
	border: 1px solid var(--ig-border);
	border-radius: 1.5rem;
	overflow: hidden;
	background: linear-gradient(to bottom right, var(--ig-card), hsl(220 20% 96% / 0.4));
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.ig-ap__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--ig-border);
	background: hsl(0 0% 100% / 0.6);
}

.ig-ap__brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ig-ap__brand-icon {
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	border-radius: 0.5rem;
	background: hsl(38 91% 55% / 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ig-gold);
}

.ig-ap__brand-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.ig-ap__brand-title {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--ig-primary);
}

.ig-ap__brand-sub {
	font-size: 0.75rem;
	color: var(--ig-muted-foreground);
}

.ig-ap__live {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--ig-muted-foreground);
	white-space: nowrap;
}

.ig-ap__live-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: var(--ig-teal);
	animation: ig-ap-pulse 1.8s ease-in-out infinite;
}

/* =========================================================================
   Tile grid (3 -> 1 responsive)
   ========================================================================= */
.ig-ap__tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	padding: 1.5rem;
}

@media (min-width: 768px) {
	.ig-ap__tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ig-ap-tile {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-height: 180px;
	padding: 1rem;
	border: 1px solid var(--ig-border);
	border-radius: 0.75rem;
	background: var(--ig-card);
}

.ig-ap-tile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.ig-ap-tile__title {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ig-primary);
}

.ig-ap-tile__badge {
	font-size: 0.625rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
	background: var(--ig-muted);
	color: var(--ig-muted-foreground);
	white-space: nowrap;
}

.ig-ap-tile__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* =========================================================================
   Tile 1 — Inventory Health donut
   ========================================================================= */
.ig-ap-donut__wrap {
	position: relative;
	width: 120px;
	height: 120px;
	margin: 0 auto;
}

.ig-ap-donut {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	/* Cut the centre hole (Recharts innerRadius 42 / outerRadius 60 ~= 0.7). */
	-webkit-mask: radial-gradient(farthest-side, transparent 68%, #000 69%);
	mask: radial-gradient(farthest-side, transparent 68%, #000 69%);
}

.ig-ap-donut__center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.ig-ap-donut__center-label {
	font-size: 0.625rem;
	color: var(--ig-muted-foreground);
}

.ig-ap-donut__center-value {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--ig-primary);
}

.ig-ap-donut__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 0.75rem;
	row-gap: 0.25rem;
	margin-top: 0.5rem;
}

.ig-ap-donut__legend-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.ig-ap-donut__swatch {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	flex-shrink: 0;
}

.ig-ap-donut__legend-label {
	font-size: 0.625rem;
	color: var(--ig-muted-foreground);
}

/* =========================================================================
   Tile 2 — Top Anomalies bars
   ========================================================================= */
.ig-ap-bars {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 0.25rem 0;
}

.ig-ap-bar {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ig-ap-bar__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.6875rem;
}

.ig-ap-bar__label {
	color: var(--ig-muted-foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 0.5rem;
}

.ig-ap-bar__value {
	font-weight: 600;
	color: var(--ig-primary);
	flex-shrink: 0;
}

.ig-ap-bar__track {
	height: 0.5rem;
	border-radius: 9999px;
	background: var(--ig-muted);
	overflow: hidden;
}

.ig-ap-bar__fill {
	height: 100%;
	border-radius: 9999px;
	background: var(--ig-gold);
	transition: width 0.6s ease-out;
}

/* =========================================================================
   Tile 3 — Optimization Queue insights
   ========================================================================= */
.ig-ap-queue {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ig-ap-queue__item {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.6875rem;
}

.ig-ap-queue__icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	border-radius: 0.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ig-ap-queue__icon svg {
	width: 0.75rem;
	height: 0.75rem;
}

/* Severity chip palette (sevStyle in RfidAnalyticsPreview.tsx). */
.ig-ap-queue__icon--info {
	background: hsl(225 50% 30% / 0.12);
	color: var(--ig-navy-light);
}

.ig-ap-queue__icon--warn {
	background: hsl(38 91% 55% / 0.15);
	color: hsl(38 91% 40%);
}

.ig-ap-queue__icon--good {
	background: hsl(174 60% 42% / 0.15);
	color: var(--ig-teal);
}

.ig-ap-queue__label {
	color: var(--ig-muted-foreground);
	line-height: 1.4;
}

/* =========================================================================
   Panel footer
   ========================================================================= */
.ig-ap__panel-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.75rem 1.5rem;
	border-top: 1px solid var(--ig-border);
	background: hsl(220 20% 96% / 0.3);
	font-size: 0.75rem;
	color: var(--ig-muted-foreground);
}

.ig-ap__panel-foot-tag {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	white-space: nowrap;
}

/* =========================================================================
   Keyframes
   ========================================================================= */
@keyframes ig-ap-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.ig-ap__live-dot,
	.ig-ap-bar__fill {
		animation: none !important;
		transition: none !important;
	}
}