:root{ --paper:#F7F5F1; --card:#fff; --ink:#20262B; --muted:#6B7680; --line:#E1E4E7; --accent:#1C6488; --accent-dark:#144D69; --amber:#E9A02C; --green:#2C7A5B; --red:#B4402C; --radius:5px; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --serif:'Fraunces',Georgia,serif; } *{box-sizing:border-box} /* 'clip' en niet 'hidden'. Beide houden horizontaal scrollen tegen, maar 'hidden' maakt van een scrollcontainer, en dan heeft position:sticky niets meer om aan vast te plakken: de zijbalk scrolde mee weg. 'clip' snijdt af zonder die container te maken, dus de zijbalk blijft staan. Niet terugzetten naar hidden. */ body{overflow-x:clip} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55} h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0 0 .4em;line-height:1.2} h1{font-size:1.7rem} h2{font-size:1.28rem} h3{font-size:1.05rem} a{color:var(--accent-dark)} button,input,select,textarea{font-family:inherit;font-size:inherit} input,select,textarea{padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius); background:#fff;color:var(--ink);width:100%} input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px} /* Een berekend veld ziet er ook berekend uit: je kunt er niet in typen en dat hoort te zien te zijn voor je het probeert. */ input[readonly]{background:var(--paper);color:var(--muted);cursor:default} /* Een waarde die vastligt in de wet, niet in de instellingen. Bewust géén invoerveld: een uitgegrijsd vakje nodigt nog altijd uit om te proberen, een regel tekst niet. */ .vast{padding:9px 11px;border:1px dashed var(--line);border-radius:var(--radius); background:var(--paper);color:var(--ink);font-weight:500} textarea{resize:vertical;min-height:90px;line-height:1.55} label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.02em;margin-bottom:5px;color:var(--muted)} .btn{background:var(--accent);color:#fff;border:0;border-radius:var(--radius);padding:9px 18px; cursor:pointer;font-weight:500;white-space:nowrap} .btn:hover{background:var(--accent-dark)} .btn.ghost{background:0;border:1px solid var(--line);color:var(--ink)} .btn.ghost:hover{border-color:var(--accent);color:var(--accent-dark);background:0} .btn.danger{background:0;border:1px solid var(--line);color:var(--red)} .btn.danger:hover{background:var(--red);color:#fff;border-color:var(--red)} .btn.sm{padding:5px 12px;font-size:.85rem} /* ---- login ---- */ .login{max-width:400px;margin:9vh auto;padding:0 20px} .login .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:34px} .login img{height:64px;margin-bottom:22px} .login .field{margin-bottom:16px} /* ---- shell ---- */ .shell{display:grid;grid-template-columns:216px 1fr;min-height:100vh} /* align-self:start is nodig omdat de zijbalk een rasteronderdeel is: zonder dat wordt ze uitgerekt tot de volle hoogte van de rij en heeft ze geen ruimte om binnen haar vak te blijven staan tijdens het scrollen. */ aside{background:#152833;color:#B9C7D0;padding:22px 0;position:sticky;top:0; align-self:start;height:100vh;overflow-y:auto;overscroll-behavior:contain} aside .logo{display:flex;align-items:center;gap:10px;padding:0 20px 22px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:16px} aside .logo img{height:34px} aside .logo b{font-family:var(--serif);font-size:1.05rem;color:#fff;font-weight:500} aside nav a{display:flex;align-items:center;gap:10px;padding:10px 20px;color:#B9C7D0; text-decoration:none;font-size:.92rem;border-left:3px solid transparent} aside nav a:hover{background:rgba(255,255,255,.05);color:#fff} aside nav a.on{background:rgba(255,255,255,.09);color:#fff;border-left-color:var(--amber)} aside .foot{padding:18px 20px;margin-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem} aside .foot a{color:#8FA3B0;display:block;margin-bottom:7px;text-decoration:none} aside .foot a:hover{color:#fff} main{padding:28px 32px 70px;max-width:1180px} /* Overzichten met veel kolommen krijgen de volle schermbreedte; de schermen waar tekst bewerkt wordt houden hun leesbare regellengte. */ main.breed{max-width:none} .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap} .page-head p{color:var(--muted);margin:4px 0 0;font-size:.92rem;max-width:62ch} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:18px} .card h2{margin-bottom:14px} .maandkop{margin:0 0 14px;font-size:1rem;text-transform:capitalize} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .spacer{flex:1} .muted{color:var(--muted)} .small{font-size:.86rem} /* ---- tegels ---- */ .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px} .tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px} .tile .n{font-family:var(--serif);font-size:2rem;line-height:1;display:block} .tile .l{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:7px;display:block} .tile.hot .n{color:var(--amber)} /* ---- tabel ---- */ table{width:100%;border-collapse:collapse} th{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted); text-align:left;padding:0 12px 9px;font-weight:600} td{padding:11px 12px;border-top:1px solid var(--line);vertical-align:top} tr.click:hover td{background:#F4F7F9;cursor:pointer} .pill{display:inline-block;padding:2px 10px;border-radius:100px;font-size:.75rem;font-weight:600;white-space:nowrap} .pill.nieuw{background:#FDF0D8;color:#8A5D08} .pill.behandeling{background:#E4EEF5;color:#1C5578} .pill.voorstel{background:#E9E4F5;color:#4B3C82} .pill.bevestigd{background:#DDF0E6;color:#1E6344} .pill.verblijf{background:#DFF1F5;color:#155E6B} .pill.afgesloten{background:#EDEFF1;color:#5B646B} .pill.geweigerd,.pill.geannuleerd{background:#F7E3DF;color:#95331F} /* Soort klant: een prospect is nog geen klant, dus ook geen groen. */ .pill.klant{background:#DDF0E6;color:#1E6344} .pill.prospect{background:#EDEFF1;color:#5B646B} /* ---- pijplijn ---- */ .pipe{display:grid;gap:8px} .pipe .step{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line); border-radius:var(--radius);background:#FBFCFC} .pipe .step.done{background:#F1F8F4;border-color:#CDE6D9} .pipe .step input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;accent-color:var(--green);cursor:pointer} .pipe .step .t{flex:1;font-weight:500} .pipe .step.done .t{color:var(--green)} .pipe .step input[type=date]{width:auto;padding:5px 8px;font-size:.85rem} /* ---- kalender ---- */ .months{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .m h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted); font-family:var(--sans);text-align:center;margin-bottom:8px} .days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .dow{font-size:.62rem;text-align:center;color:var(--muted);padding-bottom:4px} .d{aspect-ratio:1;display:grid;place-items:center;font-size:.76rem;border-radius:3px; background:#EEF4F0;color:#2C5545;cursor:pointer;border:0;padding:0} .d.busy{background:#F2E0DC;color:#9A5546} .d.owner{background:#E7E2F2;color:#4B3C82} /* In optie: er is een voorstel verstuurd, maar nog niet getekend. De arcering maakt het verschil met een echte boeking ook zichtbaar zonder op kleur te moeten vertrouwen — drie pastelkleuren naast elkaar zijn voor wie kleurenblind is nauwelijks uit elkaar te houden. */ .d.optie{color:#6E5106;background-color:#FBE3A6; background-image:repeating-linear-gradient(-45deg, rgba(110,81,6,.20) 0 2px, transparent 2px 5px)} .d.past{background:#F4F5F6;color:#868E95;cursor:default} /* Verstreken dagen die geboekt of geblokkeerd waren: dezelfde kleur, lichter. De geschiedenis blijft zo leesbaar zonder de aandacht weg te trekken van wat nog moet gebeuren. Staat na .d.past, want die is minder specifiek. De tekstkleuren halen alle drie minstens 3:1 tegen hun eigen achtergrond; een dagnummer dat je niet kunt lezen heeft geen nut. */ .d.past.busy{background:#FAF1EE;color:#A17C70;cursor:default} .d.past.owner{background:#F5F2FA;color:#7E739C;cursor:default} .d.past.optie{color:#8A6A18;background-color:#FBEDCB;cursor:default; background-image:repeating-linear-gradient(-45deg, rgba(138,106,24,.14) 0 2px, transparent 2px 5px)} /* Schoolvakantie: een dun balkje bovenaan het dagvakje. Bewust geen achtergrond — die is al bezet door de boekingsstatus, en een vakantie zegt iets anders. Een streepje bovenaan botst met niets: de vluchtprijzen staan onderaan, het dagnummer in het midden. De kleur haalt 3,7:1 tegen elke dagkleur, dus ze is ook zichtbaar wanneer het vakje al gekleurd is. */ /* Eén balkje per schoolkalender, onder elkaar bovenaan het dagvakje. Drie balkjes betekent dat Vlaanderen, Wallonië én Nederland tegelijk vrij zijn — dat is de week waarin je niet moet onderprijzen, en dat wil je kunnen zien zonder te tellen. De kleuren staan los van de boekingskleuren eronder: die zijn pastel, deze zijn verzadigd, zodat een balkje niet te verwarren is met een status. */ .d .vak{position:absolute;left:3px;right:3px;top:0;display:grid;gap:1px;pointer-events:none} .d .vak i{height:3px;border-radius:0 0 2px 2px;display:block} .d .vak i.vl{background:#1C6488} /* Vlaanderen — blauw */ .d .vak i.wa{background:#B4402C} /* Wallonië — rood */ .d .vak i.nl{background:#E9A02C} /* Nederland — amber */ .d .vak i.onbekend{background:#6B7680} /* oude of eigen aanduiding */ .d.past .vak{opacity:.45} .legend i.sw-vak{background:#F4F5F6} .legend i.sw-vak.vl{box-shadow:inset 0 3px 0 #1C6488} .legend i.sw-vak.wa{box-shadow:inset 0 3px 0 #B4402C} .legend i.sw-vak.nl{box-shadow:inset 0 3px 0 #E9A02C} /* ---- de vertrekdag ---- Een boeking van 9 tot 19 september bezet de nachten van 9 tot en met 18; op de 19e vertrekt de gast 's ochtends. Die dag volledig inkleuren zou onwaar zijn — er kan die middag al iemand anders aankomen — maar ze wit laten leest als "de boeking eindigt een dag te vroeg". Daarom een halve dag: de driehoek linksboven is de ochtend van het vertrek. Het witte haarlijntje op de diagonaal houdt de wissel zichtbaar wanneer de vertrekkende en de aankomende periode dezelfde kleur hebben. */ .d.vertrek::after{content:'';position:absolute;inset:0;border-radius:3px;pointer-events:none; z-index:0; background:linear-gradient(135deg, var(--wig) 0 calc(50% - .5px), rgba(255,255,255,.9) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px))} .d.vertrek-busy{--wig:#F2E0DC} .d.vertrek-owner{--wig:#E7E2F2} .d.vertrek-optie{--wig:#FBE3A6} .d.past.vertrek-busy{--wig:#FAF1EE} .d.past.vertrek-owner{--wig:#F5F2FA} .d.past.vertrek-optie{--wig:#FBEDCB} /* De wig hoort onder het dagnummer, de vakantiebalkjes en de vluchtprijzen. */ .d .nr{position:relative;z-index:2} .d .vak{z-index:2} .d .vl{z-index:2} .legend i.sw-vertrek{background:#EEF4F0; background-image:linear-gradient(135deg,#F2E0DC 0 calc(50% - .5px), rgba(255,255,255,.9) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px))} .d.sel{outline:2px solid var(--accent);outline-offset:-2px} .m .who{display:grid;gap:3px;margin-top:6px} .m .who span{font-size:.7rem;line-height:1.4;padding:2px 6px;border-radius:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .m .who .b{background:#F2E0DC;color:#8B4B3B} .m .who .o{background:#E7E2F2;color:#4B3C82} .m .who .v{background-color:#FBE3A6;color:#6E5106; background-image:repeating-linear-gradient(-45deg, rgba(110,81,6,.20) 0 2px, transparent 2px 5px)} .m .who .b.voorbij{background:#FAF1EE;color:#A17C70} .m .who .o.voorbij{background:#F5F2FA;color:#7E739C} .m .who .v.voorbij{background-color:#FBEDCB;color:#8A6A18; background-image:repeating-linear-gradient(-45deg, rgba(138,106,24,.14) 0 2px, transparent 2px 5px)} .m .who [data-bk]{cursor:pointer} /* Per soort apart, en enkel de kleur: de shorthand background zou de arcering van een periode in optie wegvegen zodra je er met de muis over gaat. */ .m .who .b[data-bk]:hover{background-color:#E8CEC7} .m .who .v[data-bk]:hover{background-color:#F2D68C} .m .who .b.voorbij[data-bk]:hover{background-color:#F2E3DE} .m .who .v.voorbij[data-bk]:hover{background-color:#F4E2B4} /* ---- vluchtprijzen in de kalender ---- Het bedrag staat er klein maar leesbaar bij, met een vliegtuigje ervoor voor de richting: opstijgend voor de heenvlucht, landend voor de terugvlucht. Het dagvakje krijgt onderaan wat lucht, zodat het dagnummer erboven blijft staan in plaats van erdoorheen. Wie meer wil weten wijst het bedrag aan. */ .d{position:relative;padding-bottom:19px;min-height:54px} .d .nr{line-height:1} /* De twee bedragen staan onder elkaar, niet naast elkaar: een vlucht kan €295 kosten en twee zulke bedragen naast elkaar passen niet in een dagvakje. */ .d .vl{position:absolute;left:0;right:0;bottom:2px;display:flex;flex-direction:column; align-items:center;pointer-events:none;line-height:1.25} .d .vl i{font-style:normal;font-size:.58rem;font-weight:600;letter-spacing:-.01em; pointer-events:auto;cursor:help;white-space:nowrap;border-radius:2px;padding:0 2px} /* Het vliegtuigje draait mee, het bedrag niet — vandaar de draaiing op ::before. */ .d .vl i::before{content:'✈';display:inline-block;font-size:.5rem;margin-right:1px;opacity:.8} .d .vl i.op{color:#155476} .d .vl i.op::before{transform:rotate(-35deg)} .d .vl i.neer{color:#6E4A06} .d .vl i.neer::before{transform:rotate(35deg) scaleX(-1)} .d .vl i:hover{background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(0,0,0,.08)} .vlegend i{font-style:normal;width:auto;background:0;margin-right:5px} .vlegend i.op{color:#155476;display:inline-block;transform:rotate(-35deg)} .vlegend i.neer{color:#6E4A06;display:inline-block;transform:rotate(35deg) scaleX(-1)} /* De zwevende tooltip hangt aan en staat vast tegenover het venster. Dat is bewust: als tooltip binnen het dagvakje viel ze half achter de buurdagen, en html{overflow-x:hidden} sneed ze aan de rand af. Nu kan niets ze nog afdekken. */ .zwever{position:fixed;z-index:9999;pointer-events:none; background:var(--ink);color:#fff;font-size:.74rem;line-height:1.35;white-space:nowrap; padding:6px 10px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(0,0,0,.22); opacity:0;transition:opacity .1s;font-weight:500;max-width:min(92vw,420px); overflow:hidden;text-overflow:ellipsis} .zwever.aan{opacity:1} .vlbalk{margin-top:14px;border-top:1px solid var(--line);padding-top:12px} .legend{display:flex;gap:18px;font-size:.83rem;color:var(--muted);margin-top:16px;flex-wrap:wrap} .legend i.sw-optie{background-color:#FBE3A6; background-image:repeating-linear-gradient(-45deg, rgba(110,81,6,.30) 0 2px, transparent 2px 5px)} .legend i.sw-optie-verl{background-color:#FBEDCB; background-image:repeating-linear-gradient(-45deg, rgba(138,106,24,.20) 0 2px, transparent 2px 5px)} .legend i{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px} /* ---- foto's ---- */ .photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px} .photo{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff} .photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .photo .meta{padding:9px 10px} .photo select,.photo input{font-size:.8rem;padding:5px 7px;margin-bottom:5px} .drop{border:2px dashed var(--line);border-radius:var(--radius);padding:30px;text-align:center; color:var(--muted);margin-bottom:18px;background:#FBFCFC} .drop.over{border-color:var(--accent);background:#EEF5F9;color:var(--accent-dark)} .toast{position:fixed;bottom:22px;right:22px;background:var(--ink);color:#fff;padding:13px 20px; border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:99;font-size:.9rem} .toast.err{background:var(--red)} /* ---- stappen in een venster ---- */ .stappen{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:2px} /* Deze regels staan bewust onder .stappen: de kale klasse .stap trof ook de tabelcellen van het boekingsoverzicht en zette die op display:flex. */ .stappen .stap{background:0;border:0;border-bottom:2px solid transparent;padding:8px 4px 10px;margin-right:14px; cursor:pointer;color:var(--muted);font-size:.92rem;display:flex;align-items:center;gap:8px} .stappen .stap b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%; background:var(--line);color:var(--ink);font-size:.78rem;font-weight:600} .stappen .stap.on{color:var(--ink);border-bottom-color:var(--accent)} .stappen .stap.on b{background:var(--accent);color:#fff} .stappen .stap:hover{color:var(--ink)} /* Voetbalk van een venster. Rechtsonder klikt men om te sluiten — daar hoort dus 'Sluiten' en nooit een knop die iets wist. Het wissen staat links, apart. */ .voetbalk{display:flex;gap:14px;align-items:center;flex-wrap:wrap; margin-top:24px;border-top:1px solid var(--line);padding-top:18px} .voetbalk .btn.danger{order:-1} .modal{position:fixed;inset:0;background:rgba(20,28,34,.55);display:grid;place-items:center;z-index:80;padding:20px} .modal .box{background:#fff;border-radius:var(--radius);max-width:760px;width:100%;max-height:88vh; overflow:auto;padding:28px} dialog::backdrop{background:rgba(0,0,0,.4)} @media(max-width:1000px){ .shell{grid-template-columns:1fr} aside{position:static;height:auto} aside nav{display:flex;flex-wrap:wrap} .tiles{grid-template-columns:repeat(2,1fr)} .months{grid-template-columns:repeat(2,1fr)} .grid2,.grid3{grid-template-columns:1fr} main{padding:22px 18px 60px} /* Onder 16px zoomt iOS Safari in zodra een veld focus krijgt. */ input,select,textarea{font-size:16px} } /* ---- financiën ---- */ .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} td.num,th.num{text-align:right} .neg{color:var(--red)} .tile .n.neg{color:var(--red)} table.fin td{padding:9px 12px} table.fin tr.tot td{border-top:2px solid var(--line);background:#FBFCFC} .seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .seg button{background:#fff;border:0;border-left:1px solid var(--line);padding:6px 14px; cursor:pointer;color:var(--muted);font-size:.85rem} .seg button:first-child{border-left:0} .seg button.on{background:var(--accent);color:#fff} .regel{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start; border-top:1px solid var(--line);padding-top:14px;margin-top:14px} .regel .fout{color:var(--red)} /* ---- stapkolommen in het boekingsoverzicht ---- */ /* De naam, de periode en het bedrag blijven op één regel; de browser geeft die kolommen dan vanzelf de ruimte die ze nodig hebben. Geen vaste breedtes: die vochten met de automatische tabelindeling. */ table.boekingen td.naam, table.boekingen td.periode, table.boekingen td.bedrag{white-space:nowrap} table.boekingen th.bedrag, table.boekingen td.bedrag{text-align:right} /* Schoonmaak en waarborg zijn geen inkomen: de eerste gaat rechtstreeks naar de kuisdienst, de tweede wordt terugbetaald. Ze staan daarom gedempt naast de huur, zodat één blik volstaat om te zien wat er werkelijk van ons is. */ table.boekingen td.derden{color:var(--muted)} /* De acht stapkolommen zijn maar een vinkje breed. De koppen staan er klein en zonder hoofdletters boven, anders eisen ze meer breedte dan hun inhoud. */ table.boekingen th.stapkolom, table.boekingen td.stapkolom{text-align:center;padding-left:6px;padding-right:6px} table.boekingen th.stapkolom{font-size:.62rem;letter-spacing:.02em;text-transform:none; line-height:1.2;font-weight:600} table.boekingen td.stapkolom{font-size:1rem;cursor:help} table.boekingen td.stapkolom.ja{color:var(--green);font-weight:700} table.boekingen td.stapkolom.nee{color:#C9D0D5} /* Huurder tekende, verhuurder moet nog nalezen en medeondertekenen — tussenin 'ja' en 'nee', dus een eigen kleur zodat dit nog te doen werk opvalt. */ table.boekingen td.stapkolom.deels{color:var(--amber);font-weight:700} /* Past de tabel echt niet, dan schuift ze horizontaal in plaats van de kolommen te knijpen. Geen min-width en geen vastgezette kolom: sticky werkt niet samen met border-collapse en zette de cellen over elkaar. */ .tabelvak{overflow-x:auto} /* ---- klant zoeken en kiezen ---- */ .treffers{margin-top:4px} .treffers button{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line); border-bottom:0;padding:9px 12px;cursor:pointer;font-family:var(--sans)} .treffers button:last-child{border-bottom:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius)} .treffers button:first-child{border-radius:var(--radius) var(--radius) 0 0} .treffers button:hover{background:#F1F6F9;border-color:var(--accent)} .treffers button strong{display:block;font-size:.92rem} .treffers button span{display:block;font-size:.8rem;color:var(--muted)} .gekozen{display:flex;align-items:center;gap:14px;background:#EFF5F8;border:1px solid #CFE0EA; border-radius:var(--radius);padding:11px 14px;margin-top:4px} .gekozen div{flex:1} .gekozen strong{display:block} .gekozen span{display:block} /* ---- agendanavigatie ---- */ .agenda-nav{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap} .agenda-nav strong{font-family:var(--serif);font-size:1.05rem;font-weight:500; text-transform:capitalize;padding:0 8px} /* ---- cashflowgrafiek ---- */ .viz{position:relative;margin-top:10px} .viz-kop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px} .viz-legende{display:flex;gap:18px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)} .viz-legende span{display:flex;align-items:center;gap:7px} .viz-legende i{width:12px;height:12px;border-radius:3px;display:inline-block} .viz-legende i.lijn{height:3px;border-radius:2px} .viz-svg{width:100%;height:auto;display:block;background:#fff;border-radius:var(--radius)} /* Naam ín de zone. Tekst binnen een gekleurd vlak is de enige plek waar letters wél op de datakleur mogen staan; de inkt is per zone gekozen op leesbaarheid. */ /* De band is een prognose, geen meting. Ze krijgt daarom een gestreepte rand en een doorschijnende vulling: dat leest als een schatting, waar een volle lijn als een feit leest. */ .viz-legende i.band{border-radius:2px;opacity:.55; background-image:repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.85) 3px 5px)} .viz-zonenaam{font-size:12px;font-weight:600;letter-spacing:.02em;pointer-events:none} .viz-as{font-family:var(--sans);font-size:10px;fill:var(--muted)} .viz-as.nu{fill:var(--accent);font-weight:600} .viz-jaar{font-family:var(--sans);font-size:10px;fill:var(--ink);font-weight:600} .viz-hit{cursor:crosshair} .viz-hit:hover{fill:rgba(28,100,136,.05)} .viz-hit:focus{outline:none;fill:rgba(28,100,136,.09)} .viz-guide{stroke:#9AA4AC;stroke-width:1;stroke-dasharray:2 3;opacity:0} .viz-guide.aan{opacity:.85} .viz-staaf.aan{stroke:var(--ink);stroke-width:2;paint-order:stroke} .viz-staaf-overleg.aan{stroke:var(--ink);stroke-width:1.5;paint-order:stroke} /* De maandcijfers staan onder de grafiek, niet erover: een strook met een vaste hoogte, zodat de bladspiegel niet springt als je van maand naar maand gaat. */ .viz-uitlees{display:flex;align-items:center;flex-wrap:wrap;gap:8px 26px;min-height:54px; margin-top:10px;padding:8px 13px;border:1px solid var(--line);border-radius:var(--radius); background:#F7F9FA} .viz-uitlees .viz-hint{font-size:.82rem;color:var(--muted)} .viz-item{display:flex;flex-direction:column;gap:1px;min-width:78px} .viz-item .v{font-size:.92rem;font-weight:600;font-variant-numeric:tabular-nums} .viz-item .l{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .viz-item.maand{min-width:170px} .viz-item.maand .v{font-family:var(--serif);font-weight:500;font-size:1rem;text-transform:capitalize} .viz-item.maand .l{text-transform:none;letter-spacing:0;font-size:.74rem} .viz-item.uit .v{font-size:1rem} .viz-item.neg .v{color:var(--red)} .tile .n.neg{color:var(--red)} /* ---- bijlagen bij een aanvraag ---- */ .bijlagen{display:flex;flex-wrap:wrap;gap:12px} .bijlage{display:block;width:132px;text-decoration:none;color:var(--ink)} .bijlage img,.bijlage .best{display:block;width:132px;height:100px;object-fit:cover; border:1px solid var(--line);border-radius:var(--radius);background:#fff} .bijlage .best{display:flex;align-items:center;justify-content:center; font-size:.8rem;font-weight:600;color:var(--muted);letter-spacing:.08em} .bijlage:hover img,.bijlage:hover .best{border-color:var(--accent)} .bijlage .naam{display:block;font-size:.74rem;color:var(--muted);margin-top:4px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---- contractsjablonen ---- */ .velden{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:14px} .velden h4{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px} .veldknop{display:block;width:100%;text-align:left;background:#F4F7F9;border:1px solid var(--line); border-radius:3px;padding:4px 8px;margin-bottom:4px;font-family:ui-monospace,monospace; font-size:.76rem;color:var(--accent-dark);cursor:pointer} .veldknop:hover{background:var(--accent);color:#fff;border-color:var(--accent)} .sjabloon-art{border-left:3px solid var(--accent)} .sjabloon-par{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px; padding-left:14px;border-left:2px solid var(--line)} .sjabloon-par select{width:150px;flex:0 0 auto} .sjabloon-par input[data-pf="label"]{width:190px;flex:0 0 auto} .sjabloon-par textarea{flex:1} .sjabloon-par-es{margin-top:-4px;margin-left:158px} .sjabloon-par-es .es-tag{flex:0 0 auto;width:24px;text-align:center;font-size:.7rem; font-weight:700;color:var(--accent);align-self:center} .sjabloon-par-es input[data-pf="labelEs"]{width:190px;flex:0 0 auto;font-style:italic} label.klein{display:flex;align-items:center;gap:6px;font-size:.8rem;text-transform:none; color:var(--ink);margin:0;white-space:nowrap} label.klein input{width:auto} /* ---- de rekenregel onder huur en schoonmaak ---- Het te betalen bedrag wordt getoond, niet gevraagd: zo staat er nergens een veld "totaal" waarvan onduidelijk is of de waarborg erin zit. */ .som{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; margin:2px 0 14px;padding:10px 12px;border-radius:8px; background:var(--paper);border:1px solid var(--line)} .som strong{font-size:1.15rem} .som>span:first-child{font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:#5F6A73} /* De kolom kapitaalaflossing in de financiële tabel. Ze staat in het groen van de vermogensgrafiek: geen kost, maar opbouw. */ table.fin th.vermogen, table.fin td.vermogen{color:#1F6E4E} table.fin td.vermogen{font-variant-numeric:tabular-nums} /* ---- een venster met tabbladen ---- Vaste hoogte en vaste breedte, want de tabbladen verschillen sterk in lengte: zonder dit sprong het venster bij elke tabwissel van formaat en verschoof alles onder je muis. De kop en de voetbalk staan stil, enkel het middenstuk schuift. Hoogte in dvh, niet vh: op een telefoon telt vh de adresbalk mee, waardoor de voetbalk onder de rand van het scherm verdween. */ .modal.tabbladen .box{ max-width:1000px; height:min(880px, 88dvh); max-height:88dvh; padding:0; display:flex; flex-direction:column; overflow:hidden; } .modal.tabbladen .mkop{flex:0 0 auto;padding:24px 28px 0} .modal.tabbladen .mvakken{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 28px; overscroll-behavior:contain} .modal.tabbladen .voetbalk{flex:0 0 auto;margin:0;padding:16px 28px; border-top:1px solid var(--line);background:#fff} .modal.tabbladen .mvak.on{padding-top:18px;padding-bottom:8px} @supports not (height: 1dvh){ .modal.tabbladen .box{height:min(880px, 88vh)} } /* ---- tabbladen in het boekingsvenster ---- Eigen namen (mtab, niet tab of stap): in dit project werken meerdere handen aan dezelfde stylesheet, en een kale klassenaam als .stap bleek eerder al de tabelcellen van het boekingsoverzicht te slopen. */ .mtabs{display:flex;gap:2px;flex-wrap:wrap;margin:18px 0 0; border-bottom:1px solid var(--line)} .mtab{background:0;border:0;border-bottom:2px solid transparent;margin-bottom:-1px; padding:9px 14px;cursor:pointer;color:var(--muted);font:inherit;font-size:.92rem; border-radius:4px 4px 0 0} .mtab:hover{color:var(--ink);background:var(--paper)} .mtab.on{color:var(--ink);border-bottom-color:var(--accent);font-weight:600} .mtab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .mvak{display:none} .mvak.on{display:block;padding-top:18px} /* ---- opties en voorzieningen per boeking ---- */ .optieregel{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap; padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius); margin-bottom:8px;background:#fff} .optieregel.aan{border-color:var(--accent);background:#F7FAFC} .optievink{display:flex;gap:10px;align-items:flex-start;flex:1;min-width:210px; margin:0 0 3px;text-transform:none;color:var(--ink);font-weight:400;font-size:.95rem; letter-spacing:0;cursor:pointer} .optievink input{width:auto;margin-top:3px} .postlijst{list-style:none;margin:0;padding:0} .postlijst li{padding:6px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--ink)} .postlijst li:last-child{border-bottom:0} /* ---- het kalendertje in het boekingsvenster ---- Klein gehouden: het dient om in één blik te zien waar dit verblijf ligt en wat er vlak voor en na komt, niet om erin te werken. Klikken doet er dus niets. */ .minical{margin:0 0 4px} /* Twee gelijke helften, geen flex-wrap: met wrap kreeg een overblijvende maand de volle breedte en werd ze twee keer zo groot als de andere. */ .mc-maanden{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:560px){ .mc-maanden{grid-template-columns:1fr} } .mc-m{min-width:0} .mc-m h4{font-family:var(--sans);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em; color:var(--muted);text-align:center;margin:0 0 5px;font-weight:600} .mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .mc-dow{font-size:.58rem;text-align:center;color:var(--muted);padding-bottom:2px} .mc-d{aspect-ratio:1;display:grid;place-items:center;font-size:.66rem;border-radius:2px; background:#EEF4F0;color:#2C5545} .mc-d.vrij{background:#EEF4F0;color:#2C5545} .mc-d.dit{background:var(--accent);color:#fff;font-weight:700} .mc-d.ander{background:#F2E0DC;color:#8B4B3B} .mc-d.optie{background-color:#FBE3A6;color:#6E5106; background-image:repeating-linear-gradient(-45deg, rgba(110,81,6,.18) 0 2px, transparent 2px 5px)} /* Dezelfde halve dag als in de grote agenda: de driehoek linksboven is de ochtend waarop de vorige gast vertrekt. Zo hoort de vertrekdatum zichtbaar bij de boeking zonder te doen alsof het appartement die hele dag bezet is. */ .mc-d{position:relative;z-index:0} .mc-d.vertrek::after{content:'';position:absolute;inset:0;border-radius:2px;pointer-events:none; z-index:-1; background:linear-gradient(135deg, var(--wig) 0 calc(50% - .5px), rgba(255,255,255,.9) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px))} .mc-d.vertrek-dit{--wig:var(--accent)} .mc-d.vertrek-ander{--wig:#F2E0DC} .mc-d.vertrek-optie{--wig:#FBE3A6} /* De twee buren eronder: wie er vertrekt vlak voor, wie er komt vlak na, en hoeveel dagen ertussen zitten. Dat laatste is de vraag achter dit kalendertje. */ .mc-buren{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px} .mc-buren li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:.82rem; padding:7px 10px;border-radius:var(--radius);background:var(--paper); border-left:3px solid var(--line)} .mc-buren li.krap{border-left-color:#B4402C;background:#FBF1EF} .mc-buren li.let-op{border-left-color:#8A5F0B;background:#FCF6EA} .mc-kant{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted); font-weight:700;min-width:30px} .mc-gat{margin-left:auto;font-size:.78rem;color:var(--muted)} .mc-buren li.krap .mc-gat{color:#B4402C;font-weight:600} .mc-buren li.let-op .mc-gat{color:#8A5F0B;font-weight:600} .mc-legende{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:.72rem;color:var(--muted)} .mc-legende i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:5px; vertical-align:-1px} .mc-legende i.dit{background:var(--accent)} .mc-legende i.ander{background:#F2E0DC} .mc-legende i.optie{background-color:#FBE3A6; background-image:repeating-linear-gradient(-45deg, rgba(110,81,6,.3) 0 2px, transparent 2px 5px)} .mc-legende i.vrij{background:#EEF4F0} .mc-legende i.vertrek{background:#EEF4F0; background-image:linear-gradient(135deg,var(--accent) 0 calc(50% - .5px), rgba(255,255,255,.9) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px))} /* ---- de pagina Templates ---- */ .tlijst{list-style:none;margin:0;padding:0;display:grid;gap:6px} .tlijst button{display:block;width:100%;text-align:left;background:0;border:1px solid var(--line); border-radius:var(--radius);padding:10px 12px;cursor:pointer;font:inherit;color:var(--ink)} .tlijst button:hover{background:var(--paper)} .tlijst button.on{border-color:var(--accent);background:#F7FAFC} .tlijst button strong{display:block;font-size:.95rem} .tlijst button span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px} .tlijst button .tmerk{display:inline-block;margin-top:4px;font-size:.7rem;letter-spacing:.04em; text-transform:uppercase;color:#155476;background:#E7F1F7;border-radius:3px;padding:1px 6px} code.ph{background:var(--paper);border:1px solid var(--line);border-radius:3px; padding:1px 6px;font-size:.78rem;color:#155476;white-space:nowrap} /* Het voorbeeld toont de mail zoals ze aankomt, met een randje eromheen zodat het duidelijk is dat je naar een voorbeeld kijkt en niet naar het invulveld. */ .voorbeeldmail{margin-top:16px;border:1px solid var(--line);border-radius:var(--radius); padding:16px;background:var(--paper)} .vm-onderwerp{font-size:.9rem;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)} .vm-tekst{white-space:pre-wrap;font-family:inherit;font-size:.9rem;margin:0;line-height:1.55} /* ---- de velden achter de plaatshouders ---- Naam en plaatshouder links, de waarde rechts: zo lees je in één kolom af welke {{...}} bij welk veld hoort. */ .veldrij{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:start; padding:10px 0;border-top:1px solid var(--line)} .veldrij:first-of-type{border-top:0} .veldnaam{display:flex;flex-direction:column;gap:4px;padding-top:8px} .veldnaam label{text-transform:none;font-size:.9rem;color:var(--ink);font-weight:600;letter-spacing:0} .veldwaarde textarea{min-height:70px} @media(max-width:760px){ .veldrij{grid-template-columns:1fr;gap:6px} .veldnaam{padding-top:0;flex-direction:row;align-items:center;flex-wrap:wrap} }