/* ============================================================
   SENTIO — Dashboard Page Styles (Tabbed Layout)
   ============================================================ */

/* ── REC BAR ── */
#rec-bar {
  background:    var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding:       7px 20px;
  display:       flex;
  align-items:   center;
  gap:           12px;
  font-family:   var(--font-mono);
  font-size:     11px;
  flex-wrap:     wrap;
}

.rec-label {
  color:          var(--text-dim);
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space:    nowrap;
}

.rec-text      { color: var(--accent-amber); font-weight: 500; flex: 1; }
.rec-divider   { width: 1px; height: 16px; background: var(--border); flex-shrink: 0; }

.rec-trap-level   { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.trap-level-badge {
  font-size:      9px;
  font-weight:    600;
  padding:        2px 8px;
  border-radius:  3px;
  letter-spacing: 1px;
  font-family:    var(--font-mono);
}

.trap-LOW      { background: var(--green-dim);  color: var(--accent-green); }
.trap-MODERATE { background: var(--amber-dim);  color: var(--accent-amber); }
.trap-ELEVATED { background: var(--amber-dim);  color: var(--accent-amber); }
.trap-HIGH     { background: var(--red-dim);    color: var(--accent-red);   }
.trap-EXTREME  { background: var(--red-dim);    color: var(--accent-red); animation: blink 0.8s step-end infinite; }

/* ── TOPBAR EXTRAS ── */
.topbar-center {
  display:     flex;
  align-items: center;
  gap:         20px;
  flex:        1;
  justify-content: center;
}

.market-pill {
  display:      flex;
  align-items:  center;
  gap:          6px;
  padding:      4px 12px;
  border-radius:20px;
  font-family:  var(--font-mono);
  font-size:    11px;
  font-weight:  600;
  letter-spacing:1px;
  border:       1px solid;
}

.market-pill.STRONGLY_BULLISH,
.market-pill.BULLISH          { background: var(--green-dim); border-color: var(--accent-green); color: var(--accent-green); }
.market-pill.NEUTRAL          { background: var(--blue-dim);  border-color: var(--accent-blue);  color: var(--accent-blue);  }
.market-pill.BEARISH,
.market-pill.STRONGLY_BEARISH { background: var(--red-dim);   border-color: var(--accent-red);   color: var(--accent-red);   }

.pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.5s ease-in-out infinite; }

.topbar-stat        { display: flex; flex-direction: column; align-items: center; }
.topbar-stat-label  { font-size: 9px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; font-family: var(--font-mono); }
.topbar-stat-value  { font-size: 13px; font-family: var(--font-mono); font-weight: 500; }

.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.last-update  { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.status-dot   { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); animation: pulse 2s ease-in-out infinite; }
.status-dot.error { background: var(--accent-red); animation: none; }

/* ── TAB BAR ── */
#tab-bar {
  display:       flex;
  align-items:   stretch;
  gap:           0;
  background:    var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding:       0 16px;
  overflow-x:    auto;
  scrollbar-width: none;
}

#tab-bar::-webkit-scrollbar { display: none; }

.dash-tab {
  display:        flex;
  align-items:    center;
  gap:            7px;
  padding:        10px 18px;
  font-family:    var(--font-mono);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--text-dim);
  background:     transparent;
  border:         none;
  border-bottom:  2px solid transparent;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     all 0.15s;
  margin-bottom:  -1px;
}

.dash-tab:hover { color: var(--text-secondary); }

.dash-tab.active {
  color:        var(--accent-blue);
  border-color: var(--accent-blue);
}

.tab-icon { font-size: 13px; }

.tab-badge {
  font-size:      9px;
  padding:        1px 6px;
  border-radius:  3px;
  background:     var(--bg-card);
  color:          var(--text-dim);
  border:         1px solid var(--border);
  letter-spacing: 0;
}

/* ── MAIN CONTAINER ── */
#main {
  min-height: calc(100vh - var(--topbar-height) - var(--bottomnav-height) - 36px - 41px);
  background: var(--bg-base);
}

/* ── TAB PANELS ── */
.tab-panel {
  display: none;
  padding: 16px;
  animation: fadeIn 0.18s ease;
}

.tab-panel.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── OVERVIEW GRID ── */
.overview-grid {
  display:               grid;
  grid-template-columns: 320px 1fr;
  gap:                   12px;
  align-items:           start;
}

/* ── TWO-COL GRID (sectors / alerts) ── */
.two-col-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  align-items:           start;
}

/* ── FULL PANEL (opportunities) ── */
.tab-full-panel {
  width: 100%;
  overflow-x: auto;
}

/* ── QUICK STATS ── */
.quickstats-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  background:            var(--border);
  border-bottom:         1px solid var(--border);
}

.qs-card {
  background: var(--bg-panel);
  padding:    16px;
}

.qs-label {
  font-family:    var(--font-mono);
  font-size:      9px;
  color:          var(--text-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom:  6px;
}

.qs-value {
  font-family: var(--font-mono);
  font-size:   20px;
  font-weight: 600;
}

/* ── BRAIN PANEL ── */
.brain-score-ring {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        20px 16px 12px;
  gap:            8px;
}

.score-ring-wrap {
  position: relative;
  width:    140px;
  height:   140px;
}

.score-ring-value {
  position:  absolute;
  top: 50%;  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.score-ring-number {
  font-size:   42px;
  font-weight: 700;
  font-family: var(--font-display);
  line-height: 1;
  letter-spacing: 2px;
}

.score-ring-label {
  font-family:    var(--font-mono);
  font-size:      9px;
  color:          var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top:     4px;
}

.brain-state {
  font-family:    var(--font-display);
  font-size:      16px;
  letter-spacing: 4px;
  font-weight:    600;
}

.brain-state.STRONGLY_BULLISH,
.brain-state.BULLISH  { color: var(--accent-green); }
.brain-state.NEUTRAL  { color: var(--accent-blue);  }
.brain-state.BEARISH,
.brain-state.STRONGLY_BEARISH { color: var(--accent-red); }

.brain-trust {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-dim);
}

.brain-plain {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-secondary);
  text-align:  center;
  padding:     0 12px;
}

