/*
 * ══════════════════════════════════════════════════════════════════════
 *  CAOSmarada — Sentiment AI Redesign (Onda F · 25/05/2026)
 *  Refundação visual completa da aba #page-sentiment (FinBERT/FinancialBERT).
 *  Linguagem: ultra-premium emerald (mesma de Predições, Mercado, Sinais, Macro).
 *
 *  Princípios:
 *   1. Panel sólido (bg-card-solid) — sem glassmorphism colorido nem neon
 *   2. Editorial italic em section titles, mono tabular-nums em scores
 *   3. Gauge SVG com tokens emerald (stroke fica dinâmico via JS)
 *   4. Heatmap tiles compactos com hover lift + sentiment border
 *   5. Headlines com stripe esquerda 3px (emerald/rose/amber)
 *   6. Filter chips Linear-style: active = pill colorida + dot
 *
 *  bundle.js render hardcoded:
 *   - posit: #22c55e → mapear para var(--signal-buy)  #34d399
 *   - negat: #ef4444 → mapear para var(--signal-sell) #fb7185
 *   - neutr: #f59e0b → mapear para var(--signal-hold) #fbbf24
 *   Como cores estão hardcoded em strings, usamos:
 *     a) Attribute selectors [style*="#22c55e"] (alta especificidade)
 *     b) Override do `kpi-card.up-card / down-card` via classe (CSS já existe)
 *     c) Stripe lateral nas headlines via attribute selector
 *
 *  Importar APÓS ultra-premium.css. Escopo total: #page-sentiment
 * ══════════════════════════════════════════════════════════════════════
 */

/* ────────────────────────────────────────────────────────────────
   1. PAGE HEADER — editorial unificado
   ──────────────────────────────────────────────────────────────── */
#page-sentiment .page-header h2 {
  font-family: var(--font-editorial) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 30px !important;
  letter-spacing: -0.015em !important;
  line-height: 1.05 !important;
  margin: 0 0 4px !important;
  display: flex;
  align-items: center;
  gap: 12px;
}
#page-sentiment .page-header .subtitle {
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  color: var(--text-secondary) !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
}

/* SVG hero icon (substitui emoji 🧠) */
#page-sentiment .sent-hero-icon {
  width: 26px;
  height: 26px;
  stroke: var(--accent);
  stroke-width: 1.6;
  fill: none;
  flex-shrink: 0;
  opacity: 0.92;
}

#page-sentiment .page-help-btn {
  background: rgba(52, 211, 153, 0.08) !important;
  border: 1px solid rgba(52, 211, 153, 0.22) !important;
  color: var(--accent) !important;
}

/* Botões "Exportar CSV/PDF" e "Atualizar" */
#page-sentiment .page-header .btn.btn-secondary {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border-card) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  transition: all 160ms var(--ease-out) !important;
}
#page-sentiment .page-header .btn.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(52, 211, 153, 0.22) !important;
  color: var(--text-primary) !important;
}
#page-sentiment .page-header .btn.btn-primary {
  background: var(--accent) !important;
  color: #0a0a10 !important;
  border: 1px solid transparent !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: filter 160ms var(--ease-out), transform 160ms var(--ease-out) !important;
}
#page-sentiment .page-header .btn.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* ────────────────────────────────────────────────────────────────
   2. KPI STRIP — 4 cards estilo hype (override do bundle render)
   ──────────────────────────────────────────────────────────────── */
#page-sentiment #sentiment-kpi-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
@media (max-width: 1100px) {
  #page-sentiment #sentiment-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  #page-sentiment #sentiment-kpi-strip { grid-template-columns: 1fr !important; }
}

#page-sentiment #sentiment-kpi-strip .kpi-card {
  position: relative;
  background: var(--bg-card-solid) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  overflow: hidden;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out) !important;
  box-shadow: none !important;
  cursor: pointer;
}
#page-sentiment #sentiment-kpi-strip .kpi-card:hover {
  border-color: rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
}

