/**
 * Linking Suggestions Panel Styles
 *
 * Uses CSS Custom Properties from the Design System.
 */

/* Import design system variables */
@import url('../../../styles/design-system.css');

.prorank-linking-suggestions {
  --pr-linking-gap: var(--pr-spacing-medium, 16px);
}

/* Header with refresh button */
.prorank-linking-suggestions__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--pr-linking-gap);
  gap: var(--pr-spacing-small, 8px);
}

.prorank-linking-suggestions__description {
  margin: 0;
  color: var(--pr-text-secondary, #555);
  font-size: var(--pr-font-size-small, 13px);
  line-height: 1.5;
  flex: 1;
}

.prorank-linking-suggestions__refresh {
  flex-shrink: 0;
}

.prorank-linking-suggestions__workflow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pr-spacing-small, 8px);
  margin-bottom: var(--pr-spacing-medium, 16px);
}

.prorank-linking-suggestions__workflow-button {
  flex-shrink: 0;
}

/* Loading state */
.prorank-linking-suggestions__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--pr-spacing-large, 24px) 0;
  text-align: center;
  gap: var(--pr-spacing-small, 8px);
}

.prorank-linking-suggestions__loading p {
  margin: 0;
  color: var(--pr-text-secondary, #555);
  font-size: var(--pr-font-size-small, 13px);
}

/* Message state (error or empty) */
.prorank-linking-suggestions__message {
  text-align: center;
  padding: var(--pr-spacing-medium, 16px) 0;
}

.prorank-linking-suggestions__message p {
  margin: 0 0 var(--pr-spacing-medium, 16px);
  color: var(--pr-text-secondary, #555);
  font-size: var(--pr-font-size-small, 13px);
  line-height: 1.5;
}

.prorank-linking-suggestions__inbound-preview {
  margin-top: var(--pr-spacing-medium, 16px);
  padding: 12px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #f8fbff;
  text-align: left;
}

.prorank-linking-suggestions__inbound-title {
  display: block;
  margin-bottom: 10px;
  color: #1e3a8a;
  font-size: 12px;
}

.prorank-linking-suggestions__inbound-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.prorank-linking-suggestions__inbound-item {
  display: grid;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dbeafe;
}

.prorank-linking-suggestions__inbound-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.prorank-linking-suggestions__inbound-source {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
}

.prorank-linking-suggestions__inbound-anchor {
  font-size: 11px;
  color: #475569;
}

/* Suggestions list */
.prorank-linking-suggestions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pr-spacing-small, 8px);
}

.prorank-linking-suggestions__item {
  margin: 0;
}

/* Suggestion card */
.prorank-linking-suggestion-card {
  border: 1px solid #d7e2f0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 2px 8px rgb(15 23 42 / 4%);
  transition: all var(--pr-motion-duration-fast, 200ms)
    var(--pr-motion-easing-standard, ease-in-out);
}

.prorank-linking-suggestion-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 10px 20px rgb(37 99 235 / 12%);
  transform: translateY(-1px);
}

.prorank-linking-suggestion-card .components-card__body {
  padding: var(--pr-spacing-medium, 16px);
}

/* Suggestion content */
.prorank-linking-suggestion__content {
  margin-bottom: var(--pr-spacing-small, 8px);
}

