$sy-table-radius: 8px;
$sy-table-border: 1px solid rgb(var(--v-theme-disabled));

@mixin tablestyles {
	.v-table {
		border: $sy-table-border;
		border-radius: $sy-table-radius;
		overflow: hidden;

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

		// 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);
	}

	.sy-table-bulk-actions {
		border: $sy-table-border;
		border-bottom: 0;
		border-radius: $sy-table-radius $sy-table-radius 0 0;
	}

	.sy-table-bulk-actions + .v-table {
		border-top: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	table thead tr {
		white-space: nowrap;
	}

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

	caption {
		background-color: rgb(var(--v-theme-infoVariant90));
	}

	table thead tr.headers,
	table thead tr.reset {
		background-color: rgba(var(--v-theme-infoVariant), 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;
	}

	// Aligner la checkbox de sélection de ligne sur celle de l'en-tête :
	// la cellule d'en-tête a 16px de padding-left, la cellule de ligne 8px par défaut.
	.v-data-table__td--select-row {
		padding-left: 16px;
	}

	// Centrer le focus ring sur la case à cocher
	.v-selection-control--focus-visible {
		outline: none;
	}

	.v-selection-control--focus-visible .v-selection-control__input {
		outline: 2px solid rgb(var(--v-theme-primary));
		outline-offset: 2px;
		border-radius: 4px;
	}

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

	// Focus clavier fortement contrasté sur les boutons du tableau
	// (pagination, redimensionnement, boutons d'actions…) : anneau primaire 2px
	// avec décalage, homogène avec le focus des cases à cocher.
	.v-btn:focus-visible,
	.resizer:focus-visible {
		outline: 2px solid rgb(var(--v-theme-primary));
		outline-offset: 2px;
	}

	// 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;
	}

	// Fond réservé au survol : au focus clavier, on ne veut que le ring (ci-dessus), pas de fond.
	.v-table tbody > tr.sy-table__clickable-row:hover > td,
	.v-table tbody > tr.sy-table__clickable-row:hover > .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 {
		background-color: rgba(var(--v-theme-primary), 0.08) !important;
	}
}