﻿:root {
	--green: #5f710d;
	--security: #336699;
	--industrial: #66cccc;
	--pharmaceutical: #66cccc;
	--induction: #ff8000;
	--groundsearch: #5d874d;
	--healthcare: #66cccc;
	--anticollision: #993333;
}

/* FORM STYLES*/
.form-control {
	border: 1px solid #dddfe2;
	font-size: 17px;
	border-radius: 6px;
	outline: none !important;
	padding: 1rem;
}

	.form-control:focus {
		border-color: var(--section-color);
		caret-color: var(--section-color);
	}

	.form-control:user-invalid {
		border: 1px solid red
	}

@media (max-width: 832px) {
	.form-control {
		font-size: 14px;
	}
}

/* Product Table Styles */

.CSSTableGenerator {
	margin: 0px;
	padding: 0px;
	width: 100%;
	border: 1px solid var(--section-color, #5f710d);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

	.CSSTableGenerator table {
		border-collapse: collapse;
		border-spacing: 0;
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
	}

	.CSSTableGenerator tr:last-child td:last-child {
		border-bottom-right-radius: 10px;
	}

	.CSSTableGenerator tr:last-child td:first-child {
		border-bottom-left-radius: 10px;
	}

	.CSSTableGenerator table tr:first-child td:first-child {
		border-top-left-radius: 10px;
	}

	.CSSTableGenerator table > tr:first-child td:last-child {
		border-top-right-radius: 10px;
	}


	.CSSTableGenerator td {
		vertical-align: middle;
		border: 1px solid var(--section-color, #5f710d);
		border-width: 0px 1px 1px 0px;
		text-align: left;
		padding: 10px;
		font-size: 1rem;
		font-weight: normal;
	}

	.CSSTableGenerator tr:last-child td {
		border-width: 0px 1px 0px 0px;
	}

	.CSSTableGenerator tr td:last-child {
		border-width: 0px 0px 1px 0px;
	}

	.CSSTableGenerator tr:last-child td:last-child {
		border-width: 0px 0px 0px 0px;
	}

	.CSSTableGenerator tr:first-child td {
		border: none;
		background-color: var(--sfondo-grigio);
		color: var(--sfondo-nero) !important;
		text-align: center;
		border-width: 0px 0px 1px 1px;
		font-weight: bold;
		color: #ffffff;
	}


/* Accordions */
.accordion-container {
	display: flex;
	flex-direction: column;
}

	.accordion-container > .accordion-element:not(:last-of-type) .accordion-title {
		border-bottom: none;
	}

	.accordion-container > .accordion-element:first-child .accordion-title {
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
	}

.accordion-title {
	font-weight: bold;
	background-color: transparent;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: all 0.4s;
	border: 1px solid black;
}

	.accordion-title.active, .accordion-title:hover {
		background-color: var(--section-color);
	}

.accordion-panel {
	display: none;
	padding: 1rem;
	border: 1px solid black;
	border-top: none;
	background-color: white;
	overflow: hidden;
	transition: height 0.5s;
}

	.accordion-panel.open {
		display: block;
	}

/* CEIA Sticky Table - Responsive*/
/* Begin */

/* === Wrapper generale === */
.table-wrap {
	max-width: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--section-color-dark);
	border-radius: 0.7rem;
	background: #fff;
	box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
}

/* === Base table styling === */
.table {
	width: 100%;
	border-collapse: collapse;
	min-width: 600px;
	table-layout: fixed;
	font-family: system-ui, sans-serif;
	font-size: 0.95rem;
	color: var(--section-color);
	border-radius: 0.7rem;
	overflow: hidden;
}

	.table th,
	.table td {
		padding: 0.7rem 0.8rem;
		text-align: left;
		vertical-align: middle;
		white-space: normal; /* testo va a capo */
		word-wrap: break-word;
		word-break: break-word;
		border-bottom: 1px solid var(--section-color);
		border-right: 1px solid var(--section-color); /* <<< bordo verticale interno standard */
		transition: background-color 0.25s ease-in-out;
	}

		/* Rimuove bordo destro sull’ultima colonna */
		.table th:last-child,
		.table td:last-child {
			border-right: none;
		}

	/* Header */
	.table th {
		font-weight: normal;
		background: var(--section-color);
		color: #fff;
		border-bottom: 1px solid var(--section-color-dark); /* bordo sotto header */
		border-right: 1px solid var(--section-color-dark); /* bordo verticale header scuro */
	}

		/* Prima colonna */
		.table td:first-child,
		.table th:first-child {
			border-right: 1px solid var(--section-color-dark); /* bordo verticale scuro */
		}

	/* Alternanza righe */
	.table tbody tr:nth-child(even) {
		background: var(--section-color-light);
	}

	.table tbody tr:nth-child(odd) {
		background: #fff;
	}

	/* Hover */
	.table tbody tr:hover {
		background-color: rgba(255, 255, 150, 0.3);
		transition: background-color 0.25s ease-in-out;
	}

/* Sticky Header */
.sticky-header thead th {
	position: sticky;
	top: 0;
	background: var(--section-color);
	color: #fff;
	z-index: 5;
	box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.16);
}

/* === Caption elegante sopra la tabella === */
.table-caption {
	font-family: system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	text-align: center;
	color: var(--section-color-dark);
	background: var(--section-color-light);
	border: 1px solid var(--section-color-dark);
	border-bottom: none;
	border-radius: 0.7rem 0.7rem 0 0;
	padding: 0.6rem 1rem;
	box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.05);
}

