/* Breadcrumbs Component Styles */
/* Link items are underlined; current item is plain text. */

.ui-breadcrumbs {
  margin-bottom: 8px;
}

.ui-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  color: hsl(var(--muted-foreground)) !important;
}

/*
 * Override Bootstrap Reboot (`a { color: rgba(var(--bs-link-color-rgb), ...) }`)
 * and UA defaults. Target any <a> inside the Mantine breadcrumbs root — do not
 * rely on className landing on the anchor in the serialized DOM.
 */
.ui-breadcrumbs a,
.ui-breadcrumbs a:link,
.ui-breadcrumbs a:visited {
  color: hsl(var(--muted-foreground, var(--muted))) !important;
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
  text-underline-offset: 2px;
  transition: color 150ms ease-in-out;
}

.ui-breadcrumbs a:hover {
  color: hsl(var(--accent-brand)) !important;
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
}

.ui-breadcrumbs__current {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
}

.ui-breadcrumbs__separator {
  color: hsl(var(--muted-foreground));
  opacity: 0.8;
}