/* Global search — the quick actions and result sections in the nav search
   panel (directory, issued invoices, received bills). */

@layer components {
  .nav-search-panel__quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .nav-search-panel__action-form {
    display: contents;
  }

  .nav-search-panel__action-btn {
    align-items: center;
    background: var(--color-surface-tint);
    border: none;
    border-radius: var(--radius-pill);
    color: var(--color-brand);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    text-decoration: none;
    white-space: nowrap;
  }

  .nav-search-panel__action-btn:hover {
    background: var(--color-brand-tint);
  }

  .search-results {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-block-size: min(26rem, 60dvh);
    overflow-y: auto;

    /* In the native apps the results are the whole page (the app's own search
       screen), not a dropdown under the nav, so the page itself scrolls. */
    [data-platform~="native"] & {
      max-block-size: none;
      overflow-y: visible;
    }
  }

  /* One company's results. With an accountant inside a client the list
     holds two — their office's first, the client's under it — each opened
     by a heading naming it, the client's ruled off and marked as the
     switcher marks a client. */
  .search-results__company {
    --search-company-mark: var(--color-surface-inverted);

    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  .search-results__company--client {
    --search-company-mark: var(--color-brand-fill);

    border-block-start: 1.5px dashed var(--color-border-strong);
    padding-block-start: 0.75rem;
  }

  .search-results__heading {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    padding: 0 0.375rem;
  }

  .search-results__heading-mark {
    align-items: center;
    background: var(--search-company-mark);
    block-size: 1.5rem;
    border-radius: var(--radius-xs);
    color: var(--color-ink-inverted);
    display: flex;
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 700;
    inline-size: 1.5rem;
    justify-content: center;
  }

  .search-results__heading-name {
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 700;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-results__heading-caption {
    flex-shrink: 0;
    margin: 0;
  }

  .search-results__company--client .search-results__heading-caption {
    color: var(--color-brand);
  }

  .search-results__section {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .search-results__title {
    margin: 0 0 0.25rem;
    padding: 0 0.375rem;
  }

  .search-results__empty {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    margin: 0;
    padding: 0.25rem 0.375rem;
  }

  .search-result {
    align-items: flex-start;
    border-radius: var(--radius-sm);
    display: flex;
    gap: 0.625rem;
    padding: 0.375rem;
  }

  .search-result__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
  }

  .search-result:hover {
    background: var(--color-surface-tint);
  }

  .search-result__avatar {
    align-items: center;
    background: var(--color-surface-tint);
    block-size: 2rem;
    border-radius: 50%;
    color: var(--color-brand);
    display: flex;
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    inline-size: 2rem;
    justify-content: center;
    overflow: hidden;
  }

  /* A client is a company, not a person: the company card's square mark. */
  .search-result__avatar--client {
    background: var(--color-brand-fill);
    border-radius: var(--radius-sm);
    color: var(--color-ink-inverted);
    font-size: 0.6875rem;
  }

  .search-result__avatar-img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  .search-result__link {
    color: var(--color-ink-secondary);
    font-size: 0.875rem;
    min-inline-size: 0;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-result__link:hover {
    color: var(--color-brand);
  }

  .search-result__meta {
    color: var(--color-ink-muted);
    font-size: 0.75rem;
  }

  .search-result__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .search-result__action-form {
    display: contents;
  }

  .search-result__btn {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-brand);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    text-decoration: none;
    white-space: nowrap;

    /* The glyph's own 15px would sit on the baseline of 12px text and
       push the pill taller than its siblings; it follows the text instead. */
    .icon {
      block-size: 1.15em;
      flex-shrink: 0;
      inline-size: 1.15em;
    }
  }

  .search-result__btn:hover {
    background: var(--color-surface-tint);
  }

  .search-result__btn[disabled],
  .search-result__btn--disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .search-result__btn--disabled:hover {
    background: var(--color-surface);
  }

  .nav-search-panel__action-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}