/* Matrix Theme - Black Background with Neon Green */
* {
	box-sizing: border-box;
}

.h-full,
body,
html {
	background-color: #000000 !important;
	color: #00FF41 !important;
	/* Matrix neon green */
	font-family: 'Courier New', 'Consolas', 'Monaco', monospace !important;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
}

.app-page {
	background-color: #000000 !important;
}

/* Matrix rain effect background */
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(transparent 50%, rgba(0, 255, 65, 0.03) 50%);
	background-size: 100% 4px;
	pointer-events: none;
	z-index: 1;
}

/* Main container */
.container,
.auth-container,
[class*='container'] {
	background-color: rgba(0, 0, 0, 0.95) !important;
	border: 2px solid #00FF41 !important;
	border-radius: 8px !important;
	box-shadow: 0 0 20px rgba(0, 255, 65, 0.5),
		0 0 40px rgba(0, 255, 65, 0.3),
		inset 0 0 20px rgba(0, 255, 65, 0.1) !important;
	padding: 2rem !important;
	position: relative;
	z-index: 2;
}

/* Headings with emoji */
h1,
h2,
h3,
[class*='title'],
[class*='heading'] {
	color: #00FF41 !important;
	text-shadow: 0 0 10px rgba(0, 255, 65, 0.8),
		0 0 20px rgba(0, 255, 65, 0.6),
		0 0 30px rgba(0, 255, 65, 0.4) !important;
	font-weight: bold !important;
	letter-spacing: 2px !important;
}

/* Input fields */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='username'],
.app-btn-pri {
	background-color: rgba(0, 0, 0, 0.8) !important;
	border: 1px solid #00FF41 !important;
	color: #00FF41 !important;
	padding: 12px 12px 12px 45px !important;
	font-family: 'Courier New', monospace !important;
	font-size: 14px !important;
	border-radius: 4px !important;
	box-shadow: 0 0 10px rgba(0, 255, 65, 0.3) !important;
}

.app-inp-txt {
	font-size: 14px !important;
}

/* Input fields with icons - ensure icon doesn't overlap text */
input[type='text']:has(+ i),
input[type='email']:has(+ i),
input[type='password']:has(+ i),
input[type='username']:has(+ i),
[class*='input']:has(i),
[class*='field']:has(i) input {
	padding-left: 45px !important;
}

/* Input containers with icons */
[class*='input-group'] input,
[class*='input-wrapper'] input,
[class*='field'] input {
	padding-left: 45px !important;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='username']:focus {
	outline: none !important;
	border-color: #00FF41 !important;
	box-shadow: 0 0 20px rgba(0, 255, 65, 0.6),
		inset 0 0 10px rgba(0, 255, 65, 0.2) !important;
}

input::placeholder {
	color: rgba(0, 255, 65, 0.5) !important;
}

/* Buttons */
button,
[type='submit'],
.btn,
[class*='button'] {
	background-color: rgba(0, 255, 65, 0.1) !important;
	border: 2px solid #00FF41 !important;
	color: #00FF41 !important;
	padding: 12px 24px !important;
	font-family: 'Courier New', monospace !important;
	font-weight: bold !important;
	cursor: pointer !important;
	border-radius: 4px !important;
	text-transform: uppercase !important;
	letter-spacing: 2px !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 0 15px rgba(0, 255, 65, 0.4) !important;
	position: relative;
	overflow: hidden;
}

button:hover,
[type='submit']:hover,
.btn:hover,
[class*='button']:hover {
	background-color: rgba(0, 255, 65, 0.2) !important;
	box-shadow: 0 0 25px rgba(0, 255, 65, 0.8),
		0 0 50px rgba(0, 255, 65, 0.4) !important;
	transform: translateY(-2px) !important;
}

button:active,
[type='submit']:active {
	transform: translateY(0) !important;
}

/* Labels */
label {
	color: #00FF41 !important;
	font-weight: bold !important;
	display: block !important;
	margin-bottom: 8px !important;
	text-shadow: 0 0 5px rgba(0, 255, 65, 0.6) !important;
}

/* Links */
a {
	color: #00FF41 !important;
	text-decoration: none !important;
	border-bottom: 1px dotted #00FF41 !important;
	transition: all 0.3s ease !important;
}

a:hover {
	color: #00FFCC !important;
	text-shadow: 0 0 10px rgba(0, 255, 65, 0.8) !important;
	border-bottom-color: #00FFCC !important;
}

/* Error messages */
.error,
[class*='error'],
.alert-danger {
	background-color: rgba(255, 0, 0, 0.1) !important;
	border: 1px solid #FF0041 !important;
	color: #FF0041 !important;
	padding: 12px !important;
	border-radius: 4px !important;
	box-shadow: 0 0 15px rgba(255, 0, 65, 0.4) !important;
}

/* Success messages */
.success,
[class*='success'],
.alert-success {
	background-color: rgba(0, 255, 65, 0.1) !important;
	border: 1px solid #00FF41 !important;
	color: #00FF41 !important;
	padding: 12px !important;
	border-radius: 4px !important;
	box-shadow: 0 0 15px rgba(0, 255, 65, 0.4) !important;
}

/* Emoji rain container */
.emoji-rain {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.emoji-rain span {
	position: absolute;
	font-size: 20px;
	opacity: 0.3;
	animation: fall linear infinite;
}

@keyframes fall {
	to {
		transform: translateY(100vh) rotate(360deg);
	}
}

/* Glitch effect for headings */
@keyframes glitch {

	0%,
	100% {
		transform: translate(0);
	}

	20% {
		transform: translate(-2px, 2px);
	}

	40% {
		transform: translate(-2px, -2px);
	}

	60% {
		transform: translate(2px, 2px);
	}

	80% {
		transform: translate(2px, -2px);
	}
}

h1:hover {
	animation: glitch 0.3s infinite;
}

/* Logo styling - Matrix themed */
img[src*="logo"],
[class*="logo"],
.logo,
[class*="brand"],
.brand {
	filter: drop-shadow(0 0 10px rgba(0, 255, 65, 0.8)) drop-shadow(0 0 20px rgba(0, 255, 65, 0.6)) drop-shadow(0 0 30px rgba(0, 255, 65, 0.4)) !important;
	max-width: 100% !important;
	height: auto !important;
	display: block !important;
	margin: 0 auto !important;
	animation: logoGlow 2s ease-in-out infinite alternate !important;
}

/* Logo glow animation */
@keyframes logoGlow {
	0% {
		filter: drop-shadow(0 0 10px rgba(0, 255, 65, 0.8)) drop-shadow(0 0 20px rgba(0, 255, 65, 0.6)) drop-shadow(0 0 30px rgba(0, 255, 65, 0.4));
	}

	100% {
		filter: drop-shadow(0 0 15px rgba(0, 255, 65, 1)) drop-shadow(0 0 30px rgba(0, 255, 65, 0.8)) drop-shadow(0 0 45px rgba(0, 255, 65, 0.6));
	}
}

/* Logo container */
[class*="logo-container"],
.logo-container {
	text-align: center !important;
	padding: 1rem 0 !important;
	margin-bottom: 1rem !important;
}

/* Logo text with white glow for visibility */
.logo-txt {
	font-size: 24px !important;
	text-shadow: 0 0 5px rgba(0, 0, 0, 1),
		0 0 10px rgba(0, 0, 0, 0.8),
		0 0 15px rgba(0, 0, 0, 0.6),
		0 0 20px rgba(0, 0, 0, 0.4) !important;
}