/* Stylesheet for the master layout. */
/* Depends on variables.css */

body {
	background-color: var(--re-gray);
	color: var(--fg);
	font-family: var(--font);
	font-size: var(--font-size);
	margin: 0;
	height: 100vh;
	display: grid;
	grid-gap: 1px;
	grid-template-columns: min-content 1fr;    /* before statusbox, 235px 1fr */
	grid-template-rows: 60px min-content 1fr;  /* without toolbar, 70px 1fr */
	grid-template-areas:
	  "logobarArea logobarArea"
	  "toolbarArea toolbarArea"
	  "menuArea    pageArea";
}

#footArea {
	display: none;  /* no foot in this theme */
}

.area {
	background-color: var(--re-bg);
}

#logobarArea {
	grid-area: logobarArea;
	position: relative;
	box-shadow: 0px 2px 2px var(--re-gray);
}

#toolbarArea {
	grid-area: toolbarArea;
	height: 30px;
	position: relative;
	box-shadow: 0px 2px 2px var(--re-gray);
}

#menuArea {
	grid-area: menuArea;
}

body:not(.popup) #menuArea {
	width: 200px;
	border-right: 1px solid #dfe2e8;
}

#pageArea {
	grid-area: pageArea;
	padding: 11px 10px 10px 9px;
		/* top padding adds to 10px with 1px grid-gap and -2px box-shadow */
		/* left padding adds to 10px with 1px grid-gap */
}

body.popup {
	grid-gap: unset;
}

body.popup #menuArea {
	box-shadow: 0 0 2px black;
}

body.popup #pageArea {
	padding: 10px;
	box-shadow: 0 0 2px darkgray;
}