/* =========================================================
   BASE LAYOUT (TUO CODICE – INVARIATO)
   ========================================================= */

html, body {
	margin: 0;
	min-height: 100%;
	height: 100%;
}

#app-side-nav-outer-toolbar {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

/* =========================================================
   HEADER
   ========================================================= */

.layout-header {
	flex: 0 0 auto;
	position: relative;
	z-index: 1501;
	box-shadow: 0 1px 1px color-mix(in srgb, currentColor 18%, transparent);
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.dx-toolbar .dx-toolbar-item.menu-button {
	width: 60px;
	text-align: center;
	padding: 0;
}

/* icone: attive ma meno urlate */
.dx-toolbar .dx-icon {
	opacity: 0.88;
	transition: opacity .15s ease;
}

.dx-toolbar .dx-state-hover .dx-icon,
.dx-toolbar .dx-state-focused .dx-icon {
	opacity: 1;
}

/* =========================================================
   CARD
   ========================================================= */

.dx-card {
	border-radius: 4px;
	margin: 2px 2px 3px;
	box-shadow:
		0 1px 1px color-mix(in srgb, currentColor 16%, transparent);
	transition: box-shadow .2s ease;
}

.dx-card:hover {
	box-shadow:
		0 2px 4px color-mix(in srgb, currentColor 22%, transparent);
}

.dx-card.wide-card {
	border-radius: 0;
	margin-left: 0;
	margin-right: 0;
	border-right: 0;
	border-left: 0;
}

/* =========================================================
   SCROLL / FOOTER
   ========================================================= */

.with-footer > div > div > .dx-scrollable-content {
	height: 100%;
}

.with-footer > div > div > .dx-scrollable-content > .dx-scrollview-content {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/* =========================================================
   BODY
   ========================================================= */

.layout-body {
	flex: 1;
	height: 100%;
	min-height: 0;
}

.layout-body .menu-container {
	height: 100%;
	width: 250px;
}

.layout-body .content {
	flex-grow: 1;
	height: 100%;
	line-height: 1.5;
}

.layout-body .content h2 {
	font-size: 30px;
	font-weight: 300;
	letter-spacing: -.5px;
	opacity: 0.9;
}

.layout-body .content-block {
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 1px;
}

.layout-body .content-footer {
	display: block;
	opacity: 0.85;
	padding-top: 5px;
	padding-bottom: 5px;
}

.layout-body .responsive-paddings {
	padding: 20px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (min-width: 600px) {
	.layout-body .content-block {
		margin-left: 40px;
		margin-right: 40px;
	}
}

@media screen and (min-width: 1280px) {
	.layout-body .responsive-paddings {
		padding: 40px;
	}
}

/* =========================================================
   UTILITY
   ========================================================= */

.layout-hidden {
	display: none;
}

/* =========================================================
   DEVEXTREME – SOFTENING THEME SAFE
   ========================================================= */

/* pulsanti: meno “plastica”, zero colori */
.dx-button {
	box-shadow: none;
	transition: box-shadow .15s ease, transform .1s ease;
}

.dx-button.dx-state-hover {
	box-shadow:
		0 1px 2px color-mix(in srgb, currentColor 25%, transparent);
}

.dx-button.dx-state-active {
	transform: translateY(1px);
}

/* griglia */
.dx-datagrid,
.dx-datagrid-headers {
	box-shadow: none;
}

/* header griglia: meno dominante */
.dx-datagrid-headers .dx-datagrid-text-content {
	font-weight: 500;
	opacity: 0.9;
}


/* =========================================================
   dxDataGrid – riduzione rumore visivo
   ========================================================= */

/* linee meno invasive */
.dx-datagrid .dx-row > td {
	opacity: 0.92;
}

/* header più leggero */
.dx-datagrid-headers .dx-header-row > td {
	font-weight: 500;
	opacity: 0.9;
}

/* filter row meno “urlata” */
.dx-datagrid-filter-row > td {
	padding-top: 2px;
	padding-bottom: 2px;
	opacity: 0.85;
}


/* icone globali */
.dx-icon {
	opacity: 0.88;
}

/* focus meno aggressivo */
.dx-state-focused {
	outline: none;
}

/* popup */
.dx-overlay-content {
	box-shadow:
		0 4px 12px color-mix(in srgb, currentColor 30%, transparent);
}

/* tab */
.dx-tab {
	opacity: 0.88;
	transition: opacity .15s ease;
}

.dx-tab.dx-tab-selected {
	opacity: 1;
}

/* editor */
.dx-texteditor {
	box-shadow: none;
	transition: box-shadow .15s ease;
}

.dx-texteditor.dx-state-focused {
	box-shadow:
		0 1px 2px color-mix(in srgb, currentColor 30%, transparent);
}