@media screen{
/* fuck them */
#field--group_printedSheets__activities{
	display:none;
}
#field--group_printedSheets__detail{
	display:none;
}
#field--group_printedSheets__calendar{
	display:none;
}
._app{
	display:grid;
	width:100vw;
	max-width:100vw;
	height:100vh;
	overflow:hidden;
	display:grid;
	grid-template-areas: "head body" "foot foot";
	grid-template-columns:300px 1fr;
	grid-template-rows:1fr min-content;
	#workspace[data-columns="1"]{
		--columns:1;
	}
	#workspace[data-columns="2"]{
		--columns:2;
	}
	#workspace[data-columns="4"]{
		--columns:4;
	}
/* app > head */
	> ._head{ grid-area:head;  
		padding:0 10px;
		display:grid;
		height:100%;overflow:hidden;
		grid-template-areas:
			"title toolbar" "configuration configuration";
		grid-template-rows:min-content 1fr;
		grid-template-columns:1fr max-content;
		gap:20px;
		align-items: center;
		justify-content: space-between;
		> ._title{ grid-area:title;
			padding:10px;
		}
		> ._toolbar{grid-area:toolbar;}
		._configuration {grid-area:configuration;
			height:100%;overflow:auto;
		}
		> #debug{grid-area:debug;
			padding:10px;
			margin: 12px 0; color: #333;
		}
	}
/* app > body */
	> ._body{  grid-area:body;
		height:100%;
		width:100%;
		overflow:hidden;
/* app > body > #sheets */
		> #workspace{
			height:100%;
			width:100%;
			overflow-x:hidden;
			overflow-y:auto;
			display:block;
/* app > body > #workspace > _group */
			> ._group{
				display:grid;
				grid-template-areas:"head" "body";
				grid-template-rows:min-content 1fr;
				overflow: hidden;
				width:100%;
				height:max-content;
				min-height:max-content;
/* app > body > #workspace > _group > head */
				> ._head{ grid-area:head;background:lime;}
/* app > body > #workspace > _group > body */
				> ._body{ grid-area:body;
					display: grid;
					grid-template-columns:repeat(var(--columns), max-content);
					overflow-x:auto;
					overflow-y:visible;
					width:100%;
					height:auto;
/* app > body > #workspace > _group > body > _sheet */
					> .sheet {
						height: fit-content;
						/* Decoration >>>  */
						border: 1px solid #ddd;
						border-radius: 10px;
						background: #fff;
						box-shadow: 0 1px 4px rgba(0,0,0,0.06);
						/* <<< Decoration */
						overflow-y:auto;
/* app > body > #workspace > _group > body > _sheet > head (sheet-header) */
						> .sheet-header {
							padding: 8px 10px;
							font-size: 13px;
							border-bottom: 1px solid #eee;
							background: #fafafa;
							color: #444;
							display: flex;
							justify-content: space-between;
							gap: 10px;
/* app > body > #workspace > _group > body > _sheet > head > title (sheet-title) */
							> .sheet-title {
								font-weight: 700;
							}
						}
					}
				}
			}
		}
	}
	> ._foot{  grid-area:foot;
		
	}
}
/* === Config === */
._app > ._head > ._configuration > ._config-group{
	border:#222244 2px solid;
	border-radius:5px;
	margin-bottom:10px;
	> ._head, > ._body{
		padding:8px 10px;
	}
	> ._head{
		background:#222244;
		color:#fff;
		> ._title{
			font-weight:bold;
		}
	}
	> ._body{
		._config-item{
			margin-bottom:20px;
			> ._head{
				border-bottom:#222244 2px solid;
				padding-bottom:5px;
				margin-bottom:5px;
				> ._title{}
			}
			> ._body{
				._field{
					margin:8px 0;
					> label{
						font-size:13px;
					}
				}
				.is-number,
				.is-select,
				.is-checkbox{
					display:flex;
					justify-content:space-between;
				}
			}
		}
	}
}
._app > ._foot > ._configuration > ._config-group{
	border-top:#aaa 1px solid;padding:0;
	
	> ._head{ display:none;}
	> ._body{
		background: #aaa;
		padding:1px;
		display:flex; flex-direction:row; gap:10px;
		justify-content:center;
		> ._config-item{
			padding:6px 8px 6px 4px;;
			font-size:13px;
					color:#fff;
			> ._head{ display:none}
			> ._body{
				label{
					margin:0 8px;
				}
				select,
				button {
					height: 22px;
					padding: 0 10px;
					border: 1px solid #dcdcdc;
					border: 1px solid #222244;
					border-radius: 8px;
					background: #fafafa;
					cursor: pointer;
					font-size: 13px;
				}
			}
		}
	}
}

