/************************************************************* Rules BELOW this point are set globally*/
//debug mode
.app-debug-mode {
	position: relative;

	.app-header {
		&::before {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			background: rgba(var(--primary), 0.7);
			z-index: 1;
			padding: 2px 4px;
			font-size: 0.5rem;
			color: #fff;
		}
	}
}

// fade up all main elements on page load

.content-wrapper>.app-breadcrumb+* {
	animation: animateFadeInUp .3s;
}

.main-content>* {
	animation: animateFadeInUp .7s;
}

.main-content>*+.row {
	animation: animateFadeInUp 1.4s;
}


/* app wrap */
.app-wrap {
	min-height: 100vh;
	display: grid;
	grid-template-columns: var(--menu-width) auto;
	grid-template-rows: var(--app-header-height) auto;
	grid-template-areas: 'header header' 'sidebar main' 'sidebar main';
	gap: 0;
	padding: 0;

	/* changes value on condition */
	padding-top: var(--app-header-fixed);
	transition: grid-template-columns 470ms cubic-bezier(0.34, 1.25, 0.3, 1);

}

/* app header */
.app-header {
	/* grid area */
	grid-area: header;

	height: var(--app-header-height);
	padding: 0 2rem 0 0;
	border-bottom: 1px solid var(--app-layout-border-color);
	display: flex;
	align-items: center;

	gap: 0.75rem; //12px

	/* changes vale on condition */
	margin-left: var(--app-nav-full);

	background-color: var(--app-header-background, silver);

	.app-logo {
		width: var(--menu-width);
		border-right: 1px solid var(--app-header-background);
		margin-right: 2rem;

		will-change: width;
		transition: width 470ms cubic-bezier(0.34, 1.25, 0.3, 1);
		transform: translate3d(0, 0, 0);
	}

	.app-search {
		.form-control {
			max-width: 21.875rem;
			height: 2.625rem;
			line-height: normal;
			border-radius: 4px;
			background: 0 0;
			border: 1px solid transparent;
			box-shadow: none;
			font-size: .9375rem;
			padding: .38rem;
			--bs-secondary-color: var(--input-placeholder-color);

			text-overflow: ellipsis;
		}
	}

	.sa-mode-light {
		display: none;
	}

	html[data-bs-theme="dark"] & {
		.sa-mode-light {
			display: block;
		}

		.sa-mode-dark {
			display: none;
		}
	}
}

