/* Side dish detail view */

@layer components {
	/* ─── Two-panel layout overrides ─── */
	/* recipe-layout, recipe-panels, recipe-chat-panel, recipe-doc-panel are from meals.css.
	   Only side-dish-specific overrides live here. */

	.side-dish-doc-panel {
		overflow-y: auto;
		padding: 0;
		gap: 0;
	}

	.side-dish-doc-header {
		flex-shrink: 0;
		background: var(--color-bg-surface);
		border-block-end: 1px solid var(--color-border-default);
		padding-inline: var(--space-6);
		padding-block-start: var(--space-4);

		@media (width < 768px) {
			padding-inline: var(--space-4);
			padding-block-start: var(--space-3);
		}

		.recipe-doc-title {
			margin: 0 0 var(--space-3);
			font-size: var(--font-size-display);
			font-weight: var(--font-weight-semibold);
		}

		/* Tab bar sits flush inside the header — no extra bottom margin */
		.tab-bar {
			margin-block-end: 0;
			border-block-end: none;
		}
	}

	.side-dish-doc-body {
		flex: 1;
		overflow-y: visible;
		padding: var(--space-6);
		display: flex;
		flex-direction: column;
		gap: var(--space-6);
		min-height: 0;

		@media (width < 768px) {
			padding: var(--space-4);
			gap: var(--space-5);
		}
	}

	/* Visible bottom border at rest signals the title is editable */
	side-dish-detail-view .recipe-doc-title[contenteditable] {
		border-block-end: 1px solid var(--color-border-subtle);
		cursor: text;
		outline: none;

		&:focus {
			border-block-end-color: var(--color-accent-primary);
		}
	}

	/* ─── Cover section (meta + compact image side-by-side) ─── */

	.side-dish-cover-section {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.side-dish-cover-row {
		align-items: flex-start;

		@media (width < 768px) {
			flex-direction: row;
		}
	}

	.side-dish-cover-compact {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: var(--space-2);
	}

	.side-dish-cover-img {
		display: block;
		width: 120px;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		border: 1px solid var(--color-border-default);
	}

	.side-dish-cover-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 120px;
		aspect-ratio: 1 / 1;
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-default);
		color: var(--color-text-muted);
		font-size: var(--font-size-xs);
		text-align: center;
		padding: var(--space-2);
	}

	/* ─── Meta form items (servings, prep/cook time, tags) ─── */

	.side-dish-meta-item {
		display: flex;
		align-items: baseline;
		gap: var(--space-2);
		padding-block: var(--space-1);
	}

	.side-dish-cover-prompt {
		flex: 1;
		min-width: 0;
		min-height: var(--space-8);
		padding: var(--space-1) var(--space-2);
		border: 1px solid var(--color-border-default);
		background: var(--color-bg-surface);
		font-family: var(--font-body);
		font-size: var(--font-size-sm);
		line-height: var(--line-height-relaxed);
		color: var(--color-text-primary);
		resize: none;
		field-sizing: content;

		&:focus {
			outline: none;
			border-color: var(--color-accent-primary);
			box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 12%, transparent);
		}

		&::placeholder {
			color: var(--color-text-muted);
			font-style: italic;
		}
	}

	/* ─── Meta inputs ─── */

	.side-dish-meta {
		flex: 1;
		min-width: 0;

		& > * {
			flex-direction: column;
		}
	}

	.side-dish-meta-input {
		width: var(--space-10);
		font-size: var(--font-size-sm);
		color: var(--color-text-primary);
		background: transparent;
		border: none;
		border-block-end: 1px solid var(--color-border-subtle);
		padding: 0;
		font-family: var(--font-body);
		line-height: var(--line-height-normal);

		&:focus {
			outline: none;
			border-block-end-color: var(--color-accent-primary);
		}

		&::-webkit-inner-spin-button,
		&::-webkit-outer-spin-button {
			opacity: 0.5;
		}
	}

	.side-dish-tags-input {
		font-size: var(--font-size-sm);
		color: var(--color-text-primary);
		background: transparent;
		border: none;
		border-block-end: 1px solid var(--color-border-subtle);
		padding: 0;
		font-family: var(--font-body);
		line-height: var(--line-height-normal);
		width: 100%;

		&:focus {
			outline: none;
			border-block-end-color: var(--color-accent-primary);
		}

		&::placeholder {
			color: var(--color-text-muted);
			font-style: italic;
		}
	}

	.side-dish-source-row {
		display: flex;
		align-items: baseline;
		gap: var(--space-2);
	}

	.side-dish-source-input {
		flex: 1;
		font-size: var(--font-size-sm);
		color: var(--color-text-primary);
		background: transparent;
		border: none;
		border-block-end: 1px solid var(--color-border-subtle);
		padding: 0;
		font-family: var(--font-body);
		line-height: var(--line-height-normal);

		&:focus {
			outline: none;
			border-block-end-color: var(--color-accent-primary);
		}

		&::placeholder {
			color: var(--color-text-muted);
			font-style: italic;
		}
	}

	/* ─── Content edit mode ─── */

	.side-dish-edit-add-btn {
		margin-block-start: var(--space-3);
	}

	.side-dish-detail-edit-mode {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
		--control-height-btn: var(--control-height-input);
	}

	.side-dish-ingredient-edit-table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--font-size-sm);

		th {
			text-align: start;
			font-size: var(--font-size-xs);
			font-weight: var(--font-weight-medium);
			color: var(--color-text-muted);
			text-transform: uppercase;
			letter-spacing: var(--letter-spacing-wide);
			padding-block-end: var(--space-2);
			padding-inline-end: var(--space-2);
			white-space: nowrap;
		}

		td {
			padding-block-end: var(--space-2);
			padding-inline-end: var(--space-2);
			vertical-align: middle;

			&:last-child {
				padding-inline-end: 0;
			}

			input {
				width: 100%;
				background: transparent;
				border: none;
				border-block-end: 1px solid var(--color-border-subtle);
				padding: var(--space-1) 0;
				font-family: var(--font-body);
				font-size: var(--font-size-sm);
				color: var(--color-text-primary);

				&:focus {
					outline: none;
					border-block-end-color: var(--color-accent-primary);
				}

				&::placeholder {
					color: var(--color-text-muted);
				}
			}

			/* Column widths */
			&:nth-child(1) {
				width: 90px;
			} /* category */
			&:nth-child(2) {
				width: 56px;
			} /* amount */
			&:nth-child(3) {
				width: 64px;
			} /* unit */
			/* nth-child(4) = name — fills remaining space, no width constraint needed */
			&:nth-child(5) {
				width: 110px;
			} /* preparation */
			&:nth-child(6) {
				width: 28px;
			} /* remove button */
		}
	}

	.side-dish-step-edit-row {
		display: flex;
		gap: var(--space-2);
		align-items: flex-start;
		padding-block-end: var(--space-3);
		border-block-end: 1px solid var(--color-border-subtle);
	}

	.side-dish-step-number {
		font-family: var(--font-display);
		font-size: var(--font-size-lg);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-muted);
		line-height: var(--line-height-normal);
		min-width: var(--space-6);
		text-align: end;
		flex-shrink: 0;
		padding-block-start: var(--space-1);
	}

	.side-dish-step-textarea {
		flex: 1;
		min-height: 60px;
		padding: var(--space-2) var(--space-3);
		border: 1px solid var(--color-border-default);
		background: var(--color-bg-surface);
		font-family: var(--font-body);
		font-size: var(--font-size-sm);
		line-height: var(--line-height-relaxed);
		color: var(--color-text-primary);
		resize: vertical;
		field-sizing: content;

		&:focus {
			outline: none;
			border-color: var(--color-accent-primary);
			box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-primary) 12%, transparent);
		}

		&::placeholder {
			color: var(--color-text-muted);
			font-style: italic;
		}
	}

	.side-dish-step-edit-actions {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		flex-shrink: 0;
	}

	.side-dish-detail-edit-footer {
		display: flex;
		gap: var(--space-3);
		justify-content: flex-end;
	}

	/* ─── Usage list ─── */

	.side-dish-usage-date {
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
	}

	/* ─── Delete zone ─── */

	.side-dish-detail-delete-zone {
		display: flex;
		justify-content: flex-end;
		padding-block-start: var(--space-6);
		border-block-start: 1px solid var(--color-border-subtle);
	}
}