/* 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; }

.people-table-scroll { overflow-x: auto; }

.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; }
}