/* Inventory / Wine list styles */

@layer base {
	table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		font-size: var(--font-size-base);
		background-color: var(--color-bg-surface);
		box-shadow: var(--shadow-md);
		border-radius: var(--radius-sm);
		overflow: hidden;

		a {
			color: var(--color-accent-primary);
			text-decoration: none;
			font-weight: var(--font-weight-medium);

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

	thead tr {
		background: linear-gradient(135deg, var(--color-limestone-light) 0%, var(--color-limestone) 100%);
		color: var(--color-text-primary);
		text-align: left;
		position: sticky;
		top: 0;
		z-index: var(--z-sticky);
	}

	th {
		font-family: var(--font-body);
		font-weight: var(--font-weight-semibold);
		font-size: var(--font-size-xs);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-wider);
		padding: var(--space-2) var(--space-3);
		background-color: transparent;
		border-bottom: 2px solid var(--color-terracotta-rich);

		&.sortable {
			cursor: pointer;
			user-select: none;
			transition: background-color var(--transition-fast);

			.sort-icon {
				display: none;
				margin-inline-start: var(--space-1);

				svg {
					vertical-align: middle;
					margin-bottom: 2px;
				}
			}

			&.active .sort-icon,
			&.sorted .sort-icon {
				display: inline;
			}

			&:hover {
				background-color: color-mix(in srgb, var(--color-sand-dark) 30%, transparent);
			}
		}

		&:first-child {
			padding-left: var(--space-4);
		}

		&:last-child {
			padding-right: var(--space-4);
		}
	}

	td {
		padding: var(--space-2) var(--space-3);
		border-bottom: 1px solid var(--color-border-subtle);
		vertical-align: top;
		font-size: var(--font-size-base);

		&:first-child {
			padding-left: var(--space-4);
			font-weight: var(--font-weight-medium);
		}

		&:last-child {
			padding-right: var(--space-4);
		}
	}

	.table-container td {
		vertical-align: middle;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 300px;

		&:first-child {
			overflow: visible;
			text-overflow: unset;
			max-width: none;
		}
	}

	tbody tr {
		transition: background-color var(--transition-fast);

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

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

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

		th,
		td {
			padding: var(--space-3) var(--space-2);
		}

		td {
			&:first-child {
				padding-left: var(--space-3);
			}

			&:last-child {
				padding-right: var(--space-3);
			}
		}

		th {
			&:first-child {
				padding-left: var(--space-3);
			}

			&:last-child {
				padding-right: var(--space-3);
			}
		}

		.table-container td {
			max-width: 120px;
		}

		tbody tr:hover {
			background-color: initial;

			&::after {
				width: 0;
			}
		}
	}
}

