/* Contact list (people/_people_list): toolbar and table.
   Scoped to .people-toolbar / .people-table so the shared .toolbar and
   .people-list styles used elsewhere stay untouched. */

.people-toolbar,
.people-list-body {
  --people-ink: #1e2b37;
  --people-text: #3a4957;
  --people-muted: #6b7a88;
  --people-faint: #9aa6b2;
  --people-line: #e8edf1;
  --people-row-line: #f0f3f6;
  --people-hover: #f3f8fc;
  --people-accent: #2f7bbf;
}

/* Toolbar: back link on top, title with count badge, actions on the right.
   The views yield the back link and count into .toolbar-row, so it is
   flattened into the grid with display: contents. */
.people-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "back  back  back"
    "title count actions";
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  padding: 18px 24px 16px;
  background-color: #fff;
  border-bottom: 1px solid var(--people-line);

  .toolbar-row { display: contents; }

  .toolbar-title {
    grid-area: title;
    color: var(--people-ink);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-align: left;
  }

  .return-link {
    grid-area: back;
    justify-self: start;
    color: var(--people-muted);
    font-size: 12px;
    text-decoration: none;

    &:hover { color: var(--people-accent); }
  }

  .people-count {
    grid-area: count;
    justify-self: start;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: #eef3f7;
    color: var(--people-muted);
    font-size: 12px;
    white-space: nowrap;
  }

  /* Search results have no title; the search term takes its place */
  .highlight {
    grid-area: title;
    color: var(--people-ink);
    font-size: 18px;
  }

  .tools-menu {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
  }

  .tools-menu > .popover-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #d5dde4;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(16, 24, 40, 0.04);
    color: var(--people-ink);
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.15s, border-color 0.15s;

    &:hover {
      border-color: #c2ccd5;
      background-color: #f5f8fa;
      color: var(--people-ink);
    }

    .fa-solid { color: var(--people-muted); font-size: 12px; }
  }

  /* Menus open under their button, aligned to its right edge */
  .people-actions-popover,
  .fields-popover {
    position-area: bottom span-left;
    margin-top: 6px;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14), 0 0 0 1px rgba(16, 24, 40, 0.06);
  }

  .people-actions-popover {
    > a, > button {
      border-radius: 6px;
      padding: 7px 12px;
      color: var(--people-text);
      font-size: 14px;

      &:hover { background-color: #f2f6f9; color: var(--people-ink); }
    }

    .people-actions-heading { margin-top: 4px; padding: 10px 12px 4px; }
  }

  .fields-popover {
    li {
      padding: 6px 10px;
      border-radius: 6px;
      color: var(--people-text);
      font-size: 13px;

      &:hover { background-color: #f2f6f9; }
    }

    input[type=checkbox] { accent-color: var(--people-accent); margin-right: 6px; }
  }
}

/* Table */
.people-list-body { padding: 8px 24px 24px; }

.person-groups {
  display: flex;
  align-items: center;
  gap: 4px;

  .group-chip {
    line-height: 18px;
    white-space: nowrap;
  }
}

/* Wide tables scroll inside this box instead of widening the page, which
   would drag the banner and toolbar sideways. It scrolls both ways so the
   sticky header row keeps working, and its height leaves room for the banner
   and toolbar so the horizontal scrollbar stays on screen. */
.people-table-scroll {
  overflow: auto;
  max-height: calc(100dvh - 145px);

  /* person.css makes .people-list an inline-block, which leaves the <table>
     box only as wide as this box; sticky cells can't leave it, so the name
     column would scroll away. Auto layout keeps hidden columns in place. */
  .people-list {
    display: table;
    table-layout: auto;
    margin-right: 0;
  }

  /* Keep the name visible while scrolling sideways */
  .people-list td.person-name,
  .people-list tr.header th:nth-child(2) {
    position: sticky;
    left: 0;
  }

  /* Capped so a long name can't fill the box and leave nothing to scroll */
  .people-list td.person-name {
    z-index: 1;
    max-width: min(240px, 40vw);
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #fff;
  }

  .people-list tr.header th { z-index: 2; }
  .people-list tr.header th:nth-child(2) { z-index: 3; }
  .people-list.highlightable tr:hover td.person-name { background-color: #fff7d5; }

  /* Once scrolled sideways, edge the name column so the columns sliding
     under it don't look cut off. A shadow moves with sticky cells; a
     border may not. */
  &[data-scrolled] {
    .people-list td.person-name,
    .people-list tr.header th:nth-child(2) {
      box-shadow: inset -1px 0 0 #e5e5e5, 6px 0 6px -6px rgba(0, 0, 0, 0.15);
    }
  }
}

.people-table.people-list {
  display: table;
  width: 100%;
  table-layout: auto; /* .people-list is fixed, which misplaces columns when some are hidden */
  border-collapse: separate;
  border-spacing: 0;

  tr.header th {
    padding: 12px;
    border-bottom: 1px solid var(--people-line);
    color: var(--people-faint);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  tr[data-href] td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--people-row-line);
    color: var(--people-text);
    font-size: 13px;
  }

  tr[data-href] td:first-of-type { color: var(--people-ink); font-weight: 600; }

  tr:last-child td { border-bottom: 0; }

  th.counter {
    width: 28px;
    padding: 10px 4px 10px 0;
    border-bottom: 1px solid var(--people-row-line);
    color: #c0c8cf;
    font-size: 11px;
  }

  &.highlightable tr[data-href]:hover { background-color: var(--people-hover) !important; }
}

.people-list-empty {
  padding: 48px 0;
  color: var(--people-muted);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 767px) {
  .people-toolbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "back  actions"
      "title title"
      "count count";
    padding: 14px 16px;

    .toolbar-title { font-size: 19px; }
  }

  .people-list-body { padding: 4px 8px 16px; }
}