@mixin tablestyles {
	.v-table {
		border: 1px solid rgb(var(--v-theme-grey-lighten80));

		--sy-table-header-bg-pinned: color-mix(in srgb, rgb(var(--v-theme-blue-lighten80)) 20%, white);

		// Standardisation des z-index pour les tableaux
		--sy-table-z-base: 1;
		--sy-table-z-pinned-cell: calc(var(--sy-table-z-base) + 2);
		--sy-table-z-pinned-header: calc(var(--sy-table-z-base) + 4);
		--sy-table-z-progress: calc(var(--sy-table-z-base) + 5);
	}

	table thead tr {
		white-space: nowrap;
	}

	table thead tr.filters,
	table thead tr.reset {
		background-color: rgb(var(--v-theme-blue-lighten90));
	}

	caption,
	table thead tr.headers,
	table thead tr.reset {
		background-color: rgba(var(--v-theme-blue-lighten80), 0.2);
	}

	&.fixed-min-height {
		.v-data-table__wrapper {
			min-height: 540px;
		}
	}

	&.no-mobile-header {
		.v-data-table-header-mobile {
			display: none;
		}
	}

	.v-field {
		&--active {
			.v-field__prepend-inner > .v-icon,
			.v-field__append-inner > .v-icon,
			.v-field__clearable > .v-icon {
				opacity: 1;
				color: rgb(var(--v-theme-primary));
			}
		}

		&--focused {
			border-color: rgb(var(--v-theme-primary));
			color: rgb(var(--v-theme-primary));
		}
	}

	// Override Vuetify's checkbox styles to use primary color
	.v-table .v-selection-control {
		color: rgb(var(--v-theme-primary)) !important;
	}

	.v-table .v-selection-control--dirty .v-selection-control__input::before {
		background-color: rgb(var(--v-theme-primary)) !important;
		border-color: rgb(var(--v-theme-primary)) !important;
	}

	// Target the header checkbox specifically
	.v-data-table-header__checkbox .v-selection-control {
		color: rgb(var(--v-theme-primary)) !important;
	}

	// Target the row checkboxes specifically
	.v-data-table-row__checkbox .v-selection-control {
		color: rgb(var(--v-theme-primary)) !important;
	}

	// Add a global style for all checkboxes in the table
	.v-checkbox .v-selection-control__input::before,
	.v-checkbox-btn .v-selection-control__input::before {
		border-color: rgb(var(--v-theme-primary)) !important;
	}

	.v-data-table-rows-no-data {
		color: rgb(var(--v-theme-grey-base));
	}

	// Ensure loading progress bar appears above sticky/pinned header cells
	.v-data-table-progress th {
		position: sticky;
		top: 0;
		z-index: var(--sy-table-z-progress);
	}
}

@mixin clickable-row-styles {
	.v-table tbody > tr.sy-table__clickable-row,
	.v-data-table__tbody > tr.sy-table__clickable-row {
		cursor: pointer !important;
		outline-offset: -2px;
	}

	.v-table tbody > tr.sy-table__clickable-row:focus-visible,
	.v-data-table__tbody > tr.sy-table__clickable-row:focus-visible {
		outline: 2px solid rgb(var(--v-theme-primary));
	}

	.v-table tbody > tr.sy-table__clickable-row > td,
	.v-table tbody > tr.sy-table__clickable-row > .v-data-table__td,
	.v-data-table__tbody > tr.sy-table__clickable-row > td,
	.v-data-table__tbody > tr.sy-table__clickable-row > .v-data-table__td {
		cursor: pointer !important;
		transition: background-color 0.15s ease;
	}

	.v-table tbody > tr.sy-table__clickable-row:hover > td,
	.v-table tbody > tr.sy-table__clickable-row:hover > .v-data-table__td,
	.v-table tbody > tr.sy-table__clickable-row:focus-visible > td,
	.v-table tbody > tr.sy-table__clickable-row:focus-visible > .v-data-table__td,
	.v-data-table__tbody > tr.sy-table__clickable-row:hover > td,
	.v-data-table__tbody > tr.sy-table__clickable-row:hover > .v-data-table__td,
	.v-data-table__tbody > tr.sy-table__clickable-row:focus-visible > td,
	.v-data-table__tbody > tr.sy-table__clickable-row:focus-visible > .v-data-table__td {
		background-color: rgba(var(--v-theme-primary), 0.08) !important;
	}
}