/* ============================================================ Feddali Portal — Design System Kleurenschema: OKLCH rond hue 256 (het merkblauw), met één accentkleur die opvalt tegen rustige, bijna-neutrale vlakken. Fonts: Sora (headings) + DM Sans (body) Volledig ondersteund donker thema (systeemvoorkeur of handmatige toggle via data-theme op , zie portal.js). ============================================================ */ :root { color-scheme: light dark; --bg: #f8fafd; --surface: #f0f4fa; --surface-2: #e4eaf2; --border: #d6dde7; --text: #101d2f; --text-muted: #5c6a7d; --deep: #103c73; --accent: #0165cb; --accent-hover: #0055ad; --on-accent: #ffffff; --signal: #05b3c1; } @supports (color: oklch(0% 0 0)) { :root { --bg: oklch(98.5% 0.004 256); --surface: oklch(96.5% 0.009 256); --surface-2: oklch(93.5% 0.013 256); --border: oklch(89.5% 0.016 256); --text: oklch(23.0% 0.040 256); --text-muted: oklch(52.0% 0.035 256); --deep: oklch(36.0% 0.105 256); --accent: oklch(52.0% 0.190 256); --accent-hover: oklch(46.0% 0.175 256); --signal: oklch(70.0% 0.150 205); } } /* Donker thema via systeemvoorkeur, tenzij handmatig naar licht gezet met data-theme="light" op . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #070b11; --surface: #10161f; --surface-2: #1a222d; --border: #27313f; --text: #f0f4f9; --text-muted: #828d9c; --deep: #103c73; --accent: #288aff; --accent-hover: #569fff; --on-accent: #070b11; --signal: #08c8d8; } } @supports (color: oklch(0% 0 0)) { @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: oklch(15.0% 0.014 256); --surface: oklch(20.0% 0.020 256); --surface-2: oklch(25.0% 0.024 256); --border: oklch(31.0% 0.028 256); --text: oklch(96.5% 0.008 256); --text-muted: oklch(64.0% 0.025 256); --deep: oklch(36.0% 0.105 256); --accent: oklch(64.0% 0.200 256); --accent-hover: oklch(70.0% 0.180 256); --signal: oklch(76.0% 0.140 205); } } } /* Handmatige thema-knop (portal.js zet data-theme op ; krijgt altijd voorrang op de systeemvoorkeur hierboven). */ :root[data-theme="dark"] { --bg: #070b11; --surface: #10161f; --surface-2: #1a222d; --border: #27313f; --text: #f0f4f9; --text-muted: #828d9c; --deep: #103c73; --accent: #288aff; --accent-hover: #569fff; --on-accent: #070b11; --signal: #08c8d8; } @supports (color: oklch(0% 0 0)) { :root[data-theme="dark"] { --bg: oklch(15.0% 0.014 256); --surface: oklch(20.0% 0.020 256); --surface-2: oklch(25.0% 0.024 256); --border: oklch(31.0% 0.028 256); --text: oklch(96.5% 0.008 256); --text-muted: oklch(64.0% 0.025 256); --deep: oklch(36.0% 0.105 256); --accent: oklch(64.0% 0.200 256); --accent-hover: oklch(70.0% 0.180 256); --signal: oklch(76.0% 0.140 205); } } :root[data-theme="light"] { --bg: #f8fafd; --surface: #f0f4fa; --surface-2: #e4eaf2; --border: #d6dde7; --text: #101d2f; --text-muted: #5c6a7d; --deep: #103c73; --accent: #0165cb; --accent-hover: #0055ad; --on-accent: #ffffff; --signal: #05b3c1; } @supports (color: oklch(0% 0 0)) { :root[data-theme="light"] { --bg: oklch(98.5% 0.004 256); --surface: oklch(96.5% 0.009 256); --surface-2: oklch(93.5% 0.013 256); --border: oklch(89.5% 0.016 256); --text: oklch(23.0% 0.040 256); --text-muted: oklch(52.0% 0.035 256); --deep: oklch(36.0% 0.105 256); --accent: oklch(52.0% 0.190 256); --accent-hover: oklch(46.0% 0.175 256); --signal: oklch(70.0% 0.150 205); } } /* ============================================================ Component-tokens De rest van dit bestand verwijst naar --c-* variabelen (nooit rechtstreeks naar de basistokens hierboven), zodat het thema op één plek (hierboven) wisselt. Statuskleuren (succes/waarschuwing/ gevaar/info) hebben in dit kleursysteem geen eigen hue meer — ze worden neutraal, en onderscheiden zich via icoon en tekst, niet via kleur (zie opleverrapport voor de afweging). ============================================================ */ :root { --sidebar-breedte: 260px; --font-hoofd: 'Outfit', sans-serif; --font-body: 'DM Sans', sans-serif; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-xl: 24px; --c-bg: var(--bg); --c-surface: var(--surface); --c-surface-2: var(--surface-2); --c-border: var(--border); --c-border-soft: var(--border); --c-border-strong: var(--border); --c-ink: var(--text); --c-ink-2: var(--text); --c-muted: var(--text-muted); --c-muted-2: var(--text-muted); --c-hover: var(--surface-2); --c-input-bg: var(--surface); --c-input-border: var(--border); --c-accent: var(--accent); --c-accent-strong: var(--accent-hover); --c-accent-soft: var(--surface-2); --c-accent-border: var(--border); --c-accent-border-soft: var(--border); --c-accent-ring: var(--accent); --c-succes-bg: var(--surface-2); --c-succes-ink: var(--text); --c-succes-border: var(--border); --c-gevaar-bg: var(--surface-2); --c-gevaar-ink: var(--text); --c-gevaar-border: var(--border); --c-gevaar-bg-strong: var(--surface-2); --c-gevaar-ink-strong: var(--text); --c-waarschuw-bg: var(--surface-2); --c-waarschuw-ink: var(--text); --c-waarschuw-border: var(--border); --c-info-bg: var(--surface-2); --c-info-ink: var(--text); --c-info-border: var(--border); --sidebar-bg: var(--deep); --sidebar-rand: var(--border); /* Vaste donkere vlakken (sidebar, inlogscherm, timerbalk) blijven donker ongeacht het thema — --text/--surface wisselen dan mee met licht/donker en zouden dus geen contrast garanderen. Deze afgeleide tokens geven content op --deep altijd leesbaar wit, opgebouwd uit dezelfde neutrale/witte basis als --on-accent. */ --deep-ink: #ffffff; --deep-ink-muted: rgba(255,255,255,0.65); --deep-surface: rgba(255,255,255,0.06); --deep-surface-2: rgba(255,255,255,0.10); --deep-border: rgba(255,255,255,0.14); --deep-hover: rgba(255,255,255,0.08); /* Inlogscherm: dieper navy dan --deep, met twee zachte lichtpunten in de hoeken. Bewust vaste waarden: het inlogscherm is altijd donker, ongeacht het thema. */ --login-bg: #0f1f3d; --login-gloed-1: rgba(37,99,235,0.20); --login-gloed-2: rgba(77,166,232,0.10); --schaduw-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --schaduw: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); --schaduw-lg: 0 10px 30px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.06); } /* ============================================================ Reset & Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 15px; color: var(--c-ink-2); background: var(--c-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color 0.2s, color 0.2s; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-hoofd); font-weight: 700; line-height: 1.2; color: var(--c-ink); } a { text-decoration: none; color: var(--c-accent); } a:hover { color: var(--c-accent-strong); } /* Zichtbare focusring op elk interactief element, ongeacht type. Specifieke componenten (formuliervelden, sidebar-knoppen) mogen dit verfijnen, maar dit is overal de basis. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .btn-primair:focus-visible, .btn-secundair:focus-visible, .btn-icoon:focus-visible, .nav-item:focus-visible, .periode-pil:focus-visible, .status-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Respecteer de voorkeur voor minder beweging. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ Layout ============================================================ */ .portal-layout { display: flex; min-height: 100vh; } /* ============================================================ Sidebar ============================================================ */ .sidebar { width: var(--sidebar-breedte); /* Exact schermhoog, niet minimaal schermhoog: de sidebar staat fixed en kan dus niet meescrollen. Groeide hij door, dan viel de footer met de naam, themaknop en uitloggen onbereikbaar buiten beeld. */ height: 100vh; height: 100dvh; /* mobiel: houdt rekening met de adresbalk */ background: var(--sidebar-bg); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s; border-right: 1px solid var(--sidebar-rand); } /* Subtiele achtergrondtextuur */ .sidebar::before { content: ''; position: absolute; inset: 0; pointer-events: none; } .sidebar-header { display: flex; align-items: center; gap: 12px; padding: 24px 20px 20px; border-bottom: 1px solid var(--sidebar-rand); flex-shrink: 0; /* logo blijft altijd bovenaan staan */ position: relative; z-index: 1; } .sidebar-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; } .brand-name { display: block; font-family: var(--font-hoofd); font-size: 16px; font-weight: 800; color: var(--deep-ink); letter-spacing: 0.01em; line-height: 1.1; } .brand-sub { display: block; font-size: 11px; color: var(--deep-ink-muted); font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; } .sidebar-nav { /* Alleen dit deel scrollt als het menu niet past. Kop en footer blijven staan waar ze staan. */ flex: 1 1 auto; min-height: 0; /* zonder dit weigert een flex-kind te krimpen */ overflow-y: auto; overscroll-behavior: contain; padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; scrollbar-width: thin; scrollbar-color: var(--deep-surface-2) transparent; } /* Smalle, onopvallende scrollbalk in de sidebar (WebKit) */ .sidebar-nav::-webkit-scrollbar { width: 6px; } .sidebar-nav::-webkit-scrollbar-track { background: transparent; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--deep-surface-2); border-radius: 3px; } .sidebar-nav:hover::-webkit-scrollbar-thumb { background: var(--deep-border); } .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius); color: var(--deep-ink-muted); font-size: 14px; font-weight: 500; transition: all 0.18s ease; position: relative; } .nav-item i { font-size: 17px; flex-shrink: 0; width: 20px; text-align: center; } .nav-item:hover { background: var(--deep-hover); color: var(--deep-ink); } .nav-item.active { background: var(--accent); color: var(--on-accent); font-weight: 600; } .nav-divider { height: 1px; background: var(--sidebar-rand); margin: 10px 4px; } .sidebar-footer { padding: 12px; border-top: 1px solid var(--sidebar-rand); flex-shrink: 0; /* blijft altijd onderaan in beeld */ position: relative; z-index: 2; background: var(--sidebar-bg); } .user-card { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: var(--radius); background: var(--deep-surface); } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--deep-surface-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-hoofd); font-weight: 700; font-size: 14px; color: var(--deep-ink); flex-shrink: 0; } .user-info { flex: 1; min-width: 0; } .user-name { display: block; font-size: 13px; font-weight: 600; color: var(--deep-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { display: block; font-size: 11px; color: var(--deep-ink-muted); } .btn-uitloggen, .btn-thema { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--deep-ink-muted); transition: all 0.15s; flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: 15px; } .btn-uitloggen:hover { background: var(--deep-hover); color: var(--deep-ink); } .btn-thema:hover { background: var(--deep-hover); color: var(--deep-ink); } /* ── Thema wisselen en uitloggen: eigen rij onder de naam ───── Als icoontjes van 30 bij 30 naast een afgekapte naam waren ze nauwelijks te raken. Nu twee brede knoppen met tekst erbij. */ .user-acties { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; } .user-actie { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; /* comfortabel aan te tikken, ook op mobiel */ padding: 0 8px; border: 1px solid var(--deep-border); border-radius: var(--radius-sm); background: var(--deep-surface); color: var(--deep-ink-muted); font-family: var(--font-body); font-size: 12px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; } .user-actie i { font-size: 14px; line-height: 1; } .user-actie:hover { background: var(--deep-surface-2); border-color: var(--deep-border); color: var(--deep-ink); } .user-actie:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .user-actie.uitloggen:hover { background: var(--deep-surface-2); border-color: var(--deep-border); color: var(--deep-ink); } /* ============================================================ Main Content ============================================================ */ .main-content { flex: 1; margin-left: var(--sidebar-breedte); min-height: 100vh; display: flex; flex-direction: column; background: var(--c-bg); } .page-inner { flex: 1; padding: 32px 36px; max-width: 1400px; } /* ============================================================ Mobile topbar ============================================================ */ .mobile-topbar { display: none; align-items: center; gap: 14px; padding: 14px 20px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 50; } .mobile-logo { height: 28px; } .sidebar-toggle { background: none; border: none; font-size: 22px; color: var(--c-ink-2); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); } .sidebar-toggle:hover { background: var(--c-hover); } /* ============================================================ Pagina header ============================================================ */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 32px; gap: 16px; } .page-title { font-size: 26px; font-weight: 800; color: var(--c-ink); } .page-subtitle { font-size: 14px; color: var(--c-muted); margin-top: 3px; font-weight: 400; } /* ============================================================ Statistieken kaarten ============================================================ */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 28px; } .stat-kaart { background: var(--c-surface); border-radius: var(--radius-lg); padding: 24px; border: 1px solid var(--c-border); position: relative; transition: border-color 0.18s, background-color 0.2s; } .stat-kaart:hover { border-color: var(--c-border-strong); } .stat-label { font-size: 12px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; } .stat-waarde { font-family: var(--font-hoofd); font-size: 28px; font-weight: 700; color: var(--c-ink); line-height: 1; margin-bottom: 6px; } .stat-waarde.groot { font-size: 32px; } .stat-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 20px; } .stat-badge.positief { background: var(--c-succes-bg); color: var(--c-succes-ink); } .stat-badge.negatief { background: var(--c-gevaar-bg); color: var(--c-gevaar-ink); } .stat-badge.neutraal { background: var(--c-hover); color: var(--c-muted); } .stat-icoon { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 20px; } .stat-icoon.blauw { background: var(--surface-2); color: var(--accent); } .stat-icoon.groen { background: var(--surface-2); color: var(--text-muted); } .stat-icoon.oranje { background: var(--surface-2); color: var(--text-muted); } .stat-icoon.rood { background: var(--surface-2); color: var(--text-muted); } /* ============================================================ Kaarten / Panelen ============================================================ */ .kaart { background: var(--c-surface); border-radius: var(--radius-lg); border: 1px solid var(--c-border); box-shadow: var(--schaduw-sm); overflow: hidden; } .kaart-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--c-border-soft); } .kaart-titel { font-family: var(--font-hoofd); font-size: 16px; font-weight: 700; color: var(--c-ink); } .kaart-body { padding: 24px; } /* ============================================================ Tabellen ============================================================ */ .tabel-wrapper { overflow-x: auto; } .tabel { width: 100%; border-collapse: collapse; } .tabel th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-muted); padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--c-border); white-space: nowrap; } .tabel td { padding: 14px 16px; font-size: 14px; color: var(--c-ink-2); border-bottom: 1px solid var(--c-border-soft); vertical-align: middle; } .tabel tr:last-child td { border-bottom: none; } .tabel tbody tr { transition: background 0.12s; } .tabel tbody tr:hover { background: var(--c-accent-soft); } .tabel .getal { text-align: right; font-variant-numeric: tabular-nums; } /* ============================================================ Status badges ============================================================ */ .status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; white-space: nowrap; } .status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .status-concept { background: var(--c-hover); color: var(--c-muted); } .status-verzonden { background: var(--c-info-bg); color: var(--c-info-ink); } .status-betaald { background: var(--c-succes-bg); color: var(--c-succes-ink); } .status-te-laat { background: var(--c-gevaar-bg); color: var(--c-gevaar-ink); } /* ============================================================ Knoppen ============================================================ */ .btn-primair { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--accent); color: var(--on-accent); border: none; border-radius: var(--radius); font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.18s; text-decoration: none; } .btn-primair:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-1px); box-shadow: var(--schaduw); } .btn-secundair { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--c-surface); color: var(--c-ink-2); border: 1px solid var(--c-border-strong); border-radius: var(--radius); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; text-decoration: none; } .btn-secundair:hover { background: var(--c-hover); border-color: var(--c-muted-2); color: var(--c-ink); } .btn-gevaar { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--c-gevaar-bg); color: var(--c-gevaar-ink); border: 1px solid var(--c-gevaar-border); border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; text-decoration: none; } .btn-gevaar:hover { background: var(--c-gevaar-bg-strong); color: var(--c-gevaar-ink-strong); } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-lg { padding: 13px 28px; font-size: 15px; } /* Icon knoppen */ .btn-icoon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-muted); cursor: pointer; transition: all 0.15s; text-decoration: none; } .btn-icoon:hover { background: var(--c-accent-soft); border-color: var(--c-accent-border); color: var(--c-info-ink); } /* ============================================================ Formulieren ============================================================ */ .form-label { font-size: 13px; font-weight: 600; color: var(--c-ink-2); margin-bottom: 6px; } .form-control, .form-select { font-family: var(--font-body); font-size: 14px; border: 1.5px solid var(--c-input-border); border-radius: var(--radius); padding: 10px 14px; color: var(--c-ink); background: var(--c-input-bg); transition: border-color 0.15s, box-shadow 0.15s, background-color 0.2s; } .form-control:focus, .form-select:focus { border-color: var(--c-accent); outline: none; } .form-control:focus-visible, .form-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .form-control::placeholder { color: var(--c-muted-2); } /* ============================================================ Factuurregels editor ============================================================ */ .factuurregels-tabel th, .factuurregels-tabel td { padding: 8px; } .factuurregels-tabel input, .factuurregels-tabel select { font-size: 13px; padding: 7px 10px; } .rij-verwijder { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--c-muted-2); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; } .rij-verwijder:hover { background: var(--c-gevaar-bg); color: var(--text); } /* ============================================================ Grafiek container ============================================================ */ .grafiek-container { position: relative; height: 280px; } /* ============================================================ Lege toestand ============================================================ */ .leeg-staat { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--c-muted-2); text-align: center; gap: 12px; } .leeg-staat i { font-size: 40px; opacity: 0.4; } .leeg-staat h4 { font-size: 16px; color: var(--c-muted); font-weight: 600; } .leeg-staat p { font-size: 13px; max-width: 280px; line-height: 1.5; } /* ============================================================ Meldingen / Alerts ============================================================ */ .melding { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: var(--radius); font-size: 14px; margin-bottom: 20px; } .melding.succes { background: var(--c-succes-bg); color: var(--c-succes-ink); border: 1px solid var(--c-succes-border); } .melding.fout { background: var(--c-gevaar-bg); color: var(--c-gevaar-ink); border: 1px solid var(--c-gevaar-border); } .melding.info { background: var(--c-info-bg); color: var(--c-info-ink); border: 1px solid var(--c-info-border); } .melding.waarschuw { background: var(--c-waarschuw-bg); color: var(--c-waarschuw-ink); border: 1px solid var(--c-waarschuw-border); } /* ============================================================ Login pagina Bewust altijd donker — een vast, herkenbaar "voorblad"-moment los van het licht/donker thema van de rest van de portal. ============================================================ */ .login-pagina { min-height: 100vh; background: var(--login-bg); display: flex; align-items: center; justify-content: center; padding: 20px; font-family: 'Outfit', sans-serif; position: relative; overflow: hidden; } /* Twee zachte lichtpunten: groot rechtsboven, kleiner linksonder. */ .login-pagina::before { content: ''; position: absolute; width: 600px; height: 600px; top: -200px; right: -200px; border-radius: 50%; background: radial-gradient(circle, var(--login-gloed-1) 0%, transparent 70%); pointer-events: none; } .login-pagina::after { content: ''; position: absolute; width: 400px; height: 400px; bottom: -100px; left: -100px; border-radius: 50%; background: radial-gradient(circle, var(--login-gloed-2) 0%, transparent 70%); pointer-events: none; } .login-box { width: 100%; max-width: 400px; position: relative; z-index: 1; } .login-header { text-align: center; margin-bottom: 40px; } .login-logo { width: 250px; height: auto; object-fit: contain; mix-blend-mode: screen; } .login-titel { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700; color: var(--deep-ink); margin-bottom: 4px; } .login-subtitel { font-size: 14px; font-weight: 300; color: var(--deep-ink-muted); } .login-kaart { background: var(--deep-surface); border: 1px solid var(--deep-border); border-radius: 16px; padding: 36px; } .login-kaart .form-label { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 500; color: var(--deep-ink-muted); margin-bottom: 6px; } .login-kaart .form-control { font-family: 'Outfit', sans-serif; font-size: 15px; background: var(--deep-surface-2); border: 1px solid var(--deep-border); border-radius: 8px; color: var(--deep-ink); padding: 11px 14px; transition: border-color 0.15s; } .login-kaart .form-control:focus { background: var(--deep-surface-2); border-color: var(--accent); color: var(--deep-ink); outline: none; } .login-kaart .form-control:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .login-kaart .form-control::placeholder { color: var(--deep-ink-muted); } .btn-login { width: 100%; padding: 12px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 8px; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; margin-top: 8px; letter-spacing: 0.01em; } .btn-login:hover { background: var(--accent-hover); } /* ============================================================ Klantenportaal — topbar layout (geen sidebar) ============================================================ */ .klant-topbar { background: var(--c-surface); border-bottom: 1px solid var(--c-border); padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 50; } .klant-topbar-logo { height: 30px; display: block; } .klant-nav { display: flex; gap: 4px; } .klant-nav a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius); font-size: 14px; font-weight: 500; color: var(--c-ink-2); transition: all 0.15s; } .klant-nav a:hover { background: var(--c-hover); color: var(--c-ink); } .klant-nav a.active { background: var(--c-accent-soft); color: var(--c-info-ink); font-weight: 600; } .klant-account { display: flex; align-items: center; gap: 10px; } .klant-account-naam { font-size: 13px; font-weight: 600; color: var(--c-ink-2); } .klant-content { max-width: 1100px; margin: 0 auto; padding: 32px 24px 64px; } .klant-mobile-toggle { display: none; background: none; border: none; font-size: 22px; color: var(--c-ink-2); cursor: pointer; } @media (max-width: 860px) { .klant-nav { display: none; } .klant-nav.open { display: flex; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background: var(--c-surface); border-bottom: 1px solid var(--c-border); padding: 12px; box-shadow: var(--schaduw); } .klant-account-naam { display: none; } .klant-mobile-toggle { display: block; } } /* ============================================================ Breadcrumbs ============================================================ */ .breadcrumb-portal { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-muted-2); margin-bottom: 8px; } .breadcrumb-portal a { color: var(--c-muted); } .breadcrumb-portal a:hover { color: var(--c-accent); } .breadcrumb-portal .huidig { color: var(--c-ink-2); font-weight: 500; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 992px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); box-shadow: var(--schaduw-lg); } .main-content { margin-left: 0; } .mobile-topbar { display: flex; } .page-inner { padding: 24px 20px; } .stats-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 576px) { .stats-grid { grid-template-columns: 1fr; } .page-header { flex-direction: column; } } /* ============================================================ Sidebar overlay (mobile) ============================================================ */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; backdrop-filter: blur(2px); } .sidebar-overlay.zichtbaar { display: block; } /* ============================================================ Animaties ============================================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeInUp 0.4s ease both; } .fade-in-delay-1 { animation-delay: 0.06s; } .fade-in-delay-2 { animation-delay: 0.12s; } .fade-in-delay-3 { animation-delay: 0.18s; } .fade-in-delay-4 { animation-delay: 0.24s; } /* ============================================================ Uren — timer balk Bewust een vaste donkere accentbalk, in beide thema's. ============================================================ */ .timer-balk { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--deep); color: var(--deep-ink); border-radius: var(--radius-lg); padding: 14px 20px; margin-bottom: 20px; box-shadow: var(--schaduw-lg); } .timer-balk-info { display: flex; align-items: center; gap: 12px; } .timer-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent); animation: timerPuls 1.6s infinite; flex-shrink: 0; } @keyframes timerPuls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent); } 70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--signal) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 0%, transparent); } } .timer-balk-titel { font-weight: 600; font-size: 14px; } .timer-balk-sub { font-size: 12px; color: var(--deep-ink-muted); } .timer-balk-tijd { font-family: var(--font-hoofd); font-weight: 700; font-size: 20px; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; } /* ============================================================ Uren — sidebar (projecten/klanten tree) ============================================================ */ .uren-sidebar-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--c-ink-2); margin-bottom: 2px; transition: background 0.15s; } .uren-sidebar-item:hover { background: var(--c-hover); color: var(--c-ink); } .uren-sidebar-item.actief { background: var(--c-accent-soft); color: var(--c-info-ink); font-weight: 600; } .uren-sidebar-item span:last-child { color: var(--c-muted-2); font-size: 12px; white-space: nowrap; } .uren-sidebar-item.actief span:last-child { color: var(--c-accent); } .uren-sidebar-item-klant { font-weight: 700; color: var(--c-ink); margin-top: 8px; } .uren-sidebar-item-project { padding-left: 20px; } /* ============================================================ Uren — weekgrid ============================================================ */ .uren-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; } .uren-dag-kolom { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); min-height: 220px; display: flex; flex-direction: column; overflow: hidden; } .uren-dag-kolom.vandaag { border-color: var(--c-accent-border); box-shadow: 0 0 0 2px var(--c-accent-ring); } .uren-dag-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--c-border-soft); background: var(--c-surface-2); } .uren-dag-naam { font-family: var(--font-hoofd); font-weight: 700; font-size: 13px; color: var(--c-ink-2); } .uren-dag-datum { font-size: 12px; color: var(--c-muted-2); margin-left: 4px; } .uren-dag-totaal { font-size: 11px; font-weight: 700; color: var(--c-info-ink); } .uren-dag-body { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .uren-entry-kaart { display: block; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; text-decoration: none; transition: box-shadow 0.15s, transform 0.15s; } .uren-entry-kaart:hover { box-shadow: var(--schaduw-sm); transform: translateY(-1px); } .uren-entry-kaart.gefactureerd { background: var(--surface); border-color: var(--border); border-left-color: var(--signal); } .uren-entry-duur { font-size: 11px; font-weight: 700; color: var(--text); } .uren-entry-kaart.gefactureerd .uren-entry-duur { color: var(--text); } .uren-entry-omschrijving { font-size: 12px; color: var(--c-ink-2); line-height: 1.4; margin-top: 2px; } .uren-entry-project { font-size: 11px; color: var(--c-muted); margin-top: 4px; } .uren-dag-toevoegen { border: 1px dashed var(--c-border-strong); background: transparent; color: var(--c-muted-2); border-radius: var(--radius-sm); padding: 6px; font-size: 12px; cursor: pointer; transition: all 0.15s; } .uren-dag-toevoegen:hover { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-soft); } @media (max-width: 992px) { .uren-week-grid { grid-template-columns: repeat(7, minmax(140px, 1fr)); overflow-x: auto; } } /* ============================================================ Dashboard — kop, periodekiezer en kerncijfers ============================================================ */ .dash-kop { margin-bottom: 20px; } .dash-groet { font-family: var(--font-hoofd); font-size: 30px; font-weight: 700; color: var(--c-accent-strong); line-height: 1.1; margin: 0; } .dash-subtitel { font-size: 14px; font-weight: 600; color: var(--c-muted); margin: 6px 0 0; } /* ── Pillen: week / maand / kwartaal / jaar / alles ────────── */ .periode-kiezer { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .periode-pil { display: inline-flex; align-items: center; padding: 9px 22px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-ink-2); font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color 0.15s, background-color 0.15s, color 0.15s; } .periode-pil:hover { border-color: var(--c-accent); color: var(--c-accent); } .periode-pil.actief { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } .periode-pil.actief:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); } /* ── Navigatie: ← Juli 2026 → ──────────────────────────────── */ .periode-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .periode-pijl { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--c-accent); font-size: 17px; text-decoration: none; transition: background-color 0.15s, color 0.15s; } .periode-pijl:hover { background: var(--c-accent-soft); color: var(--c-accent-strong); } .periode-pijl.uit { color: var(--c-border-strong); cursor: default; } .periode-pijl.uit:hover { background: transparent; color: var(--c-border-strong); } .periode-label { font-family: var(--font-hoofd); font-size: 17px; font-weight: 700; color: var(--c-ink); } .periode-terug { margin-left: auto; font-size: 14px; color: var(--c-muted); text-decoration: none; transition: color 0.15s; } .periode-terug:hover { color: var(--c-accent); } .periode-terug.uit { color: var(--c-border-strong); pointer-events: none; } /* ── Kerncijfers ───────────────────────────────────────────── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 28px; } .kpi-tegel { background: var(--c-accent-soft); border: 1px solid var(--c-accent-border-soft); border-radius: var(--radius); padding: 18px 20px; text-align: right; transition: border-color 0.18s; } .kpi-tegel:hover { border-color: var(--c-accent-border); } .kpi-label { font-size: 12px; font-weight: 700; color: var(--c-accent-strong); text-transform: uppercase; letter-spacing: 0.05em; } .kpi-waarde { font-family: var(--font-hoofd); font-size: 26px; font-weight: 700; color: var(--c-accent-strong); line-height: 1.15; margin-top: 6px; } .kpi-extra { font-size: 11px; font-weight: 500; color: var(--c-muted); margin-top: 6px; min-height: 15px; } /* De laatste tegel springt eruit: donkerblauw vlak, zoals in het ontwerp. Voorheen sprong "negatief" in rood op — dat botst met de regel dat accentblauw nooit als vlakvulling voor een hele sectie/tegel dient en met het strikte statuskleurenbeleid; beide varianten gebruiken nu hetzelfde donkere vlak (--deep) en het onderscheid komt uit het cijfer zelf (het teken van het bedrag). */ .kpi-tegel.accent { background: var(--deep); border-color: var(--deep); } .kpi-tegel.accent:hover { border-color: var(--accent); } .kpi-tegel.accent .kpi-label, .kpi-tegel.accent .kpi-waarde { color: var(--deep-ink); } .kpi-tegel.accent .kpi-extra { color: var(--deep-ink-muted); } .kpi-tegel.accent.negatief { background: var(--deep); border-color: var(--deep); } .kpi-tegel.accent.negatief:hover { border-color: var(--accent); } .openstaand-samenvatting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--c-border-soft); } @media (max-width: 576px) { .dash-groet { font-size: 24px; } .periode-pil { padding: 8px 16px; font-size: 13px; } .kpi-waarde { font-size: 22px; } .periode-terug { font-size: 13px; } }