/* ── Robinhood-inspired palette ─────────────────────────────────────── */
:root {
  --rh-green:      #00C805;
  --rh-green-dark: #00a004;
  --rh-green-glow: rgba(0, 200, 5, 0.12);
  --bg-app:        #0A0A0A;
  --bg-card:       #141414;
  --bg-card-2:     #1C1C1C;
  --border-subtle: #252525;
  --text-primary:  #FFFFFF;
  --text-muted:    #7A7A7A;
  --orange:        #FF9500;
  --red:           #FF3B30;
  --blue:          #0A84FF;
  --purple:        #BF5AF2;
}

/* ── Base ─────────────────────────────────────────────────────────── */
body, .container-fluid {
  background-color: var(--bg-app) !important;
  color: var(--text-primary) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif !important;
}

/* ── Cards ────────────────────────────────────────────────────────── */
.card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
}

.card-body { padding: 1.1rem 1.25rem !important; }

/* High-score glow */
.card.glow-green {
  box-shadow: 0 0 24px rgba(0, 200, 5, 0.14), 0 2px 8px rgba(0,0,0,0.4) !important;
}
.card.glow-orange {
  box-shadow: 0 0 18px rgba(255, 149, 0, 0.12), 0 2px 8px rgba(0,0,0,0.4) !important;
}

/* ── Inputs & selects ─────────────────────────────────────────────── */
.form-control, .form-select {
  background-color: var(--bg-card-2) !important;
  border: 1px solid #2e2e2e !important;
  color: var(--text-primary) !important;
  border-radius: 10px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control::placeholder { color: #555 !important; }
.form-control:focus {
  border-color: var(--rh-green) !important;
  box-shadow: 0 0 0 3px var(--rh-green-glow) !important;
  background-color: var(--bg-card-2) !important;
}
.form-select:focus {
  border-color: var(--rh-green) !important;
  box-shadow: 0 0 0 3px var(--rh-green-glow) !important;
}
.form-select option { background-color: #1C1C1C; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--rh-green) !important;
  border-color: var(--rh-green) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  letter-spacing: 0.3px;
  transition: background-color 0.15s, transform 0.1s;
}
.btn-primary:hover  { background-color: var(--rh-green-dark) !important; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-outline-secondary {
  border-color: #333 !important;
  color: #666 !important;
  border-radius: 8px !important;
}
.btn-outline-secondary:hover { background-color: #1f1f1f !important; color: #aaa !important; border-color: #444 !important; }

/* ── Badges ───────────────────────────────────────────────────────── */
.badge.bg-success { background-color: var(--rh-green) !important; color: #000 !important; font-weight: 600; }
.badge.bg-warning { background-color: var(--orange) !important;   color: #000 !important; font-weight: 600; }
.badge.bg-danger  { background-color: var(--red) !important;      color: #fff !important; }
.badge.bg-primary { background-color: var(--blue) !important;     color: #fff !important; }
.badge.bg-dark    { background-color: #222 !important; border: 1px solid #333; }
.badge.bg-secondary { background-color: #2a2a2a !important; color: #888 !important; border: 1px solid #333; }

/* ── Alerts ───────────────────────────────────────────────────────── */
.alert-secondary { background-color: #161616 !important; border-color: #2a2a2a !important; color: #888 !important; border-radius: 12px !important; }

/* ── Labels ───────────────────────────────────────────────────────── */
label.form-label { color: var(--text-muted) !important; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; }

/* ── Login card ───────────────────────────────────────────────────── */
.login-card {
  border: 1px solid #222 !important;
  border-radius: 18px !important;
  background-color: #111 !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6) !important;
}

/* ── Header ───────────────────────────────────────────────────────── */
.dashboard-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* ── Scrollbar ────────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; }
::-webkit-scrollbar-track  { background: #111; }
::-webkit-scrollbar-thumb  { background: #2e2e2e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* ── Dividers ─────────────────────────────────────────────────────── */
.border-secondary { border-color: #252525 !important; }

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .card-body { padding: 0.75rem !important; }

  /* Stack signal card columns vertically */
  .card .row.card-body-row > div[class*="col"] {
    width: 100% !important; max-width: 100% !important;
    flex: 0 0 100% !important; margin-bottom: 0.5rem;
  }

  /* Summary stats: 2 per row */
  .summary-stat-col {
    flex: 0 0 50% !important; max-width: 50% !important;
  }

  /* Filter row: each control full width */
  .filter-col {
    flex: 0 0 100% !important; max-width: 100% !important;
    margin-bottom: 0.35rem;
  }

  /* Landing picks: 1 column */
  .landing-picks-col { flex: 0 0 100% !important; max-width: 100% !important; }

  /* Navbar: wrap links horizontally */
  .navbar-collapse .navbar-nav {
    flex-direction: row !important; flex-wrap: wrap; gap: 4px; padding: 8px 0;
  }
  .navbar-collapse .nav-link { padding: 4px 10px !important; font-size: 0.85rem !important; }

  /* Hide less critical columns on mobile */
  .hide-mobile { display: none !important; }

  h5.fw-bold { font-size: 1rem !important; }
}