/**
 * CRM — breadcrumbs as pill buttons (tokens from crm-theme.css).
 */

.main-content .breadcrumb,
.crm-company-breadcrumb-bar .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.45rem;
	padding: 0;
	margin: 0;
	list-style: none;
	background: transparent;
	font-size: 0.8125rem;
	--crm-crumb-radius: var(--crm-radius-md, 0.625rem);
	--crm-crumb-border: rgba(var(--crm-color-primary-rgb, 37, 99, 235), 0.2);
	--crm-crumb-bg: var(--crm-fi-bg, #f1f5f9);
	--crm-crumb-text: var(--crm-color-text-muted, #64748b);
	--crm-crumb-shadow: var(--crm-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
	--crm-crumb-accent: var(--crm-color-primary, #2563eb);
	--crm-crumb-active-bg: linear-gradient(135deg, rgba(var(--crm-color-primary-rgb, 37, 99, 235), 0.1) 0%, rgba(var(--crm-color-primary-rgb, 37, 99, 235), 0.04) 100%);
	--crm-crumb-active-border: rgba(var(--crm-color-primary-rgb, 37, 99, 235), 0.24);
	--crm-crumb-active-text: var(--crm-color-text, #0f172a);
}

.main-content .breadcrumb-item,
.crm-company-breadcrumb-bar .breadcrumb-item {
	display: inline-flex;
	align-items: center;
}

.main-content .breadcrumb-item + .breadcrumb-item,
.crm-company-breadcrumb-bar .breadcrumb-item + .breadcrumb-item {
	padding-left: 0;
}

.main-content .breadcrumb-item + .breadcrumb-item::before,
.crm-company-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
	float: none;
	padding-left: 0;
	padding-right: 0;
	margin-right: 0.1rem;
	content: "›";
	font-size: 1rem;
	line-height: 1;
	font-weight: 300;
	color: var(--crm-color-text-muted, #94a3b8);
	opacity: 0.85;
}

.main-content .breadcrumb-item a,
.crm-company-breadcrumb-bar .breadcrumb-item a {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.85rem;
	font-weight: 600;
	color: var(--crm-crumb-text) !important;
	text-decoration: none !important;
	border-radius: var(--crm-crumb-radius);
	background: var(--crm-crumb-bg);
	border: 1px solid var(--crm-crumb-border);
	box-shadow: var(--crm-crumb-shadow);
	transition:
		color 0.15s ease,
		background 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.main-content .breadcrumb-item a:hover,
.crm-company-breadcrumb-bar .breadcrumb-item a:hover {
	color: var(--crm-crumb-accent) !important;
	border-color: rgba(var(--crm-color-primary-rgb, 37, 99, 235), 0.35);
	box-shadow: var(--crm-shadow-md, 0 4px 16px rgba(15, 23, 42, 0.08));
}

.main-content .breadcrumb-item a:focus-visible,
.crm-company-breadcrumb-bar .breadcrumb-item a:focus-visible {
	outline: 2px solid rgba(var(--crm-color-primary-rgb, 37, 99, 235), 0.4);
	outline-offset: 2px;
}

.main-content .breadcrumb-item.active,
.crm-company-breadcrumb-bar .breadcrumb-item.active {
	padding: 0.4rem 0.85rem;
	font-weight: 700;
	color: var(--crm-crumb-active-text) !important;
	border-radius: var(--crm-crumb-radius);
	background: var(--crm-crumb-active-bg);
	border: 1px solid var(--crm-crumb-active-border);
	box-shadow: var(--crm-crumb-shadow);
}

[data-bs-theme="dark"] .main-content .breadcrumb,
[data-bs-theme="dark"] .crm-company-breadcrumb-bar .breadcrumb {
	--crm-crumb-border: rgba(96, 165, 250, 0.22);
	--crm-crumb-bg: var(--crm-fi-bg, #2a2f38);
	--crm-crumb-text: #cbd5e1;
	--crm-crumb-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	--crm-crumb-accent: #60a5fa;
	--crm-crumb-active-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.22) 0%, rgba(37, 99, 235, 0.1) 100%);
	--crm-crumb-active-border: rgba(96, 165, 250, 0.32);
	--crm-crumb-active-text: #f1f5f9;
}

[data-bs-theme="dark"] .main-content .breadcrumb-item a:hover,
[data-bs-theme="dark"] .crm-company-breadcrumb-bar .breadcrumb-item a:hover {
	border-color: rgba(96, 165, 250, 0.45);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Optional: compact strip under header when page uses .crm-header-breadcrumb-bar */
.crm-header-breadcrumb-bar {
	padding: 0.5rem 1.25rem 0;
	border-bottom: 1px solid var(--crm-shell-header-border, var(--crm-color-border));
	background: var(--crm-shell-header-bg, var(--crm-color-surface));
}

.crm-header-breadcrumb-bar .breadcrumb {
	font-size: 0.78rem;
}

@media (max-width: 767.98px) {
	.main-content .breadcrumb-item a,
	.main-content .breadcrumb-item.active,
	.crm-company-breadcrumb-bar .breadcrumb-item a,
	.crm-company-breadcrumb-bar .breadcrumb-item.active {
		padding: 0.32rem 0.65rem;
		font-size: 0.75rem;
	}
}