/* AuCRA INSIGHT, User settings (docs/plans/accounts-area.md AA4, AA16, E15,
   E16): the accounts card (ui/pages/account_user.py), its filters
   (account_user_filters.py), the table (account_user_table.py), the name
   cell (account_user_cells.py) and Add account's form
   (account_user_add.py), drawn in Your account's dialog band
   (pages_account_own.css). Laid out by the card's own width, never the
   window's: the assistant drawer narrows the column while the window stays
   wide (docs/handoff/rules.md). Every class takes the aucra-acct-user-
   prefix; the brand tokens only. */

.aucra-panel.aucra-acct-user-card {
  container: aucra-acct-user / inline-size;
  padding: 0;
  overflow: hidden;
}

/* ---- the filters ---- */
.aucra-acct-user-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 18px;
  min-width: 0;
}
.aucra-acct-user-search {
  flex: 1 1 14rem;
  min-width: 0;
}
.aucra-acct-user-more {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.aucra-acct-user-select {
  width: 150px;
}
.q-btn.aucra-acct-user-gone {
  align-self: center;
  white-space: nowrap;
}
/* Filters folds the selects at a phone's width only. */
.q-btn.aucra-acct-user-fold {
  display: none;
}

/* ---- the table ---- */
/* The Name track's floor holds a name and an email of about 26 characters
   on one line each. The administrator's seven tracks, their gaps and the
   row's inset add up to 782px, where a row turns into a card (below); a
   1024 window with the rail open gives the card about 660px. */
.aucra-acct-user-table {
  --acct-user-columns: minmax(180px, 2fr) 88px 88px 92px 104px 18px;
  font-size: 13px;
}
.aucra-acct-user-table-admin {
  --acct-user-columns: minmax(180px, 2fr) 96px minmax(96px, 1fr) 88px 92px 104px 18px;
}
.aucra-acct-user-row {
  display: grid;
  grid-template-columns: var(--acct-user-columns);
  align-items: center;
  gap: 6px 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--soft-line);
  min-width: 0;
}
.aucra-acct-user-heads {
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--wash-head);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
a.aucra-acct-user-item {
  color: var(--text);
  text-decoration: none;
}
a.aucra-acct-user-item:hover {
  background: var(--wash-head);
}
a.aucra-acct-user-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.aucra-acct-user-gone-row > .aucra-acct-user-who,
.aucra-acct-user-gone-row > .aucra-acct-user-facts > * {
  opacity: 0.7;
}
/* The facts box lends its cells to the row's grid at a desktop's width. */
.aucra-acct-user-facts {
  display: contents;
}
.aucra-acct-user-cell {
  min-width: 0;
  overflow-wrap: anywhere;
}
.aucra-acct-user-when {
  font-size: 12.5px;
  color: var(--muted);
}
.aucra-acct-user-chevron.q-icon {
  font-size: 18px;
  color: var(--muted);
  justify-self: end;
}
.aucra-acct-user-empty {
  padding: 14px 18px;
  border-top: 1px solid var(--soft-line);
}

/* ---- the name cell ---- */
.aucra-acct-user-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.aucra-acct-user-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.aucra-acct-user-email {
  display: flex;
  flex-wrap: wrap;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
  min-width: 0;
}
.aucra-acct-user-nowrap {
  white-space: nowrap;
}

/* ---- Add account's form and the dialogs' help lines ---- */
/* The grid's own 18px inset goes: the dialog body has one already, so the
   fields line up with the status line above them, as Set a new password's. */
.aucra-grid2.aucra-acct-user-add {
  align-items: start;
  padding: 0;
}
.aucra-acct-user-role-help,
.aucra-acct-user-help {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* ---- a phone's width: the filters fold ---- */
@container aucra-acct-user (max-width: 639px) {
  .q-btn.aucra-acct-user-fold {
    display: inline-flex;
  }
  .aucra-acct-user-more {
    display: none;
    flex: 1 1 100%;
  }
  .aucra-acct-user-filters-open .aucra-acct-user-more {
    display: flex;
  }
  .aucra-acct-user-select {
    flex: 1 1 100%;
    width: auto;
  }
}

/* ---- under the width the tracks need, a row is a card ---- */
@container aucra-acct-user (max-width: 781px) {
  .aucra-acct-user-heads {
    display: none;
  }
  /* A row is a card: the name with the chevron at its right, then the
     label and value pairs, which wrap into columns no narrower than their
     words (a pill never cut, a label never stacked a letter a line). */
  .aucra-acct-user-table,
  .aucra-acct-user-table-admin {
    --acct-user-columns: minmax(0, 1fr) 18px;
  }
  .aucra-acct-user-row > .aucra-acct-user-who {
    grid-column: 1;
    grid-row: 1;
  }
  .aucra-acct-user-row > .aucra-acct-user-chevron {
    grid-column: 2;
    grid-row: 1;
  }
  .aucra-acct-user-facts {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
    gap: 6px 16px;
    min-width: 0;
  }
  .aucra-acct-user-facts > .aucra-acct-user-cell {
    overflow-wrap: break-word;
  }
  .aucra-acct-user-facts > [data-head]::before {
    content: attr(data-head) " ";
    color: var(--muted);
    font-size: 12px;
    margin-right: 4px;
    white-space: nowrap;
  }
  .aucra-acct-user-facts > div[data-head] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 4px;
  }
}