/* ============================================================
   Tijd voor Aandelen — redesign.css
   Alleen additief. Raakt geen bestaande bestanden aan.
   ============================================================ */

/* ── FONTS ─────────────────────────────────────────────────── */

/* Logo en titels */
.logo,
.app-title,
h1, h2 {
  font-family: 'Syne', sans-serif !important;
}

/* Alle koersen, percentages, tickers en getallen */
.price,
.change,
.fair-value,
.upside,
.buy-price,
.ebit,
.roic,
[class*="price"],
[class*="koers"],
[class*="value"],
[class*="upside"],
td:nth-child(2),
td:nth-child(3),
td:nth-child(4),
td:nth-child(5),
td:nth-child(6) {
  font-family: 'JetBrains Mono', monospace !important;
}


/* ── KLEURENSCHEMA ──────────────────────────────────────────── */

:root {
  --tva-bg0:      #0A0C0F;
  --tva-bg1:      #111318;
  --tva-bg2:      #181B21;
  --tva-bg3:      #1F232C;
  --tva-border:   #232830;
  --tva-border2:  #2E3440;
  --tva-text1:    #e2e8f0;
  --tva-text2:    #8C8F99;
  --tva-text3:    #52555F;
  --tva-gold:     #C8A45A;
  --tva-green:    #3EC97A;
  --tva-red:      #E05555;
  --tva-blue:     #5B9CF6;
  --tva-amber:    #F0A030;
}

body {
  /* background-color verwijderd — originele body-achtergrond (#0a0c0f) uit ValuationPro.html blijft actief */
  color: var(--tva-text1) !important;
}

/* Achtergrond overrides verwijderd — originele donkerblauwe kleuren
   uit ValuationPro.html (:root CSS vars) zijn leidend.
   --tva-bg1 (#111318) en --tva-bg2 (#181B21) waren warmer dan
   de originele --bg-card (#0f1117) en --bg-surface (#0d1017),
   wat de bruine tint veroorzaakte. */

/* Alle tekst in tabel */
td, th {
  color: var(--tva-text1) !important;
  border-color: var(--tva-border) !important;
}

/* Secundaire tekst (labels, subtitels) */
label,
.subtitle,
.meta,
[class*="label"],
[class*="subtitle"],
[class*="meta"] {
  color: var(--tva-text2) !important;
}


/* ── TABEL HOVER ────────────────────────────────────────────── */

tbody tr {
  transition: background-color 0.12s ease, transform 0.1s ease !important;
  cursor: pointer !important;
}

tbody tr:hover {
  background-color: rgba(200, 164, 90, 0.05) !important;
  transform: translateX(2px) !important;
}


/* ── SIGNAAL BADGES ─────────────────────────────────────────── */

/*
  De badges worden gestyled op basis van hun tekst-inhoud via
  :has() en attribuut-selectors. Werkt zonder HTML-aanpassingen.
  Als de bestaande badges een eigen klasse hebben, worden die
  hieronder ook meegenomen.
*/

/* Reset bestaande badge-stijl */
[class*="signal"],
[class*="signaal"],
[class*="badge"],
.koopzone, .neutraal, .overgewaardeerd {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  font-family: 'Inter', sans-serif !important;
  border-width: 1px !important;
  border-style: solid !important;
}

/* Koopzone / Kopen — groen */
[class*="signal-buy"],
[class*="koopzone"],
[class*="buy"],
.signal-buy {
  background: rgba(62, 201, 122, 0.12) !important;
  color: var(--tva-green) !important;
  border-color: rgba(62, 201, 122, 0.25) !important;
}

/* Neutraal / Houden — blauw */
[class*="signal-hold"],
[class*="neutraal"],
[class*="hold"],
.signal-hold {
  background: rgba(91, 156, 246, 0.10) !important;
  color: var(--tva-blue) !important;
  border-color: rgba(91, 156, 246, 0.22) !important;
}

/* Overgewaardeerd — rood */
[class*="signal-over"],
[class*="overgewaardeerd"],
[class*="over"],
.signal-over {
  background: rgba(224, 85, 85, 0.10) !important;
  color: var(--tva-red) !important;
  border-color: rgba(224, 85, 85, 0.22) !important;
}

/* Wacht / Watch — amber */
[class*="signal-watch"],
[class*="watch"],
.signal-watch {
  background: rgba(240, 160, 48, 0.10) !important;
  color: var(--tva-amber) !important;
  border-color: rgba(240, 160, 48, 0.22) !important;
}

