/*
'**********************************************************************'
'*  © Copyright 2026 Vega Solutions Ltd, all rights reserved.         *'
'*                                                                    *'
'*  This software is the copyrighted work of Vega Solutions Ltd. Its  *'
'*  use is governed by the terms of an end-user license agreement     *'
'*  granted by Vega Solutions Ltd. Use of the software without        *'
'*  a license agreement is prohibited.                                *'
'*                                                                    *'
'*  WITHOUT LIMITING THE FOREGOING, MODIFYING, COPYING OR             *'
'*  REPRODUCTION OF THE SOFTWARE IS EXPRESSLY PROHIBITED.             *'
'**********************************************************************'
'* Version   Date        Who  Description
'* 12.01.00  20/03/2026  TS   REQ#505 SchedulerAdmin conversion
'*/

/* ===================================================================
   Screen reader utility
   =================================================================== */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

/* ===================================================================
   Nav bar button fix — custom elements need explicit display
   =================================================================== */

.navBar .nav-button {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

@media (min-width: 769px) {
	.navBar .nav-button {
		padding: 4px 16px;
	}

	.navBar .button-container {
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
	}
}

/* ===================================================================
   Container + parent :has() rules
   =================================================================== */

:has(> .scheduleContainer),
:has(> .raContainer),
:has(> .ruContainer),
:has(> .saContainer),
:has(> .oaContainer) {
	display: block;
	width: 100%;
}

.scheduleContainer,
.raContainer,
.ruContainer,
.saContainer,
.oaContainer {
	display: block;
	width: 100%;
	box-sizing: border-box;
	max-width: 1600px;
	margin: 0 auto;
	padding: 10px 30px;
}

/* ===================================================================
   Toolbar
   =================================================================== */

.scheduleToolBar,
.raToolBar,
.ruToolBar,
.saToolBar,
.oaToolBar {
	display: flex;
	gap: 6px;
	padding: 8px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #dee2e6;
}

.scheduleToolBar .toolbar-button,
.scheduleToolBar button,
.raToolBar .toolbar-button,
.raToolBar button,
.ruToolBar .toolbar-button,
.ruToolBar button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 20px;
	border: none;
	border-radius: 25px;
	background: #e0e3e7;
	color: var(--sirius-primary);
	cursor: pointer;
	font-size: 14px;
	font-family: calibri, sans-serif;
}

.scheduleToolBar .toolbar-button:hover,
.scheduleToolBar button:hover,
.raToolBar .toolbar-button:hover,
.raToolBar button:hover,
.ruToolBar .toolbar-button:hover,
.ruToolBar button:hover {
	background: var(--sirius-primary);
	color: #fff;
}

.scheduleToolBar .btn-success,
.raToolBar .btn-success,
.ruToolBar .btn-success {
	background: #28a745;
	color: #fff;
}

.scheduleToolBar .btn-success:hover,
.raToolBar .btn-success:hover,
.ruToolBar .btn-success:hover {
	background: #1e7e34;
	color: #fff;
}

.scheduleToolBar .btn-danger,
.raToolBar .btn-danger,
.ruToolBar .btn-danger {
	background: #dc3545;
	color: #fff;
}

.scheduleToolBar .btn-danger:hover,
.raToolBar .btn-danger:hover,
.ruToolBar .btn-danger:hover {
	background: #c82333;
	color: #fff;
}

/* Toolbar spacer - pushes subsequent buttons to the right */
.toolbar-spacer {
	flex: 1;
}

/* Toolbar status indicator */
.toolbar-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	font-size: 13px;
	font-family: calibri, sans-serif;
	color: #555;
}

.toolbar-status .status-circle {
	width: 12px;
	height: 12px;
}

/* ===================================================================
   GridJS overrides (shared across all apps)
   =================================================================== */

