/* Side dishes library view */

@layer components {
	/* ─── Meals section navigation (shared across recipe archive, side dishes, pantry) ─── */

	.meals-section-nav {
		position: sticky;
		top: 0;
		z-index: var(--z-sticky);
		display: flex;
		align-items: stretch;
		background: var(--color-bg-surface);
		border-block-end: 1px solid var(--color-border-default);
		padding-inline: var(--space-3);

		@media (width < 768px) {
			padding-inline: var(--space-1);
		}
	}

	.meals-section-nav-link {
		display: flex;
		align-items: center;
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-muted);
		text-decoration: none;
		padding: var(--space-3) var(--space-4);
		transition: color var(--transition-fast);

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

		&:focus-visible {
			outline: 2px solid var(--color-accent-primary);
			outline-offset: -2px;
		}

		&.meals-section-nav-link--active {
			color: var(--color-text-primary);
			font-weight: var(--font-weight-semibold);
		}

		@media (width < 768px) {
			font-size: var(--font-size-xs);
			padding-inline: var(--space-3);
		}
	}

	/* ─── Create form ─── */

	.side-dish-create-form {
		display: flex;
		flex-direction: column;
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-default);
		padding: var(--space-4);
		margin-block-end: var(--space-6);
		--control-height-btn: var(--control-height-input);
	}

	.side-dish-create-row {
		display: flex;
		gap: var(--space-3);
		align-items: flex-end;
		margin-block-end: var(--space-3);

		.form-field:first-child {
			flex: 1;
		}

		.form-field:last-of-type {
			flex: 1;
		}

		.side-dish-servings-field {
			width: 80px;
			flex-shrink: 0;
		}

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

			.side-dish-servings-field {
				width: 100%;
			}
		}
	}

	.side-dish-create-submit {
		margin-inline-start: auto;
	}

	/* Empty-shell signal — colored-text status label (muted) */
	.side-dish-empty-badge {
		font-weight: var(--font-weight-bold);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		color: var(--color-text-muted);
	}
}