/* Bolletje vóór elke badge */
[class*="signal"]::before,
[class*="signaal"]::before,
[class*="badge"]::before,
.koopzone::before,
.neutraal::before,
.overgewaardeerd::before {
  content: '●' !important;
  font-size: 6px !important;
  line-height: 1 !important;
}


/* ── LEGE STAAT (lege watchlist) ────────────────────────────── */

/*
  Stijl de container die getoond wordt als de watchlist leeg is.
  Pas de selector aan op de werkelijke klasse/id in jouw HTML.
  Veel voorkomende namen zijn hieronder opgenomen.
*/

.empty-state,
.empty,
[class*="empty"],
[class*="leeg"],
[class*="no-items"],
[class*="no-results"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 64px 24px !important;
  text-align: center !important;
  color: var(--tva-text3) !important;
}

.empty-state *,
[class*="empty"] *,
[class*="leeg"] * {
  color: var(--tva-text3) !important;
}

/* Groot icoon / emoji in de lege staat */
.empty-state svg,
.empty-state img,
[class*="empty"] svg,
[class*="empty"] img {
  opacity: 0.25 !important;
  margin-bottom: 16px !important;
}

/* Titel van de lege staat */
.empty-state h2,
.empty-state h3,
.empty-state p:first-of-type,
[class*="empty"] h2,
[class*="empty"] h3 {
  font-family: 'Syne', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--tva-text2) !important;
  margin-bottom: 6px !important;
}

/* Subtitel van de lege staat */
.empty-state p,
[class*="empty"] p {
  font-size: 12px !important;
  color: var(--tva-text3) !important;
  line-height: 1.55 !important;
  max-width: 280px !important;
}


/* ── SCROLLBAR ──────────────────────────────────────────────── */

* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--tva-border2) transparent !important;
}

*::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
}

*::-webkit-scrollbar-track {
  background: transparent !important;
}

*::-webkit-scrollbar-thumb {
  background: var(--tva-border2) !important;
  border-radius: 2px !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--tva-text3) !important;
}


/* ── POSITIEVE / NEGATIEVE KLEUREN ──────────────────────────── */

/* Zorg dat groene en rode tekst consistent is */
[class*="positive"],
[class*="green"],
[class*="up"],
[class*="stijging"] {
  color: var(--tva-green) !important;
}

[class*="negative"],
[class*="red"],
[class*="down"],
[class*="daling"] {
  color: var(--tva-red) !important;
}

/* Ticker standaard verborgen — JS zet hem aan op zoek-tab */
.ticker-strip.ticker-hidden {
  display: none !important;
}


/* ============================================================
   Licht / Donker modus — redesign.css
   ============================================================ */

/* ── TOGGLE KNOP STIJL ───────────────────────────────────────── */

#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border, #232830);
  background: transparent;
  color: var(--text-2, #8C8F99);
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 8px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

#theme-toggle:hover {
  border-color: rgba(200, 164, 90, 0.40);
  color: #C8A45A;
  background: rgba(200, 164, 90, 0.07);
}


/* ── LICHTE MODUS KLEUREN ────────────────────────────────────── */
/* Geactiveerd via class="light-mode" op <body> */

body.light-mode {
  --bg:        #F5F4F0;
  --bg-1:      #FFFFFF;
  --bg-2:      #F0EEE9;
  --bg-3:      #E8E5DF;
  --border:    #DDDBD4;
  --border-2:  #CECBC2;
  --text-1:    #1A1C22;
  --text-2:    #5A5D68;
  --text-3:    #9A9DA8;
  --gold:      #A07830;
  --green:     #1E8A4A;
  --red:       #C0392B;
  --blue:      #2563B0;
  --amber:     #B45309;
}

/* Achtergrond */
body.light-mode,
body.light-mode .app-wrapper,
body.light-mode #scr-dashboard,
body.light-mode #scr-detail,
body.light-mode #scr-portfolio {
  background-color: var(--bg) !important;
  color: var(--text-1) !important;
}

/* Nav en tickerbalk */
body.light-mode #global-nav,
body.light-mode .ticker-strip {
  background-color: var(--bg-1) !important;
  border-color: var(--border) !important;
}

