/* Merktokens — zie BRANDING.md. Kleur is de uitzondering, niet de regel: accent alleen waar geklikt of gekeken moet worden. */ :root { /* Vlakken, van achter naar voren */ --bg: #F6F7FB; --panel: #EEEFF6; --panel-2: #E3E4EE; --card: #fff; --fill: #F3F4FA; /* --muted was #7C7C99 en haalde op wit maar 4,04:1 — net onder de 4,5 die nodig is om gewone tekst leesbaar te noemen, en op --panel zelfs 3,52. #6A6A85 haalt 5,23 op de kaart, 4,77 op --fill en 4,56 op --panel, en houdt dezelfde blauwpaarse zweem: de neutralen hier zijn met opzet geen kaal grijs. Nagemeten 04-08-2026; het donkere thema zat met 6,33 al goed. */ --ink: #16163A; --on-ink: #fff; --muted: #6A6A85; --line: #E6E7F0; /* Oranje is de bediening. Op een oranje vlak hoort donkere tekst (5,4:1); oranje áls tekst is een tint donkerder dan het vlak, anders haalt hij de leesbaarheidsnorm niet. */ --accent: #EA580C; --accent-600: #C2410C; --accent-50: #FFF1E9; --accent-text: #C2410C; --on-accent: #1A1005; /* Het merk volgt het actieve project; zonder project is het oranje. --brand-ink is het vinkje erin: wit op oranje, donker op een lichte projectkleur — anders verdwijnt het merk in zijn eigen vlak. */ --brand: var(--accent); --brand-ink: #fff; /* Tekst op een lichte projectkleur — die kleuren zijn te licht voor wit. */ --on-color: #10131A; --danger: #DC2626; --warn-bg: #FDF3E3; --danger-bg: #FDF2F2; --ok: #15803D; --ok-bg: #EFF7EF; --warn: #B45309; --info: #1D4ED8; --info-bg: #EEF6FF; --claude: #B45309; --claude-bg: #FEF3E2; --claude-line: #F3DCB8; /* radius vertelt de rol: pil = primaire actie, card = drijvend vlak, ctrl = alledaagse besturing */ --r-pill: 999px; --r-card: 14px; --r-ctrl: 9px; --shadow: 0 8px 30px rgba(22,22,58,.10); --shadow-card: 0 1px 2px rgba(22,22,58,.07); --shadow-menu: 0 10px 34px rgba(22,22,58,.16); --shadow-dlg: 0 20px 60px rgba(22,22,58,.25); --toon-shadow: rgba(22,22,58,.85); --scrim: rgba(22,22,58,.35); --scrim-strong: rgba(16,16,40,.6); /* het vergrootglas in het zoekveld zit in een data-URI en kan geen variabele lezen — vandaar één keer licht en één keer donker */ --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C7C99' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); /* ── Wat er onderaan het scherm staat ──────────────────────── Vier dingen wilden de bodem: de kolomnavigatie, de balk bij een opgepakte kaart, het paneel met draaiende AI-taken, en de onderruimte van het bord. Ze rekenden alle vier met een eigen getal, en dus klopte er altijd wel eentje niet. Eén hoogte, één inzet, en iedereen wijst hierheen. Boven 560px staat er geen balk: dan is --balkh 0 en verandert er niets. */ --balkh: 0px; --balk-onder: 0px; /* Hoe ver de balk zelf van de onderrand zweeft. Zit in --bodem, zodat alles wat eromheen moet dat in één getal krijgt. */ --balk-zweef: 0px; /* Wat een zwevend paneel of een opgepakte kaart vrij moet houden. */ --bodem: calc(var(--balkh) + var(--balk-onder) + var(--balk-zweef)); } /* ── Donker: zwart met oranje ────────────────────────────────── Zelfde tokens, andere waarden. Alles wat hieronder in het blad staat rekent met de tokens, dus het thema is één omschakeling. */ :root[data-theme="dark"] { --bg: #0B0C10; --panel: #15171D; --panel-2: #1E212A; --card: #1B1E26; --fill: #22262F; --ink: #F4F5F7; --on-ink: #0B0C10; --muted: #98A0AE; --line: #2A2F3A; --accent: #EA580C; --accent-600: #F97316; --accent-50: #2E1608; --accent-text: #FB923C; --on-accent: #140A02; --on-color: #10131A; --danger: #F87171; --warn-bg: #2A1F08; --danger-bg: #2B1516; --ok: #4ADE80; --ok-bg: #12251A; --warn: #FBBF24; --info: #93C5FD; --info-bg: #13223B; --claude: #FBBF24; --claude-bg: #2A1D09; --claude-line: #4A3413; --shadow: 0 12px 34px rgba(0,0,0,.6); --shadow-card: 0 1px 2px rgba(0,0,0,.5); --shadow-menu: 0 14px 38px rgba(0,0,0,.65); --shadow-dlg: 0 24px 64px rgba(0,0,0,.7); --toon-shadow: rgba(0,0,0,.8); --scrim: rgba(0,0,0,.62); --scrim-strong: rgba(0,0,0,.72); --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A0AE' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); color-scheme: dark; } * { box-sizing: border-box; margin: 0; } body { font: 15px/1.5 -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--ink); } /* Eén schuifbalk tegelijk (12-10-2026, Sven: "er staan hier twee schuifbalken"): staat er een venster open, dan schuift alleen dat venster; de pagina erachter staat stil en toont geen tweede balk. */ html:has(dialog[open]:modal) { overflow: hidden; } button { font: inherit; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; background: var(--card); } /* ⚠️ De uitklaplijst van een / in een pilvorm. Bewust native: op een telefoon krijg je zo de eigen keuzewiel en datumkiezer van het toestel, toetsenbord en schermlezer werken vanzelf, en een eigen menu zou áchter de dialoog vallen (zie de opmerking bij tipEl). */ .chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .chip-f { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; border: 1.5px solid transparent; background: var(--fill); border-radius: 999px; padding: 2px 8px; } .chip-f:hover { border-color: var(--line); } .chip-f:focus-within { border-color: var(--accent); } /* Aanwijzen zonder pijl: de chip zelf gloeit tot je gekozen hebt. Gezet vanuit runNow() in js/task.js zodra je "Kies de AI op de kaart" aantikt — die knop staat onderin het venster en de chip bovenin, en dat is precies de afstand waarop een tekst alleen niet genoeg is. Sven, 17-08-2026. `!important` op de rand omdat :hover en :focus-within dezelfde eigenschap zetten en die anders wint zodra de muis er langsgaat. */ /* Suggesties bij het typen van een @. Vast gepositioneerd en aan gehangen: de chat zit in een venster met eigen schuifgedrag, en een lijst die daarbinnen hangt wordt afgeknipt door de eerste `overflow` die hij tegenkomt. */ /* De regel in het stappaneel die zegt wélke handeling de sport afrondt. Wél opvallend en niet als `.note` weggezet: het paneel legde tot 18-08-2026 alleen uit wát een functie is en waaróm hij vrijblijvend is, en nooit wat je moest doen. Dit is het antwoord op die vraag, dus het mag gezien worden. */ .hoe { margin-top: 14px; padding: 9px 11px; border-radius: 10px; background: var(--fill); border-inline-start: 3px solid var(--accent); } .noemlijst { position: fixed; z-index: 90; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.18); } .noemrij { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; background: none; cursor: pointer; text-align: start; font: inherit; color: inherit; } .noemrij.aan, .noemrij:hover { background: var(--fill); } .noemrij img, .noemrij .noemleeg { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; } .noemrij .noemleeg { background: var(--fill); border: 1px solid var(--line); } .noemrij .noemai { width: 20px; text-align: center; color: var(--accent); flex: 0 0 auto; } .noemrij .note { margin-inline-start: auto; font-size: 12px; } /* Het korte kaart-id in de #-kiezer (bedraadKaartKiezer). */ .noemrij .noemid { font-family: var(--mono, monospace); font-size: .8em; color: var(--muted); flex: 0 0 auto; } /* Eén vermelding in het overzicht. De tekst mag afbreken maar niet uitlopen: het fragment is 200 tekens en een lange regel zou het venster verbreden. */ .noemmelding { padding: 9px 0; border-block-end: 1px solid var(--line); overflow-wrap: anywhere; } .noemmelding:last-of-type { border-block-end: 0; } .chip-f.gloed { border-color: var(--accent) !important; animation: chipgloed 1.6s ease-in-out infinite; } @keyframes chipgloed { 0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, .45); } 50% { box-shadow: 0 0 0 6px rgba(234, 88, 12, 0); } } /* Wie beweging heeft uitgezet krijgt een stilstaande ring — hetzelfde signaal, zonder de puls. Weglaten zou de aanwijzing juist dáár slopen. */ @media (prefers-reduced-motion: reduce) { .chip-f.gloed { animation: none; box-shadow: 0 0 0 3px rgba(234, 88, 12, .35); } } /* De uitleg blijft in de keuzelijst staan ("Claude Code — volledige toegang tot de computer"); alleen de chip zelf kort af. Zo hou je een leesbare keuze zonder dat de rij dichtslibt. */ /* De tijd naast een datum: smal, want het is altijd HH:MM. */ .chip-f > input.tijd { max-width: 88px; } /* Het kruisje waarmee je een datum, tijd of herhaling weer weghaalt. Het hoort bij de chip te horen en niet te schreeuwen: grijs, en pas rood als je erop staat. (10-09-2026, Marta: toevoegen kon wel, weghalen niet.) */ .chip-f > .mini { flex: 0 0 auto; border: none; background: none; color: var(--muted); font-size: .78rem; line-height: 1; padding: 0 2px; cursor: pointer; } .chip-f > .mini:hover, .chip-f > .mini:focus-visible { color: var(--danger); } /* ── Waarop wacht deze kaart ────────────────────────────────── Een eigen blok en geen chip meer: drie soorten, en per soort een keuzelijst, een lijst blokkeerders of een tekstveld — plus een datum met een tijd. Dat past niet meer op één regel. Zie het commentaar bij #waitBox in js/task.js. */ .waitbox { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 12px 0; background: var(--panel); display: flex; flex-direction: column; gap: 8px; } .wsoorten { display: flex; gap: 6px; flex-wrap: wrap; } .wsoort { border: 1.5px solid var(--line); background: var(--card); border-radius: var(--r-pill); padding: 4px 12px; font-size: .8rem; font-weight: 600; color: var(--muted); cursor: pointer; } .wsoort.on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-50); } .waitbox .frow { display: flex; align-items: center; gap: 8px; } .waitbox .frow > input, .waitbox .frow > select { flex: 1 1 auto; min-width: 0; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--card); color: var(--ink); } .waitbox .frow.wanneer > input { flex: 0 1 auto; } .waitbox .flbl { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; flex: 0 0 auto; } .wnieuw { display: flex; flex-direction: column; gap: 6px; } .wnieuw input { border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--card); color: var(--ink); } .wblokken { display: flex; flex-direction: column; gap: 4px; } /* min-width: 0 op de titel — anders legt een lange kaarttitel zijn volle breedte op als ondergrens en groeit het blok buiten de kaart. Vandaag voor de vijfde keer; zie de opmerking bij .calmain. */ .wblok { display: flex; align-items: center; gap: 6px; font-size: .82rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; } .wblok > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wblok.klaar { color: var(--muted); text-decoration: line-through; } .wtreffers { display: flex; flex-direction: column; gap: 3px; } .wtreffer { text-align: start; border: 1px dashed var(--line); background: none; border-radius: 8px; padding: 5px 9px; font-size: .8rem; color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wtreffer:hover { border-color: var(--accent); background: var(--accent-50); } /* ── Het adresboek in de instellingen ───────────────────────── Eén regel per contact: naam boven, adres en nummer eronder in het klein. min-width: 0 op de naamkolom — anders legt een lang e-mailadres zijn volle breedte op en groeit de rij buiten het venster. */ .crow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); } .crow:first-child { border-top: 0; } .cnaam { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .cnaam b { font-size: .88rem; } .cnaam .note, .crow > .note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .csep { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 2px; } .cshare { background: var(--fill); border-radius: 8px; padding: 8px 10px; margin: 2px 0 8px; display: flex; flex-direction: column; gap: 5px; } .cshare .inline { display: flex; align-items: center; gap: 7px; font-size: .84rem; } /* ── Erachteraan gaan ───────────────────────────────────────── Eén belknop die een rijtje uitklapt. Uitklappen en geen zwevend menu: dat werkt op een telefoon zonder positieberekening, en het valt nooit achter een venster — de kaart is een en die staat in de top layer. */ /* De landvraag verschijnt pas ná het opslaan van een nummer, op de plek waar dat gebeurde. Amber, want het is een vraag en geen fout. */ .landvraag { background: var(--warn-bg); border-radius: 8px; padding: 9px 11px; margin-top: 8px; display: flex; flex-direction: column; gap: 7px; } .landvraag .frow { display: flex; gap: 8px; align-items: center; } .landvraag select { flex: 1 1 auto; min-width: 0; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--card); color: var(--ink); } .cactie { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } .ckanalen { display: inline-flex; gap: 4px; flex-wrap: wrap; } .ckanalen .mini { text-decoration: none; white-space: nowrap; } .wcontact { gap: 10px; } .wcontact .note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── De agenda: vandaag, zeven dagen, of een periode ────────── Dag voor dag, en binnen een dag eerst wat een tijdstip heeft. Op een telefoon is dit de vorm die het maandraster nooit kon zijn. */ .calper { display: inline-flex; gap: 4px; background: var(--fill); border-radius: var(--r-pill); padding: 3px; } .calperk { border: 0; background: none; border-radius: var(--r-pill); padding: 4px 11px; font-size: .78rem; font-weight: 600; color: var(--muted); cursor: pointer; } .calperk.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); } .agenda { display: flex; flex-direction: column; gap: 14px; } .adagkop { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: capitalize; padding: 0 0 5px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .adagkop.nu { color: var(--accent-text); } .agrij { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 8px; cursor: pointer; } .agrij:hover { background: var(--fill); } /* Vaste breedte voor de tijd, zodat de titels onder elkaar uitlijnen — een lijst waarin de tekst per regel opschuift leest twee keer zo traag. */ .atijd { flex: 0 0 46px; font-size: .8rem; font-weight: 700; color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; } .agrij.opvolg .atijd { color: var(--accent-text); } .agrij.laat .atijd { color: var(--danger); } .atitel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .atitel b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .atitel .note { display: flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .atitel .chipdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .chip-f > select, .chip-f > input { width: auto; max-width: min(38vw, 190px); border: none; background: none; color: var(--ink); font: inherit; font-size: .8rem; font-weight: 600; padding: 3px 0; border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; } /* Geen ring bij een muisklik, wél bij Tab: `:focus` zonder meer nam de toetsenbordgebruiker zijn enige aanwijzing af (analyse 05-09-2026). */ .chip-f > select:focus:not(:focus-visible), .chip-f > input:focus:not(:focus-visible) { outline: none; } .chip-f.ai > select { color: var(--accent-text); } .chipdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } /* Dezelfde plus als in de kopregel: oranje vlak met donkere tekst (--on-accent, want wit op oranje haalt de contrastnorm niet). Eén teken, één betekenis — "hier komt er iets bij" — dus ook één uiterlijk. */ .chipadd { border: 1.5px solid var(--accent); background: var(--accent); color: var(--on-accent); border-radius: 999px; width: 27px; height: 27px; font-size: .95rem; font-weight: 700; line-height: 1; flex: 0 0 auto; transition: background .12s ease, border-color .12s ease; } .chipadd:hover { background: var(--accent-600); border-color: var(--accent-600); color: var(--on-accent); } /* Op een groot scherm is 27px een speldenknop naast chips die het dubbele breed zijn — hij valt weg in de rij. Drie keer zo breed maakt er een échte knop van zonder dat hij iets anders gaat betekenen; hoogte en vorm blijven. Op een telefoon blijft hij rond: daar is de chiprij krap en is 27px al een prima raakvlak. */ @media (min-width: 561px) { .chipadd { width: 81px; } } /* Onderbalk: links wat er met je wijziging gebeurde, rechts de enige actie. */ .tdoc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; border-top: 1px solid var(--line); padding-top: 11px; } .savestate { flex: 1; font-size: .75rem; color: var(--muted); min-width: 120px; } .savestate button { border: none; background: none; color: var(--accent-text); font-size: .75rem; font-weight: 600; padding: 0 2px; } .tsec { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 6px; } @media (max-width: 560px) { .chip-f > select, .chip-f > input { max-width: 60vw; } .tdoc-foot .hbtn { width: 100%; text-align: center; } } .link { background: none; border: none; color: var(--danger); font-size: .82rem; padding: 0; } .comments { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; } .comment { background: var(--fill); border-radius: 8px; padding: 7px 10px; font-size: .85rem; white-space: pre-wrap; } .comment b { font-size: .75rem; color: var(--accent-text); display: block; white-space: normal; } .comment.claude b { color: var(--claude); } .comment .when { float: right; font-size: .7rem; color: var(--muted); } .cl-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .cl-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); } .cl-item .txt { flex: 1; font-size: .88rem; } .cl-item.done .txt { text-decoration: line-through; color: var(--muted); } .cl-item .mini { border: none; background: none; color: var(--muted); font-size: .75rem; padding: 2px 5px; border-radius: 5px; } .cl-item .mini:hover { background: var(--accent-50); color: var(--accent-text); } .prop-banner { background: var(--claude-bg); border: 1.5px dashed var(--claude); border-radius: 10px; padding: 10px 12px; font-size: .85rem; } /* Wacht op een bestemming: oranje in plaats van het AI-paars. Dit is geen voorstel van de AI om te beoordelen maar een vraag aan jou die openstaat zolang je hem laat staan. */ .prop-banner.pending { background: var(--accent-50); border-color: var(--accent); border-style: solid; } .prop-banner.pending b { color: var(--accent-text); } .badge.pending { background: var(--accent-50); color: var(--accent-text); } .prop-banner b { color: var(--claude); } .prop-banner .opts { margin: 8px 0; display: flex; flex-direction: column; gap: 5px; } /* Wikkelen, niet uitpuilen. Op 375px passen twee knoppen met een leesbaar opschrift niet naast elkaar; zonder deze regel duwen ze de kaart zijwaarts open, en horizontaal schuiven is precies wat een geopende kaart nooit mag. */ .prop-banner .pbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .prop-banner .pbtns > * { min-width: 0; } @media (max-width: 560px) { .prop-banner .pbtns { flex-direction: column; align-items: stretch; } .prop-banner .pbtns .hbtn { width: 100%; text-align: center; } } .proj-list { display: flex; flex-direction: column; gap: 10px; } .proj-row { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; } .proj-row .head { display: flex; align-items: center; gap: 8px; } .proj-row .head b { flex: 1; } .proj-row .small { font-size: .78rem; color: var(--muted); margin-top: 4px; } /* Borden samenvoegen (16-09-2026): één rij per persoon die nog niet op het hoofdbord staat, met avatar, naam en de keuze mee/niet als radioknoppen. */ .bs-lid { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bs-lid label { display: inline-flex; gap: 4px; align-items: center; } .bs-lid b { flex: 1; } .bs-lid .tavatar { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; } .invite-box { font-size: .78rem; background: var(--fill); border-radius: 8px; padding: 6px 9px; margin-top: 6px; word-break: break-all; } .members { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .members img { width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; } .cl-item select { width: auto; max-width: 120px; font-size: .75rem; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); } .file-item { border: 1.5px solid var(--line); border-radius: 10px; margin-top: 6px; } .file-item summary { cursor: pointer; padding: 8px 10px; font-size: .85rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ⚠️ De naam mag krimpen, de regel erachter niet. Een bestandsnaam is hier de kaarttitel + ".md" en dus lang; met `flex: 1` op de meta hield de naam alle ruimte en werd "Sven Stigter · 2026-08-03" tot nul geknepen — waarna de browser hem letter voor letter onder elkaar zette. Dezelfde val als het menu-item dat op 03-08-2026 "C h e c k l i s t" werd. Met flex-wrap zakt de meta naar een tweede regel als het écht niet past, in plaats van te verticaliseren. */ .file-item summary > b { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .file-item summary .meta, .file-item.drive .meta { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: .75rem; } .file-item.drive > b { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .file-item pre { margin: 0 10px 10px; padding: 10px; background: var(--fill); border-radius: 8px; font-size: .8rem; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto; } /* ── Werkbalk onderin terwijl de AI werkt ───────────────────── */ /* Onderin, gecentreerd, boven de kolomnavigatie op mobiel. De balk laat zien dát er iets gebeurt en waaraan; de melding erboven zegt dat het klaar is. */ #aiBar { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; pointer-events: none; } #aiBar:empty { display: none; } .aijob, .aitoast { pointer-events: auto; width: min(460px, calc(100vw - 24px)); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); } .aijob { padding: 9px 13px; } /* In een venster (de "bak"-optie van aiJobStart, zoals #chatWacht in de chat) is 100vw breder dan het venster zelf en stak het blok er rechts uit (Sven, 23-08-2026, telefoon). Daarbinnen geldt de vensterbreedte. */ dialog .aijob, dialog .aitoast { width: 100%; } .aijob .top { display: flex; align-items: center; gap: 8px; font-size: .84rem; } .aijob .name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aijob .pct { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .78rem; } .aijob .sub { font-size: .74rem; color: var(--muted); margin-top: 3px; } /* Meelezen met de AI. Er is bewust geen scrollbalk: het venster schuift mee met de laatste regels, zoals een terminal. Twee regels is genoeg om te zien dát er iets gebeurt zonder dat de balk het scherm opeet. */ .aijob .live { font-size: .74rem; color: var(--ink); margin-top: 5px; max-height: 2.6em; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; display: flex; flex-direction: column-reverse; } .aijob.done .live, .aijob.fail .live { display: none; } .aijob .spin { display: inline-block; animation: aispin 1.1s linear infinite; } .aijob.done .spin, .aijob.fail .spin { animation: none; } @keyframes aispin { to { transform: rotate(360deg); } } .aijob .track { height: 4px; border-radius: 999px; background: var(--line); margin-top: 7px; overflow: hidden; } .aijob .fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .45s ease; } .aijob.done .fill { background: var(--ok); } .aijob.fail .fill { background: var(--danger); } .aitoast { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: .84rem; } .aitoast .ic { color: var(--ok); } .aitoast.fail .ic { color: var(--danger); } .aitoast .txt { flex: 1; min-width: 0; } .aitoast .txt b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aitoast .note { font-size: .74rem; color: var(--muted); } .aitoast .x { border: none; background: none; color: var(--muted); font-size: .8rem; padding: 2px 4px; } /* De zwevende kolomnavigatie schuift omhoog zodra er iets draait — maar alleen zolang ze nog zweeft, dus boven 560px. */ @media (min-width: 561px) { body.has-aijobs #boardNav { bottom: 104px; } } /* ⚠️ Onder 560px is de richting omgedraaid. De actiebalk is meubilair onder je duim en mag niet bewegen omdat er toevallig een AI-taak loopt; het paneel is voorbijgaand en gaat er dus bóvenop staan. Dat repareert meteen het oude scheve geval: .pickbar week hier nóóit voor, #boardNav wel. */ @media (max-width: 560px) { #aiBar { bottom: var(--bodem); } } /* Het antwoordveld van de brainstorm: altijd vier regels hoog, hoe breed het scherm ook is. Niet meegroeien met wat je typt — dan springt de knop eronder weg terwijl je bezig bent. */ /* dubbele klasse, want `.dlg textarea` verderop zet een eigen min-height */ .dlg textarea.bninput { width: 100%; resize: vertical; min-height: 0; line-height: 1.5; } .chat-channels { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .chat-channels .fchip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .chat-msgs { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: var(--bg); } /* Hetzelfde gesprek, maar in de installatie staat er nog een kop, een antwoordveld en een knoppenrij onder. 46vh zou dat van het scherm duwen, dus hier meegroeien tot een plafond in plaats van een vaste hoogte. */ .chat-msgs.sbchat { height: auto; min-height: 120px; max-height: 34vh; } .chat-msg { max-width: 88%; } .chat-msg .who { font-size: .72rem; font-weight: 700; color: var(--accent-text); } .chat-msg .who .when { font-weight: 400; color: var(--muted); margin-inline-start: 6px; } .chat-msg .bubble { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; font-size: .9rem; white-space: pre-wrap; word-break: break-word; } .chat-msg.mine { align-self: flex-end; } .chat-msg.mine .bubble { background: var(--accent-50); } /* Je eigen naam hoort rechts boven je eigen bel (Sven, 23-08-2026) — de bel staat rechts, dus het naamlabel erboven ook. */ .chat-msg.mine .who { text-align: end; } .chat-msg.claude .who { color: var(--claude); } .chat-msg.claude .bubble { background: var(--claude-bg); border-color: var(--claude-line); } .mention { color: var(--accent-text); font-weight: 700; background: var(--accent-50); border-radius: 5px; padding: 0 3px; } .mention.claude { color: var(--claude); background: var(--claude-bg); } .vault-item { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; } .vault-item .vhead { display: flex; align-items: center; gap: 8px; } .vault-item .vhead b { flex: 1; } .vault-item .vrow { display: flex; gap: 8px; align-items: center; font-size: .85rem; margin-top: 4px; } .vault-item .vrow .k { color: var(--muted); font-size: .72rem; text-transform: uppercase; width: 76px; flex-shrink: 0; } .vault-item .vrow code { background: var(--fill); border-radius: 6px; padding: 2px 8px; word-break: break-all; } .vault-timer { font-size: .75rem; color: var(--muted); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; } .stat { background: var(--fill); border-radius: 10px; padding: 10px 12px; text-align: center; } .stat b { font-size: 1.25rem; display: block; } .stat span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } table.mini { width: 100%; border-collapse: collapse; font-size: .82rem; } table.mini th { text-align: start; color: var(--muted); font-size: .7rem; text-transform: uppercase; padding: 4px 6px; border-bottom: 1px solid var(--line); } table.mini td { padding: 5px 6px; border-bottom: 1px solid var(--line); } .tokenbox { font-family: ui-monospace, monospace; font-size: .78rem; background: var(--fill); border-radius: 8px; padding: 8px 10px; word-break: break-all; } .note { font-size: .78rem; color: var(--muted); } /* Een notitie die niet alleen vertelt maar waarschuwt — de briefmeter boven zijn grens. Gedempt grijs zou hem laten wegvallen tussen de rest. */ .note.warn { color: var(--warn); font-weight: 600; } .ok { color: var(--ok); font-weight: 700; font-size: .8rem; } /* ── De voordeur ──────────────────────────────────────────────── #login was een smalle kaart in het midden; sinds 01-08-2026 is het de héle pagina, met de landingssectie boven en de inlogkaart eronder. Wie al is ingelogd ziet dit nooit — showLogin()/enterApp() schakelen nog steeds op precies dit ene element. */ #login { display: block; max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; text-align: start; } .loginbox { max-width: 400px; margin: 0 auto 48px; background: var(--card); border-radius: var(--r-card); padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; text-align: center; scroll-margin-top: 24px; } .loginbox h2 span { color: var(--accent-text); } #gbtn { display: flex; justify-content: center; } .loginbox details { text-align: start; } .loginbox summary { font-size: .78rem; color: var(--muted); cursor: pointer; } .loginbox input { border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; margin-top: 8px; } .loginbox .tbtn { background: var(--ink); color: var(--on-ink); border: none; border-radius: 8px; padding: 9px; font-weight: 700; width: 100%; margin-top: 8px; } #driveGate, #countryGate { max-width: 420px; margin: 16vh auto; background: var(--card); border-radius: 14px; padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; text-align: center; } #driveGate h2 span, #countryGate h2 span { color: var(--accent-text); } #driveGate .tbtn, #countryGate .tbtn { background: var(--accent); color: var(--on-accent); border: none; border-radius: 8px; padding: 11px; font-weight: 700; width: 100%; } #driveGate .tbtn:disabled, #countryGate .tbtn:disabled { opacity: .6; } #countryGate select { border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; background: var(--card); color: var(--ink); } .err { color: var(--danger); font-size: .85rem; } .hidden { display: none !important; } /* ── Installatie in stappen ─────────────────────────────────── */ #setup { max-width: 430px; margin: 10vh auto; background: var(--card); border-radius: 14px; padding: 26px 24px; box-shadow: var(--shadow); } #setup h2 { font-size: 1.1rem; text-align: center; margin-bottom: 4px; } #setup p.sub { font-size: .85rem; color: var(--muted); text-align: center; line-height: 1.5; margin-bottom: 16px; } #setup label { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; display: block; margin: 10px 0 4px; } /* Ook textarea. Die stond er niet bij, en de regel die hem elders breed maakt (`.dlg textarea.bninput`) geldt alleen binnen een venster — de installatie is geen venster. Gevolg: het antwoordveld van de brainstorm viel terug op de standaardbreedte van de browser, zo'n twintig tekens, midden in een kaart van 430 px. Gezien op 02-08-2026. */ #setup input, #setup select, #setup textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 11px; } /* ── De profielvraag: het eerste scherm van de installatie ──── Vier tegels, één tik. Onder elkaar en niet in een raster van twee: op een telefoon van 375 blijft er dan 160px per tegel over, en daar past de onderregel niet in — dan lees je alleen de kop en is de keuze weer een gok. Liggend leest het ook sneller: kop en uitleg naast het pictogram. */ .profkeuze { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .profkaart { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: start; border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: border-color .12s ease, background .12s ease; } .profkaart:hover, .profkaart:focus-visible { border-color: var(--accent); background: var(--accent-50); } .profkaart .pf-ic { font-size: 1.35rem; line-height: 1.2; flex: 0 0 auto; } /* min-width: 0 — anders legt de onderregel zijn volle tekstbreedte op als ondergrens en wordt de tegel breder dan het scherm. Vandaag vier keer tegengekomen; zie de opmerking bij .calmain. */ .profkaart .pf-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .profkaart .pf-tx b { font-size: .92rem; color: var(--ink); } .profkaart .pf-tx span { font-size: .78rem; color: var(--muted); line-height: 1.4; } /* Een textarea erft het lettertype niet vanzelf; zonder dit staat het antwoordveld in de systeem-monospace terwijl de rest van de kaart dat niet doet. */ #setup textarea { font: inherit; line-height: 1.5; resize: vertical; } #setup .steps { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; } #setup .steps i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } #setup .steps i.on { background: var(--accent); width: 20px; border-radius: 999px; } #setup .steps i.ok { background: var(--ok); } #setup .btns { display: flex; gap: 8px; margin-top: 18px; } #setup .btns .hbtn { flex: 1; } #setup .ok { display: flex; align-items: center; gap: 8px; font-size: .85rem; background: var(--ok-bg); color: var(--ok); border-radius: 9px; padding: 9px 11px; } #setup .note { font-size: .78rem; color: var(--muted); } /* het kaartje op het bord voor wie stappen oversloeg */ .setupcard { background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px; margin: 0 18px 10px; } .setupcard .h { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; } .setupcard .h .x { margin-inline-start: auto; border: none; background: none; color: var(--muted); } .setupcard button.row2 { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; border: none; background: none; color: var(--ink); font-size: .84rem; padding: 6px 4px; border-radius: 7px; } .setupcard button.row2:hover { background: var(--fill); } .setupcard .dot { color: var(--accent); } /* ── Links in free text + hover preview ─────────────────────── */ a.ext { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-text) 35%, transparent); word-break: break-word; } a.ext:hover { border-bottom-color: var(--accent-text); } .comment a.ext, .bubble a.ext { font-weight: 600; } .bubble a.ext { color: inherit; border-bottom-color: currentColor; opacity: .95; } #notesLinks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } #notesLinks:empty { display: none; } #notesLinks a { display: inline-flex; align-items: center; gap: 5px; max-width: 260px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: .75rem; color: var(--ink); text-decoration: none; } #notesLinks a:hover { border-color: var(--accent); color: var(--accent-text); } #notesLinks a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #linkPreview { position: fixed; z-index: 9999; width: 320px; max-width: calc(100vw - 24px); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-menu); overflow: hidden; font-size: .82rem; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; } #linkPreview.show { opacity: 1; transform: translateY(0); } #linkPreview .lp-img { display: block; width: 100%; height: 150px; object-fit: cover; background: var(--bg); border-bottom: 1px solid var(--line); } #linkPreview .lp-body { padding: 9px 11px 11px; } #linkPreview .lp-site { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .72rem; margin-bottom: 3px; } #linkPreview .lp-site img { width: 13px; height: 13px; border-radius: 3px; } #linkPreview .lp-title { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #linkPreview .lp-desc { color: var(--muted); margin-top: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #linkPreview .lp-load { padding: 11px; color: var(--muted); } #linkPreview.file .lp-img { height: auto; max-height: 260px; object-fit: contain; padding: 6px; background: var(--card); } /* ── Drive file rows: hover thumbnail, click = full viewer ───── */ .file-item.drive { cursor: pointer; } .file-item.drive:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } #fileViewer::backdrop { background: var(--scrim); } #fileViewer { border: none; border-radius: 14px; padding: 0; width: min(940px, 94vw); max-width: 94vw; background: var(--card); color: var(--ink); } #fileViewer .fv-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: .9rem; } #fileViewer .fv-head b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #fileViewer #fvImg { display: block; max-width: 100%; max-height: min(78vh, 720px); margin: 0 auto; background: #0B0C10; } /* Een beeld op de kaart (09-09-2026): miniatuur links, naam en knoppen rechts. */ .file-item.beeld { display: flex; align-items: center; gap: 10px; padding: 6px 8px; cursor: pointer; } .file-thumb.icoon { display: grid; place-items: center; font-size: 1.6rem; } .file-item.beeld:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } .file-thumb { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--fill); flex: 0 0 auto; } .beeld-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; font-size: .85rem; } .beeld-meta b { overflow-wrap: anywhere; } .beeld-knoppen { display: flex; gap: 4px; margin-top: 2px; } .plakhint { font-size: .74rem; margin-top: 2px; opacity: .8; } #taskDlg.dropbaar .tdoc-notes { outline: 2px dashed var(--accent); outline-offset: 3px; border-radius: 8px; } @media (max-width: 560px) { .file-thumb { width: 72px; height: 48px; } } #fileViewer iframe { display: block; width: 100%; height: min(78vh, 720px); border: 0; } /* ── De landingssectie ────────────────────────────────────────── Drie kolommen: de hoofdstukken links, het bord in het midden (70% van de breedte), en rechts in woorden wat er op dat moment gebeurt. Het middenvak draagt zijn eigen lichte tokens — de film is een verlicht scherm, ook als de rest van de app op donker staat. Dat is de enige plek waar het thema niet meebeweegt met de voorkeur van de gebruiker. */ #landing { max-width: 1440px; margin: 0 auto; padding: 28px 20px 20px; position: relative; } /* ⚠️ Niet `.lp-rij` noemen: die naam is al in gebruik voor de regels binnen de panelen van de film (verderop in dit blad), en een tweede regel met dezelfde naam overschreef daar stilletjes de uitlijning. */ .lp-koprij { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } /* Geen vlak maar een randje: het oranje op dit scherm is de startknop, en twee oranje knoppen maken van geen van beide een aanwijzing. */ .lp-inlog { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: var(--r-pill); padding: 7px 15px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } /* Op een breed scherm naar de rechterbovenhoek, want daar zoeken mensen hem — en daar is ruimte genoeg naast de gecentreerde kop. Op een smal scherm blijft hij in de rij bij de taalkeuze staan: rechtsboven liep hij daar dwars door de koptekst heen. */ @media (min-width: 621px) { .lp-inlog { position: absolute; top: 22px; inset-inline-end: 20px; z-index: 3; } } .lp-inlog:hover { border-color: var(--muted); } .lp-inlog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .lp-top { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: 22px; } .lp-top .brandmark.big { margin: 0; display: block; } /* Het logo is een link naar de voorpagina (07-09-2026): geen onderstreping, wél een zichtbare focusring. */ .lp-logo { display: inline-flex; border-radius: 13px; line-height: 0; } .lp-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .lp-kop { font-size: 30px; line-height: 1.12; font-weight: 800; margin: 0; text-wrap: balance; } .lp-sub { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; max-width: 60ch; } /* ── Voor / na: wat erin gaat en wat eruit komt ────────────────── Het bewijs, vóór de rondleiding. Drie kolommen — invoer, naad, uitkomst — die onder de 780px onder elkaar vallen en waarbij de naad meekantelt. */ .lp-vn { max-width: 980px; margin: 0 auto 30px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 26px 26px 22px; } .lp-vn-toon { display: grid; grid-template-columns: 1fr 92px 1fr; align-items: center; } /* ⚠️ `align-content: start` hoort erbij. Zonder die regel rekken de rijen mee tot de hoogte van de langste kolom, en dan is de hoogte van de kaart geen gevolg van zijn inhoud maar van de foto ernaast — gemeten 03-08-2026: een kaart van vijf regels werd 311px hoog. Het uitlijnen van de kolommen onderling doet .lp-vn-toon met align-items: center. */ .lp-vn-kol { display: grid; gap: 12px; justify-items: center; align-content: start; min-width: 0; text-align: center; } .lp-vn-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .lp-vn-kol .note { font-size: 12px; max-width: 34ch; } .lp-vn-in, .lp-vn-uit { display: grid; justify-items: center; align-content: start; width: 100%; } /* Papier blijft papier, ook op een donker scherm — daarom vaste kleuren en geen tokens. Dat is hier een keuze en geen vergeten thema. */ .lp-foto { background: #fff; color: #16163A; width: 100%; max-width: 300px; text-align: start; border-radius: 8px; box-shadow: 0 14px 40px rgba(22,22,58,.18); padding: 18px 20px 20px; transform: rotate(-1.6deg); font-size: 12.5px; line-height: 1.5; } .lp-foto .briefkop { font-weight: 700; font-size: 14px; letter-spacing: -.01em; margin-bottom: 3px; } .lp-foto .briefsub { color: #7C7C99; font-size: 11px; margin-bottom: 12px; } .lp-foto .streep { height: 7px; border-radius: 4px; background: #EEEFF6; margin-bottom: 6px; } .lp-foto .streep.kort { width: 62%; } .lp-foto .feiten { margin-top: 13px; padding-top: 11px; border-top: 1px solid #E6E7F0; display: grid; gap: 4px; } .lp-foto .feit { display: flex; justify-content: space-between; gap: 12px; } .lp-foto .feit span:first-child { color: #7C7C99; } .lp-foto .feit span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; } /* Wat de bezoeker zélf intypte, in dezelfde vorm als het papier — anders lijkt het alsof er een ándere route in werking treedt. */ .lp-brief { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; max-width: 300px; width: 100%; text-align: start; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; } .lp-vn-naad { display: grid; justify-items: center; align-content: center; gap: 8px; height: 100%; } .lp-vn-naad .lijn { width: 1px; flex: 1; background: var(--line); min-height: 22px; } .lp-vn-naad .bol { width: 32px; height: 32px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); color: var(--accent-text); display: grid; place-items: center; font-size: 14px; box-shadow: var(--shadow-card); } .lp-vn-naad .tijd { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--muted); white-space: nowrap; } /* De kaart hergebruikt .task, dus alles wat daar verandert verandert hier mee. Eén ding moet wél terug: aan deze kaart valt niet te slepen. */ .lp-vn-kaart { max-width: 320px; width: 100%; text-align: start; cursor: default; margin: 0; } .lp-vn-kaart:active { cursor: default; } /* Hier gaat het accent heen: dit regeltje is het hele argument, want het laat zien dat het ding je project al kende. */ .lp-vn-reden { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); font-size: 11.5px; line-height: 1.45; color: var(--muted); } .lp-vn-reden b { display: block; color: var(--accent-text); font-weight: 700; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; } /* De vier borden waaruit hij kiest. Zonder deze rij zegt "hij koos Klanten" niets: je moet de keuze kunnen zien. */ .lp-vn-borden { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 22px 0 0; } .lp-vn-bord { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 12px 4px 9px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--card); transition: color .15s ease, border-color .15s ease; } .lp-vn-bord i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; opacity: .45; transition: opacity .15s ease; } .lp-vn-bord.on { color: var(--ink); border-color: var(--accent); } .lp-vn-bord.on i { opacity: 1; } .lp-vn-proef { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; } .lp-vn-proef input { flex: 1 1 340px; max-width: 460px; min-width: 0; border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 9px 16px; font-size: 14px; background: var(--card); } .lp-vn-go { background: var(--accent); border: 1.5px solid var(--accent); color: var(--on-accent); border-radius: var(--r-pill); padding: 9px 20px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; flex: 0 0 auto; } .lp-vn-go:hover:not(:disabled) { background: var(--accent-600); border-color: var(--accent-600); } .lp-vn-go:disabled { opacity: .55; cursor: default; } .lp-vn-terug { background: none; border: 0; color: var(--muted); font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; flex: 0 0 auto; } .lp-vn-terug:hover { color: var(--ink); } .lp-vn-uitleg { text-align: center; font-size: 11.5px; margin: 10px 0 0; opacity: .8; } /* ── Wachten op de AI ──────────────────────────────────────── Een lege kaart in dezelfde vorm, die zich vult. Tot 03-08-2026 verbleekte hier de vórige kaart — en dan lijkt het antwoord er al te staan terwijl het nog moet komen, precies in de seconden waarin iemand beoordeelt of dit ding werkt. */ /* Een gestreepte rand, dezelfde taal als .task.proposal: nog niet definitief. Zonder rand zweven de balkjes los op het paneel — het vlak van de kaart is var(--card) en dat is precies de kleur van het blok eromheen. */ .lp-vn-skelet { --pcol: transparent; box-shadow: none; border: 1.5px dashed var(--line); border-inline-start-width: 3px; } .lp-vn-skelet .sk { display: block; border-radius: 6px; background: var(--fill); } .lp-vn-skelet .sk-titel { height: 13px; width: 92%; margin-bottom: 7px; } .lp-vn-skelet .sk-titel.kort { width: 58%; } .lp-vn-skelet .sk-chip { height: 15px; border-radius: var(--r-pill); display: inline-block; } .lp-vn-skelet .sk-reden { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); display: grid; gap: 5px; } .lp-vn-skelet .sk-regel { height: 9px; width: 100%; } .lp-vn-skelet .sk-regel.kort { width: 54%; } /* De glans loopt over de balkjes heen. Eén animatie voor alle vier, zodat ze als één vlak lezen in plaats van als vier losse dingetjes. */ .lp-vn-skelet .sk { background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ink) 9%, transparent) 50%, transparent 100%); background-size: 260px 100%; background-repeat: no-repeat; animation: lpVnGlans 1.25s linear infinite; } @keyframes lpVnGlans { from { background-position: -260px 0; } to { background-position: calc(100% + 260px) 0; } } .lp-vn-wacht { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; font-size: 12px; color: var(--muted); } .lp-vn-wacht .draai { display: inline-block; color: var(--accent-text); animation: lpVnDraai 1s linear infinite; } @keyframes lpVnDraai { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { /* Zonder beweging moet het nog steeds te zien zijn dát er gewacht wordt — vandaar dat de balkjes blijven staan en alleen het lopen eruit gaat. */ .lp-vn-skelet .sk { animation: none; background-image: none; } .lp-vn-wacht .draai { animation: none; } .lp-vn-bord, .lp-vn-bord i { transition: none; } } @media (max-width: 780px) { .lp-vn { padding: 20px 16px 18px; } .lp-vn-toon { grid-template-columns: 1fr; } /* ⚠️ Expliciet plaatsen, niet `grid-auto-flow: column`. Met automatisch plaatsen claimt `.tijd` eerst een eigen kolom en verhuist hij dáárna pas naar rij 2 — er blijft dan een gat staan waardoor de bol uit het midden schuift en de twee lijnen ongelijk worden. */ .lp-vn-naad { grid-template-columns: 1fr auto 1fr; align-items: center; height: auto; padding: 12px 0; } .lp-vn-naad .lijn { width: 100%; height: 1px; min-height: 0; min-width: 20px; flex: none; } .lp-vn-naad .lijn:first-child { grid-area: 1 / 1; } .lp-vn-naad .bol { grid-area: 1 / 2; } .lp-vn-naad .lijn:last-child { grid-area: 1 / 3; } .lp-vn-naad .tijd { grid-area: 2 / 1 / 3 / -1; } .lp-foto { transform: none; } .lp-vn-proef input { flex: 1 1 100%; max-width: none; } .lp-vn-go { flex: 1 1 100%; } } /* Alleen voor voorleessoftware: het woord "Taal" naast het wereldbolletje. Wegstoppen met display:none zou het óók voor de voorlezer wegnemen. */ .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .lp-taal { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 10px 4px 12px; background: var(--panel); cursor: pointer; } .lp-taal select { border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; padding: 2px 2px 2px 0; } .lp-taal:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } /* Twee kolommen sinds 02-08-2026: de hoofdstukken en het toneel. Het verhaal stond in een derde kolom rechts en zit nu als ondertiteling ín het beeld, dus het toneel krijgt die ruimte erbij — precies wat de vijf kolommen nodig hadden. */ .lp-film { display: grid; grid-template-columns: 15fr 85fr; gap: 18px; align-items: start; } /* ── Links: de hoofdstukken ──────────────────────────────────── */ .lp-clips { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lp-clips h2 { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; padding-inline-start: 10px; } .lp-clip { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; background: none; border: 0; border-radius: var(--r-ctrl); cursor: pointer; padding: 7px 10px; font-size: 13px; line-height: 1.3; color: var(--muted); font-family: inherit; } .lp-clip:hover { background: var(--panel); color: var(--ink); } .lp-clip .nr { font-size: 10.5px; font-variant-numeric: tabular-nums; opacity: .7; min-width: 1.2em; } .lp-clip[aria-current="true"] { color: var(--ink); font-weight: 700; background: var(--panel); } /* Het streepje links markeert waar je bent. Bewust niet oranje: het oranje op dit scherm is de startknop, en twee oranjes maken van geen van beide een aanwijzing. */ .lp-clip[aria-current="true"] .nr { opacity: 1; color: var(--ink); } .lp-voortgang { height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 10px; } .lp-voortgang i { display: block; height: 100%; background: var(--ink); opacity: .45; width: 0; transition: width .2s linear; } /* ── Midden: het toneel ──────────────────────────────────────── */ .lp-midden { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; } .lp-stage { /* Altijd licht, ongeacht het thema van de gebruiker. */ --bg: #F6F7FB; --panel: #EEEFF6; --panel-2: #E3E4EE; --card: #fff; --fill: #F3F4FA; --ink: #16163A; --muted: #7C7C99; --line: #E6E7F0; --accent-50: #FFF1E9; --accent-text: #C2410C; --ok: #15803D; --ok-bg: #EFF7EF; --warn: #B45309; --warn-bg: #FDF3E3; --info: #1D4ED8; --info-bg: #EEF6FF; --claude: #B45309; --claude-bg: #FEF3E2; --claude-line: #F3DCB8; /* Een kolom: eerst de band met de ondertiteling, daaronder het bord. De poster en de vensterlaag liggen er los overheen (absolute), dus die doen aan deze verdeling niet mee. */ display: flex; flex-direction: column; position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 340px; /* Het toneel mag nooit onder de vouw uitsteken. Dat gold al voor lage schermen, maar sinds de ondertiteling ónderin het beeld zit is het voor élke hoogte gaan gelden: viel de onderrand net buiten beeld, dan miste je precies de regel die vertelt wat je ziet. 300px is wat de kop, de taalregel met de startknop en de belofte eronder samen innemen. */ max-height: calc(100svh - 300px); background: var(--bg); color: var(--ink); border: 1px solid #DFE1EC; border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; } /* ── De statische voordeur ────────────────────────────────── Ligt precies over het toneel en gaat weg zodra de film soepel kan draaien. Exact dezelfde plek en maat, dus er verspringt niets bij de wissel. */ .lp-poster { position: absolute; inset: 0; z-index: 2; background: var(--bg); padding: 14px; overflow-y: auto; transition: opacity .35s ease; } .lp-poster.weg { opacity: 0; pointer-events: none; } .lp-poster.dicht { display: none; } .lp-pgrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } .lp-pk { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctrl); border-inline-start: 3px solid #93C5FD; padding: 8px 10px; min-width: 0; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-card); } .lp-pk .nr { font-size: 10px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .lp-pk b { font-size: 12px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } .lp-pk span:last-child { font-size: 10.5px; line-height: 1.35; color: var(--muted); } /* Vijf kolommen, net als op het echte bord. Auto-tracks en geen vaste `5`: verbergt de mediaregel hieronder er twee, dan verdeelt de rest zich vanzelf over de breedte in plaats van dat er twee gaten blijven staan. */ /* Vult wat er onder de ondertitelband overblijft. Niet meer `absolute; inset:0`: dan lag hij eronder in plaats van erna, en dekte de band de kolomkoppen af. `min-height: 0` hoort erbij — zonder dat weigert een flex-kind te krimpen en groeit het toneel buiten zijn eigen hoogte. */ .lp-bord { flex: 1 1 auto; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; padding: 14px; } .lp-kolom { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .lp-kolom h3 { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; } .lp-kaart { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctrl); border-inline-start: 3px solid #93C5FD; padding: 7px 9px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; box-shadow: var(--shadow-card); } .lp-kaart b { flex: 1 1 100%; font-size: 12px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } .lp-kaart.nieuw { animation: lpIn .22s cubic-bezier(.2,.8,.3,1); } /* Een kaartje op pootjes, binnen het toneel. Kleiner dan het botje op het echte bord (zie .botje), verder hetzelfde idee. */ .lp-kaart.loopt { position: relative; } .lp-ogen { display: flex; gap: 4px; flex: 1 1 100%; } .lp-ogen i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); position: relative; animation: boKnipper 2.6s infinite; } .lp-ogen i::after { content: ''; position: absolute; top: 1px; inset-inline-start: 2.5px; width: 2px; height: 2px; border-radius: 50%; background: var(--card); } .lp-poot { position: absolute; bottom: -7px; width: 2.5px; height: 8px; border-radius: 2px; background: var(--ink); transform-origin: top center; } .lp-poot.links { inset-inline-start: 34%; animation: boStap .3s ease-in-out infinite alternate; } .lp-poot.rechts { inset-inline-start: 60%; animation: boStap .3s ease-in-out infinite alternate-reverse; } .lp-vonken { position: absolute; z-index: 3; pointer-events: none; } .lp-vonken i { position: absolute; width: 5px; height: 5px; border-radius: 50%; animation: boVonk .85s cubic-bezier(.15,.7,.3,1) forwards; } .lp-kaart.pak { outline: 2px solid var(--ink); outline-offset: 1px; } @keyframes lpIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .lp-chip { font-size: 9.5px; font-weight: 700; line-height: 1; border-radius: var(--r-pill); padding: 3px 7px; background: var(--fill); color: var(--muted); } .lp-chip.wie { background: var(--accent-50); color: var(--accent-text); } .lp-chip.ai { background: var(--claude-bg); color: var(--claude); } .lp-chip.klaar { background: var(--ok-bg); color: var(--ok); } .lp-chip.wacht { background: var(--warn-bg); color: var(--warn); } .lp-chip.datum { background: var(--info-bg); color: var(--info); } .lp-chip.uren { font-variant-numeric: tabular-nums; } /* De laag eroverheen: kaartvenster, AI-antwoord, agenda, telefoon. Eén plek, want er is er nooit meer dan één tegelijk te zien. */ .lp-laag { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(22,22,58,.28); backdrop-filter: blur(1.5px); animation: lpIn .18s ease; } .lp-laag.hidden { display: none; } .lp-venster { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-dlg); width: min(78%, 460px); max-height: 100%; overflow: hidden; display: flex; flex-direction: column; } .lp-venster header { padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; display: flex; gap: 8px; align-items: center; } .lp-venster .body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; line-height: 1.45; } .lp-regel { display: flex; align-items: center; gap: 7px; color: var(--muted); } .lp-regel .vink { width: 13px; height: 13px; border: 1.5px solid var(--line); border-radius: 4px; flex: none; display: grid; place-items: center; font-size: 9px; } .lp-regel.af .vink { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); } .lp-regel.af span { text-decoration: line-through; } .lp-bubbel { border-radius: var(--r-ctrl); padding: 8px 10px; font-size: 11.5px; line-height: 1.45; } .lp-bubbel.van-jou { background: var(--fill); color: var(--ink); align-self: flex-end; max-width: 82%; } .lp-bubbel.van-ai { background: var(--claude-bg); border: 1px solid var(--claude-line); color: var(--ink); align-self: flex-start; max-width: 88%; } .lp-typt { display: inline-flex; gap: 3px; } .lp-typt i { width: 4px; height: 4px; border-radius: 50%; background: var(--claude); animation: lpTyp 1s infinite; } .lp-typt i:nth-child(2) { animation-delay: .15s; } .lp-typt i:nth-child(3) { animation-delay: .3s; } @keyframes lpTyp { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } } .lp-balk { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; } .lp-balk i { display: block; height: 100%; background: var(--ok); width: 0; transition: width .4s ease; } .lp-balk.over i { background: var(--danger, #DC2626); } .lp-rij { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; } .lp-rij b { font-variant-numeric: tabular-nums; } .lp-agenda { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .lp-dag { border: 1px solid var(--line); border-radius: 6px; min-height: 40px; padding: 3px; font-size: 9px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; } .lp-dag .stip { border-radius: 3px; background: var(--info-bg); color: var(--info); padding: 2px 3px; font-size: 8.5px; font-weight: 700; } .lp-lijn { display: flex; flex-direction: column; gap: 5px; } .lp-lijn .staaf { height: 13px; border-radius: 4px; background: var(--accent-50); border: 1px solid #F5D3BC; } .lp-telefoon { width: 148px; border: 6px solid #16163A; border-radius: 20px; background: var(--card); padding: 8px 7px; display: flex; flex-direction: column; gap: 6px; } .lp-telefoon .kop { font-size: 10px; font-weight: 700; text-align: center; } /* De enige oranje knop op dit scherm. Staat sinds 02-08-2026 in de kopregel naast de taalkeuze en niet meer onder de film: daar hing zichtbaarheid af van de hoogte van het scherm, en bij een korte viewport stond hij onder de vouw. Iets wat je moet zoeken is geen oproep. Iets kleiner dan hij was — hij staat nu naast tekst in plaats van alleen onder een bord, en moet de kopregel niet uit balans trekken. */ .lp-start { background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--r-pill); padding: 9px 20px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; } .lp-start:hover { background: var(--accent-600); } /* "Geen creditcard, eerste gebruiker gratis" hoort bij de knop, dus vlak eronder en gecentreerd onder dezelfde regel. */ .lp-startnoot { font-size: 12px; color: var(--muted); margin: 10px auto 0; text-align: center; max-width: 760px; } /* ── Rechts: wat je ziet, in woorden ─────────────────────────── */ /* ── Ondertiteling ───────────────────────────────────────────── */ /* Bovenin, als een band boven het bord — niet eroverheen. Hij stond onderin en over het toneel gelegd; daar las je hem pas nadat je het beeld al had bekeken, en op een kort scherm viel hij als eerste buiten beeld. Daarom een echte laag in de kolom en géén absolute balk: dan duwt hij het bord naar beneden in plaats van er kaarten mee af te dekken, en hoeft niemand een hoogte gelijk te houden met een tekst die kan aflopen. Donkere band met lichte tekst: het toneel is altijd licht, dus dit is wat er als ondertiteling van te onderscheiden valt. */ .lp-ondertitel { position: relative; z-index: 4; flex: 0 0 auto; display: flex; align-items: baseline; gap: 10px; padding: 9px 14px 10px; pointer-events: none; background: #0F121A; border-start-start-radius: inherit; border-start-end-radius: inherit; } /* Zolang de poster er nog overheen ligt is er geen film om te ondertitelen. Op DOM-volgorde en niet op een vlag in de code: de poster weet zelf wanneer hij weg is, en dan hoeft niemand die twee gelijk te houden. ⚠️ Geen overgang op deze `opacity`. Hij stond er eerst wel, en toen bleef de ondertiteling onzichtbaar: een bevroren overgang (playState "running", currentTime 0 — wat een tabblad op de achtergrond doet) houdt de beginwaarde vast en wint zelfs van een inline `!important`. Gemeten op 02-08-2026. Zichtbaarheid mag nooit van een lopende animatie afhangen; dat is dezelfde regel als in js/anim.js. */ .lp-poster:not(.weg):not(.dicht) ~ .lp-ondertitel { opacity: 0; } .lp-ondertitel .tel { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: rgb(255 255 255 / .55); font-variant-numeric: tabular-nums; } .lp-ondertitel p { margin: 0; font-size: 13.5px; line-height: 1.45; font-weight: 600; color: #fff; text-wrap: balance; } @media (prefers-reduced-motion: no-preference) { /* Elke regel schuift even op zijn plek. Om dezelfde reden als hierboven zit er géén opacity in deze animatie: blijft hij hangen op beeld nul, dan staat de tekst er alsnog — alleen niet geschoven. Een leesbare regel op de verkeerde plek is beter dan een onzichtbare op de goede. */ .lp-ondertitel p { animation: lpOndIn .28s ease-out; } } @keyframes lpOndIn { from { transform: translateY(5px) } to { transform: none } } /* Staat nu ónder het toneel en alleen voor wie geen film krijgt. Leeg is weg: anders houdt een lege aside de ruimte van de flex-gap bezet. */ .lp-verhaal { min-width: 0; width: 100%; } .lp-verhaal:empty { display: none; } .lp-verhaal h2 { font-size: 15px; font-weight: 800; margin: 0 0 4px; line-height: 1.25; } .lp-verhaal .tel { font-size: 10.5px; color: var(--muted); margin: 0 0 10px; font-variant-numeric: tabular-nums; } .lp-verhaal ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .lp-verhaal li { font-size: 12.5px; line-height: 1.5; color: var(--muted); opacity: .55; border-inline-start: 2px solid transparent; padding-inline-start: 9px; transition: opacity .15s ease, color .15s ease; } .lp-verhaal li.nu { color: var(--ink); opacity: 1; border-inline-start-color: var(--ink); } .lp-verhaal li.geweest { opacity: .85; } @media (max-width: 1100px) { .lp-film { grid-template-columns: 1fr; gap: 14px; } /* Het bord eerst: op een smal scherm wil je zien wát het is voordat je een lijst met namen leest. */ .lp-midden { order: -1; } /* De hoofdstukken worden een rij chips die opzij schuift. */ /* Bewust géén scroll-behavior: smooth. Waar zacht schuiven niet werkt, slikt het óók het harde zetten van de stand op en blijft de rij staan — dan volgt de markering het hoofdstuk niet meer. Springen werkt altijd. */ .lp-clips { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; } .lp-clips h2, .lp-voortgang { display: none; } .lp-clip { white-space: nowrap; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; font-size: 12px; } .lp-verhaal ol { gap: 5px; } } /* Onder de 900px passen er geen vijf kolommen meer zonder dat de kaarttitels in stroken van een paar tekens breken. Dan vallen "Wachten op" en "Ooit / misschien" weg — dat zijn de twee waar in de film het minst gebeurt, en de regel tekst ernaast blijft vertellen wat er gebeurt. Inbox, Volgende en Klaar blijven staan, want dat is de beweging die het verhaal draagt. */ @media (max-width: 900px) { .lp-kolom[data-kolom="waiting"], .lp-kolom[data-kolom="someday"] { display: none; } } @media (max-width: 620px) { #landing { padding: 20px 14px 16px; } .lp-kop { font-size: 24px; } /* Op een telefoon staat "Inloggen" niet rechtsboven maar in de rij, en dan vielen taal, startknop en inloggen alle drie op een eigen regel — drie regels boven de film, gemeten op 375px. Nu taal en inloggen naast elkaar en de startknop daaronder over de volle breedte: één regel korter, en de knop wordt er groter van in plaats van kleiner. ⚠️ Deze regel hoort in de bréédte-mediaregel. Hij stond eerst in `max-height: 720px` hierboven, en die geldt op een telefoon van 812 hoog juist niet — de opmaak was er dus wel en deed niets. */ .lp-koprij .lp-start { order: 3; width: 100%; } .lp-stage { aspect-ratio: 4 / 3; min-height: 300px; } .lp-bord { gap: 6px; padding: 9px; } .lp-kolom { gap: 6px; } .lp-kaart { padding: 6px 7px; } .lp-kaart b { font-size: 11px; } .lp-chip { padding: 2px 5px; font-size: 9px; } .lp-venster { width: 92%; } /* Alle tien de functies moeten hier passen zónder te schuiven: de poster staat maar even, dus wat je moet scrollen zie je nooit. De omschrijving gaat eraf — die staat een stukje lager alsnog, per hoofdstuk. */ .lp-poster { padding: 9px; } .lp-pgrid { gap: 6px; grid-template-columns: repeat(2, 1fr); } .lp-pk { padding: 6px 8px; gap: 1px; } .lp-pk b { font-size: 11.5px; } .lp-pk span:last-child { display: none; } } /* ── De knop moet zonder scrollen in beeld ─────────────────── Een startknop waar je eerst naartoe moet scrollen is geen startknop. Op een laag scherm — een kleine telefoon, of een laptopvenster dat niet schermvullend staat — geeft eerst de kop ruimte terug en daarna het toneel. `svh` en niet `vh`: op een telefoon rekent vh de adresbalk mee die er wél staat, en dan valt de knop er alsnog net onder. */ @media (max-height: 720px) { #landing { padding-top: 12px; } .lp-top { gap: 6px; margin-bottom: 12px; } .lp-top .brandmark.big { width: 38px; height: 38px; border-radius: 10px; } .lp-kop { font-size: 21px; } /* De belofte staat ook in het inlogvenster; op een krap scherm is de kop genoeg en telt de ruimte zwaarder. */ .lp-sub { display: none; } .lp-stage { max-height: calc(100svh - 290px); min-height: 170px; } .lp-startnoot { font-size: 11px; } /* Het toneel is nu lager, dus de poster moet krapper — anders moet je erin schuiven, en wat je moet schuiven zie je nooit in de twee tellen dat hij er staat. Het nummertje gaat eraf: dat kostte een hele regel per kaart, en de hoofdstukkenlijst nummert ze verderop toch al. */ .lp-poster { padding: 7px; } .lp-pgrid { gap: 5px; } .lp-pk { padding: 5px 7px; } .lp-pk .nr { display: none; } .lp-pk b { font-size: 11px; line-height: 1.2; } .lp-pk span:last-child { display: none; } } @media (max-height: 560px) { /* Nog lager: dan wordt het merkteken klein en het toneel ook. Niet verbergen: sinds 07-09-2026 is het logo de weg terug naar de voorpagina. Wat overblijft is de belofte, iets om naar te kijken, en de knop. */ .lp-top .brandmark.big { width: 28px; height: 28px; border-radius: 8px; } .lp-kop { font-size: 18px; } .lp-stage { max-height: calc(100svh - 210px); min-height: 120px; } } /* Wie beweging heeft uitgezet krijgt geen film maar een boek: elk hoofdstuk staat stil in zijn eindbeeld, en rechts staan alle regels tegelijk. Je moet dan zelf doorklikken. Er gaat niets verloren behalve het vanzelf gaan. */ @media (prefers-reduced-motion: reduce) { .lp-kaart.nieuw, .lp-laag, .lp-typt i { animation: none; } .lp-ogen i, .lp-poot { animation: none; } .lp-vonken { display: none; } .lp-verhaal li { opacity: 1; color: var(--ink); } } /* ── Aanmelden met een code per mail ──────────────────────────── Staat onder de Google-knop, met een streep ertussen. Bewust even breed als die knop (280px), zodat de twee routes gelijkwaardig ogen — de e-mailroute is geen tweede keus maar een andere deur. */ .loginsep { display: flex; align-items: center; gap: 10px; width: min(280px, 100%); margin: 14px auto 10px; color: var(--muted); font-size: 13px; } .loginsep::before, .loginsep::after { content: ''; flex: 1; height: 1px; background: var(--line); } #mailLogin { display: flex; flex-direction: column; gap: 8px; width: min(280px, 100%); margin: 0 auto; } #mailLogin input { width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-ctrl); padding: 9px 11px; background: var(--card); color: var(--ink); font: inherit; } #mailLogin input:focus { outline: none; border-color: var(--accent); } #mailLogin #mlCodeRow { display: flex; flex-direction: column; gap: 8px; } /* Zes cijfers uit elkaar: dan lees je terug wat je hebt ingetikt zonder te tellen, en zie je meteen of er eentje te veel of te weinig staat. */ #mailLogin #mlCode { text-align: center; font-size: 1.25rem; font-weight: 700; letter-spacing: .35em; text-indent: .35em; font-variant-numeric: tabular-nums; } #mailLogin .note { margin: 2px 0 0; text-align: start; } #mailLogin .note.err { color: var(--danger); } /* ── De voortgangsbalk ────────────────────────────────────────── Eén regel boven het bord: wat er nu open staat, hoe ver je bent. Hij is bewust dun en stil — hij begeleidt het werk, hij is niet het werk. Zodra de ladder af is verdwijnt hij helemaal (`hidden`), dus hij kost dan ook geen hoogte meer. */ /* ⚠️ Amber en niet groen of oranje — dat is een keuze, geen smaak. `--warn` betekent in dit product al "er wacht iets op jou": het gele uitroepteken bij de volgende stap draagt hem, en sinds 03-08-2026 ook de stip op een menuknop. Eén kleur voor één betekenis, dus deze balk hoort erbij. Groen zou "af" zeggen terwijl er juist nog iets ligt, en oranje is de kleur van de knop waar je op moet drukken — dan gaat de balk daarmee concurreren in plaats van ernaar te wijzen. De streep links maakt hem opvallend zonder hem luid te maken: hij begeleidt het werk, hij is niet het werk. */ .ladderbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--line); border-inline-start: 4px solid var(--warn); background: var(--warn-bg); font-size: 13px; } /* Op amber leest het oranje van --accent-text te zwak; --warn is hier de tekstkleur die bij het vlak hoort en in beide thema's contrast haalt. */ .ladderbar .lb-next b, .ladderbar .lb-step { color: var(--warn); } .ladderbar .lb-track i { background: var(--warn); } .lb-next { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* De naam van de stap is een knop naar de uitleg — de enige ingang voor sporten die nergens een menu-item hebben. Ziet eruit als tekst met nadruk, gedraagt zich als een knop. */ .lb-next b, .lb-step { color: var(--accent-text); font-weight: 700; } .lb-step { border: none; background: none; padding: 0; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .lb-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .lb-track { flex: 0 0 120px; height: 6px; border-radius: var(--r-pill); background: var(--fill); overflow: hidden; } .lb-track i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width .15s; } .lb-count { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; } @media (max-width: 560px) { /* Op een telefoon is de kopbalk al vol en staat de kolomnavigatie onderin. Twee regels kostte daar 60px; met de meter weg is het er 30. Er gaat niets verloren: "5 van 45" zegt hetzelfde als het streepje, en van de twee is het getal het enige dat je op die breedte echt leest. */ .ladderbar { padding: 6px 12px; gap: 8px; } .lb-track { display: none; } } /* ── Wat op jouw ja wacht ─────────────────────────────────────── Dezelfde amber als de stroken hierboven, want het is dezelfde boodschap: hier ligt iets voor je klaar. Klein en zonder tekst — hij staat in de kopbalk, waar elke letter breedte kost op een telefoon; het cijfer ís het bericht. Ingeschakeld wordt hij vol amber, zodat je ziet waaróm het bord ineens weinig laat zien. */ .wachtbtn { display: inline-flex; align-items: center; gap: 5px; color: var(--warn); } .wachtbtn b { font-variant-numeric: tabular-nums; } .wachtbtn.on { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); } .wachtbtn:hover, .wachtbtn.on:hover { border-color: var(--warn); color: var(--warn); } /* De zandloper leent de wachtbtn-vorm maar niet de waarschuwingskleur: stilstaan is neutraal, lopen is accent — geen alarm. */ .tijdchip { color: var(--muted); } /* De teller op de kaart: dezelfde chipvorm als de andere kaartvelden, oranje zolang hij op deze kaart loopt. */ .tijdkaart { cursor: pointer; font: inherit; color: var(--ink); } .tijdkaart.on { border-color: var(--accent); color: var(--accent); } .tijdkaart b { font-variant-numeric: tabular-nums; } /* Het bordkeuzevenster van de zandloper: één rij per urenbord, het actieve bord bovenaan en gemarkeerd. */ #tijdKiesDlg .tijdrijen { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } #tijdKiesDlg .tijdrij { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; } #tijdKiesDlg .tijdrij.hier { border-color: var(--accent); } /* ── De doelgroep-pagina (/voor/) ───────────────────────── Het gezicht komt uit de sfeervelden van het dashboard: het beeld staat als CSS-var (--voor-beeld, twee lagen: upload + gecureerde terugval — een laag die 404't laat de volgende zien), de overlay-gradient houdt de tekst leesbaar, en --accent-voor kleurt de startknop. De kleuren óver de foto zijn bewust vast: dit is één beeld, geen thema. ⚠️ Niets hiervan mag als direct kind in .lp-film hangen (elk kind is daar een grid-cel) en zichtbaarheid hangt nergens aan een overgang. */ .doelgroep-pagina .lp-film, .doelgroep-pagina .lp-profvraag, .doelgroep-pagina .lp-profraster, .doelgroep-pagina .lp-hoe { display: none; } .doelgroep-pagina .lp-start { background: var(--accent-voor, var(--accent)); } .lp-top.lp-voor-held { background-image: var(--voor-overlay), var(--voor-beeld, none); background-size: cover; background-position: center; border-radius: 16px; padding: 46px 20px 54px; } .lp-voor-held.voor-donker { --voor-overlay: linear-gradient(rgba(8,9,12,.5), rgba(8,9,12,.78)); color: #fff; } .lp-voor-held.voor-licht { --voor-overlay: linear-gradient(rgba(250,250,252,.55), rgba(250,250,252,.88)); color: #14161c; } /* De ondertitel erft de heldkleur: --muted op een donkere overlay was onleesbaar. */ .lp-voor-held .lp-sub { color: inherit; opacity: .88; } .doelgroep-pagina .lp-kop { font-size: clamp(1.6rem, 4vw, 2.3rem); max-width: 24ch; margin-inline: auto; } .lp-voor-scenario { max-width: 1060px; margin: 26px auto 8px; } .lp-voor-scenario h2 { text-align: center; margin-bottom: 14px; } .lp-voor-stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .lp-voor-stappen { grid-template-columns: 1fr; } } .lp-voor-stap { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--card); } .lp-voor-stap .note { margin-top: 6px; } .lp-voor-film { max-width: 860px; margin: 26px auto 8px; text-align: center; } .lp-voor-film h2 { margin-bottom: 14px; } .lp-voor-film video { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0 auto; border-radius: 12px; background: #000; } /* Breedte uit de hoogte: zo past de staande snit altijd op het scherm. */ .lp-voor-film.staand video { aspect-ratio: 9 / 16; width: min(100%, 420px, calc(80svh * 9 / 16)); } .lp-voor-film .note { margin-top: 8px; } .lp-voor-alle { text-align: center; margin: 20px 0 6px; } /* .link is de rode tekstknop (verwijderen, verlaten); een uitgang is geen gevaar. */ .lp-voor-alle a { color: var(--accent-text); font-size: inherit; } /* De bordkeuze van de chatbel leent de rijen van de urenkiezer. */ #chatKiesDlg .tijdrijen { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } #chatKiesDlg .tijdrij { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; } #chatKiesDlg .ck-n { margin-inline-start: auto; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; } .tijdchip.on { background: transparent; border-color: var(--accent); color: var(--accent); } .tijdchip.on:hover, .tijdchip:hover { border-color: var(--accent); color: var(--accent); } /* ── "Je hebt iets onder de knip" ─────────────────────────────── Onder de ladderbalk en in dezelfde amber, want het is dezelfde boodschap: hier ligt iets voor je klaar. Eén regel hoog — twee zou het bord omlaag duwen, en dan is het geen zetje meer maar een banner. */ .knipstrook { display: flex; align-items: center; gap: 10px; padding: 6px 16px; border-bottom: 1px solid var(--line); border-inline-start: 4px solid var(--warn); background: var(--warn-bg); font-size: 13px; } .knipstrook .ks-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .knipstrook .hbtn { flex: 0 0 auto; padding: 3px 10px; font-size: .78rem; } .knipstrook .ks-weg { flex: 0 0 auto; border: none; background: none; color: var(--muted); cursor: pointer; font-size: .9rem; line-height: 1; padding: 4px; } .knipstrook .ks-weg:hover { color: var(--ink); } @media (max-width: 560px) { .knipstrook { padding: 6px 12px; gap: 8px; } } /* ── Gastbalk ─────────────────────────────────────────────────── Zelfde vorm als de knipstrook hierboven, maar in het accent en zónder kruisje: dit is geen zetje dat je kunt wegzetten maar de stand van zaken. Wie deze browser deelt, deelt dit bord — dat hoort te blijven staan tot iemand zich aanmeldt of vertrekt. ⚠️ Niet `position: sticky`. De kopbalk is dat al, en twee plakkende lagen boven elkaar eten op een telefoon het halve bord op. */ .gastbalk { display: flex; align-items: center; gap: 10px; padding: 6px 16px; border-bottom: 1px solid var(--line); border-inline-start: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); font-size: 13px; } .gastbalk .gb-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gastbalk .hbtn { flex: 0 0 auto; padding: 3px 10px; font-size: .78rem; } /* Op slot: zelfde balk, waarschuwingskleur. */ .slotbalk { border-inline-start-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--card)); } /* Demobord, alleen kijken (12-10-2026): zelfde balk, met de uitleg erbij die mag teruglopen op een smal scherm. De bewerkknoppen gaan weg; wat er nog staat krijgt van de server de melding srv.demo.alleenKijken. */ .demobalk .gb-txt { white-space: normal; } .demo-kijk { margin: 4px 0 8px; padding: 6px 10px; border-radius: 8px; font-size: 13px; border-inline-start: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); } body.alleen-kijken #board .add, body.alleen-kijken #board .aiInbox, dialog.alleen-kijken #vhVak button.primary, dialog.alleen-kijken #vhVak button.danger { display: none; } @media (max-width: 560px) { .gastbalk { padding: 6px 12px; gap: 8px; } /* Op een telefoon telt elke regel: de datum staat in de zin, en "weggaan" staat ook in het avatarmenu. */ .gastbalk #gastWeg { display: none; } } /* ── Sleepvlak voor bestanden ─────────────────────────────────── Over álles heen, ook over de kopbalk: je sleept met je hand op de muis en moet in één oogopslag zien dat loslaten hier veilig is. ⚠️ `pointer-events: none` op het geheel. Het vlak mag geen enkele sleepgebeurtenis opvangen — de luisteraars hangen aan window, en een vlak dat zelf `dragleave` opwekt laat zichzelf knipperen. */ .dropzone { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, var(--accent) 12%, var(--scrim)); } .dz-kader { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 28px 40px; border-radius: 18px; border: 3px dashed var(--accent); background: var(--card); box-shadow: var(--shadow); max-width: 420px; animation: dzKom .18s ease-out; } .dz-icoon { font-size: 2rem; line-height: 1; } .dz-kader b { font-size: 1.05rem; } @keyframes dzKom { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .dz-kader { animation: none; } } /* Er is een níéuwe sport aan de beurt: de balk vraagt vijf seconden aandacht en is daarna weer stil. Twee rondes van 2,5s — hetzelfde ritme als het wenken elders, zodat het één taal blijft. ⚠️ De balk zélf schuift niet. Hij loopt van rand tot rand, en dan komt er links een strook leeg te staan die als tekenfout leest. Het vlak licht daarom op en de tekst erin doet de gewone wenkbeweging. */ .ladderbar.lb-wenk { animation: balkwenk 2.5s ease-in-out 2; } .ladderbar.lb-wenk .lb-next { --kant: 1; animation: wenk 2.5s ease-in-out 2; } [dir="rtl"] .ladderbar.lb-wenk .lb-next { --kant: -1; } @keyframes balkwenk { 0%, 100% { background: var(--warn-bg); } 45% { background: color-mix(in srgb, var(--warn) 24%, var(--warn-bg)); } } /* Zonder beweging blijft de oplichtende balk over — die draagt de boodschap ook, en dat is precies waarom hij er niet alleen als beweging is. */ @media (prefers-reduced-motion: reduce) { .ladderbar.lb-wenk .lb-next { animation: none; } } /* ── Nog op slot ──────────────────────────────────────────────── Gedimd, niet weg: zo blijft de app op elk moment herkenbaar en verspringt er niets zodra iets vrijkomt. Het menu-item wordt twee regels — de tweede zegt waaróp het wacht. */ [data-step] { position: relative; } .lk-locked { opacity: .5; cursor: default; } .lk-locked:hover { background: none; } .lk-why { display: block; font-size: 11.5px; line-height: 1.35; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; } /* ── Te koop in de winkel (16-09-2026; verborgen sinds 20-09-2026) ── Een functie buiten je set wordt nergens genoemd: het slot verbergt de knop, pil of rij helemaal (Svens keuze, 20-09-2026). De winkel is de enige plek die erover praat. `.fn-leeg` = een kopje, streep of sectie die daardoor leeg raakte (functieGroepenOpruimen in js/winkel.js). */ .fn-locked { display: none !important; } .fn-leeg { display: none !important; } /* Het winkelvenster: groepen met een raster van kaarten die allemaal even groot zijn (vaste sleuven: naam, win-zin, waar het zit, voet met prijs en één knop); de kaart waar je naartoe gestuurd bent krijgt een ring. */ .winkelgroep { margin-top: 10px; } .winkelgroep h4 { margin: 0 0 6px; } .winkelraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows: 1fr; gap: 12px; } .winkelkaart { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: var(--card); box-sizing: border-box; } .winkelkaart.is-doel { outline: 2px solid var(--accent); } .winkelkaart .winkelnaam { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .winkelkaart .winkelwin { margin: 0; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: calc(3 * 1.4em); } .winkelkaart .winkelwaar { font-size: 12px; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(2 * 1.35em); } .winkelkaart .winkelvoet { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; } .winkelkaart .winkelvoet .hbtn { flex: 0 0 auto; min-width: 6.5em; text-align: center; justify-content: center; white-space: nowrap; } .winkelkaart .winkelprijs { font-weight: 600; } .winkelkaart .winkelbron { font-size: 12px; color: var(--muted); } .winkelvanjou:disabled { opacity: 1; cursor: default; background: var(--accent-50); color: var(--accent-text); border-color: transparent; } .winkelhouder { display: flex; gap: 12px; flex-wrap: wrap; } /* De studentenkorting (17-09-2026): de banner boven de groepen en de doorgestreepte volle prijs naast de eigen prijs. */ .winkelkorting { font-weight:600 } .winkelprijs s { opacity:.6; margin-inline-end:6px; font-weight:400 } /* De studiewijzer naar borden (17-09-2026): per vak een blok met een vinkje, een naamveld en de kaarten eronder (zie openStudiewijzer). */ .st-bord { border:1px solid var(--line, #ddd); border-radius:10px; padding:10px 12px; margin-top:10px } .st-bord label { display:flex; gap:8px; align-items:center; margin-bottom:6px } .st-bord .stNaam { flex:1; min-width:0 } /* Het gele uitroepteken: hier ben je. `--warn` betekent in de merkrichtlijn al "wacht op actie" — geen nieuwe kleur, en zeker geen tweede accent. Het is een knop: erop klikken legt uit wat de functie doet en wat er dichtblijft als je hem laat liggen. Vandaar ook een zichtbare focusring. */ /* ── Wat je moet aanraken, wenkt ──────────────────────────── Eén taal voor alle sporten: het element dat aan de beurt is wipt uit zichzelf een klein stukje opzij, met een ring eromheen. Verving op 03-08-2026 drie losse tekens — een uitroepteken op het element, een stip op de menuknop en een zwevende pijl ernaast — die alle drie eerst geduid moesten worden. De ring is een box-shadow en geen border: die verandert de indeling niet, dus er verspringt niets als hij aan- of uitgaat. `--warn` omdat dat token in dit product al "er wacht iets op jou" betekent. */ .lk-hier { --kant: 1; position: relative; z-index: 2; box-shadow: 0 0 0 2px var(--warn), 0 4px 16px color-mix(in srgb, var(--warn) 40%, transparent); animation: wenk 2.6s ease-in-out infinite; } [dir="rtl"] .lk-hier { --kant: -1; } @keyframes wenk { 0%, 100% { transform: none; } 45% { transform: translateX(calc(5px * var(--kant))); } } /* ⚠️ Invoervelden en keuzelijsten bewegen niet. Mikken op een tekstvak dat onder je cursor wegschuift is vervelend, en je moet er juist ín klikken om te typen. Maar een stílle ring was niet genoeg: hij is oranje, net als gewone focus, en Sven las hem op 22-08-2026 als "een actief veld" — geen nudge. Dus pulseert de ríng (niet het veld): onmiskenbaar, zonder dat het doelwit wegschuift. */ @keyframes wenkRing { 0%, 100% { box-shadow: 0 0 0 2px var(--warn), 0 4px 16px color-mix(in srgb, var(--warn) 40%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--warn) 85%, transparent), 0 4px 24px color-mix(in srgb, var(--warn) 60%, transparent); } } input.lk-hier, textarea.lk-hier, select.lk-hier { animation: wenkRing 1.6s ease-in-out infinite; } /* Stilstaan zodra iemand mikt: anders beweegt het doel weg op precies het moment dat de cursor er is. */ .lk-hier:hover, .lk-hier:focus, .lk-hier:focus-within { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { /* ⚠️ Zonder pijl en zonder uitroepteken is deze ring voor wie beweging heeft uitgezet de énige aanwijzing die overblijft. Hij blijft dus staan; alleen het wippen gaat eruit — en de pulserende ring op invoervelden ook (input.lk-hier is specifieker dan .lk-hier, dus die moet hier apart). */ .lk-hier, input.lk-hier, textarea.lk-hier, select.lk-hier { animation: none; } } .lk-next { font-weight: 700; } /* Overgeslagen, maar er staat nog iets achter. Niet gedimd — je mag hem gewoon gebruiken — alleen gemarkeerd, want dit is de weg terug. */ .lk-parked { opacity: 1; } /* ── Urenregistratie ──────────────────────────────────────────── Eén venster voor de teller, het budget en de geboekte regels. De maten rekenen op de breekpunten die de rest van de app ook gebruikt: onder 560px valt alles onder elkaar, want twee velden naast elkaar worden op een telefoon allebei te smal om in te vullen. */ .tt-running { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--accent-50); border: 1.5px solid var(--accent); border-radius: 12px; padding: 12px 14px; } /* Vaste breedte en cijfers van gelijke breedte: anders springt de hele regel bij elke tik van de klok. */ .tt-clock { font-size: 1.5rem; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; flex: 0 0 auto; min-width: 76px; } .tt-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tt-what b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt-running .hbtn { flex: 0 0 auto; } .tt-longrun { color: var(--danger); } .tt-start { display: flex; flex-direction: column; gap: 8px; } .tt-start .tt-go { width: 100%; } .tt-budget, .tt-team { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .tt-budget-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tt-budget-head .dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; } .tt-budget-head b { flex: 1; min-width: 0; overflow-wrap: anywhere; } .tt-bar { height: 8px; border-radius: 999px; background: var(--fill); overflow: hidden; margin: 8px 0 6px; } .tt-bar i { display: block; height: 100%; background: var(--ok); transition: width .3s; } .tt-bar.warn i { background: var(--accent); } .tt-bar.over i { background: var(--danger); } .tt-warn { font-size: .78rem; font-weight: 700; color: var(--accent-text); } .tt-warn.over { color: var(--danger); } .tt-listhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; } .tt-who { margin-inline-start: auto; } .tt-rows { display: flex; flex-direction: column; } .tt-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); } .tt-row.editing { display: block; } .tt-day { flex: 0 0 auto; font-size: .74rem; color: var(--muted); min-width: 62px; } .tt-dur { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 44px; } .tt-title { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .88rem; } .tt-title, .tt-title .note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tt-money { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--muted); } .tt-row .mini { flex: 0 0 auto; border: none; background: none; color: var(--muted); font-size: .8rem; padding: 2px 5px; border-radius: 5px; } .tt-row .mini:hover { background: var(--accent-50); color: var(--accent-text); } .tt-total { display: flex; gap: 8px; padding: 9px 0; font-variant-numeric: tabular-nums; } .tt-total b { flex: 1; } .tt-editbox { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 10px; } .tt-set { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; } .tt-set:first-child { border-top: none; margin-top: 0; padding-top: 0; } .tt-set .flbl .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; } /* De chip op de kaart: alleen lezen, dus geen randje van een invulveld. */ .chip-t { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; border-radius: 999px; padding: 3px 10px; background: var(--fill); color: var(--muted); } .chip-t.over { background: var(--danger-bg); color: var(--danger); font-weight: 700; } @media (max-width: 560px) { /* Op een telefoon staat de klok bóven wat je aan het doen bent, en de stopknop over de volle breedte — die moet je met een duim kunnen raken. */ .tt-running { gap: 8px; } .tt-what { flex: 1 0 100%; order: 2; } .tt-running .hbtn { flex: 1 0 100%; order: 3; } .tt-day { min-width: 0; } .tt-row { flex-wrap: wrap; } .tt-title { flex: 1 0 100%; order: 3; white-space: normal; } .tt-title, .tt-title .note { white-space: normal; } } /* ── Merkteken ──────────────────────────────────────────────── */ .brandmark { flex-shrink: 0; border-radius: 7px; display: block; } .brandmark.big { width: 52px; height: 52px; border-radius: 13px; margin: 0 auto 10px; } /* ── Instellingen in stappen ────────────────────────────────── */ /* Genummerde stappen, één regel per instelling, en alle uitleg in een ⓘ — zo past het scherm op een telefoon zonder eindeloos scrollen. */ .setstep { border-top: 1px solid var(--line); padding-top: 12px; } .setstep:first-of-type { border-top: none; padding-top: 0; } /* De tabbladwikkels van Instellingen (05-09-2026): zelf een flexkolom met dezelfde gap als .dlg, anders zakten de blokken erin op elkaar; en het eerste blok van de tweede iedereen-wikkel houdt zijn scheidslijn. */ .settab-everyone, .settab-builders { display: flex; flex-direction: column; gap: 12px; } .settab-builders + .settab-everyone > .setstep:first-of-type { border-top: 1px solid var(--line); padding-top: 12px; } .stephead { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .stephead b { font-size: .92rem; font-weight: 600; } .stepnum { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .stepnum.done { background: var(--ok); color: var(--on-accent); } .stepnum.plain { background: var(--line); color: var(--muted); } .frow { display: flex; align-items: center; gap: 8px; margin: 7px 0; flex-wrap: wrap; } .frow > select, .frow > input { flex: 1; min-width: 120px; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: .85rem; } .frow .flbl { flex: 0 0 132px; font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 5px; } .frow .inline { display: flex; align-items: center; gap: 7px; font-size: .85rem; flex: 1; } .frow .inline input { width: 16px; height: 16px; accent-color: var(--accent); } @media (max-width: 560px) { .frow .flbl { flex: 0 0 100%; } } .advanced { margin-top: 10px; } .advanced summary { font-size: .78rem; color: var(--muted); cursor: pointer; } /* de ⓘ zelf: aanwijzen of aantikken toont de uitleg */ .tip { width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font-size: .6rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: help; position: relative; } .tip:hover, .tip:focus { border-color: var(--accent); color: var(--accent); outline: none; } /* ⚠️ `fixed` en niet `absolute`. Deze ⓘ's staan in het instellingenvenster, en dat scrollt zelf (`overflow: auto`). Een absoluut geplaatst vak dat naar bóven opent wordt daar afgeknipt zodra de ⓘ bovenin staat — gemeld 04-08-2026 bij "Websites", nagemeten: de bovenkant van het vak lag boven de bovenkant van het venster. `overflow: auto` knipt een `fixed` kind niet af. De plek wordt bij het zweven berekend; zie plaatsTipbox() in js/core.js. */ .tip .tipbox { display: none; position: fixed; width: 240px; max-height: calc(100vh - 16px); overflow-y: auto; max-width: calc(100vw - 40px); z-index: 50; background: var(--fill); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: .76rem; font-weight: 400; line-height: 1.5; color: var(--ink); text-align: start; box-shadow: var(--shadow-menu); } .tip:hover .tipbox, .tip:focus .tipbox { display: block; } /* ── Meldingen van de app ───────────────────────────────────── */ /* Midden op het scherm, oranje kader, anderhalve graad scheef en een korte veerbeweging — genoeg om te zien dat het van de app komt en niet van de browser. Goed nieuws draait naar links, een vraag naar rechts. */ /* width/margin expliciet, want de algemene dialog-regel hierboven zet een vaste breedte van 560px — dan staat het vlakje links in plaats van midden */ #popDlg { border: none; background: none; padding: 0; overflow: visible; width: max-content; max-width: calc(100vw - 24px); margin: auto; box-shadow: none; } #popDlg::backdrop { background: var(--scrim); } .popbody { width: min(340px, calc(100vw - 32px)); background: var(--card); color: var(--ink); border: 2.5px solid var(--accent); border-radius: 16px; padding: 18px 18px 15px; text-align: center; box-shadow: var(--shadow-dlg), 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent); transform: rotate(-1.5deg); animation: popIn .28s cubic-bezier(.2,1.4,.4,1); } @keyframes popIn { from { transform: rotate(-1.5deg) scale(.9); opacity: 0 } to { transform: rotate(-1.5deg) scale(1); opacity: 1 } } .popbody.ask { border-color: var(--accent-600); transform: rotate(1.3deg); animation-name: popInAsk; } @keyframes popInAsk { from { transform: rotate(1.3deg) scale(.9); opacity: 0 } to { transform: rotate(1.3deg) scale(1); opacity: 1 } } .popbody.oops { border-color: var(--danger); box-shadow: var(--shadow-dlg), 0 0 0 6px color-mix(in srgb, var(--danger) 10%, transparent); } .popbody .emo { font-size: 1.9rem; display: block; margin-bottom: 6px; } .popbody h4 { font-size: .98rem; font-weight: 600; margin-bottom: 5px; } .popbody p { font-size: .84rem; line-height: 1.55; color: var(--muted); white-space: pre-wrap; word-break: break-word; } .popbody .btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; } .popbody .hbtn { flex: 0 1 auto; } .popbody.oops .hbtn.primary { background: var(--danger); border-color: var(--danger); } /* confetti: alleen bij echt goed nieuws, anders went het en wordt het ruis */ .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; } .confetti i { position: absolute; top: -20px; width: 7px; height: 11px; border-radius: 2px; animation: confFall 1.9s linear forwards; } @keyframes confFall { to { transform: translateY(105vh) rotate(420deg); opacity: .2 } } /* ── Leven op het bord ─────────────────────────────────────── Een kaart die de AI verplaatst loopt er zelf heen; nieuw werk bouwt zich op; wat op Klaar landt viert het. Alles hier is een laag erboven — de échte kaart staat al goed, zie js/anim.js. Onder 1100px staat het uit: daar is geen ruimte om iets te laten lopen. */ /* Drie lagen, elk met één taak — anders vechten de transformaties om dezelfde eigenschap. De buitenste laag verplaatst (dat is de wandeling) en geeft het perspectief mee; .bo-lijf kantelt overeind en weer plat, met de onderrand als scharnier. Zonder perspectief is dat draaien geen opstaan maar platdrukken. Beginstand is plat: hij ligt zoals de kaart op het bord lag. */ .botje { position: fixed; z-index: 9998; pointer-events: none; perspective: 640px; } .bo-lijf { transform-origin: bottom center; transform-style: preserve-3d; transform: rotateX(74deg); } .bo-kaart { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctrl); border-inline-start: 3px solid var(--accent); padding: 8px 10px 10px; box-shadow: var(--shadow-menu); } /* Wiegen, knipperen en stappen doet hij alleen rechtop. Een liggende kaart die met zijn ogen knippert is geen kaart meer maar een spook. */ .botje.staat .bo-kaart { animation: boWieg .34s ease-in-out infinite alternate; } .bo-t { font-size: .8rem; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .bo-ogen { display: flex; gap: 6px; margin-bottom: 5px; } .bo-ogen i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); position: relative; opacity: 0; transition: opacity .2s ease .12s; } .botje.staat .bo-ogen i { opacity: 1; animation: boKnipper 2.6s infinite; } /* Het witte puntje maakt van een stip een oog. Zonder dat kijkt het nergens naar en is het gewoon een bolletje. */ .bo-ogen i::after { content: ''; position: absolute; top: 1.5px; inset-inline-start: 4px; width: 3px; height: 3px; border-radius: 50%; background: var(--card); } /* Pootjes horen bij rechtop staan. Onder een liggende kaart zijn het losse stokjes, dus die trekken zich in zodra hij weer gaat liggen. */ .bo-poot { position: absolute; bottom: -9px; width: 3px; height: 10px; border-radius: 2px; background: var(--ink); transform-origin: top center; opacity: 0; transition: opacity .12s ease; } .bo-poot.links { inset-inline-start: 32%; } .bo-poot.rechts { inset-inline-start: 62%; } .botje.staat .bo-poot { opacity: 1; } .botje.staat .bo-poot.links { animation: boStap .34s ease-in-out infinite alternate; } .botje.staat .bo-poot.rechts { animation: boStap .34s ease-in-out infinite alternate-reverse; } @keyframes boStap { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } } @keyframes boWieg { from { transform: translateY(0); } to { transform: translateY(-3px); } } @keyframes boKnipper { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } } /* Even laten weten dat hij er is; daarna is het weer een gewone kaart. */ .task.net-aangekomen { animation: boLand .4s cubic-bezier(.2,.8,.3,1); } @keyframes boLand { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } } /* Nieuw werk bouwt zich op: eerst een streepje, dan de hele kaart. */ /* fill-mode both: tijdens de wachttijd (animation-delay, gezet vanuit js/anim.js) staat de kaart al ingeklapt in plaats van eerst compleet in beeld te springen. */ .task.bouwt { animation: boBouw .55s cubic-bezier(.2,.8,.3,1) both; transform-origin: top center; } .task.bouwt-af { animation: boGlans .7s ease; } @keyframes boBouw { 0% { transform: scaleY(.06); opacity: .2; } 45% { transform: scaleY(1.04); opacity: 1; } 100% { transform: none; } } @keyframes boGlans { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 7px transparent; } } /* Het feestje. */ .task.viert { animation: boJuich .7s cubic-bezier(.2,.8,.3,1); } @keyframes boJuich { 0% { transform: none; } 25% { transform: translateY(-7px) rotate(-2deg); } 50% { transform: translateY(0) rotate(1.5deg); } 75% { transform: translateY(-3px) rotate(-1deg); } 100% { transform: none; } } .vonken { position: fixed; z-index: 9999; pointer-events: none; } .vonken i { position: absolute; width: 6px; height: 6px; border-radius: 50%; animation: boVonk .9s cubic-bezier(.15,.7,.3,1) forwards; } @keyframes boVonk { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } } /* De high five: twee kaarten leunen naar elkaar toe, met de handen ertussen. */ .task.five-op { animation: boFiveOp .7s cubic-bezier(.2,.8,.3,1); } .task.five-neer { animation: boFiveNeer .7s cubic-bezier(.2,.8,.3,1); } @keyframes boFiveOp { 0%, 100% { transform: none; } 45% { transform: translateY(9px) rotate(2.5deg); } } @keyframes boFiveNeer { 0%, 100% { transform: none; } 45% { transform: translateY(-9px) rotate(-2.5deg); } } .high-five { position: fixed; z-index: 9999; pointer-events: none; font-size: 22px; transform: translate(-50%, -50%); animation: boKlap .7s ease forwards; } @keyframes boKlap { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); } 45% { opacity: 1; transform: translate(-50%,-50%) scale(1.25); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1); } } /* Onder 1100px gebeurt er niets — js/anim.js begint er niet eens aan, dit is de vangnetregel voor het geval een scherm tijdens een beweging krimpt. */ @media (max-width: 1099px) { .botje, .vonken, .high-five { display: none; } .task.bouwt, .task.bouwt-af, .task.viert, .task.five-op, .task.five-neer, .task.net-aangekomen { animation: none; } } @media (prefers-reduced-motion: reduce) { .botje, .vonken, .high-five { display: none; } .bo-kaart, .bo-poot, .bo-ogen i, .bo-lijf { animation: none; } .task.bouwt, .task.bouwt-af, .task.viert, .task.five-op, .task.five-neer, .task.net-aangekomen { animation: none; } } /* ── Blok om te plakken, met kopieerknop ────────────────────── */ .codeblock { position: relative; margin: 8px 0; } .codeblock pre { background: var(--fill); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; padding-inline-end: 74px; font-family: ui-monospace, monospace; font-size: .78rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto; } .codeblock .copy { position: absolute; top: 7px; inset-inline-end: 7px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 7px; padding: 3px 9px; font-size: .72rem; font-weight: 600; } .codeblock .copy:hover { border-color: var(--accent); color: var(--accent-text); } /* ── Kleurstalen bij een project ─────────────────────────────── */ .swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .swatch { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line); padding: 0; } .swatch:hover { transform: scale(1.08); } .swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ── Bord op mobiel: één kolom per scherm ───────────────────── */ /* Kolommen zijn schermbreed en klikken vast bij het swipen, zodat je nooit tussen twee kolommen blijft hangen. De balk onderin zegt waar je bent en of er links of rechts nog een kolom staat. */ /* basis eerst, dan pas de media-query — anders wint deze regel alsnog */ #boardNav { display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 6; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 6px; box-shadow: var(--shadow); } #boardNav button { border: 0; background: transparent; color: var(--ink); font-size: 1.15rem; line-height: 1; padding: 5px 11px; border-radius: var(--r-pill); } #boardNav button:disabled { opacity: .22; } #boardNav button:not(:disabled):active { background: var(--accent-50); } #navDots { display: flex; align-items: center; gap: 6px; padding: 0 5px; } #navDots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: all .15s ease; } #navDots i.on { background: var(--accent); width: 18px; border-radius: var(--r-pill); } #navLabel { font-size: .78rem; font-weight: 700; color: var(--muted); padding: 0 4px; white-space: nowrap; } @media (max-width: 900px) { /* Géén scroll-behavior: smooth hier. In combinatie met mandatory snapping wordt elke geanimeerde scroll per frame teruggesnapt naar de huidige kolom, waardoor de pijlen niets leken te doen. Vegen blijft native soepel; de pijlen springen direct. */ .board { --kolw: calc(100vw - 36px); --kolw-erbij: calc(100vw - 36px); grid-template-columns: repeat(5, var(--kolw)); scroll-snap-type: x mandatory; padding-bottom: 68px; } .col { scroll-snap-align: center; } #boardNav { display: flex; } } /* ── De actiebalk op een telefoon ──────────────────────────────── Onder 560px stond er van alles in de kopbalk dat niet paste: op 375px telden we zeven raakvlakken naast elkaar. Wat vertelt wáár je bent blijft boven (project ▼ · wacht-op · avatar); wat je dóét staat hier, onder je duim. Zie plaatsBalkKnoppen() in js/views.js voor het verhuiswerk. Eén balk en niet twee. Het middenstuk (.ab-mid) draagt de kolomnavigatie, en die verdwijnt in de kalender en de tijdlijn. Zat ze in een eigen pil bóven deze balk, dan schoof de balk bij elke weergavewissel op en neer — knoppen die van plaats veranderen zijn de vervelendste soort. Met flex:1 op een middenstuk dat er altijd staat blijven zoeken links en de plus rechts op de millimeter liggen. */ /* Zwevend, niet vastgeplakt aan de onderrand: dezelfde taal als #boardNav en .pickbar, die hier altijd al als pil boven de rand hingen. Een balk die van rand tot rand loopt leest als systeemmeubilair van de telefoon zelf en voelt daardoor zwaarder dan hij is. Wél nog links en rechts uitgelijnd en niet op inhoudsbreedte: het middenstuk krimpt en groeit met de kolomnaam, dus een pil op maat zou bij elke veeg een andere breedte hebben. */ #actiebalk { display: none; position: fixed; inset-inline: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 6; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow); padding: 5px 8px; } #actiebalk .ab-mid { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-width: 0; } /* ⚠️ Een vaste breedte, want het opschrift is het pictogram van de huidige weergave — en 📅 is breder dan ▦. Zonder dit schoof de plus 5 pixels op bij elke wissel naar de kalender, en dat is precies het soort bewegend meubilair waarvoor deze balk bestaat. Nagemeten 16-08-2026. */ #actiebalk #viewModeBtn { min-width: 48px; display: inline-flex; align-items: center; justify-content: center; } /* ⚠️ Een afstammelingsregel en geen klasse die JS erop zet: een menu in deze balk moet naar bóven openklappen, en dat mag niet uit de pas kunnen lopen met de verhuizing. Zonder dit valt #addMenu (en #viewModeMenu) onder de schermrand — en dan wijst de ladderpijl trots naar een menu-item dat je niet ziet, want inBeeld() kijkt alleen naar afmeting, niet naar zicht. De .menuwrap gaat hier op `position: static`, zodat het menu zich richt naar de bálk en niet naar de knop — hetzelfde trucje als #moreMenu in de kaart. Anders is de knop het bevattende blok en eindigt `bottom: 100%` bij de onderkant van de knop, dus mídden in de balk: nagemeten 16-08-2026 stak het weergavemenu er 7 pixels overheen, precies de bovenlucht van de balk. Beide menu's hangen aan de rechterkant, want beide knoppen staan daar. */ #actiebalk .menuwrap { position: static; } #actiebalk .menu { top: auto; bottom: calc(100% + 5px); inset-inline-start: auto; inset-inline-end: 8px; } @media (max-width: 560px) { :root { --balkh: 46px; --balk-onder: env(safe-area-inset-bottom, 0px); --balk-zweef: 14px; } #actiebalk { display: flex; } /* In de balk is de pil geen pil meer: geen eigen rand, geen eigen schaduw, geen eigen plek. syncBoardNav() merkt hier niets van — die meet .col in #board en schrijft via id. */ #boardNav { position: static; transform: none; inset: auto; background: transparent; border: 0; box-shadow: none; padding: 0; } /* De onderruimte van het bord rekent nu met de balk in plaats van met 68px voor een pil die daar niet meer zweeft. */ .board { padding-bottom: calc(14px + var(--bodem)); } /* ── Wat er uit de kopbalk moet, maar pas hier kán ──────────── Deze twee horen bij het blok rond `header` bovenin. Ze staan hier omdat hun basisregels verderop in het blad staan (`.searchwrap` op ~127, `.brandmark` op ~1420) en bij gelijke specificiteit de laatste wint. Wie ze naar boven verplaatst, ziet ze stil niets doen. */ /* Het merkje kleurt mee met het project, maar de projectknop ernaast zegt hetzelfde mét de naam erbij. Op 375px is dat 28px voor niets. */ .brandmark { display: none; } /* Gesloten neemt het zoeken geen breedte en geen gap meer in de kopbalk: de opener staat onderin in de balk. Uitgeklapt bestaat het volop — de dubbele klasse (0,2,0) wint van de enkele erboven (0,1,0). */ .searchwrap { display: none; } .searchwrap.open { display: block; position: static; } } /* ── Rondleiding: cartoon-tekstballonnen ────────────────────── */ #tour { position: fixed; inset: 0; z-index: 9998; } #tourHole { position: absolute; border-radius: 12px; box-shadow: 0 0 0 9999px var(--scrim-strong); transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease; pointer-events: none; } .toon { position: absolute; width: min(320px, calc(100vw - 32px)); background: var(--card); color: var(--ink); border: 3px solid var(--ink); border-radius: 20px; padding: 15px 17px; box-shadow: 5px 5px 0 var(--toon-shadow); animation: toonPop .18s ease-out; } @keyframes toonPop { from { transform: scale(.94); opacity: 0 } to { transform: scale(1); opacity: 1 } } .toon h4 { font-size: 1.02rem; margin-bottom: 5px; } .toon p { font-size: .87rem; line-height: 1.5; color: var(--muted); } .toon .toonfoot { display: flex; align-items: center; gap: 8px; margin-top: 13px; } .toon .step { font-size: .76rem; font-weight: 700; color: var(--muted); margin-inline-end: auto; } .toon .tbtn2 { border: 2px solid var(--ink); background: var(--card); border-radius: var(--r-pill); padding: 5px 14px; font-size: .8rem; font-weight: 700; color: var(--ink); } .toon .tbtn2.go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* het staartje: twee driehoeken over elkaar, buitenste in inkt, binnenste wit */ .toon .tail, .toon .tail::after { position: absolute; width: 0; height: 0; border: 13px solid transparent; } .toon .tail::after { content: ''; } .toon.below .tail { top: -26px; border-bottom-color: var(--ink); } .toon.below .tail::after { top: -10px; left: -13px; border-bottom-color: var(--card); } .toon.above .tail { bottom: -26px; border-top-color: var(--ink); } .toon.above .tail::after { bottom: -10px; left: -13px; border-top-color: var(--card); } /* ── Aanwijspijl ────────────────────────────────────────────── */ /* Ligt boven de rondleiding (9998) en boven een modaal, want juist dáár moet hij een knop kunnen aanwijzen. Vangt geen klikken op: hij wijst naar iets wat je moet aanraken, dus hij mag er nooit tussen komen te staan. */ .wijzer { position: fixed; z-index: 10000; pointer-events: none; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .18s ease; } .wijzer .pijl { width: 0; height: 0; border: 11px solid transparent; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .25)); } /* ⚠️ Geen nowrap: een lange staptip werd één eindeloze regel die links en rechts buiten de kaart stak (Svens foto, 22-08-2026). max-content houdt korte tips strak als pil; lange wikkelen binnen een maat die altijd op het scherm en in de kaart past. */ .wijzer .wtekst { background: var(--accent); color: var(--on-accent); border-radius: 14px; padding: 6px 12px; font-size: .8rem; font-weight: 700; width: max-content; max-width: min(66vw, 300px); line-height: 1.35; box-shadow: 0 2px 8px rgb(0 0 0 / .2); } /* De punt wijst naar het doelwit, dus de gekleurde rand zit aan de kant van het doelwit — bij een pijl rechts ervan is dat de linkerrand. */ .wijzer[data-kant="rechts"] .pijl { border-left-width: 0; border-right-color: var(--accent); } .wijzer[data-kant="links"] { flex-direction: row-reverse; } .wijzer[data-kant="links"] .pijl { border-right-width: 0; border-left-color: var(--accent); } .wijzer[data-kant="onder"] { flex-direction: column; } .wijzer[data-kant="onder"] .pijl { border-top-width: 0; border-bottom-color: var(--accent); } .wijzer[data-kant="boven"] { flex-direction: column-reverse; } .wijzer[data-kant="boven"] .pijl { border-bottom-width: 0; border-top-color: var(--accent); } /* Het wippen doet het werk: een stilstaande pijl leest als versiering. */ .wijzer[data-kant="rechts"] .pijl { animation: wipX 1.1s ease-in-out infinite; } .wijzer[data-kant="links"] .pijl { animation: wipXom 1.1s ease-in-out infinite; } .wijzer[data-kant="onder"] .pijl { animation: wipY 1.1s ease-in-out infinite; } .wijzer[data-kant="boven"] .pijl { animation: wipYom 1.1s ease-in-out infinite; } @keyframes wipX { 0%,100% { transform: translateX(0) } 50% { transform: translateX(-6px) } } @keyframes wipXom { 0%,100% { transform: translateX(0) } 50% { transform: translateX(6px) } } @keyframes wipY { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } } @keyframes wipYom { 0%,100% { transform: translateY(0) } 50% { transform: translateY(6px) } } @media (prefers-reduced-motion: reduce) { .wijzer .pijl { animation: none; } } /* ── Rechts naar links (Arabisch) ───────────────────────────── */ /* De opmaak rekent in logische kanten (inline-start/-end), dus dir="rtl" op spiegelt de hele app vanzelf. Wat overblijft: pijlpunten wijzen de verkeerde kant op, want die tekens spiegelen niet mee. */ [dir="rtl"] #navPrev, [dir="rtl"] #navNext { transform: scaleX(-1); } /* ── Weergaven: wissel, kalender, tijdlijn ──────────────────── */ /* Alles hieronder staat op dezelfde tokens en breekpunten als het bord. Nieuwe kleuren zijn er niet: WAITING is overal een streepjesrand in --danger, een voorstel is --claude, en de projectkleur komt via --pcol. */ .vsw { display: flex; gap: 2px; background: var(--fill); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; flex: 0 0 auto; } .vsw button { border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: var(--r-pill); padding: 5px 10px; font-size: .82rem; line-height: 1; display: flex; align-items: center; gap: 5px; white-space: nowrap; } .vsw button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); } .vsw.narrow { background: transparent; border: 0; padding: 0; } #boardNav, .pickbar { --nav-shadow: var(--shadow); } body:not([data-view="board"]) #boardNav { display: none; } .calendar, .timeline { padding: 14px 18px 80px; min-height: calc(100vh - 104px); } .calbar, .tlbar-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .calbar .sp, .tlbar-top .sp { flex: 1; } .calttl { font-size: 1rem; min-width: 9ch; text-align: center; } .vnotice { color: var(--warn); font-size: .78rem; cursor: help; } .vsaved { font-size: .78rem; color: var(--muted); } .vsaved .link { border: 0; background: none; color: var(--accent-text); cursor: pointer; padding: 0; font: inherit; } /* Kalender: raster links, strook rechts. Onder 900px onder elkaar. */ /* ⚠️ minmax(0, 1fr) en niet 1fr — dezelfde val als bij .calgrid hieronder, maar één niveau hóger, en dáár deed hij pas echt pijn. Onder 900px staan het maandraster en het blok "Nog geen datum" in dezelfde ene baan, en de automatische ondergrens van een `1fr`-baan is de min-content van zijn breedste kind. Een kaart in dat blok zet zijn titel op `nowrap`, dus zijn min-content ís de volle titel: gemeten 16-08-2026 op een echt bord duwde één kaart van 435px de baan naar 491px op een scherm van 375 — en het maandraster groeide mee tot ruim twee keer de schermbreedte. Op een telefoon zag je nog drie van de zeven dagen. De kaart knipt zijn tekst zelf al af zodra hij een breedte krijgt; hij moet alleen niet mogen bepalen wélke breedte dat is. */ .calmain { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 14px; align-items: start; } /* Tweede slot, aan de kant van het kind: als grid-item mag dit blok nooit een eigen ondergrens opleggen aan de baan waar het in staat. */ .park, .parklist { min-width: 0; } /* minmax(0, 1fr) en niet 1fr: de standaard-min van een kolom is zijn inhoud, dus één lange kaarttitel duwt de hele week scheef. Dezelfde val als bij de vensters hierboven — de kaart knipt zijn tekst zelf al af. */ .calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .calhead { font-size: .72rem; color: var(--muted); text-align: center; padding: 2px 0; text-transform: uppercase; } .daycell { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; min-height: 92px; padding: 4px; display: flex; flex-direction: column; gap: 3px; position: relative; } .daycell.out { opacity: .45; } .daycell.today { outline: 2px solid var(--accent); outline-offset: -1px; } .daycell.dragover { border-color: var(--accent); background: var(--accent-50); } .daycell.armed { border-style: dashed; border-color: var(--accent); cursor: pointer; } .dnum { font-size: .72rem; color: var(--muted); text-align: end; } .dmore, .dadd { border: 0; background: transparent; color: var(--muted); font-size: .72rem; cursor: pointer; padding: 1px; } .dadd { opacity: 0; align-self: center; font-size: 1rem; } .daycell:hover .dadd, .dadd:focus-visible { opacity: .5; } /* Op touch is er geen hover: daar stond de plus onzichtbaar maar wél aantikbaar in elke lege dag — een blinde tik opende een venster. Zelfde patroon als de archiefknop in het bordmenu: altijd zichtbaar, gedimd. */ @media (hover: none) { .dadd { opacity: .45; } } /* Eén kaartvorm voor kalender, tijdlijn en de strook. */ .vcard { display: flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-inline-start: 3px solid var(--pcol, transparent); border-radius: 6px; padding: 3px 5px; font-size: .75rem; cursor: pointer; box-shadow: 0 0 0 1px var(--pcol, transparent) inset; } .vcard .vt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } /* ⚠️ Ook dít deel moet kunnen krimpen. Het stond op `nowrap` zonder `min-width: 0`, en dan is de automatische ondergrens van een flex-item zijn min-content — dus de volle wacht-op-tekst. Gevolg, gezien op een telefoon op 16-08-2026: de titel werd weggeknepen tot "👤 …" en de kaart liep alsnog buiten zijn vak. Eén regel wacht-op van 60 tekens was genoeg. De helft als bovengrens, zodat de titel altijd leesbaar blijft: waaróp je wacht is de bijzaak, wát je doet de hoofdzaak. */ .vcard .vw { color: var(--danger); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; max-width: 50%; } /* Zelf ook geen ondergrens opleggen aan de lijst waar hij in staat. */ .vcard { min-width: 0; } .vcard.wait { border: 1.5px dashed var(--danger); background: var(--danger-bg); } /* ── Op de kalender vanwege een opvolgdatum ─────────────────── Dezelfde kaart, andere reden. Een deadline zegt "dit moet dan af", een opvolgdatum "dan ga ik erachteraan" — en dat zijn twee afspraken die je uit elkaar moet kunnen houden op een dag waar ze allebei staan. Rustiger dan een deadline: dit is een herinnering, geen alarm. */ .vcard.opvolg { border-style: dotted; background: var(--panel); } .vcard.opvolg .vgrip { cursor: default; color: var(--accent-text); } /* Op de tijdlijn is het een punt van één dag, geen balk. */ .tlbar.opvolg { background: none; border: 1.5px dotted var(--pcol); } .tlbar.opvolg .diamond { color: var(--accent-text); } .vcard.proposal { border-color: var(--claude); } .vcard.picked { outline: 2px solid var(--accent); } .vcard.dragging { opacity: .45; } .vgrip { border: 0; background: transparent; color: var(--muted); cursor: grab; padding: 0 2px; font-size: .8rem; line-height: 1; flex: 0 0 auto; min-width: 18px; min-height: 18px; } .park { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; } .park.dragover, #parkBox.dragover { border-color: var(--accent); background: var(--accent-50); } .park label { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; } .park .cnt, .tlgroup .cnt { background: var(--fill); border-radius: var(--r-pill); padding: 0 6px; font-size: .72rem; color: var(--muted); } .parklist { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .daysheet { margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; } .daysheet label { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .85rem; } .callegend { margin-top: 10px; font-size: .74rem; } /* De balk onderin zolang er een kaart is opgepakt — zelfde vorm als #boardNav. Op een telefoon gaat hij bóven de actiebalk staan in plaats van erop: --bodem is 0 zolang die balk er niet is, dus dit is één regel voor beide. ⚠️ Centreren met twee inzetten en `margin-inline: auto`, en níét met `left: 50%` plus een verschuiving terug. Dat laatste stond er tot 16-08-2026, en dan is de beschikbare ruimte voor een element dat zichzelf mag opmeten alles rechts van dat startpunt — dus precies de hálve schermbreedte. Een titel die daar niet in past viel om in een smalle kolom, en met een rand van 999px werd dat blokje een cirkel. Zo op een telefoon gezien: een witte bol midden op de maandkalender. */ .pickbar { position: fixed; inset-inline: 12px; margin-inline: auto; width: fit-content; max-width: calc(100vw - 24px); bottom: calc(14px + var(--bodem)); z-index: 6; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; box-shadow: var(--shadow-menu); font-size: .82rem; } /* Eén regel, en de titel kapt af met puntjes op de píxel in plaats van hard op teken 40 — dat sneed midden in een woord ("WhatsApp n"). */ .pickbar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .pickbar .hbtn { flex: 0 0 auto; } /* Tijdlijn: een grid over dagen, geen pixelrekenwerk. Spiegelt vanzelf in RTL. */ .tlscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); } .tlinner { min-width: max-content; } .tlruler, .tlrow { display: grid; grid-template-columns: 180px 1fr; align-items: center; } .tlname { position: sticky; inset-inline-start: 0; background: var(--panel); z-index: 2; padding: 4px 8px; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .tltrack { display: grid; grid-template-columns: repeat(var(--days), var(--daypx)); min-height: 22px; align-items: center; } .tltrack.dragover { background: var(--accent-50); } .tlruler { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 3; background: var(--panel); } .tlday { font-size: .62rem; color: var(--muted); text-align: center; padding: 3px 0; overflow: hidden; } .tlday.today { color: var(--accent-text); font-weight: 700; } .tlday.mstart { border-inline-start: 1px solid var(--line); } .tlbar { height: 14px; border-radius: 7px; background: var(--pcol); position: relative; cursor: pointer; } .tlbar.due { background: transparent; display: flex; align-items: center; justify-content: center; } .tlbar.due .diamond { color: var(--pcol); font-size: .8rem; } .tlbar.open { mask-image: linear-gradient(to right, #000 65%, transparent); } .tlbar.over { background: var(--danger); } .tlbar.wait { background: repeating-linear-gradient(45deg, var(--pcol) 0 4px, transparent 4px 8px); border: 1px dashed var(--danger); } .tlbar .clipmark { position: absolute; inset-inline-start: -2px; top: -3px; color: var(--muted); font-size: .7rem; } .tlgroup summary { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: .8rem; font-weight: 600; cursor: pointer; border-top: 1px solid var(--line); } .gdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .tlempty, .tlro { padding: 12px; } @media (max-width: 900px) { /* Ook hier minmax(0, …): dit is precies de baan waarin het maandraster en "Nog geen datum" samen komen te staan. Zie de opmerking bij .calmain. */ .calmain { grid-template-columns: minmax(0, 1fr); } .daycell { min-height: 62px; } .calendar, .timeline { padding: 12px 10px 80px; } } @media (max-width: 700px) { .vsw .vl { display: none; } } @media (max-width: 560px) { /* ⚠️ Hier stond `.viewbtn { max-width: 30vw }` en dat won van de regel in de kopbalksectie hierboven — gelijke specificiteit, latere plek. De projectnaam is op een telefoon het enige wat nog vertelt wélk bord je ziet; die mag de vrije ruimte hebben. Zie de ≤560-regels bij `header`. */ .vsw button { padding: 4px 7px; } .daycell { min-height: 54px; padding: 2px; } .vcard { font-size: .7rem; } .tlruler, .tlrow { grid-template-columns: 120px 1fr; } /* De 80px hierboven was een los getal dat niets wist van wat er onder stond. Nu volgt de onderruimte de balk, net als bij het bord. */ .calendar, .timeline { padding-bottom: calc(14px + var(--bodem)); } /* ⚠️ Een harde garantie dat de pagina op een telefoon niet zijwaarts kan schuiven. De kalender rékent al goed — het raster staat op `repeat(7, minmax(0, 1fr))` en elke kaart knipt zijn eigen titel af — maar één toekomstige toevoeging met een vaste breedte is genoeg om de hele maand scheef te duwen, en dan zie je het pas op een echt toestel. `clip` en niet `hidden`: dat maakt geen schuifbak van dit vak, dus de plakkende kopbalk en de tijdlijn met zijn eigen zijwaartse schuif (.tlscroll) blijven werken zoals ze werkten. */ .calendar, .timeline { overflow-x: clip; } } /* ── "Staat dit er misschien al?" ───────────────────────────── */ /* Verschijnt in het nieuwe-taakvenster en in het plakscherm. Geen alarm — een zachte hint met twee knoppen, want in de meeste gevallen wil je gewoon doorgaan met de nieuwe kaart. */ .simbox { background: var(--warn-bg, var(--fill)); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 4px 0; } .simhead { font-size: .76rem; color: var(--muted); margin-bottom: 5px; } .simrow { display: flex; align-items: center; gap: 6px; padding: 3px 0; } .simrow .simt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; } .simrow .mini.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; } /* Wat je plakte of deelde, klein ernaast. Een naam als "plak-2026-08-02-2318.png" zegt niets; het plaatje zelf zegt in één oogopslag of je het goede te pakken had. `contain` en geen `cover`: bij een schermafbeelding is juist de rand waar je aan herkent wat het is. */ .capthumb { flex: 0 0 auto; width: 54px; height: 40px; object-fit: contain; border-radius: 5px; border: 1px solid var(--line); background: var(--fill); } /* En wat het model er zelf in ziet, vóór de knop die er een kaart van maakt. Vandaar dat dit een blok is en geen .note: dit is het antwoord op "heeft hij wel naar mijn bon gekeken?" en dat hoort niet als voetnoot te lezen. */ .capseen { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: .8rem; line-height: 1.5; } .capseen b { display: block; color: var(--muted); font-size: .74rem; font-weight: 600; margin-bottom: 2px; } /* Weet de AI het niet, dan hoort de keuzelijst eruit te springen. Anders lees je over de vraag heen en staat het alsnog op het verkeerde bord. */ select.pickme { border-color: var(--accent); } /* Het bijstuurblok staat sinds 04-08-2026 áltijd onder de bordkiezer: je moet ook een goed antwoord kunnen corrigeren. Daarom standaard stil — een grijs bijzinnetje, geen kader, geen achtergrond. Alleen als de AI het zelf niet wist (.unsure) mag het opvallen. Zonder dat verschil leest élk antwoord als twijfel, en dan zegt het niets meer. */ /* Wat er ligt te wachten terwijl de AI kijkt. Stil grijs: het is er om te herkennen ("ja, dát bedoelde ik"), niet om te lezen — het antwoord komt er zo overheen. Vandaar ook een maximumhoogte: een geplakte mail van drie schermen zou het wachtscherm langer maken dan het resultaat. */ .capwacht { margin-top: 10px; } .capwacht-url { word-break: break-all; } .capwacht-tekst { margin: 6px 0 0; padding: 8px 10px; background: var(--fill); border-radius: 8px; font-size: .78rem; color: var(--muted); white-space: pre-wrap; word-break: break-word; max-height: 140px; overflow-y: auto; } .hintrow { margin: 6px 0; } .hintrow label { font-size: .8rem; color: var(--muted); font-weight: 400; } .hintrow.unsure label { color: var(--ink); font-weight: 600; } .hintrow.unsure .row2 input { border-color: var(--accent); } .hintrow .row2 { display: flex; gap: 6px; align-items: center; } .hintrow .row2 input { flex: 1; min-width: 0; } .hintrow .row2 .hbtn { white-space: nowrap; } .hintrow .row2 .hbtn[disabled] { opacity: .5; cursor: default; } @media (max-width: 560px) { .simrow { flex-wrap: wrap; } .simrow .simt { flex: 1 0 100%; } /* Een bijlagenregel heeft geen knop achter zich, alleen de grootte. Die hoeft dus niet naar een eigen regel — en juist op de telefoon is delen de gewone route. */ .simrow.filerow .simt { flex: 1 1 auto; } } /* ── Kaarten samenvoegen ────────────────────────────────────── */ /* Het doel van een sleepbeweging licht op zodra je lang genoeg boven het midden hangt. Duidelijk anders dan .dragover op een kolom: dáár gaat het om herordenen, hier om samenvoegen. */ .task.mergetarget { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--accent-50); transform: scale(1.02); } .task.merged { opacity: .55; } .task.merged .t { text-decoration: none; } .mergepair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; } .mergecard { border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-width: 0; } .mergecard.keeps { border-color: var(--ok); } .mergecard.goes { border-color: var(--line); opacity: .75; } .mergecard .mlabel { font-size: .68rem; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .mergecard .mn { max-height: 5.4em; overflow: hidden; } @media (max-width: 560px) { .mergepair { grid-template-columns: 1fr; } } /* ── Bedrijven en klanten ───────────────────────────────────── Een dunne laag boven het bord: een naam met een kleur. Zie de opmerking bij `groups` in server.js voor waarom hij zo dun is. */ .grow { display: flex; align-items: center; gap: 8px; padding: 5px 0; } .grow .gKleur { flex: 0 0 34px; height: 30px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); } .grow .gNaam { flex: 1 1 auto; min-width: 0; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 9px; background: var(--card); color: var(--ink); } .grow .note { flex: 0 0 auto; white-space: nowrap; } .pgroep .flbl { flex: 0 0 auto; } .pgroep select { flex: 1 1 auto; min-width: 0; } /* Het kopje boven een groep borden in het projectmenu. */ .optkop { display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 9px 8px 3px; } .gdot2 { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } /* ── Het urenrapport ────────────────────────────────────────── Bewust boven de regellijst: die toont maximaal 200 regels en beantwoordt "wat heb ik geboekt", dit beantwoordt "hoeveel is het samen". */ .rapbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; } .rapbar input, .rapbar select { border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 9px; background: var(--card); color: var(--ink); } .raptotaal { display: flex; align-items: baseline; gap: 12px; padding: 8px 0 10px; } .raptotaal b { font-size: 1.25rem; } .raptotaal span { color: var(--accent-text); font-weight: 700; } .raplijst { display: flex; flex-direction: column; } .raplijst.klein { margin-top: 8px; opacity: .85; } .raprij { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: .85rem; } /* min-width: 0 op de naam — anders duwt een lange bordnaam de bedragen weg. */ .rapnaam { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rapgeld { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--muted); } /* ── Bordrij met archiefknop, in het projectmenu ──────────────── */ /* De knop verschijnt pas bij hover of toetsenbordfocus: hij mag er zijn, maar niet naast elke bordnaam om aandacht schreeuwen. Op touch is er geen hover, dus daar staat hij altijd — zie de media-query hieronder. */ .optrij { display: flex; align-items: center; gap: 2px; } .optrij > .opt { flex: 1 1 auto; min-width: 0; } .optrij .rijact { flex: 0 0 auto; border: 0; background: none; cursor: pointer; padding: 4px 6px; border-radius: 8px; opacity: 0; font-size: 14px; transition: opacity .12s ease; } .optrij:hover .rijact, .optrij .rijact:focus-visible { opacity: .7; } .optrij .rijact:hover { opacity: 1; background: var(--fill); } @media (hover: none) { .optrij .rijact { opacity: .55; } } /* Een gearchiveerd bord: doorgestreept, met de teller waar de naam stond. */ .optrij.weg .opt.uit { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; padding: 7px 9px; opacity: .55; } .optrij.weg .opt.uit > span:nth-child(2) { text-decoration: line-through; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .optrij.weg .adot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .optrij.weg .aftel { flex: 0 0 auto; font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; } .optrij.weg .rijact.terug { opacity: .8; } /* Bordnaam op één regel. Alleen het label (het span dat rekt), níét het kleurbolletje ervoor: dat trof de vorige versie ook, en toen kromp de hele knop naar nul en verdwenen alle namen uit het menu. 18-08-2026. */ .optrij > .opt { flex: 1 1 0; min-width: 0; } .optrij .optlabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⚠️ `width: auto` is hier niet cosmetisch. Knoppen in dit menu krijgen `width: 100%` van de .opt-regel; zonder deze correctie werd de archiefknop 539px breed, kreeg de bordnaam 0 px en waren op 18-08-2026 álle namen uit het menu verdwenen. Het lag dus niet aan de tekst maar aan de knop ernaast. */ .optrij .rijact { width: auto; } /* ── Chatbel ──────────────────────────────────────────────────── */ /* Rechtsonder op desktop; onder 560px verhuist hij naar #actiebalk, want daar loopt die balk van rand tot rand en zou een zwevende bel er bovenop landen. ⚠️ Neutrale vulling met de bordkleur als ring, níét een gevulde cirkel: dan staan er twee gekleurde ronde knoppen die allebei "hoofdactie" roepen, terwijl de oranje + dat is. Sven, 18-08-2026. */ .chatfab { position: fixed; inset-inline-end: 18px; z-index: 7; bottom: calc(18px + var(--bodem, 0px)); display: flex; align-items: center; gap: 6px; width: 52px; height: 52px; justify-content: center; border-radius: 999px; cursor: pointer; background: var(--card); color: inherit; border: 2px solid var(--pcol, var(--line)); box-shadow: var(--shadow-menu); } .chatfab:hover { transform: translateY(-1px); } .chatfab .cf-ic { font-size: 20px; line-height: 1; } /* De teller. Leeg = geen bolletje: een knop die altijd op nul staat leert je hem te negeren. */ .chatfab b { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; } .chatfab b:empty { display: none; } /* Tussen 561 en 900 zweeft #boardNav gecentreerd onderaan; de bel iets hoger, dan staan ze naast elkaar in plaats van over elkaar. */ @media (min-width: 561px) and (max-width: 900px) { .chatfab { bottom: 78px; } } /* In de balk is hij geen zwevende bel meer maar gewoon een icoon. */ #actiebalk .chatfab { position: static; width: auto; height: auto; inset: auto; border: 0; box-shadow: none; background: none; padding: 6px 8px; } #actiebalk .chatfab b { position: static; margin-inline-start: 2px; } /* De wachtregel van de AI binnen het chatvenster. In #aiBar heeft .aijob een eigen achtergrond en marges die bij een balk onderin horen; hier moet hij meelopen met het gesprek. */ #chatWacht:empty { display: none; } #chatWacht { margin: 6px 0 0; } #chatWacht .aijob { margin: 0; border-radius: 10px; } /* Het vinkje "voortaan automatisch" onder de bijstuurrij. Een aparte regel en niet in de knoppenrij: het is een instelling, geen actie. */ .capauto { display: flex; align-items: center; gap: 6px; margin-top: 8px; cursor: pointer; } /* ── Urenvenster: uitleg en wegwijzers ────────────────────────── */ /* De uitlegregel zolang er nog niets geboekt is, en de verwijzing naar waar de tarieven staan. Beide een terzijde, geen kop: ze vertellen iets, ze vragen niets. */ .tt-uitleg { margin: 8px 0 14px; } .tt-tarieven { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .tt-tarieven .hbtn { flex: 0 0 auto; } /* De andere borden met een budget, achter één regel. */ .tt-meer > summary { cursor: pointer; padding: 6px 0; } .tt-meer[open] > summary { margin-bottom: 6px; } /* De actiebalk beweegt mee met het toetsenbord — zie tilActiebalk() in core.js. */ #actiebalk { transition: transform .15s ease; } /* Het kiespaneel van de ladder: één rij per aan te zetten ladder, met de winst-regel eronder; "past bij jou" markeert de top-3 van je profiel. */ .kiesrijen { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .kiesrij { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: start; padding: 10px 12px; } .kiesrij .kiesnaam { font-weight: 600; } .kiesrij .note { font-weight: 400; } .kiesfit { color: var(--accent); font-size: .72rem; border: 1px solid var(--accent); border-radius: 999px; padding: 1px 7px; margin-inline-start: 6px; font-weight: 600; } /* Kluis: AI-badge op een gedeeld item, en de uitklapbare deelblokken. */ .vault-aibadge { color: var(--accent); font-size: .72rem; border: 1px solid var(--accent); border-radius: 999px; padding: 1px 7px; } .vdeel { margin-top: 6px; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; } /* ── Profielraster op de voordeur (24-08-2026) ── */ .lp-prof { max-width: 1060px; margin: 26px auto 0; padding: 0 16px; } .lp-profvraag { text-align: center; font-weight: 600; margin-bottom: 12px; } /* Zoveel kolommen als er passen: vijf tegels stonden anders als vier plus een wees op een tweede rij (analyse 05-09-2026). ⚠️ 190px en niet 200: de bak is 1060 − 2×16 = 1028px breed, en vijf kolommen mét vier keer 12px tussenruimte passen pas vanaf 5×196. */ .lp-profraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } /* De belofte van de doelgroep als uitkomstregel (06-09-2026); flex:1 houdt de knop onderaan, ook als de ene belofte langer is dan de andere. */ .lp-profwin { margin: 0; font-size: .9rem; flex: 1; } /* Fototegels (06-09-2026): de foto loopt tot de rand (negatieve marge tot de paddingrand; overflow knipt de hoeken), 3:2 zoals de bron, en een vlak in de kaartkleur zolang hij lui laadt — geen wit gat op donker. */ .lp-proffoto { display: block; width: calc(100% + 28px); max-width: none; margin: -14px -14px 2px; aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: center; background: var(--panel-2); } .lp-profleer { display: block; text-align: center; text-decoration: none; box-sizing: border-box; color: var(--on-accent); } .lp-profleer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Vijf fototegels op één rij vragen meer breedte dan de tekstversie. */ .voordeur-pagina .lp-prof { max-width: 1320px; } @media (max-width: 1100px) and (min-width: 621px) { /* Twee kolommen van ±490px: een 3:2-foto werd daar 345px hoog en duwde de eerste knoppen onder de vouw van een 768-scherm. Liggender dus. */ .lp-proffoto { aspect-ratio: 2 / 1; } /* Vijf tegels in twee kolommen laat de laatste alleen staan: die neemt de hele rij, met een liggend beeld in plaats van een 3:2-blok. */ .lp-profkaart:last-child:nth-child(odd) { grid-column: 1 / -1; } .lp-profkaart:last-child:nth-child(odd) .lp-proffoto { aspect-ratio: auto; height: 180px; } } @media (max-width: 620px) { .lp-proffoto { aspect-ratio: 2 / 1; } } /* Het proefpaneel komt ná de klik in beeld; iets lucht boven de rand. */ .lp-profpaneel { scroll-margin-top: 16px; } @media (max-width: 1100px) { .lp-profraster { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .lp-profraster { grid-template-columns: 1fr; } } .lp-profkaart { display: flex; flex-direction: column; gap: 8px; padding: 14px; overflow: hidden; cursor: pointer; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); } .lp-profkaart.aan { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-50); } .lp-profkaart .lp-profkop { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; } .lp-profkaart .pf-ic { font-size: 1.4rem; } .lp-profpunten { margin: 0; padding: 0 0 0 1.1em; display: flex; flex-direction: column; gap: 5px; font-size: .84rem; flex: 1; } .lp-profkaart .lp-start { width: 100%; margin-top: 4px; } .lp-profpaneel { margin-top: 14px; padding: 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); } /* De overdracht onder de proef (06-09-2026): het resultaat wordt jouw bord. */ .lp-bordcta { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--bg); border: 1.5px solid var(--accent-voor, var(--accent)); } .lp-bordcta h4 { margin: 0; } .lp-bordcta-naam { font-weight: 600; margin: 8px 0 0; } .lp-bordcta .lp-start, .lp-bordcta .lp-hoe { margin-top: 10px; } .lp-bordcta .note { margin-top: 8px; } .doelgroep-pagina .lp-startnoot { margin-top: 14px; } .lp-profpaneel h3 { margin-bottom: 8px; } .lp-profpaneel textarea, .lp-profpaneel input[type="text"] { width: 100%; } .lp-vn-try-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; } .lp-vn-try-row input { flex: 1; } .lp-mini-bord { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .lp-mini-kaart { display: flex; justify-content: space-between; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; background: var(--bg); font-size: .9rem; } .lp-mini-kaart .st { font-size: .7rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; white-space: nowrap; } .lp-doc { border: 1px dashed var(--line); border-radius: 10px; padding: 9px 12px; white-space: pre-wrap; font-size: .86rem; margin-top: 8px; } .lp-chat { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .lp-chat .bubbel { max-width: 88%; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: .86rem; background: var(--bg); } .lp-chat .bubbel.mijn { align-self: flex-end; background: var(--accent-50); } /* De hoe-knop naast de start; de afspeelknop midden op de poster. De prijzenlink (07-09-2026) leent dezelfde huid, als link in plaats van knop. Bewust een eigen klasse: `.doelgroep-pagina .lp-hoe` verbergt de filmknop, en de prijzenlink hoort op /voor juist wél te staan. */ .lp-hoe, .lp-prijslink { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 10px 16px; cursor: pointer; font: inherit; } .lp-prijslink { display: inline-block; text-decoration: none; color: var(--ink); box-sizing: border-box; } .lp-prijslink:hover { border-color: var(--muted); } .lp-prijslink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .lp-play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 1.7rem; cursor: pointer; box-shadow: 0 6px 22px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 3; } .lp-play:hover { filter: brightness(1.08); } /* ⚠️ Hier stond een tweede plaatsingsregel voor de poster (weg 06-09-2026). De poster staat op regel 1121 al op absolute met inset 0 — dus al een verankering voor deze knop. Die tweede regel haalde hem uít de bedekking en zette hem in de kolom van het toneel: met beweging uit duwde hij bord en ondertiteling permanent uit een bak met overflow:hidden. Niet terugzetten. */ /* De wizard-tegel die op de site al gekozen was. */ .profkaart.vooraf { border-color: var(--accent); } .pf-vooraf { display: block; font-size: .72rem; color: var(--accent-text); margin-top: 4px; } /* ── De filmpagina en de voordeur delen de opmaak; alleen wat je ziet verschilt (24-08-2026). ── */ .voordeur-pagina .lp-film { display: none; } /* Het slot van de film (06-09-2026): staat in de kolom onder het toneel, dus als grid-kind een eigen volle rij — zie de valkuil bij .lp-terug. */ .lp-einde { grid-column: 1 / -1; width: 100%; max-width: 560px; margin: 18px auto 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .lp-einde h2 { margin: 0; } .lp-einde .note { margin: 0; } /* De vloer van de voordeur: één actie, drie stille links. */ .lp-voet { max-width: 1060px; margin: 34px auto 0; padding: 20px 16px 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 12px; } .lp-voetlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 13px; } .lp-voetlinks a { color: var(--muted); text-decoration: none; } .lp-voetlinks a:hover { color: var(--ink); } .lp-bedrijf { margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align: center; } /* Op /hoe eindigt de film al op een knop, en de filmlink wijst naar de pagina waar je staat. */ .hoe-pagina .lp-voetstart, .hoe-pagina .lp-voet-hoe { display: none; } /* Een uitnodiging is geen keuzemenu: de tegels zouden je naar /voor/ sturen en de code staat alleen in het adres (joinMatch, js/session.js) — één klik en de uitnodiging is weg. */ .join-pagina .lp-prof, .join-pagina .lp-vn { display: none; } /* De uitnodiging en de wachtende deling: twee blokken boven de keuze. */ .lp-join, .lp-gedeeld { max-width: 620px; margin: 0 auto 18px; padding: 16px 18px; border: 1.5px solid var(--accent); border-radius: 14px; background: var(--card); text-align: center; } .lp-join h2, .lp-gedeeld .lp-gedeeld-kop { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; } .lp-join .note, .lp-gedeeld .lp-gedeeld-wat { margin: 0 0 12px; } .lp-gedeeld-wat { font-size: .9rem; color: var(--muted); word-break: break-word; } /* Het opstarten mislukte: zeggen wat er is, en twee uitwegen. Zelfde vorm als .lp-join hierboven, maar in de waarschuwkleur. */ .lp-bootfout { max-width: 620px; margin: 0 auto 18px; padding: 16px 18px; border: 1.5px solid var(--danger); border-radius: 14px; background: var(--card); text-align: center; } .lp-bootfout b { display: block; margin-bottom: 6px; } .lp-bootfout .note { margin: 0 0 12px; word-break: break-word; } .lp-bootfout .frow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } /* Al ingelogd op de film- of advertentiepagina: één deur naar je eigen bord in plaats van twee deuren naar een account dat je al hebt. */ #lpNaarBord { display: none; text-decoration: none; } .lp-ingelogd #lpNaarBord { display: inline-block; } /* ⚠️ Behalve op de voordeur zelf. Daar betekent "naar mijn bord" niets — je bént er — en tot 10-09-2026 was het juist dáár de enige knop die je zag als het opstarten mislukte: klikken laadde dezelfde mislukking opnieuw. */ .voordeur-pagina #lpNaarBord { display: none; } /* Sinds 07-09-2026 óók het filmslot en de startknoppen op de prijzenpagina: die maken een gastbord, en wie al binnen is heeft er al een. */ .lp-ingelogd #lpStart, .lp-ingelogd #lpLogin, .lp-ingelogd .lp-voetstart, .lp-ingelogd #lpEindeGo, .lp-ingelogd .lp-prijs [data-gast] { display: none; } .hoe-pagina .lp-prof, .hoe-pagina .lp-vn, .hoe-pagina #lpHoe { display: none; } /* ⚠️ De teruglink is een gríd-kind van .lp-film (15fr 85fr). Zonder eigen rij schuift hij alle kinderen één cel op: de hoofdstukken belandden in de brede kolom en het toneel in de smalle — de film speelde op 15% van het scherm (Sven, 03-09-2026). De link krijgt dus zijn eigen volle rij. */ .lp-terug { display: block; grid-column: 1 / -1; margin: 0 0 10px; color: var(--accent-text); } .voordeur-pagina .lp-terug { display: none; } /* ── De prijzenpagina (07-09-2026) ── */ .lp-prijs { display: none; max-width: 1060px; margin: 8px auto 0; padding: 0 16px; } .prijs-pagina .lp-prijs { display: block; } .prijs-pagina .lp-prof, .prijs-pagina .lp-vn, .prijs-pagina .lp-film, .prijs-pagina .lp-prijslink, .prijs-pagina .lp-voet-prijs { display: none; } /* De kaarten hebben elk hun eigen startknop; de kop- en voetknop met het sterretje verwijzen naar een prijsnoot die hier niet staat. */ .prijs-pagina #lpStart, .prijs-pagina .lp-voetstart { display: none; } .lp-prijsraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; } @media (max-width: 900px) { .lp-prijsraster { grid-template-columns: 1fr; } } .lp-prijskaart { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); } .lp-prijskaart h3 { margin: 0; font-size: 1.05rem; } .lp-prijsbedrag { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; } .lp-prijskaart ul { margin: 0; padding-inline-start: 18px; font-size: .9rem; line-height: 1.55; flex: 1; } .lp-prijskaart li { margin: 3px 0; } .lp-prijskaart .lp-start, .lp-prijskaart .lp-hoe { align-self: flex-start; } .lp-prijs-ai { margin: 4px 0 0; } /* Bedrijven (11-10-2026): de vierde kaart over de volle breedte, punten in twee kolommen zolang er plek is. */ .lp-prijsbedrijf { margin-top: 14px; scroll-margin-top: 16px; } .lp-prijsbedrijf ul { columns: 2; column-gap: 28px; } .lp-prijsbedrijf li { break-inside: avoid; } @media (max-width: 900px) { .lp-prijsbedrijf ul { columns: 1; } } .lp-bedrijfnoot { margin-top: 4px; } .lp-prijsnoot { text-align: center; margin: 14px auto 0; max-width: 760px; font-size: 12.5px; } /* De gastnoot onder de kopregel: niet voor wie al binnen is, en niet op een uitnodigingspagina (daar blijft de knop de inlogdeur). */ .lp-gastnoot { margin: 0; font-size: 12.5px; } .join-pagina .lp-gastnoot, .lp-ingelogd .lp-gastnoot { display: none; } /* De spiegelchip op een kaart die ook op een ander bord staat. */ .spiegelchip { gap: 4px; } .spiegelchip .mini { padding: 0 4px; line-height: 1; } /* ── Instellingen als accordeon (23-08-2026) ── */ details.setstep > summary.stephead { cursor: pointer; list-style: none; margin-bottom: 0; } details.setstep > summary.stephead::-webkit-details-marker { display: none; } details.setstep > summary.stephead::after { content: '▸'; margin-inline-start: auto; color: var(--muted); transition: transform .15s ease; } details.setstep[open] > summary.stephead { margin-bottom: 8px; } details.setstep[open] > summary.stephead::after { transform: rotate(90deg); } details.setstep > summary.stephead:hover b { color: var(--accent-text, var(--accent)); } /* Het wijzigingsvoorstel van de AI op een kaart. */ .patchbox { border: 1.5px solid var(--accent); border-radius: 12px; padding: 10px 12px; margin: 8px 0; background: var(--accent-50); } .patchkop { margin-bottom: 6px; } .patchrij { display: flex; gap: 10px; padding: 2px 0; align-items: baseline; } .patchrij .patchnieuw { white-space: pre-wrap; flex: 1; font-size: .9rem; } .capplan .capplan-regels { white-space: pre-wrap; margin: 4px 0 6px; } /* De urenknop op een bedrijfskopje in het projectmenu (23-08-2026). */ .optkop .guren { margin-inline-start: 6px; padding: 0 6px; border-radius: 6px; opacity: .65; } .optkop .guren:hover, .optkop .guren:focus-visible { opacity: 1; background: var(--fill); outline: none; } /* ── Borden en bedrijven: twee helften, tarieven onder het vinkje ── */ .projtabs { margin: 0 0 10px; } .projhelp { margin-bottom: 10px; } .ptarieven { margin: 6px 0 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--fill); } .ptarieven .trate { align-items: center; gap: 8px; } .ptarieven .ttsRate { flex: 0 0 92px; text-align: end; } .ptarieven .ttsRate.bewaard { border-color: var(--ok); } .ptarieven .tavatar { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; } .gtijd { margin: 2px 0 0 2px; } /* ── Vrij bedrag bijkopen en de organisatie (07-09-2026) ── */ .bedrag { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 6px; flex-basis: 100%; } .bedrag .bedragSnel { display: flex; flex-direction: column; align-items: center; gap: 2px; } .bedrag .bedragSnel .note { font-size: .7rem; } .bedrag .bedragVeld { width: 110px; flex: 0 0 auto; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: .85rem; } .bedrag .bedragVeld.err { border-color: var(--danger); display: block; } .bedrag .bedragSchat { flex-basis: 100%; font-size: .78rem; color: var(--muted); } input.bewaard { border-color: var(--ok); } .oLeden td, .oLeden th { vertical-align: middle; } .oLeden input[type=number] { width: 84px; border: 1.5px solid var(--line); border-radius: 8px; padding: 5px 8px; } .oLeden .tavatar { width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; margin-inline-end: 6px; } .obord { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; margin: 3px 4px 3px 0; font-size: .82rem; } .obord .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } #oLinkBox code { word-break: break-all; } /* ── Ruimte in Borden en bedrijven (23-08-2026) ── De blokken stonden strak op elkaar en tegen de rand; met een lange lijst eronder leest dat als één massa in plaats van losse kaarten. */ #projDlg .dlg { padding: 22px 20px 72px; gap: 14px; } .projtabs { margin: 2px 0 4px; } .pmodus, .gmodus { align-self: flex-start; margin: 2px 0 6px; } #pNieuwBlok, #gNieuw { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--fill); } #pNieuwBlok .row, #gNieuw .row { gap: 10px; } #pNieuwBlok .swatches { margin-top: 2px; } #projDlg .proj-list { display: flex; flex-direction: column; gap: 12px; } #projDlg .proj-row { padding: 14px 16px; } #projDlg .grow { margin-bottom: 4px; } #projDlg .gtijd { margin: 0 0 14px 2px; } /* ── De aanmaakknop in Borden en bedrijven (23-08-2026) ── De ＋-knop stond als grijze pilhelft naast "beheren" en las als een filterstand. Het is een handeling: oranje, met de tekst in het accent en een echte hover. De beheer-kant blijft rustig, want dat is waar je meestal al bent. */ .pmodus, .gmodus { background: transparent; border: 0; padding: 0; gap: 8px; } .pmodus button, .gmodus button { padding: 8px 14px; font-size: .86rem; font-weight: 600; border: 1.5px solid var(--line); background: var(--card); border-radius: var(--r-pill); transition: background .15s ease, border-color .15s ease; } .pmodus button[data-pmode="new"], .gmodus button[data-gmode="new"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .pmodus button[data-pmode="new"]:hover, .gmodus button[data-gmode="new"]:hover { background: var(--accent-600); border-color: var(--accent-600); } /* Aangedrukt: de gekozen kant krijgt de nadruk, de andere zakt terug. */ .pmodus button[aria-pressed="true"], .gmodus button[aria-pressed="true"] { background: var(--panel-2); color: var(--ink); box-shadow: none; } .pmodus button[data-pmode="new"][aria-pressed="true"], .gmodus button[data-gmode="new"][aria-pressed="true"] { background: var(--accent-600); border-color: var(--accent-600); color: var(--on-accent); } .pmodus button:focus-visible, .gmodus button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #pArchToon { align-self: flex-start; gap: 8px; } #pArchToon .tal { background: var(--panel-2); color: var(--muted); border-radius: var(--r-pill); padding: 1px 8px; font-size: .78rem; font-weight: 700; } /* De twee exportvormen: een knop met een regel uitleg eronder, zodat je niet hoeft te raden wat je krijgt. */ .xvorm { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .xvorm .hbtn { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; text-align: start; } .xvorm .hbtn .note { font-weight: 400; } /* Een vaste klus draagt een klein rondje: hij komt terug. */ .task.herhaalt .t::after { content: ' 🔁'; opacity: .55; font-size: .85em; } /* ── Weekoverzicht (24-08-2026) ── */ .revstappen { display: flex; gap: 6px; margin: 2px 0 10px; } .revstap { width: 24px; height: 24px; border-radius: 50%; background: var(--panel-2); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; } .revstap.nu { background: var(--accent); color: var(--on-accent); } .revstap.af { background: var(--ok); color: var(--on-accent); } .revlijst { display: flex; flex-direction: column; gap: 8px; max-height: 48vh; overflow-y: auto; } .revrij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; } .revrij.laat { border-color: var(--danger); } .revdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } .revtitel { background: none; border: 0; color: var(--ink); cursor: pointer; font: inherit; text-align: start; padding: 0; flex: 1 1 200px; } .revtitel:hover { color: var(--accent-text, var(--accent)); } .revbord { flex: 0 0 auto; } .revknoppen { display: flex; gap: 4px; flex: 0 0 auto; } .badge.laat { background: var(--danger); color: #fff; } .revleeg { text-align: center; padding: 24px 0; color: var(--muted); } .revklaar { text-align: center; padding: 18px 0; } .revgroot { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; } /* De verificatiecode in het knopvenster: groot genoeg om in één oogopslag over te nemen, met tabular-nums zodat de cijfers niet dansen. Een gebruikte code blijft staan maar dooft — je plakt wel eens mis. */ .codeGroot { font-size: 1.5rem; font-weight: 700; letter-spacing: .18em; font-variant-numeric: tabular-nums; } .codeRij.op .codeGroot { opacity: .45; text-decoration: line-through; } /* Het postvak: één kolom die het hele vlak mag gebruiken. */ #board.postvak { grid-template-columns: 1fr; } #board.postvak .col { max-width: 720px; margin-inline: auto; width: 100%; } .postvakrij .opt .gtal { margin-inline-start: 6px; opacity: .7; } /* ── De documentenbak: de mindmap ─────────────────────────────── */ /* Beeldvullend op desktop (Sven, 25-08): de mindmap is een werkvlak, geen popup. Op een telefoon vult een dialoog het scherm toch al. De maat komt sinds 16-09 van dialog.breed in de venstersectie (zie daar); hier blijft alleen over dat de mindmap de resthoogte van het brede venster vult. In venstermodus (zonder .breed) valt de mindmap terug op de algemene min-height van 340px van .dvlakwrap hieronder. */ #docsDlg.breed .dvlakwrap { flex: 1; min-height: 0; } .drij { display: flex; gap: 8px; margin-bottom: 8px; } .drij input[type="search"] { flex: 1; } .dchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .dchip { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 3px 10px; font-size: .78rem; cursor: pointer; } .dchip.on { border-color: var(--tagkleur, var(--accent)); box-shadow: inset 0 0 0 1px var(--tagkleur, var(--accent)); } .dchip span { opacity: .6; } /* Kolom, overal: het vlak boven, het voorbeeld eronder over de volle breedte — op een verticaal scherm is een smalle zijkolom onleesbaar. */ .dvlakwrap { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 340px; } .dvlak { position: relative; overflow: auto; flex: 1; border: 1px solid var(--line); border-radius: 10px; background: var(--card); } .dvlak svg { position: absolute; inset: 0; pointer-events: none; } .dvlak svg line { pointer-events: stroke; cursor: pointer; } .dvast { stroke: var(--accent); stroke-width: 2; } .dstip { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .6; } .dkaart { position: absolute; width: 210px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); cursor: grab; user-select: none; touch-action: none; font-size: .84rem; box-shadow: 0 1px 4px rgb(0 0 0 / .12); } .dkaart b { display: block; overflow-wrap: anywhere; } .dkaart.sel { border-color: var(--accent); } .dkaart.linkbron { outline: 2px dashed var(--accent); } .dkaart.dim { opacity: .25; } .dtags { display: flex; gap: 3px; margin-top: 5px; } .dtags i { width: 14px; height: 5px; border-radius: 3px; display: inline-block; } .dpaneel { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow: auto; max-height: 45dvh; background: var(--card); } .dkop { display: flex; justify-content: space-between; align-items: start; gap: 8px; } .dtagrij { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 6px 0; } .dtag { color: #fff; border-radius: 999px; padding: 2px 8px; font-size: .74rem; } .dtag button { background: none; border: none; color: #fff; cursor: pointer; padding: 0 0 0 2px; } .dtekst { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82rem; max-height: 34vh; overflow: auto; background: var(--bg); border-radius: 8px; padding: 8px; } .daiZin { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: .86rem; } .dstapel { position: absolute; width: 220px; padding: 14px 12px; cursor: pointer; border: 2px solid var(--tagkleur, var(--line)); border-radius: 12px; background: var(--bg); text-align: start; font-size: .9rem; box-shadow: 3px 3px 0 var(--line), 6px 6px 0 var(--card); } .dstapel span { display: block; color: var(--muted); font-size: .78rem; margin-top: 3px; } @media (max-width: 700px) { .dkaart { width: 160px; font-size: .78rem; } .dstapel { width: 170px; } } /* De inbox-doorloop: het voorstel onder de titel, knoppen rechts. */ .iarij { display: flex; flex-direction: column; gap: 4px; } .iakop { display: flex; align-items: center; gap: 8px; } .iavoorstel { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .84rem; padding-inline-start: 17px; flex-wrap: wrap; } .iavoorstel i { color: var(--muted); font-style: normal; } .iaknoppen { display: flex; gap: 4px; flex: 0 0 auto; } .iakies { display: flex; gap: 6px; padding-inline-start: 17px; } .aiInbox { margin: 0 0 8px; font-size: .8rem; width: 100%; } /* De wachttip in de inbox-doorloop: aanwezig maar kalm. */ .iatip { font-style: italic; opacity: .75; transition: opacity .4s; } /* ── De vertaalmodus ──────────────────────────────────────────── */ /* ⚠️ Sinds 10-09-2026 hoort het kruisje bij Shift: een gewone klik bedient de app, Shift plus klik opent de vertaling. De cursor zegt dat vooraf. */ body.vertmodus.vertshift * { cursor: crosshair; } #vertKnop { position: fixed; bottom: 14px; left: 14px; z-index: 300; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); font-size: 1.1rem; cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / .25); } #vertBalk { position: fixed; bottom: 14px; left: 62px; z-index: 300; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px solid var(--accent); border-radius: 999px; background: var(--card); font-size: .82rem; } #vertPaneel { position: fixed; bottom: 64px; left: 14px; z-index: 301; width: min(420px, calc(100vw - 28px)); padding: 12px; border: 1.5px solid var(--accent); border-radius: 12px; background: var(--card); box-shadow: 0 6px 24px rgb(0 0 0 / .3); display: flex; flex-direction: column; gap: 8px; } #vertPaneel .vertDicht { position: absolute; top: 6px; inset-inline-end: 6px; } #vertPaneel textarea { min-height: 70px; } .vertSleutel { font-size: .72rem; color: var(--muted); } .vertKandidaat { display: flex; flex-direction: column; align-items: start; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 6px 8px; cursor: pointer; text-align: start; } .vertKandidaat code { font-size: .7rem; color: var(--muted); } /* Wát het is en waar het staat, boven de tekst zelf: zonder die regel zijn drie kandidaten die alle drie "Kolommen" heten niet uit elkaar te houden (Sven, 10-09-2026). */ .vertKandidaat .vkwaar { font-size: .68rem; color: var(--accent-text); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; } .vertKandidaat .vknu { font-weight: 600; } .vertKandidaat:hover, .vertKandidaat:focus-visible { border-color: var(--accent); } /* Het element waar de kandidaat bij hoort, aangewezen zolang je erover zweeft. */ .vertwijs { outline: 2px solid var(--accent) !important; outline-offset: 2px; border-radius: 4px; } .admtable td { padding: 2px 8px 2px 0; font-size: .82rem; } /* Het menu onder het vertaalknopje. */ #vertMenu { position: fixed; bottom: 62px; left: 14px; z-index: 301; display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 6px 24px rgb(0 0 0 / .3); } #vertMenu button, #vertMenu a { border: none; background: none; color: inherit; text-align: start; padding: 8px 12px; border-radius: 8px; font-size: .86rem; cursor: pointer; text-decoration: none; } #vertMenu button:hover, #vertMenu a:hover { background: var(--bg); } .vertuitleg { white-space: pre-line; } /* De contact-chip op een kaart: een voorstel, dus met een randje uitnodiging. */ .contactchip { cursor: pointer; border: 1.5px dashed var(--accent); border-radius: 999px; padding: 2px 10px; } .contactchip:hover { background: var(--card); } /* De dicteerknop: in de hoek van zijn veld, en hij gloeit zolang hij luistert. */ .micveld { position: relative; } .micveld textarea { width: 100%; } .micknop { position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); font-size: 1rem; cursor: pointer; padding: 0; line-height: 1; } .micknop.aan { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); animation: micpuls 1.2s ease-in-out infinite; } @keyframes micpuls { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent); } } @media (prefers-reduced-motion: reduce) { .micknop.aan { animation: none; } } /* Het snelmenu bij vasthouden op de plus: drie duimrijen boven de actiebalk. */ #snelMenu { position: fixed; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 2px; z-index: 90; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: var(--shadow); } #snelMenu.hidden { display: none; } #snelMenu button { border: 0; background: none; text-align: left; font-size: 1.05rem; padding: 12px 14px; border-radius: 10px; cursor: pointer; color: inherit; } #snelMenu button:active { background: var(--bg); } /* Vasthouden mag geen tekstselectie of bel-uitklapper van het systeem geven. */ #newTaskBtn { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* De agent-estafette: de start-vanzelf-vlag als chip, de agentrijen in het bordbeheer, en de ketenbanners op de kaart. */ .chip-f.autorun { gap: 4px; cursor: pointer; font-size: .85rem; } .chip-f.autorun input { margin: 0; } /* Sterker geheugen (onderdeel B): de bewaar-chip, de verwijzingen-chip en het paneel met verwijzingen op de kaart, kaartlinks in tekst, en de briefcontrole in het bordvenster. */ .chip-f.bewaar.aan { border-color: var(--accent); } .chip-f.refchip { cursor: pointer; } #refPick .refrij { display: flex; gap: 8px; align-items: center; width: 100%; text-align: start; background: none; border: none; padding: 6px 4px; border-radius: 8px; cursor: pointer; } #refPick .refrij:hover { background: var(--fill); } a.kaartlink { font-family: var(--mono, monospace); font-size: .85em; } #eBriefRefs .warn { color: var(--danger); } .agentrij { border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin-top: 8px; } .agentrij .row { display: flex; gap: 6px; align-items: center; } .agentrij textarea { width: 100%; margin-top: 6px; } /* Rollen en modellen (27-09-2026): het rolicoon vóór de naam, het modelvak onder de instructie, en het formulier voor een nieuwe agent in dezelfde vorm. */ .agentrij .agRolIcoon { flex: 0 0 auto; font-size: 18px; } /* De keuzelijsten in een rij krijgen hun eigen breedte, niet 100%: anders drukken ze het naamveld weg tot een streepje. */ .agentrij .row select, .agentnieuw .row select { width: auto; flex: 0 1 auto; min-width: 0; } .agentrij .row .agNaam, .agentnieuw #eAgentNaam { flex: 1 1 120px; min-width: 90px; } .agentrij .row .mini { flex: 0 0 auto; width: auto; } .agentrij select.agModel { width: 100%; margin-top: 6px; } .agentnieuw { border: 1px dashed var(--line); border-radius: 10px; padding: 8px; } .agentnieuw .row { display: flex; gap: 6px; align-items: center; } .agentnieuw textarea { width: 100%; } /* Verdeel het werk: de uitkomst per kaart. */ .verdeellijst { max-height: 50vh; overflow: auto; margin-top: 8px; } .verdeelrij { border-top: 1px solid var(--line); padding: 8px 0; } .verdeelrij:first-child { border-top: 0; } .verdeelstappen { margin: 4px 0 0 18px; padding: 0; } .verdeelstappen li { margin: 2px 0; } .prop-banner.keten { border-color: var(--accent); } /* ── Verhuur ────────────────────────────────────────────────── Tot 13-09-2026 had het verhuurvenster géén eigen opmaak: groen (binnen), oranje (let op) en de tabellen verschenen als gewone tekst. Juist die twee kleuren zijn de hele boodschap van het maandoverzicht. */ .vh-ok { color: var(--ok); } .vh-let { color: var(--warn); } /* Een waarschuwing midden in een regel (06/07-10-2026: niet in orde, niet gemeld, botsing). */ .vh-oranje { color: var(--warn); font-weight: 600; } div.vh-let, p.vh-let { background: var(--warn-bg); border-radius: 8px; padding: 6px 10px; } /* Wat een herinnering deed: per persoon een regel, met de knop naar het nakijkvenster (29-09-2026). */ .vh-herinnerlijst { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; } /* Facturen en offertes (29-09-2026): het stuk naast de gegevens; op een smal scherm eronder. */ .vh-factuur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: start; } @media (max-width: 760px) { .vh-factuur { grid-template-columns: 1fr; } } .vh-fvoorbeeld { max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-ctrl, 9px); background: var(--fill); } .vh-fvoorbeeld img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); } .vh-fraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } .vh-fraster .vh-veld { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; text-align: left; } .vh-wegboekvenster .vh-veld { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: left; margin-top: 8px; } .vh-wegboekvenster textarea { width: 100%; } .vh-fraster .vh-veld > input, .vh-fraster .vh-veld > select { width: 100%; min-width: 0; } .vh-fraster .vh-fbreed { grid-column: 1 / -1; } @media (max-width: 480px) { .vh-fraster { grid-template-columns: 1fr; } } .vh-fupload label.btn { cursor: pointer; } li.vh-fpaneelrij { display: block; } li.vh-fpaneelrij[hidden] { display: none; } /* Het contract: lezen, velden, tekst aanpassen (29-09-2026). */ .vh-cweergave { margin: 6px 0 10px; } /* De schakelaar staat ook in het losse contractvenster, buiten #verhuurDlg. */ .vh-cweergave.vh-schakel { display: inline-flex; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; } .vh-cweergave.vh-schakel button { border: 0; border-radius: 0; background: transparent; padding: 6px 12px; } .vh-cweergave.vh-schakel button.on { background: var(--fill); font-weight: 650; box-shadow: inset 0 -2px 0 var(--accent); } /* Zwaarder dan .dlg .vh-kies (die centreert): labels links, velden over de hele breedte. */ .dlg .vh-kies.vh-cvrij, .dlg .vh-fraster .vh-kies.vh-veld { display: flex; flex-direction: column; align-items: stretch; text-align: left; } .dlg .vh-kies.vh-cvrij > *, .dlg .vh-fraster .vh-kies.vh-veld > * { align-self: stretch; text-align: left; } /* Een openstaand bedrag om aan te klikken (29-09-2026): wegboeken of een einde huur. Ook buiten #verhuurDlg (Volgende taken). */ /* Zwaarder dan dialog.vh-vraag button (het venster Volgende taken) en #verhuurDlg button (de huurderpagina). */ button.vh-openbedrag, dialog.vh-vraag button.vh-openbedrag, #verhuurDlg button.vh-openbedrag { border: 1.5px solid var(--danger); background: var(--danger-bg); color: var(--danger); border-radius: var(--r-pill); padding: 4px 12px; font-weight: 600; min-height: 0; } button.vh-openbedrag:hover, dialog.vh-vraag button.vh-openbedrag:hover, #verhuurDlg button.vh-openbedrag:hover { filter: brightness(0.96); } .vh-vvopen { flex-wrap: wrap; gap: 6px; } .dlg .row.vh-vvopen > *, .row.vh-vvopen > * { flex: 0 1 auto; } button.vh-tdopen, #verhuurDlg button.vh-tdopen { display: inline; padding: 0; margin: 0; min-height: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted var(--danger); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } button.vh-tdopen:hover, #verhuurDlg button.vh-tdopen:hover { color: var(--danger); } .vh-kmaanden { border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: 6px 10px; margin: 8px 0; text-align: left; } /* Zwaarder dan .dlg label (klein, hoofdletters): een maand kiezen leest als gewone tekst. */ .dlg label.vh-kmaand { display: block; text-align: left; padding: 3px 0; margin: 0; font-size: .92rem; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: 0; } dialog.vh-wegboekvenster .dlg .vh-kies.vh-veld, dialog.vh-eindevenster .dlg .vh-kies.vh-veld, dialog.vh-opzegverhuurder .dlg .vh-kies.vh-veld { display: flex; flex-direction: column; align-items: stretch; text-align: left; } /* Het opzegvenster van de verhuurder (30-09-2026): label boven het veld, de reden over de hele breedte. */ dialog.vh-opzegverhuurder .dlg label.vh-kies { white-space: normal; gap: 4px; } dialog.vh-opzegverhuurder .dlg .vh-veld > textarea { width: 100%; } /* Het einde-huurvenster buiten #verhuurDlg: labels onder elkaar en afbreken, ook op een telefoon. */ dialog.vh-eindevenster .dlg label.vh-kies { white-space: normal; text-align: left; } dialog.vh-eindevenster .vh-eind h4 { margin: 4px 0 8px; } dialog.vh-eindevenster .vh-eindgevolg p { margin: 4px 0; } /* De aanbetaling onder een offerte. */ .vh-faanbetaling { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 4px; } .dlg .vh-faanbetaling .vh-kies.vh-veld { display: flex; flex-direction: column; align-items: stretch; text-align: left; } .vh-abrij { align-items: flex-end; flex-wrap: wrap; gap: 6px; } /* Wat "Bijwerken" vond, boven de open bedragen in Volgende taken (29-09-2026). */ .vh-bijwerkuit { border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--fill); padding: 6px 10px; margin: 6px 0 10px; text-align: left; } .vh-bijwerkuit p { margin: 3px 0; } /* Een contractveld zonder eigen plek in de gegevens: "alleen in dit contract", met een knop terug (29-09-2026). */ .vh-cveigen { display: block; margin-top: 2px; font-size: .8rem; text-transform: none; letter-spacing: 0; font-weight: 400; } .vh-cveigen button, #verhuurDlg .vh-cveigen button, dialog .vh-cveigen button, dialog.vh-vraag .vh-cveigen button { border: 0; background: none; padding: 0; min-height: 0; margin: 0; color: var(--accent-text); text-decoration: underline; font: inherit; cursor: pointer; } .vh-cvraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; } @media (max-width: 640px) { .vh-cvraster { grid-template-columns: 1fr; } } .vh-cvrij { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; text-align: left; } .vh-cvrij > input, .vh-cvrij > textarea { width: 100%; min-width: 0; } .vh-cvrij.vh-cvleeg > span:first-child::after { content: " •"; color: var(--warn); } .vh-cvvast { color: var(--ink); overflow-wrap: anywhere; } .vh-cbewerker { max-height: 70vh; overflow: auto; } .vh-cbewerk { border: 1px dashed var(--line); border-radius: var(--r-ctrl, 9px); padding: 6px 8px; margin: 6px 0; white-space: normal; min-height: 1.6em; } .vh-cbewerk:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-style: solid; } .vh-cbewerk.vh-ckop { font-weight: 700; } .vh-cbewerk.vh-cfout { border: 2px solid var(--danger); } .vh-cph { display: inline-block; padding: 0 5px; margin: 0 1px; border-radius: 6px; background: var(--accent-50); color: var(--accent-text); font-weight: 600; user-select: all; cursor: default; } .vh-cph.leeg { background: var(--warn-bg); color: var(--warn); } .vh-clid { display: flex; gap: 8px; align-items: flex-start; } .vh-clid > .nr { min-width: 1.6em; padding-top: 8px; } .vh-clid > .vh-cbewerk { flex: 1 1 auto; min-width: 0; } .vh-ctabel { width: 100%; border-collapse: collapse; } .vh-ctabel td { vertical-align: top; padding: 0 4px; } .vh-ckopcel { font-weight: 700; } .vh-cvastblok { margin: 8px 0; font-style: italic; } .vh-herinnerlijst li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .88rem; } .vh-herinnerlijst .vh-klein, .vh-herinnerlijst a.vh-klein { padding: 3px 10px; font-size: .8rem; border-radius: var(--r-ctrl, 9px); } .vh-tab { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: .88rem; } .vh-tab td { border-top: 1px solid var(--line); padding: 6px 8px; vertical-align: top; } .vh-tab td.vh-let { background: var(--warn-bg); font-size: .82rem; } .vh-tab .rechts { text-align: right; white-space: nowrap; } .vh-pand { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: var(--card); } .vh-pandkop { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; } .vh-nieuw { margin: 12px 0; } .vh-nieuw > summary { cursor: pointer; font-weight: 600; } /* Tags in Te doen (30-09-2026): één klik filtert op soort werk. */ .vh-tdtags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; } #verhuurDlg .vh-tdtag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill, 999px); border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-weight: 600; font-size: .9rem; } #verhuurDlg .vh-tdtag.on { background: var(--accent-50); border-color: var(--accent); color: var(--accent-text); } #verhuurDlg .vh-tdtag:disabled { opacity: .45; cursor: default; } .vh-tdtel { font-weight: 700; color: var(--muted); } .vh-tdtag.on .vh-tdtel { color: var(--accent-text); } .vh-tdpil { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: var(--r-pill, 999px); background: var(--fill); color: var(--muted); font-size: .78rem; font-weight: 600; white-space: nowrap; } /* Nieuwe partij bovenaan Partners, met een vak om een factuur of offerte in te slepen (30-09-2026). */ .vh-nieuw#vhpNieuw { margin: 6px 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-card, 14px); background: var(--card); } .vh-pdrop { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 10px 0 6px; padding: 14px 16px; border: 2px dashed var(--line); border-radius: var(--r-card, 14px); background: var(--fill); } .vh-pdrop.vh-pdropaan { border-color: var(--accent); background: var(--accent-50); } .vh-pdrop.vh-pdropbezig { opacity: .7; cursor: progress; } .vh-pdrop .vh-pdroptekst { flex: 1 1 260px; min-width: 0; } .vh-pdrop label.btn { cursor: pointer; margin: 0; } .vh-pdrop select { width: auto; } .vh-pzelf { margin: 10px 0 4px; } .vh-puit .vh-puitvelden { min-width: 0; } .vh-puit .vh-mist { outline: 2px dashed var(--accent); outline-offset: 1px; background: var(--accent-50); } .vh-puit .vh-vinkjes.vh-mist { border-radius: var(--r-ctrl, 9px); padding: 4px; } /* Alleen studenten op de pandpagina (12-10-2026): een lange regel, dus mag afbreken. */ .dlg label.vh-kies.vh-alleenstud { white-space: normal; text-align: left; } .dlg label.vh-kies.vh-puithoud { display: flex; margin: 8px 0; font-size: .92rem; font-weight: 500; color: var(--ink); white-space: normal; text-align: left; } .vh-hist { border-top: 1px solid var(--line); padding: 8px 0; font-size: .88rem; } .vh-hist:first-child { border-top: 0; } .vh-hist details > summary { cursor: pointer; list-style: none; } /* Een vinkje met gewone tekst ernaast. De algemene label-stijl (klein, in hoofdletters) is voor veldkoppen, niet voor een keuze die je leest. */ .vh-kies, .dlg .vh-kies { display: inline-flex; gap: 6px; align-items: center; text-transform: none; letter-spacing: normal; font-size: inherit; font-weight: 400; color: inherit; margin: 0; } /* Het verhuurvenster over de volle breedte (Sven, 13-09-2026). Hier staan tabellen met huurder, huur, datums en meldingen naast elkaar; in de 560px van een gewoon venster liep elke rij over drie regels. Twaalf pixels rand, zodat je nog ziet dat het een venster boven het bord is. */ dialog#verhuurDlg.breed { width: calc(100vw - 24px); height: calc(100vh - 24px); margin: auto; border-radius: 14px; } /* In het brede verhuurvenster rekt een gewone rij (.row > * { flex: 1 }) elke knop en keuzelijst uit tot een balk van honderden pixels. Hier krijgen ze hun eigen breedte, en alleen tekstvelden mogen meegroeien. */ #verhuurDlg .row { flex-wrap: wrap; align-items: center; } #verhuurDlg .row > * { flex: 0 1 auto; } #verhuurDlg .row > input:not([type="checkbox"]):not([type="date"]):not([type="month"]) { flex: 1 1 12rem; max-width: 32rem; } /* Op een smal scherm staat een .row in een kolom: dan zou flex-basis 12rem de HOOGTE worden (gemeten 13-09: een zoekveld van 192 px hoog). */ @media (max-width: 640px) { #verhuurDlg .row > input:not([type="checkbox"]):not([type="date"]):not([type="month"]), #verhuurDlg .row > input[type="date"], #verhuurDlg .row > select { flex: 0 0 auto; max-width: none; } } #verhuurDlg .row > textarea { flex: 1 1 100%; } #verhuurDlg .row > select { min-width: 10rem; max-width: 24rem; } /* Meldingen: foto's als rij miniaturen, groot openen met een klik. */ #verhuurDlg .vh-fotos, dialog.vh-intakevenster .vh-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } #verhuurDlg .vh-fotos figure, dialog.vh-intakevenster .vh-fotos figure { margin: 0; } #verhuurDlg .vh-fotos img, dialog.vh-intakevenster .vh-fotos img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; background: var(--fill); } /* Foto's onder pand en kamer (05-10-2026): slepen kleurt het blok; knoppen klein onder de foto. */ #verhuurDlg [data-fotoblok].vh-sleep { outline: 2px dashed var(--accent); outline-offset: 4px; } #verhuurDlg [data-fotoblok] figcaption .link { padding: 0 4px; } #verhuurDlg .vh-fotorapport { margin: 10px 0; } /* Maak advertentie: NL en EN naast elkaar, op een smal scherm onder elkaar. */ dialog.vh-vraag.vh-advertentie { width: min(940px, calc(100vw - 24px)); max-width: none; } .vh-advertentie .dlg { width: auto; max-width: none; } .vh-advertentie .vh-veld { display: block; margin: 6px 0; } .vh-advertentie .vh-veld input, .vh-advertentie .vh-veld textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; } .vh-advertentie .vh-advtalen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } /* Kamernet-invulblad (12-10-2026): de velden van één stap naast elkaar, op de telefoon onder elkaar. */ .vh-advertentie .vh-kngrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 12px; margin: 8px 0; } .vh-advertentie .vh-kngrid .vh-veld select, .vh-advertentie .vh-kngrid .vh-veld input:not([type=checkbox]) { width: 100%; } .vh-advertentie .vh-knstap { margin: 8px 0; } .vh-advertentie .vh-knmeer { margin: 6px 0; } .vh-advertentie .vh-knmeer > span { display: block; } .vh-advertentie .vh-fotos { display: flex; flex-wrap: wrap; gap: 8px; } .vh-advertentie .vh-fotos img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; cursor: zoom-in; } #verhuurDlg .vh-fotorapport figure label { display: block; position: relative; } #verhuurDlg .vh-fotorapport figure input { position: absolute; top: 4px; left: 4px; } #verhuurDlg .vh-vinkjes { display: flex; flex-wrap: wrap; gap: 6px 16px; } /* Een keuze in het veldenoverzicht slaat meteen op; dit randje is het bewijs. */ #verhuurDlg .vh-bewaard { outline: 2px solid var(--ok); outline-offset: 1px; } #verhuurDlg .vh-veldnaam { font-weight: 600; width: 100%; min-width: 8rem; } /* Een formule is code: vaste breedte, en lang genoeg om hem te lezen zonder te scrollen. */ #verhuurDlg .vh-formule { width: 100%; min-width: 14rem; font-family: ui-monospace, Consolas, monospace; font-size: .85em; resize: vertical; } /* Antwoord per vraag: het vinkje, de opmerking van de huurder en zijn foto's horen bij elkaar te staan. Een niet-afgevinkt punt valt op met de waarschuwkleur. */ #verhuurDlg .vh-opvraag { border-left: 3px solid var(--line); padding: 2px 0 2px 10px; margin: 8px 0; } #verhuurDlg .vh-opvraag > p { margin: 2px 0; } #verhuurDlg .vh-opvraag-uit { border-left-color: var(--warn); } #verhuurDlg .vh-opvink { color: var(--accent-text); font-weight: 600; } #verhuurDlg .vh-opvraag-uit .vh-opvink { color: var(--warn); } #verhuurDlg .vh-oprest > summary { cursor: pointer; color: var(--muted); font-size: .85rem; margin: 6px 0; } /* Het contract: het voorbeeld leest als een document, het tekenvlak blijft wit (inkt is zwart). */ #verhuurDlg .vh-contract { max-height: 60vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; background: var(--card); font-size: .9rem; line-height: 1.55; } #verhuurDlg .vh-contract h1 { font-size: 1.15rem; text-align: center; margin: 8px 0 2px; } #verhuurDlg .vh-contract h1.nieuw-deel { border-top: 3px solid var(--line); padding-top: 18px; margin-top: 28px; } #verhuurDlg .vh-contract .ondertitel { text-align: center; } #verhuurDlg .vh-contract h2 { font-size: 1rem; margin: 16px 0 4px; } #verhuurDlg .vh-contract h3 { font-size: .92rem; margin: 12px 0 4px; } #verhuurDlg .vh-contract p { margin: 0 0 8px; } #verhuurDlg .vh-contract .lid { padding-left: 1.8em; text-indent: -1.8em; } #verhuurDlg .vh-contract .nr { display: inline-block; min-width: 1.5em; text-indent: 0; } #verhuurDlg .vh-contract .opsomming { white-space: pre-line; margin-left: 1.5em; } #verhuurDlg .vh-contract .regel { display: flex; justify-content: space-between; gap: 12px; } #verhuurDlg .vh-contract .regel.totaal { border-top: 1.5px solid var(--ink); padding-top: 4px; font-weight: 700; } #verhuurDlg .vh-contract .pagina-einde { border-top: 1px dashed var(--line); margin: 16px 0; } #verhuurDlg .vh-contract .bijlagebeelden img, .vh-contractlees .bijlagebeelden img { display: block; max-width: 100%; height: auto; margin: 8px 0; border: 1px solid var(--line); } #verhuurDlg .vh-contract table.ondertekening { width: 100%; border-collapse: collapse; margin: 12px 0; } #verhuurDlg .vh-contract table.ondertekening td { width: 50%; border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; } #verhuurDlg .vh-contract .rol { font-weight: 700; } #verhuurDlg .vh-contract .handtekening { min-height: 56px; border-bottom: 1px dotted var(--muted); margin-bottom: 6px; } #verhuurDlg .vh-contract .tekenvak img { max-height: 70px; background: #fff; border-radius: 4px; } #verhuurDlg .vh-contract mark.leeg { background: var(--warn-bg); color: var(--warn); border-radius: 4px; padding: 0 4px; } #verhuurDlg .vh-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 8px 14px; margin: 8px 0; } #verhuurDlg .vh-velden .vh-veld { flex-direction: column; align-items: stretch; } /* Het vinkje "alle kamers" onder een kamerveld (11-10-2026): klein, onder het veld, één cel in het raster. */ #verhuurDlg .vh-velden .vh-pbveld { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #verhuurDlg .vh-velden .vh-pandbreed { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--muted); white-space: nowrap; cursor: pointer; } #verhuurDlg .vh-velden .vh-pandbreed input { margin: 0; } #verhuurDlg .vh-velden .vh-pandbreed:has(input:checked) { color: var(--ink); } #verhuurDlg .vh-pandbreedlijst { margin: 4px 0 14px; } #verhuurDlg .vh-pandbreedlijst p.vh-pbregel { margin: 2px 0; } /* Het oranje ✓ staat rechtsonder: de knop "Naar de kamers verplaatsen" schuift er net naast. */ dialog.vh-naarkamer .vh-vraagknoppen { padding-right: 40px; } /* Betaald door iemand anders en Betaling gemeld (13-10-2026): de knoppen niet onder het oranje vinkje. */ dialog.vh-derdevenster { width: min(46rem, calc(100vw - 24px)); } dialog.vh-derdevenster .vh-vraagknoppen, dialog.vh-gemeldvenster .vh-vraagknoppen { padding-right: 40px; } /* Het oranje ✓ in een klein verhuurvenster (13-10-2026): "dialog.vh-vraag button" maakte het wit en vierkant. Het wachtvenster en "Afsluiten – al geregeld": de knoppen niet onder het vinkje. */ dialog.vh-vraag > button.dlg-done { background: var(--accent); border: none; color: #fff; border-radius: 50%; padding: 0; } dialog.vh-wachtvenster .vh-vraagknoppen, dialog.vh-afsluiten .vh-vraagknoppen { padding-right: 52px; flex-wrap: wrap; } dialog.vh-wachtvenster .vh-vraagknoppen button, dialog.vh-afsluiten .vh-vraagknoppen button { flex: 0 1 auto; white-space: nowrap; } dialog.vh-afsluiten .vh-velden { margin: 10px 0; line-height: 1.9; } dialog.vh-afsluiten input[data-afsluitanders] { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--card); color: var(--ink); } dialog.vh-derdevenster .vh-derderij { margin: 6px 0; } dialog.vh-gemeldvenster .vh-velden { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; } dialog.vh-gemeldvenster .vh-veld { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; } #verhuurDlg .vh-tekenaar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; color: var(--ink); } /* Wie tekent (04-10-2026): ook in het contractvenster vanaf het bord, dus niet alleen binnen #verhuurDlg. */ .vh-tekenaars { list-style: none; margin: 6px 0; padding: 0; } .vh-tekenaars .vh-tekenaar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; } .vh-tekenaars .vh-tekenaar label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } #verhuurDlg .vh-ondertekenaar select { min-width: 9rem; } #verhuurDlg .vh-fotos figure, dialog.vh-intakevenster .vh-fotos figure { cursor: zoom-in; max-width: 140px; } #verhuurDlg .vh-fotos figcaption, dialog.vh-intakevenster .vh-fotos figcaption { font-size: .75rem; overflow-wrap: anywhere; } #verhuurDlg .vh-pdftegel, dialog.vh-intakevenster .vh-pdftegel { width: 120px; height: 90px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--line); background: var(--fill); font-weight: 600; } #verhuurDlg .vh-afrekening { white-space: pre-wrap; font: inherit; background: var(--fill); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .vh-tekenwrap { position: relative; width: 100%; max-width: 520px; margin: 6px 0; } .vh-tekenvlak { display: block; width: 100%; height: 170px; background: #fff; border: 2px solid #9aa0b8; border-radius: 10px; touch-action: none; cursor: crosshair; box-shadow: inset 0 1px 3px rgba(0,0,0,.06); } .vh-tekenwrap .vh-tekenlijn { position: absolute; left: 16px; right: 16px; bottom: 38px; border-bottom: 1.5px dashed #c9cad8; pointer-events: none; } .vh-tekenwrap .vh-tekenhint { position: absolute; left: 0; right: 0; top: 42%; text-align: center; color: #8a8fa6; font-size: .95rem; pointer-events: none; } .vh-tekenwrap.vol .vh-tekenhint { display: none; } #verhuurDlg a.btn { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-ctrl, 8px); border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; } #verhuurDlg a.btn.primary { background: var(--accent, #EA580C); border-color: transparent; color: var(--on-accent, #140A02); } /* Een bestandskiezer als knop (uploaden, Nieuwe partij): zwaarder dan .dlg label, dat hem klein en in hoofdletters zette. */ #verhuurDlg label.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin: 0; border-radius: var(--r-ctrl, 8px); border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-size: .9rem; font-weight: 600; text-transform: none; letter-spacing: normal; cursor: pointer; } #verhuurDlg label.btn:hover { border-color: var(--muted); } /* Eén knoppentaal in het verhuurvenster (14-09-2026). Tot dan waren alle knoppen de kale browserknop: Boeken en Negeren zagen er hetzelfde uit. Met :where() zonder gewicht, zodat knoppen met een eigen stijl (maandcellen, het kruisje) die gewoon houden. */ :where(#verhuurDlg) :where(button) { border: 1.5px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--r-ctrl); padding: 4px 11px; font-size: .86rem; line-height: 1.3; transition: background .12s ease, border-color .12s ease; } :where(#verhuurDlg) :where(button):hover { background: var(--fill); } :where(#verhuurDlg) :where(button):disabled { opacity: .5; cursor: not-allowed; } :where(#verhuurDlg) :where(button.primary) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* Lettergrootte en gewicht met iets meer gewicht dan de algemene regel button { font: inherit }. */ :where(#verhuurDlg) button { font-size: .86rem; line-height: 1.3; } :where(#verhuurDlg) button.primary { font-weight: 650; } :where(#verhuurDlg) :where(button.primary):hover { background: var(--accent-600); border-color: var(--accent-600); } :where(#verhuurDlg) :where([data-pweg], [data-vnegeer], [data-tdnegeer], [data-rvnee], [data-rek-los], [data-pandweg], [data-oweg], [data-kvnee], [data-ilinkweg], [data-hvnegeer], [data-docweg], [data-cintrek], [data-bvweg], [data-ngmaak], [data-ngiban-knop], [data-kweg], [data-sj-weg], #vhpdVergeet, #vhdLos, [data-crlos], [data-iafwijs], [data-opzeg^="afwijzen"], [data-kregelweg], [data-tdregelweg], [data-crweg]) { border-color: transparent; background: transparent; color: var(--danger); } :where(#verhuurDlg) :where([data-pweg], [data-vnegeer], [data-tdnegeer], [data-rvnee], [data-rek-los], [data-pandweg], [data-oweg], [data-kvnee], [data-ilinkweg], [data-hvnegeer], [data-docweg], [data-cintrek], [data-bvweg], [data-ngmaak], [data-ngiban-knop], [data-kweg], [data-sj-weg], #vhpdVergeet, #vhdLos, [data-crlos], [data-iafwijs], [data-opzeg^="afwijzen"], [data-kregelweg], [data-tdregelweg], [data-crweg]):hover { background: var(--danger-bg); } #verhuurDlg #vhTabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin: 6px 0 10px; } #verhuurDlg #vhTabs button { border: 0; background: transparent; border-radius: 0; color: var(--muted); padding: 8px 10px 9px; } #verhuurDlg #vhTabs button:hover { color: var(--ink); } #verhuurDlg #vhTabs button.on { color: var(--ink); font-weight: 650; box-shadow: inset 0 -3px 0 var(--accent); } #verhuurDlg .tabs:not(#vhTabs) { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; } #verhuurDlg .tabs:not(#vhTabs) button.on { border-color: var(--ink); color: var(--ink); font-weight: 650; box-shadow: inset 0 -2px 0 var(--accent); } #verhuurDlg .vh-gelezen { font-size: .8rem; color: var(--ok); margin-left: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; } #verhuurDlg .vh-gelezen.err { color: var(--danger); font-weight: 600; } #verhuurDlg input.vh-fout { border-color: var(--danger); background: var(--danger-bg); } #verhuurDlg .vh-flits { animation: vhFlits 2s ease-out; } @keyframes vhFlits { 0%, 40% { background: var(--accent-50); } 100% { background: transparent; } } .vh-taakdoel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 10px; padding: 8px 12px; border-radius: var(--r-ctrl); background: var(--accent-50); font-size: .88rem; } .vh-taakdoel button { border: 1.5px solid var(--accent); background: var(--card); color: var(--ink); border-radius: var(--r-ctrl); padding: 3px 10px; font-weight: 600; } @media (prefers-reduced-motion: reduce) { #verhuurDlg .vh-flits { animation: none; } } /* Huurderpagina (uitrol 3, 14-09-2026): een naam is overal een link naar één pagina per huurder. */ #verhuurDlg a.vh-naamlink { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } #verhuurDlg a.vh-naamlink:hover { color: var(--accent-600); } #verhuurDlg a.vh-naamlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } #verhuurDlg .vh-kruimel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } #verhuurDlg .vh-hpkop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 24px; margin: 8px 0 4px; } #verhuurDlg .vh-hpkop h3 { margin: 0 0 2px; } #verhuurDlg .vh-kerncijfers { display: grid; grid-template-columns: repeat(4, minmax(7.5rem, auto)); gap: 4px 18px; margin: 0; } #verhuurDlg .vh-kerncijfers dt { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } #verhuurDlg .vh-kerncijfers dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { #verhuurDlg .vh-kerncijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #verhuurDlg .vh-pil { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--fill); color: var(--muted); vertical-align: 1px; } #verhuurDlg .vh-pil-lopend { background: var(--accent-50); color: var(--ink); } #verhuurDlg .vh-hpopen { margin: 4px 0; padding-inline-start: 1.2rem; display: grid; gap: 4px; } /* Vraagvenster (15-09-2026): controlevraag vóór definitief verwijderen. */ dialog.vh-vraag { width: min(34rem, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 14px; background: var(--card); color: var(--ink); } dialog.vh-vraag::backdrop { background: rgba(10, 10, 30, .45); } /* Elk klein verhuurvenster past in beeld (Sven 17-10-2026, het venster Intakelink viel bovenaan weg): vast in het venster, de inhoud scrolt, ✓ en ✕ blijven staan. Zoals het advertentievenster (13-10). De dialoog zelf houdt overflow zichtbaar, anders valt de schaduw van het ✓ weg. Staat vóór het oplevervenster, dat zijn eigen hoogte houdt. */ dialog.vh-vraag[open] { position: fixed; inset: 0; margin: auto; max-height: calc(100dvh - 24px); overflow: visible; } dialog.vh-vraag > .dlg { max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; } dialog.vh-klusvenster .vh-vraagknoppen, dialog.vh-pandvraag .vh-vraagknoppen, dialog.vh-ptvraag .vh-vraagknoppen, dialog.vh-ontkoppel .vh-vraagknoppen { padding-right: 52px; } dialog.vh-vraag h3 { margin: 0; } dialog.vh-vraag .vh-vraagtekst p { margin: 0 0 8px; } dialog.vh-vraag input[data-vraagnaam] { width: 100%; border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--card); color: var(--ink); } /* Het formuliervenster (vhFormVenster): label boven het veld, velden onder elkaar — naast elkaar brak "Telefoon" midden in het woord af (23-09-2026). */ /* Opbouw van de huur bij het accepteren van een intake (26-09-2026). */ .vh-opbouw { margin: 6px 0 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--fill); max-width: 46rem; } .vh-opbouw table { width: 100%; margin: 6px 0; font-size: .9rem; } .vh-opbouw td { padding: 2px 6px; } .vh-opbouw tr.vh-leeg td:first-child { opacity: .6; } .vh-iatotaal input[readonly] { font-weight: 700; background: var(--fill); border: 1.5px solid var(--line); border-radius: 8px; padding: 4px 8px; } /* Van links naar rechts lezen (Sven, 26-09-2026): een label naast zijn veld breekt nooit midden in een woord ("Ingangsd atum"); past het niet, dan schuift het veld naar de volgende regel. */ .vh-kies:not(.vh-veld) { white-space: nowrap; } .row:has(> .vh-kies) { flex-wrap: wrap; } .row > .vh-kies:not(.vh-veld) { flex: 0 1 auto; } .vh-kies > input:not([type=checkbox]):not([type=radio]), .vh-kies > select { min-width: 0; } .vh-opbouw .vh-opnaar { white-space: nowrap; } .vh-opbouw input[data-opregel] { width: 7.5em; text-align: right; } /* Smal scherm: per regel het label boven, het bedrag met waar het heen gaat eronder. */ @media (max-width: 640px) { .vh-opbouw table, .vh-opbouw tbody { display: block; } .vh-opbouw tr { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; padding: 6px 0; border-top: 1px solid var(--line); } .vh-opbouw td { border: 0; padding: 0; } .vh-opbouw td:first-child { grid-column: 1 / -1; } .vh-opbouw .vh-opnaar { white-space: normal; } } /* Het contractvenster (26-09-2026): de tekst in een scrollvak, versturen blijft eronder in beeld. */ dialog.vh-contractvenster { width: min(56rem, calc(100vw - 24px)); } dialog.vh-contractvenster .vh-contractlees .vh-contract { max-height: 55vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; background: var(--card); } /* Het intakerapport (26-09-2026): breed, foto's en pdf's in het venster zelf. */ dialog.vh-intakerapport { width: min(56rem, calc(100vw - 24px)); } .vh-intakerapport .vh-stuk { margin: 10px 0; } .vh-intakerapport .vh-stuk img { cursor: zoom-in; max-width: 100%; max-height: 70vh; border-radius: 8px; border: 1px solid var(--line); } /* De fotokijker (12-10-2026): schermvullend, de foto past altijd; zoomen en slepen doet het script (touch-action none). */ dialog.vh-beeldkijker { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #0B0C10; color: #fff; overflow: hidden; } dialog.vh-beeldkijker::backdrop { background: #0B0C10; } dialog.vh-beeldkijker[open] { display: flex; flex-direction: column; } .vh-beeldkijker .vh-bk-kop { position: relative; z-index: 2; background: #0B0C10; display: flex; align-items: center; gap: 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); font-size: .85rem; } .vh-beeldkijker .vh-bk-kop span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vh-beeldkijker .vh-bk-knop { color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 8px; padding: 6px 10px; text-decoration: none; font: inherit; cursor: pointer; } .vh-beeldkijker .vh-bk-vak { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; cursor: zoom-in; } .vh-beeldkijker .vh-bk-vak.zoom { cursor: grab; } .vh-beeldkijker .vh-bk-vak img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; user-select: none; -webkit-user-drag: none; } .vh-beeldkijker .dlg-done { bottom: max(12px, env(safe-area-inset-bottom)); } .vh-intakerapport .vh-stuk iframe { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; } /* Stapvensters (26-09-2026): label boven het veld, tekstvak op volle breedte. */ dialog.vh-kamernetvenster .vh-veld, dialog.vh-intakevenster .vh-veld { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; } dialog.vh-kamernetvenster textarea { width: 100%; box-sizing: border-box; } dialog.vh-intakevenster, dialog.vh-kamernetvenster { width: min(46rem, calc(100vw - 24px)); } /* Het briefvenster (29-09-2026, Sven: "alles volledig LTR te lezen, inclusief e-mailadressen"). Het label stond naast het veld geperst: het adres werd afgekapt en "Tekst" brak in tweeën. Nu het label erboven, het veld over de volle breedte en het kopieerknopje klein ernaast. */ dialog.vh-briefvenster { width: min(46rem, calc(100vw - 24px)); } /* Al verstuurd en einddatum (01-10-2026): label met datum en een knop op één rij, afbreken op een telefoon. */ dialog.vh-briefvenster .vh-brij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } dialog.vh-briefvenster .vh-brij > * { flex: 0 0 auto; } dialog.vh-briefvenster .vh-brij label.vh-kies { display: inline-flex; gap: 6px; align-items: center; margin: 0; } dialog.vh-briefvenster .vh-veld { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; margin-block: 6px; white-space: normal; } dialog.vh-briefvenster .vh-veld > .row { display: flex; flex-wrap: nowrap; gap: 6px; align-items: stretch; width: 100%; margin: 0; } dialog.vh-briefvenster .vh-veld > .row > input { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: var(--r-ctrl); padding: 8px 10px; background: var(--card); color: var(--ink); font: inherit; } dialog.vh-briefvenster .vh-veld > .row > button { flex: 0 0 auto; padding: 6px 12px; } dialog.vh-briefvenster textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: var(--r-ctrl); padding: 8px 10px; background: var(--card); color: var(--ink); font: inherit; line-height: 1.45; } /* Adres, onderwerp en tekst altijd van links naar rechts, ook als de app in een taal van rechts naar links staat: een e-mailadres leest nooit andersom. */ dialog.vh-briefvenster [data-bveld] { direction: ltr; text-align: left; unicode-bidi: plaintext; } dialog.vh-briefvenster a.btn { display: inline-block; border: 1.5px solid var(--line); border-radius: var(--r-ctrl); padding: 6px 14px; color: var(--ink); background: var(--card); font-weight: 600; text-decoration: none; } dialog.vh-briefvenster a.btn:hover { border-color: var(--muted); } dialog.vh-formvenster .vh-velden { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; } dialog.vh-formvenster .vh-veld { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; } /* Klus klaarzetten (17-10-2026): het vak waar je foto's plakt of in sleept, met de voorbeelden. */ dialog.vh-klusvenster .vh-klusfotos { border: 1.5px dashed var(--line); border-radius: var(--r-ctrl); padding: 8px; } dialog.vh-klusvenster .vh-klusfotos.vh-sleep { border-color: var(--accent); } dialog.vh-klusvenster .vh-klusfotos .row { flex-wrap: wrap; gap: 6px; } dialog.vh-klusvenster .vh-klusfoto { position: relative; display: inline-block; flex: 0 0 auto; width: 64px; } dialog.vh-klusvenster .vh-klusfoto img { border-radius: 6px; display: block; } dialog.vh-klusvenster .vh-klusfoto button { position: absolute; top: 2px; right: 2px; padding: 0 5px; line-height: 1.4; } dialog.vh-klusvenster label.btn, dialog.vh-klusvenster a.btn { display: inline-block; align-self: flex-start; border: 1.5px solid var(--line); border-radius: var(--r-ctrl); padding: 6px 14px; color: var(--ink); background: var(--card); font-weight: 600; text-decoration: none; cursor: pointer; } dialog.vh-klusvenster a.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } dialog.vh-vraag .vh-vraagknoppen { justify-content: flex-end; gap: 8px; } dialog.vh-vraag button { border: 1.5px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--r-ctrl); padding: 6px 14px; font: inherit; font-weight: 600; } dialog.vh-vraag button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } dialog.vh-vraag button.vh-gevaar { background: var(--danger); border-color: var(--danger); color: #fff; } dialog.vh-vraag button:disabled { opacity: .45; cursor: not-allowed; } /* De oplevering in een eigen venster (21-09-2026): breder dan een vraag, want er staan tabellen en foto's in, en zelf scrollend zodat de knoppen bereikbaar blijven bij een lange checklist. */ dialog.vh-opleververster { width: min(52rem, calc(100vw - 24px)); } dialog.vh-opleververster .dlg { max-height: min(80vh, 44rem); overflow-y: auto; } dialog.vh-opleververster table { width: 100%; } dialog.vh-opleververster .vh-fotos img { max-width: 100%; } #verhuurDlg .vh-woningkeuze { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } /* Pipedrive koppelen (15-09-2026). */ #verhuurDlg .vh-pdkoppel > summary { cursor: pointer; } #verhuurDlg .vh-pdkoppel h4 { margin: 10px 0 4px; } #verhuurDlg .vh-pdkoppel input[type=search] { flex: 1 1 14rem; max-width: 26rem; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--card); color: var(--ink); } /* Alles uit Pipedrive (15-09-2026): een sectie per soort, met een teller en een alles-aan-vinkje in de kop. De tabellen scrollen opzij in hun eigen vak: op een telefoon werd een rij van vijf kolommen anders één woord breed. */ #verhuurDlg .vh-scroll { overflow-x: auto; } #verhuurDlg .vh-scroll > table.vh-tab { min-width: 38rem; } #verhuurDlg .vh-pda > summary { cursor: pointer; } #verhuurDlg .vh-pda .vh-pda-alle { margin-inline-start: 10px; font-size: .86rem; } #verhuurDlg .vh-pda h4 { margin: 12px 0 4px; } #verhuurDlg .vh-pda code { font-size: .8rem; overflow-wrap: anywhere; } #verhuurDlg .vh-pda details > summary { cursor: pointer; } /* Eigen velden en de Pipedrive-geschiedenis op de pand-, kamer- en huurderpagina. */ #verhuurDlg .vh-eigen .row { margin-top: 4px; } /* Tekst met regeleinden staat in een tekstvak (review 15-09): even breed als een invoerveld ernaast, en zonder de 70px van .dlg textarea, zodat twee regels er niet uitzien als een half leeg vak. */ #verhuurDlg .vh-velden .vh-veld textarea { width: 100%; min-height: 0; line-height: 1.4; } #verhuurDlg :where(.vh-velden textarea[readonly]) { background: var(--fill); } #verhuurDlg textarea.vh-fout { border-color: var(--danger); background: var(--danger-bg); } #verhuurDlg [data-kbewerkrij] textarea { width: 14rem; max-width: 60vw; min-height: 0; line-height: 1.4; } #verhuurDlg .vh-pdgesch > div { margin-top: 6px; } /* Huurderpagina (15-09-2026): bericht en betaalverzoek vanaf de huurder. */ #verhuurDlg .vh-hpacties { gap: 8px; margin: 2px 0 4px; } #verhuurDlg .vh-hpacties button[aria-expanded="true"] { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); } #verhuurDlg .vh-hpactie textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--card); color: var(--ink); font: inherit; } #verhuurDlg .vh-hpactie h4 { margin-top: 0; } #verhuurDlg .vh-bvkaart { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; } #verhuurDlg .vh-bvkaart:first-of-type { border-top: 0; } #verhuurDlg .vh-bvbericht { white-space: pre-wrap; background: var(--fill); border-radius: 8px; padding: 8px 10px; font-size: .88rem; } #verhuurDlg a.btn.vh-uit { opacity: .45; pointer-events: auto; cursor: not-allowed; } #verhuurDlg .vh-achterknop { border: 1px solid var(--danger); background: var(--danger-bg); color: var(--danger); border-radius: 999px; padding: 1px 9px; font-size: .8rem; font-weight: 600; margin-top: 3px; } #verhuurDlg #vhfWis:disabled { opacity: .45; } #verhuurDlg .vh-signalen { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-inline-start: auto; } #verhuurDlg .vh-signaal { border: 1px solid var(--line); background: var(--fill); color: var(--ink); border-radius: 999px; padding: 1px 9px; font-size: .8rem; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; } #verhuurDlg .vh-signaal:hover { border-color: var(--muted); } #verhuurDlg .vh-signaal-let { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); } #verhuurDlg .vh-signaal-tekst { display: inline-block; font-size: .78rem; margin-inline-end: 10px; } #verhuurDlg .menu button.vh-menugevaar { color: var(--danger); } #verhuurDlg .menu button.vh-menugevaar:hover { background: var(--danger-bg); } /* Kamer hernoemen en verwijderen in de kamerlijst van het pand (12-10-2026). */ #verhuurDlg button.vh-kamerknopje { background: none; border: 1px solid transparent; padding: 1px 6px; font-size: .85rem; line-height: 1.4; opacity: .7; } #verhuurDlg button.vh-kamerknopje:hover, #verhuurDlg button.vh-kamerknopje:focus-visible { opacity: 1; border-color: var(--line); } #verhuurDlg button.vh-kamerweg:hover { background: var(--danger-bg); border-color: var(--danger); } #verhuurDlg td.vh-kamerwegcel { width: 1%; white-space: nowrap; text-align: end; } #verhuurDlg .vh-kamernaamvak { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; } #verhuurDlg .vh-kamernaamvak input { max-width: 6rem; } /* Het actiemenu op de huurderpagina en het einddatumvenster (21-09-2026). */ #verhuurDlg .vh-hpmenu .menu { min-width: 240px; } #verhuurDlg .vh-eind { border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; background: var(--card); } #verhuurDlg .vh-eind h4 { margin-top: 0; } #verhuurDlg .vh-eindgevolg { background: var(--fill); border-radius: var(--r-ctrl); padding: 9px 12px; margin: 10px 0; } #verhuurDlg .vh-eindgevolg p { margin: 4px 0; } #verhuurDlg .vh-eindgevolg.vh-eindnu { background: var(--warn-bg); color: var(--warn); } #verhuurDlg .vh-eindschade { border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: 9px 12px; margin: 10px 0; } #verhuurDlg .vh-eindschade label { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; } /* De volgorde van eigen velden slepen (21-09-2026). In de sleepstand pakt het hele veld als greep; de invoer staat dan op readonly, anders zet een sleep de cursor in het tekstvak in plaats van het veld te verplaatsen. */ #verhuurDlg .vh-sleepknop.on { border-color: var(--accent); color: var(--accent-text); } #verhuurDlg .vh-velden.vh-sleepstand .vh-veld { cursor: grab; border: 1px dashed var(--line); border-radius: var(--r-ctrl); padding: 6px 8px; } #verhuurDlg .vh-velden.vh-sleepstand .vh-veld:hover { border-color: var(--accent); } #verhuurDlg .vh-velden.vh-sleepstand .vh-veld.vh-sleept { opacity: .5; cursor: grabbing; } /* E-mail, telefoon en rekenvelden kregen de dialoogstijl niet (die kent alleen text, password en date). :where houdt .vh-fout sterker. */ #verhuurDlg :where(.vh-velden input:not([type]), .vh-velden input[type=email], .vh-velden input[type=tel]) { width: 100%; border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--card); color: var(--ink); } #verhuurDlg :where(.vh-velden input[readonly]) { background: var(--fill); } /* Pandpagina (uitrol 4): per kamer een rij met twaalf maanden plus de eerstvolgende. */ #verhuurDlg .vh-raster-wrap { overflow-x: auto; margin: 6px 0 10px; } #verhuurDlg table.vh-raster { border-collapse: collapse; min-width: 100%; font-variant-numeric: tabular-nums; overflow-wrap: normal; } /* Het raster scrollt toch opzij; knijpen levert alleen namen op als "Alejandr / a". */ #verhuurDlg table.vh-raster tbody td:nth-child(2) { min-width: 12rem; } #verhuurDlg table.vh-raster th, #verhuurDlg table.vh-raster td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; } #verhuurDlg table.vh-raster thead th { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } #verhuurDlg table.vh-raster th[scope="row"] { white-space: nowrap; font-weight: 400; } #verhuurDlg table.vh-raster .rechts { text-align: end; white-space: nowrap; } #verhuurDlg table.vh-raster .vh-rc { padding: 4px 2px; text-align: center; } #verhuurDlg table.vh-raster tr.vh-eerder td { opacity: .72; } #verhuurDlg .vh-rcel { display: inline-block; width: 22px; height: 22px; padding: 0; border-radius: 5px; border: 1.5px solid var(--line); background: transparent; cursor: pointer; vertical-align: middle; } #verhuurDlg .vh-rcel.leeg { border-color: transparent; cursor: default; } #verhuurDlg .vh-rcel:hover:not(.leeg) { transform: scale(1.12); } #verhuurDlg .vh-rcel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } #verhuurDlg .vh-rcel.st-betaald { background: #16a34a; border-color: #16a34a; } #verhuurDlg .vh-rcel.st-later { background: #0d9488; border-color: #0d9488; } #verhuurDlg .vh-rcel.st-deels { background: color-mix(in srgb, #d97706 55%, transparent); border-color: #d97706; } #verhuurDlg .vh-rcel.st-open { background: #dc2626; border-color: #dc2626; } #verhuurDlg .vh-rcel.st-extra { border-color: #7c3aed; } #verhuurDlg .vh-rcel.st-komt, #verhuurDlg .vh-rcel.st-onbekend, #verhuurDlg .vh-rcel.st-voorEerste { border-style: dashed; } #verhuurDlg .vh-rcel.st-teOud { border-style: dashed; opacity: .55; } #verhuurDlg .vh-rcel.st-afgehandeld { border-style: dashed; background: var(--line); } #verhuurDlg .vh-mnd-bol.st-komt, #verhuurDlg .vh-mnd-bol.st-voorEerste, #verhuurDlg .vh-mnd-bol.st-teOud { border-style: dashed; } #verhuurDlg .vh-mnd-bol.st-extra { border-color: #7c3aed; } @media (prefers-reduced-motion: reduce) { #verhuurDlg .vh-rcel:hover:not(.leeg) { transform: none; } } /* Verborgen blijft verborgen, ook voor .row met display:flex (13-09-2026). */ #verhuurDlg [hidden] { display: none !important; } #verhuurDlg .vh-hints { margin: 4px 0 8px; padding-left: 1.2rem; } #verhuurDlg .vh-iban { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Huurhistorie: per jaar een regel met twaalf maanden (13-09-2026). */ #verhuurDlg .vh-jaren { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } #verhuurDlg .vh-jaarkop { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; } #verhuurDlg .vh-maanden { display: grid; grid-template-columns: repeat(12, minmax(78px, 1fr)); gap: 4px; overflow-x: auto; padding-bottom: 2px; } #verhuurDlg .vh-mnd { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 6px; border-radius: 8px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: .8rem; text-align: left; min-height: 58px; cursor: pointer; font-variant-numeric: tabular-nums; } #verhuurDlg .vh-mnd.leeg { cursor: default; opacity: .45; border-style: dashed; } #verhuurDlg .vh-mnd b { font-size: .86rem; white-space: nowrap; } #verhuurDlg .vh-mnd-naam { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .75; } #verhuurDlg .vh-mnd-sub { font-size: .7rem; opacity: .8; line-height: 1.2; } #verhuurDlg .vh-mnd.st-betaald { border-color: #16a34a; background: color-mix(in srgb, #16a34a 12%, transparent); } #verhuurDlg .vh-mnd.st-later { border-color: #0d9488; background: color-mix(in srgb, #0d9488 12%, transparent); } #verhuurDlg .vh-mnd.st-deels { border-color: #d97706; background: color-mix(in srgb, #d97706 14%, transparent); } #verhuurDlg .vh-mnd.st-open { border-color: #dc2626; background: color-mix(in srgb, #dc2626 13%, transparent); } #verhuurDlg .vh-mnd.st-onbekend, #verhuurDlg .vh-mnd.st-komt { border-style: dashed; } #verhuurDlg .vh-mnd.st-extra { border-color: #7c3aed; } #verhuurDlg .vh-histlegenda { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 4px 0 10px; } #verhuurDlg .vh-mnd-bol { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--line); margin-right: 4px; vertical-align: -1px; } #verhuurDlg .vh-mnd-bol.st-betaald { background: #16a34a; border-color: #16a34a; } #verhuurDlg .vh-mnd-bol.st-later { background: #0d9488; border-color: #0d9488; } #verhuurDlg .vh-mnd-bol.st-deels { background: #d97706; border-color: #d97706; } #verhuurDlg .vh-mnd-bol.st-open { background: #dc2626; border-color: #dc2626; } #verhuurDlg .vh-mnd-bol.st-onbekend { border-style: dashed; } #verhuurDlg .vh-mnd.st-voorEerste { border-style: dashed; opacity: .7; } #verhuurDlg .vh-mnd.st-teOud { border-style: dashed; opacity: .6; } #verhuurDlg .vh-mnd.st-afgehandeld { border-style: dashed; opacity: .75; } #verhuurDlg .vh-mnd-bol.st-afgehandeld { border-style: dashed; background: var(--line); } /* Borg terugbetalen (15-09-2026): hetzelfde paneel in het kaartvenster en in Oud-huurders. In het kaartvenster geldt de knoppentaal van het verhuurvenster niet, daarom hier een eigen, zonder gewicht (:where), zodat .vh-fout en de gewone verhuurregels sterker blijven. */ .vh-borgterug { margin: 0 0 6px; } :where(.vh-borgterug, .vh-bt) :where(button) { border: 1.5px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--r-ctrl); padding: 4px 11px; font-size: .86rem; line-height: 1.3; } :where(.vh-borgterug, .vh-bt) :where(button):hover { background: var(--fill); } :where(.vh-borgterug, .vh-bt) :where(button):disabled { opacity: .5; cursor: not-allowed; } :where(.vh-borgterug, .vh-bt) :where(button.primary) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 650; } :where(.vh-borgterug, .vh-bt) :where(button.primary):hover { background: var(--accent-600); border-color: var(--accent-600); } .vh-borgterug > .vh-bt-open { font-weight: 600; } .vh-borgterug > .vh-bt-open[aria-expanded="true"] { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); } .vh-bt { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: .88rem; text-align: start; white-space: normal; } .vh-bt p { margin: 0; } .vh-bt h4.vh-bt-sub { margin: 4px 0 0; font-size: .82rem; } .vh-bt-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 12px; } .vh-bt-kopknoppen, .vh-bt-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .vh-bt-ander { border-top: 1px dashed var(--line); padding-top: 8px; } .vh-bt-cijfers { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 4px 14px; margin: 0; } .vh-bt-cijfers dt { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .vh-bt-cijfers dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; } .vh-bt-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 8px 14px; } /* Een veld met zijn kop erboven. De algemene .dlg label (klein, hoofdletters) geldt alleen voor de kop zelf. */ .vh-bt-veld, .dlg .vh-bt-veld { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; font-size: inherit; font-weight: 400; color: inherit; text-transform: none; letter-spacing: normal; } .vh-bt-veld > .vh-bt-titel { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .vh-bt-veld :where(input:not([type="checkbox"]), select) { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--card); color: var(--ink); font: inherit; } .vh-bt-veld input[data-btiban] { margin-top: 4px; font-variant-numeric: tabular-nums; } .vh-bt-bedrag { display: flex; align-items: center; gap: 6px; } .vh-bt-bedrag input { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; } .vh-bt .vh-gelezen { font-size: .8rem; color: var(--ok); white-space: nowrap; font-variant-numeric: tabular-nums; } .vh-bt .vh-gelezen.err { color: var(--danger); font-weight: 600; } .vh-bt input.vh-fout { border-color: var(--danger); background: var(--danger-bg); } .vh-bt [hidden] { display: none !important; } .vh-bt-w-lijst { display: flex; flex-direction: column; gap: 6px; } .vh-bt-w-lijst:empty { display: none; } .vh-bt .vh-bt-w { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; } .vh-bt .vh-bt-w .vh-kies { white-space: nowrap; font-weight: 600; } .vh-bt-melding { border-radius: 8px; } .vh-bt-zoeklijst { list-style: none; margin: 0; padding: 0; } .vh-bt-zoeklijst > li { border-top: 1px solid var(--line); padding: 6px 0; } .vh-bt-zoeklijst > li:first-child { border-top: 0; } .vh-bt-keuzes { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 4px; } .vh-bt-keuzes button { text-align: start; } .vh-bt .vh-pil { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--fill); color: var(--muted); } /* Oud-huurders: de borgstand als pil; alleen "nog terug" vraagt aandacht. */ #verhuurDlg .vh-pil-borg-open { background: var(--warn-bg); color: var(--warn); } #verhuurDlg .vh-pil-borg-klaargezet { background: var(--accent-50); color: var(--ink); } #verhuurDlg .vh-pil-borg-terugbetaald { background: var(--ok-bg); color: var(--ok); } #verhuurDlg [data-ohpil] + [data-ohpil], #verhuurDlg [data-ohpil] + .note + [data-ohpil] { margin-top: 4px; } /* De algemene regel button { font: inherit } zette de lettergrootte terug; deze staat erna. */ :where(.vh-borgterug, .vh-bt) button { font-size: .86rem; line-height: 1.3; } /* Wachten op goedkeuring in bunq, in het borgpaneel. */ .vh-bt-wacht { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px dashed var(--accent, #2f6fed); border-radius: 10px; background: color-mix(in srgb, var(--accent, #2f6fed) 8%, transparent); } .vh-bt-wacht p { margin: 0; } /* ── Eigen kolommen per bord (23-09-2026, js/kolommen.js) ────────── Het raster komt uit JS (kolomRaster): een gewone kolom is var(--kolw), een ingeklapte een smalle strook. --kolw wisselt op een telefoon naar één kolom per scherm, net als de vijf GTD-kolommen. */ @media (max-width: 900px) { .kolomerbij { scroll-snap-align: center; } } .col.eigen { border-top: 4px solid var(--kolkleur, transparent); } .col.eigen h2 { align-items: center; gap: 6px; } .col.eigen h2[draggable="true"] { cursor: grab; } .col.eigen h2 .kolnaam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .col.eigen h2 .kolrechts { display: inline-flex; align-items: center; gap: 4px; flex: none; } .col.eigen .kolkebab { border: none; background: none; color: var(--muted); border-radius: 6px; padding: 0 6px; font-size: 1rem; line-height: 1.4; } .col.eigen .kolkebab:hover, .col.eigen .kolkebab[aria-expanded="true"] { background: var(--panel-2); color: var(--ink); } .col.eigen h2 .menu { text-transform: none; letter-spacing: 0; font-size: .86rem; font-weight: 400; color: var(--ink); } /* Menu-items zoals elk ander menu in de app (.menu button: 500), niet vet van de kop of de kaart. */ .col.eigen h2 .menu button, .task .kaartmenuwrap .menu button { font-weight: 500; } /* Hernoemen op de kop zelf. */ .col.eigen h2 .kolnaaminput { flex: 1; min-width: 0; font: inherit; text-transform: none; letter-spacing: 0; padding: 2px 6px; border: 1.5px solid var(--accent); border-radius: 6px; background: var(--card); color: var(--ink); } /* Een pandkolom: de naam opent het huis, eronder de huursom. */ .col.eigen h2 .kolpandnaam { border: none; background: none; padding: 0; font: inherit; color: var(--ink); text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-align: start; } .col.eigen h2 .kolpandnaam:hover { color: var(--accent-text); text-decoration: underline; } .col.eigen .kolpand { font-size: .76rem; color: var(--muted); padding: 0 8px 8px; margin-top: -4px; } .col.dicht > .kolpand { display: none; } /* Kamerkaarten: de huurder en de maandhuur; het ⋯ rechtsboven. */ .task { position: relative; } .task .kaartmenuwrap { position: absolute; top: 4px; inset-inline-end: 4px; } .task .kaartkebab { border: none; background: none; color: var(--muted); border-radius: 6px; padding: 0 6px; font-size: 1rem; line-height: 1.3; opacity: .55; } .task:hover .kaartkebab, .task .kaartkebab[aria-expanded="true"], .task .kaartkebab:focus-visible { opacity: 1; background: var(--panel-2); color: var(--ink); } .task:has(.kaartmenuwrap) > .t { padding-inline-end: 26px; } .task .vhkaart { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: .8rem; } .task .vhhuurder { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: var(--r-pill, 999px); padding: 1px 9px; font-size: .8rem; } .task .vhhuurder:hover { border-color: var(--accent); color: var(--accent-text); } .task .vhhuur { color: var(--muted); } /* De laatste actie richting de huurder, klein onder de namen (30-09-2026). */ .task .vh-laatste { color: var(--muted); font-size: .78rem; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* De estafette op de kamerkaart (23-09-2026): wie vertrekt licht rood, wie komt licht groen (gestippeld zolang hij kandidaat is), en de stap van nu als klikbare regel. color-mix houdt het leesbaar in licht én donker zonder eigen tokens. */ .task .vhhuurder.vh-vertrek { background: #fde2e2; border-color: #f5b5b5; color: #5b1a1a; } .task .vhhuurder.vh-actie { background: #ffe8cc; border-color: #f7c48a; color: #5a3200; } .task .vhhuurder.vh-rust { background: #dcf5e3; border-color: #a7dfb8; color: #14502a; } .task .vhhuurder.vh-vertrek:hover, .task .vhhuurder.vh-actie:hover, .task .vhhuurder.vh-rust:hover { filter: brightness(.97); color: inherit; } .task .vh-datum { font-size: .78rem; color: var(--muted); } .task .vh-datum-weg { color: #b42318; } .task .vhhuurder.vh-nieuw.kandidaat { border-style: dashed; } .task .vh-stappen { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 5px; } .task .vh-stap { border: 0; background: none; padding: 0; font-size: .78rem; color: var(--muted); text-align: start; cursor: pointer; } .task .vh-stap:hover { color: var(--accent-text); text-decoration: underline; } #verhuurDlg .vh-estab input[type="text"] { width: 100%; } #verhuurDlg .vh-estab tr.vh-esuit td { opacity: .55; } #verhuurDlg .vh-esnieuw { margin-bottom: 18px; align-items: center; } #verhuurDlg .vh-esnieuw input[type="text"] { flex: 1 1 16rem; } #verhuurDlg .vh-esnieuw > * { flex: 0 1 auto; } #verhuurDlg .vh-esnieuw .vh-kies { white-space: nowrap; } dialog.vh-opzegvenster { width: min(560px, calc(100vw - 32px)); } #verhuurDlg .vh-esherinner { gap: 18px; align-items: center; margin-top: 4px; } #verhuurDlg .vh-esherinner > * { flex: 0 0 auto; } #verhuurDlg .vh-esherinner .vh-kies { white-space: nowrap; } /* Een verborgen keuzeveld blijft verborgen, ook waar .vh-kies het display zet (buiten het verhuurvenster). */ .vh-kies[hidden] { display: none !important; } /* De huiskeuze in het kolommenu: een keuzelijst tussen de knoppen. */ .col.eigen h2 .menu label.kolhuis { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 4px; font-size: .78rem; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; margin: 0; } .col.eigen h2 .menu label.kolhuis select { width: 100%; font-size: .85rem; } /* De kiezer (pand, kamer, huurder). */ .kolkeuzes { max-height: 55vh; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; } .kolkeuze { display: flex; justify-content: space-between; gap: 10px; text-align: start; border: none; background: none; padding: 7px 10px; border-radius: 8px; color: var(--ink); } .kolkeuze:hover:not(:disabled) { background: var(--panel-2); } .kolkeuze:disabled { opacity: .5; } /* "Geen kleur" in het kolomvenster: een gewoon vinkje, geen kopje in hoofdletters. */ .kolkleurrij label.chk { text-transform: none; letter-spacing: 0; font-size: .86rem; font-weight: 400; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; margin: 0; } .menu button.kolgevaar, .hbtn.kolgevaar { color: var(--danger); } .menu button.kolgevaar:hover { background: var(--danger-bg); } /* Ingeklapt: alleen de naam rechtop en de teller. */ .col.dicht { padding: 8px 2px; cursor: pointer; min-height: 220px; } .col.dicht h2 { writing-mode: vertical-rl; justify-content: flex-start; align-items: center; gap: 10px; padding: 6px 0; margin: 0 auto; max-height: 70vh; } .col.dicht > :not(h2) { display: none; } .col.dicht:hover { background: var(--panel-2); } /* Een kolom verslepen: waar hij landt, staat een streep. */ .col.kolsleep { opacity: .5; } .col.koldoel-voor { box-shadow: inset 4px 0 0 var(--accent); } .col.koldoel-na { box-shadow: inset -4px 0 0 var(--accent); } [dir="rtl"] .col.koldoel-voor { box-shadow: inset -4px 0 0 var(--accent); } [dir="rtl"] .col.koldoel-na { box-shadow: inset 4px 0 0 var(--accent); } /* De strook om een kolom toe te voegen. */ .kolomerbij button { width: 100%; border: 1.5px dashed var(--line); background: none; color: var(--muted); border-radius: 12px; padding: 12px 8px; font-weight: 600; font-size: .85rem; } .kolomerbij button:hover { border-color: var(--accent); color: var(--accent-text); } /* Het kolomvenster en de bordinstelling. */ .kolkleurrij { align-items: center; gap: 10px; } .kolkleurrij input[type="color"] { flex: 0 0 46px; height: 38px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); } .kolwegblok { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; } .kolwegblok summary { cursor: pointer; color: var(--danger); font-weight: 600; } .kolwegblok select, .kolwegblok .hbtn { margin-top: 8px; } .kolinstelling { margin-top: 12px; } /* Bijlagen die in een nieuwe kaart wachten tot Aanmaken (23-09-2026). */ #taskDlg .plakwacht { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; } #taskDlg .plakwacht:empty { display: none; } #taskDlg .plakwacht-beelden { display: flex; flex-wrap: wrap; gap: 6px; } #taskDlg .plakwacht-beelden img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); } /* Datumvelden in het Nederlands (26-09-2026): een tekstvak met DD-MM-JJJJ en 📅 voor de kalender; het echte datumveld blijft bestaan maar is onzichtbaar (de kalender opent op zijn plek). */ .datumveld { position: relative; display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; vertical-align: middle; } .datumveld[hidden] { display: none !important; } .datumveld > input.datumtekst { flex: 0 0 auto; width: calc(10.5ch + 2.2em); font-variant-numeric: tabular-nums; } .datumveld > .datumtekst.fout { border-color: var(--danger) !important; color: var(--danger); } .datumveld > input[type=date], .datumveld > input[type=month] { position: absolute; right: 0; bottom: 0; width: 1px !important; height: 1px !important; min-width: 0 !important; opacity: 0; pointer-events: none; border: 0 !important; padding: 0 !important; margin: 0 !important; } .datumveld > .datumknop { flex: 0 0 auto; border: none; background: none; padding: 0 3px; cursor: pointer; font-size: .95em; line-height: 1; color: inherit; } .datumveld > .datumknop:disabled { opacity: .4; cursor: default; } .chip-f > .datumveld > input.datumtekst { border: none; background: none; padding: 0; width: 10.5ch; } .chip-f > .datumveld > .datumtekst:focus:not(:focus-visible) { outline: none; } /* De uitweg bij een geweigerd accepteren (26-09-2026): de oplossingen als volle knoppen onder elkaar. */ .vh-uitweg .vh-uitwegknoppen { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .vh-uitweg .vh-uitwegknoppen > button { width: 100%; text-align: left; white-space: normal; } .vh-uitweg .vh-vink { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; text-transform: none; letter-spacing: normal; font-size: inherit; font-weight: normal; color: inherit; } /* Volgende taken van een huurder (26-09-2026): te doen, wachten op en snelle acties. */ .vh-volgende h4 { margin: 12px 0 4px; } .vh-vvlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .vh-vvtaak { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); } .vh-vvwat { display: flex; flex-direction: column; min-width: 0; } .vh-vvknoppen { display: flex; gap: 6px; flex-wrap: wrap; } .vh-vvsnel { flex-wrap: wrap; gap: 6px; } .vh-hpvolgende:empty { display: none; } .vh-hpvolgende { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; } .vh-vvkop { margin: 0 0 4px; } /* Einde huurcontract in het contractvenster (27-09-2026). */ .vh-einde { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; } .vh-einde h4 { margin: 0 0 4px; } .vh-einde .row { flex-wrap: wrap; gap: 6px; } /* Verhuur-venster, nieuwe indeling (27-09-2026): vijf tabbladen + menu Meer. */ #verhuurDlg #vhTabs .vh-meer { margin-inline-start: auto; } #verhuurDlg #vhTabs .vh-meer > button.on { font-weight: 650; box-shadow: inset 0 -2px 0 var(--accent); } #verhuurDlg #vhTabs .vh-meer .menu button { display: block; width: 100%; text-align: start; } #verhuurDlg #vhTabs .vh-meer .menu button.on { font-weight: 650; } #verhuurDlg .vh-keuzerij { flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; } #verhuurDlg .vh-keuzerij select { max-width: 22rem; } #verhuurDlg .vh-schakel { display: inline-flex; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; } #verhuurDlg .vh-schakel button { border: 0; border-radius: 0; background: transparent; padding: 6px 12px; } #verhuurDlg .vh-schakel button.on { background: var(--fill); font-weight: 650; box-shadow: inset 0 -2px 0 var(--accent); } /* Te doen: per huis de open kaarten. */ #verhuurDlg .vh-werkpand { margin: 6px 0 12px; } #verhuurDlg .vh-werkpand > b { display: block; margin-bottom: 4px; } /* Panden en Kamers: nog in te vullen, het ingevulde onder een harmonica. */ #verhuurDlg .vh-invul { margin: 4px 0 14px; } #verhuurDlg .vh-invul h4 { margin: 6px 0; } #verhuurDlg .vh-veldlink { margin-inline-start: 4px; text-decoration: none; } /* Huuroverzicht: per huis een kopregel. */ #verhuurDlg table.vh-huuroverzicht tr.vh-hokop th { background: var(--fill); font-weight: 650; padding-top: 8px; } #verhuurDlg .vh-mndkop { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; } #verhuurDlg .vh-mndkop:hover { color: var(--ink); text-decoration: underline; } /* Huurders: een spreadsheet met een vaste eerste kolom. */ #verhuurDlg .vh-htwrap { max-height: 70vh; overflow: auto; } #verhuurDlg table.vh-httabel { border-collapse: separate; border-spacing: 0; min-width: 100%; font-variant-numeric: tabular-nums; } #verhuurDlg table.vh-httabel th, #verhuurDlg table.vh-httabel td { padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: start; background: var(--card); } #verhuurDlg table.vh-httabel thead th { position: sticky; top: 0; z-index: 2; font-size: .75rem; } #verhuurDlg table.vh-httabel thead th button { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 650; color: var(--muted); cursor: pointer; } #verhuurDlg table.vh-httabel th[scope="row"], #verhuurDlg table.vh-httabel thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; } #verhuurDlg table.vh-httabel thead th:first-child { z-index: 3; } #verhuurDlg table.vh-httabel tbody tr { cursor: pointer; } #verhuurDlg table.vh-httabel tbody tr:hover td, #verhuurDlg table.vh-httabel tbody tr:hover th { background: var(--fill); } /* De huurderpagina: alle onderdelen als kopjes onder elkaar. */ #verhuurDlg .vh-hpsecties { margin-top: 10px; } #verhuurDlg .vh-hpsectie { border-top: 1px solid var(--line); } #verhuurDlg .vh-hpsectie > summary { padding: 10px 2px; cursor: pointer; } #verhuurDlg .vh-hpsectie[open] > summary { color: var(--ink); } /* Velden: vinkjes per plek. */ #verhuurDlg table.vh-veldtabel th, #verhuurDlg table.vh-veldtabel td { vertical-align: middle; } #verhuurDlg .vh-vinkcel { text-align: center; width: 5.5rem; } #verhuurDlg .vh-sectie { margin-top: 10px; } #verhuurDlg table.vh-veldtabel { min-width: 56rem; } #verhuurDlg table.vh-veldtabel thead th { white-space: nowrap; font-size: .8rem; } #verhuurDlg table.vh-veldtabel th[scope="row"] { min-width: 14rem; } #verhuurDlg table.vh-veldtabel td { white-space: nowrap; } #verhuurDlg table.vh-veldtabel th[scope="row"] { text-align: start; font-weight: 500; } #verhuurDlg table.vh-estab td:nth-child(3) { white-space: nowrap; } /* Alle panden bovenaan Panden (27-09-2026). */ #verhuurDlg .vh-pandoverzicht tbody tr { cursor: pointer; } #verhuurDlg .vh-pandoverzicht tbody tr:hover th, #verhuurDlg .vh-pandoverzicht tbody tr:hover td { background: var(--fill); } #verhuurDlg .vh-pandoverzicht tr.vh-gekozen th { box-shadow: inset 3px 0 0 var(--accent); font-weight: 650; } #verhuurDlg .vh-pandoverzicht th[scope="row"] { text-align: start; font-weight: 500; } /* De panden als kaarten (28-09-2026). Een tegel is een knop: de hele tegel kiest het pand, de signaalpillen erin blijven hun eigen knop. */ #verhuurDlg .vh-pandweergave { margin-block-end: 10px; } #verhuurDlg .vh-pandkaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } #verhuurDlg .vh-pandkaart { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: start; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); color: var(--ink); cursor: pointer; width: 100%; } #verhuurDlg .vh-pandkaart:hover { border-color: var(--muted); background: var(--fill); } #verhuurDlg .vh-pandkaart.vh-gekozen { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } #verhuurDlg .vh-pk-naam { font-weight: 650; line-height: 1.3; } #verhuurDlg .vh-pk-adres { font-size: .8rem; } #verhuurDlg .vh-pk-balk { display: block; height: 5px; border-radius: var(--r-pill); background: var(--fill); border: 1px solid var(--line); overflow: hidden; margin-block-start: 3px; } #verhuurDlg .vh-pk-balk > span { display: block; height: 100%; background: var(--accent); } #verhuurDlg .vh-pk-bezet { font-size: .78rem; } #verhuurDlg .vh-pk-sig .vh-signalen { margin-inline-start: 0; } @media (max-width: 480px) { #verhuurDlg .vh-pandkaarten { grid-template-columns: 1fr; } } /* De deelnemerslijst van de jaarlijkse huurverhoging (28-09-2026). */ #verhuurDlg .vh-idxlijst { list-style: none; padding-inline-start: 0; margin: 6px 0 0; } #verhuurDlg .vh-idxrij { padding: 4px 0; border-block-end: 1px solid var(--line); } #verhuurDlg .vh-idxrij:last-child { border-block-end: 0; } #verhuurDlg .vh-idxrij.vh-idxuit > label { color: var(--muted); } #verhuurDlg .vh-idxrij .vh-let, #verhuurDlg .vh-idxrij .note { margin: 2px 0 0 22px; font-size: .78rem; } /* Huuroverzicht: de maanden op de regel van elk pand (27-09-2026). */ #verhuurDlg table.vh-huuroverzicht tr.vh-hokop th.vh-hokol { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } #verhuurDlg table.vh-huuroverzicht tbody + tbody tr.vh-hokop th { border-top: 10px solid var(--card); } /* Het postvak: bovenaan wat vandaag op jou wacht, van al je borden (27-09-2026). */ .urgentblok { border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin: 0 0 10px; background: var(--card); } .urgentkop { font-weight: 600; font-size: 13px; margin: 2px 4px 6px; display: flex; gap: 6px; align-items: center; } .urgentkop span { color: var(--muted); font-weight: 500; } .urgentkaart { display: block; width: 100%; text-align: start; background: transparent; border: 0; border-inline-start: 3px solid var(--pcol, var(--line)); border-radius: 8px; padding: 6px 8px; margin: 2px 0; cursor: pointer; color: inherit; font: inherit; } .urgentkaart:hover, .urgentkaart:focus-visible { background: var(--hover, rgba(127,127,127,.08)); } .urgentkaart .t { display: block; font-weight: 500; } .urgentkaart .m { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 3px; } .urgentkaart .urgentreden { font-size: 12px; color: var(--muted); } /* Wie doet wat: AI en kosten per rol (27-09-2026). */ .kostTabelWrap { overflow-x: auto; margin-top: 8px; } .kostTabel { width: 100%; border-collapse: collapse; font-size: 13px; } .kostTabel th { text-align: start; font-size: 11px; color: var(--muted); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--line); } .kostTabel td { padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; } .kostTabel td.kostRol { min-width: 96px; } .kostTabel td.kostRol .note { font-size: 11px; } .kostTabel .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; } .kostTabel select { width: 100%; max-width: 160px; min-width: 110px; font-size: 13px; } .kostTabel .kostAantal { width: 58px; } .kostTabel tfoot td { border-bottom: 0; padding-top: 10px; } /* ── Bouwers: de stappen (28-09-2026) ───────────────────────────── Per stap een stand (✅ klaar, ⏳ wacht op een ander, 👉 jij bent aan de beurt, ⛔ gestopt), één zin, en waar het kan een knop of link. */ .bwStappen { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; } .bwStap { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; } .bwStap-jij { border-color: #f97316; background: rgba(249, 115, 22, .06); } .bwStap-klaar { opacity: .9; } .bwIcoon { font-size: 16px; line-height: 20px; flex: 0 0 auto; } .bwStap .note { white-space: nowrap; } .bwActie { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; } .bwApps { margin: 4px 0 0; padding-left: 18px; } .bwApps .note { white-space: normal; } .bwSoort { display: grid; gap: 4px; } .dlg .bwSoort label { font-weight: normal; font-size: .9rem; color: var(--ink); text-transform: none; letter-spacing: normal; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin: 0; cursor: pointer; } .bwBeheer { border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 10px; margin: 8px 0; } .bwBeheer.bwWachtOpJou { border-color: #f97316; } .bwTeBeoordelen { margin: 6px 0; font-weight: 600; } .bwAfrekeningen { margin: 4px 0; padding-left: 18px; } .bwAfrekeningen li { margin: 3px 0; } .dlg .bwAkkoord { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-weight: normal; font-size: .9rem; color: var(--ink); text-transform: none; letter-spacing: normal; cursor: pointer; } .dlg .bwAkkoord input { margin-top: 3px; } /* ── Teamplanning (04-10-2026): bezetting, profiel, planning ── */ .bezetrij { display: grid; gap: 4px; margin: 8px 0; } .bezetrij.klein { margin: 0; min-width: 160px; } .bezet { display: grid; grid-template-columns: 4.5em 1fr auto; gap: 8px; align-items: center; font-size: .78rem; } .bezetweek { color: var(--muted); } .bezetspoor { position: relative; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; } .bezetspoor i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--accent); border-radius: 4px; } .bezetspoor b { position: absolute; inset-block: -2px; inset-inline-start: 80%; width: 2px; background: var(--ink); opacity: .55; } .bezet.over .bezetspoor i { background: var(--danger); } .bezetgetal { color: var(--muted); white-space: nowrap; } .vaardigchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; } .vaardigchip { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; } .vaardigchip .niveau { letter-spacing: -1px; opacity: .8; } .vaardigvb { margin: 4px 0 8px; padding-inline-start: 18px; } .vaardigvb li { margin: 3px 0; } .teamtabel { display: grid; gap: 8px; margin: 6px 0; } .teamrij { display: grid; grid-template-columns: 1fr minmax(160px, 1fr); gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; } @media (max-width: 560px) { .teamrij { grid-template-columns: 1fr; } } .badge.voorstelmens { background: var(--warn-bg); color: var(--ink); } .badge.inschat { background: var(--fill); color: var(--muted); } .badge.waarsch { background: var(--danger-bg); color: var(--danger); } #estChip input { width: 4.5em; } /* De planning */ .planview { padding: 12px 16px 80px; } .planleeg { padding: 24px 0; } .planbar-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .planbar-top .sp { flex: 1; } .planscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); } .plantabel { border-collapse: collapse; font-size: .8rem; min-width: 100%; } .plantabel th, .plantabel td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; vertical-align: middle; } .plantabel th { font-size: .7rem; color: var(--muted); font-weight: 700; background: var(--panel); position: sticky; top: 0; z-index: 2; } .plantabel .plkaart { white-space: normal; min-width: 180px; max-width: 280px; } .plantabel .plopen { text-align: start; color: var(--ink); font-weight: 600; } .plnr { color: var(--muted); } .plrij.kritiek .plnr { color: var(--danger); font-weight: 700; } .plrij.keten { background: var(--accent-50); } .plkrit { color: var(--danger); font-weight: 700; } .plverwacht.gezet { border-color: var(--accent); } .plna { white-space: normal; } .plnabadge { display: inline-flex; align-items: center; gap: 2px; margin-inline-end: 3px; } .plnakies { max-width: 220px; font-size: .78rem; } .plantabel .plgantt { padding: 0; } .pltrack { min-height: 24px; position: relative; } .plliniaal .tlday { border-bottom: 0; overflow: visible; white-space: nowrap; text-align: start; } .plliniaal .tlday.weekend { background: var(--fill); } .plbalk { height: 12px; border-radius: 6px; background: var(--pcol); opacity: .75; align-self: center; } .plbalk.kritiek { background: var(--danger); opacity: 1; } .plbalk.telaat { outline: 2px solid var(--danger); outline-offset: 1px; } .plbalk.nul { background: none; color: var(--pcol); font-size: .75rem; line-height: 12px; text-align: center; opacity: 1; } .plbalk.nul.kritiek { color: var(--danger); } .plbalk.soort-niemand { background: repeating-linear-gradient(45deg, var(--pcol) 0 4px, transparent 4px 8px); } .pldeadline { align-self: stretch; justify-self: end; width: 2px; background: var(--ink); opacity: .45; } .ulrijen { padding-inline-start: 18px; } .ulrijen li { margin: 6px 0; } .ullessen { list-style: none; padding: 0; } .ullessen li { margin: 4px 0; } .plvoorstel { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; } /* Gewone zinnen naast een vinkje, niet de kopstijl van .dlg label. */ .dlg #eTeam label.inline, .dlg label.plvoorstel, .dlg .ullessen label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .88rem; color: var(--ink); margin: 0; } /* Ponto-handleiding (05-10-2026) */ .vh-handleiding { margin: .6rem 0; } .vh-hlstappen { padding-inline-start: 1.2rem; display: grid; gap: 14px; } .vh-hlstappen img { width: 100%; max-width: 640px; border: 1px solid var(--line); border-radius: 8px; display: block; margin-top: 4px; } /* ── Geheimvelden (09-10-2026) ───────────────────────────────── Een nieuw kluisgeheim, je AI-sleutel, een bot-token: dat zijn geen inlogvelden. Als type="password" vulde Chrome er je opgeslagen wachtwoord in, en het oranje vinkje zag dan een half nieuw item (of sloeg je wachtwoord op als AI-sleutel). Nu een tekstveld dat zich als wachtwoord laat zien; .zichtbaar haalt de bolletjes weg (🎲 laat zien wat hij voorstelt). */ input.geheim { -webkit-text-security: disc; text-security: disc; } input.geheim.zichtbaar, input.geheim:placeholder-shown { -webkit-text-security: none; text-security: none; } /* ── De verhuur-app op verhuur.gtdfast.com (09-10-2026) ───────── Het verhuurvenster ís hier de app: geen bord erachter, geen ⤢ of ✕ (er is niets om naar terug te gaan), en bovenin een balk met de naam, de weg naar GTD Fast en uitloggen. */ /* Behalve in de bordweergave (body.vh-bord): dan staat het bord er, met de verhuurborden en een knop terug naar het verhuurscherm. */ body.app-verhuur:not(.vh-bord) #app, body.app-verhuur #login { display: none !important; } body.app-verhuur #verhuurDlg > .dlg-x, body.app-verhuur #verhuurDlg > .dlg-max { display: none; } body.app-verhuur #verhuurDlg::backdrop { background: var(--bg); } /* Eén schuifbalk (12-10-2026, Sven: "kijk hier nog eens naar"): de balk bovenin (47 px) plus een inhoud van de volle vensterhoogte schoven samen 47 px over de rand, zodat het venster zelf óók een schuifbalk kreeg. Nu vult de inhoud precies de ruimte onder de balk en schuift alleen die. */ #verhuurDlg[open]:has(> .vh-app-balk) { display: flex; flex-direction: column; overflow: hidden; } #verhuurDlg:has(> .vh-app-balk) > .vh-app-balk { flex: 0 0 auto; } #verhuurDlg:has(> .vh-app-balk) > .dlg { flex: 1 1 auto; min-height: 0; height: auto; } .vh-app-balk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--card); font-size: 13px; } .vh-app-balk b { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; } .vh-app-rechts { display: inline-flex; align-items: center; gap: 16px; margin-left: auto; } .vh-app-balk .link { font-size: 13px; } /* Inperken (10-10-2026): wat van GTD Fast is, staat niet in de verhuur-app — en wat alleen bij de verhuur-app hoort niet op gtdfast.com. Eén kenmerk per kant; de lijst staat in tests/verhuurhost.test.js. */ body.app-verhuur [data-alleen-gtd] { display: none !important; } /* De CRM-app (14-10-2026): wat alleen bij GTD Fast hoort weg, en wat alleen bij de CRM hoort alleen daar. */ body.app-crm [data-alleen-gtd], body.app-crm #avatarWissel { display: none !important; } body:not(.app-crm) [data-alleen-crm] { display: none !important; } body:not(.app-verhuur) [data-alleen-verhuur] { display: none !important; } /* Herhalen bestaat niet in de verhuur-app: ook het 🔁 achter de titel op het bord niet. */ body.app-verhuur .task.herhaalt .t::after { content: none; } /* Ronde 2 (10-10-2026): de groepen in de bordkiezer, de tegoedmelding, het bedrijfspandlabel, inrichten en de beheerbordkeuze. */ .optkop.vh-groep { cursor: default; } .vh-tegoed { flex: none; white-space: nowrap; border-color: #F59E0B; color: #B45309; } .vh-tegoed.leeg { background: #F59E0B; color: #1A1005; } .kolsoort { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--line); font-size: 11px; font-weight: 600; } .vh-inricht { display: flex; flex-direction: column; gap: 10px; max-width: 520px; margin-top: 10px; } .vh-inrichtakkoord { align-items: flex-start; gap: 8px; white-space: normal; } .vh-bbkeus { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; } .vh-bbpanden { display: flex; flex-direction: column; gap: 4px; padding-inline-start: 22px; max-height: 260px; overflow: auto; } /* Ronde 3: het pand op een kaart van het bedrijfsbord op "Mijn kaarten". */ .badge.vh-pandlabel { background: var(--line); color: var(--ink); } /* De schakelknop staat direct na het logo (op het bord) of na de naam (in het beheer), in dezelfde vorm. */ .vh-app-balk { justify-content: flex-start; } #vhSchakel { white-space: nowrap; flex: none; } #app > header #vhSchakel { margin-left: 4px; } /* Downloads (11-10-2026): handleidingen en andere bestanden, lijst in /downloads/downloads.json. */ .vh-downloads { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; } .vh-download { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; } .vh-download > div:first-child { flex: 1 1 260px; } .vh-download-knoppen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .vh-download-sleutel code { word-break: break-all; } .vh-download-knoppen .hbtn { text-decoration: none; } /* Afwikkeling terugdraaien (10-10-2026): de uitleg bij de twee keuzes breekt af, ook buiten het venster. */ label.vh-kies.vh-afwkies { white-space: normal; align-items: flex-start; text-align: left; } label.vh-kies.vh-afwkies > b { white-space: nowrap; } /* ── Kort verblijf (12-10-2026): listing, nachtenteller en boekingen in het Verhuur-venster ── */ .vh-kort { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; } .vh-kort h4 { margin: 0 0 6px; } .vh-kort-reg { margin: 4px 0; } .vh-kort-reg b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; } .vh-kort-teller { margin: 8px 0; } .vh-kort-balk { height: 10px; border-radius: 6px; background: var(--fill); overflow: hidden; margin: 4px 0; max-width: 28rem; } .vh-kort-balk > span { display: block; height: 100%; background: var(--ok); } .vh-kort-bijna .vh-kort-balk > span { background: var(--warn); } .vh-kort-vol .vh-kort-balk > span, .vh-kort-over .vh-kort-balk > span { background: var(--danger, #c0392b); } .vh-kort-stand { margin: 2px 0; font-size: .86rem; } .vh-kort-bijna .vh-kort-stand { color: var(--warn); } .vh-kort-vol .vh-kort-stand, .vh-kort-over .vh-kort-stand { color: var(--danger, #c0392b); font-weight: 600; } .vh-kort-boekingen th { text-align: left; font-weight: 600; font-size: .8rem; color: var(--muted); padding: 4px 8px; } .vh-kort-weg td { color: var(--muted); text-decoration: line-through; } .vh-kort-weg td:last-child, .vh-kort-weg td:nth-child(5) { text-decoration: none; } .vh-kort-getal { width: 4.5rem; } .vh-kort-geld { width: 6rem; } .vh-kort-velden { display: flex; flex-wrap: wrap; gap: 6px 12px; } .vh-kort-belasting th { text-align: left; font-weight: 600; font-size: .8rem; color: var(--muted); padding: 4px 8px; } .vh-kort-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .vh-kort-boekingen { min-width: 720px; } .vh-kort-boekingen th, .vh-kort-boekingen td:nth-child(-n+3), .vh-kort-boekingen button { white-space: nowrap; } .vh-kort-boekingen td:nth-child(7) { white-space: nowrap; } /* ── Financiën per pand (12-10-2026): tegels, tabel per eigenaar, het pand open ── */ .vh-fin-filters { flex-wrap: wrap; gap: 6px 10px; } .vh-fin-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; } .vh-fin-tegel { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; } .vh-fin-tegel b { font-size: 1.1rem; } .vh-fin-tabel { min-width: 760px; } .vh-fin-tabel th { text-align: left; font-weight: 600; font-size: .8rem; color: var(--muted); padding: 4px 8px; white-space: nowrap; } .vh-fin-tabel th.rechts { text-align: right; } .vh-fin-rij { cursor: pointer; } .vh-fin-rij:hover, .vh-fin-rij.on { background: var(--fill); } .vh-fin-detail { border-left: 3px solid var(--accent, #f08c00); padding: 4px 0 4px 10px; } .vh-fin-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 16px; margin: 6px 0 10px; font-size: .88rem; } .vh-fin-kv > div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding: 5px 2px; } .vh-fin-kv > div > span { color: var(--muted); } .vh-fin-kv > div > b { white-space: nowrap; text-align: right; } .vh-fin-delen, .vh-fin-schema { min-width: 560px; } .vh-fin-schema td:first-child { white-space: nowrap; } .vh-fin-signalen ul { margin: 6px 0; padding-left: 18px; } .vh-fin-lening table { margin: 6px 0; } /* Kaarten uit Pipedrive (12-10-2026): de link terug naar Pipedrive, op de kaart, in het kaartvenster en in Te doen. */ a.badge.pdlink { text-decoration: none; background: var(--fill); color: var(--ink); cursor: pointer; } a.badge.pdlink:hover, a.badge.pdlink:focus-visible { text-decoration: underline; } a.chip-f.pdchip { text-decoration: none; color: var(--accent-text); font-size: .85rem; font-weight: 600; } a.chip-f.pdchip.pdbij { color: var(--ink); font-weight: 500; } a.chip-f.pdchip:hover { text-decoration: underline; } a.vh-pdlink { align-self: center; font-size: .85rem; white-space: nowrap; } /* Huurprijscheck-blok op de huispagina: label boven het veld, raster dat op de telefoon naar één kolom gaat. */ [data-hpcblok] .vh-kngrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; margin: 8px 0; } [data-hpcblok] .vh-kngrid .vh-veld { display: flex; flex-direction: column; align-items: stretch; gap: 3px; margin: 0; } [data-hpcblok] .vh-kngrid .vh-veld select, [data-hpcblok] .vh-kngrid .vh-veld input:not([type=checkbox]) { width: 100%; min-width: 0; } /* De puntentelling-poort als stappen (13-10-2026). */ .vh-ptstappen { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; } .vh-ptstappen > li { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 8px 10px; } .vh-ptstappen > li.vh-ok { background: color-mix(in srgb, #16a34a 6%, transparent); } .vh-ptstappen > li .row { margin-top: 6px; flex-wrap: wrap; gap: 6px; } .vh-ptzelf { margin: 8px 0; } .vh-ptzelf > summary { cursor: pointer; } .vh-ptvraag [data-ptplek]:empty, .vh-ptvraag [data-ptuit]:empty { display: none; } /* Avatars (13-10-2026): wie zit er achter een gedeeld account. Ronde tegels bovenaan het avatarmenu, in "Wie ben jij?" en in het beheer (js/header.js). Specifieker dan `.menu button`, dat elke knop in het menu een volle regel maakt. */ .avwissel { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 6px 6px; } .avwissel button.avtegel, .avkeuze button.avtegel { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 70px; padding: 6px 4px; border: 1.5px solid transparent; border-radius: 10px; background: none; font-size: .74rem; font-weight: 500; color: var(--ink); text-align: center; cursor: pointer; } .avwissel button.avtegel:hover, .avkeuze button.avtegel:hover { background: var(--fill); } .avwissel button.avtegel.on { border-color: var(--accent, #EA580C); } .avtegel img, .avtegel .avtegel-i { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .avtegel .avtegel-i { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .95rem; } .avtegel > span:last-child:not(.avtegel-i) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avkeuze { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0; } .avkeuze button.avtegel { width: 96px; font-size: .85rem; } .avkeuze .avtegel img, .avkeuze .avtegel .avtegel-i { width: 56px; height: 56px; font-size: 1.4rem; } .avrij { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-top: 10px; } .avrij h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; } .avrij h4 .avtegel img, .avrij h4 .avtegel .avtegel-i { width: 26px; height: 26px; font-size: .8rem; } .avrij input[type="color"] { width: 48px; height: 30px; padding: 0 2px; flex: 0 0 auto; } /* Het voorstel uit de plattegrond met het plaatje en genummerde stippen (13-10-2026). */ .vh-pgtwee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; margin: 8px 0; } .vh-pgtwee > .vh-kort-scroll:only-child { grid-column: 1 / -1; } .vh-ptvraag .vh-pgtwee, dialog:not(.breed) .vh-pgtwee { grid-template-columns: minmax(0, 1fr); } @media (max-width: 900px) { .vh-pgtwee { grid-template-columns: minmax(0, 1fr); } } .vh-pgbeeld { max-height: 70vh; overflow: auto; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: #fff; } .vh-pgpagina + .vh-pgpagina { border-top: 1px dashed var(--border, #e5e7eb); } .vh-pgpagina > .note { padding: 4px 8px; } .vh-pgvlak { position: relative; } .vh-pgvlak img { display: block; width: 100%; height: auto; } .vh-pgstip { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; min-width: 0; padding: 0; border-radius: 50%; border: 2px solid #fff; background: #ea580c; color: #fff; font: 700 13px/22px system-ui, sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; } .vh-pgstip.vh-pglicht { background: #1d4ed8; transform: translate(-50%, -50%) scale(1.35); z-index: 2; } .vh-pgnr { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #ea580c; color: #fff; font-weight: 700; font-size: 12px; } .vh-pgnr.vh-pgnr-los { background: #9ca3af; } tr.vh-pglicht > td { background: color-mix(in srgb, #1d4ed8 10%, transparent); } tr.vh-pglicht .vh-pgnr { background: #1d4ed8; } /* Foto's en video's slepen bij de advertentie (13-10-2026). */ .vh-advsleep { border: 2px dashed var(--border, #d1d5db); border-radius: 10px; padding: 8px 10px; } [data-advfotovak].vh-sleep .vh-advsleep { border-color: #ea580c; background: color-mix(in srgb, #ea580c 6%, transparent); } .vh-fotos figure video { display: block; width: 100%; max-height: 180px; background: #000; border-radius: 6px; } .vh-fotos figure:has(video) { max-width: 240px; } .vh-fotos figure.vh-niet-mee img { opacity: .35; filter: grayscale(1); } /* Het advertentievenster past in beeld (Sven 13-10-2026: "het scherm staat te hoog"): sinds 17-10-2026 geldt dat voor elk dialog.vh-vraag (zie "Elk klein verhuurvenster past in beeld"). */ .vh-advbuurt { margin: 6px 0; padding-inline-start: 1.2rem; display: grid; gap: 2px; } /* Deel C (13-10-2026): een veld dat ook bij de kamer of het huis staat. */ .vh-spiegel { cursor: help; font-size: .85em; opacity: .75; } /* ── GTD CRM (14-10-2026, ronde 2): dealtegel, CRM-venster, dealvenster ── */ .crm-tegel { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 4px 0 2px; font-size: .78rem; color: var(--muted); } .crm-tegel.stil { box-shadow: inset 3px 0 0 var(--accent); padding-inline-start: 6px; } .crm-tegel.rood .crm-stap.geen, .crm-stap.geen { color: var(--danger); font-weight: 600; } .crm-stap.laat { color: var(--danger); } .crm-cms { background: var(--fill); color: var(--ink); } .crm-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-inline-end: 76px; } .crm-kop h3 { margin: 0; } .crm-kop .sp, .crm-balk .sp { flex: 1; } .crm-tabs { display: flex; gap: 4px; margin: 10px 0; border-bottom: 1px solid var(--line, var(--fill)); overflow-x: auto; } .crm-tabs button { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; color: var(--muted); cursor: pointer; white-space: nowrap; } .crm-tabs button.actief { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 700; } .crm-balk, .crm-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; } .crm-bulk { background: var(--fill); padding: 8px; border-radius: 10px; } .crm-check { display: inline-flex; gap: 6px; align-items: center; } .crm-link { background: none; border: none; padding: 0; color: var(--accent-text); cursor: pointer; text-align: start; font: inherit; } .crm-link:hover { text-decoration: underline; } .crm-tabel { overflow-x: auto; } .crm-tabel table, .crm-fases { width: 100%; border-collapse: collapse; font-size: .9rem; } .crm-tabel th, .crm-tabel td, .crm-fases th, .crm-fases td { padding: 6px 8px; border-bottom: 1px solid var(--fill); text-align: start; vertical-align: middle; } .crm-tabel tr.stil td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .crm-tabel tr.rood td:nth-child(6) { color: var(--danger); } .crm-lijst { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; } .crm-blok { background: var(--card); border: 1px solid var(--fill); border-radius: 12px; padding: 10px 12px; margin: 10px 0; } .crm-blok h4, .crm-blok h5 { margin: 0 0 8px; } .crm-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; align-items: end; } .crm-velden label { display: grid; gap: 3px; font-size: .82rem; color: var(--muted); } .crm-velden input, .crm-velden select { width: 100%; box-sizing: border-box; } .crm-rij { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; } .crm-dealkop { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-inline-end: 76px; } .crm-titel { flex: 1; min-width: 200px; font-size: 1.15rem; font-weight: 700; } .crm-fasebalk { display: flex; gap: 2px; margin: 10px 0 4px; overflow-x: auto; } .crm-fasebalk button { flex: 1 0 auto; border: 1px solid var(--fill); background: var(--panel); color: var(--ink); padding: 6px 10px; cursor: pointer; font-size: .82rem; } .crm-fasebalk button:first-child { border-radius: 999px 0 0 999px; } .crm-fasebalk button:last-child { border-radius: 0 999px 999px 0; } .crm-fasebalk button.actief { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; } .crm-fasebalk button.uitkomst-won.actief { background: var(--ok); border-color: var(--ok); } .crm-fasebalk button.uitkomst-lost.actief { background: var(--danger); border-color: var(--danger); } .crm-deal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Het dealvenster zoals Pipedrive (16-10-2026): links de gegevens, rechts invoer met tabs, Focus en de geschiedenis. */ .crm-deal { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); } .crm-invoertabs { display: flex; gap: 4px; border-bottom: 1px solid var(--fill); margin-bottom: 8px; flex-wrap: wrap; } .crm-invoertabs button { border: 0; background: none; color: var(--muted); padding: 6px 10px; border-bottom: 2px solid transparent; cursor: pointer; font-weight: 600; } .crm-invoertabs button.actief { color: var(--ink); border-bottom-color: var(--accent); } .crm-invoer textarea { width: 100%; box-sizing: border-box; } .crm-invoer [data-invoervak="mail"] > .crm-blok { border: 0; padding: 0; margin: 0; } .crm-volgende { font-weight: 600; } .crm-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; } .crm-tijdlijn > li.crm-leeg { display: none; } .crm-tijdlijn > li.crm-leeg:only-child { display: list-item; } .crm-tijdlijn[data-filter="notitie"] > li:not([data-groep="notitie"]), .crm-tijdlijn[data-filter="activiteit"] > li:not([data-groep="activiteit"]), .crm-tijdlijn[data-filter="mail"] > li:not([data-groep="mail"]), .crm-tijdlijn[data-filter="bestand"] > li:not([data-groep="bestand"]), .crm-tijdlijn[data-filter="wijziging"] > li:not([data-groep="wijziging"]) { display: none; } .crm-tijdlijn li[data-groep="bestand"] { border-inline-start-color: #60A5FA; } .crm-tijdlijn li[data-groep="notitie"] { border-inline-start-color: #FBBF24; } /* Beheer: de schakelaar per onderdeel. */ .crm-teammag { float: inline-end; font-size: .82rem; color: var(--muted); } /* Agenda: afspraken uit Google Agenda (iCal) tussen de CRM-activiteiten. */ .crm-lijst li.crm-google { color: var(--muted); } .crm-stappen { margin: 6px 0 8px 20px; padding: 0; } .crm-stappen li { margin: 2px 0; } .crm-persoon { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .crm-persoon input, .crm-persoon select { max-width: 180px; } .crm-tijdlijn { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .crm-tijdlijn li { border-inline-start: 2px solid var(--fill); padding-inline-start: 8px; } .crm-tijdlijn li.fase { color: var(--muted); font-size: .85rem; } .crm-tijdlijn li.gedaan { opacity: .65; } .crm-inhoud { white-space: pre-wrap; margin-top: 2px; } /* Mail in de CRM (ronde 4): de mail in de tijdlijn, een concept, en het alternatief bij een koude-mailregel. */ .crm-tijdlijn li.crm-mail.in { border-inline-start-color: var(--accent); } .crm-tijdlijn li.crm-mail summary { cursor: pointer; } .crm-mailtekst { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: .9rem; background: var(--fill); border-radius: 8px; padding: 8px; margin: 6px 0; max-height: 320px; overflow: auto; } .crm-concept { border: 1px dashed var(--accent); border-radius: 10px; padding: 8px 10px; margin: 8px 0; } .crm-breed { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; } .crm-breed input, .crm-breed textarea { width: 100%; box-sizing: border-box; } .crm-melding { border-color: #F59E0B; } .crm-melding a.hbtn { text-decoration: none; } /* Leads binnen (ronde 5): een adres of sleutel om te kopiëren. */ .crm-code { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; background: var(--fill); border-radius: 6px; padding: 2px 6px; word-break: break-all; } .crm-detectie { margin-top: 4px; } /* Abonnement (ronde 7a): de balk over de proef boven elk CRM-scherm. */ .crm-abobalk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #FFF7ED; color: #7c2d12; border: 1px solid #FDBA74; border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; font-size: .92rem; } .crm-abobalk.verlopen { background: #FEF2F2; color: #7f1d1d; border-color: #FCA5A5; } .crm-start { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0 16px; max-width: 520px; } .crm-start label { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; font-weight: 600; } .crm-start input { padding: 8px 10px; } .crm-sub { margin: 16px 0 4px; font-size: .95rem; } .crm-lijst .badge.grijs { opacity: .6; } .crm-acties { display: grid; gap: 8px; } .crm-pijplijn { border-top: 1px solid var(--fill); padding-top: 8px; margin-top: 8px; } .crm-pijplijn.gekozen { border-top-color: var(--accent); } .crm-verloren { color: var(--danger); } .crm-bestand { cursor: pointer; } /* Het dashboard (ronde 3). */ .crm-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 10px 0; } .crm-cijfer { background: var(--card); border: 1px solid var(--fill); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; } .crm-cijfer strong { font-size: 1.6rem; line-height: 1.1; } .crm-cijfer span { color: var(--muted); font-size: .82rem; } .crm-cijfer.rood strong { color: var(--danger); } .crm-cijfer.oranje strong { color: var(--accent-text); } .crm-balkje { display: inline-block; width: 120px; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; vertical-align: middle; } .crm-balkje > span { display: block; height: 100%; background: var(--accent); } #crmBalkKnop { white-space: nowrap; } /* Het venster is een flex-kolom: wat zelf scrollt (overflow:auto) zou anders tot 0 krimpen. */ .crm-tabs, .crm-fasebalk, .crm-tabel { flex-shrink: 0; } @media (max-width: 760px) { .crm-deal { grid-template-columns: 1fr; } } /* 16-10-2026 (Sven): "de schermen van de prospects zijn maar half". Het venster is in de CRM-app altijd beeldvullend (leesVenster); de deal klapt naar één kolom op de breedte van het vénster, niet van het scherm. */ #crmDlgBody { container-type: inline-size; } @container (max-width: 760px) { .crm-deal { grid-template-columns: 1fr; } } /* De Leadbank-tabel vult de rest van het venster in plaats van 62% van het scherm. */ dialog.breed #crmDlgBody .crm-bank-tabel { max-height: none; flex: 1 1 auto; min-height: 240px; } /* De pijplijn (16-10-2026): "een scrollbalk zodat we alle fases bereiken". Het bord krijgt de hoogte van het scherm en scrollt zelf: één balk onderin (alle fases) en één aan de zijkant (alle kaarten), elk alleen als het nodig is. De kolommen scrollen niet apart (17-10-2026, Sven: geen balk per kolom). Met de ‹ ›-knoppen spring je een fase verder. */ body.app-crm #board.eigen { height: calc(100dvh - 104px); min-height: 0; overflow: auto; scrollbar-width: auto; scrollbar-color: var(--muted) var(--panel); } body.app-crm #board.eigen::-webkit-scrollbar { height: 14px; width: 12px; } body.app-crm #board.eigen::-webkit-scrollbar-track { background: var(--panel); border-radius: 7px; } body.app-crm #board.eigen::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 7px; border: 3px solid var(--panel); } @media (min-width: 901px) { body.app-crm #boardNav { display: flex; } } /* Leadbank (15-10-2026): een Excel-achtige lijst in de CRM — vaste kopregel, horizontaal scrollen op een smal scherm. */ .crm-bank-balk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; } .crm-bank-balk .sp { flex: 1; } .crm-bank-balk input[type="search"] { min-width: 220px; flex: 1 1 220px; } .crm-bank-tabel { overflow: auto; max-height: 62vh; border: 1px solid var(--line); border-radius: 10px; } .crm-bank-tabel table { border-collapse: collapse; width: 100%; font-size: .86rem; } .crm-bank-tabel th, .crm-bank-tabel td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; } .crm-bank-tabel thead th { position: sticky; top: 0; background: var(--panel, var(--bg)); z-index: 1; } .crm-bank-tabel tr.in-crm td { opacity: .55; } .crm-bank-sort { background: none; border: 0; color: inherit; font: inherit; font-weight: 700; cursor: pointer; padding: 0; } .crm-bank-balk select, .crm-bank-balk input[type="search"] { width: auto; margin: 0; } .crm-bank-balk select { max-width: 200px; } .crm-bank-balk label.crm-check { display: inline-flex; align-items: center; gap: 4px; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 500; } .crm-bank-balk label.hbtn { display: inline-flex; margin: 0; text-transform: none; letter-spacing: 0; font-size: inherit; cursor: pointer; } .crm-waarde { display: inline-block; min-width: 2.2em; text-align: center; font-weight: 700; border-radius: 6px; padding: 0 4px; background: color-mix(in srgb, #16a34a calc(var(--w) * 1%), #9ca3af); color: #fff; } .crm-li { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 3px; background: #0a66c2; color: #fff !important; font-size: .72rem; font-weight: 700; text-decoration: none; line-height: 1.4; } /* Bouwkit R1 (18-10-2026): afdelingen, vestigingen en wie ziet wat, in het bedrijfsvenster. */ .ostr-mensen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; } .ostr-p { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: .9em; cursor: grab; } .ostr-p .tavatar { width: 18px; height: 18px; } .ostr-p.gekozen { outline: 2px solid var(--accent); } .ostr-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 6px; } .ostr-vak { border: 1px dashed var(--line); border-radius: 10px; padding: 8px; min-height: 70px; } .ostr-vak.boven { border-color: var(--accent); background: var(--accent-50); } .ostr-kop { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 6px; } .ostr-leden { display: flex; flex-wrap: wrap; gap: 4px; } .ostr-lid { display: inline-flex; align-items: center; gap: 2px; } .ostr-hoofd.on { color: var(--accent); } .ostr-matrix { overflow-x: auto; } .ostr-cel { min-width: 74px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); padding: 3px 6px; font-size: .85em; cursor: pointer; } .ostr-cel:disabled { cursor: default; } .ostr-cel.niv-leeg { color: var(--muted); } .ostr-cel.niv-zien { background: var(--info-bg); color: var(--info); } .ostr-cel.niv-werken { background: var(--accent-50); color: var(--accent-text); } .ostr-cel.niv-beheren { background: var(--ink); color: var(--on-ink); } .ostr-cel.niv-geen { background: var(--fill); color: var(--muted); text-decoration: line-through; } /* Bouwkit R2: domein, merk en post in het bedrijfsvenster; het logo van een bedrijf in de kopregel. */ .odom-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 6px 0; } .odom-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .odom-kop a { font-size: .9em; } .odom-tabel { overflow-x: auto; margin: 6px 0; } .odom-tabel td { vertical-align: top; padding: 3px 6px; } .odom-tabel code { word-break: break-all; font-size: .85em; } .odom-st.odom-geverifieerd { color: var(--ok, #16a34a); border-color: currentColor; } .odom-st.odom-ingetrokken, .odom-fout { color: var(--danger); } .odom-st.odom-dns { color: var(--accent-text); } .odom-merk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .odom-merk input[type=color] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; } .odom-logo { max-height: 40px; max-width: 160px; object-fit: contain; } .dlg label.odom-chk { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .9rem; color: var(--text); } header .merk-logo { height: 28px; max-width: 120px; object-fit: contain; border-radius: 6px; } /* Bouwkit R3: beveiliging in Instellingen en in het bedrijfsvenster. */ .r3-sessies { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; } .r3-sessie { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; } .r3-sessie .note { display: block; margin: 0; } .r3-stappen { padding-left: 18px; display: grid; gap: 6px; } .r3-geheim { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; } .r3-geheim code, .r3-herstel code { font-size: .95em; letter-spacing: .04em; word-break: break-all; } .r3-herstel { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin: 8px 0; } .r3-verplicht { color: var(--accent-text); font-weight: 600; } .r3-weg summary { cursor: pointer; color: var(--danger); margin-top: 10px; } #tweestapRij { display: grid; gap: 8px; margin: 8px 0; } .r3-verplichtvak { text-align: left; margin: 8px 0; } /* Bouwkit R5: relaties en producten. */ .rel-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } #relDlg.breed .rel-raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } .rel-lijst { max-height: 60vh; overflow: auto; } .rel-rij { cursor: pointer; } .rel-rij:hover, .rel-rij.on { background: var(--card); } .rel-rij.rel-uit { opacity: .55; } .rel-kaart { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; } .rel-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .rel-velden label, .rel-kaart > label { display: grid; gap: 3px; } .rel-rollen { display: flex; flex-wrap: wrap; gap: 4px 12px; } .rel-bronnen { margin: 0; padding-left: 18px; font-size: .9em; } .rel-zoek input[type=search] { min-width: 0; } /* Bouwkit R6: borden naar het bedrijf. */ .ovh-tabel { overflow-x: auto; margin: 6px 0; } .ovh-tabel td { vertical-align: top; padding: 3px 6px; } .ovh-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; } /* Bouwkit R7: de demowereld. */ .demo-vak { max-width: 760px; margin: 0 auto; padding: 32px 16px; display: grid; gap: 14px; } .demo-mensen { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; } .demo-mens { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: inherit; font: inherit; cursor: pointer; } .demo-mens:hover { border-color: var(--accent); } .demo-mens small { display: block; color: var(--muted); } .demo-av { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 600; flex: none; } .demo-wereld-balk { background: #0F4C81; color: #fff; text-align: center; font-size: 13px; padding: 4px 12px; } .demo-wereld-balk a { color: #fff; text-decoration: underline; } /* Bouwkit R8: de bouwbegeleider. */ .gids-balk { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 8px 0 12px; } .gids-balk li { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; font-size: .85em; color: var(--muted); } .gids-balk li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--card); font-size: .85em; } .gids-balk li.klaar { color: inherit; border-color: var(--accent); } .gids-balk li.klaar span { background: var(--accent); color: #fff; } .gids-niveaus { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .gids-niveau { display: grid; gap: 4px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: inherit; font: inherit; cursor: pointer; } .gids-niveau:hover { border-color: var(--accent); } .gids-niveau small { color: var(--muted); } .gids-gesprek { display: grid; gap: 8px; max-height: 50vh; overflow: auto; padding: 4px 0; } .gids-bel { display: flex; gap: 8px; align-items: flex-start; max-width: 85%; } .gids-bel p { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--card); white-space: pre-wrap; } .gids-bel.mens { justify-self: end; } .gids-bel.mens p { background: var(--accent); color: #fff; } .gids-ai { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; } .gids-opties { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; } .gids-typ input { min-width: 0; flex: 1 1 auto; } .gids-voorstel { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border: 1px solid var(--accent); border-radius: 12px; } .gids-afd { margin: 0; padding-left: 18px; display: grid; gap: 4px; } .gids-afd small { display: block; color: var(--muted); }