/* SEO metrics working tools: date pickers, pager, coverage notes, row links and
   the history range. Every selector stays inside the module root. */
#seoMetricsDashboard input[type="date"] { color-scheme: var(--color-scheme); cursor: pointer; }
#seoMetricsDashboard input[type="date"]::-webkit-calendar-picker-indicator {
  padding: 2px;
  border-radius: 3px;
  opacity: .85;
  cursor: pointer;
}
#seoMetricsDashboard input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: color-mix(in srgb, var(--sky-fill) 14%, transparent); }

#seoMetricsDashboard .seo-reference-custom-period { flex-wrap: wrap; }
#seoMetricsDashboard .seo-reference-period-hint {
  flex-basis: 100%;
  color: var(--n11);
  font-size: 11px;
  line-height: 1.4;
  text-align: right;
}
#seoMetricsDashboard .seo-reference-detail-custom { flex-wrap: wrap; justify-content: flex-end; }
#seoMetricsDashboard .seo-reference-detail-custom .seo-reference-period-hint { font-size: 10px; }

#seoMetricsDashboard .seo-reference-pagination {
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: var(--n12);
  font-size: 13px;
  font-weight: 600;
}
#seoMetricsDashboard .seo-reference-pagination.is-top { margin: 0 0 0 auto; }
#seoMetricsDashboard .seo-reference-page-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--n6);
  border-radius: 7px;
  color: var(--n14);
  background: var(--n3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
#seoMetricsDashboard .seo-reference-page-button:hover:not(:disabled) { border-color: var(--sky); color: var(--sky); background: var(--n4); }
#seoMetricsDashboard .seo-reference-page-button:disabled { opacity: .35; cursor: default; }
#seoMetricsDashboard .seo-reference-list-heading { align-items: center; flex-wrap: wrap; }

#seoMetricsDashboard .seo-reference-coverage {
  margin: 0 0 10px;
  border: 1px solid var(--amber-strong);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--amber);
  background: color-mix(in srgb, var(--amber-fill) 8%, transparent);
  font-size: 12px;
  line-height: 1.45;
}
#seoMetricsDashboard .seo-reference-coverage-note { display: block; max-width: 360px; margin-top: 4px; color: var(--amber); font-size: 10px; }

#seoMetricsDashboard .seo-reference-row-link {
  color: var(--n14);
  font-weight: 700;
  text-decoration: none;
}
#seoMetricsDashboard .seo-reference-row-link:hover,
#seoMetricsDashboard .seo-reference-row-link:focus-visible { color: var(--sky); text-decoration: underline; }

#seoMetricsDashboard .seo-reference-history-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 18px 10px;
  color: var(--n11);
  font-size: 11px;
}
#seoMetricsDashboard .seo-reference-history-range input,
#seoMetricsDashboard .seo-reference-history-range button {
  height: 28px;
  border: 1px solid var(--n6);
  border-radius: 5px;
  padding: 0 8px;
  color: var(--n13);
  background: var(--n2);
  font-size: 11px;
}
#seoMetricsDashboard .seo-reference-history-range button { cursor: pointer; }
#seoMetricsDashboard .seo-reference-history-range button:hover { border-color: var(--sky); color: var(--sky); }

@media (max-width: 700px) {
  #seoMetricsDashboard .seo-reference-pagination.is-top { margin-left: 0; }
  #seoMetricsDashboard .seo-reference-period-hint { text-align: left; }
}

/* Comparison range: list header and card period block. */
#seoMetricsDashboard .seo-reference-compare-host { grid-column: 2 / 4; display: flex; justify-content: flex-end; }
#seoMetricsDashboard .seo-reference-compare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--n11);
  font-size: 11px;
}
#seoMetricsDashboard .seo-reference-compare label { display: flex; align-items: center; gap: 6px; }
#seoMetricsDashboard .seo-reference-compare-dates { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
#seoMetricsDashboard .seo-reference-compare select,
#seoMetricsDashboard .seo-reference-compare input,
#seoMetricsDashboard .seo-reference-compare button {
  height: 30px;
  border: 1px solid var(--n6);
  border-radius: 5px;
  padding: 0 8px;
  color: var(--n13);
  background: var(--n2);
  font-size: 11px;
}
#seoMetricsDashboard .seo-reference-compare select { color-scheme: var(--color-scheme); cursor: pointer; }
#seoMetricsDashboard .seo-reference-compare button { cursor: pointer; }
#seoMetricsDashboard .seo-reference-compare-range { display: block; margin-top: 4px; color: var(--n11); font-size: 10px; }