/* === Gestione immagini nelle celle === */
.table td img {
	max-width: 200px; /* la larghezza massima */
	width: 100%; /* adatta proporzionalmente dentro la cella */
	height: auto; /* mantiene il rapporto d’aspetto */
	display: block;
	margin: 0.3rem auto;
	border-radius: 0.4rem;
}

/* Centra testo e immagini nelle celle con immagini */
.table td[colspan],
.table td[rowspan] {
	text-align: center;
	vertical-align: middle;
}

/* === Sticky Left Column con bordi orizzontali visibili === */
.sticky-left th:first-child,
.sticky-left td:first-child {
	position: sticky;
	left: 0;
	background: var(--section-color);
	color: #fff;
	z-index: 4;
	/* Bordi coerenti e visibili */
	border-right: 1px solid var(--section-color-dark); /* bordo verticale scuro */
	border-top: 1px solid var(--section-color-dark); /* bordo superiore come il resto */
	border-bottom: 1px solid var(--section-color-dark); /* bordo inferiore come il resto */
	box-shadow: none;
}

/* Header: prima cella sticky */
.sticky-header.sticky-left thead th:first-child {
	position: sticky;
	left: 0;
	top: 0;
	background: var(--section-color);
	color: #fff;
	z-index: 6;
	border-right: 1px solid var(--section-color-dark);
	border-top: none; /* evita doppio bordo con il bordo superiore della tabella */
	border-bottom: 1px solid var(--section-color-dark); /* bordo orizzontale sotto header */
}

/* Rimuove eventuali ombre che possono coprire i bordi */
.sticky-left th:first-child,
.sticky-left td:first-child {
	box-shadow: none;
}

/* Sticky Header + Left Column combinata */
.sticky-header.sticky-left thead th:first-child {
	z-index: 6;
}

/* === Responsive "Stacked" (mobile) === */
@media (max-width: 640px) {
	.responsive-stack thead {
		display: none;
	}

	.responsive-stack,
	.responsive-stack tbody,
	.responsive-stack tr,
	.responsive-stack td {
		display: block;
		width: 100%;
		text-align: left;
	}

		.responsive-stack tr {
			margin-bottom: 0.75rem;
			border: 1px solid var(--section-color-dark);
			border-radius: 0.7rem;
			padding: 0.5rem;
			box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.32);
		}

		.responsive-stack td {
			display: flex;
			justify-content: flex-start;
			padding: 0.4rem;
			color: var(--section-color);
			border-bottom: 1px solid var(--section-color);
			white-space: normal;
			word-wrap: break-word;
			word-break: break-word;
		}

			.responsive-stack td:last-child {
				border-bottom: none;
			}

			.responsive-stack td:before {
				content: attr(data-label);
				font-weight: 600;
				margin-right: 0.5rem;
				color: var(--section-color);
				flex-shrink: 0;
			}

	/* In mobile, mantieni proporzioni e wrap */
	@media (max-width: 640px) {
		.responsive-stack td img {
			max-width: 80%;
			height: auto;
			margin: 0.5rem auto;
		}
	}
}

/* End */
