.ezdatagrid {
	display: grid;
	grid-auto-rows: auto 1fr auto;
	grid-template-columns: var(--ezdatagrid-columns);
	height: 100%
}

.ezdatagrid-header {
	display: grid;
	grid-column: 1/-1;
	grid-template-columns: subgrid
}

.ezdatagrid-body {
	display: grid;
	grid-column: 1/-1;
	grid-template-columns: subgrid;
	grid-template-rows: auto;
	overflow-x: auto;
	scrollbar-gutter: stable;
	align-content: start;
}

.ezdatagrid-footer {
	display: grid;
	grid-column: 1/-2;
	grid-template-columns: subgrid;
	grid-template-rows: auto
}

.ezdatagrid-row {
	display: grid;
	grid-column: 1/-1;
	grid-template-columns: subgrid
}

.ezdatagrid-cell {
	grid-row: 1;
	width: 100%;
	min-width: 0;
}
.ezdatagrid-cell > label {
	width: 100%;
}
.ezdatagrid-cell > label > span {
	display: none;
}

.ezdatagrid-body input,
.ezdatagrid-body select,
.ezdatagrid-body textarea {
	width: 100%;
	min-width: 0;
}

/* Hide or stack columns on mobile */
@media (max-width: 768px) {
	.ezdatagrid {
		grid-template-columns: var(--ezdatagrid-columns-mobile);
	}

	.ezdatagrid-row {
		margin-bottom: 0.5em;
	}

	.ezdatagrid-cell-hide-mobile,
	.ezdatagrid-header-hide-mobile {
		display: none !important;
	}

	.ezdatagrid-cell-stack-mobile {
		grid-row: var(--ezdatagrid-column-stack-index);
		grid-column: var(--ezdatagrid-grid-column-on-mobile) !important;
		width: 100%;
	}

	.ezdatagrid-cell.ezdatagrid-cell-stack-mobile > label > span {
		display: block;
	}

	.ezdatagrid-cell-stack-mobile label {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.ezdatagrid-cell-stack-mobile label > span {
		flex: 0 0 8em; /* Fixed 120px width */
	}

	.ezdatagrid-cell-stack-mobile label > :not(span) {
		flex: 1 1 auto; /* Takes remaining space */
	}

}