/* * Vakbrein - gedeeld stylesheet. * * 1 centrale plek voor kleur, typografie, afstand en componenten, in plaats * van dezelfde CSS-variabelen en componentstijlen die voorheen in elk * PHP-bestand apart stonden. Elk scherm linkt hiernaar in de en * bevat daarna alleen nog paginaspecifieke lay-out (bv. max-breedte van de * inhoud), geen herhaalde kleuren/componenten meer. */ :root { /* Kleur "Optie A - warm terracotta, verfijnd": zelfde warme identiteit als voorheen, maar de ondergrond is iets dieper/stoffiger (minder "crème- papier") en het accent is iets dieper voor beter contrast. Gekozen door Melvin op 2026-08-31 na het stijlvoorstel-artifact. */ --ink: #221d1a; --ink-soft: #52483f; --muted: #847c70; --bg: #eeece5; --surface: #fffdfa; --surface-soft: #e6e2d8; --line: #ddd6c8; --line-strong: #c2b9a4; --accent: #a85a2a; --accent-hover: #8f4a1f; --accent-soft: #f1ded0; --accent-ink: #6f3c17; --success: #2f7a4d; --success-soft: #e3f1e8; --danger: #b3392f; --danger-soft: #fbe9e5; --info: #3f5f7a; --info-soft: #e8eef3; /* Ruimer/touch-vriendelijker geometrie, ook gekozen op 2026-08-31 - grotere afrondingsradius past bij de grotere velden/knoppen hieronder. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(34, 29, 26, 0.06); --shadow-md: 0 14px 28px -16px rgba(34, 29, 26, 0.24); --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); margin: 0; padding: 28px 24px; line-height: 1.5; -webkit-font-smoothing: antialiased; } body.vb-midden { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .vb-wrap { max-width: 960px; margin: 0 auto; } .vb-wrap--smal { max-width: 640px; } .vb-wrap--breed { max-width: 1120px; } a { color: inherit; } h1 { font-size: 23px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 4px; text-wrap: balance; } h1 .zwak { font-weight: 500; color: var(--muted); } h2 { font-size: 15px; font-weight: 700; margin: 30px 0 12px; letter-spacing: -0.005em; } p.sub, .sub { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; line-height: 1.6; } .hint { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.55; } /* Navigatie * .vb-navbalk is bewust een volle-breedte balk LOS van .vb-wrap: hij * annuleert de padding van (negatieve marge) zodat de balkrand * edge-to-edge loopt, terwijl de inhoud van de balk zelf (nav.vb-nav) op * een vaste breedte gecentreerd wordt. Zo blijft de navigatie exact even * breed op elk scherm, ook al gebruiken sommige pagina's een smallere of * bredere inhoudscontainer (.vb-wrap--smal / --breed) - voorheen stond de * nav ín die container en "verspringde" hij dus mee. */ .vb-navbalk { margin: -28px -24px 26px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); } nav.vb-nav { display: flex; gap: 4px; align-items: center; max-width: 960px; margin: 0 auto; padding: 15px 0; font-size: 13.5px; } nav.vb-nav a { color: var(--ink-soft); text-decoration: none; padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; transition: background-color 150ms ease, color 150ms ease; } nav.vb-nav a:hover { background: var(--surface-soft); color: var(--ink); } nav.vb-nav a.actief { color: var(--accent-ink); background: var(--accent-soft); } nav.vb-nav .vb-spacer { flex: 1; } nav.vb-nav .vb-gebruiker { color: var(--muted); font-size: 13px; padding: 7px 4px; display: inline-flex; align-items: center; gap: 6px; } nav.vb-nav svg { flex-shrink: 0; } .vb-terug { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px; color: var(--muted); font-size: 13px; text-decoration: none; font-weight: 600; } .vb-terug:hover { color: var(--ink); } /* Kaart en formulier (alleen voor echte groepering: KPI's en formulieren). * Bewust maar 1 afbakening per soort blok - niet allebei tegelijk, dat * dubbele randen+schaduw was een van de dingen die het geheel rommelig * liet aanvoelen. Kaarten/tabellen krijgen een rand (rustig, vlak naast * elkaar), formulieren een schaduw (voelen aan als "erboven", geen rand * nodig). */ .kaart, form { background: var(--surface); border-radius: var(--radius-md); padding: 25px 26px; } .kaart { border: 1px solid var(--line); } form { margin-bottom: 24px; box-shadow: var(--shadow-sm); } .kaarten { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } .kaarten .kaart { flex: 1; min-width: 160px; padding: 20px 22px; } .kaart .label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } .kaart .waarde { font-size: 23px; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .winst-plus { color: var(--success); } .winst-min { color: var(--danger); } /* Grafiekvak: Chart.js heeft een omringend blok met een vaste hoogte nodig * (i.p.v. alleen een canvas-height-attribuut) - anders vouwt de grafiek * zichzelf onbedoeld in tot een paar pixels hoog, omdat de omliggende kaart * geen eigen hoogte heeft los van zijn inhoud. In combinatie met * `maintainAspectRatio: false` in de Chart.js-opties vult de grafiek dit * vak altijd netjes, ongeacht hoeveel data er is. */ .vb-grafiek-vak { position: relative; height: 260px; } .vb-grafiek-vak--rond { height: 220px; } /* Span binnen een toggle-knop (bv. "Nieuw project" / "Annuleren") die zelf * icoon + tekst combineert - erft de flex-gap van de knop niet automatisch * door, dus expliciet herhaald. */ button span[class^="vb-toggle-tekst"] { display: inline-flex; align-items: center; gap: 7px; } /* Formulieren */ .vb-form-titel { font-size: 14.5px; margin: 0 0 5px; font-weight: 700; display: flex; align-items: center; gap: 7px; } label { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 600; margin-bottom: 7px; margin-top: 18px; } label:first-of-type, .regel label { margin-top: 0; } /* Ruimer/touch-vriendelijk: velden komen uit op ~46-48px hoogte, prettiger * te raken op een telefoon op de bouwplaats dan de vorige compacte 9px. */ input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 13px 14px; font-size: 15px; font-family: var(--font-sans); background: var(--surface); color: var(--ink); transition: border-color 150ms ease, box-shadow 150ms ease; } input::placeholder, textarea::placeholder { color: #9c9285; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input:disabled, select:disabled { background: var(--surface-soft); color: var(--muted); } .regel { display: flex; gap: 12px; align-items: center; margin-bottom: 13px; flex-wrap: wrap; } .regel > div { flex: 1; min-width: 160px; } .veld-fout { color: var(--danger); font-size: 12.5px; margin-top: 5px; } .rij-checkbox { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; font-size: 13px; color: var(--ink-soft); } .rij-checkbox input[type=checkbox] { width: auto; margin-top: 2px; accent-color: var(--accent); } .rij-checkbox label { margin: 0; font-weight: 500; } /* Knoppen */ button, .vb-knop { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); padding: 13px 20px; font-size: 14.5px; font-family: var(--font-sans); font-weight: 700; cursor: pointer; text-decoration: none; transition: background-color 150ms ease, transform 100ms ease, box-shadow 150ms ease; } button:hover, .vb-knop:hover { background: var(--accent-hover); } button:active, .vb-knop:active { transform: translateY(1px); } button:focus-visible, .vb-knop:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button.secundair, .vb-knop.secundair { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); } button.secundair:hover, .vb-knop.secundair:hover { background: var(--surface-soft); } button.afwijzen { background: var(--surface); color: var(--danger); border: 1px solid #e4c1ba; } button.afwijzen:hover { background: var(--danger-soft); } button.klein, .vb-knop.klein { padding: 6px 11px; font-size: 12.5px; } button.vb-link-knop { background: none; color: var(--muted); padding: 6px 4px; font-weight: 600; } button.vb-link-knop:hover { color: var(--ink); background: none; } button[disabled] { opacity: 0.55; cursor: not-allowed; } .acties { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; } .margeveld { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .margeveld input { width: 76px; } .acties-cel { display: flex; gap: 8px; } /* Tabellen (rand, geen extra schaduw - zie toelichting bij .kaart hierboven) */ table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; } th, td { text-align: left; padding: 13px 15px; font-size: 13.5px; border-bottom: 1px solid var(--line); } th { background: var(--surface-soft); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--muted); } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: rgba(184, 103, 44, 0.035); } td.vb-nummer, th.vb-nummer { font-variant-numeric: tabular-nums; } tr.rij-klikbaar { cursor: pointer; } /* Badges (status) */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; } .badge-actief, .badge-uren { background: var(--success-soft); color: var(--success); } .badge-gepauzeerd, .badge-wacht_op_goedkeuring { background: var(--accent-soft); color: var(--accent-ink); } .badge-opgezegd, .badge-geweigerd, .badge-geannuleerd { background: var(--danger-soft); color: var(--danger); } .badge-offerte, .badge-catalogus { background: var(--info-soft); color: var(--info); } .badge-afgerond, .badge-ad_hoc { background: var(--surface-soft); color: var(--ink-soft); } .badge-reistijd { background: var(--accent-soft); color: var(--accent-ink); } /* Bonnetjes-scan en dashboard-grafieken (project.php, projecten.php, uren.php) */ #bon-scan-kaart input[type="file"] { flex: 1; min-width: 200px; } #bon-scan-status { margin: 8px 0 0; } canvas#kosten-grafiek, canvas#projecten-grafiek { max-width: 100%; } /* Meldingen */ .melding { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; line-height: 1.5; } .melding svg { flex-shrink: 0; margin-top: 1px; } .succes, .melding.melding-succes { background: var(--success-soft); color: #1f5c37; } .fout, .melding.melding-fout { background: var(--danger-soft); color: #8a2a22; } /* Lege staat */ .leeg { color: var(--muted); font-size: 13.5px; padding: 40px 20px; text-align: center; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; gap: 10px; } .leeg svg { color: var(--line-strong); } /* Auth-kaarten (login, wachtwoord vergeten/resetten, registreren) */ .auth-kaart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 34px 32px; max-width: 400px; width: 100%; } .auth-kaart--breed { max-width: 440px; } .auth-merk { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; letter-spacing: -0.01em; color: var(--accent-ink); margin-bottom: 20px; } .auth-kaart h1 { font-size: 19px; margin-bottom: 8px; } .auth-links { display: flex; justify-content: space-between; margin-top: 16px; font-size: 13px; } .auth-links a { color: var(--muted); text-decoration: none; font-weight: 600; } .auth-links a:hover { color: var(--accent); } .auth-taal { text-align: right; margin-bottom: 14px; } .auth-taal a { font-size: 11.5px; color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-weight: 700; } .succes-blok { text-align: center; padding: 8px 0; } .succes-blok .vb-icoon-groot { color: var(--success); background: var(--success-soft); border-radius: 999px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .succes-blok h2 { font-size: 17px; margin: 0 0 8px; } .succes-blok p { font-size: 13.5px; color: var(--muted); line-height: 1.6; } /* Medewerkers: uitnodigingslink */ .link-rij { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } #qr { background: #fff; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); } .link-tekst { flex: 1; min-width: 220px; font-size: 12.5px; word-break: break-all; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-family: "JetBrains Mono", ui-monospace, monospace; } /* Tenants/catalogus: toolbar en inline-formulieren in tabellen */ .toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; } .toolbar form { display: flex; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 14px; margin: 0; box-shadow: none; } .toolbar input[type=text], .toolbar input[type=number] { width: auto; } #zoeken { min-width: 240px; } .prijsform { display: flex; gap: 6px; align-items: center; } .prijsform input { width: 100px; } /* Uren-inklok status */ .uren-klok-actief { background: var(--success-soft); border-color: #bfe0cc; } /* Datalijst-stijl invoervelden (advies inkoop / materiaal toevoegen) */ input.product, input.omschrijving { flex: 2; min-width: 220px; } input.variant { flex: 1; min-width: 140px; } input.hoeveelheid, input.aantal { width: 100px; } select.voorkeur { min-width: 170px; flex: 1; } input.naam { flex: 2; min-width: 200px; } input.klant { flex: 1; min-width: 160px; } input.adres { flex: 2; min-width: 200px; } input.aanneemsom { width: 150px; } input.datum { width: 155px; } .adhoc-regel input.adhoc-omschrijving { flex: 2; min-width: 220px; } .adhoc-regel input.adhoc-bedrag { width: 130px; } /* Responsief: geen horizontale scroll op de body, brede tabellen scrollen zelf */ .vb-tabel-scroll { overflow-x: auto; } @media (max-width: 640px) { body { padding: 18px 14px; } .vb-navbalk { margin: -18px -14px 20px; padding: 0 14px; } nav.vb-nav { flex-wrap: wrap; row-gap: 6px; padding: 12px 0; } .kaarten { flex-direction: column; } .vb-grafiek-vak { height: 220px; } .vb-grafiek-vak--rond { height: 200px; } }