@import "grid.css";

:root {
	--kendo-color-primary: #2066a1 !important;
	--kendo-color-primary-hover: #234567 !important;
	--kendo-color-primary-active: #234567 !important;
	--kendo-color-primary-emphasis: #234567 !important;
	--kendo-color-primary-on-subtle: #234567 !important;
	--kendo-color-primary-on-surface: #2066a1 !important;
	--kendo-color-primary-subtle: #e4edf4 !important;
}

/* Dark mode — WrDisplaySettings swaps the Telerik theme stylesheet to the dark swatch (which
   provides all surface/text/border tokens) and sets data-theme="dark" on <html>. Only app-level,
   non-Telerik tweaks belong here. */
html[data-theme="dark"] {
	color-scheme: dark;
}

/* Logo: swap to the white-text variant in dark mode (the SVG is loaded via <img>,
   so its colors can't be reached by app CSS — hence two files). */
.app-logo--dark {
	display: none;
}

html[data-theme="dark"] .app-logo--light {
	display: none;
}

html[data-theme="dark"] .app-logo--dark {
	display: inline;
}

html, body, #app, .main {
	height: 100%;
	min-height: 100%;
	margin: 0;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#app .version {
	font-size: 0.7em;
	font-weight: 100;
	cursor: auto;
	color: #777;
}

/* The login page is server-rendered by WebRock (Pages/Login.cshtml), outside the Blazor app and
   its scoped styles, so its layout lives here rather than in a layout component's own css. */
body.wr-login {
	min-height: 100vh;
	margin: 0;
	background-image: url('/bg.jpg');
	background-size: cover;
	background-position: center center;
	display: flex;
	align-items: center;
	justify-content: center;
}

	body.wr-login > section {
		width: 100%;
		max-width: 400px;
		margin: auto;
	}

	body.wr-login .k-card {
		box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.7);
	}

	body.wr-login .k-form-field {
		margin-bottom: 1em;
	}

	body.wr-login .wr-login-remember {
		display: flex;
		align-items: center;
		gap: 8px;
		cursor: pointer;
	}

	body.wr-login .wr-login-version {
		display: flex;
		justify-content: flex-end;
	}

	body.wr-login .wr-login-error {
		color: var(--kendo-color-error, #cc2233);
	}

#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		position: absolute;
		right: 0.75rem;
		top: 0.5rem;
	}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

	.blazor-error-boundary::after {
		content: "An error has occurred."
	}

/* runtime error */

#blazor-error-ui {
	width: 300px;
	background: rgb(255, 248, 248);
	bottom: 15px;
	left: 15px;
	border-radius: 5px;
	font-size: 14px;
	border: 1px solid red;
}

/* Loading */
#app-loading {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 30px;
}

	#app-loading img {
		width: 400px;
		max-width: 90vw;
	}


	#app-loading .row {
		width: auto;
	}

	#app-loading .progress-bar {
		width: 400px;
		max-width: 90vw;
		/*border: 1px solid #0c1927;*/
		height: 10px;
		border-radius: 3px;
		overflow: hidden;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, .2) inset;
	}

#app-loading .progress-bar .progress {
	margin: -2px;
	border-radius: 0px;
	height: 120%;
	background: rgb(238, 60, 40);
	background: linear-gradient(317deg, rgba(32, 102, 161, 1) 0%, rgba(11, 32, 51, 1) 100%);
	width: calc(var(--blazor-load-percentage, 30%) + 2px);
	box-shadow: 2px 2px 20px black;
}

.loading-progress {
	position: relative;
	display: block;
	width: 8rem;
	height: 8rem;
	margin: 20vh auto 1rem auto;
}

.loading-progress-text {
	font-weight: bold;
}

	.loading-progress-text:after {
		content: var(--blazor-load-percentage-text, "Loading");
	}

/* NAV */

.k-nav.k-link {
	padding: 2px 4px;
	line-height: 1;
}

.k-nav.k-state-active {
	font-weight: bold;
	color: #656565;
}

