// Audits -> Webhooks breakdowns: endpoint and event tables, success-rate
// meters, response codes and top errors. Page layout lives in
// _webhook-audit.scss.

.arraysubs-webhook-audit {
  // Breakdown tables
  &__table {
    th,
    td {
      vertical-align: middle;
    }

    .is-number {
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
  }

  // Fits beside the expanded admin menu from a 1024px wide window: tighter
  // cells, two-line headers and dates. Narrower screens scroll the wrapper.
  &__table--endpoints {
    &.widefat th,
    &.widefat td {
      padding: 8px;
    }

    th.is-number {
      white-space: normal;
    }
  }

  &__endpoint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;

    strong {
      overflow-wrap: anywhere;
    }
  }

  &__endpoint-link {
    color: var(--wp-admin-theme-color);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;

    &:hover,
    &:focus {
      color: var(--wp-admin-theme-color-darker-10);
      text-decoration: underline;
    }
  }

  &__failed {
    color: #b32d2e;
    font-weight: 600;
  }

  // Wide enough to keep the date on one line when the time wraps under it.
  &__time {
    min-width: 92px;
  }

  &__rate {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 72px;
  }

  &__rate-value {
    color: #1d2327;
    font-variant-numeric: tabular-nums;
  }

  &__meter {
    display: block;
    width: 100%;
    max-width: 120px;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: #f0f0f1;

    > span {
      display: block;
      height: 100%;
      border-radius: 2px;
      background: var(--wp-admin-theme-color);
    }

    &--wide {
      max-width: none;
    }
  }

  // Response codes
  &__codes,
  &__errors {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &__codes {
    gap: 10px;

    > li {
      display: grid;
      grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      margin: 0;
    }
  }

  &__code {
    justify-self: start;
    padding: 2px 8px;
    border-radius: 12px;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;

    &--success {
      background: #edf8ee;
      color: #1e4620;
    }

    &--warning {
      background: #fef8ee;
      color: #6e3b00;
    }

    &--error {
      background: #fde8e8;
      color: #991b1b;
    }

    &--neutral {
      background: #f0f0f1;
      color: #50575e;
      font-family: inherit;
    }
  }

  &__codes-count {
    color: #1d2327;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  // Top errors
  &__errors > li {
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid #f0f0f1;

    &:first-child {
      padding-top: 0;
      border-top: 0;
    }
  }

  &__error-text {
    margin: 0;
    color: #8a2424;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  &__error-meta {
    margin: 2px 0 0;
    color: #646970;
    font-size: 12px;
  }
}

@media (max-width: 782px) {
  // Scroll the wide endpoint table inside its wrapper.
  .arraysubs-webhook-audit__table--endpoints {
    min-width: 720px;
  }
}

@media (max-width: 480px) {
  .arraysubs-webhook-audit__codes > li {
    grid-template-columns: minmax(80px, auto) minmax(0, 1fr) auto;
    gap: 8px;
  }
}