/* ═══════════════════════════════════════════════════════════════
   SiteCORE — SEO Module Visual Overhaul
   Ahrefs/Semrush-inspired audit dashboard + v4 Lighthouse-style rings
   Load AFTER main styles in app.html
   ═══════════════════════════════════════════════════════════════ */

/* ── SEO Audit Hero Container (legacy v3 — hidden in v4 mode) ─ */
.seo-hero{display:flex;align-items:center;gap:32px;padding:28px 32px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:20px;animation:fadeUp 0.4s ease}
.seo-hero-gauge{position:relative;width:160px;height:160px;flex-shrink:0}
.seo-hero-gauge svg{width:160px;height:160px;transform:rotate(-90deg)}
.seo-hero-gauge .gauge-bg{fill:none;stroke:var(--bg-hover);stroke-width:12}
.seo-hero-gauge .gauge-fill{fill:none;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset 1.2s ease,stroke 0.5s ease}
.seo-hero-gauge .gauge-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.seo-hero-gauge .gauge-val{font-size:44px;font-weight:900;font-family:var(--font-mono);line-height:1;text-shadow:0 0 24px currentColor}
.seo-hero-gauge .gauge-lbl{font-size:9px;text-transform:uppercase;font-weight:700;letter-spacing:1px;color:var(--text-muted);margin-top:4px}

