/* Page styles for the people area (admin redesign, DEC-181). Scoped to body.admin-shell.
   Boards: CustomerDetail, UsersHub, EnvironmentsList; /admin/customers follows ServersList.
   Prefix: ppl- (people). */

/* ── Page header (list pages) ─────────────────────────────────────────── */

.admin-shell .ppl-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 16px;
}

.admin-shell .ppl-head--hub {
  margin-bottom: 18px;
}

.admin-shell .ppl-head__text {
  flex: 1 1 300px;
  min-width: 0;
}

.admin-shell .ppl-head__title {
  margin: 0;
  font: 700 30px/1.1 var(--tdo-font-heading);
  overflow-wrap: anywhere;
}

.admin-shell .ppl-head__sub {
  margin: 4px 0 0;
  color: var(--tdo-color-muted);
  font-size: 14px;
}

.admin-shell .ppl-hub-tabs .ui-tabs,
.admin-shell .ppl-hub-tabs + .ui-tabs {
  margin-bottom: 18px;
}

/* ── List card: filter row + table + footer (ServersList pattern) ───────── */

.admin-shell .ppl-list {
  margin: 0 0 20px;
  background: #fff;
  border: 1px solid var(--tdo-color-border);
  border-radius: 16px;
}

.admin-shell .ppl-list__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border-bottom: 1px solid var(--tdo-color-border);
}

.admin-shell .ppl-list__title {
  margin: 0;
  font: 700 16px var(--tdo-font-body);
}

.admin-shell .ppl-list__search {
  flex: 1 1 280px;
  display: flex;
  min-width: 0;
}

.admin-shell .ppl-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--tdo-color-border-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--tdo-color-text);
  font: 400 13px var(--tdo-font-body);
}

.admin-shell .ppl-input:focus {
  outline: 2px solid var(--tdo-color-secondary);
  outline-offset: 1px;
}

.admin-shell .ppl-spacer {
  flex: 1;
}

.admin-shell .ppl-chip,
.admin-shell .ppl-chip:link,
.admin-shell .ppl-chip:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--tdo-color-border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--tdo-color-text);
  font: 500 13px var(--tdo-font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.admin-shell .ppl-chip:hover {
  background: var(--tdo-color-hover);
  color: var(--tdo-color-text);
  text-decoration: none;
}

.admin-shell .ppl-chip--on,
.admin-shell .ppl-chip--on:link,
.admin-shell .ppl-chip--on:visited,
.admin-shell .ppl-chip--on:hover {
  background: #2d3139;
  border-color: #2d3139;
  color: #fff;
}

.admin-shell .ppl-chip .badge {
  height: 18px;
}

/* A chip that opens a menu (Stack ▾, Customer ▾…): the kit menu button
   dressed as a chip. */
.admin-shell .ppl-list__filters .ui-menu > .button.ppl-chip {
  min-height: 0;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow: none;
  font: 500 13px var(--tdo-font-body);
}

.admin-shell .ppl-list__filters .ui-menu__panel {
  left: 0;
  right: auto;
  max-height: 340px;
  overflow-y: auto;
}

.admin-shell .ppl-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tdo-color-muted);
  font-size: 13px;
  white-space: nowrap;
}

/* Table inside the list card. */
.admin-shell .ppl-list .admin-users-table-wrap {
  margin: 0;
}

@media (min-width: 1024px) {
  /* Let row menus (⋯) drop below the card instead of being clipped. */
  .admin-shell .ppl-list .admin-users-table-wrap {
    overflow: visible;
  }
}

.admin-shell .ppl-list .admin-users-table th:first-child,
.admin-shell .ppl-list .admin-users-table td:first-child {
  padding-left: 14px;
}

.admin-shell .ppl-list .admin-users-table th:last-child,
.admin-shell .ppl-list .admin-users-table td:last-child {
  padding-right: 14px;
}

.admin-shell .ppl-list .admin-users-table td {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ServersList variant: tinted header row, 14px side padding. */
.admin-shell .ppl-list--servers-like .admin-users-table th {
  padding: 10px 14px;
  background: #f8fafb;
}

.admin-shell .ppl-list--servers-like .admin-users-table td {
  padding: 12px 14px;
}

.admin-shell .ppl-list--servers-like .admin-users-table tbody tr:hover td {
  background: #fafce5;
}

.admin-shell .ppl-list .ui-empty {
  border-bottom: 1px solid #eef2f5;
}

.admin-shell .ppl-cell-main {
  font-weight: 600;
}

.admin-shell .ppl-cell-sub {
  margin-top: 2px;
  color: var(--tdo-color-muted);
  font-size: 12px;
}

.admin-shell .ppl-mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12.5px;
}

.admin-shell .ppl-num {
  text-align: right;
  white-space: nowrap;
}

.admin-shell .ppl-actions-col {
  width: 48px;
  text-align: right;
}

