/* CSV Import page styles - Editorial Luxury Design */

@layer components {
	.csv-import {
		.csv-import-container {
			> p {
				color: var(--color-text-secondary);
				margin-block-end: var(--space-8);
				line-height: var(--line-height-loose);
				font-size: var(--font-size-base);
			}
		}

		.csv-upload-section {
			display: flex;
			gap: var(--space-6);
			margin-block-end: var(--space-8);

			@media (max-width: 767px) {
				flex-direction: column;
				gap: var(--space-6);
			}
		}

		.upload-group {
			flex: 1;
			border: 1px solid var(--color-border-default);
			padding: var(--space-6);
			background: var(--color-bg-surface);
			border-radius: var(--radius-sm);
			box-shadow: var(--shadow-sm);

			h3 {
				font-family: var(--font-display);
				margin-block-start: 0;
				margin-block-end: var(--space-3);
				font-size: var(--font-size-2xl);
				color: var(--color-text-primary);
				font-weight: var(--font-weight-semibold);
				letter-spacing: var(--letter-spacing-tight);
			}

			input[type="file"] {
				width: 100%;
				padding: var(--space-3);
				border: 1px solid var(--color-border-default);
				background: var(--color-cream-dark);
				cursor: pointer;
				font-family: var(--font-body);
				font-size: var(--font-size-base);
				border-radius: var(--radius-sm);
				transition:
					border-color var(--transition-fast),
					background-color var(--transition-fast),
					box-shadow var(--transition-fast);

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

				&:focus {
					outline: none;
					border-color: var(--color-accent-primary);
					box-shadow: 0 0 0 3px rgba(155, 107, 74, 0.1);
				}
			}

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

		.upload-description {
			font-size: var(--font-size-base);
			color: var(--color-text-secondary);
			margin-block-end: var(--space-6);
			line-height: var(--line-height-relaxed);
		}

		.upload-status {
			padding: var(--space-5);
			background: var(--color-info-bg);
			border-inline-start: 4px solid var(--color-info);
			margin-block-start: var(--space-6);
			font-weight: var(--font-weight-semibold);
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: var(--radius-sm);
			color: var(--color-info);
		}

		.upload-progress {
			padding: var(--space-6);
			background: var(--color-info-bg);
			border-inline-start: 4px solid var(--color-info);
			margin-block-start: var(--space-6);
			border-radius: var(--radius-sm);
		}

		.progress-info {
			font-weight: var(--font-weight-semibold);
			margin-block-end: var(--space-4);
			color: var(--color-info);
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: var(--font-size-lg);
		}

		.stop-btn {
			background: linear-gradient(135deg, var(--color-error) 0%, var(--color-error-dark) 100%);
			color: white;
			border: 1px solid var(--color-error);
			padding: var(--space-2) var(--space-5);
			font-size: var(--font-size-sm);
			cursor: pointer;
			font-weight: var(--font-weight-semibold);
			transition:
				background-color var(--transition-fast),
				color var(--transition-fast),
				box-shadow var(--transition-fast),
				transform var(--transition-fast);
			border-radius: var(--radius-sm);
			text-transform: uppercase;
			letter-spacing: var(--letter-spacing-wide);

			&:hover {
				background: linear-gradient(135deg, var(--color-error-dark) 0%, var(--color-error) 100%);
				box-shadow: var(--shadow-ink);
			}
		}

		.progress-bar {
			width: 100%;
			height: 32px;
			background: white;
			border: 1px solid var(--color-border-default);
			margin-block-end: var(--space-4);
			overflow: hidden;
			border-radius: var(--radius-sm);
			box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
		}

		.progress-fill {
			height: 100%;
			background: linear-gradient(
				90deg,
				var(--color-copper) 0%,
				var(--color-copper-light) 50%,
				var(--color-copper) 100%
			);
			background-size: 200% 100%;
			transition: width var(--transition-slow);
			animation: shimmerProgress 2s ease-in-out infinite;
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
		}

		@keyframes shimmerProgress {
			0% {
				background-position: 0% 0%;
			}
			50% {
				background-position: 100% 0%;
			}
			100% {
				background-position: 0% 0%;
			}
		}

		.progress-wine {
			font-size: var(--font-size-base);
			color: var(--color-text-secondary);
			font-style: italic;
			font-family: var(--font-display);
		}

		.processed-wines-list {
			margin-block-start: var(--space-6);
			border-block-start: 2px solid var(--color-copper);
			padding-block-start: var(--space-5);
			max-height: none;
		}

		.processed-wine {
			padding-block: var(--space-3);
			border-block-end: 1px solid var(--color-border-subtle);
		}

		.wine-info {
			display: flex;
			gap: var(--space-4);
			align-items: flex-start;
		}

		.wine-status {
			display: inline-block;
			padding: var(--space-2) var(--space-4);
			border-radius: var(--radius-sm);
			font-weight: var(--font-weight-semibold);
			font-size: var(--font-size-sm);
			min-width: 120px;
			text-align: center;
			flex-shrink: 0;
			text-transform: uppercase;
			letter-spacing: var(--letter-spacing-wide);
		}

		.wine-status-updated {
			background: var(--color-warning-bg);
			color: var(--color-warning);
			border: 1px solid var(--color-warning);
		}

		.wine-status-added {
			background: var(--color-success-bg);
			color: var(--color-success);
			border: 1px solid var(--color-success);
		}

		.wine-status-already-up-to-date {
			background: var(--color-cream-dark);
			color: var(--color-text-secondary);
			border: 1px solid var(--color-border-default);
		}

		.wine-status-not-found {
			background: var(--color-error-bg);
			color: var(--color-error);
			border: 1px solid var(--color-error);
		}

		.wine-status-stock-updated {
			background: var(--color-warning-bg);
			color: var(--color-warning);
			border: 1px solid var(--color-warning);
		}

		.wine-status-already-stocked {
			background: var(--color-cream-dark);
			color: var(--color-text-secondary);
			border: 1px solid var(--color-border-default);
		}

		.wine-text {
			flex: 1;
		}

		.wine-name {
			font-family: var(--font-display);
			font-weight: var(--font-weight-semibold);
			color: var(--color-text-primary);
			margin-block-end: var(--space-1);
			font-size: var(--font-size-lg);
			line-height: var(--line-height-snug);
		}

		.wine-details {
			font-size: var(--font-size-base);
			color: var(--color-text-secondary);
			margin-block-start: var(--space-1);
			line-height: var(--line-height-relaxed);
		}

		.upload-error {
			padding: var(--space-5);
			background: var(--color-error-bg);
			border-inline-start: 4px solid var(--color-error);
			margin-block-start: var(--space-6);
			color: var(--color-error);
			border-radius: var(--radius-sm);
			font-weight: var(--font-weight-medium);
		}

		.upload-success {
			padding: var(--space-6);
			background: var(--color-success-bg);
			border-inline-start: 4px solid var(--color-success);
			margin-block-start: var(--space-6);
			border-radius: var(--radius-sm);

			h3 {
				font-family: var(--font-display);
				margin-block-start: 0;
				color: var(--color-success);
				font-size: var(--font-size-2xl);
				font-weight: var(--font-weight-semibold);
				letter-spacing: var(--letter-spacing-tight);
			}

			p {
				margin-block: var(--space-3);
				color: var(--color-text-primary);
				line-height: var(--line-height-relaxed);
			}

			details {
				margin-block-start: var(--space-6);
				padding: var(--space-4);
				background: white;
				border-radius: var(--radius-sm);
				border: 1px solid var(--color-border-subtle);
			}

			summary {
				cursor: pointer;
				font-weight: var(--font-weight-semibold);
				color: var(--color-text-primary);
				margin-block-end: var(--space-4);
				font-size: var(--font-size-lg);
				transition: color var(--transition-fast);

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

		.not-found-list {
			max-height: 400px;
			overflow-y: auto;
			margin-block: var(--space-4);
			padding-inline-start: var(--space-7);
			font-size: var(--font-size-base);

			&::-webkit-scrollbar {
				width: 6px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: var(--color-copper);
				border-radius: var(--radius-md);

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

			&::-webkit-scrollbar-track {
				background: var(--color-cream-dark);
			}

			li {
				margin-block: var(--space-3);
				color: var(--color-text-secondary);
				line-height: var(--line-height-relaxed);
			}
		}

		.actions-list {
			max-height: 500px;
			overflow-y: auto;
			margin-block: var(--space-4);

			&::-webkit-scrollbar {
				width: 6px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: var(--color-copper);
				border-radius: var(--radius-md);

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

			&::-webkit-scrollbar-track {
				background: var(--color-cream-dark);
			}
		}

		.action-item {
			padding: var(--space-4);
			margin-block-end: var(--space-3);
			border-radius: var(--radius-sm);
			border: 1px solid var(--color-border-default);
			transition: border-color var(--transition-fast);

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

		.action-stock_updated {
			background: var(--color-warning-bg);
			border-color: var(--color-warning);
		}

		.action-added {
			background: var(--color-success-bg);
			border-color: var(--color-success);
		}

		.action-skipped {
			background: var(--color-cream-dark);
			border-color: var(--color-border-default);
		}

		.action-not_found {
			background: var(--color-error-bg);
			border-color: var(--color-error);
		}

		.action-wine-name {
			font-family: var(--font-display);
			font-weight: var(--font-weight-semibold);
			color: var(--color-text-primary);
			font-size: var(--font-size-lg);
			margin-block-end: var(--space-2);
		}

		.action-details {
			color: var(--color-text-secondary);
			font-size: var(--font-size-base);
			margin-block-end: var(--space-2);
		}

		.action-product-id {
			font-family: var(--font-mono);
			font-size: var(--font-size-sm);
			color: var(--color-text-tertiary);
		}

		.quick-add-wine {
			margin-block-end: var(--space-8);
		}

		.quick-add-container {
			border: 1px solid var(--color-border-default);
			padding: var(--space-6);
			background: var(--color-bg-surface);
			border-radius: var(--radius-sm);
			box-shadow: var(--shadow-sm);

			h3 {
				font-family: var(--font-display);
				margin-block-start: 0;
				margin-block-end: var(--space-3);
				font-size: var(--font-size-2xl);
				color: var(--color-text-primary);
				font-weight: var(--font-weight-semibold);
				letter-spacing: var(--letter-spacing-tight);
			}

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

		.quick-add-description {
			font-size: var(--font-size-base);
			color: var(--color-text-secondary);
			margin-block-end: var(--space-6);
			line-height: var(--line-height-relaxed);
		}

		.quick-add-form {
			display: flex;
			gap: var(--space-4);
			align-items: flex-end;

			@media (max-width: 767px) {
				flex-direction: column;
				align-items: stretch;
			}
		}

		.quick-add-stocks {
			display: flex;
			gap: var(--space-4);
			align-items: flex-end;

			@media (max-width: 767px) {
				flex-direction: column;
				align-items: stretch;
			}
		}

		.form-group {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: var(--space-2);

			&:last-of-type {
				flex: 0 0 120px;

				@media (max-width: 767px) {
					flex: 1;
				}
			}

			label {
				font-size: var(--font-size-sm);
				font-weight: var(--font-weight-semibold);
				color: var(--color-text-primary);
				text-transform: uppercase;
				letter-spacing: var(--letter-spacing-wide);
			}

			input {
				padding: var(--space-3);
				border: 1px solid var(--color-border-default);
				background: white;
				font-family: var(--font-body);
				font-size: var(--font-size-base);
				border-radius: var(--radius-sm);
				transition:
					border-color var(--transition-fast),
					box-shadow var(--transition-fast);

				&:focus {
					outline: none;
					border-color: var(--color-accent-primary);
					box-shadow: 0 0 0 3px rgba(155, 107, 74, 0.1);
				}

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

			input[type="number"] {
				text-align: center;
			}
		}

		.add-button {
			flex: 0 0 auto;
			background: linear-gradient(135deg, var(--color-copper) 0%, var(--color-copper-dark) 100%);
			color: white;
			border: 1px solid var(--color-copper-dark);
			padding: var(--space-3) var(--space-6);
			font-size: var(--font-size-base);
			cursor: pointer;
			font-weight: var(--font-weight-semibold);
			transition:
				transform var(--transition-fast),
				box-shadow var(--transition-fast);
			border-radius: var(--radius-sm);
			text-transform: uppercase;
			letter-spacing: var(--letter-spacing-wide);

			&:hover:not(:disabled) {
				box-shadow: var(--shadow-ink);
			}

			&:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}

			@media (max-width: 767px) {
				width: 100%;
			}
		}

		.quick-add-status {
			margin-block-start: var(--space-4);
			padding: var(--space-4);
			border-radius: var(--radius-sm);
			font-weight: var(--font-weight-medium);
		}

		.quick-add-status-loading {
			background: var(--color-info-bg);
			color: var(--color-info);
			border-inline-start: 4px solid var(--color-info);
		}

		.quick-add-status-success {
			background: var(--color-success-bg);
			color: var(--color-success);
			border-inline-start: 4px solid var(--color-success);

			.quick-add-wine-link {
				color: inherit;
				font-weight: var(--font-weight-semibold);
			}
		}

		.quick-add-status-error {
			background: var(--color-error-bg);
			color: var(--color-error);
			border-inline-start: 4px solid var(--color-error);
		}

		.scan-row {
			display: flex;
			align-items: center;
			gap: var(--space-3);
			margin-block-end: var(--space-4);
		}

		.scan-button {
			display: inline-flex;
			align-items: center;
			gap: var(--space-2);
			padding: var(--space-2) var(--space-4);
			background: transparent;
			border: 1px solid var(--color-border-default);
			border-radius: var(--radius-sm);
			color: var(--color-text-secondary);
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-medium);
			cursor: pointer;
			transition:
				border-color var(--transition-fast),
				color var(--transition-fast);

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

		.scan-status {
			margin-block-end: var(--space-3);
			padding: var(--space-3) var(--space-4);
			border-radius: var(--radius-sm);
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-medium);
		}

		.scan-status-loading {
			background: var(--color-info-bg);
			color: var(--color-info);
			border-inline-start: 4px solid var(--color-info);
		}

		.scan-status-error {
			background: var(--color-error-bg);
			color: var(--color-error);
			border-inline-start: 4px solid var(--color-error);
		}

		.scan-results {
			margin-block-end: var(--space-4);
			border: 1px solid var(--color-border-default);
			border-radius: var(--radius-sm);
			overflow: hidden;
		}

		.scan-results-heading {
			margin: 0;
			padding: var(--space-2) var(--space-4);
			font-size: var(--font-size-xs);
			font-weight: var(--font-weight-semibold);
			text-transform: uppercase;
			letter-spacing: var(--letter-spacing-wide);
			color: var(--color-text-secondary);
			background: var(--color-bg-subtle);
			border-block-end: 1px solid var(--color-border-default);
		}

		.scan-results-list {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.scan-result-item {
			display: flex;
			flex-direction: column;
			gap: var(--space-1);
			width: 100%;
			padding: var(--space-3) var(--space-4);
			background: transparent;
			border: none;
			border-block-end: 1px solid var(--color-border-subtle);
			text-align: start;
			cursor: pointer;
			transition: background var(--transition-fast);

			&:last-child {
				border-block-end: none;
			}

			&:hover {
				background: var(--color-bg-subtle);
			}
		}

		.scan-result-name {
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-semibold);
			color: var(--color-text-primary);
		}

		.scan-result-meta {
			font-size: var(--font-size-xs);
			color: var(--color-text-secondary);
		}

		.scan-label-card {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-4);
			padding: var(--space-3) var(--space-4);
			margin-block-end: var(--space-4);
			background: var(--color-bg-subtle);
			border: 1px solid var(--color-border-default);
			border-radius: var(--radius-sm);

			@media (max-width: 767px) {
				flex-direction: column;
				align-items: flex-start;
			}
		}

		.scan-label-info {
			display: flex;
			flex-direction: column;
			gap: var(--space-1);
			min-width: 0;
		}

		.scan-label-title {
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-semibold);
			color: var(--color-text-primary);
		}

		.scan-label-meta {
			font-size: var(--font-size-xs);
			color: var(--color-text-secondary);
			text-transform: capitalize;
		}

		.scan-label-add-btn {
			flex-shrink: 0;
			padding: var(--space-2) var(--space-3);
			background: transparent;
			border: 1px solid var(--color-accent-primary);
			border-radius: var(--radius-sm);
			color: var(--color-accent-primary);
			font-size: var(--font-size-xs);
			font-weight: var(--font-weight-semibold);
			text-transform: uppercase;
			letter-spacing: var(--letter-spacing-wide);
			cursor: pointer;
			transition:
				background var(--transition-fast),
				color var(--transition-fast);

			&:hover:not(:disabled) {
				background: var(--color-accent-primary);
				color: white;
			}

			&:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}

			@media (max-width: 767px) {
				width: 100%;
			}
		}

		order-import {
			display: block;
			margin-block-end: var(--space-8);

			.order-import-container {
				border: 1px solid var(--color-border-default);
				padding: var(--space-6);
				background: var(--color-bg-surface);
				border-radius: var(--radius-sm);
				box-shadow: var(--shadow-sm);

				h3 {
					font-family: var(--font-display);
					margin-block-start: 0;
					margin-block-end: var(--space-3);
					font-size: var(--font-size-2xl);
					color: var(--color-text-primary);
					font-weight: var(--font-weight-semibold);
					letter-spacing: var(--letter-spacing-tight);
				}
			}

			.order-import-description {
				font-size: var(--font-size-base);
				color: var(--color-text-secondary);
				margin-block-end: var(--space-4);
				line-height: var(--line-height-relaxed);
			}

			.order-import-textarea {
				width: 100%;
				min-height: 10lh;
				padding: var(--space-3);
				border: 1px solid var(--color-border-default);
				background: white;
				font-family: var(--font-mono);
				font-size: var(--font-size-sm);
				border-radius: var(--radius-sm);
				resize: vertical;
				box-sizing: border-box;
				transition:
					border-color var(--transition-fast),
					box-shadow var(--transition-fast);

				&:focus {
					outline: none;
					border-color: var(--color-accent-primary);
					box-shadow: 0 0 0 3px rgba(155, 107, 74, 0.1);
				}

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

			.order-import-error {
				margin-block-start: var(--space-3);
				padding: var(--space-3) var(--space-4);
				background: var(--color-error-bg);
				border-inline-start: 4px solid var(--color-error);
				color: var(--color-error);
				border-radius: var(--radius-sm);
				font-size: var(--font-size-sm);
			}

			.order-import-actions {
				margin-block-start: var(--space-4);
				display: flex;
				gap: var(--space-3);
				align-items: center;

				@media (max-width: 767px) {
					flex-direction: column;
					align-items: stretch;
				}
			}

			.order-import-back-btn {
				background: transparent;
				border: 1px solid var(--color-border-default);
				padding: var(--space-3) var(--space-6);
				font-size: var(--font-size-base);
				cursor: pointer;
				font-weight: var(--font-weight-semibold);
				border-radius: var(--radius-sm);
				color: var(--color-text-secondary);
				text-transform: uppercase;
				letter-spacing: var(--letter-spacing-wide);
				transition:
					border-color var(--transition-fast),
					color var(--transition-fast);

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

			.order-preview-table,
			.order-results-table {
				width: 100%;
				border-collapse: collapse;
				margin-block-end: var(--space-4);
				font-size: var(--font-size-sm);

				th {
					text-align: start;
					padding: var(--space-2) var(--space-3);
					font-size: var(--font-size-xs);
					font-weight: var(--font-weight-semibold);
					text-transform: uppercase;
					letter-spacing: var(--letter-spacing-wide);
					color: var(--color-text-secondary);
					border-block-end: 2px solid var(--color-copper);
				}

				td {
					padding: var(--space-2) var(--space-3);
					border-block-end: 1px solid var(--color-border-subtle);
					vertical-align: middle;
				}
			}

			.order-preview-id,
			.order-result-id {
				font-family: var(--font-mono);
				color: var(--color-text-secondary);
				white-space: nowrap;
			}

			.order-preview-name {
				color: var(--color-text-primary);
				width: 100%;
			}

			.order-preview-qty {
				text-align: end;
				color: var(--color-text-primary);
				font-weight: var(--font-weight-semibold);
				white-space: nowrap;
			}

			.order-result-name {
				color: var(--color-text-primary);

				&[href] {
					color: var(--color-accent-primary);
					text-decoration: none;

					&:hover {
						text-decoration: underline;
					}
				}
			}

			.order-result-id-fallback {
				font-family: var(--font-mono);
				color: var(--color-text-tertiary);
				font-size: var(--font-size-xs);
			}

			.order-result-status-cell {
				text-align: end;
				white-space: nowrap;
			}

			.order-result-error {
				color: var(--color-error);
				font-size: var(--font-size-sm);
				padding: var(--space-2) var(--space-3);
			}

			.order-status-added {
				background: var(--color-success-bg);
				color: var(--color-success);
				border: 1px solid var(--color-success);
			}

			.order-status-updated {
				background: var(--color-info-bg);
				color: var(--color-info);
				border: 1px solid var(--color-info);
			}

			.order-status-not-found {
				background: var(--color-error-bg);
				color: var(--color-error);
				border: 1px solid var(--color-error);
			}

			.order-import-in-progress {
				color: var(--color-info);
				font-weight: var(--font-weight-semibold);
				margin-block-end: var(--space-4);
			}

			.order-import-summary {
				padding: var(--space-4) var(--space-5);
				background: var(--color-success-bg);
				border-inline-start: 4px solid var(--color-success);
				color: var(--color-text-primary);
				border-radius: var(--radius-sm);
				margin-block-end: var(--space-4);
				font-weight: var(--font-weight-medium);
			}
		}

		.section-divider {
			display: flex;
			align-items: center;
			text-align: center;
			margin-block: var(--space-8);
			color: var(--color-text-secondary);
			font-size: var(--font-size-sm);
			text-transform: uppercase;
			letter-spacing: var(--letter-spacing-wide);

			&::before,
			&::after {
				content: "";
				flex: 1;
				border-block-end: 1px solid var(--color-border-default);
			}

			span {
				padding-inline: var(--space-4);
			}
		}
	}
}