.gridHost,
.schedule-grid,
.ra-grid,
.ru-grid,
.sa-grid,
.oa-grid {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.schedule-grid .gridjs-container,
.ra-grid .gridjs-container,
.ru-grid .gridjs-container,
.sa-grid .gridjs-container,
.oa-grid .gridjs-container {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	padding: 0;
}

.schedule-grid .gridjs-wrapper,
.ra-grid .gridjs-wrapper,
.ru-grid .gridjs-wrapper,
.sa-grid .gridjs-wrapper,
.oa-grid .gridjs-wrapper {
	overflow-x: auto;
}

.schedule-grid .gridjs-table,
.ra-grid .gridjs-table,
.ru-grid .gridjs-table,
.sa-grid .gridjs-table,
.oa-grid .gridjs-table {
	width: 100% !important;
	max-width: 100% !important;
	table-layout: fixed;
}

/* Search icon inside GridJS search box */
.schedule-grid .gridjs-search,
.ra-grid .gridjs-search,
.ru-grid .gridjs-search,
.sa-grid .gridjs-search,
.oa-grid .gridjs-search {
	position: relative;
}

.schedule-grid .gridjs-search::before,
.ra-grid .gridjs-search::before,
.ru-grid .gridjs-search::before,
.sa-grid .gridjs-search::before,
.oa-grid .gridjs-search::before {
	content: "\f002";
	font-family: FontAwesome;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-size: 14px;
	pointer-events: none;
	z-index: 1;
}

.schedule-grid .gridjs-search-input,
.ra-grid .gridjs-search-input,
.ru-grid .gridjs-search-input,
.sa-grid .gridjs-search-input,
.oa-grid .gridjs-search-input {
	padding-left: 30px !important;
}

/* Remove default bg/shadow from GridJS container and sections */
.schedule-grid .gridjs-container,
.schedule-grid .gridjs-footer,
.schedule-grid .gridjs-head,
.ra-grid .gridjs-container,
.ra-grid .gridjs-footer,
.ra-grid .gridjs-head,
.ru-grid .gridjs-container,
.ru-grid .gridjs-footer,
.ru-grid .gridjs-head,
.sa-grid .gridjs-container,
.sa-grid .gridjs-footer,
.sa-grid .gridjs-head,
.oa-grid .gridjs-container,
.oa-grid .gridjs-footer,
.oa-grid .gridjs-head {
	background: none;
	box-shadow: none;
}

/* GridJS head: search + result count side by side */
.schedule-grid .gridjs-head,
.ra-grid .gridjs-head,
.ru-grid .gridjs-head,
.sa-grid .gridjs-head,
.oa-grid .gridjs-head {
	display: flex;
	align-items: center;
	gap: 15px;
}

.schedule-grid .gridjs-search,
.ra-grid .gridjs-search,
.ru-grid .gridjs-search,
.sa-grid .gridjs-search,
.oa-grid .gridjs-search {
	float: none;
}

/* Column resize handle - thin visual line with wider grab area */
.schedule-grid .gridjs-th .gridjs-resizable,
.ra-grid .gridjs-th .gridjs-resizable,
.ru-grid .gridjs-th .gridjs-resizable,
.sa-grid .gridjs-th .gridjs-resizable,
.oa-grid .gridjs-th .gridjs-resizable {
	width: 1px !important;
	background-color: #ddd !important;
	padding: 0 4px !important;
	margin-left: 2px !important;
	background-clip: content-box !important;
	cursor: col-resize;
	transition: background-color 0.15s;
}

.schedule-grid .gridjs-th .gridjs-resizable:hover,
.ra-grid .gridjs-th .gridjs-resizable:hover,
.ru-grid .gridjs-th .gridjs-resizable:hover,
.sa-grid .gridjs-th .gridjs-resizable:hover,
.oa-grid .gridjs-th .gridjs-resizable:hover {
	width: 5px !important;
	background-color: #999 !important;
	background-clip: padding-box !important;
}

/* Header styling - light background with dark text */
.schedule-grid th.gridjs-th,
.ra-grid th.gridjs-th,
.ru-grid th.gridjs-th,
.sa-grid th.gridjs-th,
.oa-grid th.gridjs-th {
	background-color: var(--sirius-table-header-bg) !important;
	color: var(--sirius-table-header-text) !important;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	border-bottom: 2px solid #dee2e6 !important;
	border-right: none !important;
	border-left: none !important;
	border-top: none !important;
}

/* Override GridJS sort button and content text colour */
.schedule-grid th.gridjs-th .gridjs-th-content,
.schedule-grid th.gridjs-th button,
.schedule-grid th.gridjs-th .gridjs-sort,
.ra-grid th.gridjs-th .gridjs-th-content,
.ra-grid th.gridjs-th button,
.ra-grid th.gridjs-th .gridjs-sort,
.ru-grid th.gridjs-th .gridjs-th-content,
.ru-grid th.gridjs-th button,
.ru-grid th.gridjs-th .gridjs-sort,
.sa-grid th.gridjs-th .gridjs-th-content,
.sa-grid th.gridjs-th button,
.sa-grid th.gridjs-th .gridjs-sort,
.oa-grid th.gridjs-th .gridjs-th-content,
.oa-grid th.gridjs-th button,
.oa-grid th.gridjs-th .gridjs-sort {
	color: var(--sirius-table-header-text) !important;
}

/* Sort arrow SVGs - keep visible against dark headers (inherits header text colour) */
.schedule-grid .gridjs-sort,
.ra-grid .gridjs-sort,
.ru-grid .gridjs-sort,
.sa-grid .gridjs-sort,
.oa-grid .gridjs-sort {
	opacity: 0.75;
}
.schedule-grid .gridjs-sort:hover,
.ra-grid .gridjs-sort:hover,
.ru-grid .gridjs-sort:hover,
.sa-grid .gridjs-sort:hover,
.oa-grid .gridjs-sort:hover {
	opacity: 1;
}

/* Cell styling - subtle row borders, truncate overflow, match header height */
.schedule-grid td.gridjs-td,
.ra-grid td.gridjs-td,
.ru-grid td.gridjs-td,
.sa-grid td.gridjs-td,
.oa-grid td.gridjs-td {
	border-bottom: 1px solid #eee !important;
	border-right: none !important;
	border-left: none !important;
	border-top: none !important;
	padding: 10px 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0 !important;
	line-height: 25px;
}

.schedule-grid th.gridjs-th .gridjs-th-content,
.ra-grid th.gridjs-th .gridjs-th-content,
.ru-grid th.gridjs-th .gridjs-th-content,
.sa-grid th.gridjs-th .gridjs-th-content,
.oa-grid th.gridjs-th .gridjs-th-content {
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	line-height: 1.2;
	word-break: break-word;
	min-height: 24px;
	display: flex;
	align-items: center;
}

/* Alternating rows - white and light grey */
.schedule-grid tr.gridjs-tr:nth-child(odd) td,
.ra-grid tr.gridjs-tr:nth-child(odd) td,
.ru-grid tr.gridjs-tr:nth-child(odd) td,
.sa-grid tr.gridjs-tr:nth-child(odd) td,
.oa-grid tr.gridjs-tr:nth-child(odd) td {
	background-color: var(--sirius-row-odd);
}

.schedule-grid tr.gridjs-tr:nth-child(even) td,
.ra-grid tr.gridjs-tr:nth-child(even) td,
.ru-grid tr.gridjs-tr:nth-child(even) td,
.sa-grid tr.gridjs-tr:nth-child(even) td,
.oa-grid tr.gridjs-tr:nth-child(even) td {
	background-color: var(--sirius-row-even);
}

/* Error rows - marks rows where errorRowFn returned true */
tr.gridjs-tr:has(.grid-error-marker) td {
	background-color: #fff3f3 !important;
}

/* Pointer cursor for clickable grids */
.schedule-grid-clickable tr.gridjs-tr td,
.ra-grid-clickable tr.gridjs-tr td,
.ru-grid-clickable tr.gridjs-tr td,
.sa-grid-clickable tr.gridjs-tr td,
.oa-grid-clickable tr.gridjs-tr td {
	cursor: pointer;
}

/* Row hover for clickable grids */
.schedule-grid-clickable tr.gridjs-tr:hover td,
.ra-grid-clickable tr.gridjs-tr:hover td,
.ru-grid-clickable tr.gridjs-tr:hover td,
.sa-grid-clickable tr.gridjs-tr:hover td,
.oa-grid-clickable tr.gridjs-tr:hover td {
	background-color: rgba(2, 6, 118, 0.07) !important;
}

/* ===================================================================
   Field wrapper (label + input)
   =================================================================== */

.fieldWrapper {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Checkbox variant: label above, vertically centered within grid row */
.fieldWrapper-checkbox {
	flex-direction: column;
	align-items: flex-start;
	align-self: center;
	gap: 4px;
}

.fieldLabel {
	font-size: 12px;
	font-weight: 600;
	color: #333;
	font-family: calibri, sans-serif;
}

/* Make vw-input, vw-select, vw-textarea and native inputs full width inside fieldWrapper */
.fieldWrapper vw-input,
.fieldWrapper vw-select,
.fieldWrapper vw-textarea {
	display: block;
	width: 100%;
	min-width: 0;
}

/* Form controls must be allowed to shrink below their intrinsic width.
   A grid/flex item's automatic minimum is its content's min-content size, so
   without min-width:0 the track grew to the input's intrinsic width and the
   100%-wide control overflowed the section's padding on narrow screens
   (fields ran off the right of the page under ~430px). */
.formSection-body > *,
.saOverrideSection-body > *,
.saSearchForm > * {
	min-width: 0;
}

.fieldWrapper input[type="text"],
.fieldWrapper input[type="number"],
.fieldWrapper input[type="password"],
.fieldWrapper input[type="date"],
.fieldWrapper input[type="time"],
.fieldWrapper select,
.fieldWrapper textarea {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	font-family: calibri, sans-serif;
	background: #fff;
	color: #333;
	line-height: 1.2;
}

.fieldWrapper input:disabled,
.fieldWrapper select:disabled,
.fieldWrapper textarea:disabled {
	background: #f1f3f5;
	color: #55595e;
	border-color: #e3e6ea;
	cursor: default;
}

.fieldWrapper input[type="text"],
.fieldWrapper input[type="number"],
.fieldWrapper input[type="password"],
.fieldWrapper input[type="date"],
.fieldWrapper input[type="time"],
.fieldWrapper select {
	height: 34px;
}

.fieldWrapper input:focus,
.fieldWrapper select:focus,
.fieldWrapper textarea:focus {
	outline: none;
	border-color: var(--sirius-primary);
	box-shadow: 0 0 0 2px rgba(2, 6, 118, 0.15);
}

.fieldWrapper select {
	height: 32px;
	appearance: auto;
}

/* ===================================================================
   Form sections (accordion, grouped headings)
   =================================================================== */

.formSection {
	display: block;
	width: 100%;
	margin-bottom: 12px;
}

.formSection-header {
	background: #e0e3e7;
	color: #333;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	font-family: calibri, sans-serif;
	border-radius: 8px 8px 0 0;
	letter-spacing: 0.3px;
	border-bottom: 1px solid #dee2e6;
	/* the header is the collapse toggle (role="button") - was set inline */
	cursor: pointer;
	display: flex;
	align-items: center;
	user-select: none;
	cursor: pointer;
}

.formSection-header:hover {
	background: #d5d8dd;
}

.formSection-collapsed .formSection-header {
	border-radius: 8px;
	border-bottom: none;
}

.formSection-chevron {
	margin-left: auto;
	font-size: 11px;
	transition: transform 0.2s;
	color: #666;
}

.formSection-collapsed .formSection-chevron {
	transform: rotate(-90deg);
}

.formSection-header i:first-child {
	margin-right: 8px;
	color: var(--sirius-primary);
}

.formSection-body > .gridHost,
.formSection-body > :has(> .gridHost) {
	grid-column: 1 / -1;
}

.formSection-body {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 20px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #dee2e6;
	border-top: none;
	border-radius: 0 0 8px 8px;
}

.formSection-body .fieldWrapper {
	min-width: 0;
}

.formSection-body .fieldWrapper:has(textarea) {
	grid-column: 1 / -1;
}

/* ===================================================================
   Result count badge
   =================================================================== */

.resultCount {
	font-size: 13px;
	color: #666;
	padding: 8px 0 4px 0;
	font-family: calibri, sans-serif;
}

.resultCount strong {
	color: var(--sirius-primary);
	font-size: 14px;
}

/* ===================================================================
   Results container
   =================================================================== */

.resultsContainer,
.raResultsContainer,
.ruResultsContainer,
.saResultsContainer {
	display: block;
	margin-top: 5px;
	overflow: hidden;
}

.resultsContainer p,
.raResultsContainer p,
.ruResultsContainer p,
.saResultsContainer p {
	padding: 15px;
	color: #666;
	font-style: italic;
}

/* ===================================================================
   Search form
   =================================================================== */

.searchForm,
.saSearchForm {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 20px;
	align-items: end;
	padding: 20px 24px;
	margin-bottom: 15px;
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 8px;
}

.searchForm .fieldWrapper,
.saSearchForm .fieldWrapper {
	min-width: 0;
}

/* Search form buttons - full-width row, right-aligned */
.searchForm-buttons,
.saSearchForm-buttons {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.searchForm .btn-primary,
.searchForm button.btn-primary,
.searchForm .btn-secondary,
.searchForm button.btn-secondary,
.saSearchForm .btn-primary,
.saSearchForm button.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 22px;
	height: 36px;
	background: var(--sirius-primary);
	color: #fff;
	border: none;
	border-radius: 25px;
	cursor: pointer;
	font-size: 14px;
	font-family: calibri, sans-serif;
	text-align: center;
	transition: background 0.15s ease;
}

.searchForm .btn-primary:hover,
.searchForm .btn-secondary:hover,
.saSearchForm .btn-primary:hover,
.saSearchForm button.btn-primary:hover {
	background: #010554;
	color: #fff;
}

/* Inline buttons (same row as other fields) */
.searchForm-buttons-inline {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 10px;
}

/* ===================================================================
   Data cards (mobile grid layout)
   =================================================================== */

.cardGridWrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cardGrid-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.cardGrid-search {
	flex: 1 1 200px;
	max-width: 320px;
}

.cardGrid-search input {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	font-family: calibri, sans-serif;
}

.cardGrid-head .resultCount {
	padding: 0;
	white-space: nowrap;
}

.cardGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 10px;
}

.cardGrid-foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 6px 0 18px;
}

