/* Shared styles for alt-data pages and widgets */

/* ── Page layout ─────────────────────────────────────────────────── */

.alt-data-page { min-height: 100vh; background: var(--bg, #050810); color: var(--text, #e8f4ff); }
.alt-data-inner { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.alt-data-back { display: inline-block; margin-bottom: 1rem; font-size: 0.82rem; color: var(--text-muted, #8aaabb); }
.alt-data-back:hover { color: var(--accent, #00e5ff); }

.alt-data-eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #00e5ff);
}
.alt-data-inner > header h1 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.alt-data-lead { margin: 0 0 1rem; max-width: 46rem; line-height: 1.55; color: var(--text-muted, #8aaabb); }
.alt-data-title-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.35rem; }
.alt-data-updated {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  color: var(--text-dim, #5a7a8a);
  white-space: nowrap;
}

/* ── Hub grid ────────────────────────────────────────────────────── */

.alt-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.alt-data-card {
  display: block;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border, rgba(0, 229, 255, 0.15));
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(0, 229, 255, 0.05) 0%, transparent 50%),
    rgba(5, 8, 16, 0.9);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.alt-data-card:hover {
  border-color: rgba(0, 229, 255, 0.35);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(0, 229, 255, 0.1) 0%, transparent 55%),
    rgba(8, 12, 22, 0.95);
}
.alt-data-card-name { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; color: var(--text, #e8f4ff); }
.alt-data-card-desc { margin: 0 0 0.55rem; font-size: 0.82rem; line-height: 1.4; color: var(--text-muted, #8aaabb); }
.alt-data-card-tag {
  display: inline-block;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim, #5a7a8a);
  padding: 0.15rem 0.45rem;
  border: 1px solid rgba(0, 229, 255, 0.1);
  border-radius: 3px;
}

.alt-data-section-label {
  margin: 2rem 0 0.85rem;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim, #5a7a8a);
}

.alt-data-related {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border, rgba(0, 229, 255, 0.12));
  font-size: 0.84rem;
  color: var(--text-muted, #8aaabb);
}
.alt-data-related a { color: var(--accent, #00e5ff); }

/* ── Data card grids ─────────────────────────────────────────────── */

.alt-data-card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.alt-data-item-card {
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border, rgba(0, 229, 255, 0.15));
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(0, 229, 255, 0.05) 0%, transparent 50%),
    rgba(5, 8, 16, 0.9);
  min-height: 5rem;
}

.alt-data-empty {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted, #8aaabb);
}

/* ── Job postings ────────────────────────────────────────────────── */

.job-posting-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.job-posting-header strong { font-size: 1rem; color: var(--text, #e8f4ff); }
.job-posting-count {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--accent, #00e5ff);
}
.job-posting-ats {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.64rem;
  color: var(--text-dim, #5a7a8a);
  letter-spacing: 0.04em;
}
.job-posting-depts {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.job-posting-dept {
  font-size: 0.7rem;
  color: var(--text-muted, #8aaabb);
  padding: 0.15rem 0.4rem;
  border: 1px solid rgba(0, 229, 255, 0.1);
  border-radius: 3px;
}
.job-posting-titles {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.job-posting-title {
  font-size: 0.68rem;
  color: var(--text-dim, #5a7a8a);
}

/* ── Google Trends ───────────────────────────────────────────────── */

.trend-item { display: flex; flex-direction: column; gap: 0.35rem; }
.trend-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.trend-header strong { font-size: 1rem; color: var(--text, #e8f4ff); }
.trend-sparkline { color: var(--accent, #00e5ff); flex-shrink: 0; }
.trend-meta { display: flex; gap: 0.75rem; align-items: baseline; }
.trend-volume {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.82rem;
  color: var(--text-muted, #8aaabb);
}
.trend-change {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.78rem;
  color: var(--text-dim, #5a7a8a);
}
.trend-change.trend-up { color: #5ee89a; }
.trend-change.trend-down { color: #ff8a8a; }
.trend-keyword {
  font-size: 0.68rem;
  color: var(--text-dim, #5a7a8a);
}

/* ── Social sentiment ────────────────────────────────────────────── */

.sentiment-section-heading {
  margin: 1.5rem 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text, #e8f4ff);
}
.sentiment-item { display: flex; flex-direction: column; gap: 0.35rem; }
.sentiment-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.sentiment-header strong { font-size: 1rem; color: var(--text, #e8f4ff); }
.sentiment-score {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.82rem;
  font-weight: 500;
}
.sentiment-score.sentiment-bullish { color: #5ee89a; }
.sentiment-score.sentiment-bearish { color: #ff8a8a; }
.sentiment-score.sentiment-neutral { color: #f0c040; }
.sentiment-buzz {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.72rem;
  color: var(--text-dim, #5a7a8a);
}
.sentiment-buzz.trend-up { color: #5ee89a; }
.sentiment-buzz.trend-down { color: #ff8a8a; }
.sentiment-buzz.trend-neutral { color: #f0c040; }
.sentiment-body { display: flex; gap: 0.75rem; align-items: baseline; }
.sentiment-mentions {
  font-size: 0.72rem;
  color: var(--text-dim, #5a7a8a);
}
.sentiment-sources {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sentiment-source {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.7rem;
  color: var(--text-dim, #5a7a8a);
}
.sentiment-source.trend-up { color: #5ee89a; }
.sentiment-source.trend-down { color: #ff8a8a; }
.sentiment-source.trend-neutral { color: #f0c040; }

/* ── Google Trends — bar & date ───────────────────────────────────── */

.trend-bar-wrap {
  position: relative;
  height: 6px;
  background: rgba(0, 229, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.trend-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.4), rgba(0, 229, 255, 0.7));
  border-radius: 3px;
  transition: width 0.3s ease;
}
.trend-bar-label {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  color: var(--text-dim, #5a7a8a);
}
.trend-date {
  font-size: 0.72rem;
  color: var(--text-dim, #5a7a8a);
}

/* ── Social sentiment — buzz bar & history ────────────────────────── */

.sentiment-score.sentiment-slightly-bullish { color: #8ee8c0; }
.sentiment-score.sentiment-slightly-bearish { color: #ffa0a0; }
.sentiment-score.trend-up { color: #5ee89a; }
.sentiment-score.trend-down { color: #ff8a8a; }
.sentiment-score.trend-neutral { color: #f0c040; }

.sentiment-split {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.15rem;
}
.sentiment-split-bull {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  color: #5ee89a;
}
.sentiment-split-bear {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  color: #ff8a8a;
}

.sentiment-buzz-bar {
  position: relative;
  height: 5px;
  background: rgba(0, 229, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.15rem;
}
.sentiment-buzz-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.3), rgba(0, 229, 255, 0.6));
  border-radius: 3px;
  transition: width 0.3s ease;
}
.sentiment-buzz-label {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.64rem;
  color: var(--text-dim, #5a7a8a);
}
.sentiment-history {
  margin-top: 0.2rem;
}
.sentiment-history .trend-sparkline { color: var(--text-muted, #8aaabb); }