/* Breadcrumbs — the trail from Applications down to the page you are on.
 *
 * Replaces three separate hand-written definitions (.financial-op-list-breadcrumb used on nine
 * pages including contracts ones, .contracts-breadcrumb, .fbc-breadcrumb).
 *
 * The separator is a CSS-drawn chevron on a logical property, so it points the right way in
 * both directions. A literal "/" or "›" in the markup does NOT mirror: in Arabic the trail runs
 * right to left and a hard-coded chevron ends up pointing back the way you came.
 */

.app-breadcrumbs {
    margin-block-end: 12px;
    font-size: .78rem;
    line-height: 1.4;
}

.app-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.app-breadcrumbs__link {
    color: var(--tbl-text-muted, #6b7a8a);
    text-decoration: none;
    font-weight: 600;
    padding: 2px 0;
    border-radius: 3px;
}

.app-breadcrumbs__link:hover {
    color: var(--tbl-brand, #005c9e);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.app-breadcrumbs__link:focus-visible {
    outline: 2px solid var(--tbl-brand, #005c9e);
    outline-offset: 2px;
}

/* A dropdown's own label: a grouping, not a destination. Muted and lighter than the links so
   it does not read as something that was clickable and failed. */
.app-breadcrumbs__group {
    color: var(--tbl-text-muted, #6b7a8a);
    font-weight: 500;
    opacity: .75;
}

.app-breadcrumbs__current {
    color: var(--tbl-text, #1a2026);
    font-weight: 700;
    /* A long contract title must not push the trail into a second line on its own. */
    max-inline-size: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The chevron: a rotated square border, so it is one element and follows the text direction. */
.app-breadcrumbs__sep {
    display: inline-block;
    inline-size: 5px;
    block-size: 5px;
    margin-inline: 9px;
    border-block-start: 1.4px solid var(--tbl-border, #bcc3cd);
    border-inline-end: 1.4px solid var(--tbl-border, #bcc3cd);
    transform: rotate(45deg);
    flex: 0 0 auto;
}

[dir="rtl"] .app-breadcrumbs__sep {
    /* transform has no logical form, so this is the one physical rule the file needs. */
    transform: rotate(-135deg);
}

@media (max-width: 640px) {
    /* On a narrow screen the middle of a long trail is the least useful part: the root and the
       page you are on are what orient you. The groupings go first. */
    .app-breadcrumbs__group,
    .app-breadcrumbs__group + .app-breadcrumbs__sep { display: none; }
    .app-breadcrumbs__current { max-inline-size: 22ch; }
}