/*
 * Layout responsive per schermi piccoli e smartphone.
 * Tutte le regole stanno dentro la media query: da 992px in su il sito resta identico.
 * Caricato per ultimo (facet "last" dei layout), dopo style.css e l'extended.css del cliente.
 */

/* Il pulsante hamburger esiste solo su schermi piccoli (unica regola fuori dalla media query). */
.enmon-nav-toggle {
	display: none;
}

@media ( max-width : 991px) {

	/* ---- Scroll di pagina: scorre il documento, non i contenitori interni ---- */
	html, body {
		height: auto;
		overflow: auto;
	}

	body {
		padding-top: 56px;
		padding-bottom: 0;
	}

	#content, .enmon-eass-layout, .enmon-eass-est, .enmon-eass-est1,
		.enmon-eass-est-grid {
		height: auto;
		overflow: visible;
	}

	.enmon-eass-est1, .enmon-eass-est-grid {
		padding-left: 10px;
		padding-right: 10px;
	}

	.enmon-filter-view {
		margin: 10px;
		height: auto;
	}

	/* ---- Navbar con hamburger ---- */
	.navbar {
		height: auto;
		min-height: 50px;
		max-height: 100vh;
		overflow-y: auto;
	}

	.navbar > table, .navbar > table > tbody, .navbar > table > tbody > tr {
		display: block;
		width: 100%;
	}

	.navbar > table > tbody > tr > td {
		display: inline-block;
		vertical-align: middle;
		width: auto !important;
	}

	.navbar > table > tbody > tr > td:last-child {
		display: block;
		width: 100% !important;
	}

	.mnu-icon-logo, .mnu-energynet-icon-logo {
		max-height: 34px;
		width: auto;
	}

	.enmon-nav-toggle {
		display: block;
		position: absolute;
		top: 6px;
		right: 10px;
		z-index: 1;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.enmon-nav-toggle .icon-bar {
		display: block;
		width: 22px;
		height: 2px;
		margin: 4px auto;
		background: #555;
	}

	.navbar .enMonMnuBar {
		display: none;
		width: 100%;
	}

	.navbar.enmon-nav-open .enMonMnuBar {
		display: block;
	}

	.navbar .enMonMnuBar.ui-menubar > .ui-menu-list > .ui-menuitem,
	.navbar .enMonMnuBar.ui-menubar > .ui-menu-list > .ui-submenu {
		float: none;
		display: block;
		width: 100%;
		margin: 0 !important;
	}

	.navbar .enMonMnuBar .ui-menuitem-link, .navbar .enMonMnuBar .ui-submenu-link {
		min-height: 44px;
		line-height: 44px;
	}

	.navbar .enMonMnuBar .ui-menu-child {
		position: static;
		display: block;
		width: 100%;
		box-shadow: none;
	}

	.navbar .enMonMnuBar .ui-menubar-options {
		float: none;
		display: block;
	}

	.navbar .enMonMnuBar .ui-menubar-options table {
		width: 100%;
	}

	.enmon-leftpanel-toggle {
		display: none !important;
	}

	/* ---- Sotto-menu laterali: barra sopra il contenuto, sempre visibile ---- */
	.enmon-eass-west, .enmon-eass-west1 {
		float: none;
		width: 100%;
		min-width: 0;
		max-width: none;
		height: auto;
		border-right: 0;
		border-bottom: 2px solid #f0f0f0;
		display: block !important;
	}

	.enmon-eass-west1 .navbar-collapse, .enmon-eass-west1 .navbar-collapse.collapse {
		display: block !important;
		height: auto !important;
		overflow-x: auto;
		padding: 0;
	}

	.enmon-eass-west1 ul.nav {
		display: flex;
		flex-wrap: wrap;
		float: none;
		margin: 0;
	}

	.enmon-eass-west1 ul.nav > li {
		width: auto !important;
		text-align: left !important;
		float: none;
	}

	.enmon-eass-west1 .submenu-item {
		display: block;
		padding: 10px 12px;
	}

	/* p:layout (border layout): le unita' si impilano */
	.ui-layout-unit {
		position: static !important;
		width: 100% !important;
		height: auto !important;
	}

	.ui-layout-resizer, .ui-layout-toggler {
		display: none !important;
	}

	/* ---- Tabelle: scroll orizzontale ---- */
	.ui-datatable {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.ui-datatable table {
		table-layout: auto !important;
		width: auto !important;
		min-width: 100%;
	}

	.ui-datatable th, .ui-datatable td {
		width: auto !important;
	}

	.ui-datatable th {
		white-space: nowrap;
	}

	.ui-datatable .ui-paginator {
		white-space: normal;
	}

	/* ---- Form ---- */
	.enmon-form-content table:not(.ui-datatable-data):not(.ui-datepicker-calendar) {
		max-width: 100%;
	}

	.enmon-form-content > table > tbody > tr > td,
	.enmon-form-content .row > table > tbody > tr > td {
		display: block;
		width: 100% !important;
	}

	.normalFieldl, .bigField, .veryBigField, .enmon-form-content input[type=text],
		.enmon-form-content input[type=password], .enmon-form-content textarea,
		.enmon-form-content .ui-selectonemenu, .enmon-form-content .ui-calendar,
		.enmon-form-content .ui-calendar input {
		max-width: 100%;
	}

	.bigField, .veryBigField {
		width: 100% !important;
	}

	.enmon-form-content #actions .ui-button, .enmon-form-content #actions button {
		margin: 0 4px 6px 0;
	}

	.ui-grid-col-1, .ui-grid-col-2, .ui-grid-col-3, .ui-grid-col-4,
		.ui-grid-col-5, .ui-grid-col-6, .ui-grid-col-7, .ui-grid-col-8,
		.ui-grid-col-9, .ui-grid-col-10, .ui-grid-col-11, .ui-grid-col-12 {
		float: none;
		width: 100%;
	}

	/* ---- Dialog ---- */
	.ui-dialog {
		width: 95vw !important;
		max-width: 95vw;
		left: 2.5vw !important;
	}

	.ui-dialog .ui-dialog-content {
		max-height: 80vh;
		overflow: auto;
	}

	/* ---- Grafici ---- */
	#chartContainer {
		margin: 0 !important;
		min-height: 300px !important;
	}

	/* ---- Home: box delle funzionalita' una sotto l'altra ---- */
	#homeForm, #homeForm > div {
		height: auto !important;
		overflow: visible !important;
	}

	.feature-box {
		display: block;
		width: 90%;
		margin: 0 auto 20px !important;
	}

	/* ---- Footer ---- */
	#footer table, #footer tbody, #footer tr, #footer td {
		display: block;
		width: 100% !important;
		text-align: center;
	}

	/* ---- Login: logo e campi impilati ---- */
	.form-signin {
		max-width: 100%;
		padding: 10px;
	}

	.form-signin > table, .form-signin > table > tbody,
		.form-signin > table > tbody > tr, .form-signin > table > tbody > tr > td {
		display: block;
		width: 100%;
	}

	.form-signin img {
		max-width: 100%;
		height: auto;
	}

	.form-signin .enMonTrtPanel {
		padding-right: 0 !important;
		text-align: center;
	}

	.form-signin > table > tbody > tr > td .ui-panel-content {
		padding: 0;
	}

	.login-heading {
		font-size: 26px;
	}

	.login-heading-sub {
		font-size: 18px;
	}
}