/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100vh;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  background: #0a0a0a;
  color: #ffffff;
}

#root { min-height: 100vh; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #f0b429; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #fbbf24; }

/* ── Fixed Sidebar ───────────────────────────────────────────────────────── */
#app-sidebar {
  position: fixed;
  left: 0; top: 0;
  width: 72px; height: 100vh;
  z-index: 100;
  overflow: hidden;
  background: var(--sidebar-bg, #0f0f0f);
  border-right: 1px solid var(--border, #2a2a2a);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 8px;
}

/* ── Fixed Header ────────────────────────────────────────────────────────── */
#app-header {
  position: fixed;
  top: 0; left: 72px; right: 140px;
  height: 64px; z-index: 99;
  background: #000000;
  border-bottom: 2px solid #f0b429;
  display: flex; align-items: center; padding: 0 16px; gap: 12px;
}

/* ── Main Area (fills remaining viewport) ────────────────────────────────── */
#app-main {
  position: fixed;
  top: 64px; left: 72px; right: 140px; bottom: 0;
  display: flex; flex-direction: column;
  background: var(--bg, #0a0a0a);
  overflow: hidden;
}

/* ── NSE Price Panel (fixed right side) ──────────────────────────────────── */
#price-panel {
  position: fixed;
  right: 0; top: 64px;
  width: 140px;
  height: calc(100vh - 64px);
  background: #0f0f0f;
  border-left: 1px solid #1c1c1c;
  z-index: 90;
  padding: 10px 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Auto-scroll track — duplicated list animates upward, pauses on hover */
.price-scroll-track {
  animation: price-scroll-up 55s linear infinite;
  will-change: transform;
}
.price-scroll-track:hover {
  animation-play-state: paused;
}

/* ── Stats Grid (sticky below header, does not scroll) ───────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 12px 20px;
  background: var(--bg, #0a0a0a);
  border-bottom: 1px solid var(--border, #2a2a2a);
  flex-shrink: 0;
}

.stat-card {
  background: var(--card-bg, #141414);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 10px;
  padding: 12px 16px;
}

.stat-number {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
}

.stat-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 6px;
}

/* ── Page Content Area (scrollable) ─────────────────────────────────────── */
#page-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.page-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  padding-bottom: 32px;
}

/* ── Main Grid ───────────────────────────────────────────────────────────── */
.main-cols {
  display: grid;
  grid-template-columns: 60% 1fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  .main-cols { grid-template-columns: 1fr; }
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--card-bg, #141414);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 12px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #2a2a2a);
}

.section-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-muted, #525252);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.dt { width: 100%; border-collapse: collapse; }

.dt th {
  padding: 9px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--border, #2a2a2a);
  color: var(--text-muted, #525252);
  font-family: 'Inter', sans-serif;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card-bg, #141414);
}

.dt td {
  padding: 0 14px;
  border-bottom: 1px solid var(--border-subtle, #1a1a1a);
  font-size: 13px;
  line-height: 1.5;
}

.dt tbody tr {
  height: 46px;
  cursor: pointer;
  transition: background .12s;
}

.dt tbody tr:hover { background: var(--row-hover, rgba(240,180,41,.04)); }
.dt tbody tr.sel {
  border-left: 3px solid var(--gold, #f0b429);
  background: var(--row-selected, rgba(240,180,41,.07));
}
.dt tbody tr.flagged { background: rgba(239,68,68,.04); }

/* Scrollable table wrapper */
.dt-wrap {
  overflow-y: auto;
  max-height: 280px;
}
.dt-wrap-lg { overflow-y: auto; max-height: 380px; }
.dt-wrap-xl { overflow-y: auto; max-height: 480px; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  letter-spacing: .03em;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.btn:disabled { opacity: .5; cursor: default; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tab-btn {
  padding: 12px 20px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: all .15s;
  color: var(--text-muted, #525252);
}
.tab-btn.active {
  border-bottom-color: var(--gold, #f0b429);
  color: var(--gold, #f0b429);
}

/* ── Tab content (scrollable inside alert detail) ────────────────────────── */
.tab-content {
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  padding: 20px;
  padding-bottom: 40px;
}

/* ── Charts ──────────────────────────────────────────────────────────────── */
.chart-container { height: 180px; position: relative; }
.chart-container canvas { max-height: 160px !important; }

/* ── Ticker ──────────────────────────────────────────────────────────────── */
.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.ticker-track {
  display: inline-flex;
  animation: ticker 40s linear infinite;
  width: max-content;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 7px; padding: 0 22px; border-right: 1px solid var(--border, #2a2a2a); }

/* ── Sidebar items ───────────────────────────────────────────────────────── */
.sidebar-item {
  width: 100%;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all .15s;
}
.sidebar-item:hover { background: rgba(240,180,41,.06); }
.sidebar-item.active {
  border-left-color: #f0b429;
  background: rgba(240,180,41,.12);
}

.sidebar-icon { font-size: 22px; line-height: 1; }
.sidebar-label {
  font-size: 9px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #808080;
}
.sidebar-item:hover .sidebar-label { color: #b0b0b0; }
.sidebar-item.active .sidebar-label { color: #f0b429; text-shadow: 0 0 8px #f0b42966; }

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes pulse-dot        { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
@keyframes pulse-badge      { 0%,100%{opacity:1} 50%{opacity:.55} }
@keyframes slide-in         { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:translateX(0)} }
@keyframes fade-up          { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes scale-in         { from{opacity:0;transform:scale(.6)} to{opacity:1;transform:scale(1)} }
@keyframes glow             { 0%,100%{text-shadow:0 0 20px currentColor} 50%{text-shadow:0 0 40px currentColor,0 0 60px currentColor} }
@keyframes ticker           { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes spin             { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes price-scroll-up  { 0%{transform:translateY(0)} 100%{transform:translateY(-50%)} }

.slide-in  { animation: slide-in .25s ease both; }
.fade-up   { animation: fade-up .3s ease both; }
.scale-in  { animation: scale-in .4s cubic-bezier(.34,1.56,.64,1) both; }
.glow-text { animation: glow 2s ease-in-out infinite; }
.pulse     { animation: pulse-badge 2s ease-in-out infinite; }
.spin-anim { animation: spin .8s linear infinite; display: inline-block; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
input, select { font-family: 'Inter', sans-serif; outline: none; }
button { font-family: 'Inter', sans-serif; }

/* ── Page title ──────────────────────────────────────────────────────────── */
.page-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
}

/* ── Light mode overrides ────────────────────────────────────────────────── */
body.light { background: #f8fafc; color: #0f172a; }

/* ── Loading shimmer animation ───────────────────────────────────────────── */
.data-loading {
  position: relative;
  overflow: hidden;
}
.data-loading::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(240,180,41,0.1),
    transparent
  );
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0%  { left: -100% }
  100%{ left: 100%  }
}

/* ── New data pulse ──────────────────────────────────────────────────────── */
.new-data-pulse {
  animation: dataPulse 0.5s ease;
}
@keyframes dataPulse {
  0%  { background: rgba(240,180,41,0.3) }
  100%{ background: transparent          }
}

/* ── Crime scene bar shake animation ─────────────────────────────────────── */
@keyframes shake-bar {
  0%,100%{ transform: translateX(0)   }
  25%     { transform: translateX(-3px)}
  75%     { transform: translateX(3px) }
}