/* ui/pages/accounts_table.py: the accounts as a table past ten, one grid per
   row so a row is a card of its own on a phone. The details under a row are
   the shorter list's row (`.aucra-account-row` in pages_accounts.css). */
.aucra-acct-table {
  --acct-columns: minmax(0, 1fr) 96px 118px 84px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.aucra-acct-table-admin {
  --acct-columns: minmax(0, 1.3fr) 96px minmax(0, 1fr) 118px 84px;
}
.aucra-acct-row {
  display: grid;
  grid-template-columns: var(--acct-columns);
  align-items: center;
  gap: 8px 12px;
  padding: 10px 18px;
}
.aucra-acct-heads {
  padding-top: 8px;
  padding-bottom: 6px;
}
.aucra-acct-head {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.aucra-acct-item {
  border-top: 1px solid var(--line);
}
.aucra-acct-row > .aucra-btn {
  justify-self: end;
}
.aucra-acct-who,
.aucra-acct-company {
  min-width: 0;
  overflow-wrap: anywhere;
}
.aucra-acct-status {
  align-items: flex-start;
}
.aucra-acct-item .aucra-acct-details {
  border-top: 1px dashed var(--line);
  background: var(--wash-head);
}
.aucra-account-gone > .aucra-acct-row {
  opacity: 0.7;
}
@media (max-width: 760px) {
  .aucra-acct-heads {
    display: none;
  }
  .aucra-acct-table,
  .aucra-acct-table-admin {
    --acct-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .aucra-acct-row > .aucra-acct-who {
    grid-column: 1 / -1;
  }
  .aucra-acct-row > .aucra-btn {
    justify-self: start;
  }
  .aucra-acct-row > [data-head]::before {
    content: attr(data-head) " ";
    color: var(--muted);
  }
}