/**
 * EnvCheck Login Styles
 * Styles for the login page
 */

/*******************************
 * TABLE OF CONTENTS
 * 1. Imports
 * 2. Base Structure
 * 3. Login Page
 *    3.1 Container
 *    3.2 Form Elements
 *    3.3 Login Disabled
 * 4. Registration Success
 *    4.1 Header Elements
 *    4.2 Credential Fields
 *    4.3 Copy Fields
 *    4.4 Admin Access
 *******************************/

/* 1. Imports */
@import 'variables.css';

/* 2. Base Structure */
html, body.login, body.register {
	background-color: var(--color-bg-light);
	height: 100%;
	margin: 0;
	padding: 0;
}

body.login, body.register {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;

	h1 {
		color: var(--color-primary);
		font-size: 1.5rem;
		margin-top: 0;
		margin-bottom: var(--spacing-lg);
		text-align: center;
	}
}

/* 3. Login Page */
/* 3.1 Container */
#login {
	width: 100%;
	max-width: 400px;
	background-color: var(--color-bg-white);
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-md);
	padding: var(--spacing-lg);
	margin: var(--spacing-md);
}

/* 3.2 Form Elements */
form.login {
	margin: 0 auto;

	/* Structure elements */
	& fieldset {
		padding: var(--spacing-sm);
		border: 1px solid var(--color-border-light);
		border-radius: var(--border-radius-sm);
	}

	& table {
		width: 100%;
		border-spacing: var(--spacing-sm);
	}

	& td {
		padding: var(--spacing-xs);
		text-align: left;
	}

	& label {
		color: var(--color-text);
		font-weight: bold;
	}

	/* Input elements */
	& select, & input[type="password"], & input[type="text"] {
		width: 100%;
		padding: var(--spacing-sm);
		border: 1px solid var(--color-border-light);
		border-radius: var(--border-radius-sm);
		transition: var(--transition-fast);
		box-sizing: border-box; /* Include padding and border in element's total width */
		height: 28px; /* Match height for both elements */

		&:focus {
			outline: none;
			border-color: var(--color-primary);
			box-shadow: 0 0 0 2px var(--color-primary-light);
		}
	}

	/* Select dropdown styling */
	& select {
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right var(--spacing-sm) center;
		background-size: 12px;
		padding-right: calc(var(--spacing-sm) * 3);
	}

	/* Button styling */
	& button {
		margin-top: var(--spacing-sm);
		padding: var(--spacing-sm) var(--spacing-md);
		background-color: var(--color-primary);
		color: white;
		border: none;
		border-radius: var(--border-radius-sm);
		font-weight: bold;
		cursor: pointer;
		transition: var(--transition-fast);
		width: 100%;

		&:hover {
			background-color: var(--color-button-hover-bg);
		}
	}
}

/* 3.3 Login Disabled */
#loginDisabled {
	padding: var(--spacing-md);
	background-color: var(--color-error-light);
	color: var(--color-error-dark);
	border-radius: var(--border-radius-md);
	text-align: center;
	font-weight: bold;
	margin-top: var(--spacing-md);
}

/* 4. Registration Success */
.registration-success {
	text-align: left;
	
	/* 4.1 Header Elements */
	& h2 {
		color: var(--color-success);
		margin-bottom: var(--spacing-md);
		font-size: 1.2rem;
		text-align: center;
	}
	
	& p {
		margin-bottom: var(--spacing-lg);
		color: var(--color-text);
		line-height: 1.5;
	}
	
	/* 4.2 Credential Fields */
	& .credential-field {
		margin-bottom: var(--spacing-md);
		border: 1px solid var(--color-border-light);
		border-radius: var(--border-radius-md);
		padding: var(--spacing-md);
		background-color: white;
		
		& label {
			display: block;
			font-weight: bold;
			color: var(--color-text);
			margin-bottom: var(--spacing-sm);
		}
		
		&.user-link {
			background-color: var(--color-primary-light);
			border-color: var(--color-primary);
		}
	}
	
	/* 4.3 Copy Fields */
	& .copy-field {
		display: flex;
		align-items: center;
		gap: var(--spacing-sm);
		
		& input {
			flex: 1;
			padding: var(--spacing-sm);
			border: 1px solid var(--color-border-light);
			border-radius: var(--border-radius-sm);
			font-family: monospace;
			background-color: var(--color-bg-light);
		}
		
		& button {
			padding: var(--spacing-sm) var(--spacing-md);
			background-color: var(--color-primary);
			color: white;
			border: none;
			border-radius: var(--border-radius-sm);
			cursor: pointer;
			transition: var(--transition-fast);
			
			&:hover {
				background-color: var(--color-button-hover-bg);
			}
			
			&.copied {
				background-color: var(--color-success);
			}
		}
	}
	
	/* 4.4 Admin Access */
	& .admin-access {
		margin-top: var(--spacing-lg);
		text-align: center;
		
		& p {
			font-size: 0.9rem;
			margin-bottom: var(--spacing-sm);
			color: var(--color-text-muted);
		}
		
		& .admin-button {
			display: inline-block;
			padding: var(--spacing-md) var(--spacing-lg);
			background-color: var(--color-primary);
			color: white;
			font-weight: bold;
			text-decoration: none;
			border-radius: var(--border-radius-md);
			box-shadow: var(--shadow-md);
			transition: var(--transition-fast);
			
			&:hover {
				background-color: var(--color-button-hover-bg);
				transform: translateY(-2px);
				box-shadow: var(--shadow-lg);
			}
		}
	}
}