/* === Button === */
._btn {
	height: 34px;
	padding: 0 12px;
	border: 1px solid #dcdcdc;
	border: 1px solid #222244;
	border-radius: 10px;
	background: #fafafa;
	cursor: pointer;
	font-size: 14px;
}
._btn:active { transform: translateY(1px); }
/* === Dialog === */
._dialog{
	outline:none;
	margin:auto;
	
	> ._inner{
		display:grid;
		grid-template-areas:"head" "body" "foot";
		grid-template-rows:max-content 1fr max-content;
		width:var(--width);
		height:var(--height);
		overflow:hidden;
		background:var(--background);
		> ._head{grid-area:head;
			background:var(--head--background);
			padding:var(--head--padding);
			border-bottom:var(--head--border-bottom);
			display:flex;justify-content:space-between;align-items:center;
			> ._title{
				color:var(--head_title--color);
				font-size:var(--head_title--font-size);
			}
			> ._toolbar{
			
			}
		}
		> ._body{grid-area:body;
			background:var(--body--background);
			padding:var(--body--padding);
			height:100%;
			width:100%;
			overflow:auto;
		}
		> ._foot{grid-area:foot;
			background:var(--foot--background);
			padding:var(--foot--padding);
			border-top:var(--foot--border-top);
			color:var(--foot--color);
			display:flex;justify-content:space-between;align-items:center;
			> ._title{
			
			}
			> ._toolbar{
			
			}
		}
	}
	&::backdrop {
		backdrop-filter:var(--backdrop--filter);
		background: var(--backdrop--background);
	}
}
._dialog ._fields{ /* summary */
	> ._head{
		padding:5px;
		list-style: none;
		display:flex;gap:5px;
		background:#fff;
		border:#666 1px solid;
		margin:0 0 20px 0;
	}
	> ._head::after {
	  content: ' ►';
	}
	> ._body{
		padding:10px 5px;
		._field { display: grid; gap: 6px; align-items:center;grid-template-columns:150px max-content;
			margin-bottom:10px;
			label { font-size: 12px; color: #444; }
			select, input {
				height: 34px;
				padding: 0 10px;
				border: 1px solid #dcdcdc;
				border-radius: 10px;
				background: #fff;
				font-size: 14px;
				outline: none;
				min-width: 140px;
			}
			.hint { font-size: 12px; color: #666; margin-left: auto; align-self: center; max-width: 560px; }
			&.is-checkbox {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 8px;
				height: 34px;
				padding: 0 10px;
				border: 1px solid #dcdcdc;
				border-radius: 10px;
				background: #fff;
			}
			&.is-checkbox input { width: 16px; height: 16px; margin: 0; }
		}
	}
	&[open]{
		> ._head{
			background:#666;
			color:#fff;
			border:#fff 1px solid;
		}
		> ._head:after {
			content: " ▼";
		}
	}
}
/*
.mapSheet, .textSheet{
	display:none;
}
*/

.mapSheet{
	
	.map-for-print{
		display:none;
	}
}


/* END ONLY SCREEN */
}