/*
 * Stili applicativi di N.App, scritti in CSS nativo (nesting, custom
 * properties, :is()) — nessuna compilazione richiesta.
 *
 * Caricato dopo portal.css: portal.css resta il framework Bootstrap
 * compilato (raramente modificato); questo file è quello che si edita
 * di continuo, e vince in cascata sulle regole app-specifiche ormai
 * obsolete rimaste dentro portal.css.
 *
 * Le variabili --bs-* (--bs-secondary, --bs-body-color, --bs-danger, ...)
 * sono già definite da Bootstrap in portal.css: qui vengono solo lette.
 */

:root {
	--bg-color: #fcf6f2;
	--primary-color: #146ce7;
	--primary-color-hover: #5494EE;
	--primary-color-active: #5074b3;
	--primary-color-selected: #D4E4FB;
	--accent-color: #CF111A;

	--theme-border-color: #e1e4e7;
	--theme-text-light: #7e8b98;
	--theme-bg-smoke: #f5f5f5;
	--theme-bg-hover: #faf8f8;
}

/* ==================== Base ==================== */

html {
	font-size: 12px;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--bs-secondary);
	opacity: 0;
	transition: opacity 1s ease;

	&.loaded {
		opacity: 1;
	}
}

:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
	color: var(--bs-body-color);
	font-weight: 600;
}

a {
	color: var(--primary-color);
	text-decoration: none;

	&:hover {
		color: var(--primary-color-hover);
	}
}

a.app-link {
	color: var(--bs-body-color);
	text-decoration: underline;
	text-decoration-color: rgb(from var(--bs-body-color) r g b / 0.3);

	&:hover {
		color: var(--primary-color);
		text-decoration-color: rgb(from var(--primary-color-hover) r g b / 0.8);
	}
}

hr {
	background: #a9b1ba;
}

.border-primary {
	border-color: var(--primary-color) !important;
}

.border-secondary {
	border-color: var(--accent-color) !important;
}

.text-primary {
	color: var(--primary-color) !important;
}

.text-secondary {
	color: var(--accent-color) !important;
}

.text-muted {
	color: #9ba5ae !important;
}

.bg-primary {
	background-color: var(--primary-color) !important;
}

.link-primary {
	color: var(--primary-color);
}

.table-dark {
	background: var(--bs-body-color);
	color: #fff;

	:is(th, td) {
		border-color: #4e5862;
	}
}

.table-bordered :is(th, td) {
	border-color: var(--theme-border-color);
}

.table :is(th, td) {
	border-color: var(--theme-border-color);
}

.table-striped > tbody > tr,
.table-striped-cols .cell {
	background-color: #fff;
	&:nth-of-type(odd) {
		background-color: var(--theme-bg-smoke);
	}
}

.table-hover > tbody > tr:hover {
	background-color: white;
}

.popover {
	border-color: #ebe1e1;
}

.bs-popover-left > .arrow::before,
.bs-popover-auto[x-placement^="left"] > .arrow::before {
	border-left-color: #ebe1e1;
}

.bs-popover-right > .arrow::before,
.bs-popover-auto[x-placement^="right"] > .arrow::before {
	border-right-color: #ebe1e1;
}

.bs-popover-top > .arrow::before,
.bs-popover-auto[data-popper-placement^="top"] > .arrow::before,
.bs-popover-auto[x-placement^="top"] > .arrow::before {
	border-top-color: #ebe1e1;
}

.bs-popover-bottom > .arrow::before,
.bs-popover-auto[data-popper-placement^="bottom"] > .arrow::before,
.bs-popover-auto[x-placement^="bottom"] > .arrow::before {
	border-bottom-color: #ebe1e1;
}

button.close:focus {
	outline: none;
	box-shadow: none;
}

.btn {
	font-weight: 600;
	padding: 0.4rem 1rem;
	font-size: 1rem;
	border: none;

	&:is(:hover, :active, :focus) {
		text-decoration: none;
	}
	&:is(:focus, .focus) {
		box-shadow: none !important;
	}
	.bi {
		position: relative;
		top: -2px;
	}
}

.app-btn-primary {
	background: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color);

	&:hover {
		color: #fff;
		background: var(--primary-color-hover);
		border-color: var(--primary-color-hover);
	}
}

.app-btn-secondary {
	background: white;
	color: var(--bs-secondary);
	border: 1px solid #b7bec5;

	&:hover {
		color: var(--primary-color);
		border: 1px solid var(--primary-color);
		background: white;
	}
	&.active {
		background: var(--bs-body-color);
		color: white;
		border: 1px solid var(--bs-body-color);
	}
}