/* Last periods on hover over list metrics and card tiles. */
#seoMetricsDashboard [data-seo-dynamics] { cursor: help; }
#seoMetricsDashboard td[data-seo-dynamics]:hover { background: color-mix(in srgb, var(--sky-fill) 6%, transparent); }
#seoMetricsDashboard .seo-reference-dynamics {
  position: fixed;
  z-index: 60;
  min-width: 290px;
  max-width: 380px;
  border: 1px solid var(--n6);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--n14);
  background: var(--n2);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 45%, transparent);
  font-size: 13px;
  pointer-events: none;
}
#seoMetricsDashboard .seo-reference-dynamics strong { display: block; margin-bottom: 6px; color: var(--n14); font-size: 13px; }
#seoMetricsDashboard .seo-reference-dynamics table { width: 100%; border-collapse: collapse; }
#seoMetricsDashboard .seo-reference-dynamics th { padding: 2px 6px 4px 0; color: var(--n10); font-size: 11px; font-weight: 600; text-align: left; }
#seoMetricsDashboard .seo-reference-dynamics td { padding: 3px 6px 3px 0; white-space: nowrap; }
#seoMetricsDashboard .seo-reference-dynamics td + td { text-align: right; }
#seoMetricsDashboard .seo-reference-dynamics tr.is-current td { color: var(--sky); font-weight: 700; }
#seoMetricsDashboard .seo-reference-dynamics tr[data-status="partial"] td:nth-child(2) { color: var(--orange); }
#seoMetricsDashboard .seo-reference-dynamics tr[data-status="unavailable"] td:nth-child(2) { color: var(--n9); }
#seoMetricsDashboard .seo-reference-dynamics .is-positive { color: var(--green); }
#seoMetricsDashboard .seo-reference-dynamics .is-negative { color: var(--red); }
#seoMetricsDashboard .seo-reference-dynamics .is-muted { color: var(--n9); }
#seoMetricsDashboard .seo-reference-dynamics small { display: block; margin-top: 6px; color: var(--n10); font-size: 10px; }

/* SKU autofilter: checkbox list of SKUs and personal presets, like an Excel filter. */
#seoMetricsDashboard .seo-reference-control.is-sku.is-active { border-color: var(--sky); }
#seoMetricsDashboard .seo-sku-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  padding: 0 32px 0 13px;
  color: var(--n13);
  background: transparent;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
