/* fonts  */

@font-face {
	font-family: 'Gabarito';
	src: url('../fonts/gabarito/Gabarito-Bold.woff2') format('woff2'),
		url('../fonts/gabarito/Gabarito-Bold.woff2') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Gabarito';
	src: url('../fonts/gabarito/Gabarito-Regular.woff2') format('woff2'),
		url('../fonts/gabarito/Gabarito-Regular.woff2') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Gabarito';
	src: url('../fonts/gabarito/Gabarito[wght].woff2') format('woff2'),
		url('../fonts/gabarito/Gabarito[wght].woff2') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}



/* color palette */
:root{
	/* --primary: #1E88E5; */
	/* --primary: #01853a; */
	--primary: #00d182;
	--primary-light: #c4e9c2;
	--primary-dark: #009e61;
	/* --secondary: #831bd8; */
	--secondary: #009e61;
	--error-light: #ffacac;
	/* --secondary-dark: #A00037; */
	--accent: #47e6a9; /* Giallo */

	/* --background: #F5F5F5; */
	--background: #1D242F;
	/* --surface: #FFFFFF; */
	--surface: #11151C;
	--surface-alt: #161C27;

	--text-main: #080808;
	--text-secondary: #757575; /* Grigio */
	--text-muted: #BDBDBD; /* Grigio chiaro */
	--text-primary: #fdfdfd;
	--text-secondary: #fff;

	/* --success: #4CAF50; */
	--success: #23ab28;
	--error: #E53935; /* Rosso */
	--warning: #FF9800; /* Arancione */
	--info: #2196F3; /* Azzurro */

	--good-number: #c4e9c2;
	--bad-number: #ffacac;
	--sale-symbol: #044704;
	--purchase-symbol: #a1001e;

	--border: #E0E0E0;
	--border-light: #F0F0F0;
	--shadow: rgba(0, 0, 0, 0.1);

	--input-bd-radius: 0.5rem;

	--app-font: 'Gabarito', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--input-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}



html{
	font-size: 16px;
}
body{

	background: var(--background);
	font-family: var(--app-font);
	margin: unset;
	accent-color: var(--accent);
	color: var(--text-main);
}
#app{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

::selection{
	background: var(--secondary);
	color: var(--text-secondary);
}

*,
*::before,
*::after{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

img,
picture,
svg,
canvas{
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}
fieldset{
	border: 0.0625rem solid transparent;
	padding: 0;
	display:grid;
	gap: var(--pad);
}
fieldset legend{
	/* color: var(--primary); */
	font-weight: bold;
	font-size: 1.667rem;
	letter-spacing: 0.03125rem;
	padding-bottom: var(--pad);
}


a{
	color: var(--primary);
	text-decoration: none;
	&:hover,
	&:active{
		text-decoration: underline;
	}
}


:root{
	--input-col: #000;
	--input-bd-col: #0f0f0f;
	--pad-s: 0.25rem;
	--pad: 0.5rem;
	--pad-xl: 1rem;
	--pad-xxl: 1.5rem;


}




form [name="hon"]{
	position: fixed;
	width: 1px;
	height: 1px;
	left: 0px;
	top: 0px;
	overflow: hidden;
	contain: strict;
	opacity: 0.01;
}


button,
.button,
input[type="file"]::-webkit-file-upload-button{
	line-height: 1;
	letter-spacing: 0.03125rem;
	font-size: 1.1rem;
	white-space: nowrap;
	text-align: center;
	text-transform: uppercase;
	font-family: var(--app-font);
	text-overflow: ellipsis;
	padding: var(--pad) var(--pad-xl);
	/* background-color: var(--primary-light); */
	background: transparent;
	/* color: var(--surface); */
	color: var(--primary-light);
	/* border: 0.1rem solid var(--input-bd-col); */
	border: 3px solid currentColor;
	align-content: center;
	height: 3rem;
	border-radius: 1.5rem;
	/* border-radius: var(--pad-s); */
	cursor: pointer;
	user-select: none;
	overflow: hidden;
	contain: layout style paint;
}
button.large,
.button.large,
input[type="file"].large::-webkit-file-upload-button{
	width: 100%;
}
button[disabled],
.button[disabled],
input[type="file"][disabled]::-webkit-file-upload-button{
	cursor: default;
}
button:focus:not(:active),
.button:focus:not(:active),
input[type="file"]:focus:not(:active)::-webkit-file-upload-button{
	outline: 0.0625rem dotted var(--primary);
}
button.primary,
.button.primary,
input[type="file"].primary::-webkit-file-upload-button{
	background-image: linear-gradient( in oklch 135deg,var(--primary) 50%, var(--secondary) );
	color: var(--text-primary);
	border: 0;
	/* border-bottom:  solid var(--primary-dark); */
	box-shadow: inset 0 0 0.1875rem rgba(0,0,0,0.1);
	text-shadow: 0 0.0625rem 0.125rem var(--surface-alt);
	letter-spacing: 0.0625rem;
}
button.primary:active::before,
.button.primary:active::before,
input[type="file"].primary:active::before::-webkit-file-upload-button{
	opacity: 0;
}
button.primary:not([disabled]),
.button.primary:not([disabled]),
input[type="file"].primary::-webkit-file-upload-button:not([disabled]){
	background-color: var(--primary);
}
button:active:not([disabled]),
.button:active:not([disabled]),
input[type="file"]:active::-webkit-file-upload-button:not([disabled]){
	transform: translateY(0.0625rem);
}
button.primary:not([disabled]):active,
.button.primary:not([disabled]):active,
input[type="file"].primary:not([disabled]):active::-webkit-file-upload-button{
	transform: translateY(0.125rem);
	border-bottom: 0.0625rem solid var(--primary-dark);
}
button[disabled].primary,
.button[disabled].primary,
input[type="file"][disabled].primary::-webkit-file-upload-button{
	background:var(--primary-dark);
	color: var(--text-secondary);
	box-shadow: none;
}

	

.iconButton{
	--size: 2rem;
	width: var(--size);
	height: var(--size);
	border-radius: calc( var(--size) / 2 );
	background: var(--primary-light);
	color: var(--surface-alt);
	font-size: calc(var(--size) * 0.667);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
	user-select: none;
	cursor: pointer;
}


/* input */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
	-webkit-box-shadow: 0 0 0 2rem var(--accent) inset;
}
input[type="text"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="file"],
select,
textarea{
	display: block;
	font-family: var(--input-font);
	font-size: 1rem;
	padding: var(--pad) var(--pad-xl);
	background: var(--surface-alt);
	color: var(--text-primary);
	border-radius: var(--input-bd-radius);
	border: 0.15rem solid var(--text-muted);
	min-height: 2.625rem;
	transition: 0.5s border-color ease;
	&::placeholder{
		transition: 0.125s opacity ease;
	}
	&:focus{
		outline: none;
		border-color: var(--primary);
		&::placeholder{
			opacity: 0;
		}
	}
	&::placeholder{
		color: var(--text-primary);
		opacity: 0.5;
		transition: 0.125s opacity ease;
	}
}

