/* ================================================================
   Resayil — Breadcrumb restyle (Phase 24.12 Plan 07)
   Targets Frappe's .page-breadcrumbs + .breadcrumb-item chain.
   CSS-only; no JS; no template edits.
   Source reference: rs-ui-showcase.css §11 (.rsc-breadcrumb / .rsc-bc-*).

   Brand tokens only: --rs-fg, --rs-fg-muted, --rs-fg-subtle, --rs-accent,
   --rs-surface-2, --rs-radius-sm, --rs-font-sans, --rs-font-arabic,
   --rs-text-sm, --rs-duration-fast, --rs-ease.
   ================================================================ */

.page-breadcrumbs,
ol.breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: var(--rs-font-sans);
  font-size: var(--rs-text-sm);
  background: transparent;
}
[dir="rtl"] .page-breadcrumbs,
[dir="rtl"] ol.breadcrumb {
  font-family: var(--rs-font-arabic);
}

.page-breadcrumbs .breadcrumb-item,
ol.breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  color: var(--rs-fg-muted);
  font-weight: 500;
}
.page-breadcrumbs .breadcrumb-item a,
ol.breadcrumb .breadcrumb-item a {
  color: inherit;
  text-decoration: none;
  padding: 0.2rem 0.45rem;
  border-radius: var(--rs-radius-sm);
  transition:
    color var(--rs-duration-fast) var(--rs-ease),
    background var(--rs-duration-fast) var(--rs-ease);
  line-height: 1.35;
}
.page-breadcrumbs .breadcrumb-item a:hover,
ol.breadcrumb .breadcrumb-item a:hover {
  color: var(--rs-accent);
  background: var(--rs-surface-2);
  text-decoration: underline;
  text-decoration-color: var(--rs-accent);
  text-underline-offset: 2px;
}

/* Kill Bootstrap's default pipe/slash separator and replace with
   a chevron-right rendered as an SVG mask (inherits currentColor). */
.page-breadcrumbs .breadcrumb-item + .breadcrumb-item::before,
ol.breadcrumb .breadcrumb-item + .breadcrumb-item::before,
#navbar-breadcrumbs > li + li::before {
  content: "" !important;
  display: inline-block !important;
  float: none !important;
  width: 14px;
  height: 14px;
  margin-inline: 4px;
  padding: 0;
  color: var(--rs-fg-subtle);
  background-color: currentColor;
  /* Tabler chevron-right via inline SVG mask */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 14px 14px;
          mask-size: 14px 14px;
  vertical-align: middle;
  opacity: 0.7;
}
[dir="rtl"] .page-breadcrumbs .breadcrumb-item + .breadcrumb-item::before,
[dir="rtl"] ol.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  transform: scaleX(-1);
}

/* Home icon prefix on the first item — only when 2+ items exist
   (single-segment pages get plain text, per must_haves truth #5). */
.page-breadcrumbs:has(.breadcrumb-item + .breadcrumb-item) > .breadcrumb-item:first-child a::before,
ol.breadcrumb:has(.breadcrumb-item + .breadcrumb-item) > .breadcrumb-item:first-child a::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-inline-end: 5px;
  vertical-align: -2px;
  background-color: currentColor;
  /* Tabler home via inline SVG mask */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 14px 14px;
          mask-size: 14px 14px;
}

/* Active / current page: bold, no pointer, no underline on hover. */
.page-breadcrumbs .breadcrumb-item.active,
ol.breadcrumb .breadcrumb-item.active,
.page-breadcrumbs .breadcrumb-item[aria-current="page"],
ol.breadcrumb .breadcrumb-item[aria-current="page"] {
  color: var(--rs-fg);
  font-weight: 600;
  pointer-events: none;
}
.page-breadcrumbs .breadcrumb-item.active a,
ol.breadcrumb .breadcrumb-item.active a,
.page-breadcrumbs .breadcrumb-item[aria-current="page"] a,
ol.breadcrumb .breadcrumb-item[aria-current="page"] a {
  cursor: default;
  text-decoration: none;
  color: var(--rs-fg);
}
.page-breadcrumbs .breadcrumb-item.active a:hover,
ol.breadcrumb .breadcrumb-item.active a:hover,
.page-breadcrumbs .breadcrumb-item[aria-current="page"] a:hover,
ol.breadcrumb .breadcrumb-item[aria-current="page"] a:hover {
  background: transparent;
  color: var(--rs-fg);
  text-decoration: none;
}

/* Print: plain text slash, no raster-masked icons. */
@media print {
  .page-breadcrumbs .breadcrumb-item + .breadcrumb-item::before,
  ol.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    background: none;
    -webkit-mask-image: none;
            mask-image: none;
    margin-inline: 2px;
    color: var(--rs-fg-subtle);
    opacity: 1;
    width: auto;
    height: auto;
  }
  .page-breadcrumbs > .breadcrumb-item:first-child a::before,
  ol.breadcrumb > .breadcrumb-item:first-child a::before {
    display: none;
  }
}