/* Instagram Intelligence — Phase 4 (التحليلات). تعتمد على style.css/
   dashboard.css/instagram-settings.css/instagram-competitors.css المُحمَّلة
   مسبقاً — فقط الجديد فعلياً هنا: التبويبات الداخلية، بطاقات المقارنة،
   شارات الدرجات/الثقة، وبطاقات الفرص. */

.ig-hint {
  color: var(--text-2, #666);
  font-size: 12.5px;
  margin: 4px 2px 0;
}

.ig-inner-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border, #e5e5e5);
  padding-bottom: 2px;
}
.ig-inner-tab {
  border: none;
  background: transparent;
  color: var(--text-2, #666);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px 999px 0 0;
  cursor: pointer;
}
.ig-inner-tab.active {
  background: var(--panel-2, #f0f0f0);
  color: var(--accent, #2f6f4e);
}
.ig-inner-tab:hover:not(.active) { color: var(--text, #1a1a1a); }

.ig-pane { display: flex; flex-direction: column; gap: 16px; }

/* ── مقارنة ───────────────────────────────────────────────────────── */
#ig-cmp-competitors { min-width: 220px; height: 34px; }

.ig-cmp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.ig-cmp-card {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  padding: 14px 16px;
}
.ig-cmp-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 10px;
}
.ig-cmp-source-dot { font-size: 10px; }
.ig-cmp-card-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-2, #666);
  padding: 3px 0;
}
.ig-cmp-card-row b { color: var(--text, #1a1a1a); font-weight: 600; }
.ig-cmp-na { color: var(--text-2, #999); font-style: italic; }

/* ── تحليل المحتوى / التعليقات: شارات الدرجات ─────────────────────── */
.ig-score-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-2, #eee);
  color: var(--text-2, #555);
  margin-inline-end: 4px;
  white-space: nowrap;
}
.ig-score-chip.high { background: #d7f4e3; color: #157347; }
.ig-score-chip.medium { background: #fdeecb; color: #9a6400; }
.ig-score-chip.low { background: var(--border, #e5e5e5); color: var(--text-2, #666); }
:root[data-theme="dark"] .ig-score-chip.high { background: #113826; color: #6fe3a3; }
:root[data-theme="dark"] .ig-score-chip.medium { background: #3a2c0f; color: #e9bd63; }

.ig-sentiment-pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.ig-sentiment-pill.positive { background: #d7f4e3; color: #157347; }
.ig-sentiment-pill.negative { background: #fbdada; color: #a02020; }
.ig-sentiment-pill.neutral { background: var(--border, #e5e5e5); color: var(--text-2, #666); }
.ig-sentiment-pill.unknown { background: var(--panel-2, #eee); color: var(--text-2, #999); }
:root[data-theme="dark"] .ig-sentiment-pill.positive { background: #113826; color: #6fe3a3; }
:root[data-theme="dark"] .ig-sentiment-pill.negative { background: #3a1414; color: #f0a3a3; }

.ig-comment-text-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 13px; }
.ig-comp-row-actions-btn {
  border: 1px solid var(--border, #e5e5e5);
  background: var(--panel, #fff);
  color: var(--text-2, #555);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.ig-comp-row-actions-btn:hover { background: var(--panel-2, #f5f5f5); }
.ig-comp-row-actions-btn:disabled { opacity: .6; cursor: default; }
.ig-requires-reply-badge { font-size: 11px; font-weight: 700; color: #a02020; }
:root[data-theme="dark"] .ig-requires-reply-badge { color: #f0a3a3; }
.ig-human-review-badge { font-size: 11px; font-weight: 700; color: #9a6400; }
:root[data-theme="dark"] .ig-human-review-badge { color: #e9bd63; }

/* ── فرص المحتوى ──────────────────────────────────────────────────── */
.ig-opp-list { display: flex; flex-direction: column; gap: 12px; }
.ig-opp-card {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ig-opp-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ig-opp-title { font-weight: 700; font-size: 14.5px; color: var(--text, #1a1a1a); }
.ig-opp-priority { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; }
.ig-opp-priority.critical { background: #fbdada; color: #a02020; }
.ig-opp-priority.high { background: #fdeecb; color: #9a6400; }
.ig-opp-priority.medium { background: #d7e8fd; color: #1a5fa0; }
.ig-opp-priority.low { background: var(--border, #e5e5e5); color: var(--text-2, #666); }
.ig-opp-description { font-size: 13px; color: var(--text-2, #555); line-height: 1.7; }
.ig-opp-evidence { font-size: 12px; color: var(--text-2, #777); background: var(--panel-2, #f7f7f7); border-radius: 8px; padding: 8px 10px; white-space: pre-line; }
.ig-opp-meta-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-2, #666); }
.ig-opp-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ig-opp-actions select { border: 1px solid var(--border, #e5e5e5); border-radius: 6px; padding: 4px 8px; font-size: 12px; background: var(--panel, #fff); color: var(--text, #1a1a1a); }

@media (max-width: 720px) {
  .ig-inner-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .ig-comment-text-cell { max-width: 140px; }
}