/*
	Qui ci va solo ciò che specifica le cose a livello di struttura/scheletro
	(ad eccezione del livello di struttura dell'assetto cms, es. "#body.cms_mode ....", che va in 50_ec_cms.css)
	Le direttive relative ai contenuti vanno specificate in apposito file di stile (es. ec_box.css per contenuti di ".box").
*/

/********** BODY **********/

	body {
	}

	#body {
		margin: 0 auto;
		padding: 0; /* 0 perchè se > 0 per qualche ignoto motivo #areacenter va sotto #arealeft prima ancora di incolonnare le schedine nel catalogo matrix su resize del browser */
		width: 100%;
		max-width: var(--wec-body-maxwidth);
	}
	
	body:not(.email) table.email {
		/* Annulla per il browser le dimensioni appositamente aggiunte per la e-mail (caso layout carrello bicolonna) */
		width: 100% !important;
		max-width: unset !important;
	}

/* --------- BODY --------- */

/********** NAVBAR TAB **********/

	/* Non contemplato per il desktop */

/* --------- NAVBAR TAB --------- */

/********** AREA MIDDLE (#areamiddle --> #arealeft.areaside / #areacenter.areaside --> (#areacenter_top / #areacenter_content) / #arearight) **********/

	#areamiddle {
		display: grid;
	    grid-template-columns: repeat(1, minmax(0, 1fr));
		width: 100%; 
		max-width: var(--wec-areamiddle-maxwidth);
		min-width: 0;
		min-height: 100vh;
		margin: 20px auto 0;
		overflow: hidden;
		padding: 0 var(--wec-areamiddle-padding-leftright);
	}
	
	@media (min-width: 1024px) { /* Flowbite lg breakpoint */
		#areamiddle {
			grid-template-columns: var(--wec-arealeft-maxwidth) 1fr var(--wec-arearight-maxwidth); /* See #arealeft and #arearight widths */
		}
	}
	
	#areamiddle.arealeft_collapsed {
		grid-template-columns: 0px 1fr var(--wec-arearight-maxwidth); /* See #arealeft and #arearight widths */
	}
	#areamiddle.arearight_collapsed {
		grid-template-columns: var(--wec-arealeft-maxwidth) 1fr 0px; /* See #arealeft and #arearight widths */
	}
	
	#areamiddle.arealeft_collapsed.arearight_collapsed {
		grid-template-columns: 1fr;
	}

	#arealeft,
	#arearight,
	#areacenter {
		position: relative;
		overflow-y: auto;
		overflow-x: hidden;
	}
	
	#arealeft {
		width: var(--wec-arealeft-maxwidth); /* Valore usato da codice js e vedi valori grid-template-columns su #areamiddle */
		max-width: var(--wec-arealeft-maxwidth); /* Valore usato da codice js e vedi valori grid-template-columns su #areamiddle */
		padding-right: 40px;
	}
	
	#areacenter {
		width: 100%;
		max-width: var(--wec-areamiddle-maxwidth); /* Valore usato da codice js */
		min-width: 0;
	}
	
	#arearight {
		width: var(--wec-arearight-maxwidth); /* Valore usato da codice js e vedi valori grid-template-columns su #areamiddle */
		max-width: var(--wec-arearight-maxwidth); /* Valore usato da codice js e vedi valori grid-template-columns su #areamiddle */
		padding-left: 40px;
	}
	
	#areacenter_toolbar {
		display: flex;
		justify-content: space-between;
	}
	
	@media (min-width: 1024px) { /* Flowbite lg breakpoint */
	
		#areacenter_toolbar .panel_handle_user {
			display: inline-flex;
		}
		
		#areacenter_toolbar .panel_handle {
			display: none;
		}
		
		#body.cms_mode #areacenter_toolbar .panel_handle_user,
		#body.ec_mode_2 #areacenter_toolbar .panel_handle_user_right {
			display: none;
		}
		
	}
	
	@media (max-width: 1023px) { /* Flowbite lg breakpoint */
	
		#areamiddle.arealeft_collapsed,
		#areamiddle.arearight_collapsed,
		#areamiddle.arealeft_collapsed.arearight_collapsed {
			grid-template-columns: 1fr;
		}
		
		#arealeft,
		#arearight {
			position: fixed;
			top: 0;
			height: 100dvh;
			transition: transform .3s ease;
		}
		
		#arealeft {
			left: 0;
			transform: translateX(-100%)
		}
		
		#arearight {
			right: 0;
			transform: translateX(100%);
		}
		
		#arealeft.drawer_open,
		#arearight.drawer_open {
			transform: translateX(0);
			background-color: var(--wec-color-bg);
			z-index: 100;
			padding-left: 20px;
			padding-right: 20px;
		}
		
		#areacenter_toolbar .panel_handle_user {
			display: none !important;
		}
		
		#areacenter_toolbar .panel_handle {
			display: none;
		}
		
		#body.ec_mode #areacenter_toolbar .panel_handle.panel_handle_left,
		#body.ec_mode_3 #areacenter_toolbar .panel_handle.panel_handle_right {
			display: inline-flex;
		}
		
	}

/* --------- AREA MIDDLE (#areamiddle --> #arealeft.areaside / #areacenter.areaside --> (#areacenter_top / #areacenter_content) / #arearight) --------- */