/* ################################# NUI-LIST COMPONENT
   High-performance virtualized list with search, sort, and selection.
   Handles 50,000+ items smoothly through element reuse and virtual scrolling.
   Theoretical max: ~300K items at 60px height (browser element height limits).
   
   Based on reference/nui/css/nui_main.css superlist styles
   Modernized to use NUI theme system and components
*/

/* ################################# LOCAL VARIABLES (with theme fallbacks) */

nui-list {
	/* Spacing - use theme vars if present, otherwise defaults */
	--list-space-xs: var(--nui-space-quarter, 0.25rem);
	--list-space-sm: var(--nui-space-half, 0.5rem);
	--list-space-md: var(--nui-space, 1rem);
	
	/* Colors - map to actual theme variables */
	--list-surface: var(--color-shade1, rgb(250, 250, 250));
	--list-surface-hover: var(--color-shade2, rgb(240, 240, 240));
	--list-border: var(--border-shade1, rgb(235, 235, 235));
	--list-text: var(--color-text, rgb(30, 30, 30));
	--list-text-secondary: var(--color-text-dim, rgb(80, 80, 80));
	--list-text-tertiary: var(--color-text-muted, rgb(100, 100, 100));
	--list-shade-1: var(--color-shade1, rgb(250, 250, 250));
	--list-shade-2: var(--color-shade2, rgb(240, 240, 240));
	--list-shade-3: var(--color-shade3, rgb(230, 230, 230));
	
	/* Accent colors */
	--list-accent-subtle: var(--color-highlight, rgb(76, 132, 229));
	--list-accent-text: var(--color-white, rgb(255, 255, 255));
	
	/* Typography */
	--list-font-size-xs: var(--font-size-xsmall, 0.8rem);
	--list-font-size-sm: var(--font-size-small, 0.9rem);
	
	/* Borders */
	--list-radius-sm: var(--border-radius1, 0.125rem);
}

/* ################################# CONTAINER */

nui-list {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	user-select: none;
}

/* ################################# HEADER */

.nui-list-header {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(15rem, 20rem);
	gap: var(--list-space-md);
	align-items: center;
	min-height: 2.5rem;
	padding: var(--list-space-md);
	background-color: light-dark(var(--color-shade3), var(--color-shade2));
	border: solid thin var(--border-shade2);
	border-bottom: none;
}


.nui-list-sort {
	display: flex;
	align-items: center;
	gap: var(--list-space-sm);
}

.nui-list-sort label {
	white-space: nowrap;
	color: var(--list-text-tertiary);
	font-size: var(--list-font-size-sm);
}

.nui-list-sort nui-select {
	flex: 1;
	max-width: 17rem;
}

.nui-list-sort-direction {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--list-border);
	border-radius: var(--list-radius-sm);
	background-color: var(--color-shade3);
	cursor: pointer;
	transition: background-color 0.2s;
}

.nui-list-sort-direction:hover {
	background-color: var(--list-surface-hover);
}

.nui-list-sort-direction nui-icon {
	transition: transform 0.2s;
}

.nui-list-sort-direction.up nui-icon {
	transform: rotate(-90deg);
}

.nui-list-sort-direction.down nui-icon {
	transform: rotate(90deg);
}

/* ################################# VIEWPORT */

/* Body wrapper - contains viewport and fixed overlay */
.nui-list-body {
	position: relative;
	flex: 1;
	overflow: hidden;
	border: solid thin var(--border-shade2);
}

