/* Webhook delivery-log detail (the Request/Response tabbed expander on
   /webhooks/{whk}/deliveries). Webhook-specific chrome — kept out of the shared
   sheets but out of inline <style> too. */

/* Deliveries dashboard stat tiles (it-25.5) — the date window's outcome breakdown,
   independent of the status/code filter. The tile matching the active status filter
   is ringed so the relationship to the (filtered) table below is obvious. */
/* The whole filter panel: status tiles on top, a divider, then the refine row. */
.wh-filter { display: grid; gap: .85rem; margin-bottom: 1rem; }
.wh-filter__row {
  display: flex; gap: .75rem; align-items: end; flex-wrap: wrap;
  border-top: 1px solid var(--md-sys-color-outline-variant, #ddd); padding-top: .85rem;
}
.wh-stats { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.wh-stat {
  position: relative; flex: 1 1 0; min-width: 130px; padding: .7rem .9rem;
  border-radius: var(--r-md, 12px);
  background: var(--md-sys-color-surface-container-high, #ece6f0);
  border: 1px solid transparent; display: grid; gap: .1rem;
  /* Clickable: each tile is the status filter for its bucket. */
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: box-shadow .15s ease, transform .05s ease;
}
.wh-stat:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.wh-stat:active { transform: translateY(1px); }
.wh-stat__num { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.wh-stat__label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--md-sys-color-on-surface-variant, #555);
}
.wh-stat__icon { position: absolute; top: .6rem; right: .65rem; font-size: 20px; opacity: .5; }
.wh-stat--success { background: rgb(222 241 230); }
.wh-stat--success .wh-stat__num, .wh-stat--success .wh-stat__icon { color: rgb(47 125 79); }
.wh-stat--failed { background: var(--md-sys-color-error-container, #fdd); }
.wh-stat--failed .wh-stat__num, .wh-stat--failed .wh-stat__icon { color: var(--md-sys-color-on-error-container, #8c1d18); }
.wh-stat--nomatch { background: rgb(246 236 214); }
.wh-stat--nomatch .wh-stat__num, .wh-stat--nomatch .wh-stat__icon { color: rgb(154 101 22); }
.wh-stat--active { border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 1px var(--md-sys-color-primary); }

.wh-detail { padding: .5rem 0 .75rem; display: grid; gap: .5rem; }
.wh-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--md-sys-color-outline-variant, #ddd); }
.wh-tab {
  background: none; border: none; cursor: pointer; font: inherit; padding: .4rem .85rem;
  color: var(--md-sys-color-on-surface-variant, #555); border-bottom: 2px solid transparent;
  margin-bottom: -1px; border-radius: var(--r-sm, 8px) var(--r-sm, 8px) 0 0;
}
.wh-tab:hover { background: var(--md-sys-color-surface-variant, #f1edf5); }
.wh-tab--active { color: var(--md-sys-color-primary); border-bottom-color: var(--md-sys-color-primary); font-weight: 600; }
.wh-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .4rem 0 .3rem; font-size: .8rem; }
.wh-copy { padding: .1rem .35rem; min-width: 0; }
.wh-pre {
  white-space: pre-wrap; overflow-x: auto; margin: 0; padding: .65rem .75rem;
  background: var(--md-sys-color-surface-variant, #f4f1f7); border-radius: var(--r-sm, 8px);
  font-size: .78rem; line-height: 1.45;
}