/*.k-menu-group .k-item:not(.menu-button) > .k-menu-link {
	line-height: 1;
	padding: 2px 4px;
	padding-right: 32px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-align: center;
	align-items: center;
	position: relative;
}*/

ul.k-menu {
	height: 100%;
	align-items: center;
}

ul.k-menu .k-menu-expand-arrow, div.k-menu-popup .k-menu-expand-arrow {
	display: none;
}
/* GRID */
.k-grid-md .k-table-th, .k-grid-md td, .k-grid-md .k-table-td {
	padding-block: 3px !important;
	padding-inline: 5px !important;
	font-size: 13px;
}

html, body, .k-table-md, .k-form, .k-input-inner {
	/*font-size: 12px !important;*/
}

.k-filter-row .k-table-td {
	margin: 0px;
	padding: 0px !important;
}

.k-filtercell .k-filtercell-wrapper {
	gap: 0px !important;
}

.k-filtercell .k-rounded-md {
	border-radius: 0 !important;
}

.k-filtercell .k-input,
.k-filtercell .k-picker,
.k-filtercell .k-button {
	border: 0 !important;
	height: 25px !important;
}

/* edit grid */

.wr-grid-input:has(+ .wr-grid-details-button) {
	width: calc(100% - 24px);
	display: inline-block;
	margin-right: 5px;
}

.wr-delete-button:hover {
	background: red !important;
	color: white;
}

.wr-edit-grid.k-grid .k-hierarchy-cell > .k-icon {
	padding: 0px;
}

.wr-edit-grid.wr-inner > .k-pager,
.wr-remote-grid-inner > .k-pager {
	display: none;
}

.wr-edit-grid.wr-inner > .k-grid-toolbar > .k-pager,
.wr-remote-grid-inner > .k-grid-toolbar > .k-pager {
	margin-left: 0;
}

.wr-remote-grid table.k-grid-header-table.k-table,
.wr-remote-grid table.k-grid-table.k-table,
.wr-remote-grid table.k-grid-footer-table.k-table,
.wr-remote-grid-inner table.k-grid-header-table.k-table,
.wr-remote-grid-inner table.k-grid-table.k-table,
.wr-remote-grid-inner table.k-grid-footer-table.k-table {
	width: 1px;
}

.layout-popup-trigger {
	margin-left: auto;
}
/* Change the icons for the expand + and -

.wr-edit-grid.k-grid .k-hierarchy-cell > .k-icon svg {
	display: none;
}

.wr-edit-grid.k-grid .k-hierarchy-cell > .k-icon.k-svg-i-plus::after {
	content: "\25BC";
}

.wr-edit-grid.k-grid .k-hierarchy-cell > .k-icon.k-svg-i-minus::after {
	content: "\25B2";
}

*/
.wr-edit-grid.k-grid td > .k-button,
.wr-edit-grid.k-grid td .wr-column-actions .k-button {
	padding: 2px 3px;
}

	.wr-edit-grid.k-grid td > .k-button .k-button-icon,
	.wr-edit-grid.k-grid td .wr-column-actions .k-button .k-button-icon {
		min-height: 0;
		min-width: 0;
	}

/* splitter */
/*.k-splitbar {
	background: #777 !important;
	color: white !important;
}

.k-splitbar:hover {
	background: #f87762 !important;
}

.k-splitbar:active {
	background: #ff6358 !important;
	color: white !important;
}*/
.k-splitbar.k-splitbar-vertical {
	max-height: 6px;
}

.k-splitbar.k-splitbar-horizontal {
	max-width: 6px;
}

/* Make the resize bars (pane spacers / drag handles) clearly visible and obviously draggable.
   Uses theme tokens so it reads correctly in both the light and dark swatches; primary on
   hover/focus signals it's grabbable. */
.k-splitbar {
	background-color: var(--kendo-color-base-active) !important;
}

	.k-splitbar:hover,
	.k-splitbar.k-focus,
	.k-splitbar.k-dragging {
		background-color: var(--kendo-color-primary) !important;
	}

	.k-splitbar .k-resize-handle {
		color: var(--kendo-color-on-app-surface);
		opacity: 0.65;
	}

	.k-splitbar:hover .k-resize-handle,
	.k-splitbar.k-focus .k-resize-handle,
	.k-splitbar.k-dragging .k-resize-handle {
		color: var(--kendo-color-on-primary);
		opacity: 1;
	}

