/*
CRMS - Tailwind build
Reports module component styles + a small compatibility shim for the
markup that assets/js/report.js injects at runtime (Report Builder,
Scheduled Reports, Sales Forecasting, Win/Loss Analysis, Sales Velocity).

Authored markup in the report pages uses Tailwind utilities directly;
this file only backs the class names that the shared JS emits as strings
and the handful of bespoke components the reference design ships.
*/

/* CSS custom properties the reports design relies on. The Tailwind build
   only ships the *-transparent / light-2xx / heading / body vars, so the
   rest are defined here using the values from tailwind.config.js. These
   names are not consumed anywhere else, so this is safe globally. */
:root {
	--primary: #e41f07;
	--primary-hover: #f37438;
	--border-color: #e8e8e8;
	--white: #ffffff;
	--success: #03c95a;
	--danger: #e70d0d;
	--warning: #ffc107;
	--info: #1b84ff;
	--gray-400: #868787;
	--gray-500: #707070;
	--gray-600: #5a5b5b;
	--gray-700: #454646;
	--light-100: #fdfdfe;
	--box-shadow: 0px 4px 4px 0px #dbdbdb40;
	--rep-secondary: #5a5b5b;
	--rep-secondary-transparent: rgba(90, 91, 91, 0.12);
}

/* ============================================================
   Compat shim - Bootstrap-ish utilities used by report.js
   ============================================================ */
.report-scope .d-none,
.d-none.report-util { display: none !important; }

.rep-util-hidden { display: none !important; }
.d-none { display: none !important; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.report-scope .row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; }
.report-scope .row > [class*="col-"] { padding-left: 12px; padding-right: 12px; }
.report-scope .g-2 { margin: -4px; }
.report-scope .g-2 > [class*="col-"] { padding: 4px; }
.report-scope .g-3 { margin: -8px; }
.report-scope .g-3 > [class*="col-"] { padding: 8px; }
.report-scope .col-6 { flex: 0 0 50%; max-width: 50%; }
.report-scope .col-lg-3 { flex: 0 0 50%; max-width: 50%; }
.report-scope .col-lg-4 { flex: 0 0 100%; max-width: 100%; }
.report-scope .col-lg-5 { flex: 0 0 100%; max-width: 100%; }
.report-scope .col-lg-7 { flex: 0 0 100%; max-width: 100%; }
.report-scope .col-md-4 { flex: 0 0 50%; max-width: 50%; }
.report-scope .col-md-6 { flex: 0 0 50%; max-width: 50%; }
@media (min-width: 768px) {
	.report-scope .col-lg-4 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px) {
	.report-scope .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
	.report-scope .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
	.report-scope .col-lg-5 { flex: 0 0 41.666%; max-width: 41.666%; }
	.report-scope .col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; }
}

.report-scope .fw-medium { font-weight: 500; }
.report-scope .fw-semibold { font-weight: 600; }
.report-scope .fw-bold { font-weight: 700; }
.report-scope .fs-11 { font-size: 11px; }
.report-scope .fs-12 { font-size: 12px; }
.report-scope .fs-13 { font-size: 13px; }
.report-scope .fs-22 { font-size: 22px; }
.report-scope .text-dark { color: var(--heading-color); }
.report-scope .text-muted { color: var(--gray-600); }
.report-scope .text-success { color: var(--success); }
.report-scope .text-danger { color: var(--danger); }
.report-scope .text-primary { color: var(--primary); }
.report-scope .h-100 { height: 100%; }
.report-scope .mb-0 { margin-bottom: 0; }
.report-scope .me-1 { margin-right: 4px; }
.report-scope .d-block { display: block; }
.report-scope .d-flex { display: flex; }
.report-scope .align-items-center { align-items: center; }
.report-scope .justify-content-between { justify-content: space-between; }
.report-scope .gap-2 { gap: 8px; }
.report-scope .flex-grow-1 { flex-grow: 1; }
.report-scope .flex-shrink-0 { flex-shrink: 0; }
.report-scope .text-start { text-align: start; }
.report-scope .border { border: 1px solid var(--border-color); }
.report-scope .rounded { border-radius: 6px; }
.report-scope .p-3 { padding: 12px; }

