/* vorio-base.css — Vorio Gedeelde Stijl Versie 3.0 Merge van vorio-stijl.css v2.0 + admin.php/dossiers.html design tokens. Backwards-compat: zowel --p (legacy) als --accent (nieuw) bestaan. Kantoor-kleuren worden overschreven via CSS-variabelen vanuit DB. */ /* ── CSS Variabelen */ :root { /* Primary (legacy --p naming + nieuwere --accent alias) */ --p: #1a6bdc; --p2: #1558c0; --p-light: #e8f4fc; --accent: var(--p); --accent2: var(--p2); --accent-light: var(--p-light); --row-hover: rgba(26,107,220,.06); --grad: linear-gradient(135deg, var(--p2), var(--p)); /* Backgrounds */ --bg: #f0f4f8; --bg2: #ffffff; --bg3: #f8fafc; --bg4: #f1f5f9; /* Borders */ --border: #e2e8f0; --border2: #d0d7e2; /* Text */ --text1: #1a1a2e; --text2: #475569; --text3: #64748b; /* Status colors */ --green: #15803d; --green-light: #f0fdf4; --green-bg: #dcfce7; --green-border: #b7e4c7; --green-text: var(--green); --red: #b91c1c; --red-solid: #dc2626; --red-light: #fef2f2; --red-border: #f5c6c2; --red-bg: rgba(239,68,68,.10); --red-text: #7f1d1d; --amber: #d97706; --amber-light: #fffbeb; --amber-text: var(--amber); --amber-bg: rgba(217,119,6,.10); --amber-border: rgba(217,119,6,.25); --purple: #7c3aed; --purple-light:#f5f3ff; --goud: #c8a96e; --goud2: #8b7345; --goud-light: #faf5ec; /* Layout — radius-scale */ --r-xs: 4px; --r-sm: 6px; --r: 10px; /* --r-md alias */ --r-md: var(--r); --r-lg: 14px; --r-xl: 18px; --r-2xl:22px; --r-pill: 999px; --shadow: 0 1px 4px rgba(0,0,0,.06); /* Focus-ring (4px translucent accent) */ --ring: 0 0 0 4px color-mix(in srgb, var(--accent,#1a6bdc) 14%, transparent); /* Gap-alias */ --gap: var(--space-3); /* Typography */ --font: 'DM Sans', system-ui, -apple-system, sans-serif; --mono: 'DM Sans', system-ui, sans-serif; /* Universele font-tokens (gebruikt in per-page CSS — moeten in beide thema's bestaan) */ --font-display: 'DM Serif Display', serif; --font-body: 'DM Sans', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; --font-kantoor: var(--font-body); --font-mono: 'DM Mono', monospace; /* Vorio design-tokens */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --font-xs: 10.5px; --font-sm: 12px; --font-md: 13.5px; --font-lg: 15px; --font-xl: 18px; --font-2xl: 22px; --shadow-sm: 0 1px 3px rgba(15,23,42,.06); --shadow-md: 0 4px 14px rgba(15,23,42,.08); --shadow-lg: 0 10px 30px rgba(15,23,42,.12); /* Surfaces / inputs (semantische tokens — los van bg2 voor dark-mode-controle) */ --surface: var(--bg2); /* card-oppervlak */ --surface-2: var(--bg3); /* genest oppervlak, subtieler */ --surface-hover: var(--bg4); /* hover-state op rijen/items */ --input-bg: var(--bg2); --input-border: var(--border2); --code-bg: var(--bg4); /* Legacy per-page aliassen (compat — voorheen in per-page :root gedefinieerd) */ --text: var(--text1); --muted: var(--text3); --pl: var(--p-light); /* light primary tint */ --pg: var(--p-light); /* primary "page" tint, was iets lichter blauw */ --bg1: var(--bg); } /* ── Dark-modus tokens (data-theme="dark" op ) */ /* Slim ontwerp: overschrijft alleen tokens; alles wat var(--…) gebruikt past automatisch aan. Inline hex codes in HTML moeten worden vervangen door deze tokens om dark-modus te laten werken. */ html[data-theme="dark"] { /* Backgrounds — slate-900/800 schaal */ --bg: #0b1220; --bg2: #111a2c; /* card */ --bg3: #0f1729; /* subtieler */ --bg4: #1a2540; /* hover */ /* Borders */ --border: #2a3550; --border2: #3a4664; /* Text */ --text1: #e6ebf4; --text2: #b6c0d3; --text3: #8a96ac; /* Primary blijft kantoorkleur (kan via inline override worden gewijzigd), maar lichte tint wordt transparant zodat hij over donker oppervlak werkt. */ --p-light: rgba(26,107,220,.22); --accent-light: var(--p-light); --row-hover: rgba(95,161,240,.07); /* Status — light/bg variant transparant maken voor donker oppervlak */ --green-light: rgba(34,197,94,.14); --green-bg: rgba(34,197,94,.22); --green-border: rgba(34,197,94,.40); --green-text: #4ade80; --green: #4ade80; --red-light: rgba(239,68,68,.14); --red-border:rgba(239,68,68,.32); --red-text:#ef8276; --red-solid: #dc2626; --amber-light: rgba(217,119,6,.14); --amber-border: rgba(251,191,36,.35); --amber-text: #fbbf24; --amber: #fbbf24; --purple-light: rgba(167,139,250,.22); --purple: #c4b5fd; --goud-light: rgba(200,169,110,.16); /* Semantische surface-tokens herdefinieren voor donker contrast */ --surface: var(--bg2); --surface-2: var(--bg3); --surface-hover: var(--bg4); --input-bg: var(--bg3); --input-border: var(--border2); --code-bg: var(--bg4); /* Legacy per-page aliassen */ --text: var(--text1); --muted: var(--text3); --pl: var(--p-light); --pg: var(--p-light); --bg1: var(--bg); /* Schaduwen sterker (op donker oppervlak nauwelijks zichtbaar) */ --shadow: 0 1px 4px rgba(0,0,0,.45); --shadow-sm: 0 1px 3px rgba(0,0,0,.35); --shadow-md: 0 4px 14px rgba(0,0,0,.45); --shadow-lg: 0 10px 30px rgba(0,0,0,.55); color-scheme: dark; } /* Standaard color-scheme voor lichte modus (helpt form controls + scrollbars) */ html { color-scheme: light } /* Smooth thema-transitie (vermijdt flits bij toggle) */ html[data-theme-transition] body, html[data-theme-transition] body * { transition: background-color .18s ease, color .18s ease, border-color .18s ease, fill .18s ease, stroke .18s ease !important; } /* ── Reset & Base */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 } body { font-family: var(--font); background: var(--bg); color: var(--text1); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; } a { color: inherit; text-decoration: none } /* ── Typografie */ h1 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 3px; color: var(--text1) } h2 { font-size: 16px; font-weight: 700; color: var(--text1) } h3 { font-size: 14px; font-weight: 700; color: var(--text1) } /* ── Kaarten */ .vr-card { background: var(--bg2); border-radius: 12px; padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--shadow); } .vr-card-title { font-size: 14.5px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; } /* ── Knoppen (.vr-btn legacy + .btn nieuwere conventie) */ .vr-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--p); color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: filter .15s; text-decoration: none; } .vr-btn:hover { filter: brightness(1.1) } .vr-btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 6px } .vr-btn-ghost { background: var(--bg4); color: var(--text2); border: none } .vr-btn-ghost:hover { background: var(--border); filter: none } .vr-btn-sec { background: transparent; color: var(--p); border: 1.5px solid var(--p) } .vr-btn-sec:hover { background: var(--p-light); filter: none } .vr-btn-rood { background: var(--red); color: #fff } .vr-btn-groen { background: var(--green); color: #fff } .vr-btn-amber { background: var(--amber); color: #fff } .vr-btn:disabled { opacity: .5; cursor: not-allowed } /* .btn varianten (admin.php / dossiers.html stijl) */ .btn { display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all .15s; border: none; text-decoration: none; } .btn-primair, .btn-primary { background: var(--accent); color: #fff } .btn-primary:hover { background: var(--accent2) } .btn-ghost { background:var(--bg2); color: var(--text2); border:1px solid var(--border) } .btn-ghost:hover { background:var(--bg3); border-color:var(--border2); filter: none } .btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 6px } .btn-danger { background: transparent; color: var(--red); border: 1px solid var(--red-border) } .btn-danger:hover { background: var(--red-light) } .btn-danger-solid, .btn-rood { background: var(--red); color: #fff; border: none } .btn-danger-solid:hover, .btn-rood:hover { filter: brightness(1.1) } .btn-green { background: transparent; color: var(--green); border: 1px solid #b7e4c7 } .btn-green:hover { background: var(--green-light) } .btn:disabled { opacity: .5; cursor: not-allowed } /* ── Badges */ .vr-badge, .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; line-height: 1.4; } .badge.groen, .badge-groen { background: var(--green-light); color: var(--green) } .badge.amber, .badge-amber { background: var(--amber-light); color: var(--amber) } .badge.rood, .badge-rood { background: var(--red-light); color: var(--red) } .badge.blauw, .badge-blauw { background: var(--p-light); color: var(--p) } .badge.grijs, .badge-grijs { background: var(--bg4); color: var(--text3) } .badge.paars, .badge-paars { background: var(--purple-light);color: var(--purple) } .badge.goud, .badge-goud { background: var(--goud-light); color: var(--goud2) } .badge-wacht { background: var(--amber-light); color: var(--amber) } .badge-getekend { background: var(--green-light); color: var(--green) } .badge-verlopen { background: var(--red-light); color: var(--red) } /* ── Tabellen */ .vr-tbl, .tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } .vr-tbl th, .tbl th { text-align: left; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .6px; padding: 0 12px 10px; border-bottom: 1.5px solid var(--bg4); } .vr-tbl td, .tbl td { padding: 10px 12px; border-bottom: 1px solid #f8fafc; vertical-align: middle; } .vr-tbl tr:last-child td, .tbl tr:last-child td { border-bottom: none } .vr-tbl tbody tr:hover td, .tbl tbody tr:hover td { background: var(--bg3) } /* ── Formulier-elementen */ .vr-field { margin-bottom: 14px } .vr-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .3px; } .vr-field input, .vr-field select, .vr-field textarea, .vr-input { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 13.5px; font-family: var(--font); outline: none; transition: border .15s; background: var(--bg2); color: var(--text1); } .vr-field input:focus, .vr-field select:focus, .vr-field textarea:focus, .vr-input:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(26,107,220,.1); } /* ── Meldingen */ .vr-melding { border-radius: 9px; padding: 11px 16px; font-size: 13px; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 8px; } .vr-melding-ok, .melding-ok { background: var(--green-light); color: var(--green); border: 1px solid #bbf7d0 } .vr-melding-fout, .melding-fout { background: var(--red-light); color: var(--red); border: 1px solid #fecaca } .vr-melding-info, .melding-info { background: var(--p-light); color: var(--p2); border: 1px solid #b8d9f0 } /* ── Pagina header (twee regels) */ .vr-topbar, .topbar { background: var(--bg2); border-bottom: 1.5px solid var(--border, #e2e8f0); padding: 0 28px; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 14px; position: sticky; top: 0; z-index: 10; box-shadow: 0 1px 0 var(--border), 0 2px 6px rgba(15,23,42,.04); } .topbar-title, .vr-topbar-title, .content-topbar-titel, .kb-topbar-title { font-size: 13.5px; font-weight: 600; color: var(--text3, #64748b) } .topbar-sub, .vr-topbar-sub { font-size: 11.5px; color: var(--text3, #94a3b8) } .topbar-right, .vr-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px } .vr-page-banner, .page-banner { background: var(--bg2); padding: 18px 28px; border-bottom: 1px solid var(--border, #e2e8f0); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .vr-page-banner h1, .page-banner h1 { font-size: 20px; font-weight: 800; color: var(--text1, #1a1a2e); letter-spacing: -.3px; margin: 0; } .vr-page-banner .sub, .page-banner .sub { font-size: 13px; color: var(--text3, #64748b); margin-top: 2px; } .vr-page-banner-right, .page-banner-right { text-align: right; font-size: 12px; color: var(--text3, #64748b); } /* ── Topbar overrides — uniforme witte headers (medewerker-pagina's) Hogere specificity via `html` ipv !important — wint van page-CSS `.topbar`. */ html .topbar, html .kb-topbar { background: var(--bg2); color: var(--text1); box-shadow: none; border-bottom: 1.5px solid var(--border); height: 56px; overflow: visible; } html .topbar::before, html .topbar::after { display: none } html .topbar h1, html .topbar-title, html .kb-topbar-title, html .content-topbar-titel, html .vr-topbar-title { font-size: 13.5px; font-weight: 600; color: var(--text3); font-family: 'DM Sans', sans-serif; } html .topbar-sub { font-size: 11.5px; color: var(--text3); } html .topbar .meta { color: var(--text3); opacity: 1; font-family: 'DM Sans', sans-serif; } html .topbar-logo { height: 28px; filter: none } /* ── Canonical stat-cards (gedeeld door ondertekenen/akten/debiteuren etc.) ── */ .stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .stat-card { background: var(--bg2); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 14px 18px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.04)); } .stat-card:hover { border-color: var(--border2, #cbd5e1); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .stat-num { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -.5px; color: var(--text1, #1a1a2e) } .stat-lbl { font-size: 12px; color: var(--text3, #64748b); margin-top: 4px; font-weight: 500 } .stat-lbl svg { display: none } @media (max-width: 700px) { .stats-grid { gap: 8px } .stat-num { font-size: 22px } } /* ── Header (cliënt-facing site-header) */ .site-header { background: linear-gradient(135deg, color-mix(in srgb, var(--p) 80%, #003d6b), var(--p)); padding: 0 28px; display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 16px; position: relative; overflow: hidden; box-shadow: 0 2px 16px rgba(0,80,160,.18); } .site-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 55%); pointer-events: none; } .site-header > * { position: relative; z-index: 1 } .site-header-logo { height: 36px; flex-shrink: 0 } .site-header-naam { font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap } /* ── Stappen indicator */ .stappen { display: flex; gap: 0; margin-bottom: 28px } .stap { flex: 1; text-align: center; position: relative } .stap:not(:last-child)::after { content: ''; position: absolute; top: 14px; left: 50%; right: -50%; height: 2px; background: var(--border); z-index: 0 } .stap.actief::after, .stap.klaar::after { background: var(--p) } .stap-nr { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text3); margin: 0 auto 6px; position: relative; z-index: 1 } .stap.actief .stap-nr { border-color: var(--p); color: var(--p); background: var(--p-light) } .stap.klaar .stap-nr { border-color: var(--green); background: var(--green); color: #fff } .stap-label { font-size: 11px; color: var(--text3); font-weight: 500 } .stap.actief .stap-label { color: var(--p); font-weight: 600 } .stap.klaar .stap-label { color: var(--green) } /* ── Selectie-actiebalk */ .vr-selectie-balk { display: none; align-items: center; gap: 8px; padding: 8px 12px; background: #eff6ff; border: 1.5px solid #bfdbfe; border-radius: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: #1d4ed8; } .vr-selectie-balk.zichtbaar { display: flex } /* ── Spinner */ .spinner, .spin { display: inline-block; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: vr-spin .7s linear infinite; } @keyframes vr-spin { to { transform: rotate(360deg) } } /* ── Danger zone */ .danger-zone { border: 1.5px solid #fecaca; border-radius: 10px; padding: 18px 20px; background: #fff5f5; margin-top: 16px; } .danger-zone h3 { font-size: 13px; font-weight: 700; color: var(--red); margin-bottom: 8px } .danger-zone p { font-size: 12.5px; color: var(--text3); margin-bottom: 12px } /* ── Checkbox/Radio styling */ .checkbox-wrap { display: flex; align-items: flex-start; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; cursor: pointer; transition: border-color .15s; } .checkbox-wrap:hover { border-color: var(--p) } .checkbox-wrap input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--p); cursor: pointer; } /* ── Code input (verificatiecode) */ .code-wrap { display: flex; gap: 8px; justify-content: center; margin: 8px 0 4px } .code-input { width: 44px; height: 52px; border: 2px solid var(--border); border-radius: 8px; font-size: 22px; font-weight: 700; text-align: center; font-family: var(--font); color: var(--text1); background: #fff; transition: border-color .15s; outline: none; } .code-input:focus { border-color: var(--p) } .code-input.fout { border-color: var(--red); background: var(--red-light) } /* ── PDF Viewer */ .pdf-wrap { border-radius: 8px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 20px; background: #fff; } /* ── Modal */ .modal-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; } .modal-bg.actief { display: flex } .modal { background: #fff; border-radius: 14px; box-shadow: 0 8px 40px rgba(0,0,0,.25); width: 100%; max-width: 540px; overflow: hidden; } .modal-header { padding: 16px 20px; border-bottom: 1.5px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal-titel { font-size: 15px; font-weight: 700; color: var(--text1) } .modal-sluit { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 20px; line-height: 1; padding: 0 } .modal-sluit:hover { color: var(--text1) } .modal-body { padding: 20px } .modal-footer { padding: 14px 20px; border-top: 1.5px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; } /* ── Upload zones */ .upload-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; transition: all .2s; background: var(--bg3); min-height: 80px; display: flex; align-items: center; justify-content: center; } .upload-zone:hover { border-color: var(--p); background: #f0f7ff } .upload-zone.heeft-foto { border-style: solid; border-color: var(--green); background: var(--green-bg) } /* ── Notificatie toast */ .vr-notif, .notif { position: fixed; bottom: 24px; right: 24px; background: #1a1a2e; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 9999; max-width: 380px; } .vr-notif.zichtbaar, .notif.toon, .notif.show { opacity: 1; pointer-events: auto } /* ── Grid helpers */ .vr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px } .vr-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px } @media(max-width:700px) { .vr-grid2, .vr-grid3 { grid-template-columns: 1fr } } /* ── Responsive */ @media(max-width:520px) { .site-header { padding: 0 16px; height: 56px } .site-header-naam { font-size: 14px } .code-input { width: 38px; height: 46px; font-size: 18px } } /* ── Print */ @media print { body { background: #fff } .site-header, .sidebar, .btn, .danger-zone { display: none } } /* UNIFIED DESIGN COMPONENTS — vr-* namespace, opt-in markup */ /* ── Stat cards (rij van klikbare cijfer-kaartjes bovenaan) ──────────────── */ .vr-stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .vr-stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; box-shadow: 0 1px 3px rgba(0,0,0,.04); flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 6px; } .vr-stat-card:hover { border-color: var(--p); background: var(--bg3); } .vr-stat-card.active { border-color: var(--p); border-left: 3px solid var(--p); background: var(--bg3); } .vr-stat-card .vr-stat-label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .4px; } .vr-stat-card .vr-stat-value { font-size: 22px; font-weight: 700; color: var(--text1); line-height: 1; } .vr-stat-card .vr-stat-sub { font-size: 11.5px; color: var(--text3); } /* Color-variants (apply to .vr-stat-value via modifier class on card) */ .vr-stat-card.red .vr-stat-value { color: var(--red); } .vr-stat-card.amber .vr-stat-value { color: var(--amber); } .vr-stat-card.green .vr-stat-value { color: var(--green); } .vr-stat-card.blue .vr-stat-value { color: var(--p); } /* ── Filter-bar (search + select + chips combineren) */ .vr-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } /* ── Search-pill (rounded grey met 🔍-icon links) */ .vr-search-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; min-width: 220px; transition: border-color .15s, box-shadow .15s; } .vr-search-pill:focus-within { border-color: var(--p); box-shadow: 0 0 0 3px rgba(26,107,220,.1); } .vr-search-pill svg { color: var(--text3); flex-shrink: 0; } .vr-search-pill input { background: none; border: none; outline: none; color: var(--text1); font-family: var(--font); font-size: 12.5px; width: 100%; min-width: 0; } .vr-search-pill input::placeholder { color: var(--text3); } /* ── Select-pill (dropdown met chevron) */ .vr-select-pill { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; color: var(--text2); font-family: var(--font); font-size: 12.5px; padding: 7px 28px 7px 12px; outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555e75'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: border-color .15s; } .vr-select-pill:hover, .vr-select-pill:focus { border-color: var(--p); } /* ── Filter-chip (rounded white pill — variant met dot of badge) ─────────── */ .vr-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--border); color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: var(--font); white-space: nowrap; user-select: none; } .vr-filter-chip:hover { border-color: var(--p); color: var(--p); } .vr-filter-chip.active { border-color: var(--text1); color: var(--text1); background: var(--bg2); font-weight: 600; } /* Variant: gekleurde dot vóór tekst (•) */ .vr-filter-chip .vr-chip-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } /* Variant: getal-badge ná tekst (15, 109) */ .vr-filter-chip .vr-chip-badge { font-size: 10.5px; font-weight: 700; background: var(--bg4); color: var(--text2); padding: 1px 7px; border-radius: 10px; margin-left: 2px; line-height: 1.4; } .vr-filter-chip.active .vr-chip-badge { background: var(--p); color: #fff; } /* Color-coded badges (Controleren-amber, Nog-afronden-goud, etc.) */ .vr-chip-badge.amber { background: var(--amber); color: #fff; } .vr-chip-badge.goud { background: var(--goud, #b8860b); color: #fff; } .vr-chip-badge.green { background: var(--green); color: #fff; } .vr-chip-badge.red { background: var(--red); color: #fff; } /* ── Tabel-koppen (uppercase grey small-caps) */ .vr-tbl-head th { text-align: left; font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; padding: 9px 14px; background: var(--bg4); border-bottom: 2px solid var(--border2); white-space: nowrap; } .vr-tbl-head th.sortable { cursor: pointer; } .vr-tbl-head th.sortable:hover { color: var(--text1); } .vr-tbl-head th.sortable.active { color: var(--p); } /* CANONICAL search & filter bar — used across debiteuren/dossiers/offertes/ ondertekenen/vorioconnect. Edit HERE, all pages update. */ .filterbar { display:flex; gap:8px; align-items:center; margin-bottom:16px; flex-wrap:wrap; } .filterbar input[type="text"], .filterbar input[type="search"] { padding:6px 11px 6px 32px; border:1px solid var(--border); border-radius:8px; font-size:12.5px; font-family:var(--font, inherit); color:var(--text1, var(--text)); background-color:var(--bg2); background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E"); background-repeat:no-repeat; background-position:11px center; min-width:220px; outline:none; transition:border-color .15s, box-shadow .15s; } .filterbar input:focus { border-color:var(--p, var(--accent)); box-shadow:0 0 0 3px rgba(26,107,220,.1); } .filterbar select { padding:6px 30px 6px 11px; border:1px solid var(--border); border-radius:8px; background-color:var(--bg2); background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E"); background-repeat:no-repeat; background-position:right 10px center; font-family:var(--font, inherit); font-size:12.5px; line-height:1.4; color:var(--text1, var(--text)); outline:none; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; } .filterbar input, .filterbar select { box-sizing:border-box; height:32px; } .search-box { display:flex; align-items:center; gap:7px; background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:6px 11px; min-width:220px; transition:border-color .15s, box-shadow .15s; } .search-box:focus-within { border-color:var(--p, var(--accent)); box-shadow:0 0 0 3px rgba(26,107,220,.1); } .search-box input { background:none; border:none; outline:none; color:var(--text1, var(--text)); font-family:var(--font, inherit); font-size:12.5px; width:100%; } .search-box input::placeholder { color:var(--text3); } .list-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:16px; flex-wrap:wrap; } /* CANONICAL chips & table-head — debiteuren/dossiers/offertes share via base. */ .filter-chips { display:flex; gap:6px; flex-wrap:wrap; } .chip { padding:7px 13px; border-radius:8px; font-size:12px; font-weight:500; font-family:var(--font, inherit); cursor:pointer; user-select:none; white-space:nowrap; border:1px solid var(--border); background:var(--bg2); color:var(--text2, var(--text)); display:inline-flex; align-items:center; gap:5px; transition:border-color .15s, background .15s, color .15s; } .chip:hover { border-color:var(--border2, var(--border)); } .chip.active { border-color:var(--p, var(--accent)); background:var(--accent-light, #eff6ff); color:var(--p, var(--accent)); } .chip-dot { width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; flex-shrink:0; } .chip-cnt { background:var(--p, var(--accent)); color:#fff; padding:1px 6px; border-radius:10px; font-size:10px; font-weight:700; margin-left:4px; line-height:1.3; } .chip.active .chip-cnt { background:#fff; color:var(--p, var(--accent)); } .chip-cnt.rood, .sf-btn .chip-cnt.rood { background:var(--red,#dc2626); color:#fff; } .chip-cnt.amber, .sf-btn .chip-cnt.amber { background:var(--amber,#d97706); color:#fff; } .chip-cnt.groen, .sf-btn .chip-cnt.groen { background:var(--green,#16a34a); color:#fff; } .sf-btn.actief .chip-cnt { background:#fff; color:var(--p, var(--accent)); } /* ─── Canonical tabel (.v-tbl) — gedeeld door dossiers/offertes/lijst-views ─── */ .v-tbl{width:100%;border-collapse:collapse;background:var(--bg2);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--border)} .v-tbl thead{position:sticky;top:0;z-index:5} .v-tbl thead tr{background:var(--bg3);border-bottom:1px solid var(--border)} .v-tbl th.center{text-align:center} .v-tbl th.sortable{cursor:pointer;user-select:none;transition:color .15s,opacity .15s} .v-tbl th.sortable:hover{color:var(--text1)} .v-tbl th.sortable .sort-ic{display:none;font-size:10px;margin-left:4px;font-style:normal} .v-tbl th.sortable.actief .sort-ic{display:inline} .v-tbl th.sortable.actief{color:var(--accent);opacity:1} .v-tbl th.sortable:not(.actief){opacity:.55} .v-tbl tbody tr{height:44px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border)} .v-tbl tbody tr:last-child{border-bottom:none} .v-tbl tbody tr:hover{background:var(--row-hover)} .v-tbl td{padding:11px 14px;font-size:13px;line-height:1.4;vertical-align:middle;color:var(--text)} .v-tbl td.center{text-align:center} @media(max-width:700px){ /* Tabel zelf wordt scrollable container, inner-rendering blijft table-layout */ .v-tbl{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; max-width:100%; font-size:12px; border-radius:var(--r); } .v-tbl thead, .v-tbl tbody, .v-tbl tfoot{display:table-row-group} .v-tbl tr{display:table-row} .v-tbl td, .v-tbl th{display:table-cell;padding:8px 10px;white-space:nowrap} .v-tbl tbody tr{height:auto} } /* Canonical table-head — geldt voor elke tenzij page override */ /* Canonical voor alle tabel-headers (page override via specifieke class indien nodig) */ table thead th, thead.tbl-head th { padding:9px 14px; text-align:left; font-size:10.5px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:.6px; background:var(--bg3); border-bottom:1px solid var(--border); white-space:nowrap; font-family:var(--font, inherit); vertical-align:middle; } /* Canonical select-styled — gebruikt door dossiers/debiteuren/vorioconnect/portaal */ .select-styled { background:var(--bg2) url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E") no-repeat right 10px center; border:1px solid var(--border); border-radius:8px; color:var(--text2, var(--text)); font-family:var(--font, inherit); font-size:12.5px; padding:6px 28px 6px 11px; outline:none; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; box-sizing:border-box; height:32px; transition:border-color .15s, box-shadow .15s; } .select-styled:focus, .select-styled:hover { border-color:var(--p, var(--accent)); color:var(--text1, var(--text)); } .select-styled:focus { box-shadow:0 0 0 3px rgba(26,107,220,.1); } /* ── Modal close-button (X) — twee semantische varianten ── .modal-close → standaard op witte modal-header (donkere X, hover lichtgrijs fill) .modal-close--light → voor gekleurde modal-header (witte X, hover wit-15% fill) */ .modal-close{ background:none;border:none;color:var(--text3,#94a3b8); font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px; font-family:inherit;line-height:1; display:inline-flex;align-items:center;justify-content:center; transition:background .15s, color .15s; } .modal-close:hover{background:var(--bg3);color:var(--text1)} .modal-close:active{background:var(--bg4)} .modal-close:focus-visible{outline:2px solid var(--p,#1a6bdc);outline-offset:2px} .modal-close--light{ background:none;border:none;color:#fff; font-size:22px;cursor:pointer;padding:4px 8px;border-radius:6px; font-family:inherit;line-height:1; display:inline-flex;align-items:center;justify-content:center; transition:background .15s; } .modal-close--light:hover{background:rgba(255,255,255,.15)} .modal-close--light:active{background:rgba(255,255,255,.25)} .modal-close--light:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px} /* ─── Centrale Vorio-loader (favicon + roterende ring) ─── */ .vorio-loader{ position:relative; width:48px;height:48px; display:inline-flex;align-items:center;justify-content:center; flex-shrink:0; } .vorio-loader::before{ content:'';position:absolute;inset:0;border-radius:50%; border:3px solid rgba(15,23,42,.08); border-top-color:#1a6bdc; animation:vorioLoaderSpin .9s linear infinite; } .vorio-loader::after{ content:''; width:60%;height:60%; background:url('/vorio_favicon.png?v=8') center/contain no-repeat; animation:vorioLoaderPulse 1.4s ease-in-out infinite; } html[data-theme="dark"] .vorio-loader::before{ border-color:rgba(255,255,255,.10); border-top-color:#1a6bdc; } /* Dark-loader: wordmark zonder extra cirkel (geen "dubbele spinner") */ html[data-theme="dark"] .vorio-loader::after{ background-image:url("/vorio_favicon_dark.png?v=20260603dark9"); } .vorio-loader-sm{ width:28px;height:28px; } .vorio-loader-sm::before{ border-width:2px; } .vorio-loader-lg{ width:72px;height:72px; } .vorio-loader-lg::before{ border-width:4px; } @keyframes vorioLoaderSpin{ to{ transform:rotate(360deg) } } @keyframes vorioLoaderPulse{ 0%,100%{ opacity:.85; transform:scale(.96) } 50%{ opacity:1; transform:scale(1.04) } } /* Block-variant met tekst eronder (voor full-page laad-states) */ .vorio-loader-block{ display:flex;flex-direction:column;align-items:center;justify-content:center; padding:48px 24px;gap:18px;color:var(--text2, #475569);font-size:13.5px;text-align:center; } /* ─── XL variant + fullscreen overlay + inline-button helper ─── */ .vorio-loader-xl{ width:120px;height:120px; } .vorio-loader-xl::before{ border-width:5px; } .vorio-loader-overlay{ position:fixed;inset:0;z-index:99999; background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px; color:var(--text2, #475569);font-size:14.5px;font-weight:500;letter-spacing:.2px; opacity:0;pointer-events:none;transition:opacity .18s ease; } .vorio-loader-overlay.actief{ opacity:1;pointer-events:auto; } .vorio-loader-overlay .vol-tekst{ max-width:340px;text-align:center;line-height:1.5; } /* Voor in-knop gebruik: kleine variant inline — clean ring zonder favicon (te klein voor detail) */ .vorio-loader-inline{ width:14px;height:14px;display:inline-block;vertical-align:-3px;margin-right:6px; border-radius:50%; border:2px solid rgba(15,23,42,.18); border-top-color:#1a6bdc; animation:vorioLoaderSpin .8s linear infinite; background:transparent;position:relative; } .vorio-loader-inline::before, .vorio-loader-inline::after{ content:none !important; display:none !important; } /* ─── Legacy spinner-klassen — schone ring, GEEN favicon (vierkant-issue bij klein formaat) ─── */ /* Override van oudere .spinner / .spin / .upload-spinner. Per-klasse geometrie blijft. */ .spinner, .upload-spinner, .spin{ position:relative !important; box-sizing:border-box; border-radius:50% !important; background:transparent !important; display:inline-block;vertical-align:middle; animation:vorioLoaderSpin .8s linear infinite !important; } .spinner::before, .upload-spinner::before, .spin::before, .spinner::after, .upload-spinner::after, .spin::after{ content:none !important; display:none !important; } /* Per-klasse geometrie + kleur */ .spin, .upload-spinner{ width:14px;height:14px; border:2px solid rgba(15,23,42,.18) !important; border-top-color:var(--p, #1a6bdc) !important; } .spinner{ width:32px;height:32px; border:3px solid rgba(15,23,42,.14) !important; border-top-color:var(--p, #1a6bdc) !important; } /* Witte variant binnen primaire (donker-gekleurde) knoppen */ .btn-primary .spinner, .btn-primary .spin, .btn-primary .upload-spinner, .btn-primary .vorio-loader-inline{ border-color:rgba(255,255,255,.35) !important; border-top-color:#fff !important; } /* ─── Canonical Vorio-wordmark Eén bron-van-waarheid voor "vorio." renderen. Helper: lib/vorio_logo.php (PHP) + js/vorio_logo.js (client) Tokens: DM Sans 700, navy #0f2744 / brand-blue #1a6bdc, letter-spacing −3.8% van font-size, dot bottom-aligned. */ .v-logo { display: inline-flex; align-items: flex-end; gap: 1px; font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif; font-weight: 700; color: #0f2744; line-height: 1; text-decoration: none; flex-shrink: 0; white-space: nowrap; } .v-logo .v-dot { background: #1a6bdc; border-radius: 50%; flex-shrink: 0; display: inline-block; } /* Sizes: dot schaalt ~23% van font-size, margin-bottom ~15% */ .v-logo-xs { font-size: 14px; letter-spacing: -.55px; } .v-logo-xs .v-dot { width: 3.5px; height: 3.5px; margin-bottom: 2px; } .v-logo-sm { font-size: 18px; letter-spacing: -.7px; } .v-logo-sm .v-dot { width: 4.5px; height: 4.5px; margin-bottom: 2.5px; } .v-logo-md { font-size: 22px; letter-spacing: -.85px; } .v-logo-md .v-dot { width: 5px; height: 5px; margin-bottom: 3px; } .v-logo-lg { font-size: 26px; letter-spacing: -1px; } .v-logo-lg .v-dot { width: 6px; height: 6px; margin-bottom: 4px; } .v-logo-xl { font-size: 44px; letter-spacing: -1.7px; } .v-logo-xl .v-dot { width: 10px; height: 10px; margin-bottom: 7px; } /* Variants — brand-blue dot blijft hetzelfde, alleen tekstkleur verandert */ .v-logo-dark { color: #ffffff; } .v-logo-inverted { color: #ffffff; } .v-logo-inverted .v-dot { background: #ffffff; } /* Automatic dark-mode honoring */ html[data-theme="dark"] .v-logo:not(.v-logo-light):not(.v-logo-inverted) { color: #ffffff; } /* "powered by vorio." compositie */ .v-powered { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #6b7280; font-weight: 500; } .v-powered-dark { color: #9ca3af; } .v-powered-inverted { color: rgba(255,255,255,.85); } html[data-theme="dark"] .v-powered:not(.v-powered-light):not(.v-powered-inverted) { color: #94a3b8; } /* Powered-by — vorio-wordmark schaalt mee met omringende tekst */ .v-powered { font-size: 9px; gap: 3px; letter-spacing: .2px } .v-powered .v-logo { font-size: 1em; letter-spacing: -.4px } .v-powered .v-logo .v-dot { width: 3px; height: 3px; margin-bottom: 1.5px } /* Dark-mode override met !important — beats inline-fallback in vorioPoweredBy() */ html[data-theme="dark"] .v-powered { color: #cbd5e1 !important } html[data-theme="dark"] .v-powered .v-logo, html[data-theme="dark"] .v-powered span[style*="currentColor"] { color: #ffffff !important } /* ── .v-rij-x — gedeelde rij-verwijderknop Voor delete-knoppen IN form-rijen (offerte-regels, vestigingen-rijen). Klein, bordered, transparante achtergrond, rode hover. Niet bedoeld voor lijst-record-deletes — gebruik daar .adm-icon-btn.danger met trash-sprite. */ .v-rij-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: 5px; color: var(--text3); font-size: 14px; font-family: inherit; line-height: 1; cursor: pointer; transition: color .12s, border-color .12s, background .12s; box-sizing: border-box; flex-shrink: 0; } .v-rij-x:hover { color: var(--red); border-color: rgba(239,68,68,.32) } .v-rij-x:focus-visible { outline: 2px solid var(--p,#1a6bdc); outline-offset: 1px } /* Grotere variant — sluit aan op 41px form-input-hoogte */ .v-rij-x-lg { width: 41px; height: 41px; font-size: 22px; font-weight: 400; border-radius: 8px } /* Vorio Design System — Fase 0 Herbruikbare component-classes. Gebruik