/* Lane-2 additive admin styles. ONLY .admin-* and .whoami-* selectors — no
 * override of any existing arena selector. Reuses the arena palette tokens
 * (:root in arena.css) so the panel reads as one product with the arena.
 * Loaded AFTER arena.css; admitted by style-src 'self'. */

/* whoami chip in the masthead-right cluster */
.whoami-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--bg-raise);
  font: 12px/1.2 var(--font);
}
.whoami-name { color: var(--ink); font-weight: 600; }
.whoami-role {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}

/* the all-generations filter panel, injected above #columns */
.admin-panel {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.admin-panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.admin-panel-title { font-weight: 700; color: var(--ink); font-size: 14px; }
.admin-count { color: var(--ink-dim); font-size: 12px; }

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.admin-field { display: flex; flex-direction: column; gap: 3px; }
.admin-field-label {
  color: var(--ink-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-input, .admin-select {
  min-width: 120px;
  padding: 5px 8px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--bg-raise-2);
  color: var(--ink);
  font: 12px var(--font);
}
.admin-input-date { min-width: 130px; }
.admin-input:focus, .admin-select:focus {
  outline: none;
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.admin-apply, .admin-reset {
  padding: 6px 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--bg-raise);
  color: var(--ink);
  font: 12px var(--font);
  cursor: pointer;
}
.admin-apply { border-color: var(--accent-deep); color: var(--accent); }
.admin-apply:hover { background: var(--bg-raise-2); }
.admin-reset:hover { background: var(--bg-raise-2); }

.admin-status { margin: 8px 0; color: var(--ink-dim); font-size: 12px; min-height: 14px; }

.admin-rows { display: flex; flex-direction: column; gap: 6px; }
.admin-empty { color: var(--ink-dim); font-size: 12px; padding: 8px 0; }

.admin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--panel-border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-raise);
  font: 12px var(--font);
}
.admin-cell { color: var(--ink-soft); }
.admin-user { color: var(--ink); font-weight: 600; min-width: 90px; }
.admin-arm { color: var(--accent); }
.admin-letter {
  font-family: var(--mono);
  color: var(--ink-dim);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 0 5px;
}
.admin-statuscell { color: var(--ink-soft); }
.admin-cost { font-family: var(--mono); color: var(--ink-soft); }
.admin-prompt {
  color: var(--ink-dim);
  flex: 1 1 220px;
  min-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-created { color: var(--ink-faint); font-size: 11px; font-family: var(--mono); }

.admin-badge {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--grey-chip);
  color: var(--ink-soft);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.admin-pub {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.admin-pub.is-pub { background: var(--good-dim); color: var(--good); }
.admin-pub.not-pub { background: var(--bg-raise-2); color: var(--ink-dim); }

.admin-artifact {
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
}
.admin-artifact:hover { background: var(--bg-raise-2); }

/* ---------- D-4 Users panel + D-2 Invites panel ---------- */
.admin-users-panel, .admin-invites-panel { margin-top: 14px; }
.admin-user-row, .admin-invite-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.admin-metric { color: var(--ink-soft); font-size: 13px; }
.admin-role { color: var(--ink-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.admin-spend { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.admin-spend-bar {
  display: inline-block; width: 90px; height: 6px;
  background: var(--bg-raise-2); border-radius: 999px; overflow: hidden;
}
.admin-spend-fill {
  display: block; height: 100%; background: var(--accent);
  border-radius: 999px;
}
.admin-spend-fill.full { background: var(--bad, #e06565); }
.admin-lastseen { color: var(--ink-dim); font-size: 12px; }
.admin-linkbtn {
  background: transparent; color: var(--accent);
  border: 1px solid var(--panel-border); border-radius: var(--radius-sm);
  padding: 3px 9px; font: inherit; font-size: 12px; cursor: pointer;
}
.admin-linkbtn:hover { background: var(--bg-raise-2); }
.admin-invite-name { font-weight: 600; }
.admin-invite-email { color: var(--ink-soft); font-size: 13px; }
.admin-invite-org { color: var(--ink-dim); font-size: 12px; }
.admin-invite-usecase {
  flex-basis: 100%; color: var(--ink-soft); font-size: 13px;
  line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  border-left: 2px solid var(--panel-border); padding-left: 10px; margin: 2px 0;
}
.admin-invite-status { min-width: 110px; }

@media (max-width: 720px) {
  .admin-filters { gap: 8px; }
  .admin-input, .admin-select { min-width: 100px; }
}