/* Stripe accent top — emerald default; up/down via classes */
#page-sentiment #sentiment-kpi-strip .kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.5;
}
#page-sentiment #sentiment-kpi-strip .kpi-card.up-card::before   { background: var(--signal-buy); }
#page-sentiment #sentiment-kpi-strip .kpi-card.down-card::before { background: var(--signal-sell); }

#page-sentiment #sentiment-kpi-strip .kpi-label {
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-secondary) !important;
  margin-bottom: 8px !important;
}
#page-sentiment #sentiment-kpi-strip .kpi-price {
  font-family: var(--font-mono) !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--text-primary) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}
#page-sentiment #sentiment-kpi-strip .kpi-change {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  margin-top: 8px !important;
  color: var(--text-secondary) !important;
  font-variant-numeric: tabular-nums !important;
}
#page-sentiment #sentiment-kpi-strip .kpi-change.up   { color: var(--signal-buy) !important; }
#page-sentiment #sentiment-kpi-strip .kpi-change.down { color: var(--signal-sell) !important; }

/* Re-mapear cores semânticas hardcoded do bundle (#22c55e/#ef4444/#f59e0b) → tokens */
#page-sentiment #sentiment-kpi-strip .kpi-price[style*="#22c55e"],
#page-sentiment #sentiment-kpi-strip .kpi-change[style*="#22c55e"] {
  color: var(--signal-buy) !important;
}
#page-sentiment #sentiment-kpi-strip .kpi-price[style*="#ef4444"],
#page-sentiment #sentiment-kpi-strip .kpi-change[style*="#ef4444"] {
  color: var(--signal-sell) !important;
}
#page-sentiment #sentiment-kpi-strip .kpi-price[style*="#f59e0b"],
#page-sentiment #sentiment-kpi-strip .kpi-change[style*="#f59e0b"] {
  color: var(--signal-hold) !important;
}

#page-sentiment #sentiment-kpi-strip .lg-kpi-hint {
  font-size: 10px !important;
  color: var(--accent) !important;
  opacity: 0.6;
  letter-spacing: 0.04em;
}

/* ────────────────────────────────────────────────────────────────
   3. PANEL BASE — glassmorphism sólido emerald
   ──────────────────────────────────────────────────────────────── */
#page-sentiment .panel {
  background: var(--bg-card-solid) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 14px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 20px 22px !important;
  transition: border-color 160ms var(--ease-out) !important;
}
#page-sentiment .panel:hover {
  border-color: rgba(52, 211, 153, 0.16) !important;
}
#page-sentiment .panel h3 {
  font-family: var(--font-editorial) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 14px !important;
}

/* ────────────────────────────────────────────────────────────────
   4. GAUGE (Termômetro Global)
   ──────────────────────────────────────────────────────────────── */
#page-sentiment .cards-grid {
  grid-template-columns: 300px 1fr !important;
  gap: 16px !important;
}
@media (max-width: 960px) {
  #page-sentiment .cards-grid {
    grid-template-columns: 1fr !important;
  }
}

#page-sentiment .sent-gauge-panel {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#page-sentiment .sent-gauge-wrap {
  position: relative;
  width: 170px;
  height: 170px;
  margin: 12px 0 8px;
}
#page-sentiment .sent-gauge-wrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
#page-sentiment #gauge-score {
  position: absolute;
  bottom: -8px;
  width: 100%;
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary);
}
#page-sentiment #gauge-label {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-top: 22px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}

/* Override stroke colors hardcoded (#22c55e / #ef4444 / #f59e0b) — JS define inline */
#page-sentiment #gauge-arc[style*="#22c55e"] { stroke: var(--signal-buy) !important; }
#page-sentiment #gauge-arc[style*="#ef4444"] { stroke: var(--signal-sell) !important; }
#page-sentiment #gauge-arc[style*="#f59e0b"] { stroke: var(--signal-hold) !important; }

