/*
  Handelsscherm. Ontworpen om de hele dag open te staan:
  - donker, want je kijkt er uren naar
  - vaste kolombreedtes zodat cijfers niet verspringen bij elke update
  - tabelcijfers in een monospace-variant, anders "danst" de PnL bij elke tick
*/
:root {
  --bg: #0e1117;
  --panel: #161b22;
  --panel-2: #1c2128;
  --line: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --green: #3fb950;
  --red: #f85149;
  --amber: #d29922;
  --blue: #58a6ff;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── kop ─────────────────────────────────────────────────────────────────── */
header {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
header h1 { font-size: 15px; margin: 0; font-weight: 600; letter-spacing: .3px; }
.spacer { flex: 1; }

.pill {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.pill.live   { color: var(--red);   border-color: var(--red);   font-weight: 600; }
.pill.test   { color: var(--amber); border-color: var(--amber); }
.pill.ok     { color: var(--green); border-color: var(--green); }
.pill.off    { color: var(--red);   border-color: var(--red); }

/* ── raster ──────────────────────────────────────────────────────────────── */
main {
  display: grid;
  grid-template-columns: 340px 1fr 380px;
  gap: 14px; padding: 14px;
  align-items: start;
}
@media (max-width: 1400px) { main { grid-template-columns: 320px 1fr; } .col-signals { grid-column: 1 / -1; } }
@media (max-width: 900px)  { main { grid-template-columns: 1fr; } }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.panel > h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted); margin: 0; padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
.panel > .body { padding: 12px 14px; }

/* ── cijfers ─────────────────────────────────────────────────────────────── */
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.metric { background: var(--panel-2); border-radius: 8px; padding: 9px 11px; }
.metric .label { font-size: 11px; color: var(--muted); }
.metric .value { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

.pos  { color: var(--green); }
.neg  { color: var(--red); }
.dim  { color: var(--muted); }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th {
  text-align: left; font-size: 11px; font-weight: 500; color: var(--muted);
  padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 7px 8px; border-bottom: 1px solid #21262d; font-size: 13px; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; }

/* ── invoer ──────────────────────────────────────────────────────────────── */
label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
input, select, button {
  font: inherit; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 9px; width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--blue); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px; }
.row.three { grid-template-columns: 1fr 1fr 1fr; }

button { cursor: pointer; font-weight: 600; transition: filter .12s; }
button:hover:not(:disabled) { filter: brightness(1.18); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.long  { background: #17361f; border-color: var(--green); color: var(--green); }
button.short { background: #3a1518; border-color: var(--red);   color: var(--red); }
button.ghost { background: transparent; }
button.danger{ background: #3a1518; border-color: var(--red); color: var(--red); }
button.sm    { padding: 4px 8px; font-size: 12px; width: auto; }

.seg { display: flex; gap: 0; margin-bottom: 9px; }
.seg button {
  border-radius: 0; font-weight: 500; font-size: 12px; padding: 6px 4px;
  border-left-width: 0;
}
.seg button:first-child { border-radius: 7px 0 0 7px; border-left-width: 1px; }
.seg button:last-child  { border-radius: 0 7px 7px 0; }
.seg button.active { background: var(--blue); border-color: var(--blue); color: #08121f; font-weight: 600; }

/* De hoofdnavigatie: knoppen even hoog, tekst gecentreerd, één regel. Stond eerder
   met emoji ervoor, en omdat emoji breder en hoger zijn dan letters liep de tekst
   per knop op een andere hoogte — het oogde scheef zonder dat er iets scheef stond.
   Zonder icoon is uitlijnen een kwestie van gelijke hoogte en midden. */
#nav button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: 6px 12px; white-space: nowrap;
}

/* ── meldingen ───────────────────────────────────────────────────────────── */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; width: 330px; }
.toast {
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 13px;
  animation: slide .22s ease-out;
}
.toast.good { border-left-color: var(--green); }
.toast.bad  { border-left-color: var(--red); }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }

.feed { max-height: 260px; overflow-y: auto; }
.feed .item { padding: 6px 0; border-bottom: 1px solid #21262d; font-size: 12.5px; }
.feed .item .t { color: var(--muted); font-size: 11px; margin-right: 6px; }

.star { color: var(--amber); }
.muted-row { opacity: .5; }
.empty { color: var(--muted); font-size: 13px; padding: 6px 0; }

/* ── grafiek ─────────────────────────────────────────────────────────────── */
/* Zelf getekend op canvas: geen bibliotheek, geen build-stap, en de opmaak volgt
   dezelfde variabelen als de rest. Scheelt ~250 kB en een afhankelijkheid die je
   niet kunt lezen. */
#chart { cursor: crosshair; }
.panel > h2 .seg button { padding: 3px 9px; font-size: 11px; }
#chartLast { font-size: 15px; font-weight: 600; color: var(--text); text-transform: none; }
#chartChg  { font-size: 12px; font-weight: 600; }

.toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.toolbar button.sm { padding: 3px 9px; font-size: 11px; }
.toolbar button.active { background: var(--blue); border-color: var(--blue); color: #08121f; }
#chart.drawing { cursor: copy; }

/* ── symboolkiezer ───────────────────────────────────────────────────────── */
/* Een <datalist> filtert op de HELE inhoud van het veld. Staat er PUMPBTCUSDT, dan
   matcht alleen dat, en kom je er zonder het veld leeg te maken niet meer uit. Dat
   is niet zichtbaar en dus een val. Vandaar een eigen lijst. */
.combolijst {
  display: none; position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  margin-top: 3px; max-height: 260px; overflow-y: auto;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 7px; box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}
.combolijst.open { display: block; }
.combolijst .optie {
  padding: 6px 10px; font-size: 13px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.combolijst .optie:hover, .combolijst .optie.actief { background: var(--blue); color: #08121f; }
.combolijst .kop { padding: 5px 10px; font-size: 11px; color: var(--muted); }

/* Link naar het analysedashboard: ziet eruit als de andere knoppen in de balk, maar
   opent een ander scherm — vandaar het pijltje. */
.tablink {
  display: inline-flex; align-items: center;
  font: inherit; font-weight: 500; font-size: 12px;
  padding: 6px 10px; text-decoration: none;
  color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-left-width: 0;
  border-radius: 0 7px 7px 0;
}
.tablink:hover { filter: brightness(1.18); }

/* Het orderformulier licht kort op als het via "→ formulier" is ingevuld. Zonder dit
   zie je de verandering niet: het formulier staat links, de signalen rechts — en dan
   denk je dat er al een order geplaatst is. */
.panel.ingevuld {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, .22);
  transition: box-shadow .2s, border-color .2s;
}

/* De tabs in de paneelkop: kleiner dan de knoppen in de werkbalk, want ze staan in
   een h2 die al klein is. */
#posTabs button { padding: 3px 10px; font-size: 11px; text-transform: none; }
#posTabs span { opacity: .7; }

/* De modus-pil in de kopbalk is klikbaar. Hij ziet er hetzelfde uit als de andere
   pillen, maar krijgt een handje en licht op bij hover — anders ontdek je nooit dat
   je erop kunt drukken. */
.pill.klikbaar {
  cursor: pointer;
  font: inherit; font-size: 12px;
  width: auto;
  transition: filter .12s;
}
.pill.klikbaar:hover { filter: brightness(1.3); }
.pill.klikbaar:disabled { cursor: not-allowed; filter: none; opacity: .6; }

/* Het advies is platte tekst met een vaste opmaak (par. 20 van de specificatie).
   In een <pre> blijft die opmaak staan; in een gewone <div> valt hij weg. */
.advies {
  white-space: pre-wrap;
  word-break: break-word;
  font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 0;
  max-height: 60vh;
  overflow-y: auto;
}
.chatbeurt { padding: 6px 0; border-bottom: 1px solid var(--rand, #23262d); }
.chatbeurt:last-child { border-bottom: 0; }
.chatbeurt .wie { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.chatbeurt .wat { white-space: pre-wrap; word-break: break-word; }

/* Signaalgevers */
.bron { padding: 10px 12px; border: 1px solid var(--rand, #23262d); border-radius: 6px;
        margin-bottom: 8px; cursor: pointer; }
.bron.actief { border-color: var(--accent, #4a9eff); }
.bron .naam { font-weight: 600; }
.bron .meta { font-size: 11.5px; opacity: .65; margin-top: 3px; }
.sig { padding: 10px 12px; border-left: 3px solid var(--rand, #23262d);
       background: rgba(127,127,127,.05); border-radius: 4px; margin-bottom: 8px; }
.sig.doen { border-left-color: var(--pos, #2ecc71); }
.sig.afgeleid { border-left-color: #d9a441; }
.sig .kop { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sig .cijfers { font-family: ui-monospace, Menlo, monospace; font-size: 12px; margin-top: 4px; }
.sig .tekst { font-size: 12.5px; opacity: .8; margin-top: 4px; }
.sig .quote { font-size: 12px; opacity: .6; font-style: italic; margin-top: 4px; }
.waarschuw { color: #d9a441; font-size: 11.5px; margin-top: 4px; }

/* ── uitlegmarkertjes ────────────────────────────────────────────────────── */
/* Eén generieke oplossing: elk element met data-uitleg krijgt automatisch een rond
   markertje, en de teksten staan bij elkaar in app.js. Zo hoeft er nergens per veld
   opmaak of markup bij, en kan een uitleg ook op een blok dat pas door JavaScript
   getekend wordt (de bron-instellingen bijvoorbeeld).

   Alles hieronder gebruikt alleen de variabelen uit :root, zodat het meekleurt met
   het thema in plaats van eigen kleuren mee te brengen. */
.uitlegmarker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex: 0 0 auto;
  margin-left: 6px; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2); color: var(--muted);
  font: 600 10px/1 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-style: italic;
  text-transform: none; letter-spacing: 0;
  cursor: help; user-select: none;
}
.uitlegmarker:hover { color: var(--blue); border-color: var(--blue); }
.uitlegmarker:focus-visible,
.uitlegmarker.open { outline: none; color: var(--blue); border-color: var(--blue);
                     box-shadow: 0 0 0 2px rgba(88, 166, 255, .3); }
/* In de segmentbalk (%/$/prijs/trailing) staat het markertje als flex-item naast de
   laatste knop; daar moet het niet uitgerekt worden. En omdat het markertje nu het
   laatste kind is, verliest de laatste knop anders zijn ronde rechterhoek. */
.seg > .uitlegmarker { align-self: center; }
.seg > button:last-of-type { border-radius: 0 7px 7px 0; }

.uitlegpop {
  position: fixed; z-index: 200; width: 320px; max-width: calc(100vw - 24px);
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  padding: 12px 14px 4px; font-size: 13px; line-height: 1.55;
  max-height: 70vh; overflow-y: auto;
}
.uitlegpop:focus { outline: none; }
.uitlegpop .kop {
  display: flex; align-items: baseline; gap: 8px;
  font-weight: 600; font-size: 13px; margin-bottom: 6px;
}
.uitlegpop .kop .spacer { flex: 1; }
.uitlegpop p { margin: 0 0 10px; }
.uitlegpop button.dicht {
  width: auto; padding: 0 5px; font-size: 15px; line-height: 1;
  background: transparent; border: 0; color: var(--muted);
}
.uitlegpop button.dicht:hover { color: var(--text); }

/* ── handleiding ─────────────────────────────────────────────────────────── */
/* Leestekst, dus een smallere regel dan de rest van het dashboard: lange regels
   lezen slechter dan korte. */
#hnav button {
  width: 100%; text-align: left; background: transparent; border: 0;
  border-radius: 7px; padding: 7px 9px; margin-bottom: 2px;
  font-weight: 500; color: var(--text);
}
#hnav button:hover { background: var(--panel-2); }
#hnav button.active { background: var(--blue); color: #08121f; font-weight: 600; }

.hsec { display: none; max-width: 70ch; }
.hsec.actief { display: block; }
.hsec h3 { font-size: 15px; margin: 18px 0 6px; }
.hsec h3:first-child { margin-top: 0; }
.hsec p, .hsec li { font-size: 13.5px; line-height: 1.65; }
.hsec p { margin: 0 0 10px; }
.hsec ul, .hsec ol { margin: 0 0 10px; padding-left: 20px; }
.hsec li { margin-bottom: 5px; }
.hsec code {
  font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px;
}
.hsec .let {
  border-left: 3px solid var(--amber); background: rgba(210, 153, 34, .08);
  border-radius: 0 7px 7px 0; padding: 9px 12px; margin: 0 0 12px;
}
.hsec .let.rood { border-left-color: var(--red); background: rgba(248, 81, 73, .08); }
.hsec .let.groen { border-left-color: var(--green); background: rgba(63, 185, 80, .08); }
.hsec .let p:last-child { margin-bottom: 0; }
.hsec table { margin: 0 0 12px; }
.hsec svg { max-width: 100%; height: auto; display: block; margin: 0 0 12px; }

/* Namaakschermpje: geen screenshot maar een tekening van wat er echt op het scherm
   staat. Een screenshot veroudert stil; dit staat naast de code die het beschrijft. */
.scherm {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); margin: 0 0 12px; overflow: hidden;
}
.scherm .balk {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  padding: 7px 9px; background: var(--panel);
  border-bottom: 1px solid var(--line); font-size: 11.5px;
}
.scherm .balk .knop {
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px;
  color: var(--muted); background: var(--panel-2); white-space: nowrap;
}
.scherm .balk .knop.aan { border-color: var(--blue); color: var(--blue); }
.scherm .kolommen { display: grid; gap: 8px; padding: 9px; }
.scherm .kolommen.twee { grid-template-columns: 1fr 1fr; }
.scherm .kolommen.drie { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) {
  .scherm .kolommen.twee, .scherm .kolommen.drie { grid-template-columns: 1fr; }
}
.scherm .vak {
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  padding: 7px 9px; font-size: 12px;
}
.scherm .vak .titel {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin-bottom: 4px;
}
.scherm .vak ul { margin: 0; padding-left: 15px; }
.scherm .vak li { font-size: 12px; margin: 0 0 2px; line-height: 1.45; }


/* Melding dat er een nieuwe versie van het scherm is. Onderaan in beeld, niet als
   popup: een dashboard dat de hele dag openstaat moet je kunnen negeren zonder dat
   er iets voor je werk gaat staan. */
#versieBalk {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 120;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; font-size: 13px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--blue); border-radius: 9px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}