.nui-list-viewport {
	position: absolute;
	inset: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

.nui-list-container {
	position: relative;
	/* Height set by JS based on item count */
}

/* Fixed mode overlay (for large lists) - positioned over viewport area */
.nui-list-fixed {
	position: absolute;
	top: var(--list-space-md);
	left: var(--list-space-md);
	right: calc(var(--list-space-md) + 1rem);
	bottom: var(--list-space-md);
	overflow: hidden;
	z-index: 2;
	pointer-events: none;
}

.nui-list-fixed > * {
	pointer-events: auto;
	width: 100%;
}

nui-list[data-mode="fixed"] .nui-list-fixed {
	display: block;
	pointer-events: auto;
}

nui-list:not([data-mode="fixed"]) .nui-list-fixed {
	display: none;
}

/* Scrollbar styling */
.nui-list-viewport::-webkit-scrollbar {
	width: var(--space-scrollbar-width);
}

.nui-list-viewport::-webkit-scrollbar-track {
	background: light-dark(var(--color-shade2), var(--color-shade3));
}

.nui-list-viewport::-webkit-scrollbar-thumb {
	background: light-dark(var(--color-shade3), var(--color-shade5));
	min-height: 5rem;
}

.nui-list-viewport::-webkit-scrollbar-thumb:hover {
	background: light-dark(var(--color-shade4), var(--color-shade6));
}

/* ################################# FOOTER */

.nui-list-footer {
	position: relative;
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	align-items: center;
	min-height: 4rem;
	padding: var(--list-space-md);
	background-color: light-dark(var(--color-shade3), var(--color-shade2));
	border: solid thin var(--border-shade2);
	gap: var(--list-space-md);
}

.nui-list-footer-left {
	display: flex;
	align-items: center;
	gap: var(--list-space-sm);
}

.nui-list-footer-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.nui-list-footer-info {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--list-font-size-sm);
	min-height: 1.8rem;
	border-radius: var(--list-radius-sm);
	padding-inline: calc(var(--list-space-md) * 1.5);
	color: var(--list-text-tertiary);
}

.nui-list-footer-right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--list-space-sm);
}

/* ################################# ITEMS (GENERAL) */

.nui-list-item {
	position: absolute;
	left: 0;
	right: 0;
	cursor: pointer;
	transition: background-color 0.15s;
}

.nui-list-item:hover {
	background-color: var(--list-surface-hover);
}

.nui-list-item.selected {
	background-color: var(--list-accent-subtle);
	color: var(--list-accent-text);
}

/* ################################# ITEM VARIANTS */

/* Log item (simple, single line) */
.nui-list-log-item {
	display: flex;
	align-items: center;
	height: 3rem;
	margin-bottom: calc(var(--list-space-xs) * 0.5);
	padding: 0;
	background-color: var(--list-shade-2);
	color: var(--list-text-secondary);
	font-size: var(--list-font-size-sm);
	border-radius: var(--list-radius-sm);
	overflow: hidden;
}

.nui-list-log-item:hover {
	background-color: var(--list-shade-3);
	color: var(--list-text);
}

.nui-list-log-item.selected {
	background-color: var(--list-accent-subtle);
}

.nui-list-log-item > div:nth-child(1) {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 100%;
	background-color: var(--list-shade-1);
	font-size: var(--list-font-size-xs);
	text-align: center;
	pointer-events: none;
}

.nui-list-log-item > div:nth-child(2) {
	display: flex;
	align-items: center;
	flex: 1;
	padding-inline: var(--list-space-md);
	height: 100%;
	pointer-events: none;
}

.nui-list-log-item > div:nth-child(3) {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 12rem;
	height: 100%;
	margin-left: auto;
	background-color: var(--list-shade-1);
	font-size: var(--list-font-size-sm);
	padding-left: 1rem;
	opacity: 0.7;
	pointer-events: none;
}

/* Standard list item (with image/thumbnail support) */
.nui-list-standard-item {
	display: flex;
	align-items: center;
	height: 4rem;
	margin-bottom: calc(var(--list-space-xs) * 0.5);
	padding: 0;
	background-color: var(--list-shade-2);
	color: var(--list-text-secondary);
	border-radius: var(--list-radius-sm);
	overflow: hidden;
}

.nui-list-standard-item:hover {
	background-color: var(--list-shade-3);
	color: var(--list-text);
}

.nui-list-standard-item.selected {
	background-color: var(--list-accent-subtle);
}

