:root {
	--primary-color: #3498db;
	--success-color: #2ecc71;
	--warning-color: #f39c12;
	--danger-color: #e74c3c;
}

.card {
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	border: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header {
	background-color: rgba(0, 0, 0, 0.03);
	border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.navbar-brand {
	font-weight: 600;
	display: flex;
	align-items: flex-end;
}

.code-block {
	background-color: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 0.25rem;
	padding: 1rem;
	font-family: "Courier New", monospace;
	font-size: 0.875rem;
}

.stats-card {
	transition: transform 0.2s;
}

.stats-card:hover {
	transform: translateY(-2px);
}

.integration-status-active {
	color: var(--success-color);
}

.integration-status-inactive {
	color: var(--danger-color);
}

.platform-config {
	background: #f8f9fa;
	border-left: 4px solid var(--primary-color);
	padding: 1rem;
	margin: 1rem 0;
}

.btn-group-sm > .btn,
.btn-sm {
	padding: 0.25rem 0.5rem;
	font-size: 1.2rem;
	border-radius: 0.2rem !important;
	border-color: #aaa;
	margin-left: 10px !important;
	box-shadow: none !important;
}

.btn-primary,
.btn-outline-secondary {
	border-radius: 0.2rem !important;
	margin-left: 8px !important;
}

.bg-info {
	color: rgb(25 135 84);
	background-color: rgb(217 255 237) !important;
	border: 1px solid rgb(25 135 84) !important;
}

.bg-success,
.bg-true {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

/* Fixed sizing for dashboard chart canvas to prevent infinite growth */
#launchChart {
	display: block; /* ensure block for height to apply */
	height: 240px; /* default visible height */
	max-height: 400px;
	width: 100% !important;
}

/* Loader overlay used when chart data is being fetched */
.chart-loader {
	position: relative;
}
.chart-loader .loader-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.6);
	z-index: 5;
}