/* The "command center" look of the estimate screens, the admin overviews and their modals.
   The tokens sit on the root of each screen, so every component below picks them up,
   and the dark theme only has to swap the tokens. */
/* The navy of the headers, the sidebar and the story popup. Global, as the sidebar sits outside the themed pages.
   In the dark theme these turn into neutral dark greys instead of blue. */
:root {
	--cc-header-bg: #061233;
	--cc-header-raised: #0d1c3f;
	--cc-header-border: #24314f;
	--cc-header-border-strong: #33415f;
	--cc-header-muted: #9fabc6;
	--cc-header-soft: #c9d1e3;
	--cc-header-faint: #7d8aab;
	--cc-header-separator: #5f6e92;
	--cc-header-chip: #13224a;
	--cc-header-divider: #1d2a48;
}

[data-bs-theme="dark"] {
	--cc-header-bg: #1c1d21;
	--cc-header-raised: #26272c;
	--cc-header-border: #33353b;
	--cc-header-border-strong: #42454c;
	--cc-header-muted: #a3a6ad;
	--cc-header-soft: #d0d2d6;
	--cc-header-faint: #8a8d94;
	--cc-header-separator: #6b6e75;
	--cc-header-chip: #2b2d32;
	--cc-header-divider: #2b2d32;
}

.cc-theme {
	--cc-navy: #061233;
	--cc-orange: #fe7109;
	--cc-orange-hover: #ff8530;
	--cc-orange-text: #b34a00;
	--cc-orange-soft: #fff3ea;
	--cc-bg: #eef0f4;
	--cc-surface: #ffffff;
	--cc-border: #dfe3eb;
	--cc-divider: #e8ebf1;
	--cc-text: #0f1a33;
	--cc-text-secondary: #2b3550;
	--cc-muted: #5b6478;
	--cc-caption: #4a5470;
	--cc-input-border: #cfd5e1;
	--cc-track: #f3f4f7;
	--cc-success: #1d6b3a;
	--cc-success-soft: #e9f6ee;
	--cc-strong-bg: var(--cc-header-bg);
	--cc-strong-text: #ffffff;
	--cc-danger: #a61e1e;
	--cc-danger-soft: #fdecec;
	--cc-blue: #2f4bb3;
	--cc-blue-soft: #e7ecfb;
	--cc-font: 'IBM Plex Sans', 'Segoe UI', sans-serif;
	--cc-mono: 'IBM Plex Mono', 'Consolas', monospace;

	background: var(--cc-bg);
	color: var(--cc-text);
	font-family: var(--cc-font);
	font-size: 14px;
	line-height: 1.5;
}

/* Dark theme: neutral greys, no blue tint. */
[data-bs-theme="dark"] .cc-theme {
	--cc-navy: var(--cc-header-bg);
	--cc-orange-text: #ff9a4d;
	--cc-orange-soft: rgb(254 113 9 / 14%);
	--cc-bg: #111214;
	--cc-surface: #18191c;
	--cc-border: #2c2e33;
	--cc-divider: #24262a;
	--cc-text: #e8e9eb;
	--cc-text-secondary: #c8cacf;
	--cc-muted: #9a9ca3;
	--cc-caption: #a9abb1;
	--cc-input-border: #3a3d43;
	--cc-track: #202125;
	--cc-success: #7ddc9f;
	--cc-success-soft: rgb(76 209 125 / 14%);
	--cc-strong-bg: #e8e9eb;
	--cc-strong-text: #111214;
	--cc-danger: #ff8a8a;
	--cc-danger-soft: rgb(255 107 107 / 14%);
	--cc-blue: #9db2ff;
	--cc-blue-soft: rgb(91 124 250 / 16%);
}

/* Panels and headings */

.cc-theme .cc-panel {
	border: 1px solid var(--cc-border);
	border-radius: 12px;
	background: var(--cc-surface);
}

.cc-theme .panel-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

.cc-theme .panel-caption {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cc-caption);
}

.cc-theme .panel-hint {
	margin: 0 0 0.75rem;
	font-size: 12px;
	color: var(--cc-muted);
}

.cc-theme .min-w-0 {
	min-width: 0;
}

/* Buttons. Navy text on the orange fill: white on this orange does not reach a readable contrast. */

.cc-theme .cc-button-primary,
.cc-theme .cc-button-ghost,
.cc-theme .cc-button-outline,
.cc-theme .cc-button-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 36px;
	padding: 0 0.875rem;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}