/* tables injected by JS */
.report-scope .table { width: 100%; border-collapse: collapse; }
.report-scope .table th,
.report-scope .table td {
	padding: 0.65rem 0.75rem;
	border-bottom: 1px solid var(--border-color);
	font-size: 14px;
	vertical-align: middle;
	text-align: left;
}
.report-scope .table-nowrap th,
.report-scope .table-nowrap td { white-space: nowrap; }
.report-scope .table-light th {
	background-color: var(--light-300);
	color: var(--gray-700);
	font-weight: 600;
	font-size: 13px;
	border-bottom: 1px solid var(--border-color);
}
.report-scope .table-responsive { overflow-x: auto; }

/* buttons: the Tailwind build already defines .btn / .btn-primary /
   .btn-outline-light / .btn-sm / .btn-icon (dist/style.css). Do NOT
   restyle them here - only the report-specific "selected" state. */
.report-scope [data-wl-tab].active,
.report-scope [data-vel-dim].active,
.report-scope .btn-outline-light.active {
	--tw-bg-opacity: 1;
	background-color: var(--primary);
	border-color: var(--primary);
	color: #fff;
}
.report-scope .btn-outline-light.text-danger { color: var(--danger); }

/* forecast view segmented control */
.fc-view-group [data-fc-view] {
	background-color: var(--white);
	color: var(--heading-color);
	font-weight: 500;
	transition: all 0.2s ease;
}
.fc-view-group [data-fc-view]:hover { background-color: var(--light-100); }
.fc-view-group [data-fc-view].active { background-color: var(--primary); color: #fff; }

/* form controls injected by JS + used in the authored markup.
   Matches the project's `form-input` pattern: 1px #e8e8e8 border,
   rounded-md, py-2 px-3, 14px text, subtle shadow. */
.report-scope .form-control,
.report-scope .form-select {
	display: block;
	width: 100%;
	min-height: 38px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
	background-color: var(--white);
	color: var(--body-color);
	box-shadow: var(--box-shadow);
	transition: border-color 0.15s ease;
}
.report-scope .form-control::placeholder { color: var(--gray-400); }
.report-scope .form-control:focus,
.report-scope .form-select:focus {
	outline: none;
	border-color: var(--primary);
}
.report-scope .form-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2rem;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235a5b5b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.65rem center;
	background-size: 14px;
}
.report-scope .form-select.w-auto { width: auto; }
.report-scope .form-select-sm,
.report-scope .form-control-sm {
	min-height: 32px;
	padding: 0.35rem 0.6rem;
	font-size: 13px;
}
.report-scope .form-select-sm { padding-right: 1.8rem; background-position: right 0.55rem center; }
.report-scope .form-label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 13px;
	font-weight: 500;
	color: var(--heading-color);
}

/* badges + soft backgrounds */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
}
.bg-soft-primary { background-color: var(--primary-transparent); }
.bg-soft-secondary { background-color: var(--rep-secondary-transparent); }
.bg-soft-success { background-color: var(--success-transparent); }
.bg-soft-info { background-color: var(--info-transparent); }
.bg-soft-warning { background-color: var(--warning-transparent); }
.bg-soft-danger { background-color: var(--danger-transparent); }
.text-secondary { color: var(--rep-secondary); }

/* alert / toast */
.alert {
	position: relative;
	border: 1px solid transparent;
	border-radius: 6px;
}
.alert-success { background-color: var(--success-transparent); border-color: var(--success); color: var(--success); }
.alert-warning { background-color: var(--warning-transparent); border-color: var(--warning); color: var(--warning); }
.alert-danger  { background-color: var(--danger-transparent);  border-color: var(--danger);  color: var(--danger); }

/* dropdown injected by JS (scheduled reports row actions) */
.report-scope .dropdown { position: relative; }
.report-scope .dropdown-menu {
	position: absolute;
	z-index: 20;
	min-width: 180px;
	margin-top: 4px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background-color: var(--white);
	box-shadow: var(--box-shadow);
	list-style: none;
}
.report-scope .dropdown-menu-end { right: 0; }
.report-scope .dropdown-menu.hidden { display: none; }
.report-scope [data-sched-actions] { display: none; }
.report-scope [data-sched-actions].show { display: block; }

