:root {
	--ds-lime: #9DCB47;
	--ds-ink: #152017;
	--ds-dark: #18261b;
	--ds-darker: #142118;
	--ds-paper: #f5f7f2;
	--ds-muted: #657267;
	--ds-line: #e4eae1;

	/* Re-point Bootstrap's own "primary" tokens at the brand green, so focus
	   rings, checked checkboxes/radios/switches etc. pick it up automatically
	   instead of Bootstrap's default blue. */
	--bs-primary: var(--ds-lime);
	--bs-primary-rgb: 157, 203, 71;
	--bs-focus-ring-color: rgba(157, 203, 71, 0.25);
}

/* Bootstrap bakes the blue focus glow in as a literal rgba() at build time
   rather than reading --bs-primary-rgb at runtime, so the :root override
   above isn't enough on its own - these explicit rules are what actually
   swap the visible color. */
.form-control:focus,
.form-select:focus {
	border-color: var(--ds-lime);
	box-shadow: 0 0 0 0.25rem rgba(157, 203, 71, 0.25);
}

.form-check-input:focus {
	border-color: var(--ds-lime);
	box-shadow: 0 0 0 0.25rem rgba(157, 203, 71, 0.25);
}

.form-check-input:checked {
	background-color: var(--ds-lime);
	border-color: var(--ds-lime);
}

.btn-check:checked + .btn,
.btn-check:focus + .btn {
	border-color: var(--ds-lime);
	box-shadow: 0 0 0 0.25rem rgba(157, 203, 71, 0.25);
}

body {
	background: var(--ds-paper);
	color: var(--ds-ink);
}

.ds-sidebar {
	width: 230px;
	min-height: 100vh;
	background: var(--ds-darker);
	color: #dbe7d8;
	flex: 0 0 230px;
}

.ds-sidebar .ds-brand {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	padding: 18px 16px;
}

.ds-sidebar .ds-brand .dot {
	color: var(--ds-lime);
}

.ds-sidebar .nav-link {
	color: #bdcdbf;
	font-size: 13px;
	border-radius: 10px;
	padding: 10px 14px;
	margin: 2px 8px;
}

.ds-sidebar .nav-link:hover {
	background: #223126;
	color: #fff;
}

.ds-sidebar .nav-link.active {
	background: #293e2c;
	color: #fff;
	box-shadow: inset 3px 0 var(--ds-lime);
}

.ds-sidebar .nav-section {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #8ba08b;
	margin: 18px 16px 6px;
}

.ds-topbar {
	border-bottom: 1px solid var(--ds-line);
	background: #f5f7f2ee;
}

.btn-ds {
	background: var(--ds-lime);
	border-color: var(--ds-lime);
	color: #1b2b11;
	font-weight: 700;
}

.btn-ds:hover {
	background: #8bbd3c;
	border-color: #8bbd3c;
	color: #1b2b11;
}

.ds-metric {
	border: 1px solid var(--ds-line);
	border-radius: 12px;
	padding: 16px;
	background: #fff;
}

.ds-metric b {
	display: block;
	font-size: 26px;
}

.ds-metric span {
	font-size: 12px;
	color: var(--ds-muted);
}

.ds-panel {
	border: 1px solid var(--ds-line);
	border-radius: 16px;
	background: #fff;
	padding: 20px;
}

.ds-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #83b73c;
	margin-right: 6px;
}

.ds-dot.off {
	background: #c5c9c3;
}

.ds-dot.pending {
	background: #e4a765;
}

.ds-dot.revoked, .ds-dot.retired {
	background: #c6594e;
}

.ds-auth-shell {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ds-paper);
}

.ds-auth-card {
	max-width: 420px;
	width: 100%;
	background: #fff;
	border: 1px solid var(--ds-line);
	border-radius: 18px;
	padding: 32px;
	box-shadow: 0 12px 35px #193b1610;
}

.ds-copy-link {
	background: #eff5e9;
	border: 1px solid #d8e7d0;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 12px;
	word-break: break-all;
}