/*
 * DevExtreme 20.2 grids in the « Graff soigné » charter.
 * Loaded after styles.css (which imports dx.common.css + dx.light.css from the CDN), so it wins on equal specificity.
 * Plain CSS: the values are the tokens of src/graff.js, copied by hand.
 *   wall #ECE8E0 · surface #FFFFFF · sunken #F4F1EA · ink #151515 · muted #57524A · subtle #6E6960
 *   border rgba(21,21,21,.10) · borderStrong rgba(21,21,21,.22)
 *   cyan #1FD1F9 · cyanInk #0A6E86 · cyanSoft #DDF7FE · pink #FF2E88
 */

/*---------------------------- Font and text ----------------------------*/
.dx-widget,
.dx-widget input,
.dx-widget textarea {
	font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.dx-widget {
	color: #151515;
}

/*---------------------------- The grid as a card ----------------------------*/
.dx-datagrid {
	background-color: transparent;
	color: #151515;
}
.dx-datagrid.dx-datagrid-borders {
	background-color: #FFFFFF;
	border: 1px solid rgba(21, 21, 21, .10);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(40, 30, 10, .05), 0 2px 6px rgba(40, 30, 10, .04);
}
/* the card carries the outer border: none on the inner blocks */
.dx-datagrid-borders > .dx-datagrid-headers,
.dx-datagrid-borders > .dx-datagrid-rowsview,
.dx-datagrid-borders > .dx-datagrid-total-footer,
.dx-datagrid-borders > .dx-datagrid-filter-panel {
	border-left: none;
	border-right: none;
}
.dx-datagrid-borders > .dx-datagrid-headers {
	border-top: none;
}
.dx-datagrid-borders > .dx-datagrid-rowsview,
.dx-datagrid-borders > .dx-datagrid-total-footer {
	border-bottom: none;
}

/*---------------------------- Toolbar (search) ----------------------------*/
.dx-datagrid-header-panel {
	padding: 12px 16px 0;
	background-color: transparent;
	border-bottom: none;
}
.dx-datagrid-header-panel .dx-toolbar {
	background-color: transparent;
	margin-bottom: 12px;
}

/*---------------------------- Column headers ----------------------------*/
.dx-datagrid-headers {
	background-color: #F4F1EA;
	color: #57524A;
	font-weight: 600;
	border-bottom: 1px solid rgba(21, 21, 21, .10);
}
.dx-datagrid-headers .dx-header-row > td,
.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
	border-bottom: none;
	color: #57524A;
	font-weight: 600;
	font-size: 13px;
}
.dx-datagrid-headers .dx-header-row > td {
	padding-top: 12px;
	padding-bottom: 12px;
}
.dx-datagrid-headers .dx-header-row .dx-sort,
.dx-datagrid-headers .dx-header-row .dx-header-filter {
	color: #6E6960;
}

/*---------------------------- Rows ----------------------------*/
/* the grids set "padding: 6px 20px !important" on their cells (makeStyles): only the vertical padding is opened up */
.dx-datagrid .dx-datagrid-rowsview .dx-row > td {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	vertical-align: middle;
}
.dx-datagrid-rowsview .dx-row {
	border-top: 1px solid rgba(21, 21, 21, .10);
	border-bottom: 1px solid rgba(21, 21, 21, .10);
}
.dx-datagrid-rowsview .dx-row.dx-row-lines:first-child,
.dx-datagrid-rowsview .dx-row.dx-row-lines:first-child > td {
	border-top: none;
}
.dx-datagrid .dx-row-lines > td {
	border-bottom: 1px solid rgba(21, 21, 21, .10);
}
.dx-datagrid .dx-column-lines > td {
	border-left: 1px solid rgba(21, 21, 21, .06);
	border-right: 1px solid rgba(21, 21, 21, .06);
}
.dx-datagrid-rowsview .dx-row.dx-row-alt > td,
.dx-datagrid-rowsview .dx-row.dx-row-alt > tr > td {
	background-color: #FAF8F4;
	border-top-color: transparent;
	border-bottom-color: transparent;
}
.dx-datagrid-rowsview .dx-row.dx-data-row:hover > td,
.dx-datagrid-rowsview .dx-row.dx-data-row.dx-state-hover > td {
	background-color: #F4F1EA;
}
.dx-datagrid-rowsview .dx-selection.dx-row > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td {
	background-color: #DDF7FE;
	color: #151515;
}
.dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused),
.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link {
	background-color: #DDF7FE;
	color: #151515;
}
.dx-datagrid-rowsview .dx-datagrid-nodata {
	color: #6E6960;
}
/* highlighted search text */
.dx-datagrid-search-text {
	background-color: #FFE3EF;
	color: #E0146E;
	border-radius: 3px;
}

