/**
 * WireGuard VPN — CCM Tools (frikwork build)
 *
 * Every class here is `wg-` prefixed and every colour is a --fw-* token, so
 * both themes work and nothing can bleed into another tool. Layout only:
 * anything frikwork already ships (buttons, badges, tables, inputs, modals) is
 * used as-is rather than restyled.
 */

/* ---------------------------------------------------------------------------
 * Sign-in gate
 * ------------------------------------------------------------------------ */

.wg-gate {
  max-width: 34rem;
  margin: 0 auto;
}

.wg-gate__body {
  text-align: center;
  padding: var(--fw-space-md) 0 var(--fw-space-sm);
}

.wg-gate__mark {
  font-size: 2.75rem;
  color: var(--fw-brand-text);
  margin-bottom: var(--fw-space-md);
  display: block;
}

.wg-gate__lead {
  margin: 0 auto var(--fw-space-lg);
  max-width: 30rem;
  color: var(--fw-text-muted);
}

.wg-gate__note {
  margin: var(--fw-space-lg) auto 0;
  max-width: 30rem;
  color: var(--fw-text-muted);
}

/* ---------------------------------------------------------------------------
 * Header identity chip
 * ------------------------------------------------------------------------ */

.wg-whoami {
  display: inline-flex;
  align-items: center;
  gap: var(--fw-space-sm);
  padding: 0.25rem 0.6rem 0.25rem 0.25rem;
  border: 1px solid var(--fw-border);
  border-radius: 999px;
  background: var(--fw-bg-subtle);
}

.wg-whoami__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.wg-whoami__avatar--blank {
  display: grid;
  place-items: center;
  background: var(--fw-bg-hover);
  color: var(--fw-text-muted);
  font-size: 0.75rem;
}

.wg-whoami__name {
  font-size: 0.85rem;
  white-space: nowrap;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A form used purely to make a button a POST — it must not disturb the row. */
.wg-inline-form {
  display: inline;
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * Statistics strip
 * ------------------------------------------------------------------------ */

.wg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--fw-space-md);
  margin-bottom: var(--fw-space-lg);
}

.wg-stats--compact {
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Toolbar above the table
 * ------------------------------------------------------------------------ */

.wg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--fw-space-md);
  margin-bottom: var(--fw-space-lg);
}

.wg-toolbar .fw-field {
  margin: 0;
}

.wg-toolbar__filter {
  min-width: 9rem;
}

.wg-toolbar__search {
  flex: 1 1 16rem;
  min-width: 12rem;
}

.wg-toolbar__count {
  margin-left: auto;
  align-self: center;
}

/* ---------------------------------------------------------------------------
 * Peer table
 * ------------------------------------------------------------------------ */

.wg-table {
  width: 100%;
  font-size: 0.88rem;
}

.wg-table td {
  vertical-align: middle;
}

.wg-table__message {
  text-align: center;
  color: var(--fw-text-muted);
  padding: var(--fw-space-xl) var(--fw-space-md);
}

.wg-table__actions-head {
  text-align: right;
}

.wg-row__desc {
  display: block;
  color: var(--fw-text-muted);
  font-weight: 400;
}

.wg-key {
  font-size: 0.78rem;
  word-break: break-all;
}

.wg-unknown {
  color: var(--fw-text-muted);
}

/* Address a peer last connected from. Held from the last session, so it is
   history rather than live state — rendered quietly for that reason. */
.wg-endpoint {
  font-size: 0.78rem;
  white-space: nowrap;
}

.wg-endpoint__tag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.25rem;
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-sm, 3px);
  color: var(--fw-text-muted);
  cursor: help;
}

/* ---------------------------------------------------------------------------
 * Live rows
 *
 * There was an animated "ping" mark here beside the Online badge. It was
 * removed at Rik's request on 2026-08-11 after several attempts failed to
 * read as a radar return at this size, and one of them broke hover on the
 * row action buttons. The badge and the row accent already say the peer is
 * connected, so nothing was lost with it.
 * ------------------------------------------------------------------------ */

/* A quiet accent so a connected row reads as a group, not just a green dot. */
.wg-row--online td:first-child {
  box-shadow: inset 0.18rem 0 0 var(--fw-success);
}

/* Last synced too long ago for "online" to mean anything. */
.wg-stale {
  color: var(--fw-warning);
}

/* ---------------------------------------------------------------------------
 * Router drift
 *
 * Shown when the cached router state disagrees with this table — a peer the
 * router does not have, a key it never received, or an "inactive" peer still
 * enabled. The banner carries the repair action; the row flag says which ones.
 * ------------------------------------------------------------------------ */

.wg-drift {
  align-items: center;
  gap: var(--fw-space-md);
  margin-bottom: var(--fw-space-lg);
}

.wg-drift__body {
  flex: 1 1 auto;
  min-width: 0;
}