/* lightweight reports modal (Tailwind build) */
.report-modal {
	position: fixed;
	inset: 0;
	z-index: 1050;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 16px;
	background-color: rgba(0, 0, 0, 0.45);
	overflow-y: auto;
}
.report-modal.flex { display: flex; }
.report-modal .report-modal-dialog {
	width: 100%;
	max-width: 560px;
	background-color: var(--white);
	border-radius: 10px;
	box-shadow: var(--box-shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.2));
}
.report-scope .dropdown-item {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	background: none;
	font-size: 13px;
	color: var(--body-color);
	text-align: left;
	border-radius: 6px;
	cursor: pointer;
}
.report-scope .dropdown-item:hover { background-color: var(--primary-transparent); color: var(--primary); }
.report-scope .dropdown-item.text-danger { color: var(--danger); }

/* ============================================================
   Report wizard stepper  (report-builder.html)
   ============================================================ */
.report-builder .import-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}
.report-builder .import-steps li {
	position: relative;
	flex: 1 1 0;
	min-width: 180px;
}
.report-builder .import-step {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	background-color: var(--white);
	color: var(--body-color);
	text-align: start;
	transition: all 0.2s ease;
}
.report-builder .import-step:hover:not(.is-locked) { border-color: var(--primary); }
.report-builder .import-step .import-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--light-400);
	color: var(--gray-700);
	font-size: 13px;
	font-weight: 600;
}
.report-builder .import-step .import-step-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--heading-color);
	line-height: 1.3;
}
.report-builder .import-step .import-step-hint {
	display: block;
	font-size: 11px;
	color: var(--gray-600);
}
.report-builder .import-step.is-active {
	border-color: var(--primary);
	background-color: var(--primary-transparent);
}
.report-builder .import-step.is-active .import-step-num { background-color: var(--primary); color: #fff; }
.report-builder .import-step.is-done .import-step-num { background-color: var(--success); color: #fff; }
.report-builder .import-step.is-locked { opacity: 0.6; cursor: not-allowed; }
.report-builder .import-pane { display: none; }
.report-builder .import-pane.is-active { display: block; }

/* ============================================================
   Report builder - field / filter / viz pickers
   ============================================================ */
.rb-fields { max-height: 340px; overflow-y: auto; padding-right: 4px; }
.rb-field {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	background-color: var(--white);
	color: var(--body-color);
	font-size: 13px;
	text-align: start;
	transition: all 0.2s ease;
}
.rb-field + .rb-field { margin-top: 6px; }
.rb-field:hover { border-color: var(--primary); }
.rb-field.is-selected { border-color: var(--primary); background-color: var(--primary-transparent); }
.rb-field .rb-field-type {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background-color: var(--light-400);
	color: var(--gray-700);
	font-size: 12px;
}
.rb-field .rb-field-name {
	flex-grow: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rb-selected {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 42px;
	padding: 8px;
	border: 1px dashed var(--border-color);
	border-radius: 6px;
	background-color: var(--light-100);
}
.rb-selected .rb-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px;
	border-radius: 4px;
	background-color: var(--primary-transparent);
	color: var(--primary);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}
.rb-selected .rb-chip button {
	border: 0;
	background: none;
	padding: 0;
	line-height: 1;
	color: inherit;
	opacity: 0.7;
	cursor: pointer;
}
.rb-selected .rb-chip button:hover { opacity: 1; }
.rb-filter-group {
	position: relative;
	padding: 14px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background-color: var(--light-100);
}
.rb-filter-group + .rb-filter-group { margin-top: 28px; }
.rb-filter-group + .rb-filter-group::before {
	content: attr(data-join);
	position: absolute;
	top: -20px;
	inset-inline-start: 14px;
	padding: 1px 10px;
	border: 1px solid var(--border-color);
	border-radius: 20px;
	background-color: var(--white);
	color: var(--gray-700);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}
.rb-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-filter + .rb-filter { margin-top: 8px; }
.rb-filter > .rb-filter-join { flex: 0 0 76px; }
.rb-filter > .form-select,
.rb-filter > .form-control { flex: 1 1 140px; min-width: 120px; }
.rb-viz {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	padding: 14px 8px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background-color: var(--white);
	color: var(--body-color);
	font-size: 12px;
	transition: all 0.2s ease;
	cursor: pointer;
}
.rb-viz i { font-size: 22px; color: var(--gray-600); }
.rb-viz:hover { border-color: var(--primary); }
.rb-viz.is-selected { border-color: var(--primary); background-color: var(--primary-transparent); color: var(--primary); }
.rb-viz.is-selected i { color: var(--primary); }

/* ============================================================
   AI-style helper blocks reused by the reports design
   ============================================================ */
.ai-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 8px;
	border: 1px solid var(--primary-transparent);
	border-radius: 20px;
	background-color: var(--primary-transparent);
	color: var(--primary);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}
.ai-chip i { font-size: 12px; }
.ai-chip.ai-chip-muted { border-color: var(--border-color); background-color: transparent; color: var(--gray-600); }

.ai-insight {
	position: relative;
	width: 100%;
	padding: 16px 16px 16px 20px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background-color: var(--white);
	transition: box-shadow 0.2s ease;
}
.ai-insight::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: 0;
	width: 3px;
	border-start-start-radius: 8px;
	border-end-start-radius: 8px;
	background-color: var(--gray-400);
}
.ai-insight:hover { box-shadow: var(--box-shadow); }
.ai-insight.is-critical::before { background-color: var(--danger); }
.ai-insight.is-high::before { background-color: var(--warning); }
.ai-insight.is-medium::before { background-color: var(--info); }
.ai-insight.is-opportunity::before { background-color: var(--success); }

