/* ══════════════════════════════════════════════════════════════════════════ FootyMind — ADMINPANEEL, LUXE ONTWERPLAAG (v2.8.239, 2026-08-09) ══════════════════════════════════════════════════════════════════════════ Aanleiding (gebruiker): "Geef admin panel een compleet nieuwe design (…) een luxe look mooie design die makkelijk en overzichtelijk is", met bij elke functie een uitleg in jip-en-janneketaal. ⚠️ WAAROM DIT EEN APART BESTAND IS, en niet onderaan style.css: style.css wordt door de VOORPAGINA gedeeld en telt 3.800 regels met twaalf !important-lagen (F1-F12 + premium + luxe). Een adminlaag daartussen zou op de voorpagina meevechten om selectoren die daar al beslecht zijn. Dit bestand wordt uitsluitend door admin.html geladen en kan dus niets breken aan de kant van de gebruiker. ⚠️ LAADVOLGORDE IS DE HELE TRUC: tailwind.css → style.css → admin.css. De secties dragen geen Tailwind-oppervlakken meer (bg-dark-800 etc. zijn vervangen door .fm-a-card), dus er is hier nergens !important nodig. Voeg dat ook niet toe "voor de zekerheid" — dan wint deze laag straks van het ivory-thema en staat er lichtgrijs op warm papier (dezelfde fout die blok L11 in style.css achteraf moest repareren). ⚠️ IVORY: het lichte thema kleurt in style.css de Tailwind-klassen om met !important. Onze eigen klassen raakt het niet — die krijgen daarom aan het eind van dit bestand hun eigen tegenhangers. Voeg je hierboven een nieuwe kleur toe, kijk dan of blok §9 een tegenhanger nodig heeft. ══════════════════════════════════════════════════════════════════════════ */ /* ── §1. Grondtoon ───────────────────────────────────────────────────────── Eén rustige, diepe grond met twee zachte lichtbronnen. Geen fel verloop: het paneel bevat veel tabellen en cijfers, en die moeten leesbaar blijven. */ :root { --adm-ink: #e8ede9; /* hoofdtekst */ --adm-ink-soft: #a3b0a7; /* bijschrift */ --adm-ink-faint: #6f7d74; /* labels, eenheden */ --adm-surface: rgba(17, 27, 21, 0.72); --adm-surface-hi: rgba(24, 37, 29, 0.85); --adm-line: rgba(255, 255, 255, 0.07); --adm-line-hi: rgba(255, 255, 255, 0.13); --adm-gold: #c9a961; --adm-gold-soft: rgba(201, 169, 97, 0.16); --adm-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.95); --adm-radius: 20px; } /* ⚠️ DE ENIGE !important IN DIT BESTAND, en hij is nodig: style.css zet de pagina-achtergrond op `body { background-color:#030805 !important }` met een vignette erbij (blok 0b). Zonder !important is deze hele grondtoon dode code — gemeten in Chromium, niet aangenomen. De ivory-tegenhanger in §9 heeft hogere specificiteit én !important en wint hier dus alsnog van, precies zoals blok L11 in style.css dat oplost. */ body.fm-admin { background-color: #060a07 !important; background-image: radial-gradient(ellipse 120% 55% at 50% -10%, rgba(var(--fm-primary-rgb), 0.09) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 92% 100%, rgba(201, 169, 97, 0.05) 0%, transparent 65%) !important; background-attachment: fixed !important; color: var(--adm-ink); } /* ── §2. Kopbalk ─────────────────────────────────────────────────────────── Glas met een haarlijn onderaan; de merknaam krijgt een gouden accentletter zodat de admin visueel meteen te onderscheiden is van de publieke app. */ .fm-a-topbar { background: linear-gradient(180deg, rgba(12, 22, 16, 0.92), rgba(8, 14, 10, 0.88)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--adm-line); box-shadow: 0 8px 28px -20px rgba(0, 0, 0, 0.9); } /* ⚠️ HET MERKBLOK KRIJGT DE RESTRUIMTE, EN ZIJN TEKST KAN NIET OVERLOPEN (v2.8.293). Gemeten op 390px vóór deze fix: `.fm-a-brand-txt` werd platgedrukt tot **31px** terwijl "FootyMind" er ~70 nodig heeft, en op `b`/`span` stond geen `overflow` — dus de tekst liep gewoon door buiten zijn eigen doos, dwars ónder de versiebadge langs. De doosjes botsten niet (chip x=101, tekstdoos eindigt op 91), dus met een rect-vergelijking meet je hier NIETS: de tékst liep eruit, niet de doos. Meet dit met `scrollWidth > clientWidth`, zoals bij de werkbalk in v2.8.239. Dit is dezelfde bugfamilie als de badge over de teamnaam (v2.8.233) en de titelkolom die naar 0px kneep (v2.8.239): een flex-item dat per definitie breed kan zijn, moet óf een eigen regel krijgen óf netjes mogen afkappen. */ .fm-a-brand { display: flex; align-items: center; gap: 10px; /* Neemt de restruimte die de rechterkolom overlaat, en mag zelf krimpen. */ flex: 1 1 auto; min-width: 0; } .fm-a-brand-mark { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; border-radius: 11px; background: linear-gradient(140deg, rgba(var(--fm-primary-rgb), 0.28), rgba(var(--fm-primary-dark-rgb), 0.5)); border: 1px solid rgba(var(--fm-primary-rgb), 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .fm-a-brand-txt { display: flex; flex-direction: column; line-height: 1.15; /* `min-width: 0` alléén laat de DOOS krimpen; zonder de ellipsis hieronder blijft de tekst daar gewoon uit steken. Die twee horen altijd samen. */ min-width: 0; flex: 0 1 auto; } .fm-a-brand-txt b, .fm-a-brand-txt span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fm-a-brand-txt b { font-size: 14px; font-weight: 700; letter-spacing: .01em; color: var(--adm-ink); } .fm-a-brand-txt span { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--adm-gold); } .fm-a-chip { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--adm-line-hi); background: rgba(255, 255, 255, 0.04); color: var(--adm-ink-soft); white-space: nowrap; } /* ⚠️ DE VERSIEBADGE KRIMPT NOOIT. Als flex-item met de default `1 1 auto` werd hij samen met de merknaam ingedrukt; een half afgekapt versienummer ("v2.8.2…") is erger dan geen versienummer, want je gebruikt het juist om te controleren wélke versie er live staat. Zelfde regel als `.pill-pct` op de voorpagina (v2.8.233): het label mag inkorten, het cijfer nooit. */ #header-version.fm-a-chip { flex: none; } .fm-a-link { font-size: 13px; color: var(--adm-ink-soft); padding: 6px 11px; border-radius: 10px; border: 1px solid transparent; transition: color .15s, background .15s, border-color .15s; white-space: nowrap; } .fm-a-link:hover { color: var(--adm-ink); background: rgba(255, 255, 255, 0.05); border-color: var(--adm-line); } .fm-a-link.is-uit { color: #e08a84; } .fm-a-link.is-uit:hover { color: #f3b5b0; background: rgba(224, 138, 132, 0.09); border-color: rgba(224, 138, 132, 0.25); } /* De uitlog-knop toont voluit tekst; het korte teken hoort alleen op een telefoon. */ .fm-a-uit-kort { display: none; } .fm-a-uit-lang { display: inline; } /* ── §2b. De kopbalk op een telefoon (v2.8.293) ──────────────────────────── ⚠️ HIER ZIT EEN HARDE REKENSOM ONDER, geen smaak. Gemeten op 320px vóór deze media query, met alles voluit: padding 32 + mark 34 + gap 10 + naam 72 + gap 10 + badge 73 + gap 12 + "← Terug naar de app" 85 + "Uitloggen" 74 = 402px op een scherm van 320. Er is dan geen indeling die dat rechttrekt — er moet ruimte bij. Deze query haalt hem waar het niets kost: kleinere randafstanden, een strakkere badge en het uitlog-woord vervangen door zijn teken. Wat er NIET gebeurt is de merknaam of het versienummer wegkorten; dat zijn juist de twee dingen waarvoor je naar deze balk kijkt. ⚠️ De merknaam mag als állerlaatste redmiddel nog steeds afkappen (de ellipsis in §2). Dat is bewust de laatste stap en niet de eerste: een afgekapte naam leest als een fout, ook al is hij netjes. */ @media (max-width: 640px) { .fm-a-topbar { padding-left: 12px; padding-right: 12px; } .fm-a-brand { gap: 8px; } .fm-a-brand-mark { width: 30px; height: 30px; border-radius: 10px; font-size: 15px; } #header-version.fm-a-chip { font-size: 10px; padding: 3px 7px; letter-spacing: -0.01em; } .fm-a-link { padding: 6px 8px; font-size: 12.5px; } } /* Onder 400px verdwijnt het woord "Uitloggen" achter zijn teken. Dat wint ~46px — precies wat de merknaam nodig heeft om volledig te blijven staan. */ @media (max-width: 400px) { .fm-a-uit-kort { display: inline; font-size: 15px; line-height: 1; } .fm-a-uit-lang { display: none; } /* De laatste paar pixels, en ze zijn gemeten: op 320px hield "FootyMind" er precies 3 tekort en kapte af tot "FootyMi…". Twee pixels van elke knopzijde leveren er 8 op — genoeg, en aan de knoppen zelf zie je het niet. */ .fm-a-link { padding-left: 6px; padding-right: 6px; } } /* ── §3. Welkomstblok ────────────────────────────────────────────────────── Draagt de zoekbalk. Die is het antwoord op "overzichtelijk": met 27 blokken is scrollen geen navigatie meer — typen wel. */ .fm-a-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 22px 22px 20px; background: linear-gradient(150deg, rgba(24, 40, 30, 0.9) 0%, rgba(13, 22, 17, 0.92) 55%, rgba(10, 17, 13, 0.95) 100%); border: 1px solid var(--adm-line); box-shadow: var(--adm-shadow); } .fm-a-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.55), rgba(var(--fm-primary-rgb), 0.4), transparent); } .fm-a-hero::after { content: ''; position: absolute; right: -60px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--fm-primary-rgb), 0.14) 0%, transparent 70%); pointer-events: none; } .fm-a-hero-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--adm-gold); margin-bottom: 6px; } .fm-a-hero h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--adm-ink); margin: 0 0 6px; } .fm-a-hero p { font-size: 13px; color: var(--adm-ink-soft); margin: 0; max-width: 52ch; line-height: 1.55; } /* Zoekbalk */ .fm-a-zoek { position: relative; margin-top: 16px; } .fm-a-zoek input { width: 100%; padding: 12px 40px 12px 40px; border-radius: 14px; font-size: 14px; color: var(--adm-ink); background: rgba(0, 0, 0, 0.32); border: 1px solid var(--adm-line-hi); transition: border-color .15s, box-shadow .15s, background .15s; } .fm-a-zoek input::placeholder { color: var(--adm-ink-faint); } /* type="search" krijgt in Chromium een eigen wis-kruisje. Dat stond naast het onze: twee kruisjes naast elkaar, waarvan er één ook nog anders gestileerd was. De onze blijft, want die is in beide thema's leesbaar en heeft een fatsoenlijk aanraakvlak op een telefoon. */ .fm-a-zoek input::-webkit-search-cancel-button, .fm-a-zoek input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .fm-a-zoek input:focus { outline: none; border-color: rgba(var(--fm-primary-rgb), 0.55); background: rgba(0, 0, 0, 0.45); box-shadow: 0 0 0 3px rgba(var(--fm-primary-rgb), 0.13); } .fm-a-zoek-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--adm-ink-faint); pointer-events: none; } .fm-a-zoek-wis { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px; display: none; align-items: center; justify-content: center; color: var(--adm-ink-faint); font-size: 15px; line-height: 1; background: transparent; border: 0; cursor: pointer; } .fm-a-zoek-wis:hover { color: var(--adm-ink); background: rgba(255, 255, 255, 0.07); } .fm-a-zoek.heeft-tekst .fm-a-zoek-wis { display: flex; } .fm-a-zoek-telling { margin-top: 8px; font-size: 12px; color: var(--adm-ink-faint); display: none; } .fm-a-zoek.heeft-tekst .fm-a-zoek-telling { display: block; } /* ── §4. Navigatiekolom ──────────────────────────────────────────────────── Groepen als hoofdstukken. De actieve sectie krijgt een gouden streep links in plaats van een vlak: dat leest rustiger naast 27 regels. */ .fm-a-nav { border-radius: var(--adm-radius); padding: 10px; background: var(--adm-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--adm-line); box-shadow: var(--adm-shadow); max-height: calc(100vh - 6rem); overflow-y: auto; scrollbar-width: thin; } .fm-a-nav::-webkit-scrollbar { width: 5px; } .fm-a-nav::-webkit-scrollbar-thumb { background: var(--adm-line-hi); border-radius: 999px; } .fm-a-nav-groep { display: flex; align-items: center; gap: 7px; padding: 12px 10px 5px; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--adm-ink-faint); } .fm-a-nav-groep:first-child { padding-top: 4px; } .fm-a-nav-groep i { flex: 1; height: 1px; font-style: normal; background: linear-gradient(90deg, var(--adm-line-hi), transparent); } .fm-a-nav a { position: relative; display: block; padding: 7px 10px 7px 13px; border-radius: 10px; font-size: 13px; color: var(--adm-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s, background .15s; } .fm-a-nav a::before { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 2px; height: 0; border-radius: 2px; background: var(--adm-gold); transition: height .18s ease; } .fm-a-nav a:hover { color: var(--adm-ink); background: rgba(255, 255, 255, 0.05); } .fm-a-nav a.is-actief { color: var(--adm-ink); background: rgba(var(--fm-primary-rgb), 0.09); font-weight: 600; } .fm-a-nav a.is-actief::before { height: 16px; } /* Mobiele menubalk */ .fm-a-nav-mob { background: rgba(8, 14, 10, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--adm-line); } .fm-a-nav-mob > summary { padding: 11px 16px; font-size: 13px; font-weight: 600; color: var(--adm-ink-soft); display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; list-style: none; } .fm-a-nav-mob > summary::-webkit-details-marker { display: none; } .fm-a-nav-mob[open] > summary { color: var(--adm-ink); } .fm-a-nav-mob-links { padding: 0 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .fm-a-nav-mob-links .fm-a-nav-groep { grid-column: 1 / -1; padding: 8px 4px 2px; } .fm-a-nav-mob-links a { display: block; padding: 8px 10px; border-radius: 10px; font-size: 12px; color: var(--adm-ink-soft); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--adm-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fm-a-nav-mob-links a:active { background: rgba(var(--fm-primary-rgb), 0.14); color: var(--adm-ink); } /* ── §5. Hoofdstuktitel tussen de kaarten ─────────────────────────────────── */ .fm-a-hoofdstuk { display: flex; align-items: baseline; gap: 12px; padding: 14px 2px 2px; } .fm-a-hoofdstuk b { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--adm-gold); white-space: nowrap; } .fm-a-hoofdstuk span { font-size: 12px; color: var(--adm-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fm-a-hoofdstuk i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--adm-line-hi), transparent); } /* ── §6. De sectiekaart ──────────────────────────────────────────────────── Eén vorm voor alle 27 blokken: glas, haarlijn bovenlangs, zachte schaduw. De haarlijn zit op ::before — ::after blijft vrij voor toekomstige status. */ .fm-a-card { position: relative; border-radius: var(--adm-radius); padding: 18px; background: var(--adm-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--adm-line); box-shadow: var(--adm-shadow); transition: border-color .2s, box-shadow .2s; } .fm-a-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--adm-radius) var(--adm-radius) 0 0; background: linear-gradient(90deg, transparent 8%, var(--adm-line-hi) 50%, transparent 92%); } .fm-a-card:hover { border-color: var(--adm-line-hi); } .fm-a-card:focus-within { border-color: rgba(var(--fm-primary-rgb), 0.32); } /* Koprij: icoontegel + titel + acties + chevron. ⚠️ `flex-wrap: wrap` is hier geen franje maar een eis. Een aantal koppen draagt een hele werkbalk (datumvelden, keuzelijst, twee knoppen). Zonder wrap krimpen die niet onder hun min-content-breedte en schuiven ze dwars over de titel heen — exact dezelfde bug als de badge over de teamnaam in v2.8.233. Gemeten op 390px: "Rendement" verdween achter de datumkiezer. De `order`-nummers regelen waar de werkbalk terechtkomt: naast de titel als het past, op een eigen regel als het niet past. */ .fm-a-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; cursor: pointer; user-select: none; } .fm-a-ico { order: 1; flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; border-radius: 13px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)); border: 1px solid var(--adm-line-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* flex-basis 180px: de titel mag krimpen, maar nooit tot niets. Wordt het krapper dan dat, dan wrapt de werkbalk eronder in plaats van eroverheen. */ .fm-a-ttl { order: 2; min-width: 0; flex: 1 1 180px; } .fm-a-ttl h2 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; color: var(--adm-ink); margin: 0; /* ⚠️ De inklap-code zette hier ooit display:flex op de h2 zelf om het pijltje ernaast te krijgen. Dat mag niet terug: het pijltje hoort in de koprij, niet in de titel — anders springt de tekst bij lange namen. */ } .fm-a-ttl p { font-size: 12px; color: var(--adm-ink-faint); margin: 2px 0 0; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fm-a-act { order: 3; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .fm-a-chev { order: 4; flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--adm-ink-faint); border-radius: 8px; transition: transform .18s ease, color .15s, background .15s; } .fm-a-head:hover .fm-a-chev { color: var(--adm-ink-soft); background: rgba(255, 255, 255, 0.06); } .fm-a-card[data-open="0"] .fm-a-chev { transform: rotate(-90deg); } /* ── §7. Uitleg in jip-en-janneketaal ────────────────────────────────────── ⚠️ Dit blok staat BEWUST BUITEN de inklap-body. Klap je een kaart dicht, dan blijft zichtbaar wát hij doet — anders houd je 27 dichte deuren zonder opschrift over, en dat is precies het overzicht dat de gebruiker miste. */ .fm-a-uitleg { position: relative; margin-top: 14px; padding: 12px 14px 12px 17px; border-radius: 14px; background: linear-gradient(120deg, rgba(201, 169, 97, 0.06), rgba(255, 255, 255, 0.022) 55%); border: 1px solid rgba(201, 169, 97, 0.14); } .fm-a-uitleg::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--adm-gold), rgba(var(--fm-primary-rgb), 0.65)); } .fm-a-u-rij { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.6; } .fm-a-u-rij + .fm-a-u-rij { margin-top: 7px; padding-top: 7px; border-top: 1px dashed rgba(255, 255, 255, 0.07); } .fm-a-u-lab { flex: none; font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--adm-gold); padding-top: 2px; min-width: 74px; /* vaste kolom: anders begint elke zin op een andere x */ } .fm-a-u-txt { color: var(--adm-ink-soft); min-width: 0; } .fm-a-u-txt b { color: var(--adm-ink); font-weight: 600; } /* De technische toelichting: dichtgeklapt onder de gewone-taal-uitleg. Hij is niet verdwenen — bij een storing is dat juist de tekst die de precieze voorwaarden noemt. Hij hoort alleen niet vóór het jip-en-janneke. */ .fm-a-detail { margin-top: 9px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, 0.07); } .fm-a-detail > summary { cursor: pointer; user-select: none; list-style: none; font-size: 11.5px; font-weight: 600; color: var(--adm-ink-faint); display: flex; align-items: center; gap: 5px; transition: color .15s; } .fm-a-detail > summary::-webkit-details-marker { display: none; } .fm-a-detail > summary::before { content: '▸'; font-size: 9px; transition: transform .15s; } .fm-a-detail[open] > summary::before { transform: rotate(90deg); } .fm-a-detail > summary:hover { color: var(--adm-ink-soft); } .fm-a-detail-txt { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--adm-ink-faint); } .fm-a-detail-txt b { color: var(--adm-ink-soft); font-weight: 600; } html[data-fm-theme="ivory"] .fm-a-detail { border-top-color: rgba(23, 19, 13, 0.12); } /* ── §8. Vormgeving van de bestaande inhoud ──────────────────────────────── De blokken binnenin dragen nog Tailwind. Hier alleen de scherpe randjes: tabellen ademend, knoppen luxer, tegels met glas. */ .fm-a-card table { font-variant-numeric: tabular-nums; } .fm-a-card th { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--adm-ink-faint); } .fm-a-card button:not(.fm-a-chev) { letter-spacing: .005em; } .fm-a-card .bg-dark-700 { border-radius: 14px; } .sec-collapse-body { margin-top: 14px; } /* ── §9. Ivory (licht thema) ─────────────────────────────────────────────── Zonder dit blok blijft de adminlaag donkergroen op warm papier: onze eigen klassen worden niet door de Tailwind-omzetting van style.css geraakt. */ html[data-fm-theme="ivory"] { --adm-ink: #17130d; --adm-ink-soft: #4c463c; --adm-ink-faint: #6b6153; --adm-surface: rgba(255, 253, 248, 0.86); --adm-surface-hi: #fffdf8; --adm-line: rgba(23, 19, 13, 0.10); --adm-line-hi: rgba(23, 19, 13, 0.17); --adm-gold: #9a7526; --adm-shadow: 0 18px 40px -30px rgba(60, 48, 25, 0.55); } html[data-fm-theme="ivory"] body.fm-admin { background-color: #f3ede1 !important; background-image: radial-gradient(ellipse 120% 55% at 50% -10%, rgba(var(--fm-primary-rgb), 0.07) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 92% 100%, rgba(176, 141, 71, 0.07) 0%, transparent 65%) !important; color: #17130d; } html[data-fm-theme="ivory"] .fm-a-topbar { background: linear-gradient(180deg, rgba(255, 253, 248, 0.94), rgba(243, 237, 225, 0.9)); } html[data-fm-theme="ivory"] .fm-a-hero { background: linear-gradient(150deg, #fffdf8 0%, #f7f1e5 60%, #f3ede1 100%); } html[data-fm-theme="ivory"] .fm-a-zoek input { background: #fffdf8; color: #17130d; } html[data-fm-theme="ivory"] .fm-a-zoek input:focus { background: #fff; } html[data-fm-theme="ivory"] .fm-a-ico { background: linear-gradient(145deg, rgba(23, 19, 13, 0.05), rgba(23, 19, 13, 0.015)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } html[data-fm-theme="ivory"] .fm-a-uitleg { background: linear-gradient(120deg, rgba(176, 141, 71, 0.10), rgba(255, 255, 255, 0.5) 55%); border-color: rgba(154, 117, 38, 0.22); } html[data-fm-theme="ivory"] .fm-a-nav a:hover, html[data-fm-theme="ivory"] .fm-a-link:hover { background: rgba(23, 19, 13, 0.05); } html[data-fm-theme="ivory"] .fm-a-nav-mob { background: rgba(243, 237, 225, 0.96); } html[data-fm-theme="ivory"] .fm-a-nav-mob-links a { background: rgba(255, 253, 248, 0.9); } html[data-fm-theme="ivory"] .fm-a-u-rij + .fm-a-u-rij { border-top-color: rgba(23, 19, 13, 0.1); } /* ── §10. Telefoon ───────────────────────────────────────────────────────── Onder 640px wint de informatie van de versiering: kleinere tegels, kortere marges, en het uitleg-label boven de zin in plaats van ernaast (naast elkaar houdt een zin van 40 tekens anders maar ~14 tekens per regel over). */ @media (max-width: 640px) { .fm-a-hero { padding: 18px 16px 16px; border-radius: 20px; } .fm-a-hero h1 { font-size: 21px; } .fm-a-hero p { font-size: 12.5px; } .fm-a-card { padding: 14px; border-radius: 16px; } .fm-a-ico { width: 34px; height: 34px; font-size: 16px; border-radius: 11px; } .fm-a-ttl h2 { font-size: 14px; } .fm-a-head { gap: 10px; } /* Op een telefoon krijgt de werkbalk ALTIJD een eigen regel onder de titel: het pijltje schuift naar voren (order 3) en de knoppen naar erachter. Een volle regel kán niet overlopen — zelfde redenering als .mc-btts. */ .fm-a-chev { order: 3; } .fm-a-act { order: 4; flex: 1 0 100%; justify-content: flex-start; margin-top: 2px; } .fm-a-uitleg { padding: 11px 12px 11px 15px; } .fm-a-u-rij { flex-direction: column; gap: 2px; font-size: 12px; } .fm-a-u-lab { min-width: 0; padding-top: 0; } .fm-a-nav-mob-links { grid-template-columns: 1fr; } } /* Respecteer de systeemvoorkeur voor minder beweging. */ @media (prefers-reduced-motion: reduce) { .fm-a-card, .fm-a-chev, .fm-a-nav a, .fm-a-nav a::before, .fm-a-link { transition: none; } } /* ── §11. Handmatige thermostaat- en kalibratieknoppen (v2.8.255) ─────────── Gebruikersverzoek: "Bouw handmatige thermostaat en kaliber knoppen, behoud de automatische functies maar wil ook handmatig knoppen erbij zodat ik zelf kan instellen zoals ik het wil." ⚠️ EIGEN KLASSEN, GEEN LOSSE TAILWIND-COMBINATIES. Tailwind-classes die alleen in dit blok zouden voorkomen zitten NIET in de gepurgde build — dat is de bug van v2.8.184 die tests/test_geen_advies_contract.py sindsdien bewaakt. ⚠️ .fm-kh-rij MOET flex-wrap houden en .fm-kh-lab een `flex: 1 1 220px`. Zonder dat kneep de +/-/invoer-groep de labelkolom naar 0px en liep de uitlegzin dwars over de knoppen — exact dezelfde bugfamilie als .fm-a-head in v2.8.239 en de badge over de teamnaam in v2.8.233. Een element dat per definitie breed kan zijn (een zin) hoort een eigen regel te krijgen; op de telefoon doet `flex: 1 0 100%` op .fm-kh-stel dat. */ .fm-kh { border: 1px solid var(--adm-line); border-radius: 14px; padding: 14px; margin-bottom: 16px; background: rgba(255, 255, 255, 0.02); } .fm-kh-kop { margin-bottom: 12px; } /* De drie modusknoppen. Een grid en geen flex: zo zijn ze even breed en leest de rij als één keuze in plaats van drie losse knoppen. */ .fm-kh-modi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .fm-kh-modus { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 11px; border: 1px solid var(--adm-line-hi); border-radius: 11px; background: rgba(255, 255, 255, 0.02); color: var(--adm-ink-soft); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .fm-kh-modus b { font-size: 13px; color: var(--adm-ink); font-weight: 600; } .fm-kh-modus span { font-size: 11.5px; line-height: 1.45; } .fm-kh-modus:hover { border-color: var(--adm-line-hi); background: rgba(255, 255, 255, 0.05); } .fm-kh-modus.is-aan { border-color: rgba(var(--fm-primary-rgb, 34, 197, 94), .55); background: rgba(var(--fm-primary-rgb, 34, 197, 94), .10); color: var(--adm-ink); } .fm-kh-modus:focus-visible { outline: 2px solid var(--fm-primary-light, #4ade80); outline-offset: 2px; } .fm-kh-groepen { display: grid; gap: 12px; } .fm-kh-groep { border: 1px solid var(--adm-line); border-radius: 12px; padding: 10px 12px; } .fm-kh-groep-kop { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--adm-ink-faint); font-weight: 600; margin-bottom: 8px; } .fm-kh-groep-kop i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; } .fm-kh-rij { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 0; } .fm-kh-rij + .fm-kh-rij { border-top: 1px solid var(--adm-line); } .fm-kh-lab { flex: 1 1 220px; min-width: 0; } .fm-kh-lab b { display: block; font-size: 12.5px; color: var(--adm-ink); font-weight: 600; } .fm-kh-lab span { display: block; font-size: 11.5px; color: var(--adm-ink-soft); line-height: 1.45; margin-top: 2px; } .fm-kh-stel { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .fm-kh-knop { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--adm-line-hi); border-radius: 9px; background: rgba(255, 255, 255, 0.04); color: var(--adm-ink); font-size: 15px; line-height: 1; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .fm-kh-knop:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--adm-line-hi); } .fm-kh-knop:focus-visible { outline: 2px solid var(--fm-primary-light, #4ade80); outline-offset: 2px; } .fm-kh-inp { width: 64px; padding: 6px 8px; border: 1px solid var(--adm-line-hi); border-radius: 9px; background: rgba(0, 0, 0, 0.25); color: var(--adm-ink); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; } .fm-kh-inp:focus { outline: none; border-color: rgba(var(--fm-primary-rgb, 34, 197, 94), .55); } /* De spinner van type=number weg: er staan al eigen +/- knoppen naast, en twee bedieningen voor hetzelfde getal is precies de ruis die dit paneel moest kwijtraken. */ .fm-kh-inp::-webkit-outer-spin-button, .fm-kh-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .fm-kh-inp { -moz-appearance: textfield; appearance: textfield; } .fm-kh-eh { font-size: 11.5px; color: var(--adm-ink-faint); min-width: 34px; } /* Modus 'auto': de correctievelden doen dan niets. Ze blijven leesbaar (je moet kunnen zien wat er klaarstaat) maar gedempt, zodat een ingevulde -5 niet lijkt te werken terwijl hij niets doet. Bewust GEEN `disabled`: dan kun je niets voorbereiden voordat je omschakelt. */ .fm-kh.is-slapend .fm-kh-groepen { opacity: .55; } .fm-kh-voet { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .fm-kh-btn { padding: 7px 14px; border: 1px solid var(--adm-line-hi); border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: var(--adm-ink); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .fm-kh-btn:hover { background: rgba(255, 255, 255, 0.09); } .fm-kh-btn.is-primair { background: rgba(var(--fm-primary-rgb, 34, 197, 94), .16); border-color: rgba(var(--fm-primary-rgb, 34, 197, 94), .45); } .fm-kh-btn.is-primair:hover { background: rgba(var(--fm-primary-rgb, 34, 197, 94), .25); } .fm-kh-btn:disabled { opacity: .55; cursor: progress; } .fm-kh-btn:focus-visible { outline: 2px solid var(--fm-primary-light, #4ade80); outline-offset: 2px; } /* v2.8.335 — "er staan getallen die niets doen". Eigen klasse, GEEN Tailwind: admin.css is de aparte laag van dit paneel (v2.8.239) en een Tailwind-klasse die niet in de gebouwde CSS staat valt STIL terug op de geerfde kleur (v2.8.324). Met een ivory-tegenhanger, zoals elke kleurdragende klasse hier. */ .fm-kh-slaapt { margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.5; border: 1px solid #7f3b38; background: rgba(127, 59, 56, 0.22); color: #f0b7b2; } html[data-fm-theme="ivory"] .fm-kh-slaapt { border-color: #d9a7a2; background: #fbeceb; color: #8c2f27; } .fm-kh-slaapt.hidden { display: none; } .fm-kh-msg { font-size: 12px; color: var(--adm-ink-soft); } .fm-kh-msg.is-ok { color: #6ee7a0; } .fm-kh-msg.is-fout { color: #e08a84; } .fm-kh-vb { margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--adm-line); font-size: 11.5px; color: var(--adm-ink-soft); line-height: 1.5; } /* Warm papier: de donkere basiswaarden hierboven zijn daar onleesbaar. Zelfde noodzaak als de ivory-tegenhangers van de scorebord-kaart (v2.8.243). */ html[data-fm-theme="ivory"] .fm-kh { background: rgba(255, 253, 248, 0.6); } html[data-fm-theme="ivory"] .fm-kh-modus { background: rgba(255, 253, 248, 0.85); } html[data-fm-theme="ivory"] .fm-kh-inp { background: rgba(255, 253, 248, 0.95); } html[data-fm-theme="ivory"] .fm-kh-knop, html[data-fm-theme="ivory"] .fm-kh-btn { background: rgba(255, 253, 248, 0.85); } html[data-fm-theme="ivory"] .fm-kh-vb { background: rgba(255, 253, 248, 0.75); } html[data-fm-theme="ivory"] .fm-kh-msg.is-fout { color: #a3352c; } html[data-fm-theme="ivory"] .fm-kh-msg.is-ok { color: #1c7a45; } @media (max-width: 640px) { /* Drie modusknoppen naast elkaar zijn op 320px elk ~95px breed; de uitlegzin valt dan uiteen in losse woorden. Onder elkaar dus. */ .fm-kh-modi { grid-template-columns: 1fr; } /* De +/- groep krijgt een eigen volle regel: zo kan de labelzin nooit worden platgedrukt. Zie de waarschuwing bovenaan dit blok. */ .fm-kh-stel { flex: 1 0 100%; justify-content: flex-start; } .fm-kh-lab { flex: 1 0 100%; } } @media (prefers-reduced-motion: reduce) { .fm-kh-modus, .fm-kh-knop, .fm-kh-btn { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ DE DRAAIKNOP (v2.8.330) — .fm-kd* ═══════════════════════════════════════════════════════════════════════════ Verzoek eigenaar 2026-08-22: "bouw de hele thermostaat zo als echte thermostaat als ik er op draai (…) dat de cijfers automatisch als echte thermostaat mee draaien in lege velden en echt aangepast worden." ⚠️ EIGEN KLASSEN, GEEN TAILWIND — en dat is hier geen stijlkeuze maar een constructie-eis. `static/css/tailwind.css` is een HANDMATIG gecommit artefact (v2.8.325): een klasse die je toevoegt zonder de build opnieuw te draaien BESTAAT niet en valt STIL terug op de geërfde kleur. Precies zo verloor het runway-paneel in v2.8.324 al zijn kleuren. Met eigen klassen hier én een ivory-tegenhanger per klasse kan die faalwijze per constructie niet optreden. ⚠️ DE RING IS EEN SVG, GEEN CONIC-GRADIENT. Een `conic-gradient` kan geen afgeronde uiteinden en geen losse markering op de schaal dragen, en het advies-streepje mét spelingband is juist de hele reden dat deze knop bestaat: je draait naar het streepje toe. ⚠️ `touch-action: none` OP DE RING IS VERPLICHT. Zonder dat vangt de browser de verticale sleep als paginascroll af en draait de knop op een telefoon niet — de pointermove-events komen dan simpelweg niet aan. */ .fm-kd { margin-top: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--adm-line); background: rgba(0, 0, 0, 0.18); } .fm-kd-kop { margin-bottom: 10px; } .fm-kd-kop b { display: block; font-size: 13px; color: var(--adm-ink); font-weight: 600; } .fm-kd-kop span { display: block; font-size: 11.5px; color: var(--adm-ink-soft); line-height: 1.45; margin-top: 2px; } /* Welke knop bedient de draaiknop? Chips in plaats van een