/* مرکز کنترل SEO · سبک، خوانا و هماهنگ با پوستهٔ AFV CRM */
.seo-dashboard {
  --seo-deep: #102333;
  --seo-muted: #728491;
  --seo-line: #e1e9ee;
  --seo-orange: #f26c32;
  --seo-red: #dc5960;
  --seo-blue: #3f82dc;
  --seo-green: #2fb878;
}

.seo-data-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid #f0d4c7;
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 18%, #f26c3215, transparent 28%),
    linear-gradient(135deg, #fff8f4, #ffffff 65%);
  box-shadow: 0 12px 26px #273a480b;
}

.seo-data-banner-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #fff;
  border-radius: 16px 16px 16px 5px;
  background: linear-gradient(145deg, #fb8552, #d95320);
  box-shadow: 0 10px 20px #f26c3230;
  font-size: 28px;
  font-weight: 800;
}

.seo-data-banner-copy {
  min-width: 0;
}

.seo-kicker {
  display: block;
  color: var(--seo-orange);
  direction: ltr;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.1px;
}

.seo-data-banner-copy h2 {
  margin: 6px 0 5px;
  color: var(--seo-deep);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.4;
}

.seo-data-banner-copy p {
  max-width: 760px;
  margin: 0;
  color: #617581;
  font-size: 14px;
  line-height: 2;
}

.seo-data-banner-state {
  display: grid;
  min-width: 132px;
  justify-items: start;
  gap: 5px;
  padding: 13px 15px;
  border: 1px solid #eadbd4;
  border-radius: 12px;
  background: #ffffffb8;
}

.seo-data-banner-state strong {
  color: var(--seo-deep);
  font-size: 14px;
}

.seo-data-banner-state small {
  color: var(--seo-muted);
  font-size: 12px;
}

.seo-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--seo-orange);
  box-shadow: 0 0 0 5px #f26c3218;
}

.seo-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.seo-kpi-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  min-height: 112px;
  padding: 17px;
  border: 1px solid var(--seo-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 9px 22px #26374608;
}

.seo-kpi-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 800;
}

.seo-kpi-card > div {
  min-width: 0;
}

.seo-kpi-card small,
.seo-kpi-card strong,
.seo-kpi-card div > span {
  display: block;
}

.seo-kpi-card small {
  color: var(--seo-muted);
  font-size: 12px;
}

.seo-kpi-card strong {
  margin-top: 5px;
  color: var(--seo-deep);
  font-size: 27px;
  line-height: 1.15;
}