.btn-light {
	background: var(--bg-color);
	color: var(--primary-color);

	&:hover {
		background: var(--bg-color);
		color: var(--primary-color);
	}
}

:is(.form-control, .form-select, .dp__input, input.etaInput, input.smallInput, input.qtInput) {
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #6c757d;
	border: 1px solid #ced4da;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	-webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
	        transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
	        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;

	&:is(:focus) {
		box-shadow: none;
		outline: none;
		color: var(--bs-secondary);
	}
}

.tab-content :is(.form-control, .form-select, .dp__input, input.etaInput, input.smallInput, input.qtInput) {
	background-color: transparent;
	&:is(:focus) {
		background-color: #fff8;
	}
}

.form-check-input:is(:checked, .checked) {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.form-check-label {
	margin-left: 0.3rem;
}

.form-check-inline {
	padding-block: 0.375rem;
}

.dropdown-menu {
	border-color: var(--theme-border-color);

	.dropdown-item {
		padding: 0.5rem 1rem;

		&:hover {
			color: var(--bs-body-color);
		}
		&:is(:hover, :focus, .active, :active) {
			background: var(--theme-bg-hover);
		}
	}
}

.dropdown-divider {
	border-top-color: var(--theme-border-color);
	opacity: 1;
}

.dropdown-toggle.no-toggle-arrow::after {
	display: none !important;
}

.dp__input {
	padding: 0.375rem 0.75rem 0.375rem 2.5rem !important;
	border: 1px solid #ced4da;
	color: var(--bs-secondary);

	&:hover {
		border-color: #ced4da;
	}
	&:focus {
		border-color: #86b7fe;
	}
}

/* ==================== Header ==================== */

.app-header {
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid var(--theme-border-color);
	height: 50px;
	background: #fff;
}

.app-header-inner {
	position: relative;
}

.app-search-form {
	position: relative;
	max-width: 600px;

	.search-input {
		font-size: 0.875rem;
		border-radius: 0.25rem;
		padding-right: 3rem;
		padding-left: 1rem;

		&:focus {
			border-color: var(--theme-border-color);
		}
	}

	.search-btn {
		color: var(--theme-text-light);
		background: none;
		border: none;
		position: absolute;
		right: 0;
		top: 0;
		margin-right: 0;
		padding: 0.5rem 1rem;

		&:is(:active, :focus, :hover) {
			outline: none !important;
			color: var(--primary-color);
			box-shadow: none;
		}
	}
}

.app-utility-item {
	display: inline-block;
	margin-right: 1.25rem;

	&:last-child {
		margin-right: 0;
	}
	> a {
		color: var(--bs-secondary);
		&:hover {
			color: var(--bs-body-color);
		}
	}
	.dropdown-toggle {
		position: relative;
	}
	.dropdown-menu {
		font-size: 0.875rem;
		margin: 0;
		&.show {
			top: 23px !important;
		}
	}
	.icon {
		font-size: 1.25rem;
		width: 24px;
		height: 24px;
	}
	.icon-badge.icon-badge {
		display: inline-block;
		border-radius: 50%;
		position: absolute;
		right: -0.45rem;
		top: -0.3rem;
		width: 20px;
		height: 20px;
		font-size: 0.6rem;
		font-weight: bold;
		padding-top: 1px;
		color: #fff;
		text-align: center;
		background: #EC776C;
		border: 2px solid #fff;
	}
}

.app-notifications-dropdown {
	.dropdown-menu {
		width: 300px;

		.dropdown-menu-header {
			border-bottom: 1px solid var(--theme-border-color);
		}
		.dropdown-menu-title {
			font-size: 1rem;
		}
		.profile-image {
			width: 36px;
			height: 36px;
		}
		.info {
			padding-right: 80px;
			position: relative;
		}
		.meta {
			color: var(--theme-text-light);
			position: absolute;
			right: 0;
			top: 0;
			font-size: 0.75rem;
		}
		.dropdown-menu-footer {
			border-top: 1px solid var(--theme-border-color);
		}
		.item {
			min-width: 250px;
			position: relative;
			border-bottom: 1px solid var(--theme-border-color);

			&:last-child {
				border-bottom: none;
			}
			&:hover {
				background: var(--theme-bg-smoke);
			}
		}
		.link-mask {
			position: absolute;
			width: 100%;
			height: 100%;
			display: block;
			left: 0;
			top: 0;
		}

		@media (min-width: 576px) {
			width: 400px;
		}
	}

	.app-icon-holder {
		display: inline-block;
		background: white;
		color: var(--primary-color);
		width: 36px;
		height: 36px;
		padding-top: 4px;
		font-size: 1rem;
		text-align: center;
		border-radius: 50%;

		&.icon-holder-mono {
			background: var(--bg-color);
			color: var(--theme-text-light);
		}
		svg {
			width: 20px;
			height: 20px;
		}
	}
}

.app-user-dropdown {
	display: inline-block;

	img {
		width: 36px;
		height: 36px;
		border-radius: 50%;
	}
}

@media (min-width: 1200px) {
	.app-header-inner {
		margin-left: 180px;
	}
}

@media (max-width: 575.98px) {
	.search-mobile-trigger {
		cursor: pointer;
		opacity: 0.8;
		&:hover {
			color: var(--primary-color);
			opacity: 1;
		}
	}
	.app-search-box {
		display: none;
		position: absolute;
		left: 0;
		top: 50px;
		padding: 0;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		transition: all 0.4s ease-in-out;

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}

		.app-search-form .search-input {
			border-radius: 0;
			padding-block: 1.5rem;
		}
		.app-search-form .search-btn {
			top: 7px;
		}
		&.is-visible {
			display: block;
		}
	}
}

