/* Styles for the custom Bootstrap-based UI components (replaces the former DevExpress dx.css). */

/*********************************
 grid
 *********************************/

.ui-grid {
	border-radius: 4px;
	border: 1px solid rgb(222, 226, 230);
	position: relative;
}

.ui-grid-scroll {
	overflow: auto;
	max-height: 500px;
	border-radius: 4px;
}

.ui-grid.h-100 .ui-grid-scroll {
	max-height: 1000px;
}

.ui-grid-table {
	margin-bottom: 0;
	border-collapse: separate;
	border-spacing: 0;
}

/* Sticky thead — only data rows scroll, header+filter stay at top */
.ui-grid-table thead {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.ui-grid-table thead th {
	white-space: nowrap;
}

.ui-grid-header-row th {
	padding: 8px !important;
	font-size: 14px;
	font-weight: 600;
	border-bottom: 1px solid #dddddd;
	border-right: 1px solid rgb(180, 186, 192) !important;
	vertical-align: middle;
	background-color: rgb(244, 244, 244) !important;
}
.ui-grid-header-row th:last-child {
	border-right: none;
}

/* Gray header background — matches UAT ::before at 5% opacity */
.ui-grid-header-row th::before {
	display: none;
}

.ui-grid-header-row th.sortable {
	cursor: pointer;
	user-select: none;
}

.ui-grid-filter-row th {
	padding: 4px 6px !important;
	border-top: 1px solid rgb(222, 226, 230) !important;
	border-bottom: 2px solid #dddddd !important;
	border-right: 1px solid rgb(200, 205, 210) !important;
	background-color: #fff;
}
.ui-grid-filter-row th:last-child {
	border-right: none !important;
}

.ui-grid-filter-row .form-control,
.ui-grid-filter-row .form-select {
	font-size: 15px;
	height: auto !important;
	background-color: #fff !important;
	border: none !important;
	box-shadow: none !important;
	padding: 4px 6px !important;
}
/* Dropdown (select) filter fields — borderless, fills cell, arrow visible */
.ui-grid-filter-row .form-select {
	border: none !important;
	box-shadow: none !important;
	padding-right: 2rem !important;
	width: 100%;
}

.ui-grid-table tbody tr {
	height: 30px;
}

.ui-grid-table tbody td {
	font-size: 15px;
	padding: 4px 6px;
	vertical-align: middle;
	border-bottom: 1px solid rgb(222, 226, 230);
	border-right: 1px solid rgb(222, 226, 230) !important;
}
.ui-grid-table tbody td:last-child {
	border-right: none;
}

.ui-grid.interactive tbody tr.ui-grid-row:hover {
	cursor: pointer;
	background-color: #e6ebff;
}

.ui-grid-empty-row td {
	cursor: default;
	padding: 20px 0 !important;
}

.ui-grid .command-buttons {
	display: inline-flex;
}

.ui-grid .command-buttons .btn {
	padding: 0 !important;
}

.ui-grid .command-buttons button:not(:first-child) {
	margin-left: 4px;
}

/* Boolean/Active checkbox in grid cells — styled to match UAT blue appearance */
.ui-grid-table tbody td input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 1rem;
	height: 1rem;
	border: 1px solid #ced4da;
	border-radius: 0.25em;
	background-color: #fff;
	cursor: default;
	flex-shrink: 0;
	vertical-align: middle;
	display: block;
	margin: 0 auto;
}
.ui-grid-table tbody td input[type="checkbox"]:checked {
	background-color: #0070c4;
	border-color: #0070c4;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* grid toolbar */

.ui-grid-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 8px;
	padding: 8px 8px 0 0;
}

.ui-grid-toolbar-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* column chooser */

.ui-grid-column-chooser {
	position: absolute;
	z-index: 1050;
	right: 24px;
	min-width: 220px;
	background: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	padding: 8px 0;
}

.ui-grid-column-chooser-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 12px 8px 12px;
	border-bottom: 1px solid #eeeeee;
	font-weight: bold;
}

.ui-grid-column-chooser-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	cursor: pointer;
}

.ui-grid-column-chooser-item:hover {
	background-color: #f6f6f6;
}

.btn-grid {
	font-size: 14px;
	padding: 4px 10px;
	background-color: #fff;
	color: rgb(33, 37, 41);
	border: 1px solid rgb(222, 226, 230);
	border-radius: 4px;
}
.btn-grid:hover {
	background-color: #f8f9fa;
	border-color: rgb(200, 204, 208);
}

.btn-grid-100 {
	font-size: 14px;
	padding: 4px 10px;
	width: 100%;
}

