@charset "UTF-8";
@layer bf-reset, bf-base, bf-auto, bf-tokens, bf-components, bf-utilities, bf-overrides;
@layer bf-components {
  /* Vertical navigation list — used in left rails (settings sidebar, workflow modules).
   * Distinct from .bf-dropdown__panel which is a floating menu. */
  .bf-menu {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--bf-space-2);
    list-style: none;
    margin: 0;
  }
  .bf-menu__group {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .bf-menu__group + .bf-menu__group {
    margin-top: var(--bf-space-3);
  }
  .bf-menu__title {
    display: flex;
    align-items: center;
    gap: var(--bf-space-1);
    padding: var(--bf-space-1_5) var(--bf-space-2);
    font-size: var(--bf-text-xs);
    font-weight: var(--bf-weight-medium);
    color: var(--bf-color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--bf-tracking-wide);
  }
  .bf-menu__item {
    display: flex;
    align-items: center;
    gap: var(--bf-space-2_5);
    padding: var(--bf-space-2) var(--bf-space-2_5);
    border-radius: var(--bf-radius-md);
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: var(--bf-text-sm);
    font-weight: var(--bf-weight-medium);
    color: var(--bf-color-text-base);
    cursor: pointer;
    text-decoration: none;
    position: relative;
  }
  .bf-menu__item i,
  .bf-menu__item svg {
    width: 1em;
    color: var(--bf-color-text-muted);
    flex-shrink: 0;
  }
  .bf-menu__item:hover {
    background-color: var(--bf-color-surface-hover);
  }
  .bf-menu__item:hover i {
    color: var(--bf-color-text-base);
  }
  .bf-menu__item[aria-current=page],
  .bf-menu__item--active {
    background-color: var(--bf-color-surface-selected);
    color: var(--bf-color-shell-active-fg);
  }
  .bf-menu__item[aria-current=page] i,
  .bf-menu__item--active i {
    color: inherit;
  }
  .bf-menu__item__count {
    margin-left: auto;
    font-size: var(--bf-text-2xs);
    background-color: var(--bf-color-bg-muted);
    padding: 1px var(--bf-space-1_5);
    border-radius: var(--bf-radius-pill);
    color: var(--bf-color-text-muted);
  }
  .bf-menu__item--active .bf-menu__item__count {
    background-color: var(--bf-color-primary-soft);
    color: var(--bf-color-primary-700);
  }
  /* Collapsible section header */
  .bf-menu__head {
    display: flex;
    align-items: center;
    gap: var(--bf-space-2);
    width: 100%;
    padding: var(--bf-space-1_5) var(--bf-space-2);
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--bf-text-xs);
    font-weight: var(--bf-weight-medium);
    color: var(--bf-color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--bf-tracking-wide);
    cursor: pointer;
  }
  .bf-menu__head__chevron {
    width: 1em;
    text-align: center;
    transition: transform var(--bf-duration-fast) var(--bf-ease-out);
  }
  .bf-menu__head[aria-expanded=false] .bf-menu__head__chevron {
    transform: rotate(-90deg);
  }
} /* end @layer */
/*# sourceMappingURL=bf.menu.css.map */