.seo-kpi-card strong em {
  color: #99a8b0;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.seo-kpi-card div > span {
  margin-top: 5px;
  overflow: hidden;
  color: #8a9aa4;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-kpi-card.is-orange .seo-kpi-icon { color: #c55727; background: #fff0e7; }
.seo-kpi-card.is-red .seo-kpi-icon { color: #c84f59; background: #fff0f1; }
.seo-kpi-card.is-blue .seo-kpi-icon { color: #3775c8; background: #edf4ff; }
.seo-kpi-card.is-green .seo-kpi-icon { color: #258f61; background: #eaf8f1; }

.seo-traffic-panel {
  margin-bottom: 18px;
  overflow: hidden;
}

.seo-traffic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 22px;
  padding: 2px 20px 17px;
}

.seo-traffic-row {
  min-width: 0;
  padding: 15px 0 13px;
  border-bottom: 1px solid #edf1f3;
}

.seo-traffic-row-head,
.seo-traffic-row-head > div,
.seo-traffic-row-foot {
  display: flex;
  align-items: center;
}

.seo-traffic-row-head,
.seo-traffic-row-foot {
  justify-content: space-between;
  gap: 10px;
}

.seo-traffic-row-head > div { min-width: 0; gap: 8px; }
.seo-traffic-row-head strong { overflow: hidden; color: var(--seo-deep); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.seo-traffic-row-head small { color: #9aa8af; direction: ltr; font-family: Arial, sans-serif; font-size: 11px; white-space: nowrap; }
.seo-traffic-row-head b { color: var(--seo-deep); direction: rtl; font-size: 14px; white-space: nowrap; }
.seo-traffic-row-head b em { color: #91a0a8; font-size: 11px; font-style: normal; font-weight: 500; }
.seo-traffic-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--seo-orange); }
.seo-traffic-dot.is-blue, .seo-traffic-bar i.is-blue { background: #4f8bd8; }
.seo-traffic-dot.is-green, .seo-traffic-bar i.is-green { background: #35ad78; }
.seo-traffic-dot.is-purple, .seo-traffic-bar i.is-purple { background: #8b72cf; }
.seo-traffic-dot.is-pink, .seo-traffic-bar i.is-pink { background: #d36c9b; }
.seo-traffic-dot.is-gold, .seo-traffic-bar i.is-gold { background: #d5a13b; }
.seo-traffic-dot.is-orange, .seo-traffic-bar i.is-orange { background: var(--seo-orange); }
.seo-traffic-bar { height: 6px; margin-top: 11px; overflow: hidden; border-radius: 99px; background: #f0f3f5; }
.seo-traffic-bar i { display: block; width: var(--seo-traffic-share, 0%); height: 100%; border-radius: inherit; background: var(--seo-orange); transition: width .35s ease; }
.seo-traffic-row-foot { margin-top: 7px; color: #91a0a8; font-size: 11px; }
.seo-traffic-empty { display: flex; align-items: center; gap: 13px; grid-column: 1 / -1; padding: 12px 0 3px; color: #7b8d97; }
.seo-traffic-empty > span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--seo-orange); border: 1px solid #f5d8c9; border-radius: 12px; background: #fff8f4; font-size: 22px; }
.seo-traffic-empty strong { color: var(--seo-deep); font-size: 14px; }
.seo-traffic-empty p { margin: 4px 0 0; font-size: 12px; line-height: 1.8; }

.seo-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}

.seo-audit-panel,
.seo-score-panel,
.seo-pages-panel,
.seo-keywords-panel,
.seo-roadmap-panel,
.seo-traffic-panel {
  min-width: 0;
  overflow: hidden;
}

.seo-audit-panel .panel-header,
.seo-score-panel .panel-header,
.seo-pages-panel .panel-header,
.seo-keywords-panel .panel-header,
.seo-roadmap-panel .panel-header {
  gap: 14px;
  flex-wrap: wrap;
}

.seo-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-inline-start: auto;
}

.seo-filter-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  color: #6b7d88;
  border: 1px solid var(--seo-line);
  border-radius: 8px;
  background: #fbfcfd;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.seo-filter-button span {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  color: #8998a1;
  border-radius: 6px;
  background: #edf1f3;
  font-size: 11px;
}

.seo-filter-button:hover,
.seo-filter-button.is-active {
  color: #b94f24;
  border-color: #f0bea7;
  background: #fff5ef;
}

.seo-filter-button.is-active span {
  color: #b94f24;
  background: #fbdccc;
}

.seo-check-list {
  display: grid;
  gap: 0;
}

.seo-check-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 17px 20px;
  border-top: 1px solid #edf1f3;
  border-inline-start: 3px solid transparent;
}

.seo-check-row.is-critical { border-inline-start-color: var(--seo-red); background: linear-gradient(90deg, #fff7f7, #fff); }
.seo-check-row.is-attention { border-inline-start-color: var(--seo-orange); }
.seo-check-row.is-blocked { border-inline-start-color: var(--seo-blue); background: linear-gradient(90deg, #f7fbff, #fff); }
.seo-check-row.is-planned { border-inline-start-color: #c5d2d8; }

.seo-check-number {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #748691;
  border: 1px solid #dce5e9;
  border-radius: 9px;
  background: #f8fafb;
  font-size: 13px;
  font-weight: 800;
}

.seo-check-copy,
.seo-check-title,
.seo-check-meta {
  min-width: 0;
}

.seo-check-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.seo-check-title strong {
  color: var(--seo-deep);
  font-size: 15px;
}

.seo-check-copy p {
  margin: 7px 0 6px;
  color: #647681;
  font-size: 13px;
  line-height: 1.9;
}

.seo-check-copy small,
.seo-pages-table td small,
.seo-keyword-list small {
  display: block;
  color: #8b9aa3;
  font-size: 12px;
  line-height: 1.7;
}

.seo-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.seo-status-pill.is-critical { color: #b6414b; border-color: #f1c7cb; background: #fff1f2; }
.seo-status-pill.is-attention { color: #b75a28; border-color: #f3d0bd; background: #fff5ef; }
.seo-status-pill.is-ready { color: #208357; border-color: #bfe8d2; background: #effbf4; }
.seo-status-pill.is-planned { color: #6b7e89; border-color: #d8e2e7; background: #f5f8fa; }
.seo-status-pill.is-blocked { color: #3b70b0; border-color: #c9dcef; background: #f2f7ff; }

.seo-score-panel {
  display: flex;
  flex-direction: column;
}

.seo-score-ring {
  display: grid;
  width: 190px;
  height: 190px;
  place-items: center;
  margin: 24px auto 18px;
  border-radius: 50%;
  background: conic-gradient(var(--seo-orange) calc(var(--seo-score) * 1%), #e9eff2 0);
  box-shadow: 0 12px 28px #f26c321c;
  position: relative;
}

.seo-score-ring::after {
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.seo-score-ring > div {
  z-index: 1;
  display: grid;
  justify-items: center;
}

.seo-score-ring strong {
  color: var(--seo-deep);
  font-size: 42px;
  line-height: 1;
}

.seo-score-ring span {
  margin-top: 8px;
  color: var(--seo-muted);
  font-size: 13px;
}

.seo-score-caption {
  padding: 0 22px;
  text-align: center;
}

.seo-score-caption strong {
  color: var(--seo-deep);
  font-size: 16px;
}

.seo-score-caption p {
  margin: 8px 0 0;
  color: #7d8d97;
  font-size: 13px;
  line-height: 1.9;
}

.seo-score-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding: 20px 18px 18px;
  color: #7a8a94;
  font-size: 12px;
}

.seo-score-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.seo-score-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.seo-score-legend i.is-critical { background: var(--seo-red); }
.seo-score-legend i.is-attention { background: var(--seo-orange); }
.seo-score-legend i.is-planned { background: #b5c4cb; }

.seo-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 18px;
  margin-bottom: 18px;
}

.seo-panel-note {
  color: #8a9aa4;
  font-size: 12px;
}

.seo-pages-table {
  min-width: 660px;
}

.seo-pages-table td,
.seo-pages-table th {
  vertical-align: top;
  padding: 15px 17px;
}

.seo-pages-table td strong {
  display: block;
  color: var(--seo-deep);
  font-size: 14px;
  line-height: 1.6;
}

.seo-page-link {
  color: #3b78c5;
  direction: ltr;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.seo-keyword-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 20px;
  list-style: none;
}

.seo-keyword-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 14px 0;
  border-bottom: 1px solid #edf1f3;
}

.seo-keyword-index {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: var(--seo-orange);
  border-radius: 8px;
  background: #fff1e9;
  font-size: 12px;
  font-weight: 800;
}

.seo-keyword-list strong {
  display: block;
  overflow: hidden;
  color: var(--seo-deep);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-priority {
  color: #7f8e98;
  font-size: 12px;
  white-space: nowrap;
}

.seo-priority.is-high {
  color: #c25728;
  font-weight: 800;
}

.seo-secondary-action {
  margin: 14px 20px 17px;
}

.seo-roadmap-panel {
  margin-bottom: 12px;
}

.seo-roadmap-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo-roadmap-list li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 20px;
  border-top: 1px solid #edf1f3;
  border-inline-start: 1px solid #edf1f3;
}

.seo-roadmap-list li:first-child {
  border-inline-start: 0;
}

.seo-roadmap-list li > span {
  color: var(--seo-orange);
  direction: ltr;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.seo-roadmap-list strong {
  color: var(--seo-deep);
  font-size: 15px;
}

.seo-roadmap-list p {
  margin: 7px 0 0;
  color: #71838e;
  font-size: 13px;
  line-height: 1.9;
}

@media (max-width: 1120px) {
  .seo-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-traffic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-dashboard-grid,
  .seo-lower-grid { grid-template-columns: 1fr; }
  .seo-score-panel { min-height: 450px; }
  .seo-roadmap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-roadmap-list li:nth-child(3) { border-inline-start: 0; }
}

@media (max-width: 720px) {
  .seo-data-banner { grid-template-columns: 1fr; gap: 13px; padding: 18px; }
  .seo-data-banner-icon { width: 44px; height: 44px; font-size: 23px; }
  .seo-data-banner-state { min-width: 0; grid-template-columns: auto 1fr; align-items: center; column-gap: 9px; }
  .seo-data-banner-state small { grid-column: 2; }
  .seo-kpi-grid { grid-template-columns: 1fr; }
  .seo-traffic-grid { grid-template-columns: 1fr; }
  .seo-audit-panel .panel-header { align-items: flex-start; flex-direction: column; }
  .seo-filter-bar { width: 100%; margin-inline-start: 0; }
  .seo-filter-button { flex: 1 1 auto; justify-content: center; }
  .seo-check-row { padding: 15px; }
  .seo-roadmap-list { grid-template-columns: 1fr; }
  .seo-roadmap-list li,
  .seo-roadmap-list li:nth-child(3) { border-inline-start: 0; }
  .seo-score-panel { min-height: 0; }
}