/* app sidebar */
.app-sidebar {
	/* grid area */
	grid-area: sidebar;
	width: var(--menu-width);
	padding: 0;
	border-right: 1px solid var(--app-layout-border-color);
	overflow-x: hidden;
	z-index: 10;
	position: relative;
	background: var(--app-nav-background, silver);

	will-change: width;
	transition: width 470ms cubic-bezier(.34, 1.25, .3, 1);

	transform: translate3d(0, 0, 0);

	.app-logo {
		display: none; //turns on when .set-nav-full is active
	}

	.app-menu-filter-container {
		width: var(--menu-width);
		position: relative;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
}

/* app body */
.app-body {
	grid-area: main;
	display: flex;
	flex-flow: column;
	direction: var(--direction);

	//need this for smarttables since we are using grid layout
	max-width: 100%;
	width: 100%;
	overflow-x: auto;
}

/* app nav */
.app-nav {
	overflow-x: auto;
	padding: var(--content-padding);
}

/* app content */
.app-content {
	flex: 1;
	background-color: var(--app-content-background, #fdfdfd);
	display: flex;

	.content-wrapper {
		padding: 1.5rem 2rem;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		max-width: 100%;
		//width: 100%;

		//this may cause issues with SmartTables - we will see, if it does, we will need to remove it
		//needed this for sidepanels...
		position: relative;
		overflow-x: hidden;

		.main-content {
			flex: 1 1 auto;
		}
	}

	.content-wrapper-right {
		flex: 0 0 var(--right-content-width); //320px
		border-left: 1px solid var(--app-layout-border-color);
	}
}

/* app footer */
.app-footer,
.nav-footer {
	padding: 1rem 2rem;
	border-top: 1px solid var(--app-layout-border-color);
	display: flex;
	min-height: 55px;
	align-items: center;
	justify-content: space-between;

	.app-footer-content {
		display: flex;
		align-items: center;
		gap: 0.1875rem; //3px
		font-weight: 500;

		.logo {
			height: 1.25rem; //20px
		}
	}

}

// Full screen Mode
.sa-fullscreen-on {
	display: none !important;
}

body.fullscreen-active {
	.sa-fullscreen-on {
		display: block !important;
	}

	.sa-fullscreen-off {
		display: none !important;
	}
}




// need docs for this below
.hide-page-scrollbar {
	overflow: hidden;
	padding-right: var(--scrollbar-width, 8px);
}

.app-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	width: var(--drawer-width);
	background: var(--app-drawer-background);
	border-left: 1px solid var(--app-layout-border-color);

	transform: translate3d(calc(var(--drawer-width)), 0, 0);
	transition: var(--transition);
	z-index: calc(var(--z-index-master) + 2);

	display: flex;
	flex-direction: column;

	>* {
		padding: var(--content-padding);

		&:not(.app-drawer-header) {
			overflow-x: auto;
		}
	}

	.app-drawer-header {
		height: var(--app-header-height);
		min-height: var(--app-header-height);
		display: flex;
		align-items: center;
		background-color: var(--app-header-background);
		border-bottom: 1px solid var(--app-layout-border-color);
	}

	&.open {
		transform: translate3d(0, 0, 0);

		&+.backdrop:not([data-toggleclass="app-mobile-menu-open"]) {
			display: block;
			opacity: 1;
		}
	}
}

/* app menu and drawer backdrop */
.backdrop {
	display: none;
	position: fixed;
	z-index: calc(var(--z-index-master) + 1);
	background: rgba(0, 0, 0, 0.3);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;

	@include fadeIn;
}

/* set header fixed: this is global as it transends all levels */
.set-header-fixed {

	.app-header {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: var(--z-index-master);

	}

	&.set-nav-full.set-nav-fixed:not(.set-nav-top):not(.set-nav-collapsed) {
		.app-header {
			position: fixed;
			left: var(--menu-width);
			right: 0;
			top: 0;
		}

		&.set-nav-minified {
			.app-header {
				left: var(--menu-width-minified);
				padding-left: 2rem;

				.app-logo {
					display: none;
				}
			}
		}
	}

	/* 
		CSS: incompatibility : .set-nav-full
		CSS: needs dependency: .set-nav-fixed
	*/

	// disable set-nav-full button
	&:not(.set-nav-fixed) {
		[data-class^=set-nav-full] {
			opacity: var(--settings-disabled);

			~ {
				label {
					opacity: var(--settings-disabled);
				}
			}
		}
	}
}

/************************************************************* Rules ABOVE this point are set globally*/


/**************************************** Rules BELOW this point are set for screen sizes above 992px */
/*	so we take the opportunity to set the responsive rules here as it will apply for larger screens 
    but will not apply for smaller less complex screens, if you want certain responsive rules to 
    transcent to smaller screens, you can set them above this point for (universal rules)
    or below this point for mobile only rules */

@include media-breakpoint-up(lg) {

	/* debug mode */
	.app-debug-mode {
		.app-header {
			&::before {
				content: "XXL ";
			}
		}
	}

	/* large screens will hide */
	.hidden-lg {
		display: none !important;
	}

	/* set nav top */
	.set-nav-top {

		/* app wrap */
		.app-wrap {
			grid-template-columns: auto auto;
			grid-template-rows: var(--app-header-height) var(--menu-top-height) auto;
			grid-template-areas:
				'header header '
				'sidebar sidebar'
				'main main';
		}

		/* app sidebar */
		.app-sidebar {
			min-height: var(--menu-top-height);
			height: var(--menu-top-height);
			width: auto;
			border-right: 0;
			border-bottom: 2px dashed #333;
		}

		/* app body */
		.app-body {
			width: auto;
		}

		/* 
			CSS: incompatibility : .set-nav-full .set-nav-collapsed
			CSS: needs dependency: .set-nav-fixed
		*/

		[data-class^=set-nav-full],
		[data-class^=set-nav-collapsed] {
			opacity: var(--settings-disabled);
			text-decoration: line-through;

			~ {
				label {
					opacity: var(--settings-disabled);
					text-decoration: line-through;
				}
			}
		}

		/* set nav full and collapsed */
		&.set-nav-full,
		&.set-nav-collapsed {

			[data-class^=set-nav-full],
			[data-class^=set-nav-collapsed] {
				opacity: var(--settings-disabled);
				text-decoration: line-through;

				~ {
					label {
						opacity: var(--settings-disabled);
						text-decoration: line-through;
					}
				}
			}
		}

		/* look for dependency */
		&:not(.set-header-fixed) {
			[data-class^=set-nav-fixed] {
				opacity: var(--settings-disabled);

				~ {
					label {
						opacity: var(--settings-disabled);
					}
				}
			}
		}
	}

	/* set nav minified and not collapsed */
	.set-nav-minified:not(.set-nav-collapsed) {

		/* check if appheader has a sibling app-sidebar that is hovered */
		.app-header:has(+ .app-sidebar:hover) {

			/* control app logo width from a sub div on hover */
			.app-logo {
				width: calc(var(--menu-width));
			}
		}

		/* app wrap */
		.app-wrap {
			grid-template-columns: var(--menu-width-minified) auto !important;
		}

		/* app header */
		.app-header {
			.app-logo {
				width: var(--menu-width-minified);
				overflow: hidden;
				margin-right: calc(2rem + 1px);

				// will-change: width;
				// transition: width 470ms cubic-bezier(0.34, 1.25, 0.3, 1);
				// transform: translate3d(0, 0, 0);
			}
		}

		/* app sidebar */
		.app-sidebar:not(:hover) {
			width: var(--menu-width-minified);

			/* app menu filter container */
			.app-menu-filter-container {
				#searchInput {
					visibility: hidden;
				}
			}

			/* when primary nav is collapsed, hide span */
			.primary-nav ul li a span {
				opacity: 0;
				transition: opacity 0.2s ease-in-out;
			}

			/* when nav is collapsed, hide primary nav ul ul */
			.primary-nav ul ul {
				display: none !important;
			}

			/* when nav is collapsed, hide collapse sign */
			.collapse-sign {
				display: none;
			}

			/* when nav is collapsed, hide nav title to "..." */
			.nav-title {
				visibility: hidden;
				position: relative;

				span {
					display: none;
				}

				&::before {
					content: "...";
					color: currentColor;
					font-size: inherit;
					//position: absolute;
					visibility: visible;
					display: inline-block;
					bottom: 50%;
					inset-inline-start: 0;
					margin-inline-start: .225rem;
					transform: translateX(0%);
				}
			}
		}

		/* change state of the collapse icon in the app-header */
		.collapse-icon {

			svg {
				transform: scaleX(-1);
				margin-left: 0.75rem; //12px
			}

			&::after {
				width: 0.5625rem; //9px
			}

			&:hover {
				svg {
					margin-left: 1.125rem; //18px
				}

				&::after {
					width: 0.875rem; //14px
				}
			}
		}


		//is this being used?
		// &.set-nav-top {
		// 	--menu-top-height: var(--menu-top-height-minified);
		// }

	}

	/* set nav fixed */
	.set-nav-fixed {

		//is this being used?
		&.set-nav-top {

			&.set-header-fixed {
				.app-sidebar {
					position: fixed;
					top: var(--app-header-height);
					left: 0;
					right: 0;
					z-index: var(--z-index-master);
					overflow-y: auto;
					background-color: rgba(var(--danger), 0.9);
				}
			}
		}

		&:not(.set-nav-top) {

			&.set-nav-full:not(.set-header-fixed) {
				.app-sidebar {
					position: fixed;
					top: 0;
					bottom: 0;
					z-index: var(--z-index-master);
					//overflow-y: auto;
					//background-color: rgba(var(--danger), 0.9);
				}
			}

			&.set-header-fixed:not(.set-nav-full) {
				.app-sidebar {
					position: fixed;
					top: var(--app-header-height);
					bottom: 0;
					z-index: var(--z-index-master);
					overflow-y: auto;
					//background-color: rgba(var(--danger), 0.9);
				}
			}

			&.set-header-fixed.set-nav-full {
				.app-sidebar {
					position: fixed;
					top: 0;
					bottom: 0;
					z-index: var(--z-index-master);
					//overflow-y: auto;
					//background-color: rgba(var(--danger), 0.9);

					.app-logo {
						display: flex;
					}
				}

				.app-header {
					padding-left: 2rem;

					.app-logo {
						display: none;
					}
				}
			}

		}
	}

	/* set nav collapsed and set nav full but not set nav top */
	.set-nav-collapsed.set-nav-full:not(.set-nav-top):not(.set-nav-minified) {

		[data-class="set-nav-minified"],
		[data-class^=set-nav-minify] {
			opacity: var(--settings-disabled);

			~ {
				label {
					opacity: var(--settings-disabled);
				}
			}
		}

		&:not(.set-nav-top) {

			.app-wrap {
				grid-template-columns: 0 auto;
			}

		}

		.app-sidebar {
			transform: translate3d(calc(10px - var(--menu-width)), 0, 0);
			transition: var(--transition);
			z-index: var(--z-index-slave);
			position: relative;
			background-color: var(--app-nav-background);

			overflow-x: visible;

			&:hover {
				transform: translate3d(0, 0, 0);
			}

			/* adds an invisible buffer space for better usability*/
			&::after {
				content: "";
				position: absolute;
				display: block;
				z-index: -1;
				top: 0;
				bottom: 0;
				left: -1.25rem; //20px	
				background: transparent;
				width: calc(var(--menu-width) + 2.5rem); //40px
			}
		}
	}

	/* set nav full and not set nav top and not set header fixed */
	.set-nav-full:not(.set-nav-top):not(.set-header-fixed) {
		.app-wrap {
			grid-template-columns: var(--menu-width) auto;
			grid-template-rows: var(--app-header-height) auto;
			grid-template-areas:
				'sidebar header '
				'sidebar main'
				'sidebar main';
		}

		// logo is visible when .set-nav-full is active
		.app-sidebar {
			.app-logo {
				display: flex;
				width: var(--menu-width);
			}
		}

		.app-header {
			padding-left: 2rem;

			.app-logo {
				display: none;
			}
		}
	}

	/* set nav collapsed and set nav full but not set nav top */
	.set-nav-collapsed.set-nav-fixed {
		.app-sidebar {
			position: fixed !important;
			transition: all 470ms cubic-bezier(0.34, 1.25, 0.3, 1);
		}
	}

	/* set nav full and not set nav top and not set header fixed */
	.set-nav-collapsed:not(.set-nav-full) {
		.app-wrap {
			grid-template-columns: var(--menu-width) auto;
			grid-template-rows: var(--app-header-height) auto;
			grid-template-areas:
				'sidebar header '
				'sidebar main'
				'sidebar main';
		}
	}

	.set-nav-collapsed.set-nav-full.set-header-fixed {
		.app-header {
			z-index: 1;
			padding-left: 2rem;

			.app-logo {
				display: none;
			}
		}

		&.set-nav-minified {
			.app-header {
				position: fixed;
				left: var(--menu-width);
				right: 0;
				top: 0;
			}
		}
	}
}