/* Sidebar, panels, kaarten */
body.light-mode .dash-hero,
body.light-mode .dash-section-hdr,
body.light-mode [class*="card"],
body.light-mode [class*="panel"],
body.light-mode [class*="sidebar"] {
  background-color: var(--bg-1) !important;
  border-color: var(--border) !important;
}

/* Tabel */
body.light-mode table,
body.light-mode tbody,
body.light-mode .dash-table-wrap,
body.light-mode [class*="table-wrap"] {
  background-color: var(--bg-2) !important;
}

body.light-mode thead tr {
  border-color: var(--border) !important;
  background-color: var(--bg-1) !important;
}

body.light-mode thead td,
body.light-mode thead th {
  color: var(--text-3) !important;
  border-color: var(--border) !important;
}

body.light-mode tbody tr {
  border-color: var(--border) !important;
}

body.light-mode tbody tr:hover {
  background-color: rgba(160, 120, 48, 0.04) !important;
}

body.light-mode td {
  color: var(--text-1) !important;
  border-color: var(--border) !important;
}

/* Tekst */
body.light-mode,
body.light-mode p,
body.light-mode span,
body.light-mode label,
body.light-mode h1,
body.light-mode h2,
body.light-mode h3 {
  color: var(--text-1) !important;
}

body.light-mode [class*="subtitle"],
body.light-mode [class*="meta"],
body.light-mode [class*="label"],
body.light-mode .lang-toggle-btn {
  color: var(--text-2) !important;
}

/* Nav knoppen */
body.light-mode .main-nav-btn {
  color: var(--text-2) !important;
}

body.light-mode .main-nav-btn.active,
body.light-mode .main-nav-btn:hover {
  color: var(--text-1) !important;
}

/* Filter chips */
body.light-mode .filter-bar button,
body.light-mode [class*="filter-chip"],
body.light-mode [class*="filter-btn"] {
  background-color: var(--bg-1) !important;
  border-color: var(--border-2) !important;
  color: var(--text-2) !important;
}

body.light-mode .filter-bar button.active,
body.light-mode [class*="filter-chip"].active {
  background-color: rgba(160, 120, 48, 0.10) !important;
  border-color: rgba(160, 120, 48, 0.30) !important;
  color: var(--gold) !important;
}

/* Toolbar knoppen */
body.light-mode [class*="toolbar"],
body.light-mode [class*="tbl-btn"],
body.light-mode button[class*="btn-secondary"] {
  background-color: var(--bg-1) !important;
  border-color: var(--border-2) !important;
  color: var(--text-2) !important;
}

/* Dash hero stat-kaarten */
body.light-mode .dash-hero > * {
  background-color: var(--bg-1) !important;
  border-color: var(--border) !important;
}

/* Modals */
body.light-mode .modal-overlay {
  background: rgba(0, 0, 0, 0.45) !important;
}

body.light-mode [class*="modal-box"],
body.light-mode [class*="modal-content"],
body.light-mode #modal-add,
body.light-mode #modal-position {
  background-color: var(--bg-1) !important;
  border-color: var(--border) !important;
}

/* Inputs */
body.light-mode input,
body.light-mode select,
body.light-mode textarea {
  background-color: var(--bg-2) !important;
  border-color: var(--border-2) !important;
  color: var(--text-1) !important;
}

body.light-mode input::placeholder {
  color: var(--text-3) !important;
}

/* Positief / negatief */
body.light-mode .up,
body.light-mode [class*="positive"],
body.light-mode [class*="green"] {
  color: var(--green) !important;
}

body.light-mode .dn,
body.light-mode [class*="negative"],
body.light-mode [class*="red"] {
  color: var(--red) !important;
}

/* Gold accent */
body.light-mode [class*="gold"],
body.light-mode .dash-logo span,
body.light-mode .ticker-sym {
  color: var(--gold) !important;
}

/* Ticker items */
body.light-mode .ticker-item {
  border-color: var(--border) !important;
}

body.light-mode .ticker-price {
  color: var(--text-3) !important;
}

/* Lege staat */
body.light-mode .empty-state,
body.light-mode [id="dash-empty"] {
  background-color: var(--bg) !important;
}

body.light-mode .empty-state::before {
  background-image:
    linear-gradient(rgba(160, 120, 48, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 120, 48, 0.06) 1px, transparent 1px) !important;
}

/* Scrollbar */
body.light-mode * {
  scrollbar-color: var(--border-2) transparent !important;
}

body.light-mode *::-webkit-scrollbar-thumb {
  background: var(--border-2) !important;
}