/* ==========================================================================
   Reports → Return on investment (#3640)
   Namespaced .roi-* so nothing here can reach another report.
   ========================================================================== */

.roi-table td,
.roi-table th {
	vertical-align: middle;
}

.roi-table th.roi-num,
.roi-table td.roi-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* --- product row (the parent, always visible) --- */
.roi-product-toggle {
	background: none;
	border: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	text-align: left;
	color: #1a2b3c;
	font-weight: 600;
	min-height: 44px;
}

.roi-product-toggle:focus-visible {
	outline: 2px solid #003264;
	outline-offset: 2px;
}

.roi-caret {
	color: var(--ed-text-muted, #5A7089);
	font-size: 11px;
	width: 12px;
	flex: 0 0 12px;
	transition: transform 0.15s ease;
}

.roi-caret.roi-open {
	transform: rotate(90deg);
}

.roi-item-count {
	font-size: 12px;
	color: var(--ed-text-muted, #5A7089);
	font-weight: 500;
	margin-left: 20px;
}

/* --- item rows (revealed under a product) --- */
.roi-item-row > td {
	background: #FAFBFD;
}

.roi-item-label {
	padding-left: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #3c4c5d;
	font-weight: 600;
}

.roi-tick {
	color: #B7C3D1;
	font-size: 11px;
}

.roi-when {
	color: var(--ed-text-muted, #5A7089);
	font-size: 13px;
	white-space: nowrap;
}

/* --- ROI pill --- */
.roi-pill {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.roi-pill-good {
	background: #E5F5EC;
	color: #0F7A3D;
}

.roi-pill-mid {
	background: #FFF4E0;
	color: #A35C04;
}

.roi-pill-low {
	background: #FDEAE7;
	color: #B02318;
}

/* --- paid-off cell --- */
.roi-paid {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #0F7A3D;
	white-space: nowrap;
}

.roi-paid-date {
	color: var(--ed-text-muted, #5A7089);
	font-weight: 500;
}

.roi-partial {
	font-size: 13px;
	font-weight: 600;
	color: #3c4c5d;
	white-space: nowrap;
}

.roi-progress {
	min-width: 118px;
}

.roi-bar {
	width: 110px;
	height: 6px;
	border-radius: 999px;
	background: #E8EDF3;
	overflow: hidden;
}

.roi-bar-fill {
	height: 100%;
	border-radius: 999px;
	background: #D97706;
}

.roi-bar-fill.roi-bar-low {
	background: #DC2626;
}

.roi-togo {
	font-size: 11px;
	color: var(--ed-text-muted, #5A7089);
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}

/* What the items with no cost recorded earned — disclosed beside the
   like-for-like figure, never added into it. */
.roi-earned-note {
	font-size: 11px;
	color: var(--ed-text-muted, #5A7089);
	font-weight: 500;
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}

/* --- "no cost recorded" --- */
.roi-dash {
	color: #B7C3D1;
}

.roi-hint {
	color: var(--ed-text-muted, #5A7089);
	font-size: 13px;
}

/* public/style.css sets a global `a { display: block }`, which would drop the
   "Add cost" link onto its own line and orphan the sentence around it. */
.roi-table a,
.roi-hint a {
	display: inline;
	color: #003264;
	font-weight: 600;
	text-decoration: none;
}

.roi-table a:hover,
.roi-hint a:hover {
	text-decoration: underline;
}

@media (max-width: 767.98px) {
	.roi-bar,
	.roi-progress {
		width: 90px;
		min-width: 90px;
	}

	.roi-item-count {
		margin-left: 0;
	}
}