.ai-thinking { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-600); }
.ai-thinking .ai-thinking-dots { display: inline-flex; gap: 3px; }
.ai-thinking .ai-thinking-dots span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--primary);
	animation: ai-bounce 1.2s infinite ease-in-out;
}
.ai-thinking .ai-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-thinking .ai-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-bounce {
	0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
	.ai-thinking .ai-thinking-dots span { animation: none; opacity: 0.6; }
}
.ai-skeleton span {
	display: block;
	height: 10px;
	margin-bottom: 8px;
	border-radius: 4px;
	background-color: var(--light-400);
}
.ai-skeleton span:last-child { margin-bottom: 0; }
.ai-empty { padding: 40px 20px; text-align: center; color: var(--gray-600); }
.ai-empty .ai-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 14px;
	border-radius: 50%;
	background-color: var(--light-300);
	color: var(--gray-500);
	font-size: 26px;
}
.ai-empty h6 { margin-bottom: 4px; color: var(--heading-color); font-weight: 600; }
.ai-empty p { margin-bottom: 0; font-size: 13px; }

/* ============================================================
   Report metric helpers (velocity formula, win/loss bar, delta)
   ============================================================ */
.rep-formula {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background-color: var(--light-100);
}
.rep-formula .rep-formula-part { text-align: center; min-width: 96px; }
.rep-formula .rep-formula-part .rep-formula-value {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: var(--heading-color);
	line-height: 1.2;
}
.rep-formula .rep-formula-part .rep-formula-label { display: block; font-size: 11px; color: var(--gray-600); }
.rep-formula .rep-formula-op { font-size: 18px; font-weight: 600; color: var(--gray-500); }
.rep-formula .rep-formula-result {
	padding: 8px 16px;
	border-radius: 8px;
	background-color: var(--primary-transparent);
	color: var(--primary);
	text-align: center;
}
.rep-formula .rep-formula-result .rep-formula-value { color: var(--primary); font-size: 22px; }
.rep-formula .rep-formula-result .rep-formula-label { color: var(--primary); opacity: 0.75; }

.rep-winloss {
	display: flex;
	height: 10px;
	border-radius: 20px;
	overflow: hidden;
	background-color: var(--light-400);
}
.rep-winloss span { display: block; height: 100%; }
.rep-winloss .rep-won { background-color: var(--success); }
.rep-winloss .rep-lost { background-color: var(--danger); }

.rep-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.rep-delta.is-up { color: var(--success); }
.rep-delta.is-down { color: var(--danger); }
.rep-delta.is-flat { color: var(--gray-600); }

/* global table header tint for the lead funnel / aging report lists
   (mirrors the Bootstrap reference; scoped rules above cover JS output) */
table.table > thead.table-light > tr > th,
.custom-table thead.table-light th {
	background-color: var(--light-100);
	color: var(--gray-700);
	font-weight: 600;
}
table.table-nowrap th,
table.table-nowrap td { white-space: nowrap; }

/* meter bar (forecast attainment) */
.ai-meter { display: flex; align-items: center; gap: 8px; }
.ai-meter .ai-meter-track {
	position: relative;
	flex: 1 1 auto;
	min-width: 48px;
	height: 6px;
	border-radius: 20px;
	background-color: var(--light-400);
	overflow: hidden;
}
.ai-meter .ai-meter-fill {
	display: block;
	height: 100%;
	border-radius: 20px;
	background-color: var(--primary);
	transition: width 0.4s ease;
}
.ai-meter .ai-meter-value { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--heading-color); }
.ai-meter.is-success .ai-meter-fill { background-color: var(--success); }
.ai-meter.is-warning .ai-meter-fill { background-color: var(--warning); }
.ai-meter.is-danger .ai-meter-fill { background-color: var(--danger); }
.ai-meter.is-info .ai-meter-fill { background-color: var(--info); }

