/* For the admin: the "manage testers" row in the settings menu, the admin
   screen, and the banner while viewing another account. */

/* For the admin: the settings-menu row that opens the admin screen, set
   apart from the own settings by a line, and a whole button that leads
   somewhere (an icon and an arrow) rather than a setting. An orange dot,
   the same orange as the dot of the app icon, says someone waits for
   approval: beside the row's name, and on the gear while the menu is
   closed. */
.admin-entry {
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.admin-entry[hidden],
body[data-gate] .admin-entry {
  display: none;
}

.admin-entry button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--title-wash);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.18s ease;
}

.admin-entry button:hover {
  border-color: var(--brand);
}

.admin-entry button:focus-visible {
  outline: 3px solid var(--butter);
  outline-offset: 2px;
}

.admin-entry svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

/* The arrow points onward: left in Hebrew, right in a language written
   left to right. */
.admin-entry .admin-entry-arrow {
  margin-inline-start: auto;
}

html[dir="ltr"] .admin-entry-arrow {
  transform: scaleX(-1);
}

.waiting-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-start: 4px;
  border-radius: 50%;
  background: var(--signal);
  vertical-align: middle;
}

.waiting-dot[hidden] {
  display: none;
}

.gear-dot {
  position: absolute;
  top: 4px;
  inset-inline-start: 26px;
  margin: 0;
}

/* The admin screen stands in for the app while it is open: the accounts
   that wait, the testers and the blocked ones, one row each. With the tabs
   gone, the settings menu keeps its end of the bar. */
body[data-admin] .layout,
body[data-admin] .view-tabs {
  display: none;
}

body[data-admin] .topbar {
  justify-content: flex-end;
}

.admin {
  display: grid;
  gap: 22px;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  border: 1.5px solid var(--line);
  border-radius: 19px 14px 20px 15px;
  background: var(--surface);
}

.admin[hidden],
.admin [hidden] {
  display: none;
}

.admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
}

.admin-head h1 {
  margin: 0;
  font-size: 1.6rem;
}

.admin-close,
.admin-actions button {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.18s ease;
}

.admin-close:hover,
.admin-actions button:hover {
  border-color: var(--brand);
}

/* While OpenAI stops everyone: a small line under the heading, in the
   orange of a warning, with the page in OpenAI where it is fixed. */
.admin-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  padding: 8px 12px;
  border: 1.5px dashed var(--signal);
  border-radius: 12px 9px 13px 8px;
  background: var(--surface-soft);
  font-size: 0.9rem;
  font-weight: 650;
}

.admin-alert a {
  color: var(--brand-strong);
}

.admin-group {
  display: grid;
  gap: 10px;
}

.admin-group h2 {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 650;
}

.admin-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The name and address beside the buttons; on a narrow screen the buttons
   move under them. A long name or address is cut short. */
.admin-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 13px 10px 12px 9px;
  background: var(--surface-soft);
}

.admin-who {
  display: grid;
  flex: 1 1 220px;
  gap: 2px;
  min-width: 0;
}

.admin-who > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* A name or address in another script still lines up with the page. */
  text-align: left;
}

html[dir="rtl"] .admin-who > * {
  text-align: right;
}

.admin-who span {
  color: var(--muted);
  font-size: 0.85rem;
}

/* How much the account used: minutes of talk and practice today and in the
   last 30 days, and when it was last active beside them (under them when
   there is no room). A box of its own under the name and the buttons; on a
   narrow screen it comes before the buttons. */
.admin-usage {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  order: 1;
  gap: 6px 18px;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: 10px 8px 11px 7px;
  background: var(--surface);
  font-size: 0.85rem;
}

.admin-usage table {
  border-collapse: collapse;
}

.admin-usage th,
.admin-usage td {
  padding: 1px 0;
  padding-inline-end: 16px;
  text-align: start;
}

.admin-usage :is(th, td):last-child {
  padding-inline-end: 0;
}

.admin-usage th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

/* A label may take two lines on a narrow screen; the minutes never do. */
.admin-usage td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-usage p {
  margin: 0;
  color: var(--muted);
}

.admin-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

.admin-actions button[data-action="approve"] {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.admin-actions button[data-action="approve"]:hover {
  border-color: var(--brand-strong);
  background: var(--brand-strong);
}

.admin-actions button[data-action="block"]:hover {
  border-color: var(--signal);
  color: var(--signal);
}

.admin-actions button:disabled {
  opacity: 0.6;
  cursor: default;
}

.admin-failed {
  flex-basis: 100%;
  margin: 0;
  color: var(--signal);
  font-size: 0.85rem;
}

.admin-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 620px) {
  .admin {
    padding: 20px 16px;
  }

  .admin-actions {
    width: 100%;
  }

  .admin-actions button {
    flex: 1;
  }

  .admin-usage {
    order: 0;
    padding: 8px 10px;
  }

  .admin-usage table {
    width: 100%;
  }

  .admin-usage :is(th, td):not(:last-child) {
    padding-inline-end: 12px;
  }
}

/* The admin looking at another account: its feedback only, read only. A line
   on top says whose data this is and leads back; everything that would act
   for the other account is gone. */
.viewing-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  padding: 10px 14px;
  border: 1.5px dashed var(--line);
  border-radius: 14px 11px 15px 10px;
  background: var(--title-wash);
  font-weight: 650;
}

.viewing-banner[hidden] {
  display: none;
}

.viewing-banner button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
}

.viewing-banner button:hover {
  border-color: var(--brand);
}

.viewing-banner button:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

body[data-viewing] .view-tab[data-view="talk"],
body[data-viewing] .delete-button,
body[data-viewing] .practice-try,
body[data-viewing] .explain-more:not([data-ready]) {
  display: none;
}