/* ==========================================================================
   Open Options — Custom CSS supplement to Tailwind CDN
   Dark financial terminal theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base / resets
   -------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar (dark theme) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0f172a; /* slate-900 */
}
::-webkit-scrollbar-thumb {
  background: #334155; /* slate-600 */
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569; /* slate-500 */
}

/* --------------------------------------------------------------------------
   Card component
   -------------------------------------------------------------------------- */

.card {
  background-color: #1e293b; /* slate-800 */
  border: 1px solid rgba(51, 65, 85, 0.8); /* slate-700 */
  border-radius: 1rem; /* rounded-2xl */
  padding: 1.25rem;
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #e2e8f0; /* slate-200 */
  line-height: 1.3;
}

.card-subtitle {
  font-size: 0.75rem;
  color: #64748b; /* slate-500 */
  margin-top: 0.125rem;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #94a3b8; /* slate-400 */
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
  background-color: rgba(51, 65, 85, 0.5);
  color: #e2e8f0; /* slate-200 */
}

.nav-link-active,
.nav-link.nav-link-active {
  background-color: rgba(16, 185, 129, 0.12);
  color: #34d399; /* emerald-400 */
}

.nav-link-premium {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link-premium:hover {
  background-color: rgba(245, 158, 11, 0.1);
  color: #fbbf24; /* amber-400 */
}

/* --------------------------------------------------------------------------
   Signal badge + pulse animation
   -------------------------------------------------------------------------- */

.signal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  border-radius: 0.625rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  overflow: visible;
}

.signal-bullish {
  background-color: rgba(16, 185, 129, 0.15);
  border: 1.5px solid rgba(16, 185, 129, 0.5);
  color: #34d399; /* emerald-400 */
  animation: pulse-emerald 2.5s ease-in-out infinite;
}

.signal-bearish {
  background-color: rgba(239, 68, 68, 0.12);
  border: 1.5px solid rgba(239, 68, 68, 0.45);
  color: #f87171; /* red-400 */
  animation: pulse-red 2.5s ease-in-out infinite;
}

.signal-neutral {
  background-color: rgba(234, 179, 8, 0.12);
  border: 1.5px solid rgba(234, 179, 8, 0.4);
  color: #facc15; /* yellow-400 */
}

@keyframes pulse-emerald {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12);
  }
}

@keyframes pulse-red {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.12);
  }
}

/* --------------------------------------------------------------------------
   Premium lock / blur overlay
   -------------------------------------------------------------------------- */

.premium-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(2px);
  border-radius: 1rem;
  z-index: 10;
}

.premium-overlay-inner {
  text-align: center;
  padding: 1.5rem 2rem;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 1rem;
}

/* --------------------------------------------------------------------------
   Loading skeleton styles
   -------------------------------------------------------------------------- */

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(51, 65, 85, 0.5) 25%,
    rgba(71, 85, 105, 0.4) 50%,
    rgba(51, 65, 85, 0.5) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 0.375rem;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 0.875rem;
  margin-bottom: 0.5rem;
}

.skeleton-text-sm {
  height: 0.75rem;
  margin-bottom: 0.375rem;
}

.skeleton-title {
  height: 1.5rem;
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  color: #64748b; /* slate-500 */
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Chart containers
   -------------------------------------------------------------------------- */

.chart-container {
  position: relative;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Spinning animation (for refresh button)
   -------------------------------------------------------------------------- */

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* --------------------------------------------------------------------------
   Misc utilities not in Tailwind CDN default config
   -------------------------------------------------------------------------- */

.font-tabular {
  font-variant-numeric: tabular-nums;
}

/* Subtle glow effects for premium elements */
.glow-amber {
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
}

.glow-emerald {
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.12);
}

/* Number badge */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}