/*********************************
 editors (text box, combo box, spin edit, memo)
 *********************************/

.ui-textbox,
.ui-combobox,
.ui-spinedit,
.ui-memo {
	font-size: 17px;
	padding: 15px;
}

/* Wrapper div (input-group.ui-textbox) must NOT inherit the 15px padding */
div.ui-textbox,
.input-group.ui-textbox {
	padding: 0;
}

/* Normalise TextBox/ComboBox to same height regardless of rendering mode or CssClass on wrapper */
/* Bootstrap rendering mode (local dev): ui-textbox is on the wrapper, not the input */
.input-group.ui-textbox .form-control {
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	padding-left: 12px !important;
	padding-right: 40px !important; /* space for clear button */
}
/* dxbl rendering mode (UAT/production) */
.dxbl-text-edit .dxbl-text-edit-input {
	padding-top: 15px !important;
	padding-bottom: 15px !important;
}

.input-group .ui-textbox,
.input-group .form-control {
	font-size: 17px;
}

.ui-textbox[readonly],
.input-group .ui-textbox[readonly] {
	background-color: #ffffff;
}

.editor-button {
	background-color: transparent !important;
	border: 1px solid var(--bs-border-color);
	border-left: 0;
}

.editor-button:hover {
	background-color: rgba(0, 0, 0, 0.02) !important;
}

/* hide native number spinners when spin buttons are disabled */

.ui-spinedit.no-spin::-webkit-outer-spin-button,
.ui-spinedit.no-spin::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ui-spinedit.no-spin {
	-moz-appearance: textfield;
}

::placeholder {
	color: #bbbbbb !important;
}

/*********************************
 accordion
 *********************************/

.ui-accordion .accordion-button {
	font-size: 17px !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;
	color: #3778c8 !important;
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
	isolation: isolate;
	background-color: transparent !important;
}

/* Light gray default background — matches UAT's ::before at 5% opacity */
.ui-accordion .accordion-button::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgb(33, 37, 41);
	opacity: 0.10;
	z-index: -1;
	pointer-events: none;
}

/* Expanded state: keep gray (do not override to white) */
.ui-accordion .accordion-button:not(.collapsed) {
	color: #3778c8 !important;
	background-color: transparent !important;
	box-shadow: none;
}
.ui-accordion .accordion-button:not(.collapsed)::before {
	opacity: 0.10;
}

/* Hover: darker gray — matches UAT at ~10% opacity */
.ui-accordion .accordion-header:hover .accordion-button::before {
	opacity: 0.18;
}

.ui-accordion .accordion-button:focus {
	box-shadow: none;
	border-color: rgba(0, 0, 0, 0.125);
}

.ui-accordion .accordion-body {
	padding: 0;
}

.ui-accordion .accordion-item-text {
	padding-top: 2px;
}

.pane {
	padding: 16px;
}

/*********************************
 alerts
 *********************************/

.alert {
	font-size: 14px;
	line-height: 1.43;
}

/*********************************
 tabs
 *********************************/

.ui-tabs {
	border-bottom: none !important;
}

.ui-tab-content {
	margin-top: 16px;
}

.ui-tabs .nav-link {
	padding: 8px 16px;
	font-size: 16px;
	height: 42px;
	min-width: 95px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0 !important;
	color: #0070C4 !important;
	border: 1px solid #99c2ff !important;
}
/* Left button: round left corners only */
.ui-tabs .nav-item:first-child .nav-link {
	border-radius: 6px 0 0 6px !important;
}
/* Right button: round right corners only; collapse shared border */
.ui-tabs .nav-item:last-child .nav-link {
	border-radius: 0 6px 6px 0 !important;
	margin-left: -1px;
}

.ui-tabs .nav-link:hover {
	color: #0070C4 !important;
	background-color: #ebf2fa !important;
	border-color: #99c2ff !important;
}

.ui-tabs .nav-link.active {
	background-color: #ebf2fa !important;
	border-color: #99c2ff !important;
	color: #0070C4 !important;
}

/*********************************
 tooltip (JS-managed floating element)
 *********************************/

.ui-tooltip {
	padding: 14px;
	width: max-content;
	max-width: 400px;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	z-index: 2000;
}

.ui-tooltip p:last-child {
	margin-bottom: 0;
}

/*********************************
 utilities (retained from previous stylesheet)
 *********************************/

.rich-edit {
	width: 100%;
	max-height: 400px;
}

.h-100-percent {
	height: 100%;
}

.w-min-400px {
	min-width: 400px;
}

.w-100-percent {
	width: 100%;
}

.w-100 {
	width: 100%;
}

.row:last-child {
	padding-bottom: 0 !important;
}