* { box-sizing: border-box; }
body {
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0f1115;
  color: #e6e8eb;
  margin: 0;
  padding: 24px;
}
header h1 {
  font-size: 22px;
  margin-bottom: 24px;
}
.badge {
  font-size: 12px;
  background: #1f6feb22;
  color: #58a6ff;
  padding: 2px 8px;
  border-radius: 10px;
  vertical-align: middle;
}
.card {
  background: #161a21;
  border: 1px solid #262b33;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  max-width: 720px;
}
.card h2 {
  font-size: 16px;
  margin: 0 0 14px 0;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.form-col {
  display: flex;
  flex-direction: column;
}
input.wide {
  flex: 1;
  min-width: 260px;
}
.hint {
  color: #8b949e;
  font-size: 13px;
  margin-top: 10px;
}
.hint code {
  background: #0f1115;
  padding: 2px 5px;
  border-radius: 4px;
}
input, select {
  background: #0f1115;
  border: 1px solid #333944;
  color: #e6e8eb;
  padding: 8px 10px;
  border-radius: 6px;
}
button {
  background: #1f6feb;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}
button.secondary {
  background: #333944;
}
button.danger {
  background: #da3633;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th, td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid #262b33;
}
.pos { color: #3fb950; }
.neg { color: #f85149; }
.actie-uitstappen { color: #f85149; font-weight: 700; }
.actie-winst { color: #d29922; font-weight: 700; }
.actie-houden { color: #3fb950; }
.empty { color: #8b949e; }
.flash-container { max-width: 720px; margin-bottom: 16px; }
.flash {
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.flash-success { background: #23863622; color: #3fb950; }
.flash-error { background: #da363322; color: #f85149; }

/* Kaartweergave per open positie/smart order (i.p.v. een te volle tabel) */
.item-card {
  background: #0d1017;
  border: 1px solid #262b33;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.item-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #20262f;
}
.item-card-head strong { font-size: 15px; }
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.item-grid div {
  background: #12161d;
  border: 1px solid #20262f;
  border-radius: 6px;
  padding: 6px 10px;
}
.item-grid span { display: block; color: #8b949e; font-size: 11px; }
.item-grid strong { font-size: 14px; }
.item-row { margin: 8px 0; font-size: 14px; }
.item-controls {
  background: #12161d;
  border: 1px solid #20262f;
  border-radius: 6px;
  padding: 10px;
  margin: 8px 0;
}
.item-controls-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.item-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---- Navigatie + logboek ---- */
.topnav { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 12px; }
.topnav a {
  color: #8b949e; text-decoration: none; padding: 6px 12px;
  border: 1px solid #262b33; border-radius: 8px; font-size: 14px;
}
.topnav a.actief { color: #e6e8eb; background: #1f6feb33; border-color: #1f6feb; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs a {
  color: #8b949e; text-decoration: none; padding: 6px 12px; border-radius: 8px;
  background: #0f1115; border: 1px solid #262b33; font-size: 14px;
}
.tabs a.actief { color: #e6e8eb; border-color: #58a6ff; }
.knop-link {
  display: inline-block; background: #238636; color: white; text-decoration: none;
  padding: 8px 14px; border-radius: 6px; font-size: 14px; font-weight: 600;
}
.samenvatting { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 6px; }
.samenvatting div { background: #0f1115; border: 1px solid #262b33; border-radius: 8px; padding: 10px; }
.samenvatting span { display: block; color: #8b949e; font-size: 11px; }
.samenvatting strong { font-size: 16px; }
.notitie-form { display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; }
.notitie-form textarea {
  flex: 1; min-height: 44px; background: #0f1115; color: #e6e8eb; border: 1px solid #262b33;
  border-radius: 6px; padding: 8px; font: inherit; font-size: 14px; resize: vertical;
}
.scroll-x { overflow-x: auto; }
.log-tabel td { font-size: 13px; vertical-align: top; }
.log-tabel td.tijd { white-space: nowrap; color: #8b949e; }
.cat { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: #30363d; white-space: nowrap; }
.cat-Fout { background: #da363333; color: #f85149; }
.cat-Instap { background: #23863633; color: #3fb950; }
.cat-Uitstap, .cat-Trailing-stop, .cat-Stop-loss { background: #d2992233; color: #d29922; }
.cat-Take-profit { background: #1f6feb33; color: #58a6ff; }
.signaal-gekoppeld { color: #3fb950; }
.schakelaar { font-weight: 700; min-width: 90px; }
.schakelaar.aan { background: #238636; }
.schakelaar.uit { background: #30363d; color: #8b949e; }
label.veld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #8b949e; flex: 1; }
details summary { cursor: pointer; color: #58a6ff; font-size: 14px; }
.cat-Auto-instap { background: #8957e533; color: #bc8cff; }
.schakelaars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.schakelaar-rij {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: #0f1115; border: 1px solid #262b33; border-radius: 8px; padding: 8px 12px;
}
.zelf-verkocht { margin: 4px 0 8px; }
.zelf-verkocht summary { color: #8b949e; font-size: 13px; cursor: pointer; }
.auto-status { font-size: 12px; min-width: 150px; }
.auto-ingestapt { color: #3fb950; }
.auto-wacht { color: #d29922; }
.auto-overgeslagen, .auto-mislukt { color: #8b949e; }
.auto-bekijken { color: #58a6ff; }
.saldo-regel { font-size: 12px; }
.item-acties { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.vinkje { display: block; margin: 4px 0; font-size: 14px; }
.vinkje input { margin-right: 6px; }
#telegram summary { cursor: pointer; list-style: none; }
#telegram code { font-size: 12px; background: #0f1115; padding: 2px 5px; border-radius: 4px; }
.klimaat { margin: 6px 0 10px; }
.klimaat-slecht strong { color: #f85149; }
.steun-tabel td, .steun-tabel th { font-size: 13px; padding: 4px 6px; white-space: nowrap; }
.steun-tabel tr.uitgevoerd td { color: #8b949e; }

/* ---- Inklappen en snelmenu ---- */
.klikbare-titel { cursor: pointer; user-select: none; }
.kaart-pijl { color: #8b949e; font-size: 0.8em; }
.kaart-dicht .kaart-inhoud { display: none; }
.kaart-dicht h2 { margin-bottom: 0; }
.inklap-knop {
  background: none; border: 1px solid #30363d; color: #8b949e; border-radius: 6px;
  padding: 0 8px; margin-left: 6px; font-size: 13px; cursor: pointer;
}
.kop-resultaat { margin-left: 8px; font-size: 14px; }
.trade-dicht > *:not(.item-card-head):not(.trade-rij) { display: none; }
.snelmenu { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.snelmenu a {
  font-size: 12px; color: #8b949e; text-decoration: none; padding: 3px 9px;
  border: 1px solid #262b33; border-radius: 12px;
}
.snelmenu a:hover { color: #e6e8eb; border-color: #58a6ff; }
.snelmenu button { font-size: 12px; padding: 3px 10px; }
.totaal-rij td { border-top: 2px solid #30363d; }

/* ---- Schaal en schermvullende opmaak ---- */
:root { --schaal: 1.25; }
body { zoom: var(--schaal); padding: 20px 28px; }
.card, .flash-container { max-width: none; }
@media (min-width: 1300px) {
  body.dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    align-items: start;
    max-width: 2400px;
    margin: 0 auto;
  }
  body.dashboard > *:not(section.card), body.dashboard > section.card.breed { grid-column: 1 / -1; }
}

/* Marktsentiment */
.sentiment-rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.sentiment-stand { flex: 2 1 260px; display: flex; gap: 14px; align-items: center; }
.sentiment-icoon { font-size: 2.6em; line-height: 1; }
.sentiment-titel { font-size: 1.6em; font-weight: 800; }
.sentiment-vak { flex: 1 1 120px; text-align: center; border: 1px solid #30363d; border-radius: 12px;
                 padding: 10px 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.sentiment-pct { font-size: 1.7em; font-weight: 800; }
.sentiment-vak.fng svg { color: #e6edf3; margin-top: 4px; }

/* Versienummer */
.versie-badge { font-weight: 700; margin-left: 4px; }
.versie-info { margin: 4px 0 0; font-size: .85em; color: #8b949e; }
.versie-info summary { cursor: pointer; }

/* Overzicht per trade: samenvatting in de kop en instellingen in groepen */
.item-samenvatting { flex-basis: 100%; font-size: 13px; color: #8b949e; margin-top: 2px; }
.groep { margin: 8px 0; border: 1px solid #262b33; border-radius: 8px; padding: 6px 12px; background: #0f131a; }
.groep > summary { cursor: pointer; font-weight: 600; }
.groep-status { font-weight: 400; color: #8b949e; font-size: 12px; margin-left: 8px; }
.groep-inhoud { margin-top: 6px; }


/* ===================== Versie 5.7: overzichtelijker dashboard ===================== */
.kop57-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kop57 h1 { margin: 0; }
.kop57-status { margin: 4px 0 0; color: #9aa4b2; font-size: .9em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stip { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.stip.groen { background: #3fb950; } .stip.rood { background: #f85149; }
.knop57 { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 10px;
  border: 1px solid #2a313c; background: #161a21; color: #e6e8eb; text-decoration: none; font-weight: 600; white-space: nowrap; }
.knop57.blauw { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.blauw { color: #58a6ff; }

.waarschuw57 { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.waarschuw57-regel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: #3a2a0a; border: 1px solid #d29922; color: #f5d48a; text-decoration: none; }
.waarschuw57-bekijk { font-weight: 700; white-space: nowrap; }

.tegels57 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.tegel57 { background: #161a21; border: 1px solid #222833; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
  color: #e6e8eb; text-decoration: none; min-width: 0; }
.tegel57-label, .tegel57-sub { font-size: .8em; color: #9aa4b2; }
.tegel57-waarde { font-size: 1.15em; font-weight: 700; white-space: nowrap; }
@media (max-width: 800px) { .tegels57 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kaart-stand { font-size: .75em; font-weight: 500; color: #9aa4b2; margin-left: 6px; }
.tussenkop57 { font-size: 1.1em; color: #9aa4b2; margin: 24px 0 8px; }

/* Open trades als compacte rijen */
.item-card { padding: 0 14px; overflow: hidden; border-radius: 14px; }
.item-card .trade-rij.inklap-knop { border: 0; margin: 0 -14px; padding: 10px 14px; font-size: inherit; color: inherit; border-radius: 0; }
.trade-rij { display: flex; align-items: center; gap: 12px; width: calc(100% + 28px); min-height: 64px; padding: 10px 14px; margin: 0 -14px;
  background: transparent; border: 0; border-radius: 0; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.trade-rij:hover { background: #1b2029; }
.trade-balk { width: 6px; align-self: stretch; border-radius: 3px; background: #2a313c; flex: none; }
.trade-balk.pos { background: #3fb950; } .trade-balk.neg { background: #f85149; }
.trade-naam { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.trade-sub { font-size: .8em; color: #9aa4b2; font-weight: 400; }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { font-size: .72em; padding: 2px 8px; border-radius: 999px; background: #1f2633; color: #b8c3d1; white-space: nowrap; }
.chip.waarschuw { background: #3a2a0a; color: #f5d48a; } .chip.leeg { background: transparent; color: #6b7685; padding-left: 0; }
.trade-breed { display: none; flex-direction: column; align-items: flex-end; font-size: .8em; color: #9aa4b2; min-width: 110px; }
@media (min-width: 900px) { .trade-breed { display: flex; } }
.trade-res { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.trade-res strong { font-size: 1.15em; }
.trade-pijl { color: #6b7685; font-size: 1.3em; transition: transform .15s; }
.item-card:not(.trade-dicht) .trade-pijl { transform: rotate(90deg); }
.item-card.trade-dicht > *:not(.trade-rij) { display: none !important; }

.koersen57 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.koersen57 > div { background: #0f1115; border: 1px solid #222833; border-radius: 10px; padding: 8px 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.koersen57 span { font-size: .7em; color: #9aa4b2; white-space: nowrap; } .koersen57 strong { font-size: .9em; white-space: nowrap; }
.koersen57 .bied { background: #10233f; border-color: #1f6feb; } .koersen57 .bied span { color: #9cc8ff; }

.stopbalk57 { background: #0f1115; border: 1px solid #222833; border-radius: 10px; padding: 10px 12px; margin: 6px 0 10px; }
.stopbalk57-kop { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.stopbalk57-baan { height: 8px; border-radius: 4px; background: #222833; overflow: hidden; }
.stopbalk57-vul { height: 100%; background: #3fb950; } .stopbalk57-vul.krap { background: #d29922; }

.bescherm57 fieldset { border: 0; border-top: 1px solid #222833; margin: 0; padding: 10px 0; }
.bescherm57-velden { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.bescherm57 fieldset:has(input[type=checkbox]:not(:checked)) .bescherm57-velden { display: none; }
.bescherm57 button[type=submit] { min-height: 44px; margin-top: 4px; }
.verkoop57 { margin: 8px 0 14px; } .verkoop57 button { width: 100%; min-height: 44px; }

.laatste57 { display: flex; flex-direction: column; margin-bottom: 8px; }
.laatste57-rij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #222833; }

.kop57 .topnav { margin: 10px 0 8px; flex-wrap: wrap; }
.kop57-status { display: block; }
.kop57-status .stip { margin-right: 6px; vertical-align: middle; }
.ververs57 { margin-left: auto; }
.snelmenu-houder { margin: 0 0 10px; }
.snelmenu-houder > summary { cursor: pointer; color: #9aa4b2; font-size: .9em; padding: 4px 0; }
.snelmenu-houder .snelmenu { margin: 8px 0 4px; }
.chips { min-width: 0; } .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.trade-naam strong { overflow-wrap: anywhere; }
#open-trades .card-header { flex-wrap: wrap; gap: 8px; }
#open-trades .card-header h2 { white-space: nowrap; margin: 0; }
.item-card .item-row { margin-left: 0; margin-right: 0; }

.tegel57-klein { font-size: .72em; opacity: .85; margin-top: 2px; line-height: 1.4; }
.tegel57-klein .regel { display: block; white-space: nowrap; }

/* ===== v5.52 Swing-pagina: mobielvriendelijk, zelfde stijl als dashboard ===== */
.swing-klein { font-size: .78em; color: #9aa4b2; }
.swing-kop { margin: 14px 0 6px; font-size: 1em; }
.swing-sorteer { font-size: .85em; color: #9aa4b2; margin: 0 0 8px; }
.swing-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 6px 0; min-width: 0; }
.swing-inline > * { min-width: 0; max-width: 100%; }
.swing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.swing-grid .veld, .swing-inline .veld { display: flex; flex-direction: column; gap: 4px; font-size: .85em; color: #9aa4b2; min-width: 0; }
.swing-grid input, .swing-grid select, .swing-inline input, .swing-inline select { width: 100%; box-sizing: border-box; }
.vinkje { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.swing-sig, .swing-wacht, .swing-omzet { background: #161a21; border: 1px solid #222833; border-radius: 14px; margin: 8px 0; overflow: hidden; }
.swing-sig > summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; min-height: 52px; }
.swing-sig > summary::-webkit-details-marker { display: none; }
.sig-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sig-kop strong { font-size: 1.05em; }
.sig-rang { color: #9aa4b2; font-size: .85em; min-width: 26px; }
.sig-pijl { margin-left: auto; font-size: 1.4em; color: #9aa4b2; transition: transform .15s; }
.swing-sig[open] .sig-pijl { transform: rotate(90deg); }
.sig-rij { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .88em; color: #cdd5df; }
.swing-sig-body { padding: 0 14px 12px; border-top: 1px solid #222833; }
.swing-sig-body .item-row { margin-left: 0; margin-right: 0; overflow-wrap: anywhere; }
.swing-koop { margin-top: 8px; }
.swing-koop .swing-inline > * { flex: 1 1 140px; }
.swing-koop button, .swing-wacht button { min-height: 44px; }
.swing-wacht { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.sw-tekst { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.swing-omzet { padding: 10px 14px; }
.so-kop { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.swing-doelen { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.swing-doel { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; background: #0f1115; border: 1px solid #222833; border-radius: 10px; padding: 8px 10px; align-items: baseline; }
.swing-doel.klaar { border-color: #238636; opacity: .75; }
.swing-doel .sd-nr { font-size: .75em; color: #9aa4b2; }
.swing-doel .sd-info { grid-column: 1 / -1; font-size: .78em; color: #9aa4b2; overflow-wrap: anywhere; }
.swing-totaal { font-size: .85em; line-height: 1.5; background: #0f1115; border: 1px solid #222833; border-radius: 10px; padding: 8px 10px; margin: 6px 0; overflow-wrap: anywhere; }
.swing-gesloten { overflow-x: auto; }
#swing-signalen, .swing-page, section.card { max-width: 100%; }
section.card .item-row { overflow-wrap: anywhere; }
.swing-sorteer a, .swing-sig-body a { color: #58a6ff; }
.trade-breed .chips .chip { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; }
.versie-badge, header h1 .badge { white-space: nowrap; }
header h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }

/* v5.57 Verslag en verloop: lange tekst loopt door op de volgende regel (tekstterugloop) in plaats van het scherm uit */
.verslag-tabel { width: 100%; }
.verslag-tabel td, .verslag-tabel th { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.verslag-tabel th { white-space: nowrap; }
.verslag-tabel.verloop td:nth-child(-n+2) { white-space: nowrap; }
.verslag-tabel td:first-child { overflow-wrap: normal; }
/* verloop als regels: tijd en soort op de eerste regel, de tekst eronder over de volle breedte */
.verslag-tabel.verloop, .verslag-tabel.verloop tbody { display: block; width: 100%; }
.verslag-tabel.verloop tr { display: flex; flex-wrap: wrap; gap: 0 12px; padding: 5px 0; border-bottom: 1px solid #222833; }
.verslag-tabel.verloop td { padding: 0; }
.verslag-tabel.verloop td:nth-child(1) { color: #9aa4b2; }
.verslag-tabel.verloop td:nth-child(2) { color: #9aa4b2; }
.verslag-tabel.verloop td:nth-child(3) { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; }

/* 5.104: tabbalk binnen het BB-onderdeel (Overzicht, Trades & instellingen, Logboek) */
.bbtabs { display: flex; max-width: 100%; min-width: 0; box-sizing: border-box; gap: 6px; margin: 0 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; border-bottom: 1px solid #222833; }
.bbtabs a { white-space: nowrap; padding: 9px 14px; border-radius: 10px 10px 0 0; color: #9aa4b2; text-decoration: none; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; font-weight: 600; }
.bbtabs a:hover { color: #e6edf3; background: #161a21; }
.bbtabs a.actief { color: #e6edf3; background: #1a2740; border-color: #2f5fb3; }

/* 5.106: Uitloggen en Verversen als compacte icoontjes rechts in de menubalk (passen zo op één regel) */
.topnav .nav-tekst { display: none; }
.topnav a:has(.nav-tekst) { margin-left: auto; padding: 6px 10px; }
.topnav a:has(.nav-tekst) + a:has(.nav-tekst) { margin-left: 0; }
@media (max-width: 480px) { .topnav { gap: 5px; } .topnav a { padding: 6px 7px; font-size: 12px; } .topnav a:has(.nav-tekst) { padding: 6px 7px; } }