[onclick] {
	cursor: pointer;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	display: flex;
	flex-direction: column;
	height: 100vh;
}

header {
	background-color: #fff;
	color: #000;
	padding: 10px;
	margin: 0px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	z-index: 1000;
	gap: 20px;

	h1 {
		margin: 0;
		flex-shrink: 0;
	}

	select {
		padding: 8px 31px 8px 12px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 14px;
		transition: border-color 0.2s;
		background-color: #fff;
		cursor: pointer;
		flex-shrink: 0;

		&:focus {
			border-color: #4a90e2;
			outline: none;
			box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
		}
	}

	/* Styles spécifiques pour le nav dans le header */

	.header-hide {
		display: none;
	}

	nav {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
		padding: 0;
		background: none;
		border-radius: 0;
		box-shadow: none;
		max-width: none;
		width: auto;

		/* .mail-status-ok {
			color: #28a745;
		} */

		.mail-status-ko {
			background-color: #c5303058 !important;
		}

		ul {
			list-style: none;
			display: flex;
			flex-direction: row;
			gap: 5px;
			align-items: center;
			flex-wrap: wrap;
			justify-content: center;
			padding: 0px;
			margin: 0px;

			li {
				position: relative;
				margin: 0;

				ul {
					position: absolute;
					top: 100%;
					left: 0;
					background-color: #fff;
					border: 1px solid #ddd;
					border-radius: 4px;
					box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
					padding: 8px 0;
					margin: 0;
					min-width: 150px;
					z-index: 1001;
					display: none;
					flex-direction: column;
					gap: 0;

					li {
						margin: 0;
						padding: 0;

						a,
						span {
							padding: 8px 15px;
							margin: 0;
							border-radius: 0;
							box-shadow: none;
							font-size: 14px;
							width: 100%;

							&:hover {
								background-color: #f5f5f5;
								transform: none;
								box-shadow: none;
							}
						}
					}
				}

				&:hover>ul {
					display: flex;
					align-items: stretch;
				}

				a,
				span {
					display: inline-block;
					padding: 8px 12px;
					background-color: transparent;
					border: 1px solid transparent;
					border-radius: 4px;
					color: #333;
					text-decoration: none;
					transition: all 0.2s;
					font-size: 14px;
					white-space: nowrap;
				}

				a:hover {
					background-color: #f5f5f5;
					border-color: #ddd;
					transform: none;
					box-shadow: none;
				}
			}
		}
	}

	.new-project-button {
		background-color: #4a90e2;
		color: white;
		padding: 10px 20px;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.2s, color 0.2s;
		margin-left: auto;
		display: block;
		text-decoration: none;

		&:hover {
			background-color: #357abd;
		}

		&:active {
			background-color: #2d6da3;
		}
	}

	/* Responsive pour le header */
	@media (max-width: 768px) {
		flex-direction: column;
		gap: 10px;
		padding: 15px 10px;

		h1 {
			order: 1;
		}

		nav {
			order: 2;
			width: 100%;

			ul {
				justify-content: center;
				flex-wrap: wrap;
				gap: 3px;

				li {
					a {
						padding: 6px 8px;
						font-size: 13px;
					}

					ul {
						position: fixed;
						top: auto;
						left: 50%;
						transform: translateX(-50%);
						width: 90vw;
						max-width: 300px;
					}
				}
			}
		}

		select {
			order: 3;
		}
	}
}


