// Questo file fa parte di MyTown.
// MyTown è software libero: puoi ridistribuirlo e/o modificarlo secondo
// i termini della GNU Affero General Public License come pubblicata dalla
// Free Software Foundation, versione 3.
// Distribuito senza ALCUNA GARANZIA; vedi la GNU AGPL v3 per i dettagli.
// Copyright (C) Kondor Consulting & Services S.r.l.
// SPDX-License-Identifier: AGPL-3.0-or-later

.sf-wrap {
	padding: 12px 12px 120px;
}

.sf-statusbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 4px 10px;
	.sf-rfi {
		font-size: 12px;
		color: var(--ion-color-medium);
	}
}

.sf-card {
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	margin-bottom: 12px;
	box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.2);
}

.sf-card-title {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 800;
	color: var(--ion-color-dark);
}

.sf-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	.sf-card-title {
		margin: 0;
	}
}

.sf-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 12px;
	label {
		font-size: 12px;
		font-weight: 600;
		color: var(--ion-color-medium);
	}
}

.sf-input {
	width: 100%;
	border: 1px solid var(--ion-color-light-shade, #e0e0e0);
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 14px;
	background: #fff;
	color: var(--ion-color-dark);
	outline: none;
	&:focus {
		border-color: var(--ion-color-primary);
	}
	&:disabled {
		background: var(--ion-color-light, #f4f5f8);
		color: var(--ion-color-medium);
	}
}

.sf-select {
	border: 1px solid var(--ion-color-light-shade, #e0e0e0);
	border-radius: 10px;
	--padding-start: 12px;
	--padding-end: 12px;
}

.sf-dt {
	align-self: flex-start;
}

.sf-mini-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: none;
	background: var(--ion-color-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	cursor: pointer;
	&:disabled {
		opacity: 0.6;
	}
}

.sf-hint {
	font-size: 13px;
	color: var(--ion-color-medium);
	padding: 4px 0;
}

.sf-hint-warn {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	color: var(--ion-color-warning-shade, #b88300);
	ion-icon {
		font-size: 16px;
	}
}

/* pulsante che apre il modale lavagna (come il vecchio RFI) */
.sf-lavagna-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	border: 1px solid var(--ion-color-light-shade, #e0e0e0);
	background: var(--ion-color-light, #f8f9fb);
	border-radius: 12px;
	padding: 12px 14px;
	cursor: pointer;
	text-align: left;

	&.is-filled {
		border-color: var(--ion-color-primary);
		background: var(--ion-color-primary-tint, #eef4ff);
	}
	&:active {
		transform: scale(0.99);
	}

	.sf-lavagna-ic {
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--ion-color-primary);
		ion-icon {
			font-size: 20px;
			color: #fff;
		}
	}

	.sf-lavagna-text {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		.sf-lavagna-title {
			font-size: 14px;
			font-weight: 700;
			color: var(--ion-color-dark);
		}
		.sf-lavagna-sub {
			font-size: 12px;
			color: var(--ion-color-medium);
		}
	}

	.sf-lavagna-arrow {
		font-size: 18px;
		color: var(--ion-color-medium);
		flex-shrink: 0;
	}
}

.sf-file {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 4px;
	border-top: 1px solid var(--ion-color-light, #f0f0f0);
	cursor: pointer;
	.sf-file-ic {
		font-size: 22px;
		color: var(--ion-color-primary);
	}
	.sf-file-info {
		flex: 1;
		min-width: 0;
		.nm {
			font-size: 14px;
			color: var(--ion-color-dark);
		}
	}
	.sf-file-dl {
		font-size: 18px;
		color: var(--ion-color-medium);
	}
}

.sf-flow-hint {
	margin: -4px 0 10px;
	font-size: 12.5px;
	color: var(--ion-color-medium);
}

.sf-flow {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;

	.flow-btn {
		flex: 1 1 0;
		min-width: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		white-space: nowrap;
		border: none;
		border-radius: 999px;
		padding: 9px 8px;
		font-size: 12px;
		font-weight: 700;
		cursor: pointer;
		color: #fff;

		ion-icon {
			font-size: 14px;
			flex-shrink: 0;
		}

		&.ok {
			background: var(--ion-color-primary);
		}
		&.ko {
			background: var(--ion-color-danger);
		}
		/* "Riapri" = azione di ripristino: rosso ma in stile outline per distinguerla da Annulla */
		&.reopen {
			background: #fff;
			color: var(--ion-color-danger);
			border: 1.5px solid var(--ion-color-danger);
		}
		&:active {
			opacity: 0.8;
		}
	}
}

.sf-actionbar {
	position: sticky;
	bottom: 0;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 30%);

	.ab-btn {
		width: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		border: none;
		border-radius: 14px;
		padding: 13px;
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;

		&.primary {
			background: var(--ion-color-primary);
			color: #fff;
		}
		&:disabled {
			opacity: 0.6;
		}
	}
}