/*********************************** Rules BELOW this point are set for screen sizes max-width 1280px */
@media only screen and (max-width: 1280px) {

	/* debug mode */
	.app-debug-mode {
		.app-header {
			&::before {
				content: "XL";
			}
		}
	}

	/* make things a little smaller to fit on the screen */
	html {
		font-size: 14px;
		--menu-width: 17rem;
	}
}

/********************************************* Rules BELOW this point are set all screens below 992px */
@media only screen and (max-width: #{($mobile-breakpoint-size) - 0.02px}) {

	/* debug mode */
	.app-debug-mode {
		position: relative;

		.app-header {
			&::before {
				content: "LG";
			}
		}
	}

	/* set all input to 16px to avoid mobile keyboard issues */
	input,
	textarea,
	select,
	.form-control {
		font-size: 1rem !important;
	}

	/* enforced layout changes on mobile */
	.position-on-mobile-absolute {
		position: absolute !important;
	}

	.position-on-mobile-absolute {
		position: absolute !important
	}

	.position-on-mobile-relative {
		position: relative !important
	}

	.position-on-mobile-static {
		position: static !important
	}

	.height-mobile-auto {
		height: auto !important;
		min-height: auto !important;
		max-height: auto !important;
	}

	.width-mobile-auto {
		width: auto !important;
		min-width: auto !important;
		max-width: auto !important
	}

	.expand-full-height-on-mobile {
		height: calc(100vh - var(--app-header-height)) !important
	}

	.expand-full-width-on-mobile {
		width: 100vw !important;
		max-width: 100vw !important
	}




	/* make things a little bigger for mobile */
	html {
		font-size: 17px;
		--menu-width: 18rem;
	}

	/* hide content scrollbar on mobile menu open */
	.app-mobile-menu-open {
		overflow: hidden;
		//padding-right: 12px;
	}

	/* set font size and menu width */
	body {
		--bs-body-font-size: 1rem;
		--mobile-page-padding: 1rem;
		--menu-width: 18rem;
	}

	/* small screens will hide this class */
	.hidden-sm {
		display: none !important;
	}

	/* app sidebar */
	.app-sidebar {
		background: var(--bs-body-bg);
	}

	/* app wrap */
	.app-wrap {
		grid-template-columns: 0 auto;
		grid-template-rows: var(--app-header-height) auto;
		grid-template-areas:
			"sidebar header "
			"sidebar main"
			"sidebar main";
	}

	/* app header */
	.app-header {
		padding: 0 var(--mobile-page-padding) !important;
		gap: 1rem;

		/* app logo */
		.app-logo {
			display: none;
		}

		/* profile image */
		.btn-system {
			.profile-image {
				width: 2.8rem;
				height: 2.8rem;
				max-width: 2.8rem;
				max-height: 2.8rem;
				//z-index: 1;
			}

			.sa-icon {
				width: 1.8rem;
				height: 1.8rem;
				z-index: 1;
			}

			&::before {
				width: 3.5rem;
				height: 3.5rem;
				z-index: 0;
			}

			&:hover::before,
			&.show::before {
				background: rgba(var(--primary), 0.1);
			}
		}

		&>.flex-grow-1 {
			flex-grow: 0 !important
		}
	}

	/* app sidebar */
	.app-sidebar {
		transform: translate3d(calc(-1 * var(--menu-width)), 0, 0);
		transition: var(--transition);
		z-index: calc(var(--z-index-master) + 1);
		top: 0;
		bottom: 0;
		position: fixed;
		overflow-y: auto;

		/* app logo */
		.app-logo {
			display: flex;
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		}

		/* primary nav */
		.primary-nav ul li a {
			padding-top: 10px; //16px
			padding-bottom: 10px; //16px
			font-size: 1rem; //16px
		}

		/* primary nav title */
		.primary-nav .nav-title {
			font-size: 0.85rem;
		}

		/* search input */
		#searchInput {
			font-size: 1rem;
			line-height: 2.5rem;
		}
	}

	/* app content */
	.app-content {
		.content-wrapper {
			padding: var(--mobile-page-padding);
		}
	}

	/* app footer */
	.app-footer,
	.nav-footer {
		padding: 1rem var(--mobile-page-padding);
	}

	/* app mobile menu open */
	.btn-system[data-bs-toggle=dropdown]+.dropdown-menu {
		right: var(--mobile-page-padding) !important;
	}

	/* app mobile menu backdrop */
	[data-toggleclass="app-mobile-menu-open"].backdrop {
		z-index: var(--z-index-master);
	}

	/* app mobile menu open */
	.app-mobile-menu-open {
		.app-sidebar {
			transform: translate3d(0, 0, 0);
		}

		[data-toggleclass="app-mobile-menu-open"].backdrop {
			display: block;
			opacity: 1;
		}
	}

	/* set header fixed */
	.set-header-fixed {
		.app-header {
			left: 0 !important;
		}
	}

	/* panel header */
	.panel-hdr h2 {
		font-size: 1rem !important;
	}

	/* panel icon */
	.panel.panel-icon .panel-toolbar [data-action*=panel-]:not(.dropdown-item) .sa-icon {
		width: 1.8rem !important;
		height: 1.8rem !important;
	}

}

