.result {
	margin: 62px 120px;

	@media (max-height: 980px) {
		margin: 42px 120px;
	}

	.rectangle-content {
		gap: 16px;
		position: relative;

		h2 {
			font-weight: 700;
		}

		.name-part {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: end;
			background-color: var(--header-background);
			border-radius: 8px;


			.buttons {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin-top: 12px;
				margin-right: 8px;
				gap: 12px;
				z-index: 99;

				.options {
					align-self: flex-end;
					display: flex;
					justify-content: center;
					border-radius: var(--general-border-radius);
					border: var(--general-border);
					background-color: var(--secondary-button);
					color: var(--text-color);
					text-decoration: none;
					align-items: center;
					gap: 6px;
					font-size: var(--text-small);
					padding: 6px 12px;
					max-width: 80px;
					margin-bottom: 12px;
					cursor: pointer;
				}

			}

		}

		.names {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-top: -58px;
			margin-bottom: 16px;

			.name {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 22px;
				margin-left: 16px;
	
				p {
					margin-right: 8px;
				}
	
				#edit-icon:hover {
					cursor: pointer;
				}
	
				.active-icon {
					color: var(--progress-ongoing-color); 
				}
			}
		}


		.edit-name-form {
			display: flex;
			flex-direction: column;
			align-items: center;

			p {
				margin-bottom: 8px;
			}

			input {
				border-radius: var(--general-border-radius);
				border: var(--general-border);
				padding: 8px;
			}

			button {
				background-color: var(--primary-button);
				color: white;
				padding: 10px;
				border: none;
				border-radius: var(--general-border-radius);
				cursor: pointer;

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

		.stats-part {

			.informations {
				gap: 8px;
				display: flex;
				flex-direction: row;
				margin-bottom: 32px;
				justify-content: space-between;

				h2 {
					margin-bottom: 8px;
				}

				p {
					margin-left: 8px;
				}

				.buttons {
					display: flex;
					flex-direction: row;
					gap: 12px;
					align-items: center;
					

					.options {
						align-self: flex-end;
						display: flex;
						justify-content: center;
						border-radius: var(--general-border-radius);
						border: var(--general-border);
						background-color: var(--secondary-button);
						color: var(--text-color);
						text-decoration: none;
						align-items: center;
						gap: 6px;
						font-size: var(--text-small);
						padding: 6px 12px;
						margin-bottom: 12px;
					}
				}
			}
			

			.model_accuracy {
				display: flex;
				flex-direction: column;
				gap: 8px;

				p {
					margin-left: 8px;
				}

				.accuracy {
					margin-top: 16px;
				}
	
				h3 {
					margin-top: 12px;
				}
			}

			

			
		}

		.log-part {
			position: relative;
			display: flex;
			flex-direction: column;

			.button-title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				h2 {
					width: auto;
				}

				.btn-log {
					align-self: flex-end;
					display: flex;
					justify-content: center;
					border-radius: var(--general-border-radius);
					border: var(--general-border);
					background-color: var(--secondary-button);
					color: var(--text-color);
					text-decoration: none;
					align-items: center;
					gap: 6px;
					font-size: var(--text-small);
					padding: 6px 12px;
					margin-bottom: 12px;
				}
			}


			.expand-btn {
				position: absolute; 
				top: 15%;
				right: 1%;
				display: flex;
				cursor: pointer;
				align-self: flex-end;
				justify-content: center;
				border-radius: var(--general-border-radius);
				border: var(--general-border);
				background-color: var(--secondary-button);
				color: var(--text-color);
				text-decoration: none;
				align-items: center;
				gap: 6px;
				font-size: var(--text-small);
				padding: 6px 12px;
				max-width: 80px;
				margin-bottom: 12px;
			}

			.fullscreen-logs {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.8);
				z-index: 1000;
				justify-content: center;
				align-items: center;
			
				.close-btn {
					position: fixed;
					top: 60px;
					right: 140px;
					background: red;
					color: white;
					border: none;
					padding: 8px 12px;
					cursor: pointer;
					font-size: 18px;
					border-radius: 5px;
					z-index: 1100;
				}
			
				.fullscreen-content {
					background: white;
					width: 80%;
					height: 80%;
					padding: 20px;
					overflow: auto;
					position: relative;
					border-radius: 10px;
				}
			}

			.logs {
				border-radius: var(--inside-block-radius);
			}
		}
	}
}

.buttons-left {
    display: flex;
    gap: 10px;
    align-items: center;
}

.favorite-detail-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1px solid #e0e0e0;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

.favorite-star-detail {
    fill: none;
}

.favorite-star-detail.favorited {
    fill: #e4c200;
    stroke: #e4c200;
}

.chart-container {
    position: relative;
    height: 4rem;
    margin: 20px 0;
    width: 100%; 
    max-width: 100%; 
    overflow: hidden;
}

.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
}

.chart-legend {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    font-size: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.chart-legend-item {
    display: flex;
    align-items: center;
}

.chart-legend-color {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 2px;
}

.chart-legend-color.configuration {
    background-color: #4CAF50;
}

.chart-legend-color.datas {
    background-color: #2196F3;
}

.chart-legend-color.unused {
    background-color: #949494;
}

.chart-legend-text {
    color: #333;
    font-weight: normal;
}

.chart-legend-value {
    font-weight: bold;
    color: #000;
}

@media (max-width: 768px) {
    .chart-container {
        height: 4rem;
        margin: 15px 0;
    }
    
    .chart-legend {
        flex-direction: column;
        gap: 10px;
        font-size: 13px;
    }
    
    .chart-legend-color {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    .chart-container {
        height: 4rem;
        margin: 10px 0;
    }
    
    .chart-legend {
        font-size: 12px;
        gap: 8px;
    }
    
    .chart-legend-color {
        width: 12px;
        height: 12px;
    }
}