/** @format */

/**
 * =============================================================================
 *  @fileOverview  Admin Users Page Styles
 *  @author        James A Wilson
 *  @version       1.0.0
 *  @date          2026-03-20
 */

/**
 * =============================================================================
 *  Global Variables
 */
@use "../common/Common-variables-sass.scss" as sassVariables;

:root {
	--form-margin: 30%;
}

/**
 * =============================================================================
 *  Local Styles
 */
#main_Wrapper {
	grid-template-columns: repeat(12, [col] 1fr);
	column-gap: 1rem;
	row-gap: 0;
	margin: 0 var(--form-margin);
	grid-template-areas:
		"main-form"
		"main-table";

	& #main_Form {
		grid-area: main-form;
		grid-column: col 1 / span 12;
		grid-row: 2;
		margin-bottom: 1rem;

		grid-template-areas:
			"grid-lastname"
			"grid-firstname"
			"grid-username"
			"grid-password"
			"grid-accesslevel"
			"grid-email";

		& #grid_Lastname {
			grid-area: grid-lastname;
			grid-column: col / span 3;
			grid-row: 1;
		}
		& #grid_Firstname {
			grid-area: grid-firstname;
			grid-column: col 4 / span 3;
			grid-row: 1;
		}
		& #grid_Username {
			grid-area: grid-username;
			grid-column: col 7 / span 3;
			grid-row: 1;
		}
		& #grid_Password {
			grid-area: grid-password;
			grid-column: col 10 / span 3;
			grid-row: 1;
		}
		& #grid_AccessLevel {
			grid-area: grid-accesslevel;
			grid-column: col / span 3;
			grid-row: 2;
		}
		& #grid_Email {
			grid-area: grid-email;
			grid-column: col 4 / span 9;
			grid-row: 2;
		}
	}

	& #main_Table {
		grid-area: main-table;
		grid-column: col 1 / span 12;
		grid-row: 3;
	}
}

/**
 * =============================================================================
 *  Media Breakpoints
 */
@media only screen and (max-width: #{sassVariables.$screen-bp-xl}) {
	#main_Wrapper {
		margin: 0 calc(var(--form-margin) * 0.9);
	}
}
@media only screen and (max-width: #{sassVariables.$screen-bp-lg}) {
	#main_Wrapper {
		margin: 0 calc(var(--form-margin) * 0.8);
	}
}
@media only screen and (max-width: #{sassVariables.$screen-bp-md}) {
	#main_Wrapper {
		margin: 0 calc(var(--form-margin) * 0.7);
	}
}
@media only screen and (max-width: #{sassVariables.$screen-bp-sm}) {
	nav,
	#main_Wrapper {
		display: none;
	}
	#small_Message {
		display: block;
		margin-top: 2rem;
	}
}