/* ================================================================ Trade journal Drie thema's: donker (standaard), licht en toto. Het thema staat als data-theme op en wordt gezet door assets/theme.js. Alle kleuren komen uit deze variabelen; verderop in het bestand staan geen vaste kleurwaarden meer. ================================================================ */ :root, :root[data-theme="dark"]{ --bg:#0a0b0a; --panel:#121413; --panel2:#171a18; --line:#242826; --ink:#f2f4f2; --dim:#8b918c; --faint:#5c625d; --hero:#0a0b0a; /* achtergrond van de inlogpagina */ --hero-ink:#8b918c; --side:#0d0f0e; /* zijbalk */ --side-ink:#f2f4f2; --side-dim:#8b918c; --side-hover:#181b19; --side-active:#171a18; --side-line:#242826; --hover:#181b19; --hover-strong:#1e221f; --thead:#0f1110; --track:#1e211f; --scroll:#242826; --backdrop:rgba(5,7,6,.78); --shadow:0 8px 30px rgba(0,0,0,.55); --win:#3fcf6a; --win-bg:#122a19; --win-line:#1e5c33; --loss:#ef4d4d; --loss-bg:#2a1414; --loss-line:#5c2020; --flat:#8b918c; --unknown:#5c625d; --neutral-bg:#1b1e1c; --accent:#3fcf6a; --on-accent:#06120b; --r:14px; } :root[data-theme="light"]{ --bg:#f3f5f3; --panel:#ffffff; --panel2:#ecefec; --line:#d9ded9; --ink:#141715; --dim:#5b625d; --faint:#868d88; --hero:#f3f5f3; --hero-ink:#5b625d; --side:#e9ece9; --side-ink:#141715; --side-dim:#5b625d; --side-hover:#dfe4df; --side-active:#ffffff; --side-line:#d9ded9; --hover:#f0f3f0; --hover-strong:#e4e8e4; --thead:#f0f3f0; --track:#dfe4df; --scroll:#c3cac4; --backdrop:rgba(30,36,32,.42); --shadow:0 8px 30px rgba(20,30,24,.18); --win:#0f7a3d; --win-bg:#e3f4e9; --win-line:#a5d6b8; --loss:#b62525; --loss-bg:#fbe9e9; --loss-line:#e0a8a8; --flat:#5b625d; --unknown:#868d88; --neutral-bg:#ecefec; --accent:#0f7a3d; --on-accent:#ffffff; } /* Groen chroom, wit werkblad, oranje voor de actieknoppen. */ :root[data-theme="toto"]{ --bg:#f1f3f1; --panel:#ffffff; --panel2:#eaeeea; --line:#d5dbd6; --ink:#16211a; --dim:#59635c; --faint:#8a938c; --hero:#00703c; --hero-ink:#eaf5ee; --side:#00703c; --side-ink:#ffffff; --side-dim:#cfe6d9; --side-hover:#008347; --side-active:#00934f; --side-line:#1c8452; --hover:#f0f4f1; --hover-strong:#e2e8e3; --thead:#eef2ef; --track:#dde3de; --scroll:#bfc9c2; --backdrop:rgba(0,32,17,.5); --shadow:0 8px 30px rgba(0,40,20,.2); --win:#00703c; --win-bg:#e0f0e7; --win-line:#9fcdb4; --loss:#c8102e; --loss-bg:#fce9ec; --loss-line:#eaa8b3; --flat:#59635c; --unknown:#8a938c; --neutral-bg:#eaeeea; --accent:#ee7203; --on-accent:#ffffff; } *{box-sizing:border-box} html{background:var(--bg)} body{ margin:0;background:var(--bg);color:var(--ink); font-family:ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased; } a{color:var(--accent)} a:hover{text-decoration:underline} /* ---------- shell + rail ---------- */ .shell{display:flex;align-items:flex-start;gap:0;min-height:100vh} .side{ position:sticky;top:0;height:100vh;flex:0 0 208px; background:var(--side);border-right:1px solid var(--side-line); padding:22px 12px;display:flex;flex-direction:column;gap:3px; } .side .brand{ font-size:13px;color:var(--side-ink);font-weight:600;letter-spacing:-.01em; padding:6px 12px 22px;display:flex;align-items:center;gap:9px; } .side button{ background:none;border:1px solid transparent;border-radius:10px;text-align:left; padding:9px 12px;color:var(--side-dim);font-size:13.5px;cursor:pointer; } .side button:hover{background:var(--side-hover);color:var(--side-ink)} .side button.on{background:var(--side-active);color:var(--side-ink);border-color:var(--side-line);font-weight:500} .side .spacer{flex:1} .side .who{padding:6px 12px;font-size:11.5px;color:var(--side-dim);word-break:break-all;opacity:.85} .wrap{flex:1;min-width:0;max-width:1320px;margin:0;padding:30px 30px 80px} @media(max-width:860px){ .shell{flex-direction:column} .side{position:static;height:auto;width:100%;flex:none;flex-direction:row; align-items:center;overflow-x:auto;padding:10px;border-right:none;border-bottom:1px solid var(--side-line)} .side .brand{padding:0 14px 0 6px} .side button{white-space:nowrap} .side .spacer{flex:0 0 12px} .side .who{display:none} .wrap{padding:20px 16px 70px} } /* ---------- header ---------- */ header{margin-bottom:22px} h1{font-size:20px;margin:0 0 4px;font-weight:600;letter-spacing:-.015em} .sub{color:var(--dim);font-size:13px;margin:0} /* ---------- stat cards ---------- */ .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:26px} .stat{ background:var(--panel);border:1px solid var(--line); padding:16px 18px 17px;border-radius:var(--r); } .stat .k{font-size:12.5px;color:var(--dim);margin-bottom:10px} .stat .v{font-size:27px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1} .stat .n{font-size:11.5px;color:var(--faint);margin-top:7px;line-height:1.45} /* ---------- headings ---------- */ h2{font-size:15px;margin:30px 0 12px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} /* ---------- table ---------- */ .tblwrap{border:1px solid var(--line);border-radius:var(--r);overflow:auto;max-height:70vh;background:var(--panel)} table{width:100%;border-collapse:collapse;background:transparent;font-size:13px} th,td{border-bottom:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:middle} tr:last-child td{border-bottom:none} tbody tr:hover{background:var(--hover)} th{ background:var(--thead);font-weight:500;font-size:12px;color:var(--dim); cursor:pointer;white-space:nowrap;position:sticky;top:0;z-index:2; } td.note{max-width:300px;color:var(--dim);font-size:12.5px} td.num{font-variant-numeric:tabular-nums} /* ---------- tags ---------- */ .tag{ display:inline-block;padding:3px 11px;font-size:11.5px;border-radius:99px; white-space:nowrap;border:1px solid transparent;font-weight:500; } .tag.win{color:var(--win);background:var(--win-bg);border-color:var(--win-line)} .tag.loss{color:var(--loss);background:var(--loss-bg);border-color:var(--loss-line)} .tag.be{color:var(--flat);background:var(--neutral-bg);border-color:var(--line)} .tag.unk{color:var(--unknown);background:var(--neutral-bg);border-color:var(--line)} .win{color:var(--win)} .loss{color:var(--loss)} .be{color:var(--flat)} .unk{color:var(--unknown)} .dir{font-size:12px;letter-spacing:.01em} .dir.lng{color:var(--win)} .dir.srt{color:var(--loss)} /* ---------- charts ---------- */ .thumb{width:66px;height:42px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:zoom-in;display:block} .noimg{color:var(--faint);font-size:11px} /* ---------- controls ---------- */ .controls{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0;align-items:center} button,select,input{ font:inherit;font-size:13px;padding:8px 14px;border:1px solid var(--line); background:var(--panel2);color:var(--ink);border-radius:10px;cursor:pointer } button:hover{background:var(--hover-strong)} button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600} button.primary:hover{filter:brightness(1.08);background:var(--accent)} button.ghost{padding:5px 10px;font-size:12px;border-radius:8px} button.danger{color:var(--loss);border-color:var(--loss-line);background:var(--loss-bg)} button[disabled]{opacity:.45;cursor:not-allowed} input::placeholder{color:var(--faint)} /* ---------- themakeuze ---------- */ .theme-picker{ font-size:12.5px;padding:7px 10px;border-radius:9px; background:var(--panel2);color:var(--ink);border:1px solid var(--line); } .side .theme-picker{ width:100%;background:transparent;color:var(--side-ink); border-color:var(--side-line);margin-bottom:4px; } .side .theme-picker option{background:var(--panel);color:var(--ink)} .auth-picker{position:fixed;top:16px;right:16px;z-index:10} /* ---------- dialogs ---------- */ dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:0;max-width:560px;width:94%;border-radius:16px} dialog::backdrop{background:var(--backdrop)} dialog form{padding:22px;display:grid;gap:12px} dialog b{font-size:15px} dialog label{font-size:12.5px;color:var(--dim);display:grid;gap:5px} dialog input,dialog select,dialog textarea{font-size:13px;color:var(--ink);width:100%;cursor:auto} textarea{min-height:70px;font-family:inherit;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px;color:var(--ink)} .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .preview{max-width:100%;border-radius:10px;border:1px solid var(--line);margin-top:6px} #lightbox{border:none;background:transparent;max-width:96vw;width:auto;padding:0} #lightbox img{max-width:92vw;max-height:88vh;border-radius:12px;display:block} #imgStatus{font-size:12px;color:var(--dim)} /* ---------- analyse ---------- */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px} .card h3{margin:0 0 5px;font-size:15px;font-weight:600;letter-spacing:-.01em} .card p.lead{margin:0 0 16px;color:var(--dim);font-size:12.5px;max-width:80ch} table.mini{width:100%;border-collapse:collapse;font-size:13px;background:transparent} table.mini th,table.mini td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;position:static;background:transparent} table.mini th{color:var(--dim);font-size:12px;font-weight:500;cursor:default} table.mini tbody tr:hover{background:var(--hover)} table.mini tr:last-child td{border-bottom:none} table.mini td.num,table.mini th.num{text-align:right;font-variant-numeric:tabular-nums} .mut{color:var(--dim)} .mini-bar{height:6px;background:var(--track);border-radius:99px;overflow:hidden;min-width:60px} .mini-bar span{display:block;height:100%;background:var(--accent);border-radius:99px} .note-box{ border:1px solid var(--line);border-left:3px solid var(--accent); padding:14px 16px;background:var(--panel);border-radius:0 var(--r) var(--r) 0; font-size:12.5px;color:var(--dim);margin-bottom:16px;max-width:90ch; } .note-box b{color:var(--ink)} .scrollx{overflow-x:auto} /* ---------- status en meldingen ---------- */ .conn{font-size:12px;margin:0 0 18px;padding:8px 12px;border-radius:10px; border:1px solid var(--line);display:inline-block;background:var(--panel2);color:var(--dim)} .conn.ok{color:var(--win);background:var(--win-bg);border-color:var(--win-line)} .conn.err{color:var(--loss);background:var(--loss-bg);border-color:var(--loss-line)} #toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50; background:var(--panel2);border:1px solid var(--line);color:var(--ink); padding:11px 18px;border-radius:12px;font-size:13px;box-shadow:var(--shadow);max-width:90vw} .who{font-size:11.5px;color:var(--faint)} footer{margin-top:36px;font-size:12px;color:var(--faint);border-top:1px solid var(--line);padding-top:16px;max-width:90ch} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:99px;border:2px solid var(--bg)} ::-webkit-scrollbar-track{background:transparent} /* ---------- losse pagina's (inloggen, wachtwoord, import) ---------- */ .auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--hero)} .auth-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line); border-radius:16px;padding:28px;box-shadow:var(--shadow)} .auth-card h1{font-size:19px;margin:0 0 6px;color:var(--ink)} .auth-card p.sub{margin:0 0 20px} .auth-card form{display:grid;gap:12px} .auth-card label{font-size:12.5px;color:var(--dim);display:grid;gap:5px} .auth-card input{width:100%;cursor:auto} .auth-card label.check{display:flex;align-items:center;gap:9px;cursor:pointer;color:var(--dim)} .auth-card label.check input{margin:0;padding:0;accent-color:var(--accent);width:15px;height:15px;cursor:pointer} .auth-msg{font-size:12.5px;margin:14px 0 0;min-height:1em} .auth-msg.err{color:var(--loss)} .auth-msg.ok{color:var(--win)} .auth-foot{font-size:11.5px;color:var(--faint);margin:18px 0 0;line-height:1.55} .auth-foot a{color:var(--accent);font-weight:600} .brandline{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-weight:600;color:var(--ink)} @media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important;transition:none !important} }