#seoMetricsDashboard .seo-sku-trigger:disabled { cursor: default; opacity: .6; }
#seoMetricsDashboard .seo-sku-trigger span { color: var(--n10); }
#seoMetricsDashboard .seo-sku-trigger strong { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
#seoMetricsDashboard .seo-sku-popup {
  position: absolute;
  z-index: 60;
  top: calc(100% + 7px);
  left: -1px;
  display: grid;
  gap: 8px;
  width: max(100%, 320px);
  max-width: calc(100vw - 52px);
  padding: 10px;
  border: 1px solid var(--n7);
  border-radius: 8px;
  color: var(--n13);
  background: var(--n2);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 53.3%, transparent);
}
#seoMetricsDashboard .seo-sku-presets { display: flex; flex-wrap: wrap; gap: 6px; }
#seoMetricsDashboard .seo-sku-presets select { flex: 1 1 140px; min-width: 0; }
#seoMetricsDashboard .seo-sku-popup select,
#seoMetricsDashboard .seo-sku-popup input[type="search"],
#seoMetricsDashboard .seo-sku-popup button {
  height: 30px;
  border: 1px solid var(--n6);
  border-radius: 6px;
  padding: 0 10px;
  color: var(--n13);
  background: var(--n3);
  font: inherit;
  font-size: 12px;
}
#seoMetricsDashboard .seo-sku-popup button { font-weight: 600; cursor: pointer; }
#seoMetricsDashboard .seo-sku-popup button:hover { border-color: var(--sky); }
#seoMetricsDashboard .seo-sku-popup button.is-primary { border-color: var(--sky); color: var(--n1); background: var(--sky); }
#seoMetricsDashboard .seo-sku-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--n5); border-radius: 6px; }
#seoMetricsDashboard .seo-sku-option { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; overflow-wrap: anywhere; }
#seoMetricsDashboard .seo-sku-option:hover { background: var(--sky-tint); }
#seoMetricsDashboard .seo-sku-option input { flex: 0 0 auto; width: 14px; height: 14px; margin: 0; padding: 0; accent-color: var(--sky); }
#seoMetricsDashboard .seo-sku-popup input[type="search"] { width: 100%; height: 30px; }
#seoMetricsDashboard .seo-sku-option.is-all { position: sticky; top: 0; border-bottom: 1px solid var(--n5); background: var(--n2); }
#seoMetricsDashboard .seo-sku-empty { margin: 0; padding: 9px 10px; color: var(--n11); font-size: 11px; }
#seoMetricsDashboard .seo-sku-actions { display: flex; justify-content: flex-end; gap: 6px; }
#seoMetricsDashboard .seo-reference-search-suggestions {
  position: absolute;
  z-index: 60;
  top: calc(100% + 7px);
  left: -1px;
  width: max(100%, 360px);
  max-width: calc(100vw - 52px);
  border: 1px solid var(--n7);
  border-radius: 8px;
  color: var(--n13);
  background: var(--n2);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 53.3%, transparent);
}
#seoMetricsDashboard .seo-reference-search-suggestions [role="listbox"] { max-height: 390px; overflow-y: auto; }
#seoMetricsDashboard .seo-reference-search-suggestions [role="option"] { padding: 11px 13px; border-bottom: 1px solid var(--n5); cursor: pointer; }
#seoMetricsDashboard .seo-reference-search-suggestions [role="option"]:hover,
#seoMetricsDashboard .seo-reference-search-suggestions [aria-selected="true"] { background: var(--sky-tint); }
#seoMetricsDashboard .seo-reference-search-identity { display: flex; justify-content: space-between; gap: 12px; color: var(--n14); font-size: 13px; }
#seoMetricsDashboard .seo-reference-search-identity small { color: var(--sky); }
#seoMetricsDashboard .seo-reference-search-title { display: block; overflow: hidden; margin-top: 4px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
#seoMetricsDashboard .seo-reference-search-asin { display: block; margin-top: 3px; color: var(--n11); font-size: 11px; overflow-wrap: anywhere; }
#seoMetricsDashboard .seo-reference-search-suggestions p { padding: 9px 13px; margin: 0; color: var(--n11); font-size: 11px; }
#seoMetricsDashboard .seo-content-date { color: var(--n13); font-variant-numeric: tabular-nums; white-space: nowrap; }
#seoMetricsDashboard .seo-content-date + small { display: block; margin-top: 3px; color: var(--n11); font-size: 11px; white-space: nowrap; }
#seoMetricsDashboard .seo-content-date.is-unchanged { color: var(--n11); font-size: 11px; white-space: normal; }
#seoMetricsDashboard .seo-content-date[data-status="unavailable"] { color: var(--n10); }
#seoMetricsDashboard .seo-content-badge { color: var(--n12); cursor: help; }
#seoMetricsDashboard .seo-content-badge[data-status="unavailable"] { color: var(--n10); }
#seoMetricsDashboard .seo-content-marker { stroke-width: 1.5; stroke-dasharray: 4 3; }
#seoMetricsDashboard .seo-content-marker.is-text { stroke: var(--violet); }
#seoMetricsDashboard .seo-content-marker.is-visual { stroke: var(--orange); }
#seoMetricsDashboard .seo-content-marker.is-both { stroke: var(--n12); }
#seoMetricsDashboard .seo-reference-chart-legend .seo-content-legend-title::before { content: none; }
#seoMetricsDashboard .seo-reference-chart-legend .seo-content-legend.is-text::before { border-top: 2px dashed var(--violet); }
#seoMetricsDashboard .seo-reference-chart-legend .seo-content-legend.is-visual::before { border-top: 2px dashed var(--orange); }
#seoMetricsDashboard .seo-reference-chart-legend .seo-content-legend.is-both::before { border-top: 2px dashed var(--n12); }

/* Copy-ready GPT prompt: top right of every SEO metrics page, only with the SEO MCP right. */
#seoMetricsDashboard .seo-reference-prompt { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 12px 26px 0; }
body.seo-metrics-detail-mode #seoMetricsDashboard .seo-reference-prompt { padding: 10px 18px 0; }
#seoMetricsDashboard .seo-reference-prompt-copy { height: 34px; padding: 0 12px; border: 1px solid var(--n5); border-radius: 6px; color: var(--n13); background: var(--n3); font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; }
#seoMetricsDashboard .seo-reference-prompt-status { color: var(--n10); font-size: 11px; }
#seoMetricsDashboard .seo-reference-prompt-status.is-error { color: var(--red); }
@media (max-width: 700px) {
  #seoMetricsDashboard .seo-reference-prompt { padding: 10px 16px 0; }
}