/* pages/seo-history.css — SEO Articles History (FE-2: Synced with seo-gen SaaS design) */

/* ═══ TOOLBAR ═══════════════════════════════════════════════ */
.sh-toolbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.sh-search-wrap {
  position: relative; width: 240px;
}
.sh-search-wrap svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-disabled); pointer-events: none;
}
.sh-search-wrap input {
  width: 100%; padding: 8px 10px 8px 32px; font-size: 13px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-base); color: var(--text-primary); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sh-search-wrap input:focus {
  border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
}
.sh-count {
  margin-left: auto; font-size: 12px; color: var(--text-disabled); font-weight: 500;
  white-space: nowrap;
}

/* ═══ ARTICLE LIST ══════════════════════════════════════════ */
.sh-list { display: flex; flex-direction: column; gap: 10px; }

/* ─── Article Card ──────────────────────────────────────── */
.sh-card {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  cursor: pointer; transition: all 0.18s ease;
}
.sh-card:hover {
  box-shadow: var(--shadow-md); transform: translateY(-1px);
  border-color: rgba(37,99,235,0.25);
}
.sh-card-body { flex: 1; min-width: 0; }
.sh-card-title {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-card-meta {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.sh-card-meta-item {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-tertiary); white-space: nowrap;
}
.sh-card-meta-item svg { width: 12px; height: 12px; flex-shrink: 0; }

.sh-card-keyword {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  background: rgba(37,99,235,0.06); border-radius: var(--radius-sm);
  font-size: 11px; color: #2563EB; font-weight: 500;
}
.sh-card-keyword svg { width: 11px; height: 11px; }

/* ─── Score Circle ──────────────────────────────────────── */
.sh-card-right {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.sh-score-ring {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}
.sh-score-ring.sc-green  { background: linear-gradient(135deg, #22c55e, #16a34a); }
.sh-score-ring.sc-amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.sh-score-ring.sc-red    { background: linear-gradient(135deg, #ef4444, #dc2626); }

.sh-chevron { width: 16px; height: 16px; color: var(--text-disabled); flex-shrink: 0; }

/* ═══ EMPTY STATE ═══════════════════════════════════════════ */
.sh-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 30px; gap: 14px;
}
.sh-empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
}
.sh-empty-icon svg { width: 26px; height: 26px; color: var(--text-disabled); }
.sh-empty-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.sh-empty-desc { font-size: 12px; color: var(--text-disabled); line-height: 1.5; }
.sh-empty-desc a { color: #2563EB; text-decoration: none; font-weight: 500; }
.sh-empty-desc a:hover { text-decoration: underline; }

/* ═══ DETAIL VIEW ═══════════════════════════════════════════ */
.sh-detail { padding: 0 0 40px; }
.sh-detail-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 20px;
}
.sh-detail-title {
  margin: 0; font-size: 18px; font-weight: 700; color: var(--text-primary);
  flex: 1; min-width: 0;
}

/* ─── WP Publish Dialog ─────────────────────────────────── */
.sh-wp-dialog {
  display: none; margin-top: 16px; padding: 20px;
  border: 1.5px solid #2563EB; border-radius: var(--radius-lg);
  background: var(--surface-card); box-shadow: var(--shadow-sm);
}
.sh-wp-dialog-title {
  font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 14px;
}
.sh-wp-radio-group {
  display: flex; gap: 16px; align-items: center;
}
.sh-wp-radio-label {
  display: flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer;
  color: var(--text-secondary);
}
.sh-wp-radio-label svg { width: 14px; height: 14px; }
.sh-wp-actions {
  display: flex; gap: 8px; align-items: center; margin-top: 14px;
}
.sh-wp-submit-count { font-size: 11px; margin-left: 2px; opacity: 0.8; }

/* ─── Multi-site list (MW-2) ───────────────────────────── */
.sh-wp-sites-list {
  display: flex; flex-direction: column; gap: 8px; margin-top: 6px;
}
.sh-wp-site-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); transition: border-color 0.15s, background 0.15s;
}
.sh-wp-site-row:has(.sh-wp-site-cb:checked) {
  border-color: #2563EB; background: rgba(37,99,235,0.04);
}
.sh-wp-site-check {
  display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; min-width: 0;
}
.sh-wp-site-name {
  font-weight: 600; font-size: 13px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-wp-site-url {
  font-size: 11px; color: var(--text-tertiary); font-family: var(--font-mono, monospace);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-wp-site-cat { min-width: 180px; max-width: 220px; font-size: 12px; }

/* ─── Publish results (MW-2) ───────────────────────────── */
.sh-wp-results {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-subtle);
}
.sh-wp-results-title {
  font-weight: 600; font-size: 13px; color: var(--text-primary); margin-bottom: 10px;
}
.sh-wp-result-item {
  display: flex; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-md); margin-bottom: 6px;
  border: 1px solid var(--border-subtle);
}
.sh-wp-result-ok   { background: rgba(22,163,74,0.04); border-color: rgba(22,163,74,0.2); }
.sh-wp-result-fail { background: rgba(220,38,38,0.04); border-color: rgba(220,38,38,0.2); }
.sh-wp-result-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.sh-wp-result-ok .sh-wp-result-icon   { color: #16a34a; }
.sh-wp-result-fail .sh-wp-result-icon { color: #dc2626; }
.sh-wp-result-icon svg { width: 100%; height: 100%; }
.sh-wp-result-body { flex: 1; min-width: 0; }
.sh-wp-result-name { font-weight: 600; font-size: 13px; }
.sh-wp-result-link { color: #2563EB; font-size: 12px; text-decoration: none; }
.sh-wp-result-link:hover { text-decoration: underline; }
.sh-wp-result-meta { font-size: 11px; color: var(--text-tertiary); margin-left: 8px; }
.sh-wp-result-error { font-size: 12px; color: #dc2626; margin-top: 2px; }

.sh-wp-loading { font-size: 12px; color: var(--text-tertiary); padding: 8px 0; }
.sh-wp-error {
  font-size: 12px; color: #dc2626; padding: 8px 12px;
  background: rgba(220,38,38,0.06); border-radius: var(--radius-md);
}

/* ─── Detail Actions ────────────────────────────────────── */
.sh-detail-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px;
}
.sh-detail-actions .form-select { width: auto; font-size: 12px; }

/* ─── Status select with icons ──────────────────────────── */
.sh-status-select { width: auto; font-size: 12px; }