/* ────────────────────────────────────────────────────────────────
   5. HEATMAP DE ATIVOS — tiles compactos
   ──────────────────────────────────────────────────────────────── */
#page-sentiment #sentiment-heatmap {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 10px !important;
  padding-top: 4px !important;
}
#page-sentiment #sentiment-heatmap > div {
  background: var(--bg-card-solid) !important;
  border-radius: 12px !important;
  padding: 14px 12px !important;
  transition: transform 160ms var(--ease-out),
              border-color 160ms var(--ease-out),
              box-shadow 160ms var(--ease-out) !important;
  cursor: pointer;
}
/* Override hardcoded sentiment borders */
#page-sentiment #sentiment-heatmap > div[style*="border:1px solid #22c55e"] {
  border: 1px solid rgba(52, 211, 153, 0.32) !important;
  background: rgba(52, 211, 153, 0.06) !important;
}
#page-sentiment #sentiment-heatmap > div[style*="border:1px solid #ef4444"] {
  border: 1px solid rgba(251, 113, 133, 0.32) !important;
  background: rgba(251, 113, 133, 0.06) !important;
}
#page-sentiment #sentiment-heatmap > div[style*="border:1px solid #f59e0b"] {
  border: 1px solid rgba(251, 191, 36, 0.32) !important;
  background: rgba(251, 191, 36, 0.06) !important;
}
#page-sentiment #sentiment-heatmap > div:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32) !important;
}
#page-sentiment #sentiment-heatmap > div[style*="border:1px solid #22c55e"]:hover {
  border-color: var(--signal-buy) !important;
}
#page-sentiment #sentiment-heatmap > div[style*="border:1px solid #ef4444"]:hover {
  border-color: var(--signal-sell) !important;
}
#page-sentiment #sentiment-heatmap > div[style*="border:1px solid #f59e0b"]:hover {
  border-color: var(--signal-hold) !important;
}

/* Tipografia interna das tiles */
#page-sentiment #sentiment-heatmap > div > div:first-child {
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em;
  color: var(--text-primary) !important;
}
/* Score grande — re-mapear cor hardcoded */
#page-sentiment #sentiment-heatmap > div > div:nth-child(2) {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  margin-top: 4px;
}
#page-sentiment #sentiment-heatmap > div > div:nth-child(2)[style*="color:#22c55e"] {
  color: var(--signal-buy) !important;
}
#page-sentiment #sentiment-heatmap > div > div:nth-child(2)[style*="color:#ef4444"] {
  color: var(--signal-sell) !important;
}
#page-sentiment #sentiment-heatmap > div > div:nth-child(2)[style*="color:#f59e0b"] {
  color: var(--signal-hold) !important;
}
/* Label sentiment uppercase */
#page-sentiment #sentiment-heatmap > div > div:nth-child(3) {
  font-family: var(--font-ui) !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--text-secondary) !important;
  margin-top: 6px !important;
}
/* Mini progress bar — re-mapear background */
#page-sentiment #sentiment-heatmap > div > div:nth-child(4) {
  margin-top: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 4px !important;
  height: 4px !important;
  overflow: hidden;
}
#page-sentiment #sentiment-heatmap > div > div:nth-child(4) > div[style*="background:#22c55e"] {
  background: var(--signal-buy) !important;
}
#page-sentiment #sentiment-heatmap > div > div:nth-child(4) > div[style*="background:#ef4444"] {
  background: var(--signal-sell) !important;
}
#page-sentiment #sentiment-heatmap > div > div:nth-child(4) > div[style*="background:#f59e0b"] {
  background: var(--signal-hold) !important;
}

/* ────────────────────────────────────────────────────────────────
   6. HEADLINES — stripe esquerda + filtros pill
   ──────────────────────────────────────────────────────────────── */
#page-sentiment .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px !important;
}