.cardGrid-shown {
	font-size: 13px;
	color: #666;
	font-family: calibri, sans-serif;
}

.cardGrid-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	min-height: 40px;
	padding: 0 24px;
	border: 1px solid var(--sirius-primary);
	border-radius: 25px;
	background: #fff;
	color: var(--sirius-primary);
	font: 600 14px calibri, sans-serif;
	cursor: pointer;
}

.cardGrid-more:hover {
	background: var(--sirius-primary);
	color: #fff;
}

.cardGrid-more:focus-visible {
	outline: 2px solid var(--sirius-primary);
	outline-offset: 2px;
}

.dataCard {
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	padding: 12px 15px;
	cursor: pointer;
}

.dataCard:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.dataCard:active {
	background: #f0f0ff;
}

.dataCard-title {
	display: block;
	font-size: 15px;
	font-weight: bold;
	color: var(--sirius-primary);
	border-bottom: 2px solid var(--sirius-primary);
	margin-bottom: 8px;
	padding-bottom: 6px;
	font-family: calibri, sans-serif;
	/* Long values (descriptions, paths, connection strings) must break rather
	   than force the card wider than the screen. */
	overflow-wrap: anywhere;
}

.dataCard-field {
	display: flex;
	gap: 12px;
	font-size: 13px;
	padding: 3px 0;
	font-family: calibri, sans-serif;
}