@layer components {
	.wine-list {
		wine-table-view {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			min-height: 0;

			@media (max-width: 767px) {
				display: block;
				overflow: visible;
			}
		}

		wine-list-filters {
			flex-shrink: 0;
		}

		wine-table-view .table-container {
			min-height: 0;
		}

		.refresh-btn {
			background: var(--color-bg-surface);
			border: 1px solid var(--color-border-default);
			cursor: pointer;
			padding: var(--space-2) var(--space-4);
			font-size: var(--font-size-sm);
			transition:
				background-color var(--transition-fast),
				color var(--transition-fast),
				border-color var(--transition-fast),
				transform var(--transition-fast),
				box-shadow var(--transition-fast);
			color: var(--color-text-primary);
			text-transform: uppercase;
			letter-spacing: var(--letter-spacing-wide);
			font-weight: var(--font-weight-medium);

			&:hover {
				background-color: var(--color-accent-primary);
				color: var(--color-cream);
				border-color: var(--color-copper-dark);
				box-shadow: var(--shadow-ink);
			}

			&.refresh-btn-loading {
				opacity: 0.6;
				cursor: not-allowed;
				animation: pulse 1.5s ease-in-out infinite;
			}

			&.refresh-btn-success {
				background-color: var(--color-success);
				color: white;
				border-color: var(--color-success);
			}

			&.refresh-btn-error {
				background-color: var(--color-error);
				color: white;
				border-color: var(--color-error);
			}

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

		.stock-btn {
			&.loading,
			&:disabled {
				opacity: 0.4;
				cursor: not-allowed;
			}
		}

		.row-error {
			background-color: var(--color-error-bg);
			animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);

			.error-message {
				color: var(--color-error);
				background-color: var(--color-error-bg);
				padding: var(--space-3) var(--space-4);
				font-size: var(--font-size-sm);
				border-left: 3px solid var(--color-error);
				font-weight: var(--font-weight-medium);
			}
		}

		.row-with-error {
			border-inline-start: 3px solid var(--color-error);
		}

		@keyframes slideDown {
			from {
				opacity: 0;
				transform: translateY(-10px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes pulse {
			0%,
			100% {
				opacity: 0.6;
			}
			50% {
				opacity: 1;
			}
		}

		.inventory-controls {
			padding: var(--space-2) var(--space-4);
			background: var(--color-bg-surface);
			border-block-end: 1px solid var(--color-border-default);
			display: flex;
			align-items: center;
			gap: var(--space-4);
			overflow-x: auto;

			@media (max-width: 767px) {
				flex-direction: column;
				gap: var(--space-3);
				align-items: stretch;
				padding: var(--space-3) var(--space-4);
			}
		}

		.control-row {
			display: flex;
			align-items: center;
			gap: var(--space-3);

			@media (max-width: 767px) {
				flex-direction: row;
				gap: var(--space-2);
				align-items: center;
				justify-content: space-between;
			}
		}

		.export-row {
			display: flex;
			align-items: center;
			gap: var(--space-3);
			margin-inline-start: auto;

			@media (max-width: 767px) {
				flex-wrap: wrap;
				gap: var(--space-2);
				width: 100%;
				margin-inline-start: 0;
			}
		}

		.export-btn {
			background: var(--color-bg-surface);
			border: 1px solid var(--color-border-default);
			height: 32px;
			padding: 0 var(--space-3);
			font-size: var(--font-size-sm);
			cursor: pointer;
			display: flex;
			align-items: center;
			gap: var(--space-2);
			border-radius: var(--radius-sm);
			transition:
				background-color var(--transition-fast),
				color var(--transition-fast),
				border-color var(--transition-fast);
			color: var(--color-text-primary);
			white-space: nowrap;
			font-weight: var(--font-weight-normal);

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

			@media (max-width: 767px) {
				flex: 1 1 auto;
				min-width: 0;
				justify-content: center;
			}
		}

		.filter-input-wrap {
			position: relative;
			flex-grow: 1;
			min-width: 200px;
			max-width: 500px;
			display: flex;
			align-items: center;
		}

		.filter-clear-btn {
			position: absolute;
			right: var(--space-3);
			background: none;
			border: none;
			padding: 0;
			line-height: 1;
			font-size: var(--font-size-lg);
			color: var(--color-text-muted);
			cursor: pointer;

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

		.filter-input {
			width: 100%;
			height: 32px;
			padding: 0 var(--space-6) 0 var(--space-3);
			outline: none;
			transition: border-color var(--transition-fast);

			@media (max-width: 767px) {
				max-width: none;
				height: 36px;
				font-size: var(--font-size-base);
			}
		}

		.hide-empty-label {
			display: flex;
			align-items: center;
			gap: var(--space-2);
			font-size: var(--font-size-sm);
			color: var(--color-text-primary);
			cursor: pointer;
			user-select: none;
			white-space: nowrap;

			input[type="checkbox"] {
				width: 15px;
				height: 15px;
				cursor: pointer;
				accent-color: var(--color-accent-primary);
			}
		}

		.wine-limit-label {
			display: flex;
			align-items: center;
			gap: var(--space-2);
			font-size: var(--font-size-sm);
			color: var(--color-text-primary);
			white-space: nowrap;
		}

		.wine-limit-input {
			width: 72px;
			height: 32px;
			padding: 0 var(--space-2);
			border: 1px solid var(--color-border-default);
			font-size: var(--font-size-sm);
			text-align: center;
			border-radius: var(--radius-sm);
			font-family: var(--font-body);
			transition: border-color var(--transition-fast);

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

		.table-container {
			flex-grow: 1;
			overflow: auto;
			padding: var(--space-4);
			background-color: var(--color-bg-base);

			@media (max-width: 767px) {
				overflow: visible;
			}

			&::-webkit-scrollbar {
				width: 8px;
				height: 8px;
			}

			&::-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);
			}
		}

		.cards-container {
			display: none;
		}

		.rating-cell {
			text-align: center;
			min-width: 80px;
		}

		.comment-cell {
			max-width: 400px;
			min-width: 180px;

			&.has-comment {
				cursor: pointer;

				.comment-preview {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-style: italic;
					color: var(--color-text-secondary);
				}

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

			&.expanded {
				max-width: none;
				white-space: normal;

				.comment-full {
					white-space: pre-wrap;
					word-break: break-word;
					line-height: var(--line-height-relaxed);
					padding: var(--space-3);
					background-color: var(--color-cream-dark);
					border-left: 2px solid var(--color-copper);

					a {
						color: var(--color-accent-primary);
						text-decoration: underline;

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

		.external-links-cell {
			white-space: nowrap;

			a {
				display: inline-block;
				margin-inline-end: var(--space-3);
				color: var(--color-accent-secondary);
				text-decoration: none;
				font-size: var(--font-size-sm);
				font-weight: var(--font-weight-medium);
				transition: color var(--transition-fast);

				&:hover {
					color: var(--color-slate-dark);
					text-decoration: underline;
				}
			}
		}

		.stock-cell,
		.target-cell {
			padding: 0;
			min-width: 90px;
		}

		.stock-controls {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: var(--space-1);
			height: 100%;
			padding: var(--space-2) var(--space-3);
		}

		.stock-btn {
			background: var(--color-bg-surface);
			border: 1px solid var(--color-accent-primary);
			color: var(--color-accent-primary);
			cursor: pointer;
			width: 24px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: var(--font-size-sm);
			padding: 0;
			opacity: 0;
			transition:
				opacity var(--transition-fast),
				background-color var(--transition-fast),
				color var(--transition-fast),
				transform var(--transition-fast);
			border-radius: var(--radius-sm);
			font-weight: var(--font-weight-semibold);

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

			&:active {
				transform: scale(0.95);
			}
		}

		.stock-cell:hover .stock-btn,
		.target-cell:hover .stock-btn {
			opacity: 1;
		}

		.stock-value,
		.desired-stock-value {
			min-width: 24px;
			text-align: center;
			font-family: var(--font-mono);
			font-size: var(--font-size-base);
			color: var(--color-text-primary);
			transition: color var(--transition-fast);

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

		.stock-value {
			font-weight: var(--font-weight-semibold);
		}

		.desired-stock-value {
			font-weight: var(--font-weight-normal);
		}

		@media (max-width: 767px) {
			thead {
				display: none;
			}

			tbody td:not(:first-child) {
				display: none;
			}

			tbody td:first-child {
				padding: 0;
				border-inline-start: 4px solid var(--wine-color, var(--color-brand-primary));

				a {
					display: block;
					padding: var(--space-4);
					font-size: var(--font-size-base);
					font-weight: var(--font-weight-semibold);
					font-family: var(--font-display);
					color: var(--color-text-primary);
					text-decoration: none;
					word-break: break-word;
					white-space: normal;

					&:active {
						background: var(--color-cream-light);
					}
				}
			}
		}
	}
}

/* Column Configuration Modal */
.column-config-dialog {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	max-width: 900px;
	width: auto;
	padding: 0;
	box-shadow: var(--shadow-xl);

	&:not([open]) {
		display: none;
	}

	&::backdrop {
		background-color: var(--color-bg-overlay);
		backdrop-filter: blur(4px);
	}

	.modal-header {
		padding: var(--space-4) var(--space-5);
		border-bottom: 2px solid var(--color-copper);
		display: flex;
		justify-content: space-between;
		align-items: center;

		h2 {
			font-family: var(--font-display);
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-bold);
			color: var(--color-text-primary);
			margin: 0;
		}

		.close-btn {
			background: none;
			border: none;
			font-size: var(--font-size-xl);
			color: var(--color-text-secondary);
			cursor: pointer;
			padding: var(--space-2);
			line-height: 1;
			transition: color var(--transition-fast);

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

	.modal-body {
		padding: var(--space-5);
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-5);
	}

	.modal-footer {
		padding: var(--space-4) var(--space-5);
		border-top: 1px solid var(--color-border-default);
		display: flex;
		gap: var(--space-3);
		justify-content: flex-end;
	}
}

.column-config-section {
	h3 {
		font-family: var(--font-display);
		font-size: var(--font-size-base);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-primary);
		margin: 0 0 var(--space-3) 0;
		padding-block-end: var(--space-2);
		border-block-end: 1px solid var(--color-copper);
	}
}

.column-toggle {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2);
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast);

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

	input[type="checkbox"] {
		width: 18px;
		height: 18px;
		cursor: pointer;
		accent-color: var(--color-accent-primary);

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

.column-name {
	flex: 1;
	font-size: var(--font-size-sm);
	color: var(--color-text-primary);
	font-weight: var(--font-weight-medium);
}

.column-badge.required {
	font-size: var(--font-size-xs);
	padding: 2px var(--space-2);
	border-radius: var(--radius-sm);
	background-color: var(--color-cream-darker);
	color: var(--color-text-tertiary);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wider);
}

.column-config-btn {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	padding: 0;
	cursor: pointer;
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast);
	color: var(--color-text-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	width: 32px;
	height: 32px;

	@media (max-width: 767px) {
		display: none;
	}

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

/* Icon System Integration */
button svg,
a svg {
	display: inline-block;
	vertical-align: -0.125em;
	margin-inline-end: var(--space-1);
}

button svg:last-child,
a svg:last-child {
	margin-right: 0;
}

button svg:only-child,
a svg:only-child {
	margin-right: 0;
}

button svg {
	color: currentColor;
}

.icon-success {
	color: var(--color-success);
}

.icon-error {
	color: var(--color-error);
}

.icon-loading {
	color: var(--color-accent-primary);
}

/* Drinking Window */
.drinking-window {
	padding: 1px 6px;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.drinking-window--optimal {
	background: var(--color-success-bg);
	color: var(--color-success);
}

.drinking-window--too-early {
	background: var(--color-info-bg);
	color: var(--color-info);
}

.drinking-window--past-peak {
	background: var(--color-error-bg);
	color: var(--color-error);
}

/* Wine name link in table */
.wine-name-link {
	color: var(--color-text-primary);
	text-decoration: none;
}

.wine-name-link:hover {
	text-decoration: underline;
	color: var(--color-brand-primary);
}