main {
	padding: 10px;
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	justify-content: flex-start;

	section {
		max-width: 100%;

		form {
			padding: 20px;
			background-color: #f5f5f5;
			border-radius: 8px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

			display: flex;
			flex-direction: column;
			gap: 15px;

			.alert {
				padding: 12px 20px;
				margin-bottom: 20px;
				border-radius: 4px;
				font-size: 14px;
				width: 100%;
			}

			.alert-danger {
				background-color: #fde8e8;
				color: #c53030;
				border: 1px solid #feb2b2;
			}

			.form-group {
				display: flex;
				flex-direction: row;
				gap: 15px;
				align-items: baseline;
				justify-content: flex-start;
				width: 100%;
				/* margin-bottom: 15px; */
				flex-wrap: wrap;

				>*:not(label) {
					flex: 1;
					flex-basis: 200px;
					align-items: stretch;
				}

				input[type="text"],
				input[type="password"],
				input[type="email"],
				input[type="number"],
				input[type="date"],
				input[type="datetime-local"],
				input[list] {
					padding: 8px 12px;
					border: 1px solid #ddd;
					border-radius: 4px;
					font-size: 14px;
					transition: border-color 0.2s;

					&:focus {
						border-color: #4a90e2;
						outline: none;
						box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
					}
				}

				input[type="checkbox"] {
					width: 18px;
					height: 18px;
					accent-color: #4a90e2;
				}

				input[type="file"] {
					display: none;
				}

				.custom-file-label {
					display: inline-block;
					padding: 8px 12px;
					border: 1px solid #ddd;
					border-radius: 4px;
					font-size: 14px;
					background-color: #fff;
					cursor: pointer;
					transition: border-color 0.2s;
				}

				.custom-file-label:hover,
				.custom-file-label:focus {
					border-color: #4a90e2;
					box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
				}

				label:has(> *) {
					display: flex;
					flex-direction: row;
					gap: 10px;
					align-items: center;
					justify-content: center;
					width: 100px;
					flex: 1;
					font-weight: 500;
					color: #333;
					flex-wrap: wrap;

					>* {
						flex: 1;
					}
				}

				select {
					padding: 8px 12px;
					border: 1px solid #ddd;
					border-radius: 4px;
					font-size: 14px;
					transition: border-color 0.2s;
					background-color: #fff;
					cursor: pointer;
				}

				select:focus {
					border-color: #4a90e2;
					outline: none;
					box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
				}
			}
		}

		input[type="submit"],
		button {
			background-color: #4a90e2;
			color: white;
			padding: 10px 20px;
			border: none;
			border-radius: 4px;
			font-size: 16px;
			cursor: pointer;
			transition: background-color 0.2s, color 0.2s;
			margin-left: auto;
			display: block;

			&:hover {
				background-color: #357abd;
			}

			&:active {
				background-color: #2d6da3;
			}
		}

		button[value="validate"],
		button[value="validate_without_mail"],
		button[value="accept_for_client"],
		button[value="accept_for_client_without_mail"] {
			background-color: #28a745;

			&:hover {
				background-color: #218838;
			}

			&:active {
				background-color: #1e7e34;
			}
		}

		button[value="delete"],
		button[value="delete_tri"],
		button[value="refuse"],
		button[value="refuse_for_client"] {
			background-color: #c53030;

			&:hover {
				background-color: #a32d2d;
			}

			&:active {
				background-color: #832323;
			}
		}

		button.retour {
			background-color: #f8f9fa;
			border: 1px solid #e9ecef;
			border-radius: 4px;
			padding: 8px 16px;
			margin-left: 0;
			display: flex;
			align-items: center;
			gap: 10px;
			color: #333;
			font-size: 16px;
			font-weight: 500;
			transition: all 0.2s;
			cursor: pointer;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

			img {
				width: 16px;
				height: 16px;
			}

			&:hover {
				color: #4a90e2;
				background-color: #fff;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
			}

			&:active {
				color: #357abd;
				background-color: #f8f9fa;
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			}
		}

		.table-container {
			overflow-x: auto;
			overflow-y: auto;
			display: block;
			margin: 20px 0px;
			box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			/* max-height: calc(100vh - 57px - 21px); */
			max-height: calc(100vh - 57px - 183px);

			table {
				border-collapse: collapse;
				background-color: #fff;
				box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
				border-radius: 4px;
				max-height: 100%;
				overflow-y: auto;
				min-width: 100%;

				th,
				td {
					padding: 12px 15px;
					text-align: left;
					border-bottom: 1px solid #ddd;
					min-width: max-content;
				}

				thead {
					position: sticky;
					top: 0;
					z-index: 10;
					background-color: #f8f9fa;
				}

				th {
					background-color: #f8f9fa;
					font-weight: 500;
					color: #333;
				}

				tr:hover {
					background-color: #f5f5f5;

					td:first-child {
						background-color: #f5f5f5;
					}
				}

				tr:last-child td {
					border-bottom: none;
				}

				td:first-child,
				th:first-child {
					position: sticky;
					left: 0;
					z-index: 2;
					text-align: right;
				}

				td:first-child {
					background-color: #f8f9fa;
				}


				a {
					color: #4a90e2;
					text-decoration: none;
					transition: color 0.2s;

					&:hover {
						color: #357abd;
					}
				}

				button {
					background-color: #f8f9fa;
					border: 1px solid #e9ecef;
					border-radius: 4px;
					padding: 2px 8px;
					margin: 0;
					color: #333;
					font-size: 13px;
					font-weight: 500;
					transition: all 0.2s;
					cursor: pointer;
					box-shadow: none;
					display: inline-block;
					text-align: center;
					min-width: 40px;
					line-height: 1;

					&:hover {
						background-color: #fff;
						border-color: #4a90e2;
						color: #4a90e2;
					}

					&:active {
						background-color: #f8f9fa;
						border-color: #357abd;
						color: #357abd;
					}
				}


			}

			.bat-history {
				tr:not(:first-child) {
					color: darkgray;
				}
			}
		}

		nav {
			display: flex;
			flex-direction: column;
			gap: 20px;
			width: 100%;
			max-width: 600px;
			margin: 0 auto;
			padding: 20px;
			background-color: #f8f9fa;
			border-radius: 8px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

			ul {
				list-style: none;
				padding: 0;
				margin: 0;
				display: flex;
				flex-direction: column;
				gap: 10px;

				li {
					ul {
						margin-left: 20px;
						margin-top: 10px;
					}

					a {
						display: block;
						padding: 12px 15px;
						background-color: #fff;
						border-radius: 4px;
						color: #333;
						text-decoration: none;
						transition: all 0.2s;
						box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

						&:hover {
							background-color: #f5f5f5;
							transform: translateY(-2px);
							box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
						}
					}
				}
			}
		}

		.bat-details {
			display: flex;
			flex-direction: row;
			gap: 20px;
			flex-wrap: wrap;
			flex-grow: 1;
			flex-shrink: 1;
			flex-basis: min-content;
			justify-content: center;


			.bat-info {
				background: #f5f5f5;
				border-radius: 8px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				padding: 24px 20px;
				min-width: 280px;
				max-width: 420px;
				flex: 0 1 420px;
				display: flex;
				flex-direction: column;
				gap: 18px;
				align-items: stretch;

				.form-group-buttons {
					display: flex;
					flex-direction: row;
					gap: 10px;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					flex-grow: 1;
					flex-shrink: 1;
					flex-basis: max-content;
					width: 100%;
				}

				form {
					background: #fff;
					border-radius: 6px;
					box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
					padding: 18px 14px 12px 14px;
					margin: 0 0 10px 0;
					display: flex;
					flex-direction: column;
					gap: 12px;
					border: 1px solid #e9ecef;

					.form-group {
						margin-bottom: 0;
						gap: 10px;
						align-items: center;
					}

					button {
						margin: 0px;
					}
				}
			}

			.bat-visualisation {
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: 0;
				width: 100%;
				height: 100vh;
				max-height: calc(100vh - 57px - 74px - 71px);
				display: flex;
				align-items: stretch;
				justify-content: center;
				background: #fff;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				border-radius: 8px;
				overflow: hidden;
				min-height: 400px;
				max-width: 100%;
				min-width: 300px;
			}

			.bat-visualisation iframe {
				width: 100%;
				height: 100%;
				border: none;
				display: block;
			}
		}

		.client-access {
			/* background: #f5f5f5;
			border-radius: 8px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			padding: 24px 20px;
			min-width: 280px;
			max-width: 420px; */
			flex: 0 1 420px;
			display: flex;
			flex-direction: column;
			gap: 18px;
			align-items: stretch;

			.form-group-buttons {
				display: flex;
				flex-direction: row;
				gap: 10px;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: max-content;
				width: 100%;
			}

			form {
				background: #fff;
				border-radius: 6px;
				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
				padding: 18px 14px 12px 14px;
				margin: 0 0 10px 0;
				display: flex;
				flex-direction: column;
				gap: 12px;
				border: 1px solid #e9ecef;

				.form-group {
					margin-bottom: 0;
					gap: 10px;
					align-items: center;
				}

				button {
					margin: 0px;
				}
			}
		}
	}

	section:has(.bat-details) {
		width: 100%;
	}
}

