/*====================================================================================================
// GLOBAL
//====================================================================================================*/

	html,body {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	  font-family: Arial, sans-serif;
	  width: 100%;
	  height: 100%;
	  overflow: hidden;
	}

	.divBody{
		width: 100%;
		height: 96%; /* lascia spazio al footer */
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	:root {
      --bg: #eef2f6;
      --panel: #dbe4ec;
      --title: #1f4d8f;
      --border: #b9c7d4;
      --text: #1f2937;
      --white: #ffffff;
      --primary: #2d6cdf;
      --secondary: #7c8ca0;
    }

/*====================================================================================================
// TOP BAR
//====================================================================================================*/
	.topBar {
	  width:100%;
	  height: clamp(60px, 4%, 80px);
	  background: #1e2a38;
	  color: white;
	  display: flex;
	  align-items: center; /*allinea verticalmente*/
	  /*justify-content: space-between; /*primo elemento tutto a sinistra e ultimo tutto a destra*/
	  padding: 2%,5%,2%,1%;
	}
	.logo{
		width:clamp(50px, 8%, 70px);
		height:clamp(50px, 8%, 70px);
		aspect-ratio: 1;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.logoImmagine{
	  width:100%;
	  height: 100%;
	  object-fit: contain;
	}
	
	.title{
	font-size:120%;
	
	}

	.controls { /*DIV CHE CONTIENE I COMANDI userMenu e settingsMenu*/
	  margin-left: auto; /* spinge i controlli completamente a destra */
	  margin-right:1%;
	  height: 100%;
	  cursor: pointer;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  gap: 2%;

	}
	.userIcon, .settings {
	  width: clamp(20px,100%,30px);
	  height: clamp(20px,100%,30px);	
	  flex-shrink: 0;
	  border-radius: 70%;
	  overflow: hidden; /* fondamentale */
	  cursor: pointer;
	  background: #1e2a38;
	  border: none;
	  padding:0;
	}
	
	.userIcon img, .settings img {
      width: 100%;
	  height: 100%;	
	  object-fit: contain; /* evita deformazioni */
	  border: none;
	}
	
	#userMenu, #settingsMenu{
	  position: absolute;
	  top: 8%;
	  right: 0;
	  margin-left: 5%;

	  background: white;
	  color: black;
	  border: 1px solid #ccc;
	  padding:2%;

	  min-width: 150px;
	  display: none;
	}
	
	.profilo div, .logout div{
		padding:1%;
		cursor:pointer;
	}
/*====================================================================================================
// SUBMENU - Barra orizzontale sotto la top bar
//====================================================================================================*/
	.submenu {
	  height: 5%;
	  background: #3f5062;
	  color: white;
	  display: flex;
	  align-items: center;
	  padding: 0 2%;
	}
	
	.subAggiungi{
		margin-left:1%;	
	}

/*====================================================================================================
// MAIN MENU - Parte centrale della pagina che include sidebar e divContent
//====================================================================================================*/
	.main {
	display: flex;
	flex:1;
    width: 100%;
    height: 100%;
    min-height: 0;
	overflow: hidden;
	}
/*====================================================================================================
// SIDEBAR
//====================================================================================================*/
	.sidebar {
	  width: clamp(120px,20%,240px);
	  background: #f4f6f8;
	  border-right: 1px solid #ccc;
	  overflow: hidden;
	  flex-shrink: 0;/*non si riduce anche quando lo spazio non è sufficiente*/
	}
	
	.divElencoPratiche{
	 padding:1%;
	}
	
	.elencoPratiche{
		display:flex;
		flex-direction:column;
		width: 100%;
		padding:1%;
	}
/*UFFICI CONSOTTOVOCI*/		
	.ufficioConSottovoci{
		display:flex;
		flex-direction:column;
		width: 100%;
		margin-top: 1%;
	}
	
	.divTestoConSottovoci{
	   	font-size:100%;
		color:black;
		width:100%
	}
	
	.divPraticheUfficio{
		width:100;
	}
	
	.praticheUfficio{
		width:100;
	}
	
	.sottovoceUfficio{
		margin-left:5%;
		display:flex;
		flex-direction:row;
		width: 100%;
		flex-wrap: nowrap;
		align-items: center;
		gap:2%;
		max-height: 40px;
	}
	
	.divIconaSottovoce{
		width:clamp(25px, 20%, 40px);
		aspect-ratio: 1 / 1;
	}
	
	.iconaSottovoce{
		object-fit: contain;
		width:100%;
		height:100%;
	}
	
	.divTestoSottovoce{
		width: 80%;
		font-size:80%;
		color:black;
	}
	
	
/*UFFICI SENZA SOTTOVOCI*/	
	.ufficioSenzaSottovoci{
		display:flex;
		flex-direction:row;
		gap:2%;	
		width: 100%;
		flex-wrap: nowrap;
		align-items: center;
		max-height: 40px;
	}
	
	.divIcona{
		width:clamp(25px, 20%, 40px);
		aspect-ratio: 1 / 1;
	}
	
	.icona{
		object-fit: contain;
		width:100%;
		height:100%;
	}
	
	.divTestoSenzaSottovoci{
		width: 80%;
		font-size:80%;
		color:black;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-top:1%;
	}
	

	/*.vocePrincipaleMenu{
	font-size:10%;
	color:black;
	display:flex;
	flex-wrap: nowrap;
	align-items: center;
	gap:1%;
	}
	.voceSecondariaMenu{/
	  font-size:8%;
	  color:black;
	  display:flex;
	  align-items: center;
	  flex-wrap: nowrap;
	  gap:1%;
	  margin-left:1%;
	}	*/
	
/*====================================================================================================
// CONTENT
//====================================================================================================*/
	.divContent {
		display: flex;
		flex-direction: column;
		flex: 1;/*Prende tutto lo spazio disponibile*/
		min-width: 0;
		min-height: 0;
		padding: 15px;
		background: #ffffff;
	}
	
	#content{
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overflow-x: hidden;
		background: #ffffff;
        display: flex;
        flex-direction: column;
        gap: 1%;
	}
	
	.tableRicerca{
	width:100%;
	}
/*====================================================================================================
// FOOTER
//====================================================================================================*/
	.footer {
	  height: 4%;
	  background: #1e2a38;
	  color: white;
	  display: flex;
	  align-items: center;
	  padding: 0 15px;
	  font-size: 10px;
	  flex-shrink: 0;/*non si riduce anche quando lo spazio non è sufficiente*/
	}