/* =========================================================
   OPTIGAIN UI – SINGLE SOURCE OF TRUTH FOR THEMING
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  /* LIGHT MODE */
  --og-bg: #F8F7FE;
  --og-surface: #ffffff;
  --og-surface-soft: #f1f5f9;

  --og-primary: #2563eb;
  --og-primary-strong: #1d4ed8;

  --og-text-main: #0f172a;
  --og-text-muted: #6b7280;
  --og-border: #e5e7eb;

  --og-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

/* ---------- DARK MODE ---------- */
html.dark {
  --og-bg: linear-gradient(135deg, #0f172a, #020617);
  --og-surface: #0f172a;
  --og-surface-soft: #1e293b;

  --og-text-main: #f8fafc;
  --og-text-muted: #94a3b8;
  --og-border: #334155;
}

/* ---------- GLOBAL ---------- */
body {
  margin: 0;
  font-family:'inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--og-bg);
  color: var(--og-text-main);
  transition: background 0.3s ease, color 0.3s ease;
}

/* ---------- CARDS ---------- */
.card {
  background: var(--og-surface);
  border: 1px solid var(--og-border);
  border-radius: 14px;
  box-shadow: var(--og-shadow);
}

/* ---------- KPI ---------- */
.results-kpi {
  background: var(--og-surface-soft);
  padding: 18px;
  border-radius: 12px;
  text-align: center;
}

.results-kpi h6 {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--og-text-muted);
}

.results-kpi h5 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--og-text-main);
}

/* ================================
   APP ROOT – SINGLE SOURCE OF TRUTH
   ================================ */

body.og-app {
  background: var(--og-bg-light);
  color: var(--og-text-main);
}

/* Dark mode override */
html.dark body.og-app {
  background: linear-gradient(135deg, #0f172a, #020617);
  color: var(--og-text-main);
}

/* ===== Forecast Explorer SELECT FIX (FINAL) ===== */

.forecast-select {
  background-color: var(--og-surface);
  color: var(--og-text-main);
  border: 1px solid var(--og-border-subtle);
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 160px;

  /* Kill browser weirdness */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* OPTIONS — THIS IS THE MISSING PART */
.forecast-select option {
  color: #0f172a;
  background-color: #ffffff;
}

/* Dark mode */
html.dark .forecast-select {
  background-color: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}

html.dark .forecast-select option {
  background-color: #1e293b;
  color: #f1f5f9;
}

.active-menu {
  background:var(--og-primary);
  color: white;
}

/* Better mobile number input UX */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.intelligence-card{
margin-top:20px;
}

.reveal{
  opacity:0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active{
  opacity: 1;
  transform: translateY(0);
}