footer {
	background-color: #fff;
	color: #000;
	padding: 5px;
	font-size: 10px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: flex-end;
	z-index: 1000;

	>* {
		flex: 1;
	}

	p {
		margin: 0px;
		text-align: center;

		a {
			text-decoration: none;
			color: unset;
		}
	}
}

.mail-issue {
	border: 3px solid #c53030;
	border-radius: 4px;
	padding: 10px;
	margin-bottom: 10px;
	background-color: #c5303020;
	font-weight: bold;
	text-align: center;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 8px 12px;
	font-size: 14px;
	background: #fff url('data:image/svg+xml;utf8,<svg fill="gray" height="24" viewBox="0 0 20 20" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.293 7.293a1 1 0 011.414 0L10 8.586l1.293-1.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 010-1.414z"/></svg>') no-repeat right 12px center/24px 24px;
	cursor: pointer;
}

select:focus {
	border-color: #4a90e2;
	outline: none;
	box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.reverse {
	flex-direction: row-reverse !important;
}

/* Style des statuts */
.statut_-3 {
	background-color: #a9a9a9;
	color: #ffffff;
}

.statut_-2 {
	background-color: #ffcdd2;
	color: #ff0019;
}

.statut_-1 {
	background-color: #ffebee;
	color: #ff0026;
}

.statut_null,
.statut_ {
	background-color: #ffffff;
}

.statut_0 {
	background-color: #fff9c4;
	color: #acaf00;
}

.statut_1 {
	background-color: #ffe0b2;
	color: #c27502;
}

.statut_2 {
	background-color: #c8e6c9;
	color: #00ac06;
}

/* Style des tri */
.ordering-container {
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 20px;
}

.ordering-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.ordering-header h3 {
	margin: 0;
	color: #495057;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 15px;
}

/* .btn-apply {
	background: #007bff;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	transition: background-color 0.2s;
}

.btn-apply:hover {
	background: #0056b3;
} */

.btn-reset {
	background: #6c757d;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	transition: background-color 0.2s;
}

.btn-reset:hover {
	background: #5a6268;
}

/* Responsive pour l'en-tête */
@media (max-width: 768px) {
	.ordering-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.header-actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		width: 100%;
	}
}

