/**
 * Linking Suggestions Panel — editorial typography
 * Matches Content Analysis / Headline Analyzer design system (ink/paper/copper).
 */

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

.prorank-linking-suggestions {
  --pr-linking-gap: 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #0B0F1A;
}

/* Header with refresh button */
.prorank-linking-suggestions__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 10px;
}

.prorank-linking-suggestions__description {
  margin: 0;
  color: #5B6475;
  font-size: 12px;
  line-height: 1.5;
  flex: 1;
}

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

.prorank-linking-suggestions__workflow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #E7EAF0;
}

.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: 24px 0;
  text-align: center;
  gap: 10px;
}

.prorank-linking-suggestions__loading p {
  margin: 0;
  color: #5B6475;
  font-size: 12px;
}

/* Message state (error or empty) */
.prorank-linking-suggestions__message {
  text-align: left;
  padding: 4px 0;
}

.prorank-linking-suggestions__message p {
  margin: 0 0 12px;
  color: #5B6475;
  font-size: 12px;
  line-height: 1.5;
}

/* Inbound opportunities preview — editorial */
.prorank-linking-suggestions__inbound-preview {
  margin-top: 14px;
  padding: 12px 14px;
  border: none;
  border-left: 2px solid #B64206;
  border-radius: 0;
  background: #FAF7F1;
  text-align: left;
}

.prorank-linking-suggestions__inbound-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #5B6475;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.prorank-linking-suggestions__inbound-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.prorank-linking-suggestions__inbound-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(11, 15, 26, 0.08);
}

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

.prorank-linking-suggestions__inbound-source {
  font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #0B0F1A;
  line-height: 1.3;
}

.prorank-linking-suggestions__inbound-anchor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  color: #5B6475;
  letter-spacing: 0.04em;
}

/* Suggestions list */
.prorank-linking-suggestions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #E7EAF0;
}

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

/* Suggestion card — flat, hairline divided */
.prorank-linking-suggestion-card {
  border: none;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid #E7EAF0;
  box-shadow: none;
  transition: background 0.15s ease;
}

.prorank-linking-suggestion-card:hover {
  background: #FAF7F1;
  border-color: #E7EAF0;
  box-shadow: none;
}

.prorank-linking-suggestion-card .components-card__body {
  padding: 14px 14px;
}

/* Suggestion content */
.prorank-linking-suggestion__content {
  margin-bottom: 10px;
}

.prorank-linking-suggestion__title {
  margin: 0 0 4px 0;
  font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: #0B0F1A;
  line-height: 1.3;
}

.prorank-linking-suggestion__url {
  margin: 0 0 10px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  color: #5B6475;
  word-break: break-all;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* Anchor + score badges — flat editorial */
.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: 2px;
  border: none;
  background: #FAF7F1;
  color: #B64206;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 8px;
}

.prorank-linking-suggestion__badge--source {
  background: rgba(11, 15, 26, 0.04);
  color: #5B6475;
  text-transform: uppercase;
  font-weight: 600;
}

.prorank-linking-suggestion__content .components-base-control__label {
  color: #5B6475 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  margin-bottom: 6px !important;
}

.prorank-linking-suggestion__content .components-text-control__input {
  border: 1px solid #E7EAF0;
  border-radius: 4px;
  min-height: 36px;
  background: #fff;
}

.prorank-linking-suggestion__content .components-text-control__input:focus {
  border-color: #B64206;
  box-shadow: none;
  outline: none;
}

/* Insert button — brand orange */
.prorank-linking-suggestion__insert {
  width: 100%;
  justify-content: center;
  min-height: 36px;
  border-radius: 4px;
  background: #FF6A00 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  border: none;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: background 0.15s ease;
}

.prorank-linking-suggestion__insert:hover:not(:disabled) {
  background: #E85E00 !important;
}

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

/* Stats footer */
.prorank-linking-suggestions__stats {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #E7EAF0;
}

.prorank-linking-suggestions__stat {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  color: #5B6475;
  text-align: left;
  letter-spacing: 0.04em;
}

/* Focus styles for accessibility */
.prorank-linking-suggestions__refresh:focus,
.prorank-linking-suggestions__workflow-button:focus,
.prorank-linking-suggestion__insert:focus {
  outline: 2px solid #B64206;
  outline-offset: 2px;
}

/* Keyboard navigation */
.prorank-linking-suggestions__item:focus-within {
  outline: 2px solid #B64206;
  outline-offset: -2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .prorank-linking-suggestion-card {
    border-bottom-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 — editorial */
.prorank-linking-suggestion__modal {
  max-width: 500px;
}

.prorank-linking-suggestion__modal .components-modal__header {
  background: #fff;
  border-bottom: 1px solid #E7EAF0;
}

.prorank-linking-suggestion__modal-description {
  margin-bottom: 16px;
}

.prorank-linking-suggestion__modal-description p {
  margin: 0;
  color: #5B6475;
  font-size: 13px;
  line-height: 1.5;
}

.prorank-linking-suggestion__anchor-input {
  margin-bottom: 22px;
}

.prorank-linking-suggestion__modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #E7EAF0;
}

.prorank-linking-suggestion__modal:focus {
  outline: none;
}

.prorank-linking-suggestion__modal .components-text-control__input:focus {
  outline: 2px solid #B64206;
  outline-offset: -2px;
}

/* Dark mode (kept defensive — should not trigger in WP admin sidebar) */
.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;
}