.k-splitter .k-pane {
	overflow: auto !important;
}

.k-splitter .k-pane.overflow-hidden {
	overflow: hidden !important;
}

.k-splitter.main-splitter > .k-pane:first-child {
	box-shadow: 0px 4px 10px rgba(0,0,0,.1);
}

/* form */
.wr-validation-error .k-input,
.wr-validation-error .k-input:hover,
.wr-validation-error .k-input:active,
.wr-validation-error .k-input.k-focus,
.wr-grid-input.wr-validation-error .k-input {
	border: 1px solid red;
}

/* M-23: stronger, higher-contrast borders on form inputs and the placeholder
   (read-state) box, so fillable fields stand out from the surface. Scoped to
   form fields via .wr-input-wrapper — inline grid editors (.wr-grid-input) keep
   their transparent borders. Validation-error fields keep the red border, and
   read-only fields are excluded (they aren't fillable). */
.wr-input-wrapper:not(.wr-validation-error) .k-input:not(.wr-readonly-field),
.wr-input-wrapper:not(.wr-validation-error) .k-picker:not(.wr-readonly-field),
.wr-input-wrapper:not(.wr-validation-error) .wr-placeholder-box:not(.wr-readonly-field) {
	border-color: rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="dark"] .wr-input-wrapper:not(.wr-validation-error) .k-input:not(.wr-readonly-field),
html[data-theme="dark"] .wr-input-wrapper:not(.wr-validation-error) .k-picker:not(.wr-readonly-field),
html[data-theme="dark"] .wr-input-wrapper:not(.wr-validation-error) .wr-placeholder-box:not(.wr-readonly-field) {
	border-color: rgba(255, 255, 255, 0.38) !important;
}

/* M-50: match the form-input border contrast on checkboxes so an unchecked box is
   as visible as the surrounding fields. Same tokens as the M-23 input rule above;
   scoped to form checkboxes (.wr-input-wrapper) so inline grid editors keep their
   transparent borders. Read-only checkboxes are included (unlike the input rule) —
   they still read as a box and need the contrast; checked boxes keep the primary fill. */
.wr-input-wrapper .wr-checkbox-label .k-checkbox {
	border-color: rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="dark"] .wr-input-wrapper .wr-checkbox-label .k-checkbox {
	border-color: rgba(255, 255, 255, 0.38) !important;
}

/* M-50: emphasize form groups so each section reads as a distinct card — a subtle
   border + tinted background set it apart from the surface, and the legend is
   stronger and in the primary colour. Scoped to .wr-form so only feature forms are
   affected. Title-less sections (wr-no-form-section-title) keep the card, no legend. */
/* !important throughout: app.css is linked before the Telerik theme, so on equal
   specificity Telerik's own .k-form-fieldset / .k-form-legend rules would win. */
.wr-form .k-form-fieldset {
	display: flex !important;
	flex-direction: column;
	border: 1px solid rgba(0, 0, 0, 0.22) !important;
	border-radius: 8px !important;
	padding: 10px 10px 14px !important;
	margin: 0 0 14px !important;
	background: color-mix(in srgb, var(--kendo-color-primary) 6%, transparent) !important;
}

.wr-form .k-form-fieldset > .k-form-legend {
	float: left;
	width: 100% !important;
	box-sizing: border-box;
	font-weight: 500 !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	border-bottom: 1px solid color-mix(in srgb, var(--kendo-color-primary) 25%, transparent) !important;
	margin: 0 !important;
	padding: 0 0 6px !important;
}

.wr-form .wr-no-form-section-title > .k-form-legend {
	display: none;
}

/* Dark mode derives its tint from the primary too, but mixed toward white first so it
   stays a light, visible wash on the dark surface (the raw primary would read too dark). */
