/**
 * Minimal editor styles - basic structure only
 * Let the theme handle colors, fonts, and decorative elements
 */

.one-more-bite-editor {
	border-radius: 8px;
	padding: 1rem;
	
	.components-card {
		border: none;
		box-shadow: none;
	}

	.recipe-name-input {
		margin-bottom: 1rem;
		
		input {
			font-size: 1.5rem;
			font-weight: 600;
			border: 1px solid #000;
			border-radius: 4px;
			padding: 0.75rem;
			width: 100%;
			color: #000;
			
			&:focus {
				outline: 2px solid #000;
				outline-offset: 2px;
			}
		}
	}

	.recipe-image-preview {
		margin-bottom: 1rem;
		
		img {
			max-width: 200px;
			height: 120px;
			object-fit: cover;
			border-radius: 4px;
			border: 1px solid #000;
		}
	}

	.recipe-meta {
		.recipe-times {
			display: flex;
			gap: 1rem;
			margin: 1rem 0;
			flex-wrap: wrap;
			
			> div {
				padding: 0.5rem;
				border: 1px solid #000;
				border-radius: 4px;
				font-size: 0.875rem;
				min-width: 120px;
				color: #000;
				background: #f5f5f5;
			}
		}
	}

	.recipe-section {
		margin: 2rem 0;
		
		h3 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 1rem;
			padding-bottom: 0.5rem;
			border-bottom: 2px solid #000;
			color: #000;
			
			.components-button {
				/* Smaller buttons in editor */
				padding: 0.25rem 0.5rem;
				font-size: 0.75rem;
				height: auto;
				min-height: auto;
			}
		}
	}

	.ingredients-list,
	.instructions-list {
		.ingredient-item,
		.instruction-item {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			padding: 1rem;
			border: 1px solid #000;
			border-radius: 4px;
			margin-bottom: 0.5rem;
			background: white;
			
			&:hover {
				background: #f5f5f5;
			}
			
			.components-button {
				/* Smaller buttons in ingredient/instruction items */
				padding: 0.25rem;
				min-width: auto;
				height: auto;
				min-height: auto;
				font-size: 0.75rem;
			}

			.ingredient-name {
				flex: 2;
			}

			.ingredient-amount {
				flex: 0.5;
			}

			.ingredient-unit {
				flex: 0.8;
			}

			input, select, textarea {
				border: 1px solid #000;
				border-radius: 4px;
				padding: 0.5rem;
				background: white;
				color: #000;
				font-size: 0.85rem;
				
				&:focus {
					outline: 1px solid #000;
				}
			}
		}

		.instruction-item {
			.instruction-number {
				width: 2rem;
				height: 2rem;
				border: 2px solid #000;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 600;
				flex-shrink: 0;
				color: #000;
			}

			.instruction-content {
				flex: 1;
				
				.instruction-text {
					min-height: 50px;
					border: 1px solid #000;
					border-radius: 4px;
					padding: 0.5rem;
					color: #000;
					font-size: 0.85rem;
					
					&:focus-within {
						outline: 1px solid #000;
					}
				}
			}
		}
	}

	.nutrition-preview {
		border: 1px solid #000;
		padding: 1rem;
		border-radius: 4px;
		margin: 2rem 0;
		background: #f5f5f5;
		
		h3 {
			margin-top: 0;
			margin-bottom: 1rem;
			color: #000;
		}

		.nutrition-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
			gap: 0.5rem;
			
			> div {
				padding: 0.5rem;
				background: white;
				border-radius: 4px;
				text-align: center;
				font-size: 0.875rem;
				color: #000;
			}
		}
	}
}

/* Sidebar panel styles - minimal */
.components-panel__body {
	.schema-items {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin: 1rem 0;

		.schema-tag {
			padding: 0.25rem 0.5rem;
			border: 1px solid #000;
			background: white;
			color: #000;
			border-radius: 12px;
			font-size: 0.75rem;
			font-weight: 500;
			display: inline-block;
		}
	}
	
	/* Smaller buttons in inspector controls */
	.components-button {
		&.is-secondary,
		&.is-primary {
			padding: 0.25rem 0.5rem;
			font-size: 0.8rem;
			height: auto;
			min-height: auto;
		}
	}
}

/* Responsive adjustments for editor */
@media (max-width: 768px) {
	.one-more-bite-editor {
		.ingredients-list,
		.instructions-list {
			.ingredient-item,
			.instruction-item {
				flex-direction: column;
				align-items: stretch;
				
				> * {
					flex: none !important;
					margin-bottom: 0.5rem;
				}
			}
		}

		.recipe-meta .recipe-times {
			flex-direction: column;
			gap: 0.5rem;

			> div {
				min-width: auto;
			}
		}

		.nutrition-preview .nutrition-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}