/* ─────────────────────────────────────────────────────────────
   failed-publishes.css — theme enabled
   Requires theme-core.css to be loaded BEFORE this file.
   Includes .fp-pagination-* and .fp-empty-* classes, extracted
   from inline PHP-generated styles in the failed-publishes ajax.
   ───────────────────────────────────────────────────────────── */

.fp-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--danger-pale-bg, #f0d5d5);
  border-radius: var(--radius-md, 12px);
  padding: 14px 18px;
  margin-bottom: 10px;
}

.fp-card img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border-color, #eee);
  flex-shrink: 0;
}

.fp-info {
  flex: 1;
  min-width: 0;
}

.fp-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #1a1a2e);
  margin-bottom: 3px;
}

.fp-error {
  font-size: 12.5px;
  color: var(--danger-2, #c0392b);
  margin-bottom: 4px;
}

.fp-meta {
  font-size: 11.5px;
  color: var(--text-muted, #999);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fp-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.fp-badge-retryable {
  background: var(--gold-pale-bg, #fff3cd);
  color: var(--gold-text-dark, #8a6d00);
}

.fp-badge-permanent {
  background: var(--danger-pale-bg, #fde2e1);
  color: var(--danger-2, #c0392b);
}

.fp-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.fp-btn {
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.fp-btn-retry {
  background: var(--accent, #5b3af7);
  color: var(--bg-surface, #fff);
}

.fp-btn-retry:disabled {
  background: var(--accent-pale-bg, #d8d2f7);
  cursor: not-allowed;
}

.fp-btn-dismiss {
  background: var(--bg-subtle, #f4f4f6);
  color: var(--text-secondary-strong, #555);
}

/* ── New: extracted from inline PHP styles ─────────────────── */

.fp-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-color, #e6e6f0);
  border-radius: 12px;
  padding: 12px 20px;
  margin-top: 10px;
}

.fp-pagination-info {
  font-size: 12.5px;
  color: var(--text-secondary, #7b7b96);
}

.fp-page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid var(--border-color, #e6e6f0);
  border-radius: 8px;
  background: var(--bg-surface, #fff);
  color: var(--text-secondary-strong, #555);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.fp-page-btn.active {
  border-color: var(--accent, #4f35e8);
  background: var(--accent, #4f35e8);
  color: var(--bg-surface, #fff);
}

.fp-empty {
  text-align: center;
  padding: 72px 24px;
  background: var(--bg-surface, #fff);
  border: 2px dashed var(--border-color, #e0e0ee);
  border-radius: var(--radius-xl, 20px);
}

.fp-empty-icon {
  width: 72px;
  height: 72px;
  background: var(--success-pale-bg, #e8f9ee);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 28px;
  color: var(--success-alt, #1ba94c);
}

.fp-empty-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary, #1a1a2e);
  margin-bottom: 8px;
}

.fp-empty-text {
  color: var(--text-secondary, #888);
  font-size: 13.5px;
}