.brain-stats {
  display:         flex;
  justify-content: space-around;
  padding:         12px 16px;
  border-top:      1px solid var(--border);
  border-bottom:   1px solid var(--border);
  width: 100%;
}

.brain-stat       { text-align: center; }
.brain-stat-value { font-family: var(--font-mono); font-size: 18px; font-weight: 600; }
.brain-stat-label { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); letter-spacing: 1px; margin-top: 2px; }

.brain-rows { width: 100%; }

.brain-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         7px 16px;
  border-bottom:   1px solid var(--border);
}

.brain-row-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; }
.brain-row-value { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); font-weight: 500; }

.brain-guidance {
  padding:    16px;
  text-align: center;
  background: var(--bg-card);
  width: 100%;
}

.brain-guidance-action {
  font-family:    var(--font-display);
  font-size:      13px;
  letter-spacing: 3px;
  color:          var(--accent-amber);
  margin-bottom:  6px;
}

.brain-guidance-msg {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-secondary);
  line-height: 1.5;
}

/* ── SECTOR HEATMAP ── */
.heatmap-grid {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   4px;
  padding:               12px;
}

.heatmap-cell {
  padding:      10px 6px;
  border-radius:4px;
  text-align:   center;
  cursor:       pointer;
  transition:   opacity 0.15s;
}

.heatmap-cell:hover { opacity: 0.8; }

.heatmap-name  { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.heatmap-score { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }

.heatmap-rotation {
  padding:    8px 12px;
  border-top: 1px solid var(--border);
  font-family:var(--font-mono);
  font-size:  10px;
  display:    flex;
  gap:        8px;
  color:      var(--text-dim);
}

.rotation-label { color: var(--text-dim); letter-spacing: 1.5px; text-transform: uppercase; font-size: 9px; }

/* ── LIQUIDITY ── */
#liquidity-body { padding: 12px; }

.liq-item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         8px 12px;
  border-bottom:   1px solid var(--border);
}

.liq-symbol  { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.liq-value   { font-family: var(--font-mono); font-size: 11px; }
.liq-bar-wrap{ flex: 1; margin: 0 10px; height: 3px; background: var(--bg-card); border-radius: 2px; }
.liq-bar     { height: 100%; border-radius: 2px; background: var(--accent-purple); }

/* ── ALERTS ── */
#alerts-body { padding: 8px 0; overflow-y: auto; max-height: 600px; }

.alert-item {
  padding:       10px 16px;
  border-bottom: 1px solid var(--border);
  display:       flex;
  gap:           10px;
  align-items:   flex-start;
  cursor:        pointer;
  transition:    background 0.1s;
}

.alert-item:hover { background: var(--bg-hover); }

.alert-type-badge {
  font-family:    var(--font-mono);
  font-size:      8px;
  font-weight:    600;
  letter-spacing: 1.5px;
  padding:        2px 6px;
  border-radius:  3px;
  flex-shrink:    0;
  margin-top:     2px;
}

.alert-bull  { background: var(--green-dim); color: var(--accent-green); }
.alert-bear  { background: var(--red-dim);   color: var(--accent-red);   }
.alert-trap  { background: var(--amber-dim); color: var(--accent-amber); }

.alert-body  { flex: 1; min-width: 0; }
.alert-title { font-family: var(--font-mono); font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.alert-desc  { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert-time  { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); flex-shrink: 0; }

/* ── ANOMALY FEED ── */
.anomaly-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            var(--border);
  min-height:            200px;
}

.anomaly-col { background: var(--bg-panel); padding: 12px; }

.anomaly-col-header {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  10px;
  padding-bottom: 8px;
  border-bottom:  1px solid var(--border);
}

.anomaly-item {
  padding:       6px 0;
  border-bottom: 1px solid var(--border);
  cursor:        pointer;
}

.anomaly-item:hover { background: var(--bg-hover); }
.anomaly-item:last-child { border-bottom: none; }

.anomaly-symbol { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent-amber); }
.anomaly-detail { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 2px; }

/* ── COMMON ── */
.empty-state {
  text-align:  center;
  padding:     24px;
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--text-dim);
}

.text-green  { color: var(--accent-green);  }
.text-red    { color: var(--accent-red);    }
.text-amber  { color: var(--accent-amber);  }
.text-blue   { color: var(--accent-blue);   }
.text-teal   { color: var(--accent-teal);   }
.text-purple { color: var(--accent-purple); }

/* ── MOBILE ── */
@media (max-width: 768px) {
  .overview-grid  { grid-template-columns: 1fr; }
  .two-col-grid   { grid-template-columns: 1fr; }
  .anomaly-grid   { grid-template-columns: 1fr; }
  .heatmap-grid   { grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 8px; }

  .dash-tab       { padding: 10px 12px; font-size: 10px; }
  .tab-icon       { display: none; }

  .score-ring-wrap  { width: 120px; height: 120px; }
  .score-ring-number{ font-size: 28px; }

  .topbar-center  { flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  #tb-adv-dec     { display: none; }

  .sentio-table th:nth-child(6),
  .sentio-table td:nth-child(6),
  .sentio-table th:nth-child(7),
  .sentio-table td:nth-child(7) { display: none; }
}

/* ── BLINK ANIMATION ── */
@keyframes blink {
  50% { opacity: 0; }
}