.cc-theme .cc-button-primary {
	border: 0;
	background: var(--cc-orange);
	color: var(--cc-navy);
	font-weight: 600;
}

.cc-theme .cc-button-primary:hover:not(:disabled) {
	background: var(--cc-orange-hover);
}

.cc-theme .cc-button-ghost {
	border: 1px solid var(--cc-header-border-strong);
	background: transparent;
	color: #ffffff;
	font-weight: 500;
}

.cc-theme .cc-button-ghost:hover {
	border-color: var(--cc-header-soft);
}

.cc-theme .cc-button-outline {
	border: 1px solid var(--cc-input-border);
	background: var(--cc-surface);
	color: var(--cc-text-secondary);
}

.cc-theme .cc-button-outline:hover:not(:disabled) {
	border-color: var(--cc-orange);
}

.cc-theme .cc-button-dark {
	height: 44px;
	border: 0;
	background: var(--cc-strong-bg);
	color: var(--cc-strong-text);
	font-size: 14px;
	font-weight: 600;
}

.cc-theme .cc-button-dark:hover {
	opacity: 0.9;
}

.cc-theme button:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Form fields */

.cc-theme .field-label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--cc-text-secondary);
}

.cc-theme .field-hint {
	font-weight: 400;
	color: var(--cc-muted);
}

.cc-theme .cc-input,
.cc-theme .cc-select {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--cc-input-border);
	border-radius: 8px;
	background-color: var(--cc-surface);
	color: var(--cc-text);
	font-family: inherit;
	font-size: 14px;
}

.cc-theme .cc-input {
	resize: vertical;
}

.cc-theme .cc-select {
	height: 42px;
	padding-top: 0;
	padding-bottom: 0;
}

.cc-theme .cc-input:focus,
.cc-theme .cc-select:focus {
	outline: none;
	border-color: var(--cc-orange);
	box-shadow: 0 0 0 3px rgb(254 113 9 / 20%);
}

.cc-theme .cc-input:disabled {
	opacity: 0.6;
}

/* Select2 boxes inside the estimate screens follow the theme fields. */

.cc-theme .select2-container--bootstrap-5 .select2-selection {
	min-height: 42px;
	border: 1px solid var(--cc-input-border);
	border-radius: 8px;
	background-color: var(--cc-surface);
	color: var(--cc-text);
	font-family: var(--cc-font);
	font-size: 14px;
}

/* The chosen value sits in the middle of the box, as in the other fields. */
.cc-theme .select2-container--bootstrap-5 .select2-selection--single {
	display: flex;
	align-items: center;
}

.cc-theme .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
	color: var(--cc-text);
	line-height: 1.5;
}

.cc-theme .field-label + .select2-container {
	margin-top: 6px;
}

.cc-theme .picker-select-host .select2-container--bootstrap-5 .select2-selection {
	min-height: 36px;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	font-size: 13px;
}

/* Chosen values of a multiple select, as theme chips. The extra class outweighs the dark theme rules in app.css. */
.cc-theme .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
	padding: 2px 8px;
	border: 1px solid var(--cc-border);
	border-radius: 6px;
	background: var(--cc-track);
	color: var(--cc-text);
	font-size: 13px;
	font-weight: 500;
}

.cc-theme .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove {
	opacity: 0.6;
}

[data-bs-theme="dark"] .cc-theme .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove {
	filter: invert(1);
}

.cc-theme .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove:hover {
	opacity: 1;
}

.cc-theme .select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field {
	color: var(--cc-text);
	font-family: inherit;
	font-size: 13px;
}

.cc-theme .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
	opacity: 0.6;
}

/* Pages */

/* Pages sit on the plain content area; only the panels carry a surface. */
.cc-page {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background: transparent;
}

.cc-theme .cc-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--cc-divider);
}

.cc-theme .cc-section-footer {
	padding: 0.25rem 1rem 0.75rem;
	border-top: 1px solid var(--cc-divider);
}

.cc-theme .cc-count {
	margin-left: auto;
	font-size: 13px;
	color: var(--cc-muted);
}

.cc-theme .cc-search {
	flex: 1 1 220px;
	max-width: 340px;
	height: 38px;
	padding: 0 0.75rem;
	border: 1px solid var(--cc-input-border);
	border-radius: 8px;
	background: var(--cc-surface);
	color: var(--cc-text);
	font-family: inherit;
	font-size: 14px;
}

.cc-theme .cc-search:focus {
	outline: none;
	border-color: var(--cc-orange);
	box-shadow: 0 0 0 3px rgb(254 113 9 / 20%);
}

