/* Small overrides on top of hack.css. Keep this file tiny — hack.css is
   doing the heavy lifting. Add app-specific tweaks here, not page styles. */

.container { max-width: 920px; margin: 2rem auto; padding: 0 1rem; }

.topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid #444; padding-bottom: 0.5rem; margin-bottom: 1.5rem;
}
.topbar .brand { font-weight: bold; text-decoration: none; }
.topbar nav { display: flex; align-items: baseline; gap: 1rem; }
.topbar .who { opacity: 0.7; }

.card { max-width: 460px; margin: 0 auto; }

form label { display: block; margin: 0.75rem 0; }
form label.inline { display: inline-flex; align-items: center; gap: 0.5rem; }
form input[type="email"],
form input[type="text"],
form input[type="password"] { width: 100%; }
form .inline { display: inline; }

.btn-link {
  background: none; border: 0; padding: 0; color: inherit;
  text-decoration: underline; cursor: pointer; font: inherit;
}

.error { color: #ff6b6b; }
.badge-warn {
  background: #ffd866; color: #222; padding: 0 0.4em; border-radius: 2px;
  font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em;
}
.badge-ok {
  background: #a5d76e; color: #222; padding: 0 0.4em; border-radius: 2px;
  font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em;
}
.danger { color: #ff6b6b; }
.notice {
  color: #a5d76e;
  border-left: 3px solid #a5d76e;
  padding: 0.25rem 0.75rem;
  background: rgba(165, 215, 110, 0.06);
}
.muted { opacity: 0.7; font-size: 0.9em; }

.one-time {
  border: 1px solid #ffd866;
  background: rgba(255, 216, 102, 0.06);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}
.one-time code.big { font-size: 1.1em; word-break: break-all; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid #333; }

.node {
  border: 1px solid #333; padding: 0.75rem 1rem; margin: 0.75rem 0;
}
.node header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.node header h3 { margin: 0; font-size: 1rem; }
.node .status { opacity: 0.8; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; margin: 0; }
.kv dt { opacity: 0.7; }
.kv dd { margin: 0; }
.ip-list { list-style: none; padding: 0; margin: 0; }
.ip-list li { padding: 0.1rem 0; }
.actions { margin-top: 0.5rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.actions form { margin: 0; }
.inline-form { display: inline-flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }

/* Vertical-stack utility for forms. Used in services / groups / policy /
   invites / security to get consistent gap-based spacing instead of
   relying on each label's margin. We zero out the label margin inside
   the stack so it doesn't double up with the gap. */
.stack { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; }
.stack > label { margin: 0; }
.stack > button { align-self: flex-start; }

/* Copy button next to a one-time secret. */
.copy-btn {
  margin-left: 0.5rem; padding: 0 0.5em;
  font-size: 0.85em; background: transparent;
  border: 1px solid #555; color: inherit; cursor: pointer;
}
.copy-btn:hover { border-color: #888; }
.copy-btn.copied { border-color: #a5d76e; color: #a5d76e; }

/* Dashboard summary cards. */
.summary-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 1rem 0 1.5rem;
}
.summary-card { border: 1px solid #333; padding: 0.75rem 1rem; }
.summary-card h3 { margin: 0 0 0.25rem; font-size: 0.85rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; }
.summary-card .big { font-size: 1.6rem; line-height: 1; }
.summary-card .sub { display: block; font-size: 0.85em; opacity: 0.7; margin-top: 0.25rem; }

/* Active-page indicator in the topbar. */
.topbar nav a[aria-current="page"] { font-weight: bold; }

/* Brand-the-apex secret-id block (for displaying ZT_NETWORK_ID, etc). */
.network-id {
  display: inline-block;
  font-size: 1.05em;
  padding: 0.15rem 0.5rem;
  border: 1px solid #555;
  border-radius: 2px;
}

/* Section dividers for the admin nav cluster. */
.topbar nav .nav-sep {
  border-left: 1px solid #444; height: 1em; align-self: center;
}

/* Mobile: stack the topbar, wrap the nav, collapse the kv to one column. */
@media (max-width: 700px) {
  .container { margin: 1rem auto; padding: 0 0.75rem; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .topbar nav { flex-wrap: wrap; gap: 0.35rem 0.9rem; }
  .topbar nav .nav-sep { display: none; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { opacity: 0.7; margin-top: 0.4rem; }
  .actions { flex-direction: column; align-items: stretch; }
  .summary-grid { grid-template-columns: 1fr; }
}