/* Row ⋯ button: 30×30, borderless (board .icon-btn). */
.admin-shell .ppl-list .ui-menu > .button--compact.button--ghost,
.admin-shell .ppl-card .ui-menu > .button--compact.button--ghost {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: #4a5160;
  font-weight: 700;
}

.admin-shell .ppl-list .ui-menu > .button--compact.button--ghost:hover,
.admin-shell .ppl-card .ui-menu > .button--compact.button--ghost:hover {
  background: var(--tdo-tone-neutral-bg);
}

/* Inline form inside a row menu (e.g. associate an orphan user). */
.admin-shell .ppl-menu-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 10px 8px;
  border-top: 1px solid #eef2f5;
  margin-top: 4px;
}

.admin-shell .ppl-menu-form label {
  color: var(--tdo-color-muted);
  font-size: 12px;
}

/* Footer: "1–25 of 137" + Previous / pages / Next. Also carries
   .admin-users-pagination on paginated lists (ui-table-sort.js reads it). */
.admin-shell .ppl-list__foot,
.admin-shell .ppl-list__foot.admin-users-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
}

.admin-shell .ppl-list__count {
  color: var(--tdo-color-muted);
  font-size: 13px;
}

.admin-shell .ppl-list__foot .admin-users-pagination__pages {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Customer detail (board CustomerDetail) ───────────────────────────── */

.admin-shell .ppl-customer-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 20px;
}

.admin-shell .ppl-customer-head__text {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.admin-shell .ppl-customer-head__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-shell .ppl-customer-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--tdo-color-muted);
  font-size: 13px;
}

.admin-shell .ppl-customer-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-shell .ppl-customer-head__actions form {
  display: inline;
  margin: 0;
}

.admin-shell .ppl-customer .ui-tabs {
  margin-bottom: 20px;
}

.admin-shell .ppl-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}

.admin-shell .ppl-kpi,
.admin-shell a.ppl-kpi:link,
.admin-shell a.ppl-kpi:visited {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--tdo-color-border);
  border-radius: 14px;
  background: #fff;
  color: var(--tdo-color-text);
  text-decoration: none;
}

.admin-shell a.ppl-kpi:hover {
  border-color: #ac9fff;
  color: var(--tdo-color-text);
  text-decoration: none;
}

.admin-shell .ppl-kpi.vis-staff {
  box-shadow: none;
  border-color: var(--tdo-vis-staff-border);
}

.admin-shell .ppl-kpi.vis-admin {
  box-shadow: none;
  border-color: var(--tdo-vis-admin-border);
}

.admin-shell .ppl-kpi__label,
.admin-shell .ppl-kpi__note {
  color: var(--tdo-color-muted);
  font-size: 12px;
}

.admin-shell .ppl-kpi__value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.admin-shell .ppl-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 20px;
  margin: 0 0 20px;
}

.admin-shell .ppl-card {
  min-width: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--tdo-color-border);
  border-radius: 16px;
}

.admin-shell .ppl-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-shell .ppl-card__head h3 {
  flex: 1;
  margin: 0;
  font: 700 16px var(--tdo-font-body);
}

.admin-shell .ppl-card .admin-users-table {
  margin-top: 8px;
}

.admin-shell .ppl-card .admin-users-table td {
  padding: 12px;
}

.admin-shell .ppl-dl {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  row-gap: 10px;
  column-gap: 16px;
  margin: 14px 0 0;
}

.admin-shell .ppl-dl dt {
  color: var(--tdo-color-muted);
}

.admin-shell .ppl-dl dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* Copy-to-clipboard buttons on the customer's Servers tab. */
.admin-shell .ppl-customer .copy-btn {
  margin-left: 4px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #9aa2ae;
  font-size: 0.9em;
  vertical-align: middle;
  cursor: pointer;
}

.admin-shell .ppl-customer .copy-btn:hover {
  color: var(--tdo-color-text);
}

.admin-shell .ppl-customer .copy-btn.copied {
  color: var(--tdo-tone-success-fg);
}

/* Access + Billing tabs: section blocks as cards with the board rhythm. */
.admin-shell .ppl-customer .admin-users-section {
  border-radius: 16px;
}

.admin-shell .ppl-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
}

.admin-shell .ppl-inline-form .field__control {
  max-width: 320px;
}

.admin-shell .ppl-user-picker {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 420px;
}

.admin-shell .ppl-user-picker__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  display: none;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--tdo-color-border);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 28px rgba(45, 49, 57, 0.12);
}

.admin-shell .ppl-user-picker__chip {
  display: none;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--tdo-tone-neutral-bg);
  font-size: 13px;
}

.admin-shell .ppl-user-picker__chip button {
  border: 0;
  background: none;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 1023px) {
  .admin-shell .ppl-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-shell .ppl-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .admin-shell .ppl-head__title {
    font-size: 26px;
  }

  .admin-shell .ppl-dl {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }

  .admin-shell .ppl-dl dd {
    margin-bottom: 8px;
  }
}