.prorank-linking-suggestion__title {
  margin: 0 0 var(--pr-spacing-xsmall, 4px);
  font-size: var(--pr-font-size-base, 14px);
  font-weight: var(--pr-font-weight-semibold, 600);
  color: var(--pr-text-primary, #1e1e1e);
  line-height: 1.4;
}

.prorank-linking-suggestion__url {
  margin: 0 0 var(--pr-spacing-small, 8px);
  font-size: var(--pr-font-size-xsmall, 11px);
  color: var(--pr-text-tertiary, #757575);
  word-break: break-all;
  line-height: 1.3;
}

/* Anchor text display */
.prorank-linking-suggestion__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.prorank-linking-suggestion__badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 9px;
}

.prorank-linking-suggestion__badge--source {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  text-transform: capitalize;
}

.prorank-linking-suggestion__content .components-base-control__label {
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px !important;
}

.prorank-linking-suggestion__content .components-text-control__input {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  min-height: 38px;
}

.prorank-linking-suggestion__content .components-text-control__input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Insert button */
.prorank-linking-suggestion__insert {
  width: 100%;
  justify-content: center;
  min-height: 34px;
  border-radius: 9px;
  border: 1px solid #1d4ed8 !important;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.prorank-linking-suggestion__insert .components-button__text,
.prorank-linking-suggestion__insert span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.prorank-linking-suggestions__workflow .components-button.is-primary,
.prorank-linking-suggestions__workflow .components-button.is-primary .components-button__text,
.prorank-linking-suggestions__workflow .components-button.is-primary span,
.prorank-linking-suggestions__workflow .components-button.is-primary *,
.prorank-linking-suggestion__insert *,
.prorank-linking-suggestion__insert .components-button__text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.prorank-linking-suggestions__workflow .components-button.is-primary:disabled,
.prorank-linking-suggestions__workflow .components-button.is-primary[disabled],
.prorank-linking-suggestions__workflow .components-button.is-primary[aria-disabled='true'],
.prorank-linking-suggestion__insert:disabled,
.prorank-linking-suggestion__insert[disabled],
.prorank-linking-suggestion__insert[aria-disabled='true'],
.prorank-linking-suggestions__workflow .components-button.is-primary:disabled *,
.prorank-linking-suggestions__workflow .components-button.is-primary[disabled] *,
.prorank-linking-suggestions__workflow .components-button.is-primary[aria-disabled='true'] *,
.prorank-linking-suggestion__insert:disabled *,
.prorank-linking-suggestion__insert[disabled] *,
.prorank-linking-suggestion__insert[aria-disabled='true'] * {
  border-color: #1d4ed8 !important;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 0.64 !important;
}

/* Stats section */
.prorank-linking-suggestions__stats {
  margin-top: var(--pr-spacing-medium, 16px);
  padding-top: var(--pr-spacing-medium, 16px);
  border-top: 1px solid var(--pr-border-light, #e0e0e0);
}

.prorank-linking-suggestions__stat {
  margin: 0;
  font-size: var(--pr-font-size-xsmall, 11px);
  color: var(--pr-text-tertiary, #757575);
  text-align: center;
}

/* Focus styles for accessibility */
.prorank-linking-suggestions__refresh:focus,
.prorank-linking-suggestions__workflow-button:focus,
.prorank-linking-suggestion__insert:focus {
  outline: 2px solid var(--pr-color-primary, #2271b1);
  outline-offset: 2px;
}

/* Keyboard navigation */
.prorank-linking-suggestions__item:focus-within {
  outline: 2px solid var(--pr-color-primary, #2271b1);
  outline-offset: -2px;
  border-radius: var(--pr-border-radius-small, 4px);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .prorank-linking-suggestion-card {
    border-width: 2px;
  }

  .prorank-linking-suggestion__anchor-text {
    text-decoration: underline;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .prorank-linking-suggestion-card {
    transition: none;
  }
}


/* Modal Styles */
.prorank-linking-suggestion__modal {
  max-width: 500px;
}

.prorank-linking-suggestion__modal .components-modal__header {
  background: var(--pr-background-light, #f9f9f9);
  border-bottom: 1px solid var(--pr-border-light, #e0e0e0);
}

.prorank-linking-suggestion__modal-description {
  margin-bottom: var(--pr-spacing-medium, 16px);
}

.prorank-linking-suggestion__modal-description p {
  margin: 0;
  color: var(--pr-text-secondary, #555);
  font-size: var(--pr-font-size-small, 13px);
  line-height: 1.5;
}

.prorank-linking-suggestion__anchor-input {
  margin-bottom: var(--pr-spacing-large, 24px);
}

.prorank-linking-suggestion__modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--pr-spacing-small, 8px);
  margin-top: var(--pr-spacing-large, 24px);
  padding-top: var(--pr-spacing-medium, 16px);
  border-top: 1px solid var(--pr-border-light, #e0e0e0);
}

/* Focus management for modal */
.prorank-linking-suggestion__modal:focus {
  outline: none;
}

.prorank-linking-suggestion__modal .components-text-control__input:focus {
  outline: 2px solid var(--pr-color-primary, #2271b1);
  outline-offset: -2px;
}

/* Dark mode support for modal */
.interface-interface-skeleton__editor.is-dark-theme
  .prorank-linking-suggestion__modal
  .components-modal__content {
  background: #fff;
}

.interface-interface-skeleton__editor.is-dark-theme
  .prorank-linking-suggestion__modal
  .components-modal__header {
  background: #fafafa;
  border-bottom-color: #e0e0e0;
}

.interface-interface-skeleton__editor.is-dark-theme
  .prorank-linking-suggestion__modal-description
  p {
  color: #404040;
}

.interface-interface-skeleton__editor.is-dark-theme .prorank-linking-suggestion__modal-actions {
  border-top-color: #e0e0e0;
}