/* relative-strength dot label */
.rel-strength {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}
.rel-strength::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--gray-400);
	flex-shrink: 0;
}
.rel-strength.is-strong::before { background-color: var(--success); }
.rel-strength.is-good::before { background-color: var(--info); }
.rel-strength.is-neutral::before { background-color: var(--gray-500); }
.rel-strength.is-weak::before { background-color: var(--warning); }
.rel-strength.is-risk::before { background-color: var(--danger); }

/* ============================================================
   Lead Funnel / Lead Aging report helpers
   ============================================================ */
.badge-status,
.badge-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}
.badge-pill { border-radius: 20px; }
.badge-status.bg-success { background-color: var(--success); color: #fff; }
.badge-status.bg-info { background-color: var(--info); color: #fff; }
.badge-status.bg-warning { background-color: var(--warning); color: #fff; }
.badge-status.bg-danger { background-color: var(--danger); color: #fff; }
.badge-soft-success { background-color: var(--success-transparent); color: var(--success); }
.badge-soft-danger { background-color: var(--danger-transparent); color: var(--danger); }
.badge-soft-warning { background-color: var(--warning-transparent); color: var(--warning); }
.badge-soft-info { background-color: var(--info-transparent); color: var(--info); }
.badge-soft-purple { background-color: rgba(123, 97, 255, 0.12); color: #7B61FF; }
.badge-soft-pink { background-color: rgba(221, 37, 144, 0.12); color: #DD2590; }

.leads-card { transition: border-color 0.2s ease; }
.leads-card:hover { border-color: var(--primary); }
.leads-value .line {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 4px;
}
.leads-value .line.bg-pink { background-color: #DD2590; }
.leads-value .line.bg-warning { background-color: var(--warning); }
.leads-value .line.bg-danger { background-color: var(--danger); }
.leads-value .line.bg-success { background-color: var(--success); }

.stage-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	flex-shrink: 0;
	border: 1px solid transparent;
}
.stage-icon.is-purple { background-color: rgba(123, 97, 255, 0.16); border-color: rgba(123, 97, 255, 0.4); }
.stage-icon.is-indigo { background-color: rgba(53, 56, 205, 0.14); border-color: rgba(53, 56, 205, 0.35); }
.stage-icon.is-pink   { background-color: rgba(221, 37, 144, 0.14); border-color: rgba(221, 37, 144, 0.35); }
.stage-icon.is-success{ background-color: var(--success-transparent); border-color: var(--success); }
.stage-icon.is-danger { background-color: var(--danger-transparent); border-color: var(--danger); }

/* progress bar fills painted by report.js R.bars() */
.rep-bar-track {
	height: 8px;
	border-radius: 20px;
	background-color: var(--light-400);
	overflow: hidden;
}
.rep-bar-track > [data-bar] {
	display: block;
	height: 100%;
	border-radius: 20px;
	background-color: var(--primary);
	transition: width 0.6s ease;
}

/* ============================================================
   Dark mode - remap the design tokens the reports module is
   built on. Mirrors the [data-bs-theme=dark] approach used in
   the main Tailwind build; component rules are untouched.
   ============================================================ */
html[data-bs-theme="dark"] {
	--border-color: rgba(255, 255, 255, 0.1);
	--white: #030318;
	--heading-color: #d8dfee;
	--body-color: #d8dfee;
	--light-100: #0c0c20;
	--light-300: #0c0c20;
	--light-400: #0c0c20;
	--gray-400: #9199a9;
	--gray-500: #9199a9;
	--gray-600: #9199a9;
	--gray-700: #9199a9;
	--rep-secondary: #9199a9;
	--box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.4);
	--primary-transparent: rgb(254 241 235 / 7%);
	--success-transparent: rgb(5, 27, 17);
	--danger-transparent: rgb(44, 11, 14);
	--warning-transparent: rgb(51, 39, 1);
	--info-transparent: rgb(3, 40, 48);
	--rep-secondary-transparent: rgba(255, 255, 255, 0.06);
}