/*********************************** Rules BELOW this point are set for screen sizes max-width TABLET */
@media only screen and (max-width: map-get($grid-breakpoints, md)) {

	/* debug mode */
	.app-debug-mode {
		.app-header {
			&::before {
				content: "MD";
			}
		}
	}

	/* hide content on tablet */
	.hidden-tablet {
		display: none !important;
	}
}

/*********************************** Rules BELOW this point are set for screen sizes max-width MOBILE */
@media only screen and (max-width: map-get($grid-breakpoints, sm)) {

	/* debug mode */
	.app-debug-mode {
		.app-header {
			&::before {
				content: "SM";
			}
		}
	}

	/* hide content on mobile */
	.hidden-mobile {
		display: none !important;
	}

	/* make things a little bigger for mobile : aiming for minimum 41px for clickable area */
	html {
		font-size: 16px;
		--menu-width: 18rem;
	}

	/* adataptive vars*/
	:root {
		--scrollbar-width: 0px;
	}


	/* app header */
	// .app-header {
	// 	.app-search {
	// 		display: none;
	// 	}
	// }

	/* app header : focus change header icon visibility*/
	.app-header {


		>:first-child~*:not(.dropdown-menu) {
			scale: 1;
			opacity: 1;
			transition: all 0.3s ease-in-out;
		}

		&:has(.app-search>input:focus) {
			overflow-x: hidden;
			//position: relative;

			.app-search {
				position: absolute;
				left: calc(var(--mobile-page-padding) + 4rem + 0.5rem); // padding + (--mobile-menu-icon-width) + gap 
				right: var(--mobile-page-padding);

				.form-control {
					max-width: unset;
				}
			}

			>:first-child~*:not(.dropdown-menu) {
				scale: 0;
				opacity: 0;
			}
		}
	}

	/* app content */
	.app-content {
		.breadcrumb {

			/* breadcrumb item math: total minimum screen width is 320px */
			.breadcrumb-item {
				max-width: 100px !important;

				&.active {
					max-width: 130px !important;
				}
			}
		}
	}
}