.wg-drift__hint {
  display: block;
  color: var(--fw-text-muted);
}

.wg-drift__flag {
  color: var(--fw-warning);
  font-size: 0.8rem;
  margin-left: 0.15rem;
  cursor: help;
}

.wg-row--drift td:first-child {
  box-shadow: inset 0.18rem 0 0 var(--fw-warning);
}

/* Drift outranks the online accent — a live peer the router disagrees about is
   the more urgent of the two facts. */
.wg-row--online.wg-row--drift td:first-child {
  box-shadow: inset 0.18rem 0 0 var(--fw-warning);
}

.wg-actions {
  display: flex;
  gap: 0.2rem;
  justify-content: flex-end;
}

.wg-actions__btn {
  width: 1.9rem;
  height: 1.9rem;
  font-size: 0.8rem;
}

.wg-actions__btn--danger:hover,
.wg-actions__btn--danger:focus-visible {
  color: var(--fw-danger);
}

/* ---------------------------------------------------------------------------
 * Forms inside modals and on the admin page
 * ------------------------------------------------------------------------ */

.wg-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0 var(--fw-space-md);
}

.wg-mono {
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.82rem;
}

.wg-help-block {
  display: block;
  color: var(--fw-text-muted);
  margin-top: var(--fw-space-sm);
}

.wg-button-stack {
  display: grid;
  gap: var(--fw-space-sm);
  margin-top: var(--fw-space-lg);
}

.wg-subhead {
  font-size: 0.9rem;
  margin: var(--fw-space-lg) 0 var(--fw-space-sm);
}

.wg-subhead i {
  color: var(--fw-brand-text);
}

/* ---------------------------------------------------------------------------
 * Configuration output
 * ------------------------------------------------------------------------ */

.wg-config {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--fw-space-lg);
  align-items: start;
}

@media (max-width: 46rem) {
  .wg-config {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wg-config__buttons {
  display: inline-flex;
  gap: var(--fw-space-sm);
  align-items: center;
}

.wg-config__pre {
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 22rem;
  overflow: auto;
  font-size: 0.8rem;
}

.wg-config__pre--tall {
  max-height: 30rem;
}

.wg-config__qr {
  display: grid;
  gap: var(--fw-space-sm);
  justify-items: center;
  text-align: center;
}

/* The QR needs a light backing in dark mode or the scanner sees nothing. */
.wg-config__qr img {
  background: #ffffff;
  padding: var(--fw-space-sm);
  border-radius: var(--fw-radius-md);
  display: block;
  max-width: 100%;
  height: auto;
}

.wg-kv-table {
  width: 100%;
  font-size: 0.84rem;
}

.wg-kv-table__label {
  width: 10rem;
  color: var(--fw-text-muted);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.wg-kv-table code {
  word-break: break-all;
}

/* ---------------------------------------------------------------------------
 * Admin page
 * ------------------------------------------------------------------------ */

.wg-admin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
  gap: var(--fw-space-lg);
  align-items: start;
}

.wg-admin__col {
  display: grid;
  gap: var(--fw-space-lg);
  align-content: start;
  min-width: 0;
}

/* The panel helper adds its own top margin between siblings; the grid gap
   already handles the spacing here. */
.wg-admin__col .app-panel + .app-panel {
  margin-top: 0;
}

.wg-admins {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.wg-admins__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fw-space-sm);
  padding: var(--fw-space-sm) 0;
  border-bottom: 1px solid var(--fw-border);
}

.wg-admins__row:last-child {
  border-bottom: none;
}

.wg-admins__who {
  display: flex;
  align-items: center;
  gap: var(--fw-space-sm);
  min-width: 0;
}

.wg-admins__who i {
  color: var(--fw-text-muted);
}

.wg-admins__email {
  display: block;
  word-break: break-all;
}

.wg-admins__seen {
  display: block;
  color: var(--fw-text-muted);
}

.wg-admins__flags {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.wg-audit {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 26rem;
  overflow-y: auto;
}

.wg-audit__row {
  display: flex;
  align-items: baseline;
  gap: var(--fw-space-sm);
  padding: var(--fw-space-sm) 0;
  border-bottom: 1px solid var(--fw-border);
}

.wg-audit__row:last-child {
  border-bottom: none;
}

.wg-audit__icon {
  color: var(--fw-text-muted);
  font-size: 0.8rem;
}

.wg-audit__icon--success { color: var(--fw-success); }
.wg-audit__icon--warning { color: var(--fw-warning); }
.wg-audit__icon--danger  { color: var(--fw-danger); }
.wg-audit__icon--info    { color: var(--fw-info); }

.wg-audit__what {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.85rem;
}

.wg-audit__entity {
  color: var(--fw-text-muted);
}

.wg-audit__who {
  display: block;
  color: var(--fw-text-muted);
  word-break: break-word;
}

.wg-audit__when {
  color: var(--fw-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}