html[data-theme="dark"] .wr-form .k-form-fieldset {
	border-color: rgba(255, 255, 255, 0.24) !important;
	background: color-mix(in srgb, color-mix(in srgb, var(--kendo-color-primary), white 50%) 12%, transparent) !important;
}

html[data-theme="dark"] .wr-form .k-form-fieldset > .k-form-legend {
	border-bottom-color: color-mix(in srgb, color-mix(in srgb, var(--kendo-color-primary), white 50%) 30%, transparent) !important;
}

.wr-placeholder-box-inner {
	/*min-height: 28px;*/
}

.wr-input-wrapper {
	height: 100%;
	display: flex;
	align-items: flex-start;
}

.wr-checkbox-label {
	vertical-align: middle;
}

.wr-text-overflow {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
}

.wr-batch-edit-grid td.k-table-td {
	/*	padding-block: 0px !important;
	padding-inline: 0px !important;*/
}

.wr-batch-edit-grid tr:last-child td {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.wr-grid-input {
	height: 26px;
	background: rgba(255, 255, 255, 0);
	margin: -3px -5px;
}

	.wr-grid-input > .wr-checkbox-label {
		width: 100%;
		height: 100%;
		text-align: center;
	}

		.wr-grid-input > .wr-checkbox-label > .k-checkbox-wrap {
			height: 100%;
		}

			.wr-grid-input > .wr-checkbox-label > .k-checkbox-wrap > .k-checkbox {
				box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.5);
			}


	.wr-grid-input .k-input, .wr-grid-input .k-dropdownlist {
		border: 1px solid rgba(0, 0, 0, 0);
		border-radius: 0;
		height: 26px;
		background: rgba(255, 255, 255, 0);
	}

		.wr-grid-input .k-input .k-input-inner {
			font-size: 13px;
			padding-inline: 4px;
		}

		.wr-grid-input .k-input .k-input-inner-emprty {
			padding-inline: 0 !important;
		}

.wr-custom-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap !important;
}

.wr-grid-row-deleted td:not(:first-child):not(:last-child) {
	filter: opacity(0.3);
	pointer-events: none;
}

.wr-grid-row-selected td:not(:first-child):not(:last-child) {
	filter: drop-shadow(2px 4px 6px red);
	pointer-events: none;
}