input[type="file"]{
	padding-top:0;
	padding-bottom: 0;
	padding-left: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
input[type="file"]::-webkit-file-upload-button{
	color: var(--text-primary);
	background-image: linear-gradient( in oklch 135deg,var(--primary) 50%, var(--secondary) );
	border-radius: var(--input-bd-radius) 0 0 var(--input-bd-radius);
	vertical-align: middle;
}

/* input label */
label{
	display: inline-grid;
	padding: 0.25rem 0;
	transition: 0.125s opacity ease;
}
label.large{
	width: 100%;
}
label:has(input[type="text"]),
label:has(input[type="number"]),
label:has(input[type="search"]),
label:has(input[type="password"]),
label:has(input[type="email"]),
label:has(input[type="tel"]),
label:has(input[type="date"]),
label:has(input[type="datetime-local"]),
label:has(input[type="month"]),
label:has(input[type="week"]),
label:has(input[type="time"]),
label:has(input[type="file"]),
label:has(textarea){
	cursor: text;
}
label:has(input[type="checkbox"]):not([disabled]),
label:has(input[type="radio"]):not([disabled]),
label:has(input[type="file"]):not([disabled]){
	cursor: pointer;
}
/* text label */
label>.label{
	display: inline-block;
	user-select:none;
	margin-left: 1rem;
	transition: 0.125s color ease;
}
label:focus-within>.label{
	color: var(--primary);
}
/* disabled */
label:has(input[disabled]){
	opacity: 0.5;
	cursor: default
}


input[type="checkbox"],
input[type="radio"]{
	width: 1.25rem;
	height: 1.25rem;
	display: inline-block;

}
label:has([type="checkbox"]),
label:has([type="radio"]){
	grid-template-columns: max-content 1fr;
	column-gap: 0.5rem;
	align-items: center;
	padding-left: 0;
	label:has([type="radio"])>.label{
		padding-left: 0;
	}
}
input[type="checkbox"]{
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	background: transparent;
	border: 0.15rem solid var(--text-muted);
	border-radius: 0.333rem;
}
input[type="checkbox"]::after{
	content: "\2714";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.9rem;
	color: transparent;
	transition: 0.125s color var(--ease-overshoot);
	cursor: pointer;
}
input[type="checkbox"]:checked{
	border-color: var(--accent);
}
input[type="checkbox"]:checked::after{
	color: var(--accent);
}



select{
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: 1.5rem;
}
select:focus{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300d182'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}


.inputPwdShow{
	display: block;
	position: absolute;
	right: 0.667rem;
	top: 1.667rem;
	width: 1.667rem;
	height: 1.667rem;
	user-select: none;
	cursor: pointer;
	overflow: hidden;
	contain: strict;
}
.inputPwdShow::after{
	font-family: "remixicon";
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 1.5rem;
	line-height: 1.667rem;
}
input[type="password"] + .inputPwdShow::after{
	content: "\ecb4";
}
input[type="text"] + .inputPwdShow::after{
	content: "\ecb2";
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
	background: transparent;
}
input[type="date"]::after,
input[type="datetime-local"]::after,
input[type="time"]::after{
	font-family: "remixicon";
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    display: block;
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 1.33rem;
    height: 1.33rem;
	font-size: 1.33rem;
    user-select: none;
    cursor: pointer;
    overflow: hidden;
    contain: strict;
}
input[type="date"]::after{
	content: "\eb27";
}
input[type="datetime-local"]::after{
	content: "\f3f3";
}
input[type="time"]::after{
	content: "\f20e";
}

input[type="date"][disabled]::after,
input[type="datetime-local"][disabled]::after{
	content: "";
}



.global_disabled::after{
	filter: brightness(0.5);
	pointer-events: none !important;
}