/* ============================================================================ JARVIS donker thema + zwevende aan/uit-knop. Geladen op elke pagina. De donkere stijl geldt ALLEEN als . Fase 1: dashboard (/) volledig uitgewerkt + een nette generieke basis voor de gedeelde bouwblokken (modal, inputs, kaarten). Overige pagina's worden gefaseerd verder verfijnd. ============================================================================ */ /* ============================================================================ Mobiel vangnet — betrouwbaar geleverd via theme.css (ververst altijd via ETag, ook als de pagina-HTML nog gecachet is). Lost het horizontaal-schuiven en het uit-het-kader-vallende datumveld op het teamboard op. ============================================================================ */ html, body { overflow-x: hidden; max-width: 100vw; } @media (max-width: 900px) { /* Team-toevoegbalk: alles netjes onder elkaar, niets buiten het kader. */ .toevoeg { grid-template-columns: 1fr !important; } .toevoeg input, .toevoeg select { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; } /* iOS-datumveld dwingen om binnen de breedte te blijven. */ .toevoeg input[type=date] { -webkit-appearance: none; appearance: none; width: 100%; } } /* ---------- Thema-knop in de menubalk (header) ---------- */ .thema-knop-kop{ flex-shrink:0; width:36px; height:36px; padding:0; border-radius:9px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.20); color:#fff; font-size:16px; line-height:1; cursor:pointer; -webkit-tap-highlight-color:transparent; display:inline-flex; align-items:center; justify-content:center; transition:background .2s, transform .12s; } .thema-knop-kop:hover{ background:rgba(255,255,255,.26); } .thema-knop-kop:active{ transform:scale(.94); } /* ---------- Zwevende thema-knop (maan / zon) — fallback als er geen header is ---------- */ #thema-knop{ position:fixed; left:16px; bottom:16px; z-index:2147483000; width:44px; height:44px; padding:0; border-radius:50%; border:1px solid rgba(15,23,42,.14); background:#ffffff; color:#1e293b; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; box-shadow:0 4px 16px rgba(15,23,42,.28); transition:transform .15s ease, background .2s, box-shadow .2s, color .2s; } #thema-knop:hover{ transform:scale(1.08); } #thema-knop:active{ transform:scale(.95); } html[data-thema="donker"] #thema-knop{ background:#1e293b; color:#fcd34d; border-color:rgba(255,255,255,.16); box-shadow:0 6px 20px rgba(0,0,0,.6); } /* Op de telefoon naar de rechter-zijkant (verticaal gecentreerd): daar staan geen menubalken (die zitten boven of onder), dus het knopje blokkeert nooit een knop. */ @media (max-width:760px){ #thema-knop{ left:auto; right:8px; top:50%; bottom:auto; transform:translateY(-50%); width:40px; height:40px; opacity:.92; } #thema-knop:hover{ transform:translateY(-50%) scale(1.06); } #thema-knop:active{ transform:translateY(-50%) scale(.94); } } /* ============================================================================ DONKER THEMA ============================================================================ */ html[data-thema="donker"]{ color-scheme:dark; } html[data-thema="donker"] body{ background:#0b1220 !important; color:#e6e9f1 !important; } /* ---------- Generieke formuliervelden: overal donker ---------- */ html[data-thema="donker"] input, html[data-thema="donker"] textarea, html[data-thema="donker"] select{ background:#0f1a30 !important; color:#e6e9f1 !important; border-color:rgba(148,163,184,.22) !important; } html[data-thema="donker"] input::placeholder, html[data-thema="donker"] textarea::placeholder{ color:#7c8aa3 !important; } html[data-thema="donker"] a{ color:#93c5fd; } /* ---------- Scrollbars ---------- */ html[data-thema="donker"] ::-webkit-scrollbar{ width:10px; height:10px; } html[data-thema="donker"] ::-webkit-scrollbar-thumb{ background:#2a3a57; border-radius:6px; } html[data-thema="donker"] ::-webkit-scrollbar-track{ background:transparent; } /* ---------- Gedeelde bouwblokken (op meerdere pagina's) ---------- */ html[data-thema="donker"] .modal, html[data-thema="donker"] .compose-modal, html[data-thema="donker"] .betaal-paneel, html[data-thema="donker"] .reactie-palet{ background:#141f37 !important; color:#e6e9f1 !important; border-color:rgba(148,163,184,.16) !important; } html[data-thema="donker"] .modal h2, html[data-thema="donker"] .modal h3{ color:#e6e9f1; } html[data-thema="donker"] .modal label, html[data-thema="donker"] .modal .modal-sub, html[data-thema="donker"] .betaal-paneel .sub{ color:#9aa7bd !important; } /* Witte kaarten/panelen die breder voorkomen. */ html[data-thema="donker"] .kaart, html[data-thema="donker"] .dame-kaart, html[data-thema="donker"] .rooster-blok, html[data-thema="donker"] .tabel-wrap, html[data-thema="donker"] .thread-kop{ background:#141f37 !important; color:#e6e9f1 !important; border-color:rgba(148,163,184,.16) !important; } html[data-thema="donker"] table{ color:#e6e9f1; } html[data-thema="donker"] th, html[data-thema="donker"] td{ border-color:rgba(148,163,184,.14) !important; } /* ============================================================================ DASHBOARD (/) Header is al donker -> ongemoeid gelaten. Hier de lichte vlakken omgebouwd. ============================================================================ */ /* Zijbalk + tabs + gesprekkenlijst */ html[data-thema="donker"] .zijbalk{ background:#0c1626 !important; border-right-color:rgba(148,163,184,.14) !important; } html[data-thema="donker"] .tabs{ border-bottom-color:rgba(148,163,184,.14); } html[data-thema="donker"] .tab{ background:#16223c; color:#9aa7bd; } html[data-thema="donker"] .tab:hover{ background:#1c2942; color:#c7d2fe; } html[data-thema="donker"] .zoekbalk{ border-bottom-color:rgba(148,163,184,.1); } html[data-thema="donker"] .gesprek{ border-bottom-color:rgba(148,163,184,.09); } html[data-thema="donker"] .gesprek:hover{ background:#14203a; } html[data-thema="donker"] .gesprek.geselecteerd{ background:#1a2747; } html[data-thema="donker"] .gesprek.archief-item{ background:#0e1830; } html[data-thema="donker"] .gesprek.archief-item .naam, html[data-thema="donker"] .gesprek.archief-item .laatste{ color:#6b7890; } html[data-thema="donker"] .gesprek .laatste{ color:#8b99b1; } html[data-thema="donker"] .gesprek .mail-ond{ color:#e6e9f1; } html[data-thema="donker"] .gesprek.onge-mail, html[data-thema="donker"] .gesprek.onge-tg{ background:#26240f; } html[data-thema="donker"] .gesprek.onge-mail.geselecteerd, html[data-thema="donker"] .gesprek.onge-tg.geselecteerd{ background:#1a2747; } /* Chat-/mailpaneel chrome */ html[data-thema="donker"] .paneel{ background:#0b1220 !important; } html[data-thema="donker"] .paneelkop{ background:#0c1626 !important; border-bottom-color:rgba(148,163,184,.14); } html[data-thema="donker"] .mail-vw-kop{ background:#0c1626 !important; border-bottom-color:rgba(148,163,184,.14); } html[data-thema="donker"] .mail-vw-kop .meta{ color:#9aa7bd; } html[data-thema="donker"] .mail-vw-berichten{ background:#0b1220 !important; } /* Let op: e-mailberichten (.mail-vw-msg) blijven bewust op een LICHTE 'papieren' kaart staan — externe mail-HTML is voor een witte achtergrond ontworpen en zou anders onleesbaar worden. Ziet eruit als een lichte kaart op donkere achtergrond. */ /* Actiebalk + invoer + bijlage-knoppen */ html[data-thema="donker"] .actiebalk{ background:#0c1626 !important; border-bottom-color:rgba(148,163,184,.14); } html[data-thema="donker"] .actiebalk select{ background-color:#16223c !important; color:#cbd5e1 !important; border-color:rgba(148,163,184,.22) !important; } html[data-thema="donker"] .invoer{ background:#0c1626 !important; border-top-color:rgba(148,163,184,.14); } html[data-thema="donker"] .mail-vw-rep{ background:#0c1626 !important; border-top-color:rgba(148,163,184,.14); } html[data-thema="donker"] .bijlage, html[data-thema="donker"] .acties-toggle{ background:#16223c !important; color:#cbd5e1 !important; } html[data-thema="donker"] .archief{ background:#16223c !important; color:#cbd5e1 !important; border-color:rgba(148,163,184,.2) !important; } /* Chat-bubbels: 'in' wordt donker, 'uit' houdt de paarse gradient (oogt prima). */ html[data-thema="donker"] .bubbel.in{ background:#1c2840 !important; color:#e6e9f1 !important; border-color:rgba(148,163,184,.14) !important; } html[data-thema="donker"] .bubbel-link{ color:#93c5fd; } html[data-thema="donker"] .reply-balk{ background:#1a2747 !important; color:#cbd5e1 !important; border-top-color:rgba(99,102,241,.4) !important; } html[data-thema="donker"] .chat-zoek-balk{ background:#26240f !important; } html[data-thema="donker"] .reactie-knop, html[data-thema="donker"] .reply-knop, html[data-thema="donker"] .edit-knop, html[data-thema="donker"] .reactie-chip{ background:#16223c !important; border-color:rgba(148,163,184,.2) !important; color:#cbd5e1; } html[data-thema="donker"] .naar-beneden{ background:#1e293b !important; color:#c7d2fe !important; border-color:rgba(148,163,184,.2) !important; } /* Lege/placeholder-teksten */ html[data-thema="donker"] .leeg, html[data-thema="donker"] .betaal-leeg{ color:#7c8aa3; } html[data-thema="donker"] .welkom-titel{ color:#e6e9f1; } html[data-thema="donker"] .welkom-sub{ color:#9aa7bd; } html[data-thema="donker"] .welkom-knop-uitleg{ background:#16223c !important; border-color:rgba(148,163,184,.2) !important; color:#9aa7bd; } /* Offerte-calculator modal + knoppen */ html[data-thema="donker"] .modal .annuleer{ background:#1c2942 !important; color:#cbd5e1 !important; } html[data-thema="donker"] .modal input, html[data-thema="donker"] .modal select{ background:#0f1a30 !important; } html[data-thema="donker"] .calc-uitkomst{ background:#0f1a30 !important; border-color:rgba(148,163,184,.18) !important; color:#cbd5e1 !important; } html[data-thema="donker"] .calc-uitkomst .meta{ color:#9aa7bd; } html[data-thema="donker"] .calc-uitkomst .tekst-strook{ background:#0b1220 !important; color:#e6e9f1 !important; border-color:rgba(148,163,184,.18) !important; } /* Status-/actieknoppen in de mailkop */ html[data-thema="donker"] .mail-vw-kop .status-knop{ background:#16223c !important; color:#cbd5e1 !important; border-color:rgba(148,163,184,.2) !important; } html[data-thema="donker"] .ver-btn{ background:#16223c !important; color:#cbd5e1 !important; border-color:rgba(148,163,184,.2) !important; } /* Betaallink-menu velden */ html[data-thema="donker"] .betaal-sjabloon, html[data-thema="donker"] .betaal-rij input{ background:#0f1a30 !important; color:#e6e9f1 !important; border-color:rgba(148,163,184,.22) !important; } html[data-thema="donker"] .betaal-sjabloon-hint{ color:#7c8aa3; } html[data-thema="donker"] .betaal-nieuw{ background:#16223c !important; color:#cbd5e1 !important; border-color:rgba(148,163,184,.3) !important; } html[data-thema="donker"] .betaal-sluit{ background:#16223c !important; color:#cbd5e1 !important; border-color:rgba(148,163,184,.22) !important; } /* Klantkaart-paneel (Telegram + SMS delen dit). */ html[data-thema="donker"] .klantkaart{ background:#0c1626 !important; color:#e6e9f1 !important; border-left-color:rgba(148,163,184,.14) !important; } /* ============================================================================ AGENDA (/agenda) — kalenderkaart, roosterblokken en FullCalendar ============================================================================ */ html[data-thema="donker"] #cal, html[data-thema="donker"] .rooster-blok{ background:#0c1626 !important; border-color:rgba(148,163,184,.16) !important; box-shadow:0 1px 3px rgba(0,0,0,.3) !important; } html[data-thema="donker"] .rooster-blok h3{ color:#aab6cc; } html[data-thema="donker"] .rooster-chip{ background:#16223c !important; border-color:rgba(148,163,184,.2) !important; color:#dbe2ee; } /* Namen + uren/woonplaats in de chips hebben een eigen donkere kleur -> oplichten. */ html[data-thema="donker"] .rooster-chip .naam{ color:#e6e9f1 !important; } html[data-thema="donker"] .rooster-chip .uren{ color:#9aa7bd !important; } html[data-thema="donker"] .rooster-week-tabel th{ color:#9aa7bd; } html[data-thema="donker"] .rooster-week-tabel th, html[data-thema="donker"] .rooster-week-tabel td{ border-bottom-color:rgba(148,163,184,.12) !important; } html[data-thema="donker"] .rooster-week-tabel td.vrij{ color:#5a6880; } html[data-thema="donker"] .rooster-week-tabel td:first-child, html[data-thema="donker"] .rooster-week-tabel th:first-child{ background:#0c1626 !important; box-shadow:1px 0 0 rgba(148,163,184,.12) !important; } /* FullCalendar: de lichte agenda-variant donker maken via de --fc-variabelen. */ html[data-thema="donker"] .fc{ --fc-page-bg-color:#0c1626; --fc-border-color:rgba(148,163,184,.16); --fc-neutral-bg-color:#0f1a30; --fc-today-bg-color:rgba(79,70,229,.13); --fc-now-indicator-color:#f472b6; --fc-list-event-hover-bg-color:#16223c; color:#e6e9f1; } html[data-thema="donker"] .fc-button{ background:#16223c !important; color:#cbd5e1 !important; border-color:rgba(148,163,184,.22) !important; } html[data-thema="donker"] .fc-button:hover{ background:#1c2942 !important; } /* Kop-cellen, urenlabels en lijst-koppen leesbaar (lichtgrijs i.p.v. donker). */ html[data-thema="donker"] .fc-col-header-cell-cushion, html[data-thema="donker"] .fc-daygrid-day-number, html[data-thema="donker"] .fc-timegrid-axis-cushion, html[data-thema="donker"] .fc-timegrid-slot-label-cushion, html[data-thema="donker"] .fc-list-day-text, html[data-thema="donker"] .fc-list-day-side-text{ color:#aab6cc !important; } html[data-thema="donker"] .fc-list-day-cushion, html[data-thema="donker"] .fc-list-table th{ background:#0f1a30 !important; } html[data-thema="donker"] .fc-list-event:hover td{ background:#16223c !important; } /* Het 'Vandaag'-pilletje in de lijstweergave (had een witte achtergrond). */ html[data-thema="donker"] .fc-list-day.fc-day-today .fc-list-day-text::after{ background:#0c1626 !important; color:#c7d2fe !important; border-color:#4f46e5 !important; } /* ============================================================================ Gedeeld: intro-tekst (.uitleg), dame-chips, sectiekoppen ============================================================================ */ html[data-thema="donker"] .uitleg{ color:#9aa7bd; } html[data-thema="donker"] .uitleg b{ color:#e6e9f1; } html[data-thema="donker"] .sectie-kop{ border-bottom-color:rgba(148,163,184,.16); } html[data-thema="donker"] .sectie-kop h2{ color:#e6e9f1; } html[data-thema="donker"] .sectie-kop .sub{ color:#9aa7bd; } html[data-thema="donker"] .dame-chip{ background:#16223c !important; color:#cbd5e1 !important; border-color:rgba(148,163,184,.22) !important; } html[data-thema="donker"] .legenda{ color:#9aa7bd; } /* ============================================================================ CHAUFFEURS (/chauffeurs) — tabellen ============================================================================ */ html[data-thema="donker"] .tabel-binnen{ background:#0c1626; } html[data-thema="donker"] .chauffeurs-tabel th{ background:#101c33 !important; color:#9aa7bd !important; border-bottom-color:rgba(148,163,184,.16) !important; } html[data-thema="donker"] .chauffeurs-tabel td{ border-bottom-color:rgba(148,163,184,.1) !important; } html[data-thema="donker"] .chauffeurs-tabel tr.bankspeler{ background:rgba(251,191,36,.07) !important; } html[data-thema="donker"] .chauffeurs-tabel tr.kantoor{ background:rgba(59,130,246,.10) !important; } html[data-thema="donker"] .chauffeurs-tabel input, html[data-thema="donker"] .chauffeurs-tabel select{ color:#e6e9f1 !important; } /* Dag-cellen (V/X/tekst) in donkere tinten zodat ze niet te fel oplichten. */ html[data-thema="donker"] .dag-cel.V{ background:rgba(34,197,94,.17) !important; color:#86efac !important; } html[data-thema="donker"] .dag-cel.V:hover{ background:rgba(34,197,94,.27) !important; } html[data-thema="donker"] .dag-cel.X{ background:rgba(239,68,68,.15) !important; color:#fca5a5 !important; } html[data-thema="donker"] .dag-cel.X:hover{ background:rgba(239,68,68,.25) !important; } html[data-thema="donker"] .dag-cel.tekst, html[data-thema="donker"] .chauffeurs-tabel.kantoor-tabel .dag-cel.V{ background:rgba(59,130,246,.18) !important; color:#93c5fd !important; } /* ============================================================================ GRENZEN (/grenzen) — kleurcodering van de cellen terug, maar in donkere tinten (mijn generieke input-stijl maakte ze anders allemaal uniform donker). ============================================================================ */ html[data-thema="donker"] .grenzen-tabel th:first-child, html[data-thema="donker"] .grenzen-tabel td.naam-cel{ background:#0c1626 !important; box-shadow:2px 0 4px -2px rgba(0,0,0,.45) !important; } html[data-thema="donker"] .cel-input.incl, html[data-thema="donker"] .cel-input.ja{ background:rgba(34,197,94,.16) !important; color:#86efac !important; } html[data-thema="donker"] .cel-input.iom{ background:rgba(251,191,36,.16) !important; color:#fcd34d !important; } html[data-thema="donker"] .cel-input.nvt{ background:rgba(148,163,184,.12) !important; color:#94a3b8 !important; } html[data-thema="donker"] .cel-input.nee{ background:rgba(239,68,68,.16) !important; color:#fca5a5 !important; } html[data-thema="donker"] .cel-input.meer{ background:rgba(59,130,246,.18) !important; color:#93c5fd !important; } html[data-thema="donker"] .cel-input.vrij{ background:rgba(168,85,247,.16) !important; color:#d8b4fe !important; } /* ============================================================================ STATISTIEK-DASHBOARD (/dashboard) — stat-kaarten, grafiek-kaarten, duolijst ============================================================================ */ html[data-thema="donker"] .kaart .label{ color:#9aa7bd; } html[data-thema="donker"] .kaart .waarde{ color:#e6e9f1; } html[data-thema="donker"] .kaart .sub{ color:#7c8aa3; } html[data-thema="donker"] .blok{ background:#141f37 !important; border-color:rgba(148,163,184,.16) !important; box-shadow:0 1px 3px rgba(0,0,0,.3) !important; } html[data-thema="donker"] .blok h3, html[data-thema="donker"] .blok h4{ color:#aab6cc; } html[data-thema="donker"] .kaart-meta{ color:#9aa7bd; } html[data-thema="donker"] td.num{ color:#9aa7bd; } /* Duolijst-rijen (zowel de mini-versie op /dashboard als de volledige op /duolijst). */ html[data-thema="donker"] .duo-rij-mini, html[data-thema="donker"] .duo-rij{ background:#16223c !important; border-color:rgba(148,163,184,.18) !important; } html[data-thema="donker"] .duo-rij-mini.gekoppeld{ background:rgba(34,197,94,.12) !important; border-color:rgba(34,197,94,.3) !important; } html[data-thema="donker"] .duo-rij-mini.eigen, html[data-thema="donker"] .duo-rij.eigen{ background:rgba(251,191,36,.12) !important; border-color:rgba(251,191,36,.3) !important; } html[data-thema="donker"] .duo-rij-mini.geen-match, html[data-thema="donker"] .duo-rij.geen-match{ background:rgba(239,68,68,.12) !important; border-color:rgba(239,68,68,.3) !important; } html[data-thema="donker"] .duo-rij-mini .dame, html[data-thema="donker"] .duo-rij-mini .chauffeur{ color:#e6e9f1; } html[data-thema="donker"] .duo-rij-mini .uren-mini, html[data-thema="donker"] .duo-rij-mini .km, html[data-thema="donker"] .duo-rij-mini .chauffeur .plaats{ color:#9aa7bd; } html[data-thema="donker"] .duo-rij-mini.eigen .chauffeur{ color:#fcd34d; }