/*---------------------------------------------------------------------------------------- */
/* GENERAL STYLE IMPROVEMENTS                                                              */
/*---------------------------------------------------------------------------------------- */

/* Allows the Data Grid (and its children) to occupy the maximum allowable space on screen. */
self:not(.DataModel) {
  max-width: 100%;
  min-width: 100%;
}

/* For better Data Field label spacing */
label {
	width: 160px; /* Change as desired based on the width of your labels */
}

/* For better default spacing between Data Fields. */
.DataField {
  padding: 1px; /* 1px creates similar spacing to cells in a Data Table. */
}

/* Card-style outline for Data Sections and Data Tables. "DataGridCollection" is for multi-instance Data Sections' parent container. */
.DataSection,
.DataTable,
.DataGridCollection {
  padding: 8px;
  padding-right: 0px;
  margin: 8px;
  margin-left: 0px;
  width: auto;
  border: 1px solid rgba(var(--fg-color-rgb),0.1);
  border-radius: 8px;
  order: 1;
}

/* Changes Data Section & Data Table border color when hovering with a cursor. */
.DataSection:hover,
.DataTable:hover,
.DataGridCollection:hover {
	border-color: rgba(var(--fg-color-rgb),0.35);
}

/* (dark mode only) Changes Data Section & Data Table border color when selecting them before their fields */
.dark-mode .DataSection:focus-within,
.dark-mode .DataGridCollection:focus-within {
	border-color: var(--grp-teal-1);
}

/* (light mode only) Changes Data Section & Data Table border color when selecting them before their fields */
.lite-mode .DataSection:focus-within,
.lite-mode .DataGridCollection:focus-within {
	border-color: var(--grp-teal-2);
}

/* Hides outline for records in multi-instance Data Sections */
.DataGridCollection > .DataSection { 
  border: none;
  padding: 0px; /* Standardizes alignment better */
}

/*---------------------------------------------------------------------------------------- */
/* USER PREFERENCE - Added by the author according to thier preference. Remove if desired. */
/*---------------------------------------------------------------------------------------- */

/* Prevents field inputs from wraping based on the size of the Data Grid window. */
.DataField {
	white-space: nowrap;
}

/* Prevents Data Section & Data Table captions from wrapping. */
.caption {
	white-space: nowrap;
	margin-right: 8px; /* Standardizes look based on other elements */
}

/* Prevents fields from visually overflowing their container. */
.DataGridContainer * {
	overflow: clip;
}

/* Standardizes overflow look based on other elements */
.DataTable > .scroll-container {
	width: calc(100% - 8px);
  margin-right: 8px;
}

/*---------------------------------------------------------------------------------------- */
/* CUSTOM CLASSES - Impliment these by adding them to a Data Element's CSS Class property. */
/*---------------------------------------------------------------------------------------- */

/* blur - Adds a visual blur effect if the field is not being reviewed (not focused). */
.blur:not(:focus-within) > *:not(.caption) {
  filter: blur(4px);
}

/* AutoHieght - For multi-line Data Fields/Data Columns. Automatically adjusts the height of these fields to fit the entire text on screen. Add class to the Data Table to adjust Data Columns behaior.*/
.AutoHeight > .DataValue {
  min-height: 24px;
  height: 100% !important;
  max-height: fit-content !important;
  overflow-y: visible;
}

.AutoHeight > .scroll-container > div > table div {
  min-height: 24px;
  height: 100% !important;
  max-height: fit-content !important;
  overflow-y: visible;
}

.AutoHeight > .scroll-container > div > table tbody tr td select {
  height: 100%;
}
.AutoHeight .cell {
  height: 100%; /* This adjusts the height of the Data Table's rows as a single cell's height increases.*/
}