// ArraySubs -> Webhooks (Pro Webhooks module)
//
// Page shell, empty state, badges and the info cards. Endpoint rows, the
// modals and the delivery log table are in the partials imported below. The
// delivery log lives on Audits -> Webhooks (see _webhook-audit.scss) and
// reuses the Activity Audits filter, table and pagination classes.

.arraysubs-webhooks {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;

  &--loading {
    gap: 12px;
  }
}

.arraysubs-webhooks-load-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid #f1aeb5;
  border-left-width: 4px;
  border-radius: 4px;
  background: #fff;
  color: #991b1b;

  p {
    flex: 1;
    min-width: 200px;
    margin: 0;
  }
}

.arraysubs-webhooks-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;

  &__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;

    h2 {
      margin: 0;
      color: #1d2327;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.5;
    }
  }

  &__count {
    color: #646970;
    font-size: 13px;
  }

  &__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  &__note {
    margin: 0;
    color: #6e3b00;
    font-size: 13px;
  }

  // The audit filter box sits directly in this column gap.
  .arraysubs-audit-filters {
    margin-bottom: 0;
  }

  .arraysubs-audit-pagination {
    margin-top: 0;
  }
}

// Empty state
.arraysubs-webhooks-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  border: 1px dashed #c3c4c7;
  border-radius: 6px;
  background: #fff;
  text-align: center;

  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--wp-admin-theme-color) 10%, #fff);
    color: var(--wp-admin-theme-color);
  }

  h3 {
    margin: 0;
    color: #1d2327;
    font-size: 15px;
    font-weight: 600;
  }

  p {
    max-width: 560px;
    margin: 0;
    color: #646970;
    font-size: 13px;
    line-height: 1.6;
  }
}

@import "webhooks-endpoints";

// Status badges and the test tag
.arraysubs-webhooks-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;

  > svg {
    flex-shrink: 0;
  }

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

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

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

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

  &--info {
    background: color-mix(in srgb, var(--wp-admin-theme-color) 8%, #fff);
    color: var(--wp-admin-theme-color-darker-20);
  }
}

.arraysubs-webhooks-tag {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  color: #50575e;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.4;
  text-transform: uppercase;
}

// Retry and retention rules card
.arraysubs-webhooks-rules {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid #dcdcde;
  border-radius: 6px;
  background: #f6f7f7;
  color: #50575e;
  font-size: 13px;
  line-height: 1.6;

  > svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--wp-admin-theme-color);
  }

  p {
    margin: 0;

    + p {
      margin-top: 4px;
    }
  }

  a {
    color: var(--wp-admin-theme-color);

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

// Link card to the webhook audit page
.arraysubs-webhooks-audit-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--wp-admin-theme-color) 22%, #fff);
  border-radius: 6px;
  background: color-mix(in srgb, var(--wp-admin-theme-color) 6%, #fff);

  &__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--wp-admin-theme-color);
  }

  &__body {
    flex: 1;
    min-width: 0;

    h2 {
      margin: 0;
      color: #1d2327;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
    }

    p {
      margin: 2px 0 0;
      color: #50575e;
      font-size: 13px;
      line-height: 1.5;
    }
  }

  .button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .arraysubs-webhooks-audit-link {
    flex-wrap: wrap;

    .button {
      flex: 1 1 100%;
      justify-content: center;
    }
  }
}

@import "webhooks-modal";
@import "webhooks-log";
@import "webhooks-guide";