/* Back-office styles, expressed entirely on tokens.css.
 *
 * Deliberately not a copy of doc-vault-web's shared.css: that file is built
 * around a customer's three service cards and one account, and almost none of
 * it applies to a dense list of every customer. Only the header, the pills and
 * the danger colours are shared vocabulary, and those are cheap to restate. */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 10;
}
header .brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
header img { height: 26px; width: auto; display: block; }
header .env {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue-deep);
  background: var(--blue-tint);
  border-radius: var(--radius-pill);
  padding: 2px var(--sp-2);
  white-space: nowrap;
}
header .who { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-soft); }

main { max-width: var(--measure); margin: 0 auto; padding: var(--section-y) var(--gutter); }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.page-head h1 { font-size: var(--fs-2xl); margin: 0; }
.page-head .count { font-size: var(--fs-sm); color: var(--slate); }

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-xs);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { background: var(--blue); border-color: var(--blue); color: var(--white); }
button.primary:hover:not(:disabled) { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--white); }

/* ---------- Customer table ---------- */
/* Wide content scrolls inside its own container - the page body must never
   scroll sideways. */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); white-space: nowrap; }
th {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--slate);
  font-weight: 600;
  background: var(--paper);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr.selectable { cursor: pointer; }
tbody tr.selectable:hover { background: var(--paper); }
td.tenant { font-family: var(--font-mono); color: var(--ink); }
td.num { font-variant-numeric: tabular-nums; }

.pill {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 2px var(--sp-2);
  background: var(--paper-2);
  color: var(--slate);
  white-space: nowrap;
}
.pill.on { background: var(--ok-bg); color: var(--ok); }
.pill.pending { background: var(--warn-bg); color: var(--warn-fg); }
.pill.bad { background: var(--danger-bg); color: var(--danger); }

/* Seats at or over the cap read as a fact, not an error - a downgrade can
   leave a tenant legitimately over its new limit. */
.seats.full { color: var(--warn-fg); font-weight: 600; }

/* ---------- Detail ---------- */
.detail { margin-top: var(--sp-8); }
.detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.detail-head h2 { font-size: var(--fs-xl); margin: 0; font-family: var(--font-mono); }
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
}
.panel h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  margin: 0 0 var(--sp-4);
}
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-4); }
.fact .k { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--slate); }
.fact .v { display: block; font-size: var(--fs-base); color: var(--ink); overflow-wrap: anywhere; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.form-grid label { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--slate); margin-bottom: var(--sp-1); }
.form-grid input, .form-grid textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  /* 16px minimum, or iOS zooms the whole page on focus. */
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-xs);
}
.form-grid .wide { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.form-actions .saved { font-size: var(--fs-sm); color: var(--ok); }

/* ---------- History ---------- */
.events { list-style: none; margin: 0; padding: 0; }
.events li { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.events li:last-child { border-bottom: none; }
.events time { color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.events .type { font-family: var(--font-mono); color: var(--ink); }
.events .payload { color: var(--slate); overflow-wrap: anywhere; }

.empty { color: var(--slate); font-size: var(--fs-sm); }
.error {
  display: none;
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius-xs);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.note {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-xs);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

/* ---------- Sign-in landing ---------- */
.signin { max-width: 420px; margin: 0 auto; text-align: center; padding: var(--sp-20) var(--gutter); }
.signin img { height: 32px; margin-bottom: var(--sp-6); }
.signin p { color: var(--ink-soft); margin-bottom: var(--sp-6); }

@media (max-width: 560px) {
  header { flex-wrap: wrap; }
  .facts { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}