.dataCard-label {
	flex: 0 0 110px;
	font-weight: 600;
	color: #555;
}

.dataCard-value {
	flex: 1 1 auto;
	color: #333;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ===================================================================
   Confirm modal
   =================================================================== */

.modal-header .modal-title {
	flex: 1;
	text-align: left;
}
.modal-header vw-button {
	background: none;
	border: none;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	opacity: 0.5;
	padding: 0;
	margin-left: auto;
	cursor: pointer;
}
.modal-header vw-button:hover {
	opacity: 0.8;
}

/* ===================================================================
   Details container overrides (grids and textareas span full width)
   =================================================================== */

.raDetailsContainer .formSection-body .ra-grid,
.raDetailsContainer .formSection-body p,
.saDetailsContainer .formSection-body .sa-grid,
.saDetailsContainer .formSection-body p {
	grid-column: 1 / -1;
}

.raDetailsContainer .formSection-body .fieldWrapper:has(textarea),
.saDetailsContainer .formSection-body .fieldWrapper:has(textarea) {
	grid-column: 1 / -1;
}

/* ===================================================================
   Responsive: 768px (tablet portrait / mobile)
   =================================================================== */

@media (max-width: 768px) {
	.scheduleContainer,
	.raContainer,
	.ruContainer,
	.saContainer,
	.oaContainer {
		padding: 8px 12px;
	}

	/* ---------------------------------------------------------------
	   Button bars - one policy for every action-button row in the five
	   NG apps, so a button is the same size and shape wherever it is.

	   The row is a grid whose tracks are at least 160px wide, which lets
	   the available width decide how many buttons share a line: two on a
	   390px phone (each half width), one per line at 320px where a
	   two-word label such as "Apply Theme" would otherwise wrap. This
	   replaces `flex: 1 1 auto`, under which the width depended on how
	   many buttons happened to be in the row - one became full width,
	   two became halves, three became thirds - which is why button
	   widths looked arbitrary from screen to screen.

	   auto-FILL, not auto-fit: auto-fit collapses the empty tracks, which
	   makes a bar holding a single button stretch that button across the
	   whole row (724px at 768px wide) while a two-button bar shows halves -
	   the same inconsistency in a new form. auto-fill keeps the empty
	   tracks, so a button is the same width at a given viewport however
	   many buttons share its row.
	   --------------------------------------------------------------- */
	.scheduleToolBar,
	.raToolBar,
	.ruToolBar,
	.saToolBar,
	.oaToolBar,
	.saFormButtonBar,
	.searchForm-buttons,
	.saSearchForm-buttons,
	.ruUploadButtonRow,
	.ruFileButtonRow,
	.ruCrystalButtons,
	.ruParamForm-buttons,
	.saScriptMatrixActions {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 8px;
		align-items: stretch;
		justify-content: stretch;
	}

	:is(.scheduleToolBar, .raToolBar, .ruToolBar, .saToolBar, .oaToolBar,
		.saFormButtonBar, .searchForm-buttons, .saSearchForm-buttons,
		.ruUploadButtonRow, .ruFileButtonRow, .ruCrystalButtons,
		.ruParamForm-buttons, .saScriptMatrixActions) > :is(vw-button, button, .toolbar-button) {
		width: 100%;
		min-width: 0;
		justify-content: center;
		min-height: 44px;
		padding: 8px 16px;
		font-size: 13px;
	}

	/* Anything in a bar that is not a button (a stray label, a select) takes
	   a row of its own rather than being squeezed into a button-sized track. */
	:is(.scheduleToolBar, .raToolBar, .ruToolBar, .saToolBar, .oaToolBar,
		.saFormButtonBar, .searchForm-buttons, .saSearchForm-buttons,
		.ruUploadButtonRow, .ruFileButtonRow, .ruCrystalButtons,
		.ruParamForm-buttons, .saScriptMatrixActions) > :not(vw-button, button, .toolbar-button) {
		grid-column: 1 / -1;
	}

	.searchForm,
	.saSearchForm {
		grid-template-columns: 1fr;
	}

	.formSection-body {
		grid-template-columns: 1fr;
	}

	.formSection-body input,
	.formSection-body select {
		min-height: 44px;
		font-size: 16px;
	}

	/* Dropdowns fill their column on a narrow screen. The .fieldWrapper rule
	   above already does this for fielded selects; this catches any select
	   rendered straight into a form. */
	.searchForm select,
	.saSearchForm select,
	.formSection-body select {
		width: 100%;
		box-sizing: border-box;
	}

	.dataCard-title {
		padding-bottom: 2px;
	}

	.toolbar-spacer {
		display: none;
	}
}

/* ===================================================================
   Responsive: 576px (small phone)
   =================================================================== */

@media (max-width: 576px) {
	.scheduleContainer,
	.raContainer,
	.ruContainer,
	.saContainer,
	.oaContainer {
		padding: 6px 8px;
	}

	/* Button sizing is handled by the 768px button-bar grid above. The
	   `flex: 1 1 auto` that used to live here made a button's width a
	   function of how many buttons shared the row, which is what made the
	   widths inconsistent between screens - deliberately not reinstated. */
}

/* ===================================================================
   Utilities replacing styles that used to be set inline in JavaScript.
   =================================================================== */

/* Gap between a leading icon and the text beside it. Was set inline as
   marginRight in six places, as 6px in some and 8px in others; one class
   so the spacing is the same everywhere. */
.ngIconGap {
	margin-right: 8px;
}

/* A "yes"/complete state, e.g. the tick in a rights matrix. The element
   carries the class only when the flag is set, so no reset is needed. */
.ngTickYes {
	color: #28a745;
}

/* Secondary status/among-the-furniture text (was inline color:#666). */
.ngStatusMuted {
	color: #666;
}

.ngCursorPointer {
	cursor: pointer;
}

/* Right-aligned action row inside a modal footer. */
.modalFooterActions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

/* Error modal header sits on a coloured bar, so its title is white. Scoped
   to the error modal rather than .modal-title, which other modals share. */
.errorModal-title {
	color: #fff;
}

/* ===================================================================
   Button labels are never bold. vw-button renders its label in a child
   <span>, which inherits the weight of whatever section header or card
   title it happens to sit under - so the same "+ Add" button rendered
   bold on some screens and normal on others. Scoped to button rows and
   form bodies so the modal close button keeps its own weight.
   =================================================================== */

:is(.scheduleToolBar, .raToolBar, .ruToolBar, .saToolBar, .oaToolBar,
	.saFormButtonBar, .searchForm-buttons, .saSearchForm-buttons,
	.ruUploadButtonRow, .ruFileButtonRow, .ruCrystalButtons,
	.ruParamForm-buttons, .saScriptMatrixActions, .formSection-body,
	.searchForm, .saSearchForm) :is(vw-button, button, .toolbar-button),
:is(.scheduleToolBar, .raToolBar, .ruToolBar, .saToolBar, .oaToolBar,
	.saFormButtonBar, .searchForm-buttons, .saSearchForm-buttons,
	.ruUploadButtonRow, .ruFileButtonRow, .ruCrystalButtons,
	.ruParamForm-buttons, .saScriptMatrixActions, .formSection-body,
	.searchForm, .saSearchForm) :is(vw-button, button, .toolbar-button) span {
	font-weight: 400;
}

/* ===================================================================
   Disabled toolbar buttons (vw-button is a custom element so :disabled
   doesn't apply - use the attribute selector and pointer-events).
   =================================================================== */

vw-button[disabled],
vw-button.toolbar-button[disabled] {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
	pointer-events: none;
}

/* ===================================================================
   Modal footer button - use brand colours instead of the near-white
   default from SiriusStyles.cshtml.
   =================================================================== */

.modal-footer vw-button.btn-primary {
	background-color: var(--sirius-primary) !important;
	color: #fff !important;
	border: 1px solid var(--sirius-primary) !important;
}
.modal-footer vw-button.btn-primary:hover {
	background-color: #010554 !important;
	border-color: #010554 !important;
}
.modal-footer vw-button.btn-secondary {
	background-color: #6c757d !important;
	color: #fff !important;
	border: 1px solid #6c757d !important;
}
.modal-footer vw-button.btn-secondary:hover {
	background-color: #5a6268 !important;
	border-color: #545b62 !important;
}
.modal-footer vw-button.btn-success {
	background-color: #28a745 !important;
	color: #fff !important;
	border: 1px solid #28a745 !important;
}
.modal-footer vw-button.btn-success:hover {
	background-color: #1e7e34 !important;
	border-color: #1c7430 !important;
}
.modal-footer vw-button.btn-danger {
	background-color: #dc3545 !important;
	color: #fff !important;
	border: 1px solid #dc3545 !important;
}
.modal-footer vw-button.btn-danger:hover {
	background-color: #c82333 !important;
	border-color: #bd2130 !important;
}

/* ===================================================================
   Toast - stronger contrast for success variant, allow width:auto
   when caller overrides the vw-toast 100% rule via inline style.
   =================================================================== */

.toastalert-success {
	background-color: #d4edda !important;
	color: #1e4620 !important;
	border-left: 5px solid #155724 !important;
}

.toastalert-error {
	background-color: #f8d7da !important;
	color: #721c24 !important;
	border-left: 5px solid #721c24 !important;
}

/* Success toast — floats below the nav bar, attached to body so it
   survives page re-renders. Auto-dismissed by SharedApp.showSuccess. */
.formSuccessToast {
	position: fixed;
	top: calc(var(--sirius-nav-bottom, 8px) + 12px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 10000;
	width: auto;
	max-width: 480px;
	min-width: 260px;
}

/* Error toast remains inline within the form (closer to the inputs that
   triggered it so the user sees what to correct). */
.formErrorToast {
	display: block;
	width: 100%;
	margin: 14px 0;
}

.toastalert {
	line-height: 1.4;
}

/* Async report-ready toast — pinned below the nav bar. Clicking the body
   navigates to the Report Queue; the built-in vToast × button dismisses.
   Available across every Sirius sub-app via SharedApp. */
.asyncReadyToast {
	position: fixed;
	top: calc(var(--sirius-nav-bottom, 8px) + 12px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 10000;
	width: auto;
	max-width: 480px;
	min-width: 260px;
	cursor: pointer;
}
.asyncReadyToast:hover {
	filter: brightness(1.05);
}