@use "common";  // Reset styles
@use "colors" as *; // Color scheme for Add New User page

// Basic styling for the body
body {
	font-family: 'Arial', sans-serif;
	background: $add-user-background-color; // Use background gradient for the page
	display: flex;
	justify-content: center; // Center the form horizontally
	align-items: center; // Center the form vertically
	height: 100%;
	padding: 20px; // Add some padding for mobile responsiveness

	// Container for the form
	.form-container {
		background-color: $add-user-form-background; // Form background color
		padding: 40px;
		border-radius: 12px; // Rounded corners for the form
		box-shadow: 0 8px 15px $add-user-form-shadow-color;
		width: 100%;
		max-width: 800px; // Increase the maximum width for a wider form
		text-align: left; // Left-align text
		margin: auto;

		// Form header
		h2 {
			color: $add-user-form-title-color; // Form title color
			font-size: 28px;
			margin-bottom: 20px;
			text-align: left; 
			display: block;
		}

		// Form element
		form {
			display: flex;
			flex-wrap: wrap; // Allow wrapping for form groups
			gap: 20px; // Add consistent gap between elements
			margin-bottom: 20px; // Add space below the form for submit button

			// Form groups for each input
			.form-group {
				flex: 1 1 calc(50% - 20px); // Take up half the row, accounting for gap
				min-width: 250px; // Minimum width to prevent shrinking too much

				// Label styling
				label {
					display: block;
					color: $add-user-form-title-color;
					font-size: 16px;
					margin-bottom: 5px;
				}

				// Input and select styling
				input[type="text"],
				input[type="password"],
				input[type="email"],
				input[type="date"],
				input[type="number"],
				input[type="datetime-local"], 
				input[type="tel"],
				select {
					width: 100%; // Full width of the form group
					padding: 12px;
					border: 1px solid $add-user-input-border-color; // Input field border color
					border-radius: 6px;
					background-color: $add-user-input-background; // Input background color
					font-size: 16px;
					transition: border-color 0.3s, background-color 0.3s;

					&:focus {
						border-color: $add-user-input-focus-border-color; // Focus border color
						outline: none;
					}
				}
			}

			.admin-access {
				label {
					display: block;
					color: $add-user-form-title-color;
					font-size: 16px;
					margin-bottom: 5px;
				}

				.checkbox-group {
					display: flex;
					gap: 10px;

					// Hide the checkboxes
					input[type="checkbox"] {
						display: none;
					}

					// Style the label as a button to match input fields
					label.checkbox {
						cursor: pointer;
						padding: 12px; // Match the padding with the input fields
						border: 1px solid $user-form-checkbox-button-border-color; // Use the same border style
						border-radius: 6px; // Match the border radius with other inputs
						background-color: $add-user-input-background; // Use the same background color
						font-size: 16px; // Font size consistency
						text-align: center;
						width: 100%; // Make the label full-width
						transition: background-color 0.3s, color 0.3s, border-color 0.3s;
						user-select: none;

						// Change background when active or focused
						&:hover,
						&:focus {
							background-color: $user-form-checkbox-button-hover-color;
							border-color: $user-form-checkbox-button-hover-border-color; // Use focus border color
						}
					}

					// Change styles when the checkbox is checked
					input[type="checkbox"]:checked + label.checkbox {
						background-color: $user-form-checkbox-button-active-color;
						color: $user-form-checkbox-button-active-text-color;
						border-color: $user-form-checkbox-button-active-border-color;
					}
				}
			}

			// Dropdown Menu for Admin Role
			.role-dropdown {
				flex: 1 1 calc(50% - 20px); // Explicitly set to half width, considering gap
				min-width: 250px; // Minimum width to avoid shrinking too much
				padding: 0; // Reset any padding
			}

			.radio-group {
				display: flex;
				gap: 10px;

				// Hide the radio buttons
				input[type="radio"] {
					display: none;
				}

				// Style the label as a button to match the checkboxes
				label.radio {
					cursor: pointer;
					padding: 12px; // Match the padding with the other styled elements
					border: 1px solid $add-user-input-border-color;
					border-radius: 6px;
					background-color: $add-user-input-background;
					font-size: 16px;
					text-align: center;
					width: 100%; // Make the label full-width
					transition: background-color 0.3s, color 0.3s, border-color 0.3s;
					user-select: none;

					// Change background when active or focused
					&:hover,
					&:focus {
						background-color: $user-form-radio-button-hover-color;
						border-color: $user-form-radio-button-hover-border-color;
					}
				}

				// Change styles when the radio button is checked
				input[type="radio"]:checked + label.radio {
					background-color: $user-form-radio-button-active-color;
					color: $user-form-radio-button-active-text-color;
					border-color: $user-form-radio-button-active-border-color;
				}
			}

			// Style the range input to match the other form inputs
			input[type="range"] {
				--value: 0;
				width: 100%; 
				height: 45px; 
				-webkit-appearance: none; 
				appearance: none;
				border-radius: 6px; 
				background-color: $add-user-input-background; 
				border: 1px solid $add-user-input-border-color; 
				cursor: pointer; 
				padding: 0; 
				box-sizing: border-box; 

				// Style the filled portion of the track
				&::-webkit-slider-runnable-track {
					width: 100%;
					height: 100%;
					border-radius: 6px; 
					background: linear-gradient(to right, $add-user-button-color 0%, $add-user-button-color var(--value), $add-user-input-background var(--value));
				}

				&::-moz-range-track {
					width: 100%;
					height: 100%;
					border-radius: 6px;
					background: linear-gradient(to right, $add-user-button-color 0%, $add-user-button-color var(--value), $add-user-input-background var(--value));
				}

				// Slider thumb
				&::-webkit-slider-thumb {
					-webkit-appearance: none; 
					appearance: none;
					width: 0; // Smaller thumb size
					height: 45px;
					border-radius: 6px; 
					background-color: $add-user-button-color; 
					//border: 2px solid $add-user-input-border-color; 
					cursor: pointer;
					margin: 0;
					padding: 0;
				}

				&::-moz-range-thumb {
					width: 0; // Smaller thumb size
					height: 45px;
					border: none;
					border-radius: 6px;
					background-color: $add-user-button-color;
					cursor: pointer;
					margin: 0;
					padding: 0;
				}

				&:focus {
					outline: none; 
					border-color: $add-user-input-focus-border-color; 
				}
			}

			// Submit button styling
			.submit-button {
				flex: 1 1 100%; // Full width for the submit button
				display: flex; // Use flex to align the buttons
				justify-content: space-between; // Space between buttons
				margin-top: 20px; // Space above the buttons

				button {
					width: 48%; // Set both buttons to take up nearly half of the width
					text-align: center;
					padding: 12px; // Padding for button
					border-radius: 6px;

					// Add styles for the clear button
					&.clear-button {
						background-color: $add-user-clear-button-color; // Define your clear button color in colors.scss
						color: $add-user-clear-button-text-color; // Define clear button text color in colors.scss

						&:hover {
							background-color: $add-user-clear-button-hover-color; // Hover effect color
						}

						&:active {
							transform: translateY(2px); // Subtle press effect
						}
					}

					// Existing styles for submit button
					&:not(.clear-button) {
						background-color: $add-user-button-color; // Primary button color
						color: $add-user-button-text-color;
						border: none;

						&:hover {
							background-color: $add-user-button-hover-color; // Button hover color
						}

						&:active {
							transform: translateY(2px); // Subtle press effect
						}
					}
				}
			}
		}
	}
}