/* ═══════════════════════════════════════════════════════════════
   SiteCORE — Performance Module Visual Overhaul
   Lighthouse-inspired gauges, Ahrefs/Semrush data density
   Load AFTER main styles in app.html
   ═══════════════════════════════════════════════════════════════ */

/* ── Lighthouse Semicircle Gauge ─────────────────────────── */
.perf-gauge-container{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}
.perf-gauge-wrap{position:relative;width:180px;height:110px;flex-shrink:0}
.perf-gauge-svg{width:180px;height:110px}
.perf-gauge-bg{fill:none;stroke:var(--bg-hover);stroke-width:10;stroke-linecap:round}
.perf-gauge-red{fill:none;stroke:#ff4e42;stroke-width:10;stroke-linecap:round;opacity:0.25}
.perf-gauge-orange{fill:none;stroke:#ffa400;stroke-width:10;stroke-linecap:round;opacity:0.25}
.perf-gauge-green{fill:none;stroke:#0cce6b;stroke-width:10;stroke-linecap:round;opacity:0.25}
.perf-gauge-fill{fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1s ease,stroke 0.5s ease}
.perf-gauge-score{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);text-align:center}
.perf-gauge-val{font-size:42px;font-weight:900;font-family:var(--font-mono);line-height:1;text-shadow:0 0 20px currentColor}
.perf-gauge-lbl{font-size:9px;color:var(--text-muted);text-transform:uppercase;font-weight:700;letter-spacing:1px;margin-top:2px}

/* ── CWV Status Pills ────────────────────────────────────── */
.perf-cwv-row{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.cwv-card{flex:1;min-width:140px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;position:relative;overflow:hidden}
.cwv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.cwv-card.good::before{background:linear-gradient(90deg,#0cce6b,#0cce6b)}
.cwv-card.needs-work::before{background:linear-gradient(90deg,#ffa400,#ffa400)}
.cwv-card.poor::before{background:linear-gradient(90deg,#ff4e42,#ff4e42)}
.cwv-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cwv-card-name{font-size:11px;font-weight:700;color:var(--text-secondary);letter-spacing:0.3px}
.cwv-card-badge{font-size:9px;font-weight:700;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:0.5px}
.cwv-card.good .cwv-card-badge{background:rgba(12,206,107,0.15);color:#0cce6b}
.cwv-card.needs-work .cwv-card-badge{background:rgba(255,164,0,0.15);color:#ffa400}
.cwv-card.poor .cwv-card-badge{background:rgba(255,78,66,0.15);color:#ff4e42}
.cwv-card-value{font-size:28px;font-weight:900;font-family:var(--font-mono);line-height:1;margin-bottom:8px}
.cwv-card.good .cwv-card-value{color:#0cce6b}
.cwv-card.needs-work .cwv-card-value{color:#ffa400}
.cwv-card.poor .cwv-card-value{color:#ff4e42}
/* Threshold bar */
.cwv-threshold{height:6px;border-radius:3px;background:var(--bg-secondary);position:relative;overflow:visible}
.cwv-threshold-fill{height:100%;border-radius:3px;transition:width 0.8s ease}
.cwv-card.good .cwv-threshold-fill{background:linear-gradient(90deg,#0cce6b,#34d399);width:33%}
.cwv-card.needs-work .cwv-threshold-fill{background:linear-gradient(90deg,#ffa400,#fbbf24);width:66%}
.cwv-card.poor .cwv-threshold-fill{background:linear-gradient(90deg,#ff4e42,#f87171);width:100%}
.cwv-threshold-labels{display:flex;justify-content:space-between;font-size:8px;color:var(--text-muted);margin-top:3px;font-family:var(--font-mono)}
.cwv-card-desc{font-size:10px;color:var(--text-muted);margin-top:2px}

/* ── Enhanced Stat Cards (Performance-specific) ──────────── */
#page-perf .stats-grid{grid-template-columns:repeat(5,1fr)!important;gap:12px}
#page-perf .stat-card{padding:20px;position:relative}
#page-perf .stat-value{font-size:36px!important;font-weight:900;font-family:var(--font-mono);line-height:1.1}
#page-perf .stat-label{font-size:11px;margin-top:6px}
#page-perf .stat-delta{font-size:11px;font-weight:700;font-family:var(--font-mono);margin-top:2px}
#page-perf .stat-delta.up{color:#0cce6b}
#page-perf .stat-delta.down{color:#ff4e42}

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

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

/* CWV dots in table rows */
.cwv-dots{display:flex;gap:3px;align-items:center}
.cwv-dot{width:8px;height:8px;border-radius:50%}
.cwv-dot.good{background:#0cce6b}
.cwv-dot.needs-work{background:#ffa400}
.cwv-dot.poor{background:#ff4e42}

/* Metric value coloring in table */
.metric-good{color:#0cce6b!important;font-weight:700}
.metric-avg{color:#ffa400!important;font-weight:700}
.metric-poor{color:#ff4e42!important;font-weight:700}

/* ── Resource Bars (Slideout + Page) ─────────────────────── */
.resource-bar-group{margin:4px 0}
.resource-bar-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.resource-bar-label{font-size:11px;font-weight:600;min-width:80px;color:var(--text-secondary)}
.resource-bar-track{flex:1;height:10px;background:var(--bg-secondary);border-radius:5px;overflow:hidden;position:relative}
.resource-bar-fill{height:100%;border-radius:5px;transition:width 0.8s ease}
.resource-bar-fill.js{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.resource-bar-fill.css{background:linear-gradient(90deg,#818cf8,#6366f1)}
.resource-bar-fill.images{background:linear-gradient(90deg,#34d399,#10b981)}
.resource-bar-fill.fonts{background:linear-gradient(90deg,#f472b6,#ec4899)}
.resource-bar-fill.html{background:linear-gradient(90deg,#60a5fa,#3b82f6)}
.resource-bar-value{font-size:11px;font-weight:700;font-family:var(--font-mono);min-width:60px;text-align:right;color:var(--text-primary)}

/* ── Enhanced Slideout for Performance ───────────────────── */
.so-perf-gauge{text-align:center;padding:16px 0 8px}
.so-perf-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.so-perf-metric{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;text-align:center}
.so-perf-metric-val{font-size:20px;font-weight:800;font-family:var(--font-mono);line-height:1.2}
.so-perf-metric-lbl{font-size:9px;color:var(--text-muted);text-transform:uppercase;font-weight:600;letter-spacing:0.5px;margin-top:4px}
.so-perf-metric-bar{height:4px;border-radius:2px;margin-top:6px;background:var(--bg-secondary)}
.so-perf-metric-bar-fill{height:100%;border-radius:2px}

/* Diagnostics list */
.diag-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);font-size:12px}
.diag-item:last-child{border-bottom:none}
.diag-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;font-weight:700}
.diag-icon.warn{background:rgba(255,164,0,0.15);color:#ffa400}
.diag-icon.error{background:rgba(255,78,66,0.15);color:#ff4e42}
.diag-icon.info{background:rgba(59,130,246,0.15);color:var(--accent)}
.diag-icon.pass{background:rgba(12,206,107,0.15);color:#0cce6b}
.diag-title{font-weight:600;margin-bottom:2px}
.diag-detail{font-size:11px;color:var(--text-muted)}
.diag-savings{font-size:10px;font-weight:700;font-family:var(--font-mono);margin-left:auto;flex-shrink:0;padding:2px 8px;border-radius:4px;background:var(--bg-secondary)}

/* Opportunity cards */
.opp-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;margin-bottom:8px;background:var(--bg-elevated)}
.opp-card-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.opp-card-impact{font-size:9px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase}
.opp-card-impact.high{background:rgba(255,78,66,0.12);color:#ff4e42}
.opp-card-impact.medium{background:rgba(255,164,0,0.12);color:#ffa400}
.opp-card-impact.low{background:rgba(59,130,246,0.12);color:var(--accent)}
.opp-card-title{font-size:12px;font-weight:600}
.opp-card-detail{font-size:11px;color:var(--text-muted)}

/* ── Page Weight Donut ───────────────────────────────────── */
.page-weight-summary{display:flex;align-items:center;gap:20px;padding:12px 0}
.page-weight-total{text-align:center}
.page-weight-val{font-size:28px;font-weight:900;font-family:var(--font-mono);color:var(--text-primary)}
.page-weight-lbl{font-size:9px;color:var(--text-muted);text-transform:uppercase;font-weight:600}
.page-weight-reqs{font-size:11px;color:var(--text-secondary);margin-top:2px;font-family:var(--font-mono)}

/* ── Quick Diagnostics Grid ──────────────────────────────── */
.quick-diag-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.quick-diag-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg-secondary);border-radius:var(--radius-sm);font-size:11px}
.quick-diag-label{color:var(--text-secondary);font-weight:500}
.quick-diag-value{font-weight:700;font-family:var(--font-mono)}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:900px){
  .perf-gauge-container{flex-direction:column;text-align:center}
  .perf-cwv-row{justify-content:center}
  #page-perf .stats-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important}
  .cwv-card{min-width:120px}
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes gaugeIn{from{stroke-dashoffset:251.33}to{stroke-dashoffset:var(--gauge-offset)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.perf-gauge-container{animation:fadeUp 0.4s ease}
.cwv-card{animation:fadeUp 0.4s ease;animation-fill-mode:both}
.cwv-card:nth-child(1){animation-delay:0.1s}
.cwv-card:nth-child(2){animation-delay:0.2s}
.cwv-card:nth-child(3){animation-delay:0.3s}


/* ── Slideout Performance Layout Fixes ───────────────────── */
/* Fix overlapping gauge + metric tiles in the slideout panel */
.slideout .so-info-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;margin:8px 0 12px!important}
.slideout .so-info-item{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 8px;text-align:center;min-width:0;overflow:hidden}
.slideout .so-info-val{font-size:16px!important;font-weight:800;font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slideout .so-info-lbl{font-size:8px!important;color:var(--text-muted);text-transform:uppercase;font-weight:600;letter-spacing:0.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Fix the score ring inside slideout — prevent overflow */
.slideout .score-ring-lg,.slideout [style*="text-align:center"] svg[viewBox="0 0 120 120"]{max-width:140px;margin:0 auto}

/* CWV section in slideout — ensure full titles visible */
.slideout .slideout-section{overflow:visible}
.slideout .slideout-section *{box-sizing:border-box}

/* Performance slideout: 2-column metric grid for the 6-tile layout */
.slideout .so-info-grid[style*="repeat(3"]{grid-template-columns:repeat(3,1fr)!important}
.slideout .so-info-grid[style*="repeat(2"]{grid-template-columns:repeat(2,1fr)!important}

/* Fix CWV bars and labels in slideout being cut off */
.slideout .cwv-card,.slideout [class*="cwv"]{overflow:visible}

/* Resource bars in slideout */
.slideout .resource-bar-row{padding:5px 0}
.slideout .resource-bar-label{min-width:70px;font-size:11px}
.slideout .resource-bar-value{min-width:50px;font-size:11px}

/* Quick diagnostics in slideout */
.slideout .quick-diag-grid{grid-template-columns:1fr!important}

/* Ensure slideout content doesn't overlap footer */
.slideout-body{overflow-y:auto;padding-bottom:16px}