/* Admin portal layout. Tokens and components come from theme.css. */

.admin {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(320px, 4fr);
  gap: var(--sp-8);
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-8) var(--sp-16);
}
.admin-main { display: grid; gap: var(--sp-6); align-content: start; min-width: 0; }
.admin-side { display: grid; gap: var(--sp-6); align-content: start; min-width: 0; }

.page-head { display: grid; gap: var(--sp-2); max-width: 64ch; }
.page-head h1 { font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); letter-spacing: -0.02em; line-height: 1.05; }
.lede { color: var(--muted); font-size: var(--fs-base); line-height: 1.55; }

/* Totals: big tabular numbers separated by rules, the way a status board reads */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--sp-2) 0 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
}
.figures > div { padding: var(--sp-3) var(--sp-4) var(--sp-4) 0; }
.figures > div + div { padding-left: var(--sp-4); border-left: 1px solid var(--border); }
.figures dd { margin: var(--sp-1) 0 0; font-size: var(--fs-xl); line-height: 1.1; font-weight: 500; }
.figures dd.accent { color: var(--accent); }

.tenant-name { font-weight: 600; }

.stack { display: grid; gap: var(--sp-4); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.inline-form { display: flex; align-items: flex-end; gap: var(--sp-2); }
.inline-form .grow { flex: 1; min-width: 0; }
.sub { font-size: var(--fs-2xs); color: var(--muted); overflow-wrap: anywhere; }
.admin-side h3 { font-size: var(--fs-base); }

.key-reveal {
  display: grid;
  gap: var(--sp-2);
  margin: 0 var(--sp-4) var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--ok);
  border-left-width: 3px;
  background: var(--ok-soft);
}
.key-value {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
  user-select: all;
}
.hint { font-size: var(--fs-xs); color: var(--muted); }

.table.compact td, .table.compact th { padding: var(--sp-1) var(--sp-2); }
.table.compact td { height: 36px; }
.table tr.revoked td { color: var(--muted); }
.table tr.revoked code { text-decoration: line-through; }

.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.danger-zone p { font-size: var(--fs-xs); margin-top: var(--sp-1); max-width: 40ch; }

@media (max-width: 1100px) {
  .admin { grid-template-columns: minmax(0, 1fr); padding: var(--sp-8) var(--sp-6) var(--sp-12); }
}
@media (max-width: 640px) {
  .admin { padding: var(--sp-6) var(--sp-4) var(--sp-12); gap: var(--sp-6); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures > div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
  .figures > div:nth-child(4) { border-top: 1px solid var(--border); }
  .pair { grid-template-columns: 1fr; }
  .danger-zone { flex-direction: column; align-items: flex-start; }
  .inline-form { flex-wrap: wrap; }
}

/* Let tables scroll inside their panel instead of widening the page */
.admin-main > *, .admin-side > * { min-width: 0; }
.key-state { white-space: nowrap; }