/* Filtros: Todas/Positivas/Negativas/Neutras */
#page-sentiment #sentiment-hl-filters {
  display: flex !important;
  gap: 6px !important;
}
#page-sentiment #sentiment-hl-filters .btn {
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-family: var(--font-ui) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  transition: all 160ms var(--ease-out) !important;
}
#page-sentiment #sentiment-hl-filters #hl-f-all {
  background: rgba(52, 211, 153, 0.14) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(52, 211, 153, 0.32) !important;
}
#page-sentiment #sentiment-hl-filters #hl-f-pos {
  background: rgba(52, 211, 153, 0.10) !important;
  color: var(--signal-buy) !important;
  border: 1px solid rgba(52, 211, 153, 0.28) !important;
}
#page-sentiment #sentiment-hl-filters #hl-f-neg {
  background: rgba(251, 113, 133, 0.10) !important;
  color: var(--signal-sell) !important;
  border: 1px solid rgba(251, 113, 133, 0.28) !important;
}
#page-sentiment #sentiment-hl-filters #hl-f-neu {
  background: rgba(251, 191, 36, 0.10) !important;
  color: var(--signal-hold) !important;
  border: 1px solid rgba(251, 191, 36, 0.28) !important;
}
#page-sentiment #sentiment-hl-filters .btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}

/* Lista de manchetes */
#page-sentiment #sentiment-headlines {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 14px !important;
}
#page-sentiment #sentiment-headlines > div {
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border-radius: 10px !important;
  border-left-width: 3px !important;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out) !important;
}
#page-sentiment #sentiment-headlines > div:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  transform: translateX(2px);
}
/* Re-mapear stripe color hardcoded */
#page-sentiment #sentiment-headlines > div[style*="border-left:3px solid #22c55e"] {
  border-left-color: var(--signal-buy) !important;
}
#page-sentiment #sentiment-headlines > div[style*="border-left:3px solid #ef4444"] {
  border-left-color: var(--signal-sell) !important;
}
#page-sentiment #sentiment-headlines > div[style*="border-left:3px solid #f59e0b"] {
  border-left-color: var(--signal-hold) !important;
}

/* Ticker badge à esquerda */
#page-sentiment #sentiment-headlines > div > div:first-child {
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  color: var(--accent) !important;
  min-width: 72px !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: color 160ms var(--ease-out);
}
#page-sentiment #sentiment-headlines > div > div:first-child:hover {
  color: var(--accent-light) !important;
}
#page-sentiment #sentiment-headlines > div > div:last-child {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  color: var(--text-primary) !important;
  line-height: 1.45 !important;
  flex: 1 !important;
}

/* Empty state */
#page-sentiment #sentiment-headlines > div[style*="color:var(--text-muted)"] {
  background: transparent !important;
  border: 1px dashed var(--border-card) !important;
  border-left-width: 1px !important;
  text-align: center;
  font-family: var(--font-ui) !important;
}

/* ────────────────────────────────────────────────────────────────
   7. LIGHT THEME OVERRIDES
   ──────────────────────────────────────────────────────────────── */
:root.theme-light #page-sentiment .panel,
[data-theme="light"] #page-sentiment .panel,
:root.theme-light #page-sentiment #sentiment-kpi-strip .kpi-card,
[data-theme="light"] #page-sentiment #sentiment-kpi-strip .kpi-card,
:root.theme-light #page-sentiment #sentiment-heatmap > div,
[data-theme="light"] #page-sentiment #sentiment-heatmap > div,
:root.theme-light #page-sentiment #sentiment-headlines > div,
[data-theme="light"] #page-sentiment #sentiment-headlines > div {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* ────────────────────────────────────────────────────────────────
   8. RESPONSIVE
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #page-sentiment .page-header h2 {
    font-size: 24px !important;
  }
  #page-sentiment .page-header > div:last-child {
    flex-wrap: wrap;
  }
  #page-sentiment .panel {
    padding: 16px 18px !important;
  }
  #page-sentiment #sentiment-heatmap {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  #page-sentiment #sentiment-hl-filters .btn {
    padding: 4px 10px !important;
    font-size: 10px !important;
  }
}