/* ════════════════════════════════════════════════════════════════
   RAG Index Global Styling
   Global color scheme and classes for RAG Index label styling
════════════════════════════════════════════════════════════════ */

/* ─── Dot Indicators ─────────────────────────────────────────── */
.dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}
.dot-green {
	background: #2a8a2a;
}
.dot-orange {
	background: #e07000;
}
.dot-red {
	background: #cc1111;
}
.dot-empty {
	background: transparent;
	border: 1.5px dashed #999;
}

/* ─── RAG Index Container Styling ────────────────────────────── */
.rag-index-label {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-weight: bold;
}
.rag-index-rag {
	color: #2a8a2a;
}
.rag-index-text {
	color: #1b3a5c;
}

/* ─── Individual Letter Colors for RAG ───────────────────────── */
.rag-r {
	color: #cc1111;
}
.rag-a {
	color: #e07000;
}
.rag-g {
	color: #2a8a2a;
}
.rag-index {
	color: #1b3a5c;
}