/* NE Design System — modules/widgets.css — Widget components (#88) */
/* Tournament summary, race stats, countdown, profile stat cards */

/* ============================================================
   WIDGET ROW — flex/grid container for widget groups
   ============================================================ */
.ne-widget-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ne-space-4);
	margin-bottom: var(--ne-space-5);
}

.ne-widget-row--3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ne-space-4);
}

.ne-widget-row--race {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--ne-space-4);
}

.ne-widget-row--profile {
	justify-content: center;
	gap: var(--ne-space-5);
	padding: var(--ne-space-5) 0;
	border-top: 1px solid var(--ne-border);
	border-bottom: 1px solid var(--ne-border);
}

.ne-widget-row--compact {
	gap: var(--ne-space-3);
	padding: var(--ne-space-4) 0 var(--ne-space-6);
	align-items: stretch;
}

/* ============================================================
   WIDGET CARD — base component
   ============================================================ */
.ne-widget {
	background: var(--ne-surface);
	border: 1px solid var(--ne-border);
	border-radius: var(--ne-radius-md);
	padding: var(--ne-space-4) var(--ne-space-5);
	display: flex;
	align-items: center;
	gap: var(--ne-space-4);
	box-shadow:
		2px 2px 8px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition: transform var(--ne-duration) var(--ne-ease),
				box-shadow var(--ne-duration) var(--ne-ease);
}

.ne-widget:hover {
	transform: translateY(-1px);
	box-shadow:
		3px 4px 12px rgba(0, 0, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Compact variant — smaller padding, no icon */
.ne-widget--compact {
	padding: var(--ne-space-3) var(--ne-space-4);
	min-width: 90px;
	justify-content: center;
	text-align: center;
}

/* Highlight variant — accent left border */
.ne-widget--highlight {
	border-left: 3px solid var(--ne-accent);
}

/* Rank variant — centered, larger value */
.ne-widget--rank {
	justify-content: center;
	text-align: center;
}

.ne-widget--rank .ne-widget__value {
	font-size: 2rem;
}

/* ============================================================
   WIDGET INTERNALS
   ============================================================ */
.ne-widget__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ne-accent-glow);
	border-radius: var(--ne-radius-sm);
	color: var(--ne-accent);
	font-size: 1rem;
}

.ne-widget__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ne-widget__value {
	font-family: var(--ne-font-mono);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ne-text);
	display: flex;
	align-items: center;
	gap: var(--ne-space-2);
	line-height: 1.3;
}

.ne-widget--compact .ne-widget__value {
	font-size: 1.5rem;
	justify-content: center;
}

.ne-widget__label {
	font-family: var(--ne-font-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--ne-text-subtle);
}

.ne-widget__sub {
	font-family: var(--ne-font-mono);
	font-size: 0.75rem;
	color: var(--ne-text-muted);
}

.ne-widget__empty {
	font-family: var(--ne-font-mono);
	font-size: 0.813rem;
	color: var(--ne-text-subtle);
	padding: var(--ne-space-3) 0;
	text-align: center;
}

/* ============================================================
   TREND INDICATORS
   ============================================================ */
.ne-widget__trend {
	font-size: 0.75rem;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.ne-widget__trend--up {
	color: var(--ne-green);
}

.ne-widget__trend--down {
	color: var(--ne-red);
}

.ne-widget__trend--flat {
	color: var(--ne-text-subtle);
}

/* ============================================================
   PROGRESS BAR (license progress)
   ============================================================ */
.ne-widget__progress {
	margin-top: var(--ne-space-2);
	width: 100%;
}

.ne-widget__progress-bar {
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 2px;
	overflow: hidden;
}

.ne-widget__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--ne-accent-soft), var(--ne-accent));
	border-radius: 2px;
	transition: width 0.4s var(--ne-ease);
}

.ne-widget__progress-text {
	font-family: var(--ne-font-mono);
	font-size: 0.625rem;
	color: var(--ne-text-muted);
	margin-top: 2px;
	display: block;
}

/* ============================================================
   PODIUM GRID
   ============================================================ */
