/* AIdle Custom Theme - Cyberpunk/Tech Aesthetic */

:root {
	 --aidle-font-primary: 'Rajdhani', sans-serif; 
	 --aidle-font-numbers: 'Rajdhani', monospace; 

	/* Primary colors */
	--aidle-primary: #00E676;
	--aidle-primary-dark: #00C853;
	--aidle-primary-darker: #00A43C;

	/* Accent colors */
	--aidle-accent: #2196F3;
	--aidle-accent-light: #64B5F6;
	--aidle-warning: #FF9800;
	--aidle-danger: #F44336;

	/* Resource colors */
	--resource-energy: #FFD700;
	--resource-data: #4FC3F7;
	--resource-processing: #9575CD;
	--resource-keys: #FF8A65;
	--resource-quantum: #00E676;

	/* Background colors */
	--aidle-bg-darker: #0A0E27;
	--aidle-bg-dark: #131829;
	--aidle-bg-medium: #1A1F3A;
	--aidle-bg-light: #252B46;

	/* Text colors */
	--aidle-text-primary: #E8EAF6;
	--aidle-text-secondary: #9FA8DA;
	--aidle-text-muted: #5C6BC0;

	/* Effects */
	--aidle-glow: 0 0 20px rgba(0, 230, 118, 0.4);
	--aidle-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Dark theme overrides for Radzen */
body {
	background: var(--aidle-bg-darker);
	color: var(--aidle-text-primary);
	font-family: var(--aidle-font-primary);
}

/* Apply font to Radzen components that have their own defaults */
.rz-button,
.rz-text,
.rz-text-h6,
.rz-text-h5,
.rz-text-h4,
.rz-text-h3,
.rz-text-h2,
.rz-text-h1,
.rz-text-body2,
.rz-text-display-h3,
.rz-text-subtitle1,
.rz-text-subtitle2,
.resource-node-name,
.cost-amount,
.rz-text-caption,
.rz-tabview-nav-link,
.rz-dropdown,
.rz-textbox,
.rz-dialog-content,
.rz-card,
.rz-badge,
.rz-alert,
.rz-notification {
	font-family: var(--aidle-font-primary);
}


/* Apply number font to numeric elements */
.number-display,
.number-badge,
.number-value,
input[type="number"],
.rz-numeric,
.progress-text {
	font-family: var(--aidle-font-numbers) !important;
}

.rz-card {
	background: var(--aidle-bg-dark);
	border: 1px solid var(--aidle-bg-light);
	border-radius: 4px;
	box-shadow: var(--aidle-shadow);
}

/* Number Input Control */
.number-input-control {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}

.number-display {
	width: 100%;
}

.number-display input {
	font-family: var(--aidle-font-numbers) !important;
	font-size: 16px;
	font-weight: bold;
	background: var(--aidle-bg-medium);
	border: 1px solid var(--aidle-primary-dark);
	color: var(--aidle-primary);
}

.increment-buttons {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}

.increment-row {
	display: flex;
	gap: 4px;
	justify-content: center;
	flex-wrap: wrap;
}

.increment-btn {
	min-width: 60px;
	font-size: 11px;
	font-weight: bold;
	transition: all 0.2s ease;
}

.increment-btn:hover:not(:disabled) {
	transform: scale(1.05);
	box-shadow: var(--aidle-glow);
}

.max-button-row {
	width: 100%;
	display: flex;
	justify-content: center;
}

.max-btn {
	min-width: 120px;
	font-weight: bold;
}

.rz-card:hover {
	border-color: var(--aidle-primary);
	box-shadow: var(--aidle-glow);
	transition: all 0.3s ease;
}

/* Touch mode dialog styling - only applied to dialogs with touch-dialog-borderless class */
.touch-dialog-borderless {
	padding: 0;
}

/* Disable hover effects and transitions on cards in touch mode */
.touch-dialog-borderless .rz-card {
	transition: none !important;
}

.touch-dialog-borderless .rz-card:hover {
	transition: none !important;
	border-color: var(--rz-base-600) !important;
	box-shadow: none !important;
}

/* Header styling */
.rz-header {
	background: linear-gradient(135deg, var(--aidle-bg-dark) 0%, var(--aidle-bg-medium) 100%);
	border-bottom: 2px solid var(--aidle-primary);
	box-shadow: 0 2px 10px rgba(0, 230, 118, 0.2);
}

/* Footer styling */
.rz-footer {
	background: var(--aidle-bg-dark);
	border-top: 1px solid var(--aidle-bg-light);
}

/* Button enhancements - Sharp, blocky, hex-like */
.rz-button {
	border-radius: 0 !important;
	border: 2px solid transparent !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
	transition: all 0.2s ease !important;
	position: relative;
	overflow: visible !important;
}

.rz-button::before {
	content: '';
	position: absolute;
	inset: -2px;
	background: inherit;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
	z-index: -1;
	opacity: 0;
	filter: blur(8px);
	transition: opacity 0.2s ease;
}

.rz-button:hover::before {
	opacity: 0.6;
}

.rz-button-success {
	background: var(--aidle-primary) !important;
	border-color: var(--aidle-primary) !important;
	color: var(--aidle-bg-darker) !important;
	box-shadow: 0 0 12px rgba(0, 230, 118, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.rz-button-success:hover:not(:disabled) {
	background: var(--aidle-primary-dark) !important;
	border-color: var(--aidle-primary) !important;
	box-shadow: 0 0 20px rgba(0, 230, 118, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	transform: translateY(-1px) !important;
}

.rz-button-primary {
	background: var(--aidle-accent) !important;
	border-color: var(--aidle-accent) !important;
	color: #ffffff !important;
	box-shadow: 0 0 12px rgba(33, 150, 243, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.rz-button-primary:hover:not(:disabled) {
	background: #1976D2 !important;
	border-color: var(--aidle-accent) !important;
	box-shadow: 0 0 20px rgba(33, 150, 243, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	transform: translateY(-1px) !important;
}

.rz-button-warning {
	background: var(--aidle-warning) !important;
	border-color: var(--aidle-warning) !important;
	color: var(--aidle-bg-darker) !important;
	box-shadow: 0 0 12px rgba(255, 152, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.rz-button-warning:hover:not(:disabled) {
	background: #F57C00 !important;
	border-color: var(--aidle-warning) !important;
	box-shadow: 0 0 20px rgba(255, 152, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	transform: translateY(-1px) !important;
}

.rz-button-danger {
	background: var(--aidle-danger) !important;
	border-color: var(--aidle-danger) !important;
	color: #ffffff !important;
	box-shadow: 0 0 12px rgba(244, 67, 54, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.rz-button-danger:hover:not(:disabled) {
	background: #D32F2F !important;
	border-color: var(--aidle-danger) !important;
	box-shadow: 0 0 20px rgba(244, 67, 54, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	transform: translateY(-1px) !important;
}

.rz-button-light {
	background: var(--aidle-bg-light) !important;
	border-color: var(--aidle-text-muted) !important;
	color: var(--aidle-text-primary) !important;
	box-shadow: 0 0 8px rgba(92, 107, 192, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.rz-button-light:hover:not(:disabled) {
	background: var(--aidle-bg-medium) !important;
	border-color: var(--aidle-text-secondary) !important;
	box-shadow: 0 0 15px rgba(159, 168, 218, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
	transform: translateY(-1px) !important;
}

.rz-button:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
}

.rz-button:active:not(:disabled) {
	transform: translateY(1px) !important;
	box-shadow: 0 0 8px currentColor, inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Progress bar styling */
.rz-progressbar {
	background: var(--aidle-bg-medium);
	border-radius: 4px;
	overflow: hidden;
}

.rz-progressbar-value {
	background: linear-gradient(90deg, var(--aidle-primary-dark) 0%, var(--aidle-primary) 100%);
	box-shadow: 0 0 10px rgba(0, 230, 118, 0.5);
	animation: progressPulse 2s infinite;
}

@@keyframes progressPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.8; }
}

/* Badge styling */
.rz-badge {
	border-radius: 4px;
	padding: 0.25rem 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.5px;
}

.rz-badge-success {
	background: var(--aidle-primary);
	color: var(--aidle-bg-darker);
	box-shadow: 0 0 8px rgba(0, 230, 118, 0.4);
}

.rz-badge-info {
	background: var(--aidle-accent);
	box-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
}

/* Alert styling */
.rz-alert {
	border-radius: 4px;
	border-left: 4px solid;
}

.rz-alert-info {
	background: rgba(33, 150, 243, 0.1);
	border-left-color: var(--aidle-accent);
}

.rz-alert-warning {
	background: rgba(255, 152, 0, 0.1);
	border-left-color: var(--aidle-warning);
}

.rz-alert-danger {
	background: rgba(244, 67, 54, 0.1);
	border-left-color: var(--aidle-danger);
}

/* Dialog styling */
.rz-dialog {
	background: var(--aidle-bg-dark);
	border: 2px solid var(--aidle-primary);
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 230, 118, 0.3);
}

.rz-dialog-title {
	color: var(--aidle-primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Notification styling */
.rz-notification {
	border-radius: 4px;
	box-shadow: var(--aidle-shadow);
	backdrop-filter: blur(10px);
}

.rz-notification-success {
	background: linear-gradient(135deg, rgba(0, 230, 118, 0.9) 0%, rgba(0, 200, 83, 0.9) 100%);
	border-left: 4px solid var(--aidle-primary);
}

.rz-notification-error {
	background: linear-gradient(135deg, rgba(244, 67, 54, 0.9) 0%, rgba(211, 47, 47, 0.9) 100%);
	border-left: 4px solid var(--aidle-danger);
}

.rz-notification-info {
	background: linear-gradient(135deg, rgba(33, 150, 243, 0.9) 0%, rgba(25, 118, 210, 0.9) 100%);
	border-left: 4px solid var(--aidle-accent);
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--aidle-bg-dark);
}

::-webkit-scrollbar-thumb {
	background: var(--aidle-bg-light);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--aidle-primary);
}

/* Glow text effect */
.glow-text {
	text-shadow: 0 0 10px currentColor;
}

/* Pulsing animation for active elements */
@@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(1.1); }
}

.pulse {
	animation: pulse 2s infinite;
}

/* Shimmer effect for loading states */
@@keyframes shimmer {
	0% { background-position: -1000px 0; }
	100% { background-position: 1000px 0; }
}

.shimmer {
	background: linear-gradient(90deg,
		var(--aidle-bg-dark) 0%,
		var(--aidle-bg-light) 50%,
		var(--aidle-bg-dark) 100%);
	background-size: 1000px 100%;
	animation: shimmer 2s infinite;
}

/* Resource indicator glow */
.resource-glow {
	position: relative;
}

.resource-glow::before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	background: linear-gradient(45deg, transparent, currentColor, transparent);
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: -1;
	filter: blur(8px);
}

.resource-glow:hover::before {
	opacity: 0.6;
}

/* Hex grid enhancements */
.hex-grid-container {
	background-image:
		radial-gradient(circle at center, var(--aidle-primary) 1px, transparent 1px),
		radial-gradient(circle at center, var(--aidle-accent) 1px, transparent 1px);
	background-size: 50px 50px, 100px 100px;
	background-position: 0 0, 25px 25px;
	animation: gridFlow 20s linear infinite;
}

@@keyframes gridFlow {
	0% { background-position: 0 0, 25px 25px; }
	100% { background-position: 50px 50px, 75px 75px; }
}

/* Loading spinner override */
.rz-spinner {
	border-color: var(--aidle-bg-light);
	border-top-color: var(--aidle-primary);
}

/* Form input styling */
.rz-textbox, .rz-textarea {
	background: var(--aidle-bg-medium);
	border: 1px solid var(--aidle-bg-light);
	color: var(--aidle-text-primary);
	transition: all 0.3s ease;
}

.rz-textbox:focus, .rz-textarea:focus {
	border-color: var(--aidle-primary);
	box-shadow: 0 0 8px rgba(0, 230, 118, 0.3);
}

/* Utility classes */
.text-primary { color: var(--aidle-primary) !important; }
.text-accent { color: var(--aidle-accent) !important; }
.text-muted { color: var(--aidle-text-muted) !important; }
.bg-dark { background: var(--aidle-bg-dark) !important; }
.bg-darker { background: var(--aidle-bg-darker) !important; }
.shadow-glow { box-shadow: var(--aidle-glow) !important; }

/* Responsive utilities */
@@media (max-width: 768px) {
	.rz-header {
		padding: 0.5rem !important;
	}

	.rz-footer {
		font-size: 0.75rem;
	}

	.hex-grid-container svg {
		min-height: 400px;
	}
}

/* Tiered Numeric Input Component */
.tiered-numeric-input {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	width: 100%;
}

.tiered-numeric-value {
	flex: 1;
	min-width: 100px;
	padding: 0.5rem;
	background: var(--aidle-bg-medium);
	border: 1px solid var(--aidle-bg-light);
	color: var(--aidle-text-primary);
	border-radius: 4px;
	font-size: 1rem;
	text-align: right;
}

.tiered-numeric-value:focus {
	outline: none;
	border-color: var(--aidle-primary);
}

.tiered-numeric-controls {
	display: flex;
	gap: 0.25rem;
}

.tier-buttons {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tier-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 4px 8px;
	background: var(--aidle-bg-light);
	border: 1px solid var(--aidle-bg-lighter, #404760);
	color: var(--aidle-text-primary);
	cursor: pointer;
	transition: all 0.2s ease;
	border-radius: 3px;
	font-size: 0.75rem;
	min-width: 45px;
}

.tier-btn:hover:not(:disabled) {
	background: var(--aidle-bg-lighter, #404760);
	border-color: var(--aidle-primary);
	transform: translateY(-1px);
}

.tier-btn:active:not(:disabled) {
	transform: translateY(0);
}

.tier-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.tier-btn .tier-icon {
	font-size: 0.875rem;
	line-height: 1;
}

.tier-btn .tier-symbol {
	font-size: 1rem;
	font-weight: bold;
	line-height: 1;
}

.tier-buttons.bronze .tier-btn:hover:not(:disabled) {
	border-color: #CD7F32;
}

.tier-buttons.silver .tier-btn:hover:not(:disabled) {
	border-color: #C0C0C0;
}

.tier-buttons.gold .tier-btn:hover:not(:disabled) {
	border-color: #FFD700;
}

/* Logo styling */
.aidle-logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.aidle-logo-icon {
	height: 40px;
	width: auto;
}

.aidle-logo-text {
	font-family: 'Orbitron', sans-serif !important;
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: 2px;
	background: linear-gradient(135deg, #26C6DA 0%, #00ACC1 50%, #00838F 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: none;
	filter: drop-shadow(0 0 8px rgba(38, 198, 218, 0.5));
}