/** @format */

/**
 *  ============================================================================ File Information
 *  File Name: report_log-display.scss
 *  @author:   James A Wilson
 *  @version:  1.0.0
 *  @date:     2026-03-20
 */

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

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

	& #main_Form {
		grid-area: main-form;
		grid-column: col 5 / span 4;
		grid-row: 2;
		margin-bottom: 1rem;
		grid-template-areas: "grid-record";

		& #grid_Record {
			grid-area: grid-record;
			grid-column: col 5 / span 2;
			grid-row: 1;
		}
	}

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

/**
 * =============================================================================
 *  Media Breakpoints
 */
@media screen and (max-width: #{sassVariables.$screen-bp-xl}) {
	#main_Wrapper {
		margin: 0 15%;
	}
}
@media screen and (max-width: #{sassVariables.$screen-bp-lg}) {
	#main_Wrapper {
		margin: 0 10%;
	}
}
@media screen and (max-width: #{sassVariables.$screen-bp-md}) {
	#main_Wrapper {
		margin: 0 5%;
	}
}
@media screen and (max-width: #{sassVariables.$screen-bp-sm}) {
	nav,
	#main_Wrapper {
		display: none;
	}
	#small_Message {
		display: block;
		margin-top: 2rem;
	}
}