.ne-widget--podium {
	flex-direction: column;
	align-items: stretch;
	padding: var(--ne-space-4);
}

.ne-widget--podium .ne-widget__label {
	margin-bottom: var(--ne-space-3);
}

.ne-podium-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ne-space-3);
}

.ne-podium-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ne-space-1);
	text-align: center;
}

.ne-podium-slot__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--ne-border);
}

.ne-podium-slot--1 .ne-podium-slot__avatar {
	width: 48px;
	height: 48px;
	border-color: var(--ne-yellow);
}

.ne-podium-slot__pos {
	font-size: 0.875rem;
}

.ne-podium-slot__name {
	font-family: var(--ne-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--ne-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.ne-podium-slot__brand {
	font-family: var(--ne-font-mono);
	font-size: 0.625rem;
	color: var(--ne-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ============================================================
   COUNTDOWN TIMER
   ============================================================ */
.ne-widget--countdown {
	flex-direction: column;
	align-items: center;
	padding: var(--ne-space-5) var(--ne-space-4);
	grid-column: 1 / -1;
}

.ne-countdown {
	display: flex;
	gap: var(--ne-space-5);
	justify-content: center;
}

.ne-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 56px;
}

.ne-countdown__value {
	font-family: var(--ne-font-mono);
	font-size: 2rem;
	font-weight: 600;
	color: var(--ne-text);
	line-height: 1;
}

.ne-countdown__label {
	font-family: var(--ne-font-mono);
	font-size: 0.625rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--ne-text-subtle);
}

.ne-countdown__track {
	margin-top: var(--ne-space-3);
	font-family: var(--ne-font-mono);
	font-size: 0.813rem;
	color: var(--ne-text-muted);
}

/* ============================================================
   STREAK DOTS
   ============================================================ */
.ne-widget--streak {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ne-space-2);
}

.ne-streak {
	display: flex;
	gap: var(--ne-space-2);
}

.ne-streak__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ne-elevated);
	border: 1px solid var(--ne-border);
	font-family: var(--ne-font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ne-text-subtle);
}

.ne-streak__dot--gold {
	border-color: var(--ne-yellow);
	color: var(--ne-yellow);
	background: rgba(255, 184, 0, 0.08);
}

.ne-streak__dot--silver {
	border-color: #C0C0C0;
	color: #C0C0C0;
	background: rgba(192, 192, 192, 0.06);
}

.ne-streak__dot--bronze {
	border-color: #CD7F32;
	color: #CD7F32;
	background: rgba(205, 127, 50, 0.06);
}

/* ============================================================
   LIGHT THEME OVERRIDES
   ============================================================ */
body:not(.dark-theme) .ne-widget {
	box-shadow:
		2px 2px 6px rgba(0, 0, 0, 0.08),
		-1px -1px 4px rgba(255, 255, 255, 0.7),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body:not(.dark-theme) .ne-widget:hover {
	box-shadow:
		3px 4px 10px rgba(0, 0, 0, 0.12),
		-1px -1px 6px rgba(255, 255, 255, 0.6),
		inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body:not(.dark-theme) .ne-streak__dot {
	background: rgba(0, 0, 0, 0.03);
}

body:not(.dark-theme) .ne-widget__progress-bar {
	background: rgba(0, 0, 0, 0.06);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
	.ne-widget-row--race {
		grid-template-columns: 1fr 1fr;
	}

	.ne-widget--podium {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	.ne-widget-row--3 {
		grid-template-columns: 1fr;
	}

	.ne-widget-row--race {
		grid-template-columns: 1fr;
	}

	.ne-widget--podium {
		grid-column: auto;
	}

	.ne-podium-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.ne-widget-row--profile {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ne-space-3);
		padding: var(--ne-space-4) 0;
	}

	.ne-widget-row--compact {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ne-space-3);
	}

	.ne-widget--streak {
		grid-column: 1 / -1;
	}

	.ne-countdown {
		gap: var(--ne-space-4);
	}

	.ne-countdown__value {
		font-size: 1.5rem;
	}

	.ne-countdown__unit {
		min-width: 44px;
	}

	.ne-widget--countdown {
		grid-column: auto;
	}
}