/* Index column */
.nui-list-standard-item > div:nth-child(1) {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3rem;
	height: 100%;
	background-color: var(--list-shade-1);
	font-size: var(--list-font-size-xs);
	text-align: center;
	pointer-events: none;
}

/* Image/thumbnail column */
.nui-list-standard-item > div:nth-child(2) {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(4rem * 1.77); /* 16:9 aspect ratio */
	height: 100%;
	background-color: var(--list-shade-1);
	pointer-events: none;
}

.nui-list-standard-item > div:nth-child(2) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s ease-out;
}

/* Name/title column */
.nui-list-standard-item > div:nth-child(3) {
	display: flex;
	align-items: center;
	flex: 1;
	padding-inline: var(--list-space-md);
	height: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
}

/* Info/meta column */
.nui-list-standard-item > div:nth-child(4) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	width: 12rem;
	height: 100%;
	padding-inline: var(--list-space-sm);
	background-color: var(--list-shade-1);
	font-size: var(--list-font-size-sm);
	pointer-events: none;
	gap: calc(var(--list-space-xs) * 0.5);
}

.nui-list-standard-item > div:nth-child(4) div:nth-child(2) {
	opacity: 0.6;
}

/* Image item (for lazy loading demos) */
.nui-list-image-item {
	display: flex;
	align-items: center;
	height: 4rem;
	margin-bottom: calc(var(--list-space-xs) * 0.5);
	padding: 0;
	background-color: var(--list-shade-2);
	color: var(--list-text-secondary);
	border-radius: var(--list-radius-sm);
	overflow: hidden;
}

.nui-list-image-item:hover {
	background-color: var(--list-shade-3);
	color: var(--list-text);
}

.nui-list-image-item.selected {
	background-color: var(--list-accent-subtle);
}

/* Index column */
.nui-list-image-item > div:nth-child(1) {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3.5rem;
	height: 100%;
	background-color: var(--list-shade-1);
	font-size: var(--list-font-size-xs);
	text-align: center;
	pointer-events: none;
	flex-shrink: 0;
}

/* Image cell */
.nui-list-image-item > .image-cell {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4rem;
	height: 100%;
	background-color: var(--list-shade-1);
	overflow: hidden;
	flex-shrink: 0;
}

.nui-list-image-item > .image-cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease-out;
}

/* Name column */
.nui-list-image-item > div:nth-child(3) {
	display: flex;
	align-items: center;
	flex: 1;
	padding-inline: var(--list-space-md);
	height: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
	min-width: 0;
}

/* Date column */
.nui-list-image-item > div:nth-child(4) {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 10rem;
	height: 100%;
	padding-inline: var(--list-space-sm);
	background-color: var(--list-shade-1);
	font-size: var(--list-font-size-sm);
	pointer-events: none;
	flex-shrink: 0;
	opacity: 0.7;
}

/* ################################# RESPONSIVE */

@media only screen and (max-width: 768px) {
	.nui-list-header {
		grid-template-columns: 1fr;
		gap: var(--list-space-sm);
	}
	
	.nui-list-footer {
		grid-template-columns: 1fr;
		gap: var(--list-space-sm);
	}
	
	.nui-list-footer-left,
	.nui-list-footer-center,
	.nui-list-footer-right {
		justify-content: center;
	}
	
	/* Hide meta columns on mobile */
	.nui-list-standard-item > div:nth-child(1),
	.nui-list-standard-item > div:nth-child(4) {
		display: none;
	}
}

/* ################################# UTILITIES */

/* Hide scrollbar when not needed */
nui-list[data-scroll="false"] .nui-list-viewport {
	overflow-y: hidden;
}

/* Compact mode - smaller items */
nui-list[data-compact="true"] .nui-list-log-item {
	height: 2rem;
	font-size: calc(var(--list-font-size-sm) * 0.9);
}

nui-list[data-compact="true"] .nui-list-standard-item {
	height: 3rem;
}

/* Loading state */
nui-list[data-loading="true"] .nui-list-viewport {
	opacity: 0.5;
	pointer-events: none;
}