/* ── Page header ────────────────────────────────────────────────────────── */
.page-header {
  padding: 2.5rem 2.5rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

.page-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--muted); text-transform: uppercase;
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.page-eyebrow::before {
  content: ''; display: inline-block;
  width: 18px; height: 1px; background: var(--muted);
}

.page-title {
  font-family: var(--mono); font-size: 1.6rem; font-weight: 700;
  letter-spacing: -0.02em;
}

.page-meta {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap; margin-top: 0.3rem;
}
.meta-item {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  display: flex; align-items: center; gap: 0.4rem;
}
.meta-item span { color: var(--text); }

/* ── Filters bar ────────────────────────────────────────────────────────── */
.filters-bar {
  padding: 0.85rem 2.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--surface);
}

.filter-label {
  font-family: var(--mono); font-size: 11px;
  color: var(--muted); letter-spacing: 0.1em;
}

.filter-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--border2); background: transparent;
  color: var(--muted); cursor: pointer; transition: all 0.15s;
  text-transform: uppercase;
}
.filter-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }
.filter-btn.active { color: var(--bg); border-color: transparent; }
.filter-btn.active.all  { background: var(--text); color: var(--bg); }
.filter-btn.active.bull { background: var(--bull); color: #0a0c0f; }
.filter-btn.active.bear { background: var(--bear); color: #0a0c0f; }

.filter-sep { width: 1px; height: 16px; background: var(--border2); }

.signal-count {
  font-family: var(--mono); font-size: 11px;
  color: var(--muted); margin-left: auto;
}
.signal-count span { color: var(--text); }

/* ── Table header ───────────────────────────────────────────────────────── */
.table-header {
  display: grid;
  grid-template-columns: 2rem 90px 80px 110px 1fr 2rem;
  gap: 0 1rem;
  padding: 0.6rem 2.5rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 10px;
  color: var(--muted); letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Signals list ───────────────────────────────────────────────────────── */
#signals-list { width: 100%; }

/* ── Loading state ──────────────────────────────────────────────────────── */
.loading-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 5rem 2rem; gap: 1rem;
}
.spinner {
  width: 28px; height: 28px;
  border: 2px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
  font-family: var(--mono); font-size: 12px;
  color: var(--muted); letter-spacing: 0.1em;
}

/* ── Error state ────────────────────────────────────────────────────────── */
.error-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 5rem 2rem; gap: 0.75rem;
}
.error-icon  { font-family: var(--mono); font-size: 2rem; color: var(--bear); }
.error-title { font-family: var(--mono); font-size: 14px; color: var(--text); }
.error-sub   { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  padding: 5rem 2rem; gap: 0.75rem;
}
.empty-title { font-family: var(--mono); font-size: 14px; color: var(--text); }
.empty-sub   { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ── Signal row ─────────────────────────────────────────────────────────── */
.signal-item { border-bottom: 1px solid var(--border); }

.signal-row {
  display: grid;
  grid-template-columns: 2rem 90px 80px 110px 1fr 2rem;
  gap: 0 1rem;
  padding: 0 2.5rem;
  height: 52px; align-items: center;
  cursor: pointer; transition: background 0.15s;
  user-select: none;
}
.signal-row:hover  { background: var(--surface); }
.signal-row.open   { background: var(--surface); }

.row-expand {
  font-family: var(--mono); font-size: 14px; color: var(--muted);
  transition: transform 0.25s, color 0.15s;
  text-align: center; line-height: 1;
}
.signal-row.open .row-expand { transform: rotate(90deg); color: var(--accent); }

.row-ticker {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  letter-spacing: 0.05em; color: var(--text);
}

.trend-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  padding: 3px 10px; text-transform: uppercase;
}
.trend-badge.BULL    { background: rgba(0,212,161,0.12); color: var(--bull); border: 1px solid rgba(0,212,161,0.25); }
.trend-badge.BEAR    { background: rgba(255,107,74,0.12); color: var(--bear); border: 1px solid rgba(255,107,74,0.25); }
.trend-badge.NEUTRAL { background: rgba(74,158,255,0.12); color: var(--accent3); border: 1px solid rgba(74,158,255,0.25); }

.trend-badge.BULL::before    { content: '▲'; font-size: 8px; }
.trend-badge.BEAR::before    { content: '▼'; font-size: 8px; }
.trend-badge.NEUTRAL::before { content: '◆'; font-size: 7px; }

.row-date {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}

.row-desc-preview {
  font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 1rem; font-weight: 300;
}

/* ── Signal detail (expanded) ───────────────────────────────────────────── */
.signal-detail {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--surface);
  animation: slideDown 0.22s ease;
}
.signal-detail.open { display: block; }

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.detail-inner {
  padding: 2rem 2.5rem 2rem calc(2.5rem + 2rem + 1rem);
  display: grid; grid-template-columns: 1fr 340px; gap: 2rem;
}

/* ── Chart area ─────────────────────────────────────────────────────────── */
.chart-label,
.desc-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  color: var(--muted); text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.chart-label::after,
.desc-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.chart-placeholder {
  background: var(--surface2);
  border: 1px dashed var(--border2);
  height: 260px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.5rem;
}
.chart-placeholder-icon { font-family: var(--mono); font-size: 11px; color: var(--border2); letter-spacing: 0.1em; }
.chart-placeholder-text { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ── Description panel ──────────────────────────────────────────────────── */
.desc-body {
  font-size: 14px; color: var(--muted);
  line-height: 1.8; font-weight: 300; margin-bottom: 1.25rem;
}

.signal-indicators {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem;
}
.ind-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  padding: 2px 8px; border: 1px solid var(--border2);
  color: var(--muted); text-transform: uppercase;
}

.signal-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem;
}
.sig-meta-item { font-family: var(--mono); font-size: 11px; }
.sig-meta-item .mkey { color: var(--muted); display: block; margin-bottom: 1px; }
.sig-meta-item .mval { color: var(--text); }

/* ── Footer margin ──────────────────────────────────────────────────────── */
footer { margin-top: 4rem; }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .page-header  { padding: 1.5rem 1.25rem 1rem; }
  .filters-bar  { padding: 0.75rem 1.25rem; }
  .table-header { display: none; }
  .signal-row   {
    grid-template-columns: 2rem 80px 70px 1fr 2rem;
    padding: 0 1.25rem;
  }
  .row-date     { display: none; }
  .detail-inner {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.25rem;
  }
}