/* Per-client sub-header for tax advisors (ClientNavComponent), rendered by the
   simplified layout below the top header on every client page. Full-width dark bar. */
.client-nav {
  margin-bottom: 1rem;
  background-color: var(--app-subheader-bg);
  color: var(--app-subheader-fg);
  font-size: var(--app-text-sm);

  .container-xxl {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  /* Client name, or with more clients in the office the switcher: name + chevron as a
     plain button, so it doesn't read as another tab. */
  .client-name {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 25rem;
    margin-right: 0.5rem;
    color: var(--app-fg-on-inverse);
    font-weight: var(--app-text-semibold);

    .name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .switcher {
    display: flex;
    min-width: 0;

    .toggle {
      --bs-btn-padding-x: 0.5rem;
      --bs-btn-padding-y: 0.3rem;
      --bs-btn-font-size: var(--app-text-sm);
      --bs-btn-font-weight: var(--app-text-semibold);
      --bs-btn-color: var(--app-fg-on-inverse);
      --bs-btn-border-width: 0;
      --bs-btn-hover-color: var(--app-fg-on-inverse);
      --bs-btn-hover-bg: color-mix(in srgb, var(--app-fg-on-inverse) 10%, transparent);
      --bs-btn-active-color: var(--app-fg-on-inverse);
      --bs-btn-active-bg: color-mix(in srgb, var(--app-fg-on-inverse) 10%, transparent);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      min-width: 0;
      margin-left: -0.5rem;

      .bi {
        flex-shrink: 0;
        color: var(--app-subheader-active-fg);
      }
    }

    .dropdown-menu {
      --bs-dropdown-min-width: 16rem;
    }

    .search {
      padding: 0.25rem 0.75rem 0.5rem;
    }

    .entries {
      max-height: min(24rem, 60vh);
      overflow-y: auto;
    }
  }

  /* Scrolls sideways when the tabs don't fit (mobile). */
  .tabs {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    color: inherit;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-pill);
    line-height: 1.2;
    white-space: nowrap;

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        color: var(--app-subheader-hover-fg);
        text-decoration: none;
      }
    }

    /* Same pattern as the header pills: yellow border and icon, white copy. */
    &.active {
      color: var(--app-fg-on-inverse);
      font-weight: var(--app-text-semibold);
      border-color: var(--app-subheader-active-fg);

      .bi {
        color: var(--app-subheader-active-fg);
      }
    }
  }

  @media (max-width: 767.98px) {
    .container-xxl {
      flex-direction: column;
      align-items: stretch;
      gap: 0.4rem;
    }

    .client-name {
      flex: none;
      max-width: none;
      margin-right: 0;
    }
  }
}