/* ============================================================
   Lege staat watchlist / portfolio — empty-state.css
   Alleen additief. Raakt geen bestaande bestanden aan.

   Selectors gevonden via HTML-analyse:
     .empty-state  → watchlist (ingelogd, geen items)  #dash-empty
     .es-wrap      → login-vereist & portfolio lege staat
   ============================================================ */


/* ── HOOFDCONTAINER ─────────────────────────────────────────── */

.empty-state,
.es-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 420px !important;
  padding: 56px 32px !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
}

/* Subtiele goud-grid als achtergrondtextuur */
.empty-state::before,
.es-wrap::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(200, 164, 90, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 164, 90, 0.04) 1px, transparent 1px) !important;
  background-size: 52px 52px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Gouden radiale glow achter het icoon */
.empty-state::after,
.es-wrap::after {
  content: '' !important;
  position: absolute !important;
  top: 35% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 340px !important;
  height: 340px !important;
  background: radial-gradient(
    circle,
    rgba(200, 164, 90, 0.07) 0%,
    transparent 68%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Alle directe kinderen boven de pseudo-elementen */
.empty-state > *,
.es-wrap > * {
  position: relative !important;
  z-index: 1 !important;
}


/* ── ICOON (.es-icon = div met emoji) ────────────────────────── */

.empty-state .es-icon,
.es-wrap .es-icon {
  width: 72px !important;
  height: 72px !important;
  font-size: 32px !important;
  padding: 0 !important;
  background: #111318 !important;
  border: 1px solid #1e2330 !important;
  border-radius: 16px !important;
  margin-bottom: 28px !important;
  box-shadow:
    0 0 0 1px rgba(200, 164, 90, 0.08),
    0 0 32px rgba(200, 164, 90, 0.12) !important;
  animation: es-float 4s ease-in-out infinite !important;
}

@keyframes es-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* img of svg in een lege staat (fallback voor toekomstige varianten) */
.empty-state img,
.empty-state > svg:first-of-type,
.es-wrap img,
.es-wrap > svg:first-of-type {
  width: 72px !important;
  height: 72px !important;
  padding: 14px !important;
  background: #111318 !important;
  border: 1px solid #1e2330 !important;
  border-radius: 16px !important;
  margin-bottom: 28px !important;
  box-shadow:
    0 0 0 1px rgba(200, 164, 90, 0.08),
    0 0 32px rgba(200, 164, 90, 0.12) !important;
  animation: es-float 4s ease-in-out infinite !important;
}


/* ── TITEL (.es-title) ──────────────────────────────────────── */

.empty-state .es-title,
.es-wrap .es-title,
.empty-state h2,
.empty-state h3,
.es-wrap h2,
.es-wrap h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #E8E4DC !important;
  letter-spacing: 0.2px !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important;
}


/* ── SUBTITEL (.es-sub) ─────────────────────────────────────── */

.empty-state .es-sub,
.es-wrap .es-sub,
.empty-state p,
.es-wrap p {
  font-size: 13px !important;
  color: #52555F !important;
  line-height: 1.65 !important;
  max-width: 300px !important;
  margin-bottom: 32px !important;
}


/* ── CTA KNOP (.es-btn) ─────────────────────────────────────── */

.empty-state .es-btn,
.es-wrap .es-btn {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  padding: 12px 32px !important;
  border-radius: 5px !important;
  background: #C8A45A !important;
  color: #0A0C0F !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(200, 164, 90, 0.20) !important;
  transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s !important;
}

.empty-state .es-btn:hover,
.es-wrap .es-btn:hover {
  opacity: 0.88 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(200, 164, 90, 0.28) !important;
}


/* ── POPULAIRE TICKERS / CHIPS (.e-chip, .empty-chips) ──────── */

.empty-state .empty-chips,
.es-wrap .empty-chips,
.empty-state [class*="popular"],
.es-wrap [class*="popular"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  justify-content: center !important;
  margin-bottom: 28px !important;
}

.empty-state .e-chip,
.es-wrap .e-chip,
.empty-state [class*="popular"] button,
.es-wrap [class*="popular"] button {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 5px 13px !important;
  border-radius: 4px !important;
  border: 1px solid #232830 !important;
  background: #111318 !important;
  color: #8C8F99 !important;
  cursor: pointer !important;
  transition: border-color 0.15s, color 0.15s, background 0.15s !important;
}

.empty-state .e-chip:hover,
.es-wrap .e-chip:hover,
.empty-state [class*="popular"] button:hover,
.es-wrap [class*="popular"] button:hover {
  border-color: rgba(200, 164, 90, 0.40) !important;
  color: #C8A45A !important;
  background: rgba(200, 164, 90, 0.07) !important;
}


/* ── SCHEIDINGSLIJN ─────────────────────────────────────────── */

.empty-state hr,
.es-wrap hr,
.empty-state [class*="divider"],
.es-wrap [class*="divider"] {
  width: 100% !important;
  max-width: 380px !important;
  height: 1px !important;
  background: #1a1d24 !important;
  border: none !important;
  margin: 32px 0 !important;
}


/* ── STATS RIJ (indien aanwezig) ────────────────────────────── */

.empty-state [class*="features"],
.empty-state [class*="stats"],
.es-wrap [class*="features"],
.es-wrap [class*="stats"] {
  display: flex !important;
  gap: 40px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

.empty-state [class*="features"] > *,
.empty-state [class*="stats"] > *,
.es-wrap [class*="features"] > *,
.es-wrap [class*="stats"] > * {
  text-align: center !important;
}

.empty-state [class*="features"] [class*="value"],
.empty-state [class*="stats"] [class*="value"],
.es-wrap [class*="features"] [class*="value"],
.es-wrap [class*="stats"] [class*="value"] {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #C8A45A !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.empty-state [class*="features"] [class*="label"],
.empty-state [class*="stats"] [class*="label"],
.es-wrap [class*="features"] [class*="label"],
.es-wrap [class*="stats"] [class*="label"] {
  font-size: 9px !important;
  color: #52555F !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
}