/**
 * GSC Theme Overrides — Google Search Console light theme
 * Applies Google-style colors on top of base.css
 */

body {
  background: #f8f9fa;
  color: #202124;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ─── Accent Color Overrides ──────────────────────────── */
a { color: #1a73e8; }

.loading-spinner { border-top-color: #1a73e8; }

.page-header-gradient {
  background: linear-gradient(135deg, #1a73e8, #4285f4);
  box-shadow: 0 1px 4px rgba(26, 115, 232, 0.3);
}

/* ─── Card Elevations (Google Material) ──────────────── */
.metric-card,
.card,
.data-table-wrap,
.page-header {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
}

/* ─── GSC-Specific Status Colors ─────────────────────── */
.gsc-status-indexed { background: #e6f4ea; color: #137333; }
.gsc-status-warning { background: #fef7e0; color: #b06000; }
.gsc-status-error   { background: #fce8e6; color: #c5221f; }

.gsc-severity-mild     { background: #fef7e0; color: #b06000; }
.gsc-severity-moderate  { background: #fce8e6; color: #d93f0b; }
.gsc-severity-critical  { background: #fce8e6; color: #a50e0e; font-weight: 700; }

.gsc-severity-low      { background: #e6f4ea; color: #137333; }
.gsc-severity-medium   { background: #fef7e0; color: #b06000; }
.gsc-severity-high     { background: #fce8e6; color: #c5221f; }

/* ─── Google Color Metric Cards ──────────────────────── */
.metric-google-blue   { color: #1a73e8; }
.metric-google-green  { color: #34a853; }
.metric-google-yellow { color: #fbbc04; }
.metric-google-red    { color: #ea4335; }

/* ─── Position Badges ─────────────────────────────────── */
.position-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
}
.position-badge.green  { background: #e6f4ea; color: #137333; }
.position-badge.yellow { background: #fef7e0; color: #b06000; }
.position-badge.orange { background: #fce8e6; color: #c5221f; }

/* ─── Impact Bar ──────────────────────────────────────── */
.impact-bar {
  height: 6px;
  background: #e8eaed;
  border-radius: 3px;
  overflow: hidden;
}
.impact-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #34a853, #fbbc04, #ea4335);
  transition: width 0.3s;
}

/* ─── Impression Share Bar ────────────────────────────── */
.impression-bar {
  height: 6px;
  background: #e8eaed;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}
.impression-bar-fill {
  height: 100%;
  background: #1a73e8;
  transition: width 0.3s;
}

/* ─── Traffic Light Indicators ────────────────────────── */
.traffic-light {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.traffic-light.green  { background: #34a853; box-shadow: 0 0 0 4px rgba(52, 168, 83, 0.1); }
.traffic-light.yellow { background: #fbbc04; box-shadow: 0 0 0 4px rgba(251, 188, 4, 0.1); }
.traffic-light.red    { background: #ea4335; box-shadow: 0 0 0 4px rgba(234, 67, 53, 0.1); }

/* ─── Summary Dots ────────────────────────────────────── */
.summary-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.summary-dot.green  { background: #34a853; }
.summary-dot.yellow { background: #fbbc04; }
.summary-dot.red    { background: #ea4335; }

/* ─── Winner Badge ────────────────────────────────────── */
.winner-badge {
  display: inline-block;
  background: #34a853;
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  margin-left: 8px;
}

/* ─── Recommendation Box ─────────────────────────────── */
.recommendation-box {
  background: #e8f0fe;
  padding: 12px;
  border-radius: 4px;
  border-left: 3px solid #1a73e8;
}
.recommendation-box h4 {
  color: #1a73e8;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.recommendation-box ul {
  margin-left: 20px;
  font-size: 13px;
  color: #174ea6;
}
.recommendation-box li {
  margin-bottom: 4px;
}

/* ─── GSC Highlight Card ──────────────────────────────── */
.gsc-highlight {
  background: #e8f0fe;
  padding: 12px;
  border-radius: 4px;
  border-left: 3px solid #1a73e8;
}
.gsc-highlight .label {
  font-size: 11px;
  text-transform: uppercase;
  color: #1967d2;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.gsc-highlight .value {
  font-size: 20px;
  font-weight: 600;
  color: #1a73e8;
}

/* ─── GSC Filters ─────────────────────────────────────── */
.gsc-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.gsc-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gsc-filter-group label {
  font-size: 13px;
  font-weight: 500;
  color: #5f6368;
}
.gsc-select, .gsc-input {
  padding: 6px 12px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 13px;
  background: white;
  color: #202124;
  outline: none;
}
.gsc-select:focus, .gsc-input:focus {
  border-color: #1a73e8;
}

/* ─── GSC Cards Grid ──────────────────────────────────── */
.gsc-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* ─── GSC Opportunity Card ────────────────────────────── */
.gsc-opportunity-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gsc-opportunity-card:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1);
}

/* ─── GSC URL Card ────────────────────────────────────── */
.gsc-url-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s;
}
.gsc-url-card:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1);
}

/* ─── GSC Page Card ───────────────────────────────────── */
.gsc-page-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s;
  cursor: pointer;
}
.gsc-page-card:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1);
}

/* ─── Expand/Collapse ─────────────────────────────────── */
.gsc-expand-btn {
  margin-top: 12px;
  padding: 8px;
  background: #f8f9fa;
  border: none;
  border-radius: 4px;
  width: 100%;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #1a73e8;
  transition: background 0.2s;
}
.gsc-expand-btn:hover { background: #e8eaed; }

/* ─── GSC Details Panel ───────────────────────────────── */
.gsc-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e8eaed;
  font-size: 13px;
}
.gsc-details-section {
  margin-bottom: 12px;
}
.gsc-details-section h4 {
  font-size: 11px;
  text-transform: uppercase;
  color: #5f6368;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* ─── Metric Items (for cards) ────────────────────────── */
.gsc-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 13px;
}
.gsc-metric-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gsc-metric-label {
  font-size: 11px;
  text-transform: uppercase;
  color: #5f6368;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.gsc-metric-value {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ─── Expandable Table Rows ───────────────────────────── */
.gsc-expandable-row {
  cursor: pointer;
  transition: background 0.15s;
}
.gsc-expandable-row:hover { background: #f8f9fa; }
.gsc-expand-icon {
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.2s;
  font-size: 10px;
}
.gsc-expand-icon.expanded { transform: rotate(90deg); }

/* ─── Page Item in Cannibalization ────────────────────── */
.gsc-page-item {
  background: white;
  padding: 12px;
  border-radius: 4px;
  border-left: 3px solid #dadce0;
  margin-bottom: 8px;
}
.gsc-page-item.winner {
  border-left-color: #34a853;
  background: #f0f9f4;
}
.gsc-page-url {
  font-size: 13px;
  color: #1a73e8;
  margin-bottom: 8px;
  word-break: break-all;
}
.gsc-page-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  font-size: 12px;
}

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 600px) {
  .gsc-cards-grid { grid-template-columns: 1fr; }
  .gsc-metrics-grid { grid-template-columns: 1fr 1fr; }
}