.ordering-items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	min-height: 50px;
}

.ordering-item {
	background: white;
	border: 2px solid #e9ecef;
	border-radius: 6px;
	padding: 8px 12px;
	cursor: move;
	display: flex;
	align-items: center;
	gap: 8px;
	user-select: none;
	position: relative;
	min-width: 150px;
	transition: all 0.2s ease;
}

.ordering-item:hover {
	border-color: #007bff;
	box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}

.ordering-item.dragging {
	opacity: 0.5;
	transform: rotate(5deg);
	z-index: 1000;
}

.ordering-item.active {
	border-color: #28a745;
	background: #f8fff9;
	box-shadow: 0 2px 4px rgba(40, 167, 69, 0.1);
}

.drag-handle {
	color: #6c757d;
	font-size: 12px;
	cursor: move;
	user-select: none;
}

.field-name {
	flex: 1;
	font-size: 14px;
	color: #495057;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.direction-indicator {
	font-size: 12px;
	color: #007bff;
	font-weight: bold;
	cursor: pointer;
	transition: color 0.2s;
	min-width: 12px;
	text-align: center;
}

.direction-indicator:hover {
	color: #0056b3;
}

.sub-items-indicator {
	font-size: 12px;
	color: #6c757d;
	cursor: help;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.sub-items-indicator:hover {
	opacity: 1;
}

.sub-items {
	position: absolute;
	top: 100%;
	left: 0;
	background: white;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	min-width: 200px;
	display: none;
	margin-top: 2px;
}

.ordering-item:hover .sub-items {
	display: block;
}

.sub-items-container {
	position: absolute;
	top: 100%;
	left: 0;
	background: white;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 1000;
	min-width: 250px;
	display: none;
	margin-top: 5px;
	padding: 10px;
}

.ordering-item:hover .sub-items-container {
	display: block;
}

.sub-items-header {
	font-size: 12px;
	font-weight: 600;
	color: #495057;
	margin-bottom: 8px;
	padding-bottom: 5px;
	border-bottom: 1px solid #e9ecef;
}

.sub-items-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sub-item {
	padding: 6px 12px;
	cursor: move;
	font-size: 12px;
	border: 1px solid #e9ecef;
	border-radius: 4px;
	background: #f8f9fa;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
	user-select: none;
}

.sub-item:hover {
	background: #e9ecef;
	border-color: #007bff;
}

.sub-item.dragging {
	opacity: 0.5;
	transform: rotate(2deg);
	z-index: 1001;
}

.sub-item.selected {
	background: #007bff;
	color: white;
	border-color: #007bff;
}

.sub-drag-handle {
	color: #6c757d;
	font-size: 10px;
	cursor: move;
	user-select: none;
	flex-shrink: 0;
}

.sub-item-text {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sub-item:last-child {
	border-bottom: none;
}

.sort-priority {
	background: #007bff;
	color: white;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: bold;
	flex-shrink: 0;
}

/* Animation pour les changements d'ordre */
.ordering-item {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
	.ordering-items {
		flex-direction: column;
	}

	.ordering-item {
		min-width: auto;
		width: 100%;
	}
}

.upload-container {
	margin: 20px 0;
}

.upload-message {
	padding: 15px;
	margin: 20px 0;
	border-radius: 6px;
	font-weight: bold;
}

.upload-message.success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.upload-message.error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.upload-zone {
	border: 2px dashed #ccc;
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	background: #f9f9f9;
	transition: all 0.3s ease;
	cursor: pointer;
	margin-bottom: 20px;
}

.upload-zone.dragover {
	border-color: #007bff;
	background: #e3f2fd;
}

.upload-content {
	max-width: 400px;
	margin: 0 auto;
}

.upload-icon {
	font-size: 32px;
	margin-bottom: 10px;
}

.upload-info {
	font-size: 14px;
	color: #666;
	margin-top: 15px;
	line-height: 1.4;
}



.upload-progress {
	margin-top: 20px;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
}

.upload-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	margin: 5px 0;
	background: white;
	border-radius: 4px;
	border-left: 4px solid #ccc;
}

.upload-item.success {
	border-left-color: #28a745;
}

.upload-item.error {
	border-left-color: #dc3545;
}

.upload-item.uploading {
	border-left-color: #007bff;
}



.upload-item-info {
	flex: 1;
}

.upload-item-name {
	font-weight: bold;
	margin-bottom: 2px;
}

.upload-item-size {
	font-size: 12px;
	color: #666;
}

.upload-item-status {
	font-size: 14px;
	margin-left: 10px;
}

.upload-item.success .upload-item-status {
	color: #28a745;
}

.upload-item.error .upload-item-status {
	color: #dc3545;
}

.upload-item.uploading .upload-item-status {
	color: #007bff;
}

/* Styles pour les fichiers avec commentaires */
.file-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-bottom: 15px;
	background-color: #f9f9f9;
}

.file-item-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.file-item-name {
	font-weight: bold;
	color: #333;
}

.file-item-size {
	color: #666;
	font-size: 0.9em;
}

.file-item-comment {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.file-item-comment label {
	font-weight: bold;
	color: #333;
	font-size: 0.9em;
}

.file-comment {
	width: 100%;
	min-height: 60px;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	resize: vertical;
	font-family: inherit;
	font-size: 14px;
}

.file-comment:focus {
	outline: none;
	border-color: #4a90e2;
	box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.upload-button-container {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #ddd;
}

.upload-all-btn {
	background-color: #28a745;
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.2s;
}

.upload-all-btn:hover {
	background-color: #218838;
}

.upload-all-btn:active {
	background-color: #1e7e34;
}

.upload-all-btn:disabled {
	background-color: #6c757d;
	cursor: not-allowed;
}