/*---------------------------- Search box ----------------------------*/
.dx-datagrid-search-panel.dx-texteditor.dx-editor-outlined,
.dx-datagrid-search-panel.dx-texteditor {
	border-radius: 999px;
	border: 1px solid rgba(21, 21, 21, .10);
	background-color: #FFFFFF;
	box-shadow: 0 1px 2px rgba(40, 30, 10, .05), 0 2px 6px rgba(40, 30, 10, .04);
	transition: box-shadow .2s, border-color .2s;
}
.dx-datagrid-search-panel.dx-texteditor.dx-state-hover {
	border-color: rgba(21, 21, 21, .22);
}
.dx-datagrid-search-panel.dx-texteditor.dx-state-focused,
.dx-datagrid-search-panel.dx-texteditor.dx-state-active {
	border-color: #1FD1F9;
	box-shadow: 0 0 0 4px rgba(31, 209, 249, .25);
}
.dx-datagrid-search-panel .dx-texteditor-input {
	color: #151515;
}
.dx-datagrid-search-panel .dx-placeholder::before,
.dx-datagrid-search-panel .dx-icon-search {
	color: #6E6960;
}

/*---------------------------- Pager ----------------------------*/
.dx-datagrid-pager.dx-pager {
	padding: 10px 16px;
	border-top: 1px solid rgba(21, 21, 21, .10);
	color: #57524A;
}
.dx-pager .dx-pages .dx-page,
.dx-pager .dx-page-sizes .dx-page-size {
	border-radius: 999px;
	padding: 6px 11px;
	min-width: 32px;
	text-align: center;
	font-weight: 600;
	color: #57524A;
	transition: background-color .15s, color .15s;
}
.dx-pager .dx-pages .dx-page:hover,
.dx-pager .dx-page-sizes .dx-page-size:hover {
	background-color: #F4F1EA;
	color: #151515;
}
.dx-pager .dx-pages .dx-selection,
.dx-pager .dx-page-sizes .dx-selection,
.dx-pager .dx-pages .dx-selection:hover,
.dx-pager .dx-page-sizes .dx-selection:hover {
	background-color: #1FD1F9;
	color: #151515;
}
.dx-pager .dx-info {
	color: #6E6960;
}
.dx-pager .dx-navigate-button {
	border-radius: 999px;
	color: #57524A;
}

/*---------------------------- Row actions ----------------------------*/
.dx-datagrid-rowsview .dx-button {
	background-color: transparent;
	border-color: transparent;
	border-radius: 999px;
	box-shadow: none;
	transition: background-color .15s;
}
.dx-datagrid-rowsview .dx-button .dx-icon {
	color: #57524A;
}
.dx-datagrid-rowsview .dx-button.dx-state-hover,
.dx-datagrid-rowsview .dx-button:hover {
	background-color: #F4F1EA;
}
.dx-datagrid-rowsview .dx-button.dx-state-hover .dx-icon,
.dx-datagrid-rowsview .dx-button:hover .dx-icon {
	color: #151515;
}
.dx-datagrid-rowsview .dx-button.dx-state-focused {
	background-color: #F4F1EA;
	box-shadow: 0 0 0 3px #DDF7FE;
}

/*---------------------------- Checkboxes (selection column) ----------------------------*/
.dx-checkbox-icon {
	border-radius: 5px;
	border-color: rgba(21, 21, 21, .22);
}
.dx-checkbox-checked .dx-checkbox-icon {
	background-color: #1FD1F9;
	border-color: #1FD1F9;
	color: #151515;
}
.dx-checkbox.dx-state-focused .dx-checkbox-icon,
.dx-checkbox.dx-state-hover .dx-checkbox-icon {
	border-color: #1FD1F9;
}

/*---------------------------- Load panel ----------------------------*/
.dx-loadpanel-content {
	border-radius: 16px;
	border: 1px solid rgba(21, 21, 21, .10);
	box-shadow: 0 2px 4px rgba(40, 30, 10, .06), 0 18px 40px -10px rgba(40, 30, 10, .20);
	color: #57524A;
}