/**
 * Noxora Design System — unified components.
 */

/* Glass surface */
.nx-glass,
.nx-ds-card {
	background: var(--nx-glass-bg);
	backdrop-filter: blur(var(--nx-glass-blur));
	-webkit-backdrop-filter: blur(var(--nx-glass-blur));
	border: 1px solid var(--nx-glass-border);
	box-shadow: var(--nx-shadow-inset), var(--nx-shadow-md);
}

.nx-ds-card {
	border-radius: var(--nx-radius-lg);
	padding: var(--nx-space-5);
	transition: border-color var(--nx-duration-normal) var(--nx-ease-out),
		transform var(--nx-duration-normal) var(--nx-ease-out),
		box-shadow var(--nx-duration-normal) var(--nx-ease-out);
}

.nx-ds-card:hover {
	border-color: var(--nx-border-strong);
}

.nx-ds-card--interactive:hover {
	transform: translateY(-2px);
	box-shadow: var(--nx-shadow-inset), var(--nx-shadow-lg);
}

/* Stat card */
.nx-stat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--nx-space-1);
	min-height: var(--nx-card-height-sm);
	padding: var(--nx-space-3) var(--nx-space-2);
	border-radius: var(--nx-radius-md);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--nx-border);
	text-align: center;
	transition: background var(--nx-duration-fast) var(--nx-ease-out);
}

.nx-stat-card:hover {
	background: rgba(255, 255, 255, 0.06);
}

.nx-stat-card__value {
	font-size: var(--nx-text-lg);
	font-weight: var(--nx-weight-bold);
	letter-spacing: var(--nx-tracking-tight);
	line-height: var(--nx-leading-tight);
	color: var(--nx-text);
}

.nx-stat-card__label {
	font-size: var(--nx-text-xs);
	font-weight: var(--nx-weight-medium);
	color: var(--nx-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--nx-tracking-wide);
}

/* Buttons */
.nx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nx-space-2);
	min-height: 40px;
	padding: 0 var(--nx-space-5);
	font-family: var(--nx-font-sans);
	font-size: var(--nx-text-sm);
	font-weight: var(--nx-weight-semibold);
	border-radius: var(--nx-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: all var(--nx-duration-normal) var(--nx-ease-out);
}

.nx-btn--primary {
	background: linear-gradient(135deg, var(--nx-accent), #b00500);
	color: #fff;
	box-shadow: var(--nx-shadow-sm);
}

.nx-btn--primary:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.nx-btn--ghost {
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--nx-border);
	color: var(--nx-text);
}

.nx-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--nx-border-strong);
}

/* Skeleton */
.nx-skeleton {
	background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
	background-size: 200% 100%;
	animation: nx-skeleton-shimmer 1.4s ease-in-out infinite;
	border-radius: var(--nx-radius-sm);
}

@keyframes nx-skeleton-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Empty state */
.nx-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--nx-space-4);
	padding: var(--nx-space-10) var(--nx-space-6);
	color: var(--nx-text-secondary);
}

.nx-empty-state__icon {
	font-size: 2.5rem;
	opacity: 0.5;
}

/* Tab pill */
.nx-tab-pill {
	display: inline-flex;
	align-items: center;
	padding: var(--nx-space-2) var(--nx-space-4);
	font-size: var(--nx-text-sm);
	font-weight: var(--nx-weight-medium);
	color: var(--nx-text-secondary);
	border-radius: var(--nx-radius-full);
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
	transition: all var(--nx-duration-fast) var(--nx-ease-out);
}

.nx-tab-pill:hover {
	color: var(--nx-text);
	background: rgba(255, 255, 255, 0.05);
}

.nx-tab-pill.is-active {
	color: var(--nx-text);
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--nx-border-strong);
}