.wr-grid-row-new > td:first-child {
	background: linear-gradient(135deg, #32cd326e, #0000ff00 50%); /* Градиентный цвет для треугольника */
}

:not(.wr-grid-row-new):not(.wr-grid-row-deleted) > * > .wr-grid-input.wr-grid-input-changed {
	background: rgb(255 255 0 / 23%) !important
}

.wr-input-adornment {
	padding-inline: 5px;
}

.k-input.h-100, .k-input.h-100 textarea {
	height: 100%;
}

/* hide arrows from numeric textbox */
.k-numerictextbox.wr-numeric-input-no-arrows .k-input-spinner {
	display: none;
}


.k-animation-container.telerik-blazor:has(.k-dropdownlist-popup) {
	white-space: nowrap !important;
}

/* notification */
.wr-notification {
	margin-inline: 15px;
	margin-block: 15px;
}

	.wr-notification .k-notification {
		padding: 10px;
	}

.cursor-pointer {
	cursor: pointer;
}

/* Scrollbar styling (incl. dark-theme colors) now lives in WebRock grid.css.
   Monitek just makes the scrollbars slightly wider. !important because WebRock's
   grid.css loads after this file and sets the same rule. */
*::-webkit-scrollbar {
	width: 11px !important;
	height: 11px !important;
}

/* WebRock styles the track/thumb but not the corner where the two scrollbars meet,
   so it falls back to the browser default (white) — jarring in dark mode. Match it
   to the track (surface token) so it blends in both themes. */
*::-webkit-scrollbar-corner {
	background: var(--kendo-color-surface, transparent) !important;
}

.wr-grid-copy-button > button {
	border-left: none;
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
}

.wr-grid-copy-button > .k-numerictextbox {
	width: fit-content !important;
	padding-right: 3px;
	border-right: none;
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
	background: transparent
}

	.wr-grid-copy-button > .k-numerictextbox input {
		width: 25px;
		padding-inline: 4px;
		text-align: end;
		/* border-radius: 0; */
	}

	.wr-grid-copy-button > .k-numerictextbox .k-input-separator {
		display: none
	}

.wr-grid-rules-tabs > .k-tabstrip-items-wrapper {
	display: none;
}

.wr-grid-rules-tabs > .k-tabstrip-content {
	padding: 0 !important;
}

.wr-toolbar-title-custom .k-button-group {
	align-items: center;
}

	.wr-toolbar-title-custom .k-button-group > * {
		padding: 0 3px;
		font-size: 12px;
		height: 20px;
	}

	.wr-toolbar-title-custom .k-button-group > * {
		padding: 0 3px;
		font-size: 12px;
		height: 20px;
	}

.wr-toolbar-title-custom > span {
	line-height: 1;
}

.wr-toolbar-title-custom {
	flex-direction: column;
}

.wr-grid-filter-popup .k-popup {
	width: fit-content;
	padding: 2px;
	background-color: rgb(250 250 250)
}

	.wr-grid-filter-popup .k-popup > div {
		display: flex;
		flex-direction: column;
		gap: 2px;
		width: min-content;
		min-width: 6em;
	}

.wr-grid-filter-blanks {
	padding: 0;
	width: 100%;
}

	.wr-grid-filter-blanks > button {
		width: -webkit-fill-available;
	}

.wr-grid-filter-clear {
	position: absolute !important;
	right: 0;
	z-index: 1;
	opacity: 0;
	background: linear-gradient(90deg, transparent 0%, white 30%) !important;
	box-shadow: none !important;
}

	.wr-grid-filter-clear:hover {
		opacity: 1;
	}

.wr-grid-filter-date-range {
	gap: 0 !important;
	flex-direction: column !important;
}

	.wr-grid-filter-date-range > .k-floating-label-container {
		padding: 0;
		width: 100%;
	}

		.wr-grid-filter-date-range > .k-floating-label-container > label {
			display: none;
		}

.wr-grid-filter-multiselect-popup:not(.k-animation-container-shown) {
	left: -999px;
}

.wr-grid-filter-multiselect-popup .k-child-animation-container {
	transition: none !important;
}

.wr-grid-filter-multiselect-popup .k-list-footer {
	display: flex;
	flex-direction: column;
}

.wr-grid-filter-multiselect {
	position: relative;
	width: 100%;
}

	.wr-grid-filter-multiselect .k-chip-list {
		display: none !important;
	}

.wr-log-form {
	display: grid;
	grid-template-columns: 7em auto;
}

.wr-column-header .k-column-title,
.wr-column-header .k-column-title div {
	min-width: 0;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex-shrink: 1;
	overflow: hidden;
}

.k-radio-label:has(> .wr-layout-radio-item) {
	width: 100%;
}

.wr-layout-radio-item {
	display: inline-grid;
	grid-template-columns: 15em 1.5em 1.5em 1.5em 1.5em 1.5em;
}

	.wr-layout-radio-item > button {
		padding: 0;
	}

	.wr-layout-radio-item > span {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

.wr-notification {
	top: 26px !important;
}

.k-toolbar {
	border-left: 5px solid var(--kendo-color-primary) !important;
	padding-left: 15px !important;
}

/* Area colour-coding for grid toolbars: Inquiry = orange, Projects = green, Logistics = blue.
   The grid component wraps its WrGrid in a div carrying one of these classes (display:contents,
   so the grid's height:100% layout is unaffected). Semi-transparent tints so they read in both
   the light and dark themes. */
.monitek-orange .k-grid-toolbar {
	background-color: rgba(217, 119, 6, 0.12) !important;
	border-left-color: #d97706 !important;
}

.monitek-green .k-grid-toolbar {
	background-color: rgba(46, 125, 50, 0.12) !important;
	border-left-color: #2e7d32 !important;
}

.monitek-blue .k-grid-toolbar {
	background-color: rgba(32, 102, 161, 0.12) !important;
	border-left-color: #2066a1 !important;
}


.project-material:hover {
    background: var(--kendo-color-base-hover);
}


/* inline file */
.wr-file-upload-container.wr-inline {
	width: 300px;
	max-width: min(100%, 500px) !important;
}

.wr-file-upload-container.wr-inline .wr-file-upload-list {
	flex-grow: 1 !important;
	max-width: 100%;
}

.wr-file-upload-container.wr-inline .wr-file-upload {
	flex-grow: 1 !important;
	width: 100%;
}

.project-material .wr-file-upload-container.wr-has-file .wr-file-upload,
.project-material .wr-file-upload-container.wr-has-file .wr-delete {
	display: none !important;
}

/* M-79: the ID2 last-report line keeps its four percentage bars narrow so the whole line — date,
   reporter name, all four metrics — stays on one row and a longer name still fits before it wraps. */
.report-metric-bar {
	flex: 0 0 70px;
	width: 70px;
}

.report-metric-bar .k-progressbar {
	width: 100%;
	min-width: 0;
}

/* M-79: who added the material row and when its document was uploaded — the detail lives in the icon's
   tooltip, so the icon itself stays quiet next to the row's remove button. */
.project-material-user {
	display: inline-flex;
	align-items: center;
	opacity: 0.55;
	cursor: help;
}

.project-material-user:hover {
	opacity: 1;
}

/* M-79: every material row's file box is the same width. The upload container grows by default, so a
   row showing fewer check-boxes stretched its box wider than the neighbouring rows. The width is chosen
   so a full row — file, three check-boxes, user icon, remove button — still fits on one line in the
   default form pane. */
.project-material .wr-file-upload-container.wr-inline {
	flex: 0 0 380px;
	width: 380px;
}

/* M-23: make uploaded file names stand out (bold + primary colour) so they read
   as prominent, higher-contrast links. Applies to both the single and multi
   upload components (same WrFileUpload markup). Scoped to .k-file-success so the
   "No file uploaded" placeholder is left as normal text. */
.wr-file-upload-container .k-file-success .k-file-name {
	font-weight: 700;
	color: var(--kendo-color-primary) !important;
}

/* M-23: tint the download action icon primary too, so it reads together with the
   bold file name as the clickable "get this file" affordance. */
.wr-file-upload-container .k-file-success .k-upload-actions .wr-download {
	color: var(--kendo-color-primary) !important;
}

/* small toolbars */
.k-toolbar.k-toolbar-sm div.wr-toolbar-title {
	font-size: 16px;
	font-weight: bold;
}

/* Shared form layout: the toolbar sits above the content/splitter and may wrap to extra rows when
   narrow (so the Save button is never hidden in an overflow popup); the splitter fills the remaining
   height. Used by the project, inquiry, account, settings and select-suppliers forms so they can all
   be restyled together. */
.m-form-layout {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.m-form-layout .m-form-splitter {
	flex: 1 1 auto;
	min-height: 0;
}

.m-form-toolbar.k-toolbar {
	flex-wrap: wrap;
	height: auto;
	/* Align the toolbar's left edge with the form content below it, and give wrapped rows
	   even vertical spacing plus a little breathing room on the bottom row. */
	padding-inline-start: 16px;
	row-gap: 6px;
	padding-block: 6px 10px;
}

/* Keep the trailing button group (e.g. Copy / Save) pinned to the right even after the toolbar wraps.
   :not(:first-child) leaves a title-only toolbar (e.g. a read-only form with no Save) left-aligned. */
.m-form-toolbar.k-toolbar > :last-child:not(:first-child) {
	margin-inline-start: auto;
}

/* The Deliveries dialog (ReportDeliveryStatusComponent): its lines and rows carry their own padding, so
   the dialog adds none - the row lines run to the dialog's edges, the gap under the title and over the
   buttons matches the gap between the lines, and the text lines up with the title. Global because the
   dialog renders outside the component's scoped css. */
.k-dialog.delivery-status-dialog .k-dialog-content {
	padding: 0;
}

.k-dialog.delivery-status-dialog .k-window-title {
	font-weight: 600;
}