/* ============================================================ Huisstijl Villa Oldenhoff (villaoldenhoff.nl) Afgelezen van de site: petrol #004B65 als inkt én primair vlak, duifblauw #91BFCD als accent, koel bijna-wit #F6FAFD als papier, witte kaarten, rechte hoeken en licht-gezette, ruim gespatieerde koppen. De site gebruikt nergens een schreefletter. Twee bewuste afwijkingen van de site, omdat dit een werkscherm is en geen etalage: 1. Primaire knop = petrol met wit, niet duifblauw met wit. Dat laatste haalt ~1.9:1 contrast; onleesbaar voor een balie die er de hele dag op kijkt. Duifblauw is hier accent/actief-vlak. 2. Statuskleuren (aankomst/vertrek/alarm) blijven semantisch onderscheidend. Alles petrol maken leest mooi en werkt niet. ============================================================ */ :root { --bg: #f6fafd; --surface: #ffffff; --surface-2: #eaf1f6; --ink: #004b65; --ink-soft: #5e7f8d; --line: #d6e3ea; --accent: #004b65; --accent-ink: #ffffff; --accent-soft: #91bfcd; --gold: #a17a4b; --arrival: #1f7a6a; /* Eigen token voor "bron is vers", bewust NIET --accent hergebruikt. Het lampje stond op --accent en verkleurde daardoor stilzwijgend mee met de huisstijl-omzetting (de64be1): van groen #3f6b52 naar petrol. De regel veranderde niet, de betekenis wel — een groene stip zegt "in orde", een petrol stip zegt niets, want dat is de kleur van álles in deze app. Zie ook de kop van dit bestand: statuskleuren blijven semantisch. Zelfde tint als --arrival vandaag; los token omdat het losse begrippen zijn en een volgende herstijling ze niet weer aan elkaar mag knopen. */ --ok: #1f7a6a; --inhouse: #7a93a0; --departure: #c1743a; --danger: #b03a45; /* Rechte hoek is het sterkste merksignaal van de site (radius 0 op alles). Containers volgen dat; statusbadges blijven pil-vormig — die lezen als etiket, niet als vlak. */ --radius: 0px; --shadow: 0 1px 2px rgba(0, 43, 60, 0.05), 0 8px 24px rgba(0, 43, 60, 0.06); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #00232f; --surface: #013647; --surface-2: #054b60; --ink: #e8f1f5; --ink-soft: #9dbcc9; --line: #0b4e63; /* In het donker draait het duo om: duifblauw is dan het leesbare accent op petrol, precies andersom dan bij daglicht. */ --accent: #91bfcd; --accent-ink: #00293a; --accent-soft: #91bfcd; --gold: #c9a26a; --arrival: #4fae99; --ok: #4fae99; --inhouse: #8ba7b4; --departure: #dd9a63; --danger: #e07681; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35); } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; /* De standaard-tikflits is een grijsblauw blok dat niets met de huisstijl te maken heeft. Wél getint laten en niet wéghalen: op een touchscreen ís die flits de enige bevestiging dat je raak tikte, en een app die daar niet op reageert voelt stuk. */ -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 14%, transparent); /* Geen pull-to-refresh in standalone-modus: dat herlaadt de hele app terwijl je alleen naar boven wilde vegen in een lijst met aankomsten. */ overscroll-behavior-y: contain; } .hidden { display: none !important; } /* Zichtbaar voor een schermlezer, weg voor het oog. Nodig sinds de profielschakelaar de

van Mijn dag en Instellingen visueel vervangt: de tab zégt al waar je bent, maar zonder kop begint zo'n scherm in de documentstructuur bij een h2 en weet een schermlezer niet welke pagina dit is. Geen display:none — dat haalt 'm ook uit de voorleesvolgorde, en dan lost het niets op. */ .alleen-voorlezer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; } button { font: inherit; cursor: pointer; } input { font: inherit; } /* --- Brand --- De site zet koppen in scala-sans, gewicht 400, met 3-4px spatiëring op 30-40px (≈0.1em). Let op de truc daar: de CSS zet `text-transform: lowercase`, maar scala-sans is een kapitalenvariant die die kleine letters als hoofdletters tekent — het netto beeld is dus égale kapitalen, niet onderkast. Met een systeemletter reproduceer je dat met `uppercase`; met `lowercase` zou hier letterlijk "oldenhoff" komen te staan. Bewust geen webfont: dit hangt aan de balie en op een muur-TV en moet niet op een externe request wachten. Het karakter zit in de spatiëring en het lichte gewicht, niet in de letter zelf. */ .brand-mark { font-family: inherit; font-weight: 400; font-size: 1em; letter-spacing: 0.16em; text-transform: uppercase; } /* --- Login --- */ .login { /* 100dvh en niet 100vh: op mobiel rekent 100vh de weggeschoven URL-balk mee, dus de kaart viel deels buiten beeld en de pagina scrollde zonder dat er iets te scrollen was. De vh-regel blijft als terugval voor browsers zonder dvh. */ min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px)); } .login-card { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; } .login-card .brand { text-align: center; margin-bottom: 4px; } .login-card .brand-mark { display: block; font-size: 30px; color: var(--accent); } .login-card .brand-sub { display: block; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; } .login-hint { text-align: center; color: var(--ink-soft); font-size: 14px; margin: 0 0 4px; } #login-form input, #login-form button { height: 46px; border-radius: 0; border: 1px solid var(--line); padding: 0 14px; } #login-form input { background: var(--surface-2); color: var(--ink); } #login-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } #login-form button { border: none; background: var(--accent); color: var(--accent-ink); font-weight: 600; } #login-form button:hover { filter: brightness(1.05); } /* De bezig-staat moet je op een zonnig terras nog kunnen zien: alleen de cursor veranderen is geen signaal op een tablet, want daar is geen cursor. Vandaar het dimmen én het gewisselde label in app.js. */ #login-form button:disabled { opacity: 0.6; cursor: progress; filter: none; } /* --- Topbar --- */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 20px; /* De insets horen op de PADDING en niet op een marge: de balk moet zelf tot in de hoek doorlopen (hij is de achtergrond onder de statusbalk), alleen z'n inhoud schuift naar binnen. Rechts/links tellen mee voor landschapsstand, waar de notch aan de zijkant zit. */ padding: calc(12px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) 12px calc(20px + env(safe-area-inset-left, 0px)); background: var(--surface); border-bottom: 1px solid var(--line); } .topbar-brand { display: flex; flex-direction: column; line-height: 1.1; } .topbar-brand .brand-mark { font-size: 20px; color: var(--accent); } .property { font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em; } .tabs { display: flex; gap: 2px; margin-left: 8px; flex: 1; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; /* Een scrollbalk onder de tabs is op een desktop lelijk en op iOS toch onzichtbaar; de rand-vervaging hieronder doet het werk. */ scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } /* Zes tabs passen op geen enkele telefoon: "VANDAAG" alleen is al ~94px, samen ruim 480px tegen ~335px beschikbaar. Ze scrollen dus — maar zonder aanwijzing dát er meer is, bestaan Agenda en Admin simpelweg niet voor wie het niet weet. Vandaar een vervaging aan de kant waar nog iets zit. De klassen komen uit syncTabFade() in app.js (op scroll + resize), zodat de vervaging weg is zodra je het einde bereikt en de laatste tab niet permanent half-doorzichtig staat. */ .tabs { --fade-r: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%); --fade-l: linear-gradient(to right, transparent 0, #000 26px); --fade-lr: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); } .tabs.can-right:not(.can-left) { -webkit-mask-image: var(--fade-r); mask-image: var(--fade-r); } .tabs.can-left:not(.can-right) { -webkit-mask-image: var(--fade-l); mask-image: var(--fade-l); } .tabs.can-left.can-right { -webkit-mask-image: var(--fade-lr); mask-image: var(--fade-lr); } /* De sitenavigatie is vlak: gespatieerde kapitalen, geen gevulde blokjes. Actief markeren we met een streep onder het woord in plaats van een vlak — dat past bij de rechte, rustige opzet en scheelt visuele ruis in een balk die al zeven items telt. */ .tab { /* inline-flex + min-height i.p.v. meer padding: de tab was 33px hoog (8px padding om 12.5px tekst) en dat is onder de 44px die je met een duim betrouwbaar raakt. Via de hoogte van de doos i.p.v. de padding blijft de actief-streep onderaan het vlak staan. */ display: inline-flex; align-items: center; min-height: 44px; border: none; background: transparent; color: var(--ink-soft); /* 11px i.p.v. 12: vier tabs kwamen op 336px uit in een rij van 335 — één pixel. Liever hier een pixel af dan een tabbalk die "bijna" past en dus scrollt. */ padding: 8px 11px; border-radius: 0; font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent; scroll-snap-align: start; } .tab:hover { color: var(--ink); } .tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); } .tab.disabled { opacity: 0.4; cursor: not-allowed; } .tab.disabled:hover { color: var(--ink-soft); } .logout { border: 1px solid var(--line); background: transparent; color: var(--ink-soft); border-radius: 0; padding: 8px 12px; } .logout:hover { color: var(--ink); } /* --- Logo vs. wordmerk --- Logo bij daglicht, het gespatieerde tekst-wordmerk in het donker. ⚠️ DE REDEN DAARVOOR IS NIET (MEER) DE WITTE ACHTERGROND. Hier stond dat het logo een dichte witte achtergrond had en in het donker een wit blok zou worden. Dat klopte, en is op 21-07-2026 verholpen: het bestand is nu 950x375 met een alfakanaal, gesleuteld uit een bron van 1574px. Het blijft tóch tekst in het donker, en dat is de les: transparantie was het probleem niet. Het logo is DONKERBLAUW OP WIT ONTWORPEN. Gemeten op de bordkleur #001923 is het mét perfecte transparantie nog steeds vrijwel onzichtbaar — de aquarel wordt een vlek, het woordmerk verdwijnt in de achtergrond. Contrast, niet transparantie. Wil je het logo óók in het donker en op de TV, vraag Oldenhoff dan om een NEGATIEF/LICHTE variant, bij voorkeur SVG. Een transparante versie van dit bestand is daarvoor niet genoeg; die is er nu en het helpt niet. Wat de transparantie wél oplost: het logo hing eraan dat het vlak eronder exact #ffffff was. De dagstand van het TV-bord is #fbfdfe — net niet — en daar zou de oude versie een randje hebben getoond. De selectoren hieronder staan bewust op dezelfde specificiteit (0,2,0) als de bestaande .login-card/.topbar-brand-regels en komen er later in het bestand achter — anders wint de oude display-waarde. */ .login-card .brand-logo, .topbar-brand .brand-logo { display: block; width: auto; } .login-card .brand-mark, .topbar-brand .brand-mark { display: none; } /* Het logo is een breed liggend lockup waarin de golf veel ruimte pakt. In de oude uitsnede (317x111) waren de letters maar ~40% van de hoogte en werd "Villa Oldenhoff" op 30px onleesbaar; 44px was het minimum. De nieuwe uitsnede (950x375) zit strakker om het merk, dus de letters zijn er bij dezelfde hoogte fors groter. 44px blijft staan omdat het past in de topbar van 67px — er is nu alleen ruimte naar beneden als dat ooit nodig is. */ .topbar-brand .brand-logo { height: 44px; } .login-card .brand-logo { height: 64px; margin: 0 auto 2px; } /* Staat het logo er, dan is de property-regel eronder dubbelop: het logo zégt al "Villa Oldenhoff". In het donker (tekst-wordmerk) blijft hij. */ .topbar-brand .brand-logo ~ .property { display: none; } @media (prefers-color-scheme: dark) { .login-card .brand-logo, .topbar-brand .brand-logo { display: none; } .login-card .brand-mark { display: block; } .topbar-brand .brand-mark { display: inline; } } /* --- Content --- */ /* De onderste inset houdt de laatste kaart vrij van de home-indicator; zonder dat ligt die streep op een telefoon precies over de onderste regel. */ .content { max-width: 960px; margin: 0 auto; padding: 24px calc(20px + env(safe-area-inset-right, 0px)) calc(64px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px)); } .view-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } /* Schermtitel krijgt de merkbehandeling (kapitalen, 0.11em ≈ de 4px-op-40px van de site, gewicht 400); de data eronder juist niet — zulke spatiëring leest prettig op één woord ("VANDAAG") en beroerd op een tabel vol namen en tijden. */ .view-head h1 { font-weight: 400; font-size: 25px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink); margin: 0; } .date-nav { display: flex; align-items: center; gap: 6px; } .date-nav button { width: 38px; height: 38px; border: 1px solid var(--line); background: var(--surface); border-radius: 0; color: var(--ink); font-size: 18px; } /* De 38px hierboven is bedoeld voor de ‹ ›-pijltjes. Knoppen mét een woord erin moeten die breedte juist NIET erven: de CSV-knop op Admin → Team draagt .ghost-btn (niet .ghost) en stond daardoor als vierkantje van 38px met "↓" en "CSV" onder elkaar. */ .date-nav .ghost, .date-nav .ghost-btn { width: auto; padding: 0 12px; font-size: 14px; color: var(--ink-soft); } .date-nav .ghost-btn { white-space: nowrap; } .date-nav input { height: 38px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 0; padding: 0 10px; } /* --- Weergaveschakelaar op Vandaag --- Bewust een segmented control en geen tweede rij tabbladen: dit kiest niet een ander onderwerp maar een andere snit door hetzelfde onderwerp. */ .view-modes { display: flex; gap: 2px; margin: -6px 0 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 0; padding: 3px; width: fit-content; max-width: 100%; overflow-x: auto; } .vm { border: none; background: transparent; color: var(--ink-soft); padding: 7px 14px; border-radius: 0; font-size: 13.5px; font-weight: 500; white-space: nowrap; } .vm:hover { color: var(--ink); } /* Hier komt duifblauw wél als vlak terug: petrol-op-duifblauw haalt ruim 4.5:1, en dit is de plek waar de site-kleur het meest herkenbaar is. */ .vm.active { background: var(--accent-soft); color: #004b65; font-weight: 600; } /* Weergaveknoppen links, vouwknop rechts: twee soorten keuze op één regel, maar niet in dezelfde groep — de ene kiest wát je ziet, de andere hoevéél. */ .today-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .today-controls .view-modes { margin: 0; } /* Rechts uitgelijnd, vlak boven de lijst die hij bedient. Eigen rij zonder eigen hoogte: de negatieve ondermarge laat 'm tegen de eerste kaart aan zitten. */ /* Briefing links, compact-schakelaar rechts, één rij. De rand staat op de RIJ en niet op de briefing: die kan verborgen zijn, en dan moet de lijn er nog steeds onder staan. */ .dagregel { display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; } .dagregel #daily-note { flex: 1; min-width: 0; border-bottom: none; margin-bottom: 0; } /* Zonder briefing schuift de knop vanzelf naar rechts. */ .dagregel .fold-btn { margin-left: auto; flex: none; } /* Geen pil meer. Dit is een voorkeur die je één keer zet, geen actie die om aandacht vraagt — met een rand en een gevuld vlak concurreerde hij met de weergaveknoppen. */ .fold-btn { border: none; background: transparent; color: var(--ink-soft); border-radius: 0; padding: 4px 2px; font-size: 12.5px; font-weight: 500; white-space: nowrap; } .fold-btn:hover { color: var(--accent); } /* Compacte boekingen: alleen kamer, gast en tijd. Eén kaart-template, de velden die in deze stand niets toevoegen vallen hier weg — twee losse templates zouden een keer uit elkaar lopen en dan mist de compacte weergave stilletjes een waarschuwing. De kamer-waarschuwing (.alert-tag) blijft daarom bewust wél staan. */ .rows.compact .card, .groups.compact .card { padding: 9px 14px; } /* `:not(.unfolded)` i.p.v. losse regels om alles terug te zetten: één kaart open klikken hoeft dan geen enkele display-waarde te herstellen, en er kan er ook geen één vergeten worden. Zie de klikhandler in bindArrivalCards(). */ .rows.compact .card:not(.unfolded) .meta, .rows.compact .card:not(.unfolded) .notes, .rows.compact .card:not(.unfolded) .eta-field, .rows.compact .card:not(.unfolded) .tag.diet, .rows.compact .card:not(.unfolded) .guest-details, .groups.compact .card:not(.unfolded) .meta, .groups.compact .card:not(.unfolded) .notes, .groups.compact .card:not(.unfolded) .eta-field, .groups.compact .card:not(.unfolded) .tag.diet, .groups.compact .card:not(.unfolded) .guest-details { display: none; } .rows.compact .card:not(.unfolded) .guest, .groups.compact .card:not(.unfolded) .guest { font-size: 14.5px; } /* Aanwijzen dat er iets te openen valt. Alleen in compacte stand: uitgeklapt is een klik alleen zinvol op een kaart mét gastdetails, en die heeft z'n eigen caret. */ .rows.compact .card, .groups.compact .card { cursor: pointer; } .rows.compact .card.unfolded, .groups.compact .card.unfolded { padding: 14px; box-shadow: var(--shadow); } /* --- Gegroepeerde weergaven (Schoonmaak, Balie) --- */ .groups { display: flex; flex-direction: column; gap: 22px; } .group-head { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); margin: 0 0 2px; } .group-count { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 11px; font-weight: 700; color: var(--ink-soft); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; } .group-hint { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; } /* Schoonmaakkaarten: het venster is de kop, niet de gastnaam. */ .card.hk .hk-window { font-size: 14.5px; } .card.hk .hk-window b { font-variant-numeric: tabular-nums; } .card.hk.hk-turn .stripe { background: var(--departure); } .card.hk.hk-out .stripe { background: var(--inhouse); } .card.hk.hk-in .stripe { background: var(--arrival); } .card.hk.hk-stay .stripe { background: var(--line); } /* --- Summary chips --- */ .summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .chip { display: inline-flex; align-items: baseline; gap: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--ink-soft); } .chip b { font-size: 15px; color: var(--ink); } .chip .dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; } /* --- Rows --- */ .rows { display: flex; flex-direction: column; gap: 10px; } .card { display: grid; grid-template-columns: 4px 84px 1fr auto; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px 14px 0; overflow: hidden; } .card .stripe { grid-column: 1; align-self: stretch; background: var(--inhouse); } .card.kind-arrival .stripe { background: var(--arrival); } .card.kind-departure .stripe { background: var(--departure); } /* Kamernummer is data, geen kop: strak, tabellarisch, geen spatiëring. De cel is niet altijd een nummer — Mews levert "Niet toegewezen" als er geen kamer hangt, en dat woord past bij geen enkel leesbaar corps in deze kolom van 84px. Daarom hier afbreken i.p.v. over de gastnaam heen lopen. Zie de notitie in README/commit: de nettere oplossing is dat label in app.js een eigen (kleinere) klasse geven. */ .card .room { text-align: center; font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); min-width: 0; line-height: 1.15; /* hyphens werkt hier omdat gezet is: "Niet toege-wezen" leest als een bewuste afbreking, waar een kale breuk als een bug leest. overflow-wrap blijft als vangnet staan voor een label zonder afbreekpunt. */ hyphens: auto; overflow-wrap: anywhere; } .card .room small { display: block; font-family: inherit; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; } .card .main .guest { font-weight: 600; font-size: 15px; } .card .main .meta { font-size: 13px; color: var(--ink-soft); margin-top: 2px; } .card .main .notes { font-size: 12.5px; color: var(--gold); margin-top: 4px; } .card .side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-right: 4px; } .badge { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; } .badge.arrival { background: color-mix(in srgb, var(--arrival) 16%, transparent); color: var(--arrival); } .badge.inhouse { background: color-mix(in srgb, var(--inhouse) 18%, transparent); color: var(--inhouse); } .badge.departure { background: color-mix(in srgb, var(--departure) 16%, transparent); color: var(--departure); } .badge.checkedin { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .time { font-size: 13px; color: var(--ink-soft); } .time b { color: var(--ink); } .empty { text-align: center; color: var(--ink-soft); padding: 40px 0; } .error { color: var(--danger); font-size: 14px; } /* --- Vergaderingen-mini op Vandaag --- */ .today-meetings { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; margin-bottom: 18px; } .mini-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 600; margin-bottom: 8px; } .mini-row { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line); font-size: 14px; } .mini-row:first-of-type { border-top: none; } .mini-time { font-weight: 600; color: var(--accent); white-space: nowrap; } .mini-space { font-weight: 600; } .mini-org { color: var(--ink-soft); margin-left: auto; white-space: nowrap; } /* --- Aanvragen van gasten op Vandaag --- Zelfde kaartvorm als de vergaderingen-mini hierboven: het is dezelfde soort mededeling op hetzelfde scherm. Alleen tokens, geen kale hex — dit scherm heeft dark mode. */ .aanvraag-blok { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; margin-bottom: 18px; } .aanvraag-teller { color: var(--gold); font-weight: 700; letter-spacing: 0; text-transform: none; margin-left: 6px; } .aanvraag-item { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; } .aanvraag-item:first-of-type { border-top: none; } /* Afgehandelde regels dimmen: ze staan er voor de historie, niet voor het werk. */ .aanvraag-item.is-bevestigd, .aanvraag-item.is-afgewezen { opacity: 0.62; } .aanvraag-kop { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .aanvraag-wat { font-weight: 600; } .aanvraag-prijs { color: var(--gold); font-size: 13px; } .aanvraag-stand { margin-left: auto; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); } .aanvraag-item.is-nieuw .aanvraag-stand { color: var(--gold); font-weight: 700; } .aanvraag-gast { margin: 3px 0 0; color: var(--ink-soft); font-size: 13px; } /* De letterlijke woorden van de gast. Cursief + inspringing zodat je in één oogopslag ziet wat van hem is en wat van ons — dit is het enige veld dat hij zelf typte. */ .aanvraag-wens { margin: 6px 0 0; padding-left: 10px; border-left: 2px solid var(--accent-soft); font-style: italic; } .aanvraag-voet { display: flex; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--ink-soft); } .aanvraag-door::before { content: "· "; } .aanvraag-acties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .aanvraag-btn { padding: 5px 10px; font-size: 13px; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; } .aanvraag-btn:hover { background: var(--bg); } .aanvraag-btn[disabled] { opacity: 0.5; cursor: default; } /* --- VIP + dieet --- */ .badge.vip { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); } .tag.diet { display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--departure); background: color-mix(in srgb, var(--departure) 12%, transparent); border-radius: 0; padding: 2px 8px; } /* --- Uitklapbare gastkaart --- */ .card.expandable { cursor: pointer; } .card.expandable .guest { display: flex; align-items: center; gap: 6px; } .expand-caret { font-size: 11px; color: var(--ink-soft); transition: transform 0.15s; } .card.open .expand-caret { transform: rotate(180deg); } .guest-details { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-soft); } .guest-details a { color: var(--accent); } /* Doorklik naar de proefdruk van de kamersite. Goud en gestippeld onderstreept, omdat het géén werkende functie is maar een voorbeeld — een gewone accent-link ernaast (het mailadres) zou suggereren dat je hier de pagina van déze gast opent. Weghalen zodra de gastpagina echt per boeking rendert. */ .guest-details a.proefdruk-link { color: var(--gold); text-decoration-style: dotted; text-underline-offset: 2px; } /* --- Ratio in de chips (zelfde vorm als de TV) --- */ .chip .den { color: var(--ink-soft); font-weight: 600; margin-right: 2px; } /* --- Kamer niet toegewezen: het enige harde alarm --- */ .tag.alert-tag { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-radius: 0; padding: 2px 8px; } .card.alert .stripe { background: var(--danger); } /* --- Gewijzigd sinds de vorige export --- Duifblauw en niet rood: dit is NIEUWS, geen alarm. Het rode "kamer toewijzen" moet het enige harde signaal blijven — zodra er twee kleuren om aandacht vragen, wint er geen van beide. */ .tag.wijz-tag { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 30%, transparent); border-radius: 0; padding: 2px 8px; } .brief-wijz { margin-top: 4px; font-weight: 600; color: var(--accent); } /* --- Verwachte aankomst (eigen data) --- */ .eta-field { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); } .eta-input { height: 30px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 0; padding: 0 8px; font-size: 13px; text-transform: none; letter-spacing: normal; } .eta-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .eta-input.saved { border-color: var(--accent); } /* --- Ontbijt-rijen --- */ .card.bf { align-items: stretch; } .card.bf.on .stripe { background: var(--accent); } .card.bf .main { padding: 2px 0; } .bf-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-top: 8px; } .field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); } .field.grow { flex: 1; min-width: 160px; } .field input { height: 36px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 0; padding: 0 10px; font-size: 14px; text-transform: none; letter-spacing: normal; } .field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .bf-persons { width: 74px; } .bf-time { width: 110px; } /* Velden pas tonen als de kamer ontbijt neemt. De klasse .on staat al op de kaart en wordt bij het omzetten van de schakelaar bijgewerkt, dus dit volgt vanzelf — geen extra JS. */ .bf-detail { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; flex: 1; } .card.bf:not(.on) .bf-detail { display: none; } /* --- Serviceschema ontbijt --- Staat boven de regels omdat dit de vraag is waar de keuken mee begint ("hoeveel om acht uur"), niet de kamer-voor-kamer-administratie eronder. */ .bf-slots { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; } .bf-slot { display: inline-flex; align-items: baseline; gap: 7px; /* Wrap zodat de dieetregel eronder valt in plaats van de rij op te rekken. */ flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 0; padding: 8px 13px; } .bf-slot-time { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; } .bf-slot-n { font-size: 17px; font-weight: 700; color: var(--gold); } .bf-slot-lbl { font-size: 12px; color: var(--ink-soft); } .bf-slot-rooms { font-size: 12px; color: var(--ink-soft); padding-left: 9px; margin-left: 2px; border-left: 1px solid var(--line); } /* De dieetwens die de GAST zelf doorgaf, bij het slot waarop die kamer aanschuift. Eigen regel (flex-basis 100%) en niet achter de kamers: dit is de zin die je bij het uitserveren leest, en die hoort niet weg te vallen achter een opsomming kamernummers. Geen alarmkleur — het is informatie om rekening mee te houden, geen storing. */ .bf-slot-diet { flex-basis: 100%; margin-top: 4px; font-size: 12px; color: var(--ink); } /* Ontbijt aan, maar nog geen tijd: een openstaande vraag, geen tijdslot. */ .bf-slot-open { border-left-color: var(--danger); } .bf-slot-open .bf-slot-n { color: var(--danger); } /* Toggle switch */ .switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch .slider { width: 42px; height: 24px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; position: relative; transition: background 0.15s; } .switch .slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: var(--ink-soft); border-radius: 50%; transition: transform 0.15s, background 0.15s; } .switch input:checked + .slider { background: color-mix(in srgb, var(--accent) 40%, transparent); border-color: var(--accent); } .switch input:checked + .slider::before { transform: translateX(18px); background: var(--accent); } .switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; } .switch-label { font-size: 13px; font-weight: 600; color: var(--ink); } .save-state { font-size: 11px; color: var(--ink-soft); min-height: 14px; } .save-state.saving { color: var(--ink-soft); } .save-state.saved { color: var(--accent); } .save-state.err { color: var(--danger); } @media (max-width: 560px) { .card.bf .side { grid-column: 2 / -1; } } /* --- Klokken --- */ .clockin { display: flex; gap: 10px; margin-bottom: 18px; } .clockin input { flex: 1; max-width: 320px; height: 44px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 0; padding: 0 14px; } .clockin input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .clockin button { height: 44px; padding: 0 20px; border: none; background: var(--accent); color: var(--accent-ink); border-radius: 0; font-weight: 600; } .clockin button:hover { filter: brightness(1.05); } .card.shift.on .stripe { background: var(--accent); } .shift-icon { font-size: 18px; color: var(--inhouse); } .card.shift.on .shift-icon { color: var(--accent); } .clock-out-btn { border: 1px solid var(--accent); background: transparent; color: var(--accent); border-radius: 0; padding: 8px 14px; font-weight: 600; } .clock-out-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } /* --- Zalen/MICE --- */ .card .mi-time { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 17px; font-weight: 600; } .card .mi-time small { text-transform: uppercase; } /* --- Identiteit --- */ /* Eén kolom, niet een wolk van pillen. Dit was flex-wrap met gecentreerde pillen, en dan volgt de knopbreedte de naamlengte: "Jan" ~60px, "Alexander" ~115px. In de 304px die de kaart binnen z'n padding overhoudt passen er zo 2 a 3 per rij, dus bij 6-7 medewerkers kreeg je drie ragged rijen met een gecentreerde laatste -- een kerstboom waarin je je eigen naam moet ZOEKEN. Onder elkaar en links uitgelijnd staat elke naam op dezelfde x-positie en scan je de lijst in een rechte lijn naar beneden. De lijst komt al alfabetisch binnen (db.ts, ORDER BY name COLLATE NOCASE), dus die volgorde hoeft hier niets meer te doen. De max-height is een vangnet voor als het team doorgroeit: liever een half afgesneden knop onderaan -- dat leest als "er is meer" -- dan een kaart die buiten beeld valt. */ .identity-list { display: grid; gap: 8px; max-height: 52dvh; overflow-y: auto; } .identity-btn { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 0; padding: 13px 16px; font-size: 15px; font-weight: 600; width: 100%; text-align: left; } .identity-btn:hover { border-color: var(--accent); color: var(--accent); } .ghost-btn { border: none; background: transparent; color: var(--ink-soft); font-size: 13px; padding: 4px; align-self: center; } .ghost-btn:hover { color: var(--accent); } .identity-add { display: flex; gap: 8px; } .identity-add input { flex: 1; height: 42px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 0; padding: 0 12px; } .identity-add button { height: 42px; padding: 0 16px; border: none; background: var(--accent); color: var(--accent-ink); border-radius: 0; font-weight: 600; } /* --- Statuslampje bron (header) --- Groen is de rusttoestand en mag wegvallen; rood moet je zien. Daarom krijgt alleen "loopt achter" een achtergrond en vet — een altijd-opvallend lampje leert je het te negeren, en dan werkt het niet meer op de dag dat het telt. */ .source-light-wrap { position: relative; } .source-light { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; padding: 5px 10px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; background: transparent; max-width: 260px; overflow: hidden; text-overflow: ellipsis; } .source-light:hover { border-color: var(--line); } .source-light .sl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); flex: none; } .source-light .sl-text { overflow: hidden; text-overflow: ellipsis; } .source-light.ok .sl-dot { background: var(--ok); } .source-light.off .sl-dot { background: var(--ink-soft); } .source-light.warn { background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); font-weight: 600; } .source-light.warn .sl-dot { background: var(--gold); } .source-light.down { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); font-weight: 600; } .source-light.down .sl-dot { background: var(--danger); } /* Uitklappaneel: één lampje, maar wél alle bronnen op te vragen. Hoveren toont het, klikken zet het vast — de balie heeft een muis, het wandtablet niet. */ .source-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: min(340px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; gap: 12px; font-size: 12.5px; color: var(--ink); white-space: normal; text-align: left; } .sp-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; } .sp-label { font-weight: 600; } .sp-status { color: var(--ink-soft); justify-self: end; } .sp-detail { grid-column: 1 / -1; color: var(--ink-soft); line-height: 1.45; } .sp-row.sp-down .sp-status { color: var(--danger); font-weight: 600; } .sp-row.sp-warn .sp-status { color: var(--gold); font-weight: 600; } /* Op smalle schermen telt alleen de kleur — de tekst kost te veel breedte naast de tabs, en het lampje mag de navigatie niet wegdrukken. */ /* ===== De navigatie mag NOOIT wegvallen ===== Gemeten op 21-07: de header vraagt 539px aan logo, lampje, naam, uitloggen, marges en gaps. Op een telefoon van 375px is dat 164px te veel — en omdat `.tabs` door `overflow-x: auto` tot nul mag krimpen, was de tabbalk daar volledig onzichtbaar. Geen afgekapte tabs, geen scrollbalk: niets. Je kon simpelweg niet van scherm wisselen. Daarom krijgen de tabs onder 720px hun eigen regel: `flex-basis: 100%` dwingt een omslag, `order` zet ze onder de merkregel. Zo is de breedte van de tabbalk niet meer afhankelijk van wat er verder in de header staat — precies de koppeling die dit kapot maakte. Wat er niet past scrollt, mét de rand-vervaging die dat aankondigt. */ /* DE TABS KRIJGEN HUN EIGEN REGEL ZODRA ZE NIET MEER PASSEN — en dat is veel eerder dan 720px. Deze regels stonden in het blok hieronder en vuurden dus pas op telefoonbreedte, terwijl het probleem al bij een tablet begint. GEMETEN op 22-07-2026, in een iframe met een echte viewport (het browservenster verkleinen liegt hier: `innerWidth` blijft dan op de desktopwaarde staan): viewport nav heeft nodig nav krijgt tekort 1280 456 733 — 1024 456 477 — 900 456 353 103px 834 456 287 169px ← iPad Pro 11" staand 768 456 221 235px ← iPad staand 720 en lager — — — (viel al onder het oude blok) De nav krijgt steeds `viewport − 547`, dus hij past pas vanaf ~1003px. Er zat een dode zone van 768 tot ~1000px waarin de laatste tab half buiten beeld viel — en dat is precies het formaat waarop de balie werkt. Het is ook exact de fout die het comment bij de nav in index.html beschrijft ("wat je niet ziet gebruik je niet"): die stond er sinds er een vijfde tab bij kwam zonder hermeting. 1100 en niet 1003: een grens die precies op de meting ligt breekt bij het eerste tabje dat er ooit bij komt of één langer label. Hierboven houdt hij ~98px speling. */ @media (max-width: 1100px) { .topbar { flex-wrap: wrap; row-gap: 4px; column-gap: 12px; } .tabs { flex: 0 0 100%; order: 10; margin-left: 0; /* Onder de merkregel hoort geen dubbele lucht; de tabs dragen hun eigen hoogte. */ margin-top: 2px; } /* De merkregel duwt de rest naar rechts, zodat lampje en naam op één lijn eindigen. */ .topbar-brand { margin-right: auto; } } @media (max-width: 720px) { /* Tekst weg in de RUSTTOESTAND — daar is de stip genoeg en de ruimte schaars. Maar bij warn/down komt hij terug: een kale rode stip zonder woord laat je raden wát er stuk is, en dat is uitgerekend het moment waarop je het moet weten. Hier stond `display: none` zonder uitzondering, dus een storing was op een telefoon een naamloos bolletje. */ .source-light.ok .sl-text, .source-light.off .sl-text { display: none; } .source-light.warn .sl-text, .source-light.down .sl-text { max-width: 42vw; } .source-light { padding: 5px; min-width: 44px; min-height: 44px; justify-content: center; } /* Mét tekst mag hij weer als een label lezen in plaats van als een knop-vlak. */ .source-light.warn, .source-light.down { padding: 5px 10px; justify-content: flex-start; } /* Het uitklappaneel viel buiten beeld. Het hangt met `right: 0` aan .source-light-wrap, dus een paneel van 340px groeit naar LINKS vanaf de rechterrand van dat lampje. Op een desktop staat het lampje vlak bij de schermrand en gaat dat goed; op een telefoon staat de naamknop er nog rechts van, dus begon het paneel rond -90px — half buiten het scherm. Oplossing zonder JavaScript: de wrap wordt hier `static`, waardoor het dichtstbijzijnde gepositioneerde element de sticky .topbar is. Het paneel hangt dan aan de HEADER in plaats van aan het lampje, en spant met marges de volle breedte. Het kan daarmee per constructie niet meer buiten beeld vallen, ongeacht waar het lampje staat. */ .source-light-wrap { position: static; } .source-panel { top: calc(100% + 4px); left: 12px; right: 12px; width: auto; } } /* --- Whoami-chip --- */ .whoami { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: 13px; white-space: nowrap; } .whoami:hover { border-color: var(--accent); color: var(--accent); } /* Mijn dag heeft geen tab; zonder deze markering lijkt er geen enkel scherm actief. */ .whoami.actief { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* --- Mijn dag --- */ .me-acties { display: flex; align-items: center; gap: 10px; } /* Ingangen naar Klokken en Admin. Als kaarten en niet als knoppenrij: het zijn bestemmingen, geen acties, en de ondertitel zegt wat je er vindt — anders moet je het onthouden nu ze niet meer in de tabbalk staan. */ .me-links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .me-link { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0; padding: 12px 14px; min-height: 44px; } .me-link:hover { border-color: var(--accent); } /* De TV-ingang is een en geen