/**
 * IDX ARA Hunter & VPS Live Radar Pro - Style System (Taste Skill Architecture)
 * Typography: Plus Jakarta Sans (Sans) + JetBrains Mono (Tabular Numbers)
 */

@layer base {
  html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
}

/* Enforce strict tabular numbers for financial precision (No Wobble on Stream) */
.font-mono,
.tabular-nums,
table td,
table th,
.kpi-num,
.ticker-price,
.badge-mono {
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "zero" 1 !important;
}

/* Sleek Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Subtle elevation card shadow (Taste Skill) */
.card-shadow {
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
}
.card-shadow-hover:hover {
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
}

/* High-Contrast Badges (WCAG AAA Compliant) */
.badge-tier1 {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  font-weight: 700;
}
.badge-tier2 {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  font-weight: 700;
}
.badge-tier3 {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  font-weight: 700;
}
.badge-watchlist {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #cbd5e1;
  font-weight: 600;
}
.badge-eliminated {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  font-weight: 700;
}

/* Auto-hiding Main Page Header */
#mainPageHeader {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
#mainPageHeader.header-hidden {
  transform: translateY(-100%);
}

/* 2D Freeze Table Styles (Mobile & Desktop) */
.table-freeze-container {
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.table-fit-viewport {
  max-height: calc(100vh - 210px);
}
@media (max-width: 640px) {
  .table-fit-viewport {
    max-height: calc(100dvh - 140px);
  }
}

/* Freeze Column 1 (No) */
.freeze-col-1 {
  position: sticky !important;
  left: 0 !important;
  z-index: 10;
  background-color: #ffffff;
}
/* Freeze Column 2 (Emiten & Perusahaan) */
.freeze-col-2 {
  position: sticky !important;
  left: 36px !important;
  z-index: 10;
  background-color: #ffffff;
  box-shadow: 3px 0 6px -2px rgba(15, 23, 42, 0.08);
  border-right: 1px solid #e2e8f0;
}
@media (min-width: 640px) {
  .freeze-col-2 {
    left: 48px !important;
  }
}

/* Freeze Table Header (thead) */
.freeze-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 20;
  background-color: #f1f5f9 !important;
}

/* Freeze Corner: Intersection of Header & Frozen Columns */
.freeze-corner-1 {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 30 !important;
  background-color: #f1f5f9 !important;
}
.freeze-corner-2 {
  position: sticky !important;
  top: 0 !important;
  left: 36px !important;
  z-index: 30 !important;
  background-color: #f1f5f9 !important;
  box-shadow: 3px 0 6px -2px rgba(15, 23, 42, 0.08);
  border-right: 1px solid #e2e8f0;
}
@media (min-width: 640px) {
  .freeze-corner-2 {
    left: 48px !important;
  }
}

/* Preserve frozen column background on row hover */
tr:hover .freeze-col-1,
tr:hover .freeze-col-2 {
  background-color: #f8fafc !important;
}

/* Real-Time Trade Stream Flash Highlight */
@keyframes flashHaka {
  0% { background-color: rgba(16, 185, 129, 0.28); }
  100% { background-color: transparent; }
}
@keyframes flashHaki {
  0% { background-color: rgba(244, 63, 94, 0.28); }
  100% { background-color: transparent; }
}
@keyframes flashUpdate {
  0% { background-color: rgba(14, 165, 233, 0.25); }
  100% { background-color: transparent; }
}
.flash-haka { animation: flashHaka 1.2s ease-out; }
.flash-haki { animation: flashHaki 1.2s ease-out; }
.flash-update { animation: flashUpdate 1s ease-out; }

/* Legible Text Utilities */
.text-label-caps {
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}