/* Webhooks view: per-endpoint "Send test event" with an inline result and
   an expandable "Recent deliveries" log. Rendered by whItemHTML(),
   testWebhook() and loadDeliveries() in app.js. Only tokens from app.css,
   so light and dark follow the :root[data-theme] swaps. */

.whx-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.whx-item {
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: var(--vercel-surface);
  box-shadow: inset 0 0 0 1px var(--vercel-border);
}

.whx-head { display: flex; align-items: center; gap: 12px 16px; }
.whx-head .webhook-meta { flex: 1 1 auto; min-width: 0; }
.whx-head .webhook-url { color: var(--vercel-text); }
.whx-head .webhook-events { align-items: center; }
.whx-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.whx-actions .btn-secondary { height: 32px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
/* A quiet Delete next to the test button; it still confirms first. */
.whx-actions .btn-danger {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--red);
  background: transparent;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--vercel-border-strong);
}
.whx-actions .btn-danger:hover {
  background: color-mix(in srgb, var(--red) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 35%, transparent);
}

.whx-status { margin-left: 4px; font-size: 12px; }
.whx-status-ok { color: var(--emerald); }
.whx-status-bad { color: var(--red); }
.whx-status-dim { color: var(--vercel-muted); }

/* Inline test result */
.whx-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--radius);
  background: var(--vercel-elevated);
  font-size: 13px;
  line-height: 1.45;
  color: var(--vercel-text);
}
.whx-result[hidden] { display: none; }
.whx-result-main { font-variant-numeric: tabular-nums; }
.whx-result-main strong { font-weight: 600; }
.whx-result-main code { font-family: var(--font-mono); font-size: 12px; background: none; padding: 0; }
.whx-result-detail { color: var(--vercel-muted); font-size: 12.5px; }
.whx-result-body {
  flex: 1 1 100%;
  margin: 2px 0 0;
  max-height: 5.6em;
  overflow: auto;
  padding: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--vercel-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

.whx-dot {
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--vercel-muted);
}
.whx-dot-ok { background: var(--emerald); }
.whx-dot-bad { background: var(--red); }
.whx-dot-busy { animation: whx-pulse 1s ease-in-out infinite alternate; }
@keyframes whx-pulse { from { opacity: .35; } to { opacity: 1; } }

/* Disclosure */
.whx-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 2px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--vercel-muted);
  cursor: pointer;
}
.whx-toggle:hover { color: var(--vercel-text); }
.whx-toggle:focus-visible { outline: none; box-shadow: var(--vercel-focus); border-radius: var(--radius-sm); }
.whx-chev {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 160ms ease;
}
.whx-toggle[aria-expanded="true"] .whx-chev { transform: rotate(45deg); }

.whx-log { margin-top: 8px; }
.whx-log[hidden] { display: none; }
.whx-log-note { padding: 8px 2px; font-size: 12.5px; color: var(--vercel-muted); }

/* Delivery table: a CSS grid so it can restack on phones. */
.whx-table {
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--vercel-border);
  overflow: hidden;
}
.whx-tr {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 108px 72px 60px;
  align-items: center;
  gap: 4px 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--vercel-border);
  font-size: 12.5px;
  color: var(--vercel-text);
  font-variant-numeric: tabular-nums;
}
.whx-tr:first-child { border-top: 0; }
.whx-th {
  padding-top: 7px;
  padding-bottom: 7px;
  background: var(--vercel-elevated);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--vercel-muted);
}
.whx-td-time { color: var(--vercel-muted); white-space: nowrap; }
.whx-td-ev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whx-td-ev code { font-family: var(--font-mono); font-size: 12px; background: none; padding: 0; color: var(--vercel-text); }
.whx-td-ms, .whx-td-try { color: var(--vercel-muted); }
.whx-td-why {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--vercel-muted);
}

.whx-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.whx-pill-ok {
  color: var(--emerald);
  background: color-mix(in srgb, var(--emerald) 13%, transparent);
}
.whx-pill-bad {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}

.whx-log-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--vercel-muted);
}
.whx-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--emerald);
  cursor: pointer;
}
.whx-link:hover { text-decoration: underline; }

.whx-empty {
  padding: 18px 16px;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--vercel-border);
  text-align: center;
  font-size: 13px;
  color: var(--vercel-muted);
}
.whx-empty p { margin: 0 0 10px; }
.whx-empty .btn-secondary { height: 32px; padding: 0 12px; font-size: 13px; }

/* The server does not have the endpoints yet: hide what would 404. */
.whx-unavailable .whx-test-btn,
.whx-unavailable .whx-toggle { display: none; }

@media (max-width: 640px) {
  .whx-head { flex-wrap: wrap; }
  .whx-actions { width: 100%; }
  .whx-actions .btn-secondary { flex: 1; }
  .whx-th { display: none; }
  .whx-tr {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "ev ev status"
      "time ms try";
    border-top: 1px solid var(--vercel-border);
  }
  .whx-th + .whx-tr { border-top: 0; }
  .whx-td-ev { grid-area: ev; }
  .whx-td-status { grid-area: status; justify-self: end; }
  .whx-td-time { grid-area: time; }
  .whx-td-ms { grid-area: ms; }
  .whx-td-try { grid-area: try; }
  .whx-td-try::before { content: "Attempt "; }
  .whx-td-why { grid-column: 1 / -1; }
  .whx-log-foot { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .whx-dot-busy { animation: none; }
  .whx-chev { transition: none; }
}