/**
 * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
 * Copyright 2025 by Keenthemes Inc
 */

@layer components {
	.kt-datatable-toolbar {
		@apply py-3 px-4 flex justify-center sm:justify-between flex-col sm:flex-row gap-3 text-muted-foreground text-sm font-medium border-t border-border;
	}

	.kt-datatable-pagination {
		@apply flex items-center gap-1;

		.kt-datatable-pagination-button {
			@apply cursor-pointer bg-transparent inline-flex h-7 min-w-7 px-0.5 rounded-md items-center justify-center text-muted-foreground;

			&.active,
			&:hover:not(:disabled) {
				@apply bg-accent text-accent-foreground;
			}

			&.kt-datatable-pagination-prev {
				@apply text-foreground;
			}

			&.kt-datatable-pagination-next {
				@apply text-foreground;
			}

			&.kt-datatable-pagination-more {
			}

			&:disabled {
				@apply text-muted-foreground cursor-default;
			}
		}
	}

	.kt-datatable-length {
		@apply flex items-center gap-2 whitespace-nowrap;
	}

	.kt-datatable-info {
		@apply flex items-center gap-4;
	}

	.kt-datatable-loading {
		@apply flex items-center gap-2 px-4 py-2 font-medium leading-none text-sm border border-border rounded-md bg-card text-card-foreground shadow-xs shadow-[rgba(0,0,0,0.05)];
	}

	/* Overlay styles */
	.kt-datatable-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	/* Ensure proper positioning for the table container */
	[data-kt-datatable] {
		position: relative;
	}

	/* Style when table is loading */
	[data-kt-datatable].loading table {
		opacity: 0.6;
	}

	/* Locked layout styles */
	[data-kt-datatable] .kt-datatable-locked-layout {
		position: relative;
	}

	[data-kt-datatable]
		.kt-datatable-locked-layout
		[data-kt-datatable-table]
		thead.kt-datatable-locked-header-section {
		/* Sticky thead group — opaque surface, no gap above first body row */
		background-color: color-mix(
			in srgb,
			var(--color-muted, rgb(0, 0, 0)) 40%,
			var(--color-card, var(--color-background, #ffffff))
		) !important;
	}

	/* Sticky columns use border-collapse: separate — per-cell borders replace tr border-b */
	[data-kt-datatable]
		.kt-datatable-locked-layout.kt-datatable-locked-layout-separate
		[data-kt-datatable-table]
		thead
		tr {
		@apply border-b-0;
	}

	[data-kt-datatable]
		.kt-datatable-locked-layout.kt-datatable-locked-layout-separate
		[data-kt-datatable-table]
		thead
		th {
		@apply border-b border-border;
	}

	[data-kt-datatable]
		.kt-datatable-locked-layout.kt-datatable-locked-layout-separate
		[data-kt-datatable-table]
		tbody
		tr {
		@apply border-b-0;
	}

	[data-kt-datatable]
		.kt-datatable-locked-layout.kt-datatable-locked-layout-separate
		[data-kt-datatable-table]
		tbody
		td {
		@apply border-b border-border;
	}

	[data-kt-datatable]
		.kt-datatable-locked-layout.kt-datatable-locked-layout-separate
		[data-kt-datatable-table]
		tbody
		tr:last-child
		td {
		@apply border-b-0;
	}

	[data-kt-datatable] .kt-datatable-locked-cell {
		overflow: hidden;
		isolation: isolate;
		/* Opaque surface so horizontally scrolling cells do not show through */
		background-color: var(--color-card, var(--color-background, #ffffff)) !important;
	}

	[data-kt-datatable] [data-kt-datatable-table] thead th.kt-datatable-locked-cell,
	[data-kt-datatable] .kt-datatable-locked-header {
		/* Match kt-table thead bg-muted/40 without transparency */
		background-color: color-mix(
			in srgb,
			var(--color-muted, rgb(0, 0, 0)) 40%,
			var(--color-card, var(--color-background, #ffffff))
		) !important;
	}

	[data-kt-datatable] .kt-datatable-locked-left {
		box-shadow: inset -1px 0 0 0 var(--color-border, rgba(0, 0, 0, 0.08));
	}

	[data-kt-datatable] .kt-datatable-locked-right {
		box-shadow: inset 1px 0 0 0 var(--color-border, rgba(0, 0, 0, 0.08));
	}

	/* Keep row hover/checked visual states on sticky body cells */
	[data-kt-datatable] [data-kt-datatable-table] tbody tr:hover > .kt-datatable-locked-cell {
		/* Match kt-table row hover bg-muted/50 without transparency */
		background-color: color-mix(
			in srgb,
			var(--color-muted, rgb(0, 0, 0)) 50%,
			var(--color-card, var(--color-background, #ffffff))
		) !important;
	}

	[data-kt-datatable] [data-kt-datatable-table] tbody tr.checked > .kt-datatable-locked-cell {
		background-color: var(--color-muted, rgb(0, 0, 0)) !important;
	}
}

@custom-variant kt-datatable-loading {
	&.[data-kt-datatable].loading {
		@slot;
	}
	[data-kt-datatable].loading & {
		@slot;
	}
}

@custom-variant kt-datatable-initialized {
	&.[data-kt-datatable].initialized {
		@slot;
	}
	[data-kt-datatable].initialized & {
		@slot;
	}
}

@custom-variant kt-datatable-sort-asc {
	&.[aria-sort='asc']:where([data-kt-datatable] *) {
		@slot;
	}
	[data-kt-datatable] [aria-sort='asc'] & {
		@slot;
	}
}

@custom-variant kt-datatable-sort-desc {
	&.[aria-sort='desc']:where([data-kt-datatable] *) {
		@slot;
	}
	[data-kt-datatable] [aria-sort='desc'] & {
		@slot;
	}
}