/* Column filters (ColumnFilterInput) used as search fields in a toolbar */

.cc-theme .cc-filter {
	flex: 1 1 200px;
	max-width: 300px;
}

.cc-theme .cc-filter .form-control {
	height: 38px;
	border: 1px solid var(--cc-input-border);
	border-radius: 8px;
	background: var(--cc-surface);
	color: var(--cc-text);
	font-family: inherit;
	font-size: 14px;
}

.cc-theme .cc-filter .form-control:focus {
	border-color: var(--cc-orange);
	box-shadow: 0 0 0 3px rgb(254 113 9 / 20%);
}

.cc-theme .cc-filter .fa-filter {
	color: var(--cc-muted) !important;
}

/* Tables */

.cc-theme .cc-table-wrapper {
	overflow-x: auto;
}

.cc-theme .cc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.cc-theme .cc-table th {
	padding: 0.625rem 1rem;
	border-bottom: 1px solid var(--cc-divider);
	color: var(--cc-caption);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.cc-theme .cc-table td {
	padding: 0.625rem 1rem;
	border-bottom: 1px solid var(--cc-divider);
	color: var(--cc-text-secondary);
	vertical-align: middle;
}

.cc-theme .cc-table tbody tr:last-child td {
	border-bottom: 0;
}

.cc-theme .cc-table tbody tr:hover td {
	background: var(--cc-track);
}

.cc-theme .cc-table tbody tr.selected td {
	background: var(--cc-orange-soft);
}

.cc-theme .cc-table tbody tr.selected td:first-child {
	box-shadow: inset 3px 0 0 var(--cc-orange);
}

.cc-theme .cc-table .cc-actions {
	text-align: right;
	white-space: nowrap;
}

.cc-theme .cc-table-empty {
	padding: 1.5rem 1rem;
	color: var(--cc-muted);
	text-align: center;
}

.cc-theme .cc-strong {
	color: var(--cc-text);
	font-weight: 600;
}

.cc-theme .cc-devops-id {
	margin-left: 0.5rem;
	color: var(--cc-orange-text);
	font-family: var(--cc-mono);
	font-size: 12px;
	text-decoration: none;
}

.cc-theme .cc-devops-id:hover {
	text-decoration: underline;
}

.cc-theme .cc-muted {
	color: var(--cc-muted);
	font-size: 12px;
}

/* Chips */

.cc-theme .cc-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--cc-track);
	color: var(--cc-text-secondary);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.cc-theme .cc-chip-success {
	background: var(--cc-success-soft);
	color: var(--cc-success);
}

.cc-theme .cc-chip-danger {
	background: var(--cc-danger-soft);
	color: var(--cc-danger);
}

.cc-theme .cc-chip-strong {
	background: var(--cc-strong-bg);
	color: var(--cc-strong-text);
}

.cc-theme .cc-chip-orange {
	background: var(--cc-orange-soft);
	color: var(--cc-orange-text);
}

.cc-theme .cc-chip-blue {
	background: var(--cc-blue-soft);
	color: var(--cc-blue);
}

.cc-theme .cc-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 0.5rem;
	border-radius: 4px;
	background: var(--cc-success);
}

.cc-theme .cc-dot-warning {
	background: #e0a100;
}

/* Small buttons in rows and cards */

.cc-theme .cc-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--cc-border);
	border-radius: 8px;
	background: var(--cc-surface);
	color: var(--cc-caption);
	cursor: pointer;
	vertical-align: middle;
}

.cc-theme .cc-icon-button:hover {
	border-color: var(--cc-orange);
	color: var(--cc-text);
}

.cc-theme .cc-icon-button.danger:hover {
	border-color: var(--cc-danger);
	color: var(--cc-danger);
}

.cc-theme .cc-row-button {
	height: 32px;
	margin-right: 4px;
}

/* Avatars */

.cc-theme .cc-avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	background: var(--cc-strong-bg);
	color: var(--cc-strong-text);
	font-size: 11px;
	font-weight: 600;
}

.cc-theme .cc-avatar-large {
	width: 44px;
	height: 44px;
	border-radius: 22px;
	font-size: 14px;
}

/* Segmented controls */

.cc-theme .cc-segmented {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--cc-border);
	border-radius: 10px;
	background: var(--cc-surface);
}

.cc-theme .cc-segment {
	height: 32px;
	padding: 0 0.875rem;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--cc-caption);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.cc-theme .cc-segment.active {
	background: var(--cc-strong-bg);
	color: var(--cc-strong-text);
	font-weight: 600;
}