/* ==================== Sidepanel ==================== */

.app-sidepanel {
	position: fixed;
	min-height: 100vh;
	height: 100%;
	left: 0;
	top: 0;
	font-size: 1rem;
	border-right: 1px solid var(--theme-border-color);

	.panel-drop {
		display: none;
	}

	.sidepanel-inner {
		position: relative;
		z-index: 10;
		background: #fff;
		box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 15px;
		width: 180px;
		height: 100%;
	}

	.sidepanel-close {
		display: none;
		position: absolute;
		z-index: 20;
		right: -2rem;
		top: 0;
		color: #fff;
		font-size: 2rem;
	}

	&.sidepanel-hidden {
		left: -400px;
	}
	&.sidepanel-visible {
		left: 0;
	}

	.app-nav-main {
		overflow-y: auto;
		scrollbar-color: rgba(0, 0, 0, 0.1) var(--theme-border-color); /* Firefox */
		scrollbar-width: thin;

		&::-webkit-scrollbar { /* Chrome */
			width: 6px;
			background-color: var(--theme-border-color);
		}
		&::-webkit-scrollbar-thumb {
			background-color: rgba(0, 0, 0, 0.1);
			border-radius: 0.5rem;
		}
	}

	@media (max-width: 1199.98px) {
		transition: all 0.4s ease-in-out;
		left: -400px;

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}
		&.sidepanel-visible {
			display: block;
		}
	}
}

@media (max-width: 1199.98px) {
	.sidepanel-visible .sidepanel-close {
		display: inline-block;
	}
	.sidepanel-visible .sidepanel-drop {
		position: fixed;
		display: block;
		min-height: 100vh;
		height: 100%;
		width: 100%;
		min-width: 100vw;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.35);
	}
}

.app-branding {
	height: 60px;
	padding-top: 1rem;
	padding-left: 1rem;
	margin-bottom: 1rem;

	.logo-icon {
		width: 36px;
		height: 36px;
	}
	.logo-text {
		color: var(--bs-body-color);
		font-size: 1.25rem;
		font-weight: 600;
		vertical-align: middle;
	}
}

.app-nav {
	color: var(--bs-secondary);
	display: block;
	padding: 0;
	width: 100%;

	.app-menu {
		margin-bottom: 0;
	}
	.nav-item {
		display: block;
		color: var(--bs-secondary);
		background: #fff;
	}
	.nav-link {
		display: block;
		padding: 0.875rem 1rem 0.875rem 3rem;
		color: var(--bs-body-color);
		position: relative;
		border-left: 3px solid transparent;

		&.active {
			color: var(--primary-color);
			background: white;
			border-left: 3px solid var(--primary-color);
			font-weight: 500;
		}
		&.submenu-toggle.active {
			background: none;
			border-color: transparent;
		}
		&:hover {
			color: var(--primary-color);
		}
	}
	.nav-icon {
		position: absolute;
		left: 1rem;
		top: 0.7rem;

		.bi {
			width: 1.25rem;
			height: 1.25rem;
		}
	}
	.submenu-arrow {
		position: absolute;
		right: 1rem;
		top: 0.7rem;
		color: var(--theme-text-light);

		svg {
			width: 14px;
			height: 14px;
		}
	}
	.submenu-toggle {
		transition: all 0.4s ease-in-out;

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}
		&[aria-expanded="true"] .submenu-arrow {
			color: var(--bs-body-color);
			svg {
				transform: rotate(180deg);
			}
		}
	}
	.submenu-item {
		margin-bottom: 0;
	}
	.submenu-link {
		color: var(--bs-secondary);
		font-size: 1rem;
		margin-left: 2rem;
		padding: 0.5rem 1rem 0.5rem 1rem;
		position: relative;
		display: block;
		margin-bottom: 0;

		&::before {
			background-color: var(--theme-border-color);
			content: " ";
			display: inline-block;
			left: 0;
			position: absolute;
			width: 2px;
			height: 100%;
			margin-top: -0.5rem;
		}
		&:hover {
			color: var(--bs-body-color);
		}
		&.active {
			color: var(--primary-color);
			&::before {
				background-color: var(--primary-color);
			}
		}
	}
}