/* ── Distribution Bar (legacy v3 — hidden in v4 mode) ───── */
.seo-dist-bar{height:10px;border-radius:5px;display:flex;overflow:hidden;margin:12px 0 6px;background:var(--bg-secondary)}
.seo-dist-bar .dist-seg{height:100%;transition:width 0.8s ease}
.seo-dist-bar .dist-err{background:linear-gradient(90deg,#ff4e42,#f87171)}
.seo-dist-bar .dist-warn{background:linear-gradient(90deg,#ffa400,#fbbf24)}
.seo-dist-bar .dist-pass{background:linear-gradient(90deg,#0cce6b,#34d399)}
.seo-dist-legend{display:flex;gap:16px;font-size:11px;margin-bottom:14px}
.seo-dist-legend .leg-item{display:flex;align-items:center;gap:5px}
.seo-dist-legend .leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.seo-dist-legend .leg-dot.err{background:#ff4e42}
.seo-dist-legend .leg-dot.warn{background:#ffa400}
.seo-dist-legend .leg-dot.pass{background:#0cce6b}
.seo-dist-legend .leg-val{font-weight:800;font-family:var(--font-mono)}
.seo-dist-legend .leg-lbl{color:var(--text-muted)}

/* ── Category Breakdown Bars (legacy v3 — hidden in v4 mode) ── */
.seo-categories{margin-top:16px}
.seo-cat-title{font-size:11px;font-weight:700;color:var(--text-secondary);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px}
.seo-cat-row{display:flex;align-items:center;gap:10px;padding:5px 0}
.seo-cat-label{font-size:11px;font-weight:600;min-width:100px;color:var(--text-secondary)}
.seo-cat-track{flex:1;height:8px;background:var(--bg-secondary);border-radius:4px;overflow:hidden}
.seo-cat-fill{height:100%;border-radius:4px;transition:width 0.8s ease}
.seo-cat-fill.meta{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.seo-cat-fill.content{background:linear-gradient(90deg,#0cce6b,#34d399)}
.seo-cat-fill.structure{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
.seo-cat-fill.social{background:linear-gradient(90deg,#f472b6,#ec4899)}
.seo-cat-fill.technical{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.seo-cat-pct{font-size:11px;font-weight:800;font-family:var(--font-mono);min-width:40px;text-align:right}

/* ── Enhanced SEO Stat Cards ─────────────────────────────── */
#page-seo .stats-grid{grid-template-columns:repeat(6,1fr)!important;gap:10px}
#page-seo .stat-value{font-size:32px!important;font-weight:900;font-family:var(--font-mono);line-height:1.1}
#page-seo .stat-label{font-size:10px;margin-top:6px}

/* ── SEO Table Pass/Fail Pills ───────────────────────────── */
.seo-pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 10px;border-radius:10px;font-size:10px;font-weight:700;letter-spacing:0.3px;min-width:40px;text-align:center}
.seo-pill.pass{background:rgba(12,206,107,0.12);color:#0cce6b}
.seo-pill.fail{background:rgba(255,78,66,0.12);color:#ff4e42}
.seo-pill.miss{background:rgba(255,164,0,0.12);color:#ffa400}
.seo-pill.ok{background:rgba(12,206,107,0.12);color:#0cce6b}
.seo-pill.warn{background:rgba(255,164,0,0.12);color:#ffa400}
.seo-pill.na{background:var(--bg-secondary);color:var(--text-muted)}

/* Score badge in SEO table */
.seo-score-badge{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;font-size:13px;font-weight:800;font-family:var(--font-mono);border:3px solid}
.seo-score-badge.score-good{color:#0cce6b;border-color:#0cce6b;background:rgba(12,206,107,0.08)}
.seo-score-badge.score-avg{color:#ffa400;border-color:#ffa400;background:rgba(255,164,0,0.08)}
.seo-score-badge.score-poor{color:#ff4e42;border-color:#ff4e42;background:rgba(255,78,66,0.08)}

/* Word count coloring */
.wc-good{color:#0cce6b!important;font-weight:700}
.wc-low{color:#ffa400!important;font-weight:700}
.wc-thin{color:#ff4e42!important;font-weight:700}

/* ── SEO Table Row Enhancement ───────────────────────────── */
#seoTable tbody tr{cursor:pointer;transition:all 0.15s}
#seoTable tbody tr:hover{background:var(--bg-hover)}
#seoTable tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
#seoTable thead th{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;padding:10px 10px;color:var(--text-muted);border-bottom:2px solid var(--border)}
#seoTable tbody td{padding:9px 10px;font-size:12px;border-bottom:1px solid var(--border);vertical-align:middle}

/* ── Issue Count Badges ──────────────────────────────────── */
.issue-count{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;font-family:var(--font-mono)}
.issue-count.has-errors{color:#ff4e42}
.issue-count.has-warnings{color:#ffa400}
.issue-count.clean{color:#0cce6b}

/* ── SEO Slideout Enhancements ───────────────────────────── */
.seo-check-list{margin:8px 0}
.seo-check-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:12px}
.seo-check-row:last-child{border-bottom:none}
.seo-check-status{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px}
.seo-check-status.pass{background:rgba(12,206,107,0.15);color:#0cce6b}
.seo-check-status.fail{background:rgba(255,78,66,0.15);color:#ff4e42}
.seo-check-status.warn{background:rgba(255,164,0,0.15);color:#ffa400}
.seo-check-name{font-weight:600;flex:1}
.seo-check-val{font-size:11px;font-family:var(--font-mono);color:var(--text-secondary);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════
   V4 — Lighthouse-style ring grid + drill-in panel (NEW)
   ═══════════════════════════════════════════════════════════════ */

/* Hide legacy elements when v4 mode is active. */
#page-seo.seo-v4-mode #seoWidget,
#page-seo.seo-v4-mode #seoStats,
#page-seo.seo-v4-mode .seo-hero,
#page-seo.seo-v4-mode .seo-categories,
#page-seo.seo-v4-mode .seo-dist-bar,
#page-seo.seo-v4-mode .seo-dist-legend{
  display:none!important;
}

/* V4 hero container */
.seo-v4-hero{margin:14px 0 18px;animation:fadeUp 0.4s ease}

.seo-v4-rings{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px 20px;
}

.seo-v4-ring-card{
  text-align:center;
  padding:8px 4px;
  border-radius:var(--radius-md);
  transition:background 0.15s, transform 0.15s;
  position:relative;
}
.seo-v4-ring-card + .seo-v4-ring-card{
  border-left:1px dashed var(--border);
}
.seo-v4-ring-cat{cursor:pointer}
.seo-v4-ring-cat:hover{background:var(--bg-hover);transform:translateY(-1px)}
.seo-v4-ring-cat:focus{outline:2px solid var(--accent);outline-offset:2px}
.seo-v4-ring-cat.active{background:var(--bg-hover)}
.seo-v4-ring-cat.active::after{
  content:'';position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);
  width:0;height:0;
  border-left:8px solid transparent;border-right:8px solid transparent;
  border-bottom:8px solid var(--bg-card);
  z-index:2;
}

.seo-v4-ring-svg{width:88px;height:88px;display:block;margin:0 auto}
.seo-v4-ring-bg{fill:none;stroke:var(--bg-secondary);stroke-width:6}
.seo-v4-ring-fill{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 0.8s ease, stroke 0.4s ease}
.seo-v4-ring-num{font-size:20px;font-weight:800;font-family:var(--font-mono)}
.seo-v4-ring-status{font-size:7px;font-weight:700;letter-spacing:1px;fill:var(--text-muted)}

.seo-v4-ring-label{font-size:11px;font-weight:600;color:var(--text);margin-top:6px}
.seo-v4-ring-sub{font-size:9px;color:var(--text-muted);margin-top:2px}

.seo-v4-ring-overall .seo-v4-ring-svg{width:96px;height:96px}

/* Drill-in panel */
.seo-v4-drill{
  margin-top:12px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px 18px;
  animation:fadeUp 0.3s ease;
}
.seo-v4-drill-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.seo-v4-drill-title{font-size:13px;font-weight:600;color:var(--text)}
.seo-v4-drill-close{background:transparent;border:none;color:var(--text-muted);font-size:18px;font-weight:700;cursor:pointer;width:24px;height:24px;border-radius:4px;line-height:1}
.seo-v4-drill-close:hover{background:var(--bg-hover);color:var(--text)}

.seo-v4-drill-rows{display:flex;flex-direction:column;gap:6px}
.seo-v4-drill-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  background:var(--bg-secondary);
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
  transition:background 0.15s;
}
.seo-v4-drill-row:hover{background:var(--bg-hover)}
.seo-v4-drill-badge{font-weight:700;width:48px;text-align:center;padding:3px 0;border-radius:4px;font-size:10px;letter-spacing:0.4px}
.seo-v4-drill-text{flex:1;color:var(--text)}
.seo-v4-drill-count{color:var(--text-muted);font-family:var(--font-mono);font-size:11px}
.seo-v4-drill-empty{padding:14px;text-align:center;color:var(--text-muted);font-size:12px}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:900px){
  .seo-hero{flex-direction:column;text-align:center}
  #page-seo .stats-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))!important}
  .seo-cat-label{min-width:70px}
  .seo-v4-rings{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .seo-v4-rings{grid-template-columns:repeat(2,1fr)}
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.seo-hero{animation:fadeUp 0.4s ease}
.seo-cat-row{animation:fadeUp 0.3s ease;animation-fill-mode:both}
.seo-cat-row:nth-child(1){animation-delay:0.05s}
.seo-cat-row:nth-child(2){animation-delay:0.1s}
.seo-cat-row:nth-child(3){animation-delay:0.15s}
.seo-cat-row:nth-child(4){animation-delay:0.2s}
.seo-cat-row:nth-child(5){animation-delay:0.25s}


/* SC-SEO-TOOLTIPS-V1 */
/* ═══════════════════════════════════════════════════════════════
   SEO Audit — Rich tooltip system (for ring cards + table headers)
   ═══════════════════════════════════════════════════════════════ */

.sc-tip-host{position:relative;cursor:help}

.sc-tip{
  position:fixed;
  z-index:9999;
  background:var(--bg-card,#0f172a);
  border:1px solid var(--border,#1f2937);
  border-radius:10px;
  padding:14px 16px;
  width:320px;
  max-width:calc(100vw - 32px);
  box-shadow:0 18px 46px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
  font-size:12px;
  line-height:1.55;
  color:var(--text,#e4e4e7);
  pointer-events:none;
  opacity:0;
  transform:translateY(4px);
  transition:opacity 0.12s ease, transform 0.12s ease;
}
.sc-tip[data-visible="1"]{opacity:1;transform:translateY(0)}

.sc-tip-title{
  font-size:12px;font-weight:700;color:var(--text,#f4f4f5);
  margin:0 0 8px;display:flex;align-items:center;gap:8px;
}
.sc-tip-title .sc-tip-pill{
  font-size:9px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;
}

.sc-tip-section{margin-top:8px}
.sc-tip-section:first-of-type{margin-top:0}
.sc-tip-section-label{
  font-size:9px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;
  color:var(--text-muted,#a1a1aa);margin-bottom:3px;
}
.sc-tip-section-body{font-size:11.5px;color:var(--text-secondary,#d4d4d8)}

.sc-tip-ranges{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.sc-tip-range{display:flex;align-items:center;gap:8px;font-size:11px}
.sc-tip-range-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sc-tip-range-dot.pass{background:#0cce6b}
.sc-tip-range-dot.warn{background:#ffa400}
.sc-tip-range-dot.fail{background:#ff4e42}
.sc-tip-range-label{font-weight:700;color:var(--text,#e4e4e7);min-width:48px}
.sc-tip-range-desc{color:var(--text-muted,#a1a1aa);font-size:10.5px}


/* SC-TOOLTIP-OVERHAUL-V1 */
/* Compact cursor-tracking tooltip overrides */
.sc-tip{
  width:260px !important;
  max-width:260px !important;
  padding:10px 12px !important;
  font-size:11.5px !important;
  line-height:1.45 !important;
  box-shadow:0 12px 28px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.25) !important;
}
.sc-tip-title{font-size:11.5px !important;margin-bottom:6px !important}
.sc-tip-title .sc-tip-pill{font-size:8.5px !important;padding:1px 6px !important}
.sc-tip-section{margin-top:6px !important}
.sc-tip-section-label{font-size:8.5px !important;margin-bottom:2px !important;letter-spacing:0.6px !important}
.sc-tip-section-body{font-size:10.5px !important;line-height:1.45 !important}
.sc-tip-ranges{gap:3px !important;margin-top:3px !important}
.sc-tip-range{font-size:10px !important;gap:6px !important}
.sc-tip-range-dot{width:6px !important;height:6px !important}
.sc-tip-range-label{min-width:42px !important}
.sc-tip-range-desc{font-size:9.5px !important}

/* Mobile (<= 600px): pin to bottom of viewport, full-width minus margins */
@media (max-width: 600px) {
  .sc-tip{
    width:92vw !important;
    max-width:92vw !important;
    left:4vw !important;
    bottom:12px !important;
    top:auto !important;
    padding:12px 14px !important;
  }
}


/* SC-TOOLTIP-FIX-V2 */
/* SEO v4 ring number — match Security v5 readability fix. No SVG stroke. */
.seo-v4-ring-num {
  font-size: 17px !important;
  font-weight: 600 !important;
  font-family: var(--font-mono) !important;
  letter-spacing: -0.3px !important;
  paint-order: normal !important;
  stroke: none !important;
  stroke-width: 0 !important;
}
.seo-v4-ring-status {
  font-size: 7px !important;
  font-weight: 600 !important;
}


/* SC-RINGS-HOVER-FIX-V1 */
/* High-specificity overrides + disable inner SVG hit-testing.

   Why pointer-events:none on inner SVG: when the user hovers from the
   card body INTO the SVG <text> showing the score, the document-level
   mouseover/mouseout fires "leave" on the card and the controller hides
   the tooltip. Disabling pointer events on SVG children means the
   card itself is the only hit target, so hover stays continuous. */

#page-seo .seo-v4-ring-card svg,
#page-seo .seo-v4-ring-card svg * {
  pointer-events: none !important;
}

/* SEO ring number — readable, no stroke, lighter weight.
   text-rendering:geometricPrecision avoids the "fuzzy/bloom" effect
   that some browsers show when SVG text is anti-aliased over a
   stroked path.  */
#page-seo .seo-v4-ring-card svg text.seo-v4-ring-num,
#page-seo svg text.seo-v4-ring-num {
  font-size: 16px !important;
  font-weight: 500 !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0 !important;
  paint-order: normal !important;
  stroke: none !important;
  stroke-width: 0 !important;
  text-rendering: geometricPrecision !important;
  shape-rendering: geometricPrecision !important;
  font-stretch: normal !important;
}

#page-seo .seo-v4-ring-card svg text.seo-v4-ring-status {
  font-size: 6.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  stroke: none !important;
  stroke-width: 0 !important;
  text-rendering: geometricPrecision !important;
}

/* Same defensive rule for Security cards (in case any SVG residue remains) */
#page-security .sec-v5-card svg,
#page-security .sec-v5-card svg * {
  pointer-events: none !important;
}