/* The shared pager inside a section footer */

.cc-theme .pagination {
	margin-bottom: 0;
}

.cc-theme .page-link {
	border-color: var(--cc-border);
	border-radius: 8px;
	background: var(--cc-surface);
	color: var(--cc-text);
}

.cc-theme .page-size {
	width: auto;
	border-color: var(--cc-input-border);
	border-radius: 8px;
}

/* Form fields in modals */

.cc-theme .cc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.cc-theme .cc-field .cc-input,
.cc-theme .cc-field .cc-select {
	margin-top: 0;
}

.cc-theme .cc-field .validation-message {
	color: var(--cc-danger);
	font-size: 12px;
}

.cc-theme .cc-required {
	color: var(--cc-danger);
	font-weight: 700;
}

.cc-theme .cc-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.cc-theme .cc-switches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.cc-theme .cc-note {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.75rem 0.875rem;
	border-radius: 8px;
	background: var(--cc-track);
	color: var(--cc-text-secondary);
	font-size: 13px;
}

/* Page header (CommandHeader) */

.cc-theme .cc-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	padding: 1.125rem 1.5rem;
	border-radius: 12px;
	background: var(--cc-navy);
	color: #ffffff;
}

.cc-theme .cc-header-title {
	display: flex;
	flex: 1 1 280px;
	align-items: center;
	gap: 0.875rem;
	min-width: 0;
}

.cc-theme .cc-header-back {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--cc-header-border);
	border-radius: 8px;
	color: var(--cc-header-soft);
}

.cc-theme .cc-header-back:hover {
	border-color: var(--cc-orange);
	color: #ffffff;
}

.cc-theme .cc-header-eyebrow,
.cc-theme .cc-modal-eyebrow {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cc-header-muted);
}

.cc-theme .cc-header-name {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
}

.cc-theme .cc-header-stats {
	display: flex;
	gap: 1.75rem;
	margin: 0;
}

.cc-theme .cc-stat dt {
	font-size: 12px;
	font-weight: 400;
	color: var(--cc-header-muted);
}

.cc-theme .cc-stat dd {
	margin: 0;
	font-family: var(--cc-mono);
	font-size: 20px;
	font-weight: 600;
}

.cc-theme .cc-header-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.cc-theme .cc-header-actions a {
	text-decoration: none;
}

.cc-theme .cc-header-actions .cc-button-primary,
.cc-theme .cc-header-actions .cc-button-ghost {
	height: 40px;
	font-size: 14px;
}

/* Modal frame (CommandModal). The Blazored modal keeps its padding, so the frame undoes it
   to let the navy header reach the edges. */

.cc-modal {
	margin: -1.5rem;
	border-radius: 4px;
	background: var(--cc-bg);
	overflow: hidden;
}

.cc-theme .cc-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.5rem;
	background: var(--cc-navy);
	color: #ffffff;
}

.cc-theme .cc-modal-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.cc-theme .cc-modal-close {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--cc-header-border);
	border-radius: 8px;
	background: transparent;
	color: var(--cc-header-soft);
	cursor: pointer;
}

.cc-theme .cc-modal-close:hover {
	border-color: var(--cc-header-soft);
	color: #ffffff;
}

.cc-theme .cc-modal-body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
}

.cc-theme .cc-modal-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.625rem;
	padding: 0.875rem 1.5rem 1.25rem;
}

.cc-theme .cc-modal-footer .cc-button-primary,
.cc-theme .cc-modal-footer .cc-button-outline,
.cc-theme .cc-modal-footer .cc-button-danger {
	/* The same minimum width, so a short pair like Cancel and Confirm reads as a matching set. */
	min-width: 7.5rem;
	height: 42px;
	padding: 0 1.125rem;
	font-size: 14px;
}

.cc-theme .cc-button-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 36px;
	padding: 0 0.875rem;
	border: 0;
	border-radius: 8px;
	background: #c92a2a;
	color: #ffffff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.cc-theme .cc-button-danger:hover {
	background: #a61e1e;
}

.cc-theme .cc-modal-body > p,
.cc-theme .cc-confirm-body p {
	margin: 0 0 0.5rem;
	color: var(--cc-text-secondary);
}

/* app.css fixes the first column of every table at 50px for the icon columns of the classic overviews.
   These tables start with the name, so that width does not apply. */
.cc-theme .cc-table th:first-child,
.cc-theme .cc-table td:first-child {
	width: auto;
}

/* The shared pager (Grid/Pager) laid out for a section footer */

.cc-theme .cc-section-footer nav {
	gap: 1rem;
}

