/* Tasting notes form components and tasting history view */

@layer components {
	/* Quantity Selector */
	.quantity-selector {
		display: flex;
		gap: var(--space-2);
		margin-top: var(--space-2);
	}

	.quantity-btn {
		flex: 1;
		padding: var(--space-2) var(--space-3);
		background: var(--color-bg-surface);
		border: 1.5px solid var(--color-cream-darker);
		border-radius: var(--radius-sm);
		cursor: pointer;
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast),
			color var(--transition-fast);

		&:hover {
			border-color: var(--color-copper);
			background: var(--color-cream-light);
		}

		&.active {
			background: var(--color-copper);
			color: white;
			border-color: var(--color-copper-dark);
		}
	}

	.quantity-custom-input {
		margin-top: var(--space-2);
	}

	/* Tasting Rating Selector */
	.tasting-rating-selector {
		margin-bottom: var(--space-3);
	}

	.tasting-rating-label {
		display: block;
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-secondary);
		margin-bottom: var(--space-2);
	}

	/* Value Rating Selector (Stars) */
	.value-rating-selector {
		margin-bottom: var(--space-4);
	}

	.value-rating-label {
		display: block;
		margin-bottom: var(--space-2);
		font-weight: var(--font-weight-medium);
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
	}

	.value-rating-stars {
		display: flex;
		gap: var(--space-1);
		align-items: center;
	}

	.value-rating-star {
		font-size: var(--font-size-2xl);
		cursor: pointer;
		color: var(--color-border-default);
		transition: color var(--transition-fast);
		user-select: none;

		&.filled {
			color: var(--color-rating-star);
		}

		&:hover {
			color: var(--color-rating-star-hover);
		}
	}

	.tasting-rating-buttons {
		display: flex;
		gap: var(--space-1);
	}

	.tasting-rating-btn {
		flex: 1;
		padding: var(--space-1) var(--space-2);
		background: var(--color-bg-surface);
		border: 1.5px solid var(--color-border-default);
		border-radius: var(--radius-sm);
		cursor: pointer;
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-medium);
		text-align: center;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast),
			color var(--transition-fast);
		color: var(--color-text-primary);

		&.bad {
			&:hover {
				background: var(--color-rating-bad-bg);
				border-color: var(--color-rating-bad);
				color: var(--color-rating-bad);
			}

			&.selected {
				background: var(--color-rating-bad);
				color: white;
				border-color: var(--color-rating-bad-dark);
			}
		}

		&.ok {
			&:hover {
				background: var(--color-rating-ok-bg);
				border-color: var(--color-rating-ok);
				color: var(--color-rating-ok-dark);
			}

			&.selected {
				background: var(--color-rating-ok);
				color: white;
				border-color: var(--color-rating-ok-dark);
			}
		}

		&.good {
			&:hover {
				background: var(--color-rating-good-bg);
				border-color: var(--color-rating-good);
				color: var(--color-rating-good-dark);
			}

			&.selected {
				background: var(--color-rating-good);
				color: white;
				border-color: var(--color-rating-good-dark);
			}
		}

		&.very_good {
			&:hover {
				background: var(--color-rating-very-good-bg);
				border-color: var(--color-rating-very-good);
				color: var(--color-rating-very-good-dark);
			}

			&.selected {
				background: var(--color-rating-very-good);
				color: white;
				border-color: var(--color-rating-very-good-dark);
			}
		}

		&.excellent {
			&:hover {
				background: var(--color-rating-excellent-bg);
				border-color: var(--color-rating-excellent);
				color: var(--color-rating-excellent-dark);
			}

			&.selected {
				background: var(--color-rating-excellent);
				color: white;
				border-color: var(--color-rating-excellent-dark);
			}
		}

		&.spectacular {
			&:hover {
				background: var(--color-rating-spectacular-bg);
				border-color: var(--color-rating-spectacular);
				color: var(--color-rating-spectacular-dark);
			}

			&.selected {
				background: linear-gradient(135deg, var(--color-rating-ok), var(--color-rating-spectacular-dark));
				color: white;
				border-color: var(--color-rating-spectacular-dark);
			}
		}
	}

	.tasting-quick-section {
		margin-top: var(--space-4);
		padding-top: var(--space-4);
		border-top: 1px solid var(--color-border-default);

		h3 {
			font-family: var(--font-display);
			font-size: var(--font-size-md);
			font-weight: var(--font-weight-semibold);
			color: var(--color-slate);
			letter-spacing: var(--letter-spacing-normal);
			margin: 0 0 var(--space-3) 0;
		}
	}

	.tasting-expand-btn {
		width: 100%;
		padding: var(--space-2) var(--space-3);
		margin-top: var(--space-3);
		background: var(--color-cream-light);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-sm);
		cursor: pointer;
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-secondary);
		transition:
			border-color var(--transition-fast),
			color var(--transition-fast),
			background-color var(--transition-fast);

		&:hover {
			border-color: var(--color-copper);
			color: var(--color-copper);
			background: var(--color-cream);
		}
	}

	.tasting-detailed-section {
		margin-top: var(--space-3);

		h3 {
			font-family: var(--font-body);
			font-size: var(--font-size-base);
			font-weight: var(--font-weight-semibold);
			color: var(--color-text-primary);
			margin: 0 0 var(--space-4) 0;
		}
	}

	.descriptor-section {
		margin-bottom: var(--space-5);

		h4 {
			font-family: var(--font-body);
			font-size: var(--font-size-base);
			font-weight: var(--font-weight-semibold);
			color: var(--color-slate-dark);
			letter-spacing: var(--letter-spacing-normal);
			margin-bottom: var(--space-3);
			padding-bottom: var(--space-2);
			border-bottom: 2px solid var(--color-copper);
			display: inline-block;
		}

		label {
			display: block;
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-semibold);
			color: var(--color-text-secondary);
			margin-bottom: var(--space-2);
		}

		&:last-of-type {
			border-top: 1px solid var(--color-border-default);
			padding-top: var(--space-4);
			margin-top: var(--space-4);
		}
	}

	.descriptor-category {
		margin-bottom: var(--space-4);
	}

	.descriptor-category-header {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-semibold);
		color: var(--color-copper);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-wider);
		margin-bottom: var(--space-2);
		padding-left: var(--space-1);
	}

	.descriptor-category-content {
		margin-bottom: var(--space-2);
	}

	.descriptor-category-label {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-wide);
		color: var(--color-text-tertiary);
		margin-bottom: var(--space-2);
	}

	.descriptor-subcategory {
		margin-bottom: var(--space-3);
	}

	.descriptor-subcategory-label {
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-semibold);
		color: var(--color-copper);
		margin-bottom: var(--space-2);
		text-transform: capitalize;
	}

	.descriptor-chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	.descriptor-chip {
		padding: var(--space-1) var(--space-3);
		background: var(--color-bg-surface);
		border: 1.5px solid var(--color-cream-darker);
		border-radius: var(--radius-sm);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-primary);
		cursor: pointer;
		transition:
			border-color var(--transition-fast),
			background-color var(--transition-fast),
			color var(--transition-fast),
			box-shadow var(--transition-fast);
		text-transform: capitalize;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);

		&:hover {
			border-color: var(--color-copper-light);
			background: var(--color-cream-light);
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
		}

		&.selected {
			background: var(--color-copper);
			border-color: var(--color-copper-dark);
			color: white;
			box-shadow: 0 2px 4px rgba(184, 115, 90, 0.3);
		}
	}

	.price-fields {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3);
		margin-top: var(--space-4);

		select {
			padding: var(--space-2) var(--space-3);
			border: 1px solid var(--color-border-default);
			border-radius: var(--radius-sm);
			font-size: var(--font-size-base);
			background: var(--color-bg-surface);
			color: var(--color-text-primary);
		}
	}

	/* Consumption History Display */
	.wine-consumption-history {
		margin-top: var(--space-6);
		padding-top: var(--space-6);
		border-top: 1px solid var(--color-border-default);

		h3 {
			font-family: var(--font-display);
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-semibold);
			color: var(--color-text-primary);
			margin: 0 0 var(--space-4) 0;
		}
	}

	.consumption-entry {
		padding: var(--space-3);
		margin-bottom: var(--space-3);
		background: var(--color-bg-surface);
		border-left: 2px solid var(--color-copper);

		&.with-tasting {
			border-left-width: 4px;
			padding: var(--space-4);
		}
	}

	.consumption-date {
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
		margin-bottom: var(--space-2);
	}

	.consumption-quantity {
		font-family: var(--font-mono);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-tertiary);
	}

	.tasting-rating {
		font-size: var(--font-size-sm);
		margin: var(--space-1) 0;

		strong {
			color: var(--color-text-secondary);
		}
	}

	.tasting-quick-notes {
		margin-top: var(--space-2);
		font-size: var(--font-size-base);
		color: var(--color-text-primary);
		font-style: italic;
	}

	.tasting-descriptors {
		margin-top: var(--space-2);
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	/* Tasting History View */
	.tasting-history-filter {
		width: 100%;
		padding: var(--space-2) var(--space-3);
		margin-bottom: var(--space-4);
	}

	.tasting-history-error {
		color: var(--color-error);
		padding: var(--space-3) var(--space-5);
	}

	/* Wine list error block */
	.wine-list-error {
		padding: var(--space-10) var(--space-9);
		max-width: 560px;
	}

	.wine-list-error__label {
		font-family: var(--font-body);
		font-size: var(--font-size-xs);
		font-weight: var(--font-weight-semibold);
		letter-spacing: var(--letter-spacing-widest);
		text-transform: uppercase;
		color: var(--color-error);
		margin: 0 0 var(--space-3) 0;
	}

	.wine-list-error__heading {
		font-family: var(--font-display);
		font-size: var(--font-size-4xl);
		font-weight: var(--font-weight-normal);
		line-height: 1;
		color: var(--color-text-heading);
		margin: 0 0 var(--space-5) 0;
	}

	.wine-list-error__rule {
		border: none;
		border-top: 1px solid var(--color-border-default);
		margin: 0 0 var(--space-6) 0;
	}

	.wine-list-error__message {
		font-family: var(--font-mono);
		font-size: var(--font-size-sm);
		line-height: var(--line-height-relaxed);
		color: var(--color-error);
		background: var(--color-error-bg);
		border-left: 2px solid var(--color-error);
		padding: var(--space-4) var(--space-5);
		margin: 0 0 var(--space-6) 0;
		white-space: pre-wrap;
		word-break: break-word;
	}

	.wine-list-error__retry {
		font-family: var(--font-body);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--letter-spacing-wide);
		color: var(--color-text-primary);
		background: transparent;
		border: 1px solid var(--color-border-default);
		padding: var(--space-2) var(--space-5);
		cursor: pointer;
		transition:
			border-color var(--transition-fast),
			color var(--transition-fast);

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

	/* Tasting History List — nav-list row pattern */
	.tasting-list {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--color-border-default);
		background: var(--color-bg-surface);
	}

	.tasting-list-row {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: var(--space-3) var(--space-5);
		border-bottom: 1px solid var(--color-border-subtle);
		border-left: 3px solid transparent;
		transition:
			background-color var(--transition-fast),
			border-left-color var(--transition-fast);

		@media (max-width: 767px) {
			padding: var(--space-3);
		}

		&:last-child {
			border-bottom: none;
		}

		&:hover {
			background: var(--color-cream-dark);
			border-left-color: var(--color-copper);
		}
	}

	.tasting-list-link {
		display: flex;
		flex-direction: column;
		text-decoration: none;
		color: inherit;
		min-width: 0;
	}

	.tasting-list-name {
		font-family: var(--font-display);
		font-size: var(--font-size-xl);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-primary);
		line-height: var(--line-height-normal);
		letter-spacing: var(--letter-spacing-tight);
		transition: color var(--transition-fast);

		@media (max-width: 767px) {
			font-size: var(--font-size-lg);
		}

		.tasting-list-link:hover & {
			color: var(--color-copper-dark);
		}
	}

	.tasting-list-meta {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-1) var(--space-3);
		margin-top: var(--space-1);
		font-size: var(--font-size-xs);
		color: var(--color-text-muted);
	}

	.tasting-list-date {
		font-family: var(--font-mono);
		letter-spacing: var(--letter-spacing-wide);
	}

	.tasting-list-rating {
		font-weight: var(--font-weight-semibold);

		&.tasting-list-rating--bad {
			color: var(--color-rating-bad);
		}
		&.tasting-list-rating--ok {
			color: var(--color-rating-ok-dark);
		}
		&.tasting-list-rating--good {
			color: var(--color-rating-good-dark);
		}
		&.tasting-list-rating--very_good {
			color: var(--color-rating-very-good);
		}
		&.tasting-list-rating--excellent {
			color: var(--color-rating-excellent);
		}
		&.tasting-list-rating--spectacular {
			color: var(--color-rating-spectacular-dark);
		}
	}

	.tasting-list-occasion {
		font-style: italic;
	}

	.tasting-list-notes {
		margin-block: 0;
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
		font-style: italic;
		line-height: var(--line-height-normal);
	}

	.tasting-list-actions {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		margin-left: auto;
		opacity: 0.4;
		transition: opacity var(--transition-fast);

		.tasting-list-row:hover & {
			opacity: 1;
		}
	}
}