/* ============================================================================
   BREADCRUMBS
   Consolidated from theme.css (vendor) and theme-override.css (app).
   Values are the resolved cascade result as of the consolidation — no
   intended visual change.

   Two unrelated things share this name:
     .breadcrumbs  — the vendor page-header trail (includes/page_header.html,
                     phone_numbers/route_graph.html)
     .breadcrumb   — the Bootstrap component used by layouts/default.html
   Both live here because both are breadcrumbs; they do not interact.

   Cascade notes (rules that still win over this file and are NOT reproduced):
   - layouts/default.html carries an inline <style> that loads after every
     stylesheet and restyles .breadcrumb / .breadcrumb-item. It overrides the
     .breadcrumb padding below (padding: 0), the separator colour and the
     .breadcrumb-item.active colour. Only .breadcrumb-item's base colour and
     the .breadcrumb background/border/radius survive from this file — and on
     the default layout even those are cancelled by the markup's
     `bg-transparent border-0` utilities.
   - theme.css keeps `body[data-background-color="dark"] .breadcrumbs`
     (border-color !important) and `... .breadcrumbs li a` (colour), which win
     over the vendor values below on the dark chrome. They are shared with
     .card/.table and belong to the chrome owner.
   - theme.css keeps a @media (max-width: 767px) block scoping
     `.main-panel .page-header .breadcrumbs`; it belongs to the page-header
     owner and still supplies the mobile padding-left/margin-left.
   ============================================================================ */

/* ------------------------ VENDOR PAGE-HEADER TRAIL ------------------------ */

.breadcrumbs {
    list-style: none;
    display: inline;
    width: auto;
    height: 100%;
    margin-bottom: 0;
    margin-left: 0;
    /* !important retained: theme.css's @media (max-width: 767px)
       `.main-panel .page-header .breadcrumbs` sets padding-top: 15px at higher
       specificity, and 8px is what renders today at every width. */
    padding-top: 8px !important;
    padding-bottom: 0;
    padding-left: 0;
    border-left: none;
}

.breadcrumbs li {
    display: inline-block;
}

.breadcrumbs li a {
    color: #2a2f5b;
    font-size: 13px;
}

.breadcrumbs li a i {
    font-size: 16px;
}

.breadcrumbs li a:hover {
    text-decoration: none;
}

.breadcrumbs li.separator {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
}

/* --------------------------- BOOTSTRAP COMPONENT -------------------------- */

.breadcrumb {
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0.75rem 1rem;
}

.breadcrumb-item {
    color: var(--text-tertiary);
}

.breadcrumb-item.active {
    color: var(--text-secondary);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}