.cc-theme .pagination {
	align-items: center;
	gap: 0.5rem;
}

.cc-theme .pagination .page-item > span:not(.page-link) {
	padding: 0 0.25rem;
	color: var(--cc-muted);
	font-size: 13px;
	white-space: nowrap;
}

.cc-theme .pagination .page-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
}

.cc-theme .total-results {
	color: var(--cc-muted);
	font-size: 13px;
}

/* The icon takes the line height of the text, so it sits on the first line instead of above it. */
.cc-theme .cc-note > i {
	line-height: inherit;
}

/* Toasts (Blazored.Toast), bottom right: a white card with a coloured edge and icon, sliding in.
   The container selector outweighs the library's scoped styles. */

.blazored-toast-container .blazored-toast {
	--cc-toast-accent: #fe7109;

	align-items: flex-start;
	gap: 0.75rem;
	width: 22rem;
	max-width: calc(100vw - 2rem);
	margin-bottom: 0.75rem;
	padding: 0.875rem 1rem 1rem;
	overflow: hidden;
	border: 1px solid var(--bs-border-color);
	border-top: 1px solid var(--bs-border-color) !important;
	border-left: 4px solid var(--cc-toast-accent);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgb(6 18 51 / 18%);
	font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
	animation: cc-toast-in 0.25s ease-out;
}

.blazored-toast-container .blazored-toast.blazored-toast-success {
	--cc-toast-accent: #2f9e5b;
}

.blazored-toast-container .blazored-toast.blazored-toast-error {
	--cc-toast-accent: #c92a2a;
}

.blazored-toast-container .blazored-toast.blazored-toast-warning {
	--cc-toast-accent: #e0a100;
}

.blazored-toast-container .blazored-toast.blazored-toast-info {
	--cc-toast-accent: #fe7109;
}

.blazored-toast-container .blazored-toast .blazored-toast-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 14px;
	background: var(--cc-toast-accent);
	color: #ffffff !important;
	font-size: 13px;
}

.blazored-toast-container .blazored-toast.blazored-toast-info .blazored-toast-icon,
.blazored-toast-container .blazored-toast.blazored-toast-warning .blazored-toast-icon {
	color: var(--cc-header-bg) !important;
}

.blazored-toast-container .blazored-toast .blazored-toast-message {
	align-self: center;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
}

.blazored-toast-container .blazored-toast .blazored-toast-close {
	align-self: flex-start;
	opacity: 0.6;
}

.blazored-toast-container .blazored-toast .blazored-toast-close:hover {
	opacity: 1;
}

.blazored-toast-container .blazored-toast .blazored-toast-progressbar {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
}

.blazored-toast-container .blazored-toast .blazored-toast-progressbar > span {
	height: 3px;
	border-radius: 0;
	background-color: var(--cc-toast-accent);
	filter: none;
	opacity: 0.6;
}

@keyframes cc-toast-in {
	from {
		opacity: 0;
		transform: translateX(24px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.blazored-toast-container .blazored-toast {
		animation: none;
	}
}

/* Select2 dropdowns of the command center screens. They are drawn outside the screen, so they carry
   their own class (dropdownCssClass) to match the theme's font and fields. */
.cc-select2-dropdown {
	overflow: hidden;
	border-radius: 8px;
	font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
	font-size: 14px;
}

.cc-select2-dropdown .select2-results__option {
	padding: 0.5rem 0.75rem;
}

.cc-select2-dropdown .select2-search__field {
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
}

/* A page that is still loading, such as while the user is signed in. */
.cc-loading-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.875rem;
	min-height: 60vh;
	color: var(--cc-muted);
	font-size: 14px;
}

.cc-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--cc-border);
	border-top-color: var(--cc-orange);
	border-radius: 50%;
	animation: cc-spin 0.8s linear infinite;
}

@keyframes cc-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-spinner {
		animation-duration: 2.4s;
	}
}

/* Story states: one colour each, the same on the board, the backlog and the progress bar. */
.cc-theme .cc-state-new {
	--cc-state: #8a92a6;
}

.cc-theme .cc-state-approved {
	--cc-state: var(--cc-orange);
}

.cc-theme .cc-state-in-progress {
	--cc-state: #3b5bdb;
}

.cc-theme .cc-state-in-test {
	--cc-state: #e0a100;
}

.cc-theme .cc-state-done {
	--cc-state: #2f9e5b;
}

.cc-theme .cc-state-dot {
	display: inline-block;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: var(--cc-state, #8a92a6);
}