.app-sidepanel-footer {
	width: 100%;
	bottom: 0;
	left: 0;
	border-top: 1px solid var(--theme-border-color);
	background: var(--bg-color);

	.app-nav-footer {
		margin-bottom: 0;
	}
}

@media (min-width: 1200px) {
	.app-wrapper {
		margin-left: 180px;
	}
}

.unit {
	cursor: pointer;

	&.no-show {
		opacity: .5;
	}
}

.offcanvas-end {
	width: 45%;
}

/* ==================== App ==================== */

.app {
	min-height: 100vh;
	height: 100%;
	width: 100%;
	background: var(--bg-color);
	padding-top: 56px;
	overflow-x: hidden;
}

.app-footer .copyright {
	font-size: 0.8125rem;
}

.app-wrapper {
	transition: all 0.4s ease-in-out;

	@media (prefers-reduced-motion: reduce) {
		transition: none;
	}
}

.app-page-title {
	font-size: 1.5rem;
	font-weight: bolder;
	margin-bottom: 1.5rem;
}

.app-card {
	position: relative;
	background: #fff;
	border-radius: 0.25rem;

	&.border-left-decoration {
		border-left: 3px solid var(--primary-color);
	}
	.app-card-link-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		display: block;
		left: 0;
		top: 0;
	}
	.app-card-header {
		border-bottom: 1px solid var(--theme-border-color);
	}
	.app-card-title {
		font-size: 1.125rem;
		margin-bottom: 0;
	}
	.card-header-action {
		font-size: 0.875rem;
		a:hover {
			text-decoration: underline;
		}
	}
	.form-select-holder {
		display: inline-block;
	}
	.btn-close {
		padding: 1rem;
		&:focus {
			box-shadow: none;
		}
	}
	.app-icon-holder {
		display: inline-block;
		background: white;
		color: var(--primary-color);
		width: 50px;
		height: 50px;
		padding-top: 10px;
		font-size: 1rem;
		text-align: center;
		border-radius: 50%;

		&.icon-holder-mono {
			background: var(--bg-color);
			color: var(--theme-text-light);
		}
		svg {
			width: 24px;
			height: 24px;
		}
	}
	.app-card-body {
		&.has-card-actions {
			position: relative;
			padding-right: 1rem !important;
		}
		.app-card-actions {
			display: inline-block;
			width: 30px;
			height: 30px;
			text-align: center;
			border-radius: 50%;
			position: absolute;
			z-index: 10;
			right: 0.75rem;
			top: 0.75rem;

			&:hover {
				background: var(--bg-color);
			}
			.dropdown-menu {
				font-size: 1rem;
			}
		}
	}
}

.app-card-stat {
	text-align: center;

	.stats-type {
		font-size: 0.875rem;
		color: var(--theme-text-light);
		text-transform: uppercase;
	}
	.stats-figure {
		font-size: 2rem;
		color: var(--bs-body-color);
	}
	.stats-meta {
		font-size: 0.875rem;
		color: var(--theme-text-light);
	}

	@media (max-width: 575.98px) {
		.stats-figure {
			font-size: 1.125rem;
		}
		.stats-type {
			font-size: 0.75rem;
		}
	}
}

.app-card-progress-list {
	.item {
		position: relative;
		border-bottom: 1px solid var(--theme-border-color);

		&:hover .title {
			color: var(--bs-body-color);
		}
		&:last-child {
			border: none;
		}
		.title {
			font-size: 0.875rem;
			font-weight: 500;
		}
		.meta {
			font-size: 0.875rem;
			color: var(--theme-text-light);
		}
	}
	.item-link-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		display: block;
		left: 0;
		top: 0;
	}
	.progress {
		height: 0.5rem;
	}
}

.app-card-stats-table {
	.table {
		font-size: 0.875rem;
	}
	.meta {
		color: var(--theme-text-light);
		font-weight: 500;
		font-size: 0.875rem;
	}
	.stat-cell {
		text-align: right;
	}
}

.app-card-basic {
	height: 100%;
	.title {
		font-size: 1rem;
	}
}

.app-card-doc {
	&:hover {
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
	}
	.app-card-thumb-holder {
		background: #e9e4e4;
		text-align: center;
		position: relative;
		height: 112px;

		&:hover {
			background: var(--theme-bg-hover);
			.thumb-image {
				opacity: 1;
			}
		}
		.app-card-thumb {
			overflow: hidden;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: black;
		}
		.thumb-image {
			opacity: 0.7;
			width: 100%;
			height: auto;
		}
		.badge {
			position: absolute;
			right: 0.5rem;
			top: 0.5rem;
		}
		.icon-holder {
			font-size: 40px;
			display: inline-block;
			margin: 0 auto;
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background: #fff;
			padding-top: 10px;

			.pdf-file { color: #DA2D27; }
			.text-file { color: #66a0fd; }
			.excel-file { color: #0da95f; }
			.ppt-file { color: #f4b400; }
			.video-file { color: #d3c6df; }
			.zip-file { color: #252930; }
		}
	}
	.app-doc-title {
		font-size: 0.875rem;
		a {
			color: var(--bs-body-color);
		}
		&.truncate {
			max-width: calc(100% - 30px);
			display: inline-block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	.app-doc-meta {
		font-size: 0.75rem;
	}
}

.table-search-form :is(.form-control, input.etaInput, input.smallInput, input.qtInput) {
	height: 2rem;
	min-width: auto;

	@media (min-width: 1200px) {
		min-width: 300px;
	}
}

.app-dropdown-menu {
	font-size: 1rem;
}

.app-card-orders-table {
	.table {
		font-size: 1rem;
		.cell {
			border-color: var(--theme-border-color);
			color: var(--bs-secondary);
			vertical-align: middle;

			&.not-found {
				text-align: center;
				font-size: 20px;
				padding: 1em 0;
				background-color: #fff;
				box-shadow: none;
				font-style: italic;
			}
		}
	}
	.cell {
		span {
			display: inline-block;
		}
		.note {
			display: block;
			color: var(--theme-text-light);
			font-size: 0.75rem;
		}
	}
	:is(.btn-sm, .btn-group-sm > .btn) {
		padding: 0.125rem 0.5rem;
		font-size: 0.75rem;
	}
	.truncate {
		max-width: 250px;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.app-nav-tabs {
	padding: 0;

	.nav-link {
		color: var(--bs-secondary);
		font-size: 1.2rem;
		font-weight: bold;
		background: var(--bg-color);

		&.active {
			color: var(--primary-color);
			background: white;
		}
		&:hover {
			color: var(--primary-color);
		}
	}
}

.app-pagination .pagination {
	font-size: 0.875rem;

	.page-link {
		color: var(--bs-secondary);
		padding: 0.25rem 0.5rem;
	}
	.page-item {
		&.active .page-link {
			background: #717e8c;
			color: #fff;
			border-color: #717e8c;
			pointer-events: none;
		}
		&.disabled .page-link {
			color: #9ba5ae;
		}
	}
}

.app-card-accordion {
	.app-card-title {
		font-size: 1.125rem;
	}
	.faq-accordion {
		.accordion-item {
			border-radius: 0;
			border: none;
			border-bottom: 1px solid var(--theme-border-color);

			&:last-child {
				border-bottom: none;
			}
		}
		.accordion-header {
			border: none;
		}
		.accordion-button {
			padding: 1rem 0 1rem 0;
			border-radius: 0;
			border: none;
			box-shadow: none;
			background: none;
			font-size: 1rem;
			text-decoration: none;
			color: var(--primary-color);

			&::after {
				display: none;
			}
		}
		.accordion-body {
			padding: 0 0 0 0;
			padding-top: 0;
			font-size: 1rem;
		}
	}
}

.app-card-account {
	height: 100%;
	.item {
		font-size: 0.875rem;
		.profile-image {
			width: 60px;
			height: 60px;
		}
		:is(.btn-sm, .btn-group-sm > .btn) {
			padding: 0.125rem 0.5rem;
			font-size: 0.75rem;
		}
	}
}

.settings-section {
	.section-title {
		font-size: 1.25rem;
	}
	.section-intro {
		font-size: 0.875rem;
	}
}

.app-card-settings {
	font-size: 1rem;

	.form-label {
		font-weight: bold;
	}
	:is(.form-control, input.etaInput, input.smallInput, input.qtInput) {
		font-size: 1rem;
	}
}

.app-404-page {
	padding-top: 2rem;

	.page-title {
		font-size: 3rem;
		line-height: 0.8;
		font-weight: bold;

		span {
			font-size: 1.5rem;
		}
	}
}

.chart-container {
	position: relative;
}

.app-table-hover > tbody > tr:hover {
	background-color: var(--primary-color-selected) !important;
}

.app-card-notification {
	.notification-type .badge {
		font-size: 0.65rem;
		text-transform: uppercase;
	}
	.profile-image {
		width: 60px;
		height: 60px;
	}
	.notification-title {
		font-size: 1.125rem;
	}
	.notification-content {
		font-size: 0.875rem;
	}
	.notification-meta {
		font-size: 0.75rem;
		color: var(--theme-text-light);
	}
	.action-link {
		font-size: 0.875rem;
	}
	.app-card-footer {
		background: var(--theme-bg-hover);
	}
}

/* ==================== Auth ==================== */

.app-login .auth-background-holder {
	background: url("../images/background/background-1.jpg") no-repeat center center;
	background-size: cover;
	height: 100vh;
	min-height: 100%;
}

.app-signup .auth-background-holder {
	background: url("../images/background/background-2.jpg") no-repeat center center;
	background-size: cover;
	height: 100vh;
	min-height: 100%;
}

.app-reset-password .auth-background-holder {
	background: url("../images/background/background-3.jpg") no-repeat center center;
	background-size: cover;
	height: 100vh;
	min-height: 100%;
}

:is(.auth-main-col, .auth-background-col) {
	position: relative;
}

.auth-background-mask {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 10;
	background: rgba(0, 0, 0, 0.1);
}

.auth-background-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 11;

	.overlay-title {
		color: #fff;
		font-size: 1rem;
		font-weight: bold;
	}
	.overlay-content {
		background: rgba(33, 37, 41, 0.6);
		color: #fff;
		a {
			text-decoration: underline;
			color: #fff;
		}
	}
}

.app-auth-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;

	.copyright {
		font-size: 0.75rem;
	}
}

.app-auth-wrapper {
	background: white;
	height: 100vh;

	.app-auth-body {
		width: 360px;
	}
	.app-logo .logo-icon {
		width: 60px;
		height: 60px;
	}
	.auth-heading {
		font-size: 1.5rem;
	}
	.auth-heading-desc {
		font-weight: 500;
		font-size: 1.125rem;
	}
	:is(.form-control, input.etaInput, input.smallInput, input.qtInput)::placeholder {
		color: var(--theme-text-light);
	}
	.legal-note {
		font-size: 0.75rem;
	}
	.extra {
		font-size: 0.75rem;
		a {
			text-decoration: underline;
			color: var(--theme-text-light);
			&:hover {
				color: var(--bs-secondary);
			}
		}
	}
	.auth-option {
		font-size: 0.875rem;
	}

	@media (max-width: 767.98px) {
		.app-auth-body {
			width: 100%;
		}
	}
}

@media (max-width: 767.98px) {
	.auth-background-col {
		display: none;
	}
}

/* ==================== Custom ==================== */

:is(.fa-female, .color-female) {
	color: #f45c96;
}

:is(.fa-male, .color-male) {
	color: #2886d8;
}

.fa-stack .fa-heart {
	color: white;
	font-size: .5em;
	top: .2em;
}

.fa-child {
	font-size: 1.5em;
	bottom: 0;
}

.fa-weight-hanging {
	padding-right: .2em;
}

.visita {
	border: 1px solid var(--primary-color);
}

:is(.delete-visita, .right-content) {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.saving {
	background-image: repeating-linear-gradient(-45deg, #0000, #3333 1rem, #fff7 1rem, #ccc7 2rem);
	background-size: 200% 200%;
	animation: barberpole 4s linear infinite;
	pointer-events: none;
	cursor: default;
}

@keyframes barberpole {
	100% {
		background-position: 80% 100%;
	}
}

.small-cell {
	text-align: center;
	width: 4em;
}

.select2 {
	width: 100% !important;
}

.customer-type-select {
	label {
		opacity: .3;
		padding-top: .2rem;
		transition: all .1s linear;
		transform: scale(0.8);

		&:hover {
			transform: scale(1);
		}
	}
	input[type="radio"]:checked + label {
		opacity: 1;
		transform: scale(1);
	}
}

:is(input.etaInput, input.smallInput) {
	flex: 0 1 5rem !important;
	width: 5rem !important;
}

input.qtInput {
	flex: 0 1 8rem !important;
	width: 8rem !important;
}

.female-options {
	background: var(--bg-color);
	border: 1px dashed #f45c96;
}

.pasti {
	max-height: 70vh;
	overflow-y: scroll;
}

.clip-circle {
	clip-path: circle(50%);
}

.dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;

	:is(.dz-drop-title, .dz-clicker) {
		pointer-events: none;
		text-align: center;
		color: var(--bs-gray);
	}
	.dz-preview .dz-remove {
		position: absolute;
		top: -10px;
		right: -10px;
		z-index: 9999;
		background: #b7bec5;
		color: #fff;
		padding: 3px 10px;
		border-radius: 50%;
		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

		&:hover {
			background: var(--primary-color);
			color: #fff;
			text-decoration: none;
		}
	}
}

.escluso {
	opacity: .5;
}

.pasto-header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.macro {
		display: flex;
		gap: 15px;
		font-weight: 300;
		text-transform: none;
	}
}

.sortable-ghost {
	opacity: .3;
}

.sortable-selected {
	box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
}

*[data-draggable="true"] {
	cursor: ns-resize;
}

:is(.alimenti-draggable-list, .pasti-draggable-list) {
	:is(.input-group, .ig) {
		flex-direction: row;
		border-radius: 0.25rem;

		&.selected {
			box-shadow: 0 0 0 2px var(--primary-color-hover);
			background-color: var(--primary-color-selected);
		}
		> i {
			display: flex;
			justify-content: center;
			flex-direction: column;
			margin-right: 1em;
			padding: 5px;
			background-color: black;
			color: #fff;
			border-radius: 0.25rem 0 0 0.25rem;
			height: 100%;
		}
		> label {
			flex-grow: 2;
			display: flex;
			justify-content: flex-start;
			flex-direction: row;
			align-items: center;

			> input.form-control {
				border: 0;
				padding-left: 0;
			}
		}
		.fa-exclamation-triangle {
			color: var(--bs-danger);
			margin-right: .5em;
		}
	}
}

.pasti-draggable-list :is(.input-group, .ig) > i {
	margin-right: 0;
}

.ig {
	position: relative;
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	width: 100%;

	:is(.nome, .note) {
		align-items: center;
		flex-grow: 1 !important;
	}
	> :is(.form-control:focus, input.etaInput:focus, input.smallInput:focus, input.qtInput:focus, .form-select:focus) {
		z-index: 3;
	}
	&:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
	&:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3) {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	&.has-validation > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),
	&.has-validation > .dropdown-toggle:nth-last-child(n + 4) {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
		margin-left: -1px;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
}

.has-sostituti {
	background-color: var(--primary-color-active) !important;

	&::after {
		content: '';
		display: block;
		position: absolute;
		width: 6px;
		height: 6px;
		top: 4px;
		right: 4px;
		background: #fff;
		border-radius: 50%;
	}
}

.btn-primary {
	background-color: var(--primary-color);
	border-color: var(--primary-color);

	&:is(:hover, :focus) {
		background-color: var(--primary-color-hover);
		border-color: var(--primary-color-hover);
	}
	&:is(:active, .active) {
		background-color: var(--primary-color-hover);
		border-color: var(--primary-color-hover);
	}
	&:is(:disabled, .disabled) {
		background-color: var(--primary-color);
		border-color: var(--primary-color);
	}
}

/* stati indotti da un .btn-check adiacente o da un dropdown aperto:
   .btn-primary non è il selettore di testa, non nidificabile sotto & */
.btn-check:focus + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.show > .btn-primary.dropdown-toggle {
	background-color: var(--primary-color-hover);
	border-color: var(--primary-color-hover);
}

.btn-outline-primary {
	color: var(--primary-color);
	border-color: var(--primary-color);

	&:hover {
		background-color: var(--primary-color);
		border-color: var(--primary-color);
	}
	&:is(:active, .active) {
		background-color: var(--primary-color);
		border-color: var(--primary-color);
	}
	&:is(:disabled, .disabled) {
		color: var(--primary-color);
	}
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary.dropdown-toggle.show {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.offcanvas-title {
	font-size: 1.6em;
	color: var(--primary-color);
}

.offcanvas-body {
	flex-grow: 1;
	padding: .5rem 2rem 2rem;
}

.valori-alimento {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 15px;
	flex-grow: 1;

	> div {
		border: 2px solid #e9ecef;
		border-radius: 7px;
		padding: 10px;
		text-align: center;
		flex-grow: 1;
		color: #5cb377;

		&.valore-basso {
			color: #EEBF41;
		}
		&.valore-alto {
			color: #d26d69;
		}
	}
	strong {
		font-size: 1.4em;
	}
}

.offcanvas-body > .valori-alimento > div {
	background-color: #e9ecef;
	color: #5a6570;
}

.progress {
	position: relative;
	height: 2rem;

	.progressbar-percent {
		position: absolute;
		font-size: 1rem;
		padding-right: 0.5em;
		line-height: 2rem;
		text-align: right;
		width: 100%;
	}
}

.ck {
	:is(p, li, a) {
		font-size: 1.2rem;
	}
	li {
		margin-bottom: 1rem;
	}
}

.selection-bar {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1060;
	background: #fff;
	border-radius: 0.5rem;
	box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2);
	padding: 0.75rem 1.25rem;
	display: flex;
	align-items: center;
}

.sostituti .input-group {
	flex-wrap: wrap;
}

.input-group .btn {
	height: 100%;
}

/* ==================== Print ==================== */

.print-box {
	background: white;
	width: 190mm;
	height: 275mm;
	overflow: visible;
	color: black;
	border: 1px dashed red;
	margin: 0 auto;
	padding: 10mm;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	&.horizontal {
		width: 275mm;
		height: 190mm;
		page: wide; /* lega questo box alla pagina nominata "wide" */
	}

	.print-box-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	:is(small, .small) {
		font-size: 6pt;
		color: #343a40;
	}
	:is(h1, .h1, h2, .h2, h3, .h3, h5, .h5, h6, .h6, pre) {
		font-family: 'Arvo', serif;
	}
	:is(h5, .h5, h6, .h6) {
		text-transform: uppercase;
		margin: 0;
		padding: .5em 0;
	}
	:is(h5, .h5) {
		font-size: 9pt;
	}
	:is(h6, .h6) {
		border-top: 2px solid black;
		color: var(--accent-color);
		font-size: 7pt;
	}
	.print-intestazione {
		margin-bottom: 1em;
	}
	.print-giorno {
		flex-basis: calc(100% / var(--n-day) - 1em);
		width: calc(100% / var(--n-day) - 1em);
		padding: 0.5em;
		font-size: 7pt;
	}
	.print-pasto {
		margin-bottom: 1em;
	}
	.print-alimento {
		color: #343a40;

		.note {
			font-style: italic;
		}
		&.sostituto {
			display: block;
			color: #C1C6CA;
			line-height: 1.2em;
			font-style: italic;
		}
	}
	.diet-list-table .print-alimento {
		display: list-item;
		margin-left: 10px;
	}
	:is(table, td, tr) {
		border: 1px dashed black;
		color: black;
		padding: .5rem;
	}
	:is(table, td, tr) ul {
		margin-bottom: 0;
	}

	&.diet-list {
		justify-content: flex-start;
		height: auto;
		min-height: 275mm;

		:is(h6, .h6) {
			border: 0;
			text-align: center;
			font-size: 10pt;
			color: var(--bs-body-color);
		}
		.print-giorno {
			flex-basis: auto;
			width: 100%;
			font-size: 8pt;

			h2 {
				margin: 2.5em;
			}
		}
		.print-pasto {
			border-bottom: 1px solid #e6e6e6;
			padding-bottom: 1em;
		}
		.diet-list-table {
			width: 100%;
			border-collapse: collapse;

			td {
				border: none;
				padding: 0;
			}
		}
		:is(.print-giorno, .print-pasto) {
			break-inside: avoid;
		}
	}
}

.print-tools {
	padding-left: 2rem;
}

:is(.print-footer, .print-intestazione) {
	font-size: 7pt !important;
}

/* il cambio di `page` forza un salto pagina prima dell'elemento che lo dichiara:
   deve stare sul body (assegnato via JS, non raggiungibile dal template Vue montato su #app)
   altrimenti Chrome inserisce una pagina vuota prima del contenuto in landscape */
body.horizontal {
	page: wide;
}

@page {
	size: A4;
	margin: 10mm;
}

@page wide {
	size: A4 landscape;
	margin: 10mm;
}

@media print {
	body {
		background: white;
	}
	.print-box {
		border: none;
		:is(table, td, tr) {
			border: 0;
		}
	}
	.no-print {
		display: none;
	}
	.app {
		padding: 0;
		margin: 0;
	}

	/* fixed elements repeat at the same physical spot on every printed page in Chrome;
	   less reliable on Firefox/Safari, dove potrebbe comparire solo sulla prima pagina */
	.print-box.diet-list .print-footer {
		position: fixed;
		left: 10mm;
		right: 10mm;
		bottom: 0;
	}
}