:root {
--bg: #f6f4ef;
--surface: #ffffff;
--border: #e5e2da;
--hairline: rgba(0, 0, 0, 0.06);
--text: #2a2724;
--muted: #6f6a62;
--primary: #2563eb;
--primary-dark: color-mix(in srgb, var(--primary) 70%, black);
--primary-soft: color-mix(in srgb, var(--primary) 12%, white);
--accent: #c9a24a;
--green: #3a7d44;
--green-soft: #e6f3e8;
--amber: #b87b2a;
--amber-soft: #fbf0dc;
--blue: #2b5d99;
--blue-soft: #e6eef9;
--red: #a52a2a;
--red-soft: #f8e6e6;
--shadow: 0 1px 2px rgba(20, 18, 16, 0.04), 0 4px 16px rgba(20, 18, 16, 0.05);
--shadow-lg: 0 4px 12px rgba(20, 18, 16, 0.06), 0 20px 48px rgba(20, 18, 16, 0.08);
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 16px;
--radius-pill: 999px;
--ease: cubic-bezier(0.32, 0.72, 0, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 120ms;
--t-base: 200ms;
}
* { box-sizing: border-box; }
/* overscroll-behavior: none = geen iOS "rubber-band" bounce in de
TestFlight/native app als de inhoud kort is; scrollen bij lange
inhoud (formulieren, lijsten) blijft gewoon werken. */
html, body { margin: 0; padding: 0; overscroll-behavior: none; }
html { height: 100%; }
body {
font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
font-size: 15px;
color: var(--text);
background: var(--bg);
line-height: 1.5;
min-height: 100%;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--bg); padding: 1px 5px; border-radius: 3px; font-size: .85em; }
h1, h2, h3 { font-family: var(--font-heading, Georgia, "Times New Roman", serif); font-weight: 600; }
.brand-text strong, .stat-value { font-family: var(--font-heading, Georgia, "Times New Roman", serif); }
h1 { font-size: 1.7rem; margin: 0 0 .25rem; }
h2 { font-size: 1.2rem; margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; color: var(--primary); }
/* Topbar */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.topbar-inner { max-width: 1200px; margin: 0 auto; padding: .75rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--text); flex: none; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-mark {
background: var(--primary); color: #fff;
width: 36px; height: 36px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.2rem;
}
.brand-mark.big { width: 60px; height: 60px; font-size: 2rem; margin: 0 auto 1rem; }
.brand-mark.has-custom-logo { background: transparent; padding: 0; overflow: hidden; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit; }
/* Compact-modus + vierkante hoeken */
body.ui-compact { font-size: 14px; }
body.ui-compact .card { padding: .9rem 1.1rem; margin-bottom: 1rem; }
body.ui-compact h1 { font-size: 1.4rem; }
body.ui-compact h2 { font-size: 1.05rem; }
body.ui-compact .table th, body.ui-compact .table td { padding: .45rem .55rem; }
body.ui-square .card,
body.ui-square .login-form-wrap input,
body.ui-square .splash-card,
body.ui-square .btn,
body.ui-square input,
body.ui-square select,
body.ui-square textarea,
body.ui-square .stat-card,
body.ui-square .kist-card { border-radius: 2px; }
body.ui-square .brand-mark { border-radius: 4px; }
body.ui-square .badge, body.ui-square .status, body.ui-square .offline-badge { border-radius: 3px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { display: block; font-size: 1rem; white-space: nowrap; }
.brand-text small { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topnav { display: flex; gap: .25rem; flex: 1; justify-content: center; }
.topnav a { color: var(--text); padding: .5rem .85rem; border-radius: var(--radius); font-size: .92rem; }
.topnav a:hover { background: var(--bg); text-decoration: none; }
.topnav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.user-area { display: flex; align-items: center; gap: .75rem; min-width: 0; flex-shrink: 1; }
.user-name { color: var(--muted); font-size: .9rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Layout */
.main { padding: 1.5rem 1.25rem 3rem; }
.page { max-width: 1200px; margin: 0 auto; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
/* Overflow-menu in page-actions (⋯-knop) */
.page-actions-more { position: relative; }
.page-actions-more > summary {
list-style: none; cursor: pointer; user-select: none;
font-weight: 600; padding: .5rem .85rem;
}
.page-actions-more > summary::-webkit-details-marker { display: none; }
.page-actions-more[open] > summary { background: var(--primary-soft, #f0e6e8); }
.page-actions-menu {
position: absolute; top: calc(100% + .35rem); right: 0;
min-width: 220px; z-index: 10;
background: #fff; border: 1px solid var(--border);
border-radius: 10px; padding: .35rem;
box-shadow: 0 10px 30px rgba(0,0,0,.12);
display: flex; flex-direction: column; gap: .15rem;
}
.page-actions-menu .btn-block {
display: block; width: 100%; text-align: left;
border-radius: 6px; padding: .55rem .7rem;
}
.page-actions-menu .btn-block:hover { background: var(--bg, #f7f3ee); }
.back-link { font-size: .85rem; color: var(--muted); display: inline-block; margin-bottom: .5rem; }
.footer { padding: 2rem 1rem; text-align: center; }
.footer-inner { color: var(--muted); font-size: .82rem; }
/* Cards */
.card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem; box-shadow: var(--shadow);
}
.card.narrow { max-width: 560px; }
.card.center { text-align: center; }
fieldset.card { border: 1px solid var(--border); }
fieldset.card legend {
background: var(--primary); color: #fff;
padding: .25rem .75rem; border-radius: 4px;
font-size: .85rem; font-weight: 600;
letter-spacing: .03em; text-transform: uppercase;
}
/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: 1rem 1.25rem; }
.stat-card.stat-blue { border-left-color: var(--blue); }
.stat-card.stat-amber { border-left-color: var(--amber); }
.stat-card.stat-green { border-left-color: var(--green); }
.stat-label { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.stat-value { font-size: 2rem; font-weight: 600; font-family: Georgia, serif; }
/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1.25rem; }
@media (max-width: 800px) {
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
.grid-3 { grid-template-columns: 1fr; }
.topbar-inner { flex-wrap: wrap; }
.topnav { order: 3; width: 100%; overflow-x: auto; }
}
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.full { display: block; width: 100%; }
/* Forms */
.form { gap: 1rem; display: flex; flex-direction: column; }
.form label, fieldset.card label, .grid-3 label, .grid-2 label {
display: flex; flex-direction: column; gap: .25rem;
font-size: .82rem; color: var(--muted);
min-width: 0;
}
.form input, .form select,
fieldset.card input, fieldset.card select,
.row-form input, .row-form select {
box-sizing: border-box;
height: 2.6rem;
padding: 0 .65rem;
line-height: 1.3;
font: inherit;
font-size: 16px; /* voorkomt zoom-bij-tap op iOS én uniforme hoogte */
border: 1px solid var(--border);
border-radius: 6px;
background: #fff; color: var(--text);
width: 100%;
-webkit-appearance: none;
appearance: none;
}
/* Checkboxes & radios: het native vinkje terug (de brede regel hierboven
zette appearance:none, waardoor je niet zag of een vinkje aan/uit stond). */
.form input[type="checkbox"], .form input[type="radio"],
fieldset.card input[type="checkbox"], fieldset.card input[type="radio"],
.row-form input[type="checkbox"], .row-form input[type="radio"],
.checkbox-inline input[type="checkbox"], .checkbox-inline input[type="radio"] {
-webkit-appearance: auto;
appearance: auto;
width: 1.2rem;
height: 1.2rem;
min-width: 1.2rem;
padding: 0;
accent-color: var(--primary);
cursor: pointer;
flex: 0 0 auto;
}
/* Selects krijgen een eigen dropdown-pijl zodat appearance:none geen lege styling geeft */
.form select, fieldset.card select, .row-form select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right .65rem center;
padding-right: 1.65rem;
}
.form textarea, fieldset.card textarea, .row-form textarea {
box-sizing: border-box;
padding: .6rem .7rem;
line-height: 1.5;
font: inherit;
font-size: 16px;
border: 1px solid var(--border);
border-radius: 6px;
background: #fff; color: var(--text);
width: 100%;
min-height: 4.5rem;
}
input[type="color"] {
height: 38px;
padding: 2px;
cursor: pointer;
appearance: auto;
-webkit-appearance: auto;
}
input[type="file"] {
height: auto;
padding: .35rem;
font-size: 14px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
textarea { resize: vertical; }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.row-form { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.row-form > * { flex: 1; min-width: 140px; }
.row-form button { flex: 0 0 auto; }
.checkbox-inline { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.checkbox-inline input { width: auto; }
/* Form-dichtheid (instelbaar via Settings) — alle inputs/selects krijgen
een uniforme hoogte; alleen die en padding/spacing variëren */
body.density-compact .grid-3 { gap: 1rem .85rem; }
body.density-compact .form { gap: .75rem; }
body.density-compact fieldset.card { padding: 1rem 1.25rem; }
body.density-compact .form input,
body.density-compact .form select,
body.density-compact fieldset.card input,
body.density-compact fieldset.card select,
body.density-compact .row-form input,
body.density-compact .row-form select { height: 2.3rem; padding: 0 .55rem; font-size: 15px; }
body.density-compact .form textarea,
body.density-compact fieldset.card textarea,
body.density-compact .row-form textarea { padding: .45rem .55rem; font-size: 15px; min-height: 3.6rem; }
/* density-normaal = default styles, geen overrides nodig */
body.density-ruim .grid-3 { gap: 1.85rem 1.25rem; }
body.density-ruim .form { gap: 1.25rem; }
body.density-ruim fieldset.card { padding: 1.5rem 1.75rem; }
body.density-ruim .form input,
body.density-ruim .form select,
body.density-ruim fieldset.card input,
body.density-ruim fieldset.card select,
body.density-ruim .row-form input,
body.density-ruim .row-form select { height: 3rem; padding: 0 .85rem; font-size: 16px; }
body.density-ruim .form textarea,
body.density-ruim fieldset.card textarea,
body.density-ruim .row-form textarea { padding: .75rem .85rem; font-size: 16px; min-height: 5rem; }
body.density-ruim .form label, body.density-ruim fieldset.card label { gap: .4rem; }
body.density-extraruim .grid-3 { gap: 2.25rem 1.5rem; }
body.density-extraruim .form { gap: 1.5rem; }
body.density-extraruim fieldset.card { padding: 1.75rem 2rem; }
body.density-extraruim .form input,
body.density-extraruim .form select,
body.density-extraruim fieldset.card input,
body.density-extraruim fieldset.card select,
body.density-extraruim .row-form input,
body.density-extraruim .row-form select { height: 3.4rem; padding: 0 1rem; font-size: 17px; }
body.density-extraruim .form textarea,
body.density-extraruim fieldset.card textarea,
body.density-extraruim .row-form textarea { padding: .9rem 1rem; font-size: 17px; min-height: 6rem; }
body.density-extraruim .form label, body.density-extraruim fieldset.card label { gap: .5rem; font-size: .9rem; }
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: .35rem; padding: .5rem 1rem;
border-radius: 6px; border: 1px solid var(--border);
background: #fff; color: var(--text);
font: inherit; font-size: .9rem;
cursor: pointer; text-decoration: none;
transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--bg); text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-ghost { background: transparent; }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover { background: #8b1f1f; }
.btn-block { width: 100%; }
.btn-sm { padding: .35rem .7rem; font-size: .82rem; }
.btn-icon { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; padding: 0 .35rem; line-height: 1; }
.btn-icon:hover { color: var(--red); }
/* Filter bar */
.filter-bar { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filter-bar input, .filter-bar select { padding: .5rem .65rem; border: 1px solid var(--border); border-radius: 6px; }
.filter-bar input { flex: 1; min-width: 220px; }
/* Tables */
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { padding: .65rem .75rem; text-align: left; border-bottom: 1px solid var(--border); }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.table tbody tr:hover { background: var(--bg); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.total-row td { background: var(--bg); border-top: 2px solid var(--border); }
/* Badges & status */
.badge { display: inline-block; padding: .15rem .55rem; background: var(--bg); color: var(--muted); border-radius: 999px; font-size: .75rem; border: 1px solid var(--border); }
.badge-amber { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); }
.status { display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 600; text-transform: capitalize; }
.status-nieuw { background: var(--blue-soft); color: var(--blue); }
.status-in_behandeling { background: var(--amber-soft); color: var(--amber); }
.status-voltooid { background: var(--green-soft); color: var(--green); }
.status-geannuleerd { background: var(--red-soft); color: var(--red); }
/* Inline status-select op detailpagina */
.status-inline {
display: inline-block;
padding: .15rem 1.4rem .15rem .65rem;
border-radius: 999px;
font-size: .76rem;
font-weight: 600;
text-transform: capitalize;
border: 1px solid transparent;
font-family: inherit;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right .4rem center;
}
.status-inline:hover { filter: brightness(.97); }
.status-inline.status-nieuw { background-color: var(--blue-soft); color: var(--blue); }
.status-inline.status-in_behandeling { background-color: var(--amber-soft); color: var(--amber); }
.status-inline.status-voltooid { background-color: var(--green-soft); color: var(--green); }
.status-inline.status-geannuleerd { background-color: var(--red-soft); color: var(--red); }
/* Kosten-toggles (gedekt / betaald) — gekleurde pillen */
.kost-toggle {
display: inline-flex; align-items: center; gap: .2rem;
padding: .25rem .7rem;
border-radius: 999px;
font-size: .78rem;
font-weight: 600;
border: 1px solid;
cursor: pointer;
white-space: nowrap;
transition: filter .15s, transform .1s;
font-family: inherit;
line-height: 1.3;
}
.kost-toggle:hover { filter: brightness(.96); }
.kost-toggle:active { transform: scale(.97); }
.kost-toggle.on-betaald { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.kost-toggle.off-betaald { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); }
.kost-toggle.on-gedekt { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }
.kost-toggle.off-gedekt { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.table .center { text-align: center; }
/* Quick-contact knoppen onder Contactpersoon */
.quick-contact {
display: flex; gap: .4rem; flex-wrap: wrap;
margin: -.25rem 0 .85rem;
}
.quick-contact .btn { flex: 0 0 auto; }
/* Definition list */
.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .5rem 1.5rem; margin: 0 0 1rem; }
.dl > div { display: flex; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed var(--border); }
.dl dt { color: var(--muted); flex: 0 0 40%; font-size: .85rem; }
.dl dd { margin: 0; flex: 1; }
/* Tabs */
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.tabs a { padding: .5rem 1rem; color: var(--muted); border-bottom: 2px solid transparent; font-size: .9rem; }
.tabs a:hover { color: var(--primary); text-decoration: none; }
/* Lists */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 0; border-bottom: 1px dashed var(--border); }
.list li:last-child { border-bottom: none; }
.list-link strong { color: var(--text); }
.right { margin-left: auto; }
.notitie-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.notitie-list li { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: .75rem 1rem; margin-bottom: .5rem; }
.notitie-meta { display: flex; align-items: center; gap: .75rem; margin-bottom: .35rem; }
.prewrap { white-space: pre-wrap; word-wrap: break-word; }
/* Profielkeuze — "Wie werkt er vandaag?" */
.profile-screen {
position: fixed; inset: 0; z-index: 90;
display: flex; align-items: center; justify-content: center;
background:
radial-gradient(at 20% 30%, rgba(107, 30, 42, .35) 0%, transparent 45%),
radial-gradient(at 80% 70%, rgba(42, 93, 107, .30) 0%, transparent 50%),
linear-gradient(135deg, #1c2541, #0b132b);
padding: 1.5rem; overflow: auto;
}
body:has(#profile-screen:not([hidden])) { overflow: hidden; }
/* Drijvende achtergrond-orbs voor sfeer */
.profile-bg-orb {
position: absolute; border-radius: 50%; pointer-events: none;
filter: blur(80px); opacity: .35;
animation: profile-orb-float 18s ease-in-out infinite;
}
.profile-bg-orb-1 { width: 320px; height: 320px; background: #2563eb; top: 8%; left: 6%; }
.profile-bg-orb-2 { width: 380px; height: 380px; background: #2a5d6b; bottom: 6%; right: 8%; animation-delay: -6s; }
.profile-bg-orb-3 { width: 240px; height: 240px; background: #c9a24a; top: 45%; right: 22%; animation-delay: -12s; opacity: .22; }
@keyframes profile-orb-float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -30px) scale(1.08); }
66% { transform: translate(-30px, 40px) scale(0.95); }
}
.profile-card {
position: relative; z-index: 2;
width: 100%; max-width: 560px;
background: var(--surface);
border-radius: 28px;
padding: 2.5rem 2.25rem 1.75rem;
box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
text-align: center;
}
.profile-greeting {
display: inline-block;
font-size: .82rem; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase;
color: var(--primary, #2563eb);
background: rgba(107, 30, 42, .08);
padding: .35rem .9rem; border-radius: 999px;
margin-bottom: 1rem;
}
.profile-title {
margin: 0 0 .55rem; font-size: 1.75rem; font-weight: 700;
color: var(--text); letter-spacing: -0.5px;
}
.profile-subtitle {
margin: 0 0 2rem; color: var(--muted); font-size: .95rem; line-height: 1.5;
}
.profile-options {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: .85rem;
}
.profile-option {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: .75rem;
padding: 1.5rem 1rem 1.25rem;
border: 1px solid var(--border); border-radius: 18px;
background: var(--surface); cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
font-family: inherit; font-size: 1rem;
overflow: hidden;
}
.profile-option::before {
content: ''; position: absolute; inset: 0; border-radius: 18px;
background: linear-gradient(135deg, rgba(107,30,42,.04), rgba(42,93,107,.04));
opacity: 0; transition: opacity .18s ease;
pointer-events: none;
}
.profile-option:hover {
transform: translateY(-3px);
border-color: transparent;
box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.profile-option:hover::before { opacity: 1; }
.profile-option:active { transform: translateY(-1px); }
.profile-avatar-wrap {
position: relative;
width: 76px; height: 76px;
display: inline-flex; align-items: center; justify-content: center;
}
.profile-avatar-ring {
position: absolute; inset: -4px; border-radius: 50%;
background: conic-gradient(from 0deg,
var(--ring-color, #2563eb),
rgba(255,255,255,.4),
var(--ring-color, #2563eb));
opacity: .25; transition: opacity .18s ease, transform .25s ease;
}
.profile-option:hover .profile-avatar-ring {
opacity: .9; transform: rotate(45deg);
}
.profile-avatar {
position: relative; z-index: 1;
width: 68px; height: 68px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 2rem; font-weight: 700;
font-family: var(--font-heading, Georgia, serif);
box-shadow: inset 0 -3px 8px rgba(0,0,0,.18);
}
.profile-name {
font-size: 1.05rem; font-weight: 600; color: var(--text); letter-spacing: -0.2px;
}
.profile-foot {
display: flex; justify-content: space-between; align-items: center;
gap: .5rem; margin-top: 1.5rem; padding-top: 1.25rem;
border-top: 1px solid var(--border);
}
.profile-manage-link {
color: var(--muted); text-decoration: none; font-size: .88rem;
transition: color .15s;
}
.profile-manage-link:hover { color: var(--primary); }
.profile-empty { text-align: center; padding: 2rem 1rem; }
/* Profielen-beheer in Account */
.profielen-rows { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .85rem; }
.profielen-row {
display: flex; gap: .55rem; align-items: center;
padding: .5rem; border: 1px solid var(--border); border-radius: 10px;
background: var(--surface);
}
.profielen-avatar {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-weight: 700; font-size: 1.1rem;
font-family: var(--font-heading, Georgia, serif);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.18);
}
.profielen-naam {
flex: 1; padding: .5rem .7rem;
border: 1px solid var(--border); border-radius: 8px; font: inherit;
}
.profielen-kleur {
width: 42px; height: 42px; padding: 0; border: 1px solid var(--border);
border-radius: 8px; cursor: pointer; background: transparent;
}
/* Topbar-chip die het actieve profiel toont */
.active-profile-chip {
display: inline-flex; align-items: center; gap: .5rem;
padding: .35rem .75rem; border: 1px solid var(--border);
border-radius: 999px; background: var(--bg);
cursor: pointer; font-family: inherit;
font-size: .85rem; color: var(--text); font-weight: 500;
transition: background .15s, border-color .15s;
}
.active-profile-chip:hover { background: var(--primary-soft); border-color: var(--primary); }
.active-profile-dot {
width: 10px; height: 10px; border-radius: 50%; background: var(--primary);
flex-shrink: 0;
}
/* Login — split-screen, vast op het scherm (geen scroll) */
.login-screen {
position: fixed; inset: 0; z-index: 100;
display: flex; align-items: stretch;
background: var(--bg);
overflow: hidden;
}
body:has(#login-screen:not([hidden])) { overflow: hidden; }
.login-brand {
flex: 1 1 50%;
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: #fff;
padding: clamp(1.5rem, 4vh, 3rem) clamp(1.5rem, 4vw, 3.5rem);
display: flex; align-items: stretch;
}
.login-brand-inner {
position: relative; z-index: 2;
display: flex; flex-direction: column; gap: clamp(1rem, 3vh, 2rem);
width: 100%; max-width: 540px;
}
.login-brand-head { display: flex; align-items: center; gap: 1rem; }
.login-brand .brand-mark.big {
margin: 0; width: 56px; height: 56px; font-size: 1.7rem;
background: rgba(255,255,255,.18); color: #fff;
backdrop-filter: blur(2px);
}
.login-brand .brand-mark.has-custom-logo { background: rgba(255,255,255,.96); }
.login-brand-name { display: flex; flex-direction: column; line-height: 1.25; }
.login-brand-name strong { font-size: 1rem; font-weight: 700; }
.login-brand-name span { font-size: .85rem; opacity: .8; }
.login-brand-body { margin-top: auto; }
.login-brand-body h1 {
margin: 0 0 .65rem; font-size: clamp(1.6rem, 3.4vw, 2.4rem);
font-weight: 700; line-height: 1.15; color: #fff;
}
.login-brand-body p {
margin: 0 0 1.25rem; font-size: clamp(.9rem, 1.1vw, 1rem); line-height: 1.5;
opacity: .9; max-width: 32em;
}
.login-brand-features {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: .55rem;
}
.login-brand-features li {
display: flex; align-items: flex-start; gap: .75rem;
font-size: .95rem; line-height: 1.45; opacity: .92;
}
.login-brand-features li::before {
content: "✓";
flex: 0 0 1.4rem; height: 1.4rem; line-height: 1.4rem; text-align: center;
font-weight: 700; font-size: .9rem;
color: #fff;
background: rgba(255,255,255,.18);
border-radius: 50%;
margin-top: .05rem;
}
.login-brand-foot {
margin: clamp(1rem, 3vh, 2rem) 0 0; font-size: .8rem; opacity: .65;
}
.login-brand-orb {
position: absolute; border-radius: 50%;
background: rgba(255,255,255,.08); pointer-events: none; z-index: 1;
}
.login-brand-orb-1 { width: 520px; height: 520px; top: -160px; left: -120px; }
.login-brand-orb-2 { width: 360px; height: 360px; bottom: -120px; right: -100px; opacity: .6; }
.login-form-pane {
flex: 1 1 50%;
display: flex; align-items: center; justify-content: center;
padding: clamp(1.5rem, 3vh, 2.5rem) clamp(1.25rem, 3vw, 2rem);
background: #fff;
overflow-y: auto; /* alleen het form-paneel mag intern scrollen als 't echt te krap is */
}
.login-form-wrap { width: 100%; max-width: 420px; }
.login-form-wrap h2 {
margin: 0 0 .3rem; padding: 0; border: none;
font-size: 1.5rem; font-weight: 700; color: var(--text);
}
.login-form-sub { margin: 0 0 1.25rem; color: var(--muted); font-size: .95rem; }
.login-form-wrap .form label > span { font-size: .9rem; font-weight: 600; color: var(--text); }
.login-form-wrap .form input { padding: .75rem .9rem; font-size: 1rem; }
.login-actions { display: flex; gap: .5rem; margin-top: .25rem; }
.login-actions .btn-block { flex: 1 1 auto; }
.login-actions .btn-ghost { flex: 0 0 auto; min-width: 90px; }
.login-form-foot {
margin-top: 1rem;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: .5rem;
font-size: .88rem;
}
.login-form-foot a { font-weight: 600; }
@media (max-width: 880px) {
.login-screen { flex-direction: column; }
.login-brand {
flex: 0 0 auto; padding: 1.25rem 1.25rem;
}
.login-brand-inner { gap: .85rem; max-width: none; }
.login-brand-body h1 { font-size: 1.45rem; margin-bottom: .35rem; }
.login-brand-body p { font-size: .9rem; margin-bottom: .65rem; }
.login-brand-features { gap: .35rem; }
.login-brand-features li { font-size: .85rem; }
.login-brand-foot, .login-brand-orb { display: none; }
.login-form-pane {
flex: 1 1 auto; padding: 1.25rem 1.25rem;
}
.login-form-wrap { max-width: 460px; }
}
/* Echt korte schermen: bullets/onderschrift verbergen om alles passend te houden */
@media (max-width: 880px) and (max-height: 600px) {
.login-brand-body p,
.login-brand-features { display: none; }
}
/* WheelDate — eigen dag/maand/jaar wiel-picker (overal i.p.v. native) */
.wheeldate-overlay {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
pointer-events: none; opacity: 0;
transition: opacity .2s ease;
}
.wheeldate-overlay.shown { pointer-events: auto; opacity: 1; }
.wheeldate-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.wheeldate-card {
position: relative;
background: #2c2c2e; color: #fff;
border-radius: 16px;
padding: 1rem 1rem 1.1rem;
width: 360px; max-width: calc(100vw - 1.5rem);
box-shadow: 0 24px 60px rgba(0,0,0,.45);
transform: scale(.96);
transition: transform .2s ease;
}
.wheeldate-overlay.shown .wheeldate-card { transform: scale(1); }
.wheeldate-title {
text-align: center; font-size: .9rem; font-weight: 500;
color: rgba(255,255,255,.55);
margin-bottom: .5rem; letter-spacing: .02em;
}
.wheeldate-wheels {
position: relative;
display: flex; gap: .25rem;
height: 220px; /* 5 × 44 px */
overflow: hidden;
border-radius: 12px;
background: rgba(255,255,255,.03);
}
.wheeldate-band {
position: absolute;
top: 50%; left: .25rem; right: .25rem;
transform: translateY(-50%);
height: 44px;
background: rgba(255,255,255,.10);
border-radius: 10px;
pointer-events: none;
z-index: 0;
}
.wheeldate-wheel {
flex: 1 1 0; height: 100%;
list-style: none; margin: 0; padding: 0;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
position: relative; z-index: 1;
}
.wheeldate-wheel::-webkit-scrollbar { display: none; }
.wheeldate-wheel-month { flex: 1.4 1 0; }
.wheeldate-item {
height: 44px;
display: flex; align-items: center; justify-content: center;
scroll-snap-align: center;
font-size: 1.05rem;
font-variant-numeric: tabular-nums;
color: rgba(255,255,255,.4);
transition: color .15s ease, transform .15s ease;
cursor: pointer;
user-select: none; -webkit-user-select: none;
}
.wheeldate-item.selected {
color: #fff; font-weight: 600;
transform: scale(1.04);
}
.wheeldate-spacer { pointer-events: none; }
.wheeldate-actions {
display: flex; gap: .5rem; margin-top: .85rem;
}
.wheeldate-actions .btn { flex: 1 1 auto; padding: .65rem .9rem; }
.wheeldate-actions .wd-clear { flex: 0 0 auto; min-width: 64px; }
.wheeldate-actions .btn-ghost {
background: rgba(255,255,255,.08); color: #fff; border-color: transparent;
}
.wheeldate-actions .btn-ghost:hover { background: rgba(255,255,255,.14); }
/* Zichtbare wiel-datum-display: voelt klikbaar, niet als gedimde readonly */
input[data-wheel-display-for] {
background: #fff; cursor: pointer; opacity: 1; caret-color: transparent;
}
input[data-wheel-display-for]:focus {
outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary);
}
/* Tijdstempels onder dossier-titel */
.dossier-timestamps { margin: .35rem 0 0; font-size: .8rem; }
.dossier-timestamps strong { color: var(--text); font-weight: 500; }
.dossier-timestamps code {
font-size: .9em;
background: var(--bg);
padding: 1px 5px;
border-radius: 3px;
}
/* Postcode-autofill hint */
/* Adres-autocomplete dropdown (PDOK Locatieserver) */
.addr-autocomplete { position: relative; display: block; }
.addr-autocomplete-list {
position: absolute; left: 0; right: 0; top: 100%;
margin-top: 2px; z-index: 50;
background: #fff; border: 1px solid var(--border);
border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
max-height: 280px; overflow-y: auto;
padding: .25rem;
}
.addr-autocomplete-item {
display: flex; flex-direction: column; align-items: flex-start;
width: 100%; text-align: left; background: none;
border: 0; border-radius: 6px; padding: .5rem .65rem;
cursor: pointer; color: inherit; font: inherit;
gap: .15rem;
}
.addr-autocomplete-item:hover,
.addr-autocomplete-item.active { background: var(--primary-soft, #f0e6e8); }
.addr-autocomplete-item strong { font-weight: 600; }
.pcode-hint {
display: block; margin-top: .25rem;
color: var(--green); opacity: 0;
transform: translateY(-2px);
transition: opacity .25s ease, transform .25s ease;
pointer-events: none;
}
.pcode-hint.pcode-hint-show { opacity: 1; transform: translateY(0); }
/* Alerts */
.alert { padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: .9rem; border: 1px solid; }
.alert-error { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.alert-success { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.alert-info { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
/* Kist-preview naast dropdown */
.kist-picker {
display: grid;
grid-template-columns: 1fr 220px;
gap: .75rem;
align-items: start;
}
@media (max-width: 720px) {
.kist-picker { grid-template-columns: 1fr; }
}
.kist-preview {
border: 1px solid var(--border);
border-radius: 8px;
background: #fafaf6;
padding: .5rem;
min-height: 130px;
display: flex;
flex-direction: column;
gap: .25rem;
}
.kist-preview-empty {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 110px;
color: var(--muted);
font-size: .82rem;
font-style: italic;
}
.kist-img {
width: 100%;
aspect-ratio: 12/7;
background: #fff;
border: 1px solid var(--border);
border-radius: 5px;
overflow: hidden;
display: block;
padding: 4px;
}
.kist-img svg { width: 100%; height: 100%; display: block; }
.kist-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kist-meta { display: flex; flex-direction: column; gap: .1rem; padding: .15rem .25rem .25rem; }
.kist-meta strong { font-size: .9rem; color: var(--text); }
.kist-price { color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; font-size: .9rem; }
.kist-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Inline kist-thumb in overzicht */
.kist-thumb-inline {
display: inline-block;
width: 90px;
height: 50px;
vertical-align: middle;
border: 1px solid var(--border);
border-radius: 4px;
background: #fff;
margin-right: .4rem;
overflow: hidden;
}
.kist-thumb-inline svg, .kist-thumb-inline img { width: 100%; height: 100%; display: block; object-fit: contain; }
/* Kistenbeheer-galerij */
.kist-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
.kist-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
transition: opacity .15s;
}
.kist-card.is-uploading { opacity: .55; }
.kist-card.is-uploading::after {
content: 'Bezig met uploaden...';
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.7);
font-weight: 600;
color: var(--primary);
}
.kist-card-img {
position: relative;
aspect-ratio: 4 / 3;
background: #fff;
overflow: hidden;
padding: 6px;
border-bottom: 1px solid var(--border);
width: 100%;
}
button.kist-card-img-btn {
border: none;
cursor: zoom-in;
font: inherit;
color: inherit;
display: block;
padding: 6px;
transition: transform .15s ease;
}
button.kist-card-img-btn:hover { transform: scale(1.01); }
button.kist-card-img-btn:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.kist-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kist-card-svg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f0ece2; border-radius: 4px; }
.kist-card-svg svg { width: 90%; height: 90%; }
.kist-card-no-img {
position: absolute; top: .35rem; right: .5rem;
background: rgba(0,0,0,.55); color: #fff;
font-size: .7rem; padding: .15rem .45rem; border-radius: 3px;
letter-spacing: .03em; text-transform: uppercase;
}
.kist-card-meta { padding: .6rem .75rem .25rem; display: flex; flex-direction: column; gap: .15rem; }
.kist-card-actions {
padding: .35rem .75rem .65rem;
display: flex; gap: .35rem; flex-wrap: wrap;
margin-top: auto;
}
.kist-card-actions .btn { flex: 1; }
/* Handtekeningen */
.signatures-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1rem;
}
.signature-block {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: .75rem;
}
.signature-header {
display: flex; justify-content: space-between; align-items: center;
gap: .5rem; margin-bottom: .5rem;
}
.signature-pad {
width: 100%;
height: 180px;
background: #fff;
border: 1px dashed #b6aa90;
border-radius: 6px;
cursor: crosshair;
touch-action: none;
display: block;
}
.signature-pad:active { border-color: var(--primary); }
.signature-actions {
display: flex; justify-content: space-between; align-items: center;
gap: .5rem; margin-top: .35rem;
}
.signature-status.signed { color: var(--green); font-weight: 600; }
.signatures-readonly .signature-img {
width: 100%; max-height: 180px;
background: #fff;
border: 1px solid var(--border);
border-radius: 6px;
object-fit: contain;
display: block;
}
/* Handtekening-velden beheer in instellingen */
.sig-row {
display: flex; gap: .5rem; align-items: center;
padding: .35rem 0;
border-bottom: 1px dashed var(--border);
}
.sig-row:last-child { border-bottom: none; }
.sig-row .sig-label { flex: 1; }
.sig-row .btn-icon { font-size: 1.3rem; }
/* Parochies-beheer in instellingen */
.parochie-row {
display: grid;
grid-template-columns: 1.1fr 1fr auto;
gap: .5rem; align-items: center;
padding: .35rem 0;
border-bottom: 1px dashed var(--border);
}
.parochie-row:last-child { border-bottom: none; }
.parochie-row .btn-icon { font-size: 1.3rem; }
@media (max-width: 540px) {
.parochie-row { grid-template-columns: 1fr auto; }
.parochie-row .parochie-priester { grid-column: 1 / 2; }
}
/* Pop-up modal (waarschuwing / fout / succes / info) */
.modal {
position: fixed; inset: 0; z-index: 300;
display: flex; align-items: center; justify-content: center;
padding: 1.5rem 1rem;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.modal.shown { opacity: 1; pointer-events: auto; }
.modal.fading { opacity: 0; }
.modal-backdrop {
position: absolute; inset: 0;
background: rgba(20, 18, 16, .55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* ── Mail-composer modal ────────────────────────────────────────────── */
.mail-overlay {
position: fixed; inset: 0; z-index: 1100;
display: flex; align-items: center; justify-content: center;
padding: 1rem;
opacity: 0; transition: opacity .2s ease;
}
.mail-overlay.shown { opacity: 1; }
.mail-backdrop {
position: absolute; inset: 0;
background: rgba(20,18,16,.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.mail-card {
position: relative; background: #fff;
border-radius: 14px; width: 100%; max-width: 620px;
max-height: 92vh; display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,.25);
transform: translateY(10px) scale(.98);
transition: transform .25s cubic-bezier(.2,.9,.3,1.2);
}
.mail-overlay.shown .mail-card { transform: none; }
.mail-head {
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
}
.mail-head h2 { margin: 0; font-size: 1.15rem; border: none; padding: 0; background: none; }
.mail-close {
background: none; border: 0; font-size: 1.6rem; line-height: 1;
cursor: pointer; color: var(--muted); padding: .15rem .5rem;
}
.mail-close:hover { color: var(--primary); }
.mail-body { padding: 1rem 1.25rem; overflow-y: auto; flex: 1; }
.mail-sub { margin: 0 0 .85rem; }
.mail-field { display: block; margin-bottom: .85rem; }
.mail-field > span { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .9rem; }
.mail-field input[type="text"] {
width: 100%; box-sizing: border-box;
padding: .55rem .7rem; border: 1px solid var(--border);
border-radius: 8px; font: inherit;
}
.mail-tags {
display: flex; flex-wrap: wrap; gap: .35rem;
border: 1px solid var(--border); border-radius: 8px;
padding: .35rem; min-height: 2.4rem; align-items: center;
}
.mail-tags:focus-within { border-color: var(--primary); }
.mail-tag {
display: inline-flex; align-items: center; gap: .3rem;
background: var(--primary-soft, #f0e6e8); color: var(--primary);
padding: .2rem .5rem; border-radius: 999px; font-size: .85rem;
}
.mail-tag-x {
background: none; border: 0; padding: 0; color: inherit;
cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.mail-tag-input {
flex: 1; min-width: 140px; border: 0; outline: none;
font: inherit; padding: .25rem; background: transparent;
}
.mail-suggesties {
margin: -.4rem 0 .85rem; display: flex; gap: .35rem;
flex-wrap: wrap; align-items: center;
}
.mail-sugg-wrap { display: inline-flex; align-items: stretch; gap: 0; }
.mail-sugg {
background: var(--bg, #f7f3ee); border: 1px solid var(--border);
border-radius: 6px; padding: .25rem .6rem;
font-size: .85rem; cursor: pointer; color: inherit;
}
.mail-sugg:hover { background: var(--primary-soft, #f0e6e8); border-color: var(--primary); }
.mail-sugg-wrap > .mail-sugg:first-child {
border-top-right-radius: 0; border-bottom-right-radius: 0;
border-right: 0;
}
.mail-sugg-cc {
border-top-left-radius: 0; border-bottom-left-radius: 0;
padding: .25rem .45rem; font-weight: 600; font-size: .75rem;
color: var(--muted);
}
.mail-sugg-cc:hover { color: var(--primary); }
.mail-attach {
display: flex; align-items: flex-start; gap: .5rem;
padding: .65rem .75rem; background: var(--bg, #f7f3ee);
border-radius: 8px; margin-bottom: .85rem; cursor: pointer;
}
.mail-attach input { margin-top: .2rem; }
.mail-preview { margin-bottom: .5rem; }
.mail-preview summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.mail-preview-text {
white-space: pre-wrap; font: 0.85rem/1.5 ui-monospace, monospace;
background: var(--bg, #f7f3ee); border-radius: 8px;
padding: .75rem; margin: .5rem 0 0; max-height: 220px; overflow: auto;
}
.mail-status {
margin-top: .5rem; padding: .55rem .75rem; border-radius: 8px;
font-size: .9rem;
}
.mail-status-info { background: #e9f2fb; color: #1a4a7a; }
.mail-status-success { background: #e6f4ea; color: #1e6b34; }
.mail-status-error { background: #fdecea; color: #a02525; }
.mail-foot {
display: flex; justify-content: flex-end; gap: .5rem;
padding: .85rem 1.25rem; border-top: 1px solid var(--border);
}
@media (max-width: 600px) {
.mail-card { max-height: 100vh; height: 100vh; border-radius: 0; }
.mail-overlay { padding: 0; }
}
.modal-card {
position: relative;
background: #fff;
border-radius: 16px;
padding: 2rem 1.75rem 1.5rem;
max-width: 420px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.12);
transform: translateY(12px) scale(.96);
opacity: 0;
transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .25s ease;
}
.modal.shown .modal-card { transform: translateY(0) scale(1); opacity: 1; }
.modal.fading .modal-card { transform: translateY(-6px) scale(.98); opacity: 0; }
.modal-card h2 {
margin: .25rem 0 .5rem;
font-size: 1.25rem;
border: none; padding: 0;
color: var(--text);
}
.modal-card p {
margin: 0 0 1.25rem;
color: var(--muted);
line-height: 1.55;
font-size: .95rem;
}
.modal-card .btn { min-width: 140px; }
.modal-buttons {
display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap;
margin-top: .5rem;
}
.modal-card #modal-message { text-align: left; }
.modal-card #modal-message ul { padding-left: 1.25rem; margin: .35rem 0; }
.modal-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 76px; height: 76px;
border-radius: 50%;
margin: 0 auto .85rem;
}
.modal-offline .modal-icon, .modal-warning .modal-icon {
background: var(--amber-soft); color: var(--amber);
}
.modal-error .modal-icon {
background: var(--red-soft); color: var(--red);
}
.modal-success .modal-icon {
background: var(--green-soft); color: var(--green);
}
.modal-info .modal-icon {
background: var(--blue-soft); color: var(--blue);
}
/* Factuur-pagina (printbaar) */
.factuur-doc {
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
padding: 2.5rem 2.5rem 2rem;
max-width: 820px;
margin: 0 auto;
box-shadow: var(--shadow);
}
.factuur-header {
display: flex; justify-content: space-between; align-items: flex-start;
border-bottom: 2px solid var(--primary); padding-bottom: 1rem; margin-bottom: 1.25rem;
}
.factuur-meta { text-align: right; }
.factuur-parties {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
margin-bottom: 1.25rem;
}
.factuur-party { padding: .85rem 1rem; background: var(--bg); border-radius: 6px; }
.factuur-verzekering {
background: var(--blue-soft); color: var(--blue);
padding: .65rem 1rem; border-radius: 6px; margin-bottom: 1rem;
font-size: .9rem;
}
.factuur-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.factuur-table th, .factuur-table td { padding: .55rem .65rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.factuur-table th { background: var(--bg); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.factuur-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.factuur-table .center { text-align: center; }
.factuur-table tfoot td { padding: .65rem; }
.factuur-table .factuur-totalrow td { background: var(--primary-soft); border-top: 2px solid var(--primary); font-size: 1.05rem; }
.factuur-betaling {
background: var(--bg); padding: .85rem 1rem; border-radius: 6px;
font-size: .9rem; margin: 1rem 0;
}
.factuur-footer { margin-top: 1.5rem; text-align: center; }
@media print {
.topbar, .footer, .no-print, body.is-offline .topbar { display: none !important; }
.factuur-page { margin: 0; padding: 0; }
.factuur-doc { border: none; box-shadow: none; padding: 0; max-width: 100%; }
}
/* Lightbox — grotere afbeelding-preview (niet fullscreen) */
.lightbox {
position: fixed; inset: 0; z-index: 320;
display: flex; align-items: center; justify-content: center;
padding: 2rem 1.5rem;
opacity: 0; pointer-events: none;
transition: opacity .25s ease;
}
.lightbox.shown { opacity: 1; pointer-events: auto; }
.lightbox.fading { opacity: 0; }
.lightbox-backdrop {
position: absolute; inset: 0;
background: rgba(20, 18, 16, .75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.lightbox-card {
position: relative;
background: #fff;
border-radius: 14px;
box-shadow: 0 24px 70px rgba(0,0,0,.35);
max-width: min(720px, 92vw);
max-height: 86vh;
display: flex; flex-direction: column;
overflow: hidden;
transform: scale(.94);
transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.lightbox.shown .lightbox-card { transform: scale(1); }
.lightbox-close {
position: absolute; top: .5rem; right: .65rem;
width: 36px; height: 36px;
border: none; border-radius: 50%;
background: rgba(255,255,255,.85);
color: var(--text);
font-size: 1.4rem; font-weight: 600; line-height: 1;
cursor: pointer; z-index: 1;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.lightbox-close:hover { background: #fff; }
.lightbox-img-wrap {
background: #fff;
padding: 1.5rem 1.5rem .5rem;
display: flex; align-items: center; justify-content: center;
min-height: 280px;
flex: 1; min-height: 0;
}
.lightbox-img-wrap img,
.lightbox-img-wrap .lightbox-svg {
max-width: 100%; max-height: 60vh;
object-fit: contain;
display: block;
}
.lightbox-img-wrap .lightbox-svg svg { width: 100%; max-width: 480px; height: auto; }
.lightbox-meta {
padding: .85rem 1.5rem 1.25rem;
border-top: 1px solid var(--border);
display: flex; flex-direction: column; gap: .15rem;
text-align: center;
}
.lightbox-meta strong { font-size: 1.05rem; }
.lightbox-meta .kist-price { font-size: 1rem; }
/* Welkomscherm / splash */
.splash {
position: fixed; inset: 0; z-index: 200;
background:
radial-gradient(1200px 800px at 30% 20%, rgba(107,30,42,.07), transparent 60%),
radial-gradient(900px 600px at 80% 90%, rgba(201,162,74,.10), transparent 60%),
linear-gradient(135deg, #f6f4ef, #ede5d8);
display: flex; align-items: center; justify-content: center;
padding: 2rem 1rem;
opacity: 1;
filter: blur(0);
transform: scale(1);
transition:
opacity .7s cubic-bezier(.4,0,.2,1),
filter .55s ease,
transform .8s cubic-bezier(.4,0,.2,1);
will-change: opacity, filter, transform;
}
.splash.fading { pointer-events: none; }
.splash-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 2.5rem 2rem 1.75rem;
max-width: 440px;
width: 100%;
text-align: center;
box-shadow: 0 16px 48px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.04);
animation: splashIn .7s cubic-bezier(.2,.8,.2,1) both;
transition:
opacity .5s ease,
transform .65s cubic-bezier(.4,0,.2,1),
filter .5s ease;
will-change: opacity, transform, filter;
}
@keyframes splashIn {
from { transform: translateY(14px) scale(.97); opacity: 0; filter: blur(6px); }
to { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
}
/* Animatievarianten — alleen bij wegfaden */
.splash.anim-glass.fading { opacity: 0; filter: blur(14px); }
.splash.anim-glass.fading .splash-card { opacity: 0; transform: translateY(-12px) scale(.96); filter: blur(4px); }
.splash.anim-fade.fading { opacity: 0; }
.splash.anim-fade.fading .splash-card { opacity: 0; }
.splash.anim-scale.fading { opacity: 0; transform: scale(1.06); }
.splash.anim-scale.fading .splash-card { opacity: 0; transform: scale(.92); }
.splash.anim-slide.fading { opacity: 0; }
.splash.anim-slide.fading .splash-card { opacity: 0; transform: translateY(-32px); }
.splash-card h1 {
margin: .2rem 0 .15rem;
font-size: 1.7rem;
color: var(--primary);
}
.splash-sub { margin: 0 0 1.25rem; color: var(--muted); font-size: .92rem; }
.splash-state { margin-top: .75rem; }
.splash-msg { margin: .25rem 0; font-size: .95rem; color: var(--text); }
.splash-msg-sub { margin: .35rem 0 0; font-size: .85rem; color: var(--muted); line-height: 1.45; }
.splash-spinner {
display: inline-block;
width: 32px; height: 32px;
border: 3px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin .8s linear infinite;
margin-bottom: .35rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.splash-state-offline { color: var(--amber); }
.splash-icon-offline {
display: inline-flex; align-items: center; justify-content: center;
width: 72px; height: 72px;
background: var(--amber-soft);
color: var(--amber);
border-radius: 50%;
margin: 0 auto .25rem;
}
.splash-state-offline .splash-msg { color: var(--text); }
.splash-state-offline .splash-msg strong { color: var(--amber); }
.splash-card #splash-continue { margin-top: 1.25rem; min-width: 160px; }
.splash-hint { margin-top: .75rem; }
.splash-version { margin: 1rem 0 0; font-size: .72rem; opacity: .55; letter-spacing: .03em; }
.footer-version { font-size: .72rem; opacity: .7; }
/* Logo-upload preview */
.logo-row { display: flex; align-items: center; gap: 1rem; padding: .35rem 0; }
.logo-preview {
width: 72px; height: 72px;
border: 1px dashed var(--border);
border-radius: 12px;
background: var(--bg);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
color: var(--primary);
font-size: 2rem;
flex-shrink: 0;
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.logo-actions { display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.logo-actions .btn { justify-content: flex-start; }
/* Color picker overschrijving — bovenaan al gedefinieerd; deze regel is leeg gehouden */
/* Lettertype-voorbeeldblok */
.font-preview {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: .85rem 1rem;
margin: -.35rem 0 .35rem;
}
.font-preview h3 { color: var(--text); }
.font-preview p { color: var(--muted); font-size: .95rem; line-height: 1.55; }
/* Offline-badge */
.offline-badge {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .15rem .55rem;
background: var(--amber-soft);
color: var(--amber);
border: 1px solid var(--amber);
border-radius: 999px;
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
}
.offline-badge::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: var(--amber);
display: inline-block;
}
body.is-offline .topbar { box-shadow: inset 0 -2px 0 var(--amber); }
/* Autosave status-indicator */
.autosave-status {
font-size: .78rem;
color: var(--muted);
font-style: italic;
align-self: center;
min-height: 1.1em;
transition: color .15s;
}
.autosave-status.saving { color: var(--amber); }
.autosave-status.saved { color: var(--green); }
.autosave-status.error { color: var(--red); }
/* Preset buttons (kosten-catalogus) */
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .5rem; margin-top: .5rem; }
.preset-btn { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .55rem .75rem; text-align: left; }
.preset-btn span { flex: 1; font-size: .85rem; }
.preset-btn strong { color: var(--primary); font-variant-numeric: tabular-nums; }
/* Kosten — gegroepeerd per categorie */
/* Kosten-sectie in-/uitklappen — hele header is een grote knop */
.kosten-header {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
width: 100%; background: none; border: 0; padding: .25rem;
margin: -.25rem -.25rem .5rem; border-radius: 8px;
cursor: pointer; color: inherit; text-align: left;
font: inherit; transition: background-color .15s ease;
}
.kosten-header:hover { background: var(--bg, #f6f3ee); }
.kosten-header:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kosten-card.collapsed .kosten-header { margin-bottom: 0; }
.kosten-chevron {
display: inline-block;
transition: transform .18s ease;
font-size: 1rem;
color: var(--muted);
flex-shrink: 0;
}
.kosten-card.collapsed .kosten-chevron { transform: rotate(-90deg); }
.kosten-card.collapsed .kosten-body { display: none; }
.kosten-summary { font-weight: 400; flex: 1; min-width: 0; }
.kosten-summary strong { font-weight: 600; }
.kosten-factuur-link { margin-left: auto; }
@media print {
.kosten-card.collapsed .kosten-body { display: block !important; }
.kosten-chevron, .kosten-factuur-link { display: none; }
.kosten-header { cursor: default; }
}
.kosten-groups { display: flex; flex-direction: column; gap: 1rem; margin-top: .5rem; }
.kosten-group { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.kosten-group-head {
display: flex; justify-content: space-between; align-items: baseline;
gap: .75rem; padding: .55rem .85rem;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.kosten-group-title {
font-family: var(--font-heading, Georgia, serif);
font-weight: 600; font-size: 1rem; color: var(--primary);
}
.kosten-group-sub { white-space: nowrap; }
.kosten-table { margin: 0; table-layout: fixed; width: 100%; }
.kosten-table tbody tr { border-bottom: 1px dashed var(--border); }
.kosten-table tbody tr:last-child { border-bottom: none; }
.kosten-table td { padding: .55rem .85rem; vertical-align: middle; }
.kosten-table .num { font-variant-numeric: tabular-nums; }
.kosten-table .btn-icon { font-size: 1.1rem; }
/* Vaste kolommen — zo staan prijzen/knoppen in elke categorie precies onder elkaar */
.kosten-table col.kc-col-omschrijving { width: auto; }
.kosten-table col.kc-col-aantal { width: 80px; }
.kosten-table col.kc-col-bedrag { width: 120px; }
.kosten-table col.kc-col-dekking { width: 150px; }
.kosten-table col.kc-col-wie { width: 150px; }
.kosten-table col.kc-col-status { width: 120px; }
.kosten-table col.kc-col-del { width: 44px; }
.kosten-table .kc-aantal-input {
width: 100%; max-width: 64px; padding: .25rem .35rem; height: 2rem;
font-size: .9rem; text-align: center; -moz-appearance: textfield;
}
.kosten-table .kc-aantal-input::-webkit-outer-spin-button,
.kosten-table .kc-aantal-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kosten-table .kc-dekking { font-size: .82rem; line-height: 1.3; text-align: right; }
.kosten-table .kc-dekking .dekking-deel { color: var(--green); font-weight: 600; }
.kosten-table .kc-dekking .familie-deel { color: var(--muted); }
.kosten-table .kc-omschrijving { word-wrap: break-word; overflow-wrap: anywhere; }
.kosten-table .kc-bedrag { text-align: right; white-space: nowrap; }
.kosten-table .kc-wie { text-align: center; }
.kosten-table .kc-status { text-align: center; }
.kosten-table .kc-del { text-align: right; padding-left: 0; padding-right: .5rem; }
.kosten-table .kc-status .kost-toggle,
.kosten-table .kc-wie .kost-toggle { width: 100%; max-width: 130px; }
@media (max-width: 720px) {
.kosten-table col.kc-col-bedrag { width: 110px; }
.kosten-table col.kc-col-wie { width: 120px; }
.kosten-table col.kc-col-status { width: 100px; }
.kosten-table td { padding: .55rem .55rem; }
}
.kosten-totals {
margin-top: 1rem; padding: .85rem 1rem;
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
display: flex; flex-direction: column; gap: .35rem;
}
.kosten-total-row {
display: flex; justify-content: space-between; align-items: baseline;
gap: 1rem; font-size: .95rem;
}
.kosten-total-row .num { font-variant-numeric: tabular-nums; }
.kosten-total-row.total-open {
margin-top: .35rem; padding-top: .55rem;
border-top: 1px solid var(--border);
font-size: 1.05rem;
}
.kosten-total-row.total-open strong { color: var(--amber); }
.kosten-totals-divider {
height: 1px; background: var(--border); margin: .5rem 0 .15rem;
}
.kosten-total-row.total-familie {
margin-top: .25rem;
font-size: 1.05rem;
}
.kosten-total-row.total-familie strong { color: var(--primary); }
/* Helpers */
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.center { text-align: center; }
[hidden] { display: none !important; }
/* ────────────────────────────────────────────────────────────────────
Apple-style polish — microinteracties, halo-focus, glass-topbar,
iOS segmented tabs, subtiele card-lift. Behoudt religieus karakter
(wine + serif h-koppen + cream achtergrond).
──────────────────────────────────────────────────────────────────── */
/* San Francisco eerst, zachtere font-rendering */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Cards: nieuwe radius + lift on hover (alleen op pointer-devices) */
.card,
.stat-card,
.kist-card {
border-radius: var(--radius);
transition: box-shadow var(--t-base) var(--ease-out),
transform var(--t-base) var(--ease-out),
border-color var(--t-fast) var(--ease);
}
.stat-card { border-radius: var(--radius); }
@media (hover: hover) and (pointer: fine) {
.stat-card:hover,
.kist-card:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
border-color: color-mix(in srgb, var(--border) 70%, var(--text));
}
}
/* Topbar: iOS glass — translucent met blur */
.topbar {
background: color-mix(in srgb, var(--surface) 78%, transparent);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--hairline);
}
.topnav a {
transition: background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
border-radius: var(--radius-sm);
}
/* Buttons: tactile press (scale .97), halo focus, geen harde outline */
.btn {
border-radius: var(--radius-sm);
font-weight: 500;
letter-spacing: -0.005em;
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
transform 80ms var(--ease),
box-shadow var(--t-fast) var(--ease);
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.btn:active:not(:disabled) {
transform: scale(.97);
}
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent);
}
.btn-primary {
box-shadow: 0 1px 2px rgba(107, 30, 42, 0.20),
0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.btn-primary:hover {
box-shadow: 0 2px 8px rgba(107, 30, 42, 0.25),
0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.btn-ghost:hover {
background: color-mix(in srgb, var(--text) 5%, transparent);
}
body.ui-square .btn { border-radius: 2px; }
/* Inputs: halo focus ring (3px, iOS-stijl) ipv harde outline */
input:focus, select:focus, textarea:focus,
.form input:focus, .form select:focus, .form textarea:focus,
.filter-bar input:focus, .filter-bar select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
input, select, textarea,
.form input, .form select, .form textarea,
.filter-bar input, .filter-bar select {
transition: border-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease);
}
/* Tabs: iOS segmented control — pill achtergrond + soft "selected" chip */
.tabs {
display: inline-flex;
gap: 2px;
padding: 3px;
margin-bottom: 1.25rem;
background: color-mix(in srgb, var(--text) 6%, transparent);
border-radius: var(--radius);
border-bottom: none;
}
.tabs a {
padding: .45rem .95rem;
border-radius: calc(var(--radius) - 4px);
font-size: .88rem;
font-weight: 500;
color: var(--muted);
border-bottom: none;
transition: background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease);
}
.tabs a:hover {
color: var(--text);
background: color-mix(in srgb, var(--surface) 50%, transparent);
}
.tabs a.active {
color: var(--text);
background: var(--surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
0 1px 4px rgba(0, 0, 0, 0.04);
}
@media (max-width: 540px) {
.tabs { display: flex; flex-wrap: wrap; }
.tabs a { flex: 1 1 auto; text-align: center; }
}
/* H2 zonder hard onderlijn — Apple gebruikt witruimte ipv borders */
h2 {
border-bottom: none;
padding-bottom: 0;
margin-bottom: .85rem;
letter-spacing: -0.01em;
}
h1 { letter-spacing: -0.015em; }
/* Status pills: iets steviger, ronder */
.status, .badge {
font-weight: 600;
letter-spacing: 0.005em;
}
/* Brand-mark: zachtere ring/schaduw */
.brand-mark {
box-shadow: 0 1px 2px rgba(107, 30, 42, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
/* Page-head: ademruimte, breekt netter op mobiel */
.page-head { margin-bottom: 1.75rem; gap: 1.25rem; }
.page-actions { gap: .4rem; }
/* Modal: nog iets ronder hoekprofiel + helderdere lift */
.modal-card {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg),
0 30px 80px rgba(20, 18, 16, 0.18);
}
/* Definition-list: ruimer, geen dashed border (rustiger) */
.dl > div {
border-bottom: 1px solid var(--hairline);
padding: .5rem 0;
}
/* Lists: hairline ipv dashed (rustiger, Apple-stijl) */
.list li { border-bottom: 1px solid var(--hairline); }
/* Tables: hairline borders, hover iets vriendelijker */
.table th, .table td {
border-bottom-color: var(--hairline);
}
.table tbody tr {
transition: background var(--t-fast) var(--ease);
}
.table tbody tr:hover {
background: color-mix(in srgb, var(--primary) 4%, transparent);
}
/* Checkbox-circle: smooth toggle */
.check {
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
transform 100ms var(--ease);
}
.check:active { transform: scale(.92); }
/* Kost-toggle: al goed, alleen iets snellere snap */
.kost-toggle { transition: filter var(--t-fast) var(--ease), transform 80ms var(--ease); }
/* Beweging uit voor toegankelijkheid */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
.btn:active:not(:disabled) { transform: none; }
}
/* Beter scrollgedrag op iOS */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-overflow-scrolling: touch; }
/* Safe-area-inset voor iPad/iPhone notch wanneer Capacitor-wrapper draait */
@supports (padding: env(safe-area-inset-top)) {
.topbar { padding-top: env(safe-area-inset-top); }
.main { padding-bottom: max(3rem, env(safe-area-inset-bottom)); }
}
/* ─── Familie-portaal admin-sectie (binnen dossier-detail) ─── */
.portaal-link-row {
display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
margin: .75rem 0 .25rem;
}
.portaal-link-row input {
flex: 1; min-width: 200px;
padding: .55rem .75rem; border: 1px solid var(--border);
border-radius: 8px; font-family: ui-monospace, monospace;
font-size: .85rem; background: var(--bg, #f7f3ee);
}
.portaal-item {
display: flex; gap: .5rem; align-items: flex-start;
padding: .65rem; margin-bottom: .5rem;
border: 1px solid var(--border); border-radius: 8px;
background: var(--surface);
}
.portaal-item-fields { flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.portaal-item-fields input,
.portaal-item-fields textarea {
width: 100%; padding: .5rem .65rem;
border: 1px solid var(--border); border-radius: 6px; font: inherit;
}
.portaal-item-fields input { font-weight: 600; }
.portaal-item .btn-icon { flex-shrink: 0; }
#portaal-welkomtekst {
width: 100%; min-height: 100px;
padding: .65rem .75rem; border: 1px solid var(--border);
border-radius: 8px; font: inherit; resize: vertical;
}
/* ─── Familie-portaal beheer-pagina (eigen pagina /portaal) ─── */
/* Kale pagina: geen bovenbalk (ook niet op smalle schermen). Navigeren via
de terug-link in de pagina en (op brede schermen) de zijbalk. */
body.portaal-page .topbar { display: none !important; }
body.portaal-page .app-main { padding-top: env(safe-area-inset-top); }
.portaal-beheer { padding-bottom: 6rem; }
.portaal-beheer .back-link { display: inline-block; margin-bottom: .5rem; }
.portaal-picker label { display: block; margin-bottom: .5rem; }
.portaal-dossier-select {
width: 100%; padding: .7rem .8rem;
border: 1px solid var(--border); border-radius: 10px;
font: inherit; background: var(--surface);
}
.portaal-empty {
text-align: center; color: var(--muted);
padding: 3rem 1.5rem; margin-top: 1rem;
}
.portaal-empty-icon { font-size: 2.6rem; opacity: .4; margin-bottom: .5rem; }
#portaal-config { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.portaal-linkcard-head,
.portaal-section-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
}
.portaal-linkcard-head h2,
.portaal-section-head h2 { margin: 0; }
.portaal-pill {
font-size: .8rem; font-weight: 600; white-space: nowrap;
padding: .2rem .6rem; border-radius: 999px;
background: var(--bg); color: var(--muted);
}
.portaal-pill-on { background: #e7f6ec; color: #1f7a3a; }
.portaal-pill-off { background: #f0eee9; color: #8a847a; }
.portaal-contact-line {
margin: .75rem 0 0; font-size: .9rem;
padding: .55rem .7rem; background: var(--bg); border-radius: 8px;
}
.portaal-linkcard-actions { justify-content: flex-start; gap: .5rem; flex-wrap: wrap; margin-top: .85rem; }
.portaal-dag-head {
display: grid; grid-template-columns: 90px 1fr 1fr 34px; gap: .5rem;
font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
color: var(--muted); margin: .35rem 0 .35rem; padding: 0 .1rem;
}
.portaal-dag-row {
display: grid; grid-template-columns: 90px 1fr 1fr 34px; gap: .5rem;
align-items: center; margin-bottom: .5rem;
}
.portaal-dag-row input {
width: 100%; padding: .5rem .6rem;
border: 1px solid var(--border); border-radius: 8px; font: inherit;
}
.portaal-dag-row .portaal-dag-tijd { font-variant-numeric: tabular-nums; }
.portaal-dag-row .btn-icon { justify-self: center; }
.portaal-savebar {
position: sticky; bottom: 0; z-index: 5;
display: flex; justify-content: flex-end; gap: .6rem;
padding: .85rem 1rem;
margin: .5rem -1px -1px;
background: color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter: blur(8px);
border-top: 1px solid var(--border);
border-radius: 0 0 12px 12px;
}
@supports not (backdrop-filter: blur(8px)) {
.portaal-savebar { background: var(--surface); }
}
/* Familie-portaal snelkoppeling binnen dossier-detail */
.portaal-shortcut-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
}
@media (max-width: 640px) {
.portaal-dag-head { display: none; }
.portaal-dag-row {
grid-template-columns: 90px 1fr 34px;
grid-template-areas: 'tijd moment del' 'loc loc loc';
row-gap: .4rem;
}
.portaal-dag-row .portaal-dag-tijd { grid-area: tijd; }
.portaal-dag-row .portaal-dag-moment { grid-area: moment; }
.portaal-dag-row .portaal-dag-locatie{ grid-area: loc; }
.portaal-dag-row .btn-icon { grid-area: del; }
}
/* ─── Familie-portaal publieke pagina (familie ziet dit) ─── */
.familie-portaal-body {
background: #f7f3ee;
}
/* Volledig kaal: geen zijbalk, topbar of footer — alleen de portal-pagina. */
.familie-portaal-body .sidebar,
.familie-portaal-body .topbar,
.familie-portaal-body .footer,
.familie-portaal-body #login-screen,
.familie-portaal-body #profile-screen,
.familie-portaal-body #splash {
display: none !important;
}
.familie-portaal-body .app-shell { display: block; min-height: 100vh; }
.familie-portaal-body .app-main { margin: 0; width: 100%; }
.familie-portaal-body .app-main,
.familie-portaal-body #view { padding: 0 !important; }
.fp-page {
min-height: 100vh;
max-width: 720px;
margin: 0 auto;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
color: #1a1714;
line-height: 1.55;
}
.fp-header {
background: #2563eb;
color: #fff;
padding: 1.5rem 1.25rem;
border-radius: 0 0 12px 12px;
margin-bottom: 1rem;
}
.fp-brand {
display: flex; align-items: center; gap: .85rem;
}
.fp-cross {
font-size: 2.2rem;
line-height: 1;
opacity: .9;
}
.fp-brand strong {
display: block; font-size: 1.1rem; font-weight: 600;
}
.fp-brand span {
display: block; font-size: .85rem; opacity: .85;
}
.fp-main {
padding: 0 1.25rem 1rem;
display: flex; flex-direction: column; gap: 1rem;
}
.fp-card {
background: #fff;
border-radius: 12px;
padding: 1.25rem 1.35rem;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.fp-welkom p { margin: 0; font-size: 1rem; color: #2a2724; }
.fp-titel {
margin: 0 0 .35rem;
font-size: 1.55rem; font-weight: 600;
border: none; padding: 0; background: none;
}
.fp-sub {
margin: 0; color: #6b6760; font-size: .9rem;
display: flex; gap: .35rem; flex-wrap: wrap; align-items: center;
}
.fp-dot { color: #b8b3aa; }
.fp-card h2 {
margin: 0 0 .85rem; font-size: 1.05rem; font-weight: 600;
color: #2563eb; border: none; padding: 0; background: none;
}
.fp-dl {
display: grid; grid-template-columns: 1fr; gap: .55rem;
margin: 0;
}
.fp-dl > div {
display: flex; flex-direction: column; gap: .15rem;
}
.fp-dl dt {
font-size: .8rem; color: #8a847a; text-transform: uppercase; letter-spacing: .03em;
}
.fp-dl dd {
margin: 0; font-size: .98rem;
}
.fp-checklist {
list-style: none; padding: 0; margin: .5rem 0 0;
display: flex; flex-direction: column; gap: .65rem;
}
.fp-checklist li {
display: flex; gap: .65rem; align-items: flex-start;
padding: .65rem .85rem;
background: #f7f3ee; border-radius: 8px;
}
.fp-check-mark {
font-size: 1.3rem; line-height: 1; flex-shrink: 0;
color: #2563eb; margin-top: .15rem;
}
.fp-checklist strong {
display: block; font-weight: 600; font-size: .98rem;
}
.fp-checklist p {
margin: .25rem 0 0; color: #6b6760; font-size: .88rem;
}
/* Dagplanning-tijdlijn op de publieke pagina */
.fp-timeline {
list-style: none; padding: 0; margin: .5rem 0 0;
}
.fp-timeline li {
display: grid; grid-template-columns: 58px 18px 1fr;
gap: .1rem; align-items: stretch;
}
.fp-time {
font-weight: 700; font-variant-numeric: tabular-nums;
color: #2563eb; font-size: .95rem; padding-top: .1rem;
text-align: right; padding-right: .35rem;
}
.fp-dotline { position: relative; }
.fp-dotline::before {
content: ''; position: absolute; left: 50%; top: .35rem;
width: 10px; height: 10px; border-radius: 50%;
background: #2563eb; transform: translateX(-50%);
}
.fp-dotline::after {
content: ''; position: absolute; left: 50%; top: 1.1rem; bottom: -.3rem;
width: 2px; background: #d7ddea; transform: translateX(-50%);
}
.fp-timeline li:last-child .fp-dotline::after { display: none; }
.fp-moment {
padding: 0 0 1.1rem .5rem;
}
.fp-moment strong { display: block; font-size: 1rem; }
.fp-moment span { display: block; color: #6b6760; font-size: .88rem; margin-top: .1rem; }
.fp-footer {
margin-top: 1rem; padding: 1.25rem;
text-align: center; color: #6b6760; font-size: .85rem;
background: #101a35;
border-radius: 12px 12px 0 0;
}
.fp-foot-addr { color: #cfd6e3; margin-bottom: .45rem; }
.fp-foot-contact { color: #a8b3c6; font-size: .82rem; }
.fp-foot-contact a { color: #a8b3c6; text-decoration: none; }
/* ID-kaart-upload op de publieke portal */
.fp-id-groep { margin-top: 1rem; }
.fp-id-groep h3 { margin: 0 0 .5rem; font-size: .95rem; color: #2a2724; }
.fp-id-slots { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.fp-id-slot {
display: flex; align-items: center; gap: .6rem; cursor: pointer;
padding: .8rem .85rem; border: 1.5px dashed #c7cdd8; border-radius: 10px;
background: #f7f9fc; transition: border-color .15s, background .15s;
}
.fp-id-slot:active { background: #eef2f8; }
.fp-id-slot.done { border-style: solid; border-color: #2a7a3a; background: #eefaf0; }
.fp-id-slot.busy { opacity: .65; pointer-events: none; }
.fp-id-cam { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.fp-id-slot.done .fp-id-cam { color: #2a7a3a; }
.fp-id-text { display: flex; flex-direction: column; min-width: 0; }
.fp-id-text strong { font-size: .95rem; }
.fp-id-status { font-size: .78rem; color: #6b6760; }
@media (max-width: 480px) { .fp-id-slots { grid-template-columns: 1fr; } }
/* ID-kaarten aan de beheer-kant (portal-config) */
.portaal-id-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: .75rem; margin-top: .5rem;
}
.portaal-id-card {
margin: 0; border: 1px solid var(--border); border-radius: 10px;
overflow: hidden; background: var(--surface);
}
.portaal-id-card img {
width: 100%; height: 120px; object-fit: cover; display: block; cursor: zoom-in;
background: #eee;
}
.portaal-id-card.empty .portaal-id-placeholder {
height: 120px; display: flex; align-items: center; justify-content: center;
color: var(--muted); font-size: .82rem; background: var(--bg);
}
.portaal-id-card figcaption {
padding: .5rem .6rem; display: flex; flex-direction: column; gap: .15rem;
}
.portaal-id-card figcaption strong { font-size: .82rem; }
.portaal-id-acties { display: flex; gap: .35rem; margin-top: .25rem; }
.portaal-id-acties .btn { padding: .2rem .5rem; }
/* Lightbox voor het groot bekijken van een ID-foto */
.img-lightbox {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center; padding: 1.5rem;
cursor: zoom-out;
}
.img-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.85); }
.img-lightbox img {
position: relative; max-width: 100%; max-height: 100%;
border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.fp-error-card {
background: #fff; border-radius: 12px;
padding: 2.5rem 1.5rem;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.fp-error-icon { font-size: 2.5rem; margin-bottom: .5rem; color: #b34; }
.fp-error-card h1 { margin: 0 0 .5rem; font-size: 1.2rem; border: none; padding: 0; background: none; }
.fp-error-card p { color: #6b6760; margin: 0; }
.fp-loading {
padding: 4rem 1rem; text-align: center;
}
@media (min-width: 640px) {
.fp-dl { grid-template-columns: 1fr 1fr; }
}
/* ─── Begraafplaats grid (vliegtuig-stoel-stijl) ─── */
.graven-filter {
display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap;
}
.graven-filter-inline {
display: flex; flex-direction: column; gap: .15rem;
}
.graven-filter-inline input,
.graven-filter-inline select {
padding: .4rem .55rem; border: 1px solid var(--border);
border-radius: 6px; font: inherit; background: #fff;
}
.graven-legend-card { margin-bottom: .85rem; }
.graven-legend {
display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center;
}
.graven-legend-item {
display: inline-flex; align-items: center; gap: .45rem;
font-size: .9rem;
}
.graven-legend-item .graven-cell {
width: 22px; height: 22px;
font-size: 0; padding: 0; pointer-events: none;
}
.graven-grid-wrap { margin-top: 1rem; }
.graven-grid {
display: flex; flex-direction: column; gap: 2rem;
}
.graven-side-title {
font-size: .95rem; font-weight: 600; color: var(--muted);
text-transform: uppercase; letter-spacing: .04em;
margin: 0 0 .5rem; border: none; padding: 0; background: none;
}
.graven-row {
display: grid;
grid-template-columns: 50px 1fr;
gap: .5rem;
align-items: center;
margin-bottom: .35rem;
}
.graven-row-label {
font-weight: 700; color: var(--muted);
text-align: right; font-size: .85rem;
}
.graven-row-cells {
display: flex; flex-wrap: wrap; gap: 2px;
padding: 4px;
background: var(--bg, #f7f3ee);
border-radius: 6px;
min-height: 26px;
}
.graven-cell {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
font-size: .65rem; font-weight: 600;
border: 1px solid #d6d2cb;
border-radius: 3px;
cursor: pointer;
background: #fff; color: #1a1714;
transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
font-family: ui-monospace, monospace;
padding: 0;
}
.graven-cell:hover {
transform: scale(1.08); z-index: 2; position: relative;
border-color: var(--primary);
box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.graven-beschikbaar { background: #fff; color: #2a2724; }
.graven-gereserveerd {
background: #fadc7b; color: #6a4d00;
border-color: #d9b34a;
}
.graven-bezet {
background: #ef6b67; color: #fff;
border-color: #c44c47;
}
.graven-has-dossier {
outline: 2px solid var(--primary);
outline-offset: -2px;
}
.graven-loading {
padding: 3rem 1rem; text-align: center;
}
/* Modal: graf-details */
.graf-modal-info {
display: flex; align-items: center; gap: 1rem;
margin: 0 0 1rem; padding: .85rem;
background: var(--bg, #f7f3ee); border-radius: 8px;
text-align: left;
}
.graf-modal-nr {
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1rem;
border-radius: 6px; border: 2px solid #d6d2cb;
font-family: ui-monospace, monospace;
flex-shrink: 0;
}
.graf-modal-row {
margin-bottom: .85rem; text-align: left;
display: flex; flex-direction: column; gap: .3rem;
}
.graf-modal-row label { font-weight: 600; }
.graf-modal-row select,
.graf-modal-row textarea {
width: 100%; padding: .5rem .65rem;
border: 1px solid var(--border); border-radius: 6px;
font: inherit; background: #fff;
}
@media (max-width: 720px) {
.graven-cell { width: 24px; height: 24px; font-size: .6rem; }
.graven-row { grid-template-columns: 40px 1fr; }
}
/* ─── Begraafplaats — SVG plattegrond ─── */
.graven-map-wrap {
margin-top: 1rem;
border: 1px solid var(--border);
border-radius: 10px;
background: #fbf8f2;
overflow: hidden;
}
.graven-map-scroller {
overflow: auto;
max-height: calc(100vh - 280px);
min-height: 500px;
-webkit-overflow-scrolling: touch;
}
.graven-svg {
display: block;
transform-origin: top left;
transform: scale(var(--zoom, 1));
transition: transform .15s ease;
}
.graven-svg-cell {
fill: #fff;
stroke: #d6d2cb;
stroke-width: 0.5;
cursor: pointer;
transition: fill .12s ease, stroke .12s ease, transform .08s ease;
}
.graven-svg-cell.graven-beschikbaar { fill: #ffffff; stroke: #c7c0b3; }
.graven-svg-cell.graven-gereserveerd { fill: #fadc7b; stroke: #d9b34a; }
.graven-svg-cell.graven-bezet { fill: #ef6b67; stroke: #c44c47; }
.graven-svg-cell.graven-has-dossier { stroke: #2563eb; stroke-width: 1.5; }
.graven-svg-cell:hover {
stroke: #2563eb;
stroke-width: 1.5;
filter: brightness(1.05) drop-shadow(0 1px 2px rgba(0,0,0,.18));
}
.graven-svg-rowlabel {
font-size: 11px;
font-weight: 700;
fill: #8a847a;
font-family: ui-monospace, monospace;
user-select: none;
pointer-events: none;
}
.graven-cell-mini {
display: inline-block;
width: 18px; height: 18px;
border-radius: 2px;
vertical-align: middle;
border: 1px solid #c7c0b3;
}
.graven-cell-mini.graven-beschikbaar { background: #fff; }
.graven-cell-mini.graven-gereserveerd { background: #fadc7b; border-color: #d9b34a; }
.graven-cell-mini.graven-bezet { background: #ef6b67; border-color: #c44c47; }
.graven-cell-mini.graven-has-dossier-mini { background: #fff; border-color: #2563eb; border-width: 2px; }
/* Filter — zoom slider styling */
#graven-zoom {
width: 110px;
accent-color: var(--primary, #2563eb);
}
/* SVG cells: tekst in elk graf */
.graven-svg-nr {
fill: #555;
font-family: ui-monospace, monospace;
font-weight: 600;
pointer-events: none;
user-select: none;
}
.graven-svg-cell.graven-bezet + .graven-svg-nr,
.graven-cell-group .graven-bezet ~ .graven-svg-nr { fill: #fff; }
/* Bezet-cells: tekst wit voor contrast */
.graven-cell-group .graven-svg-cell.graven-bezet { fill: #ef6b67; }
.graven-cell-group:has(.graven-bezet) .graven-svg-nr { fill: #fff; }
/* Decor (cirkels en paden) — niet klikbaar */
.graven-decor { pointer-events: none; }
.graven-cell-group { cursor: pointer; }
.graven-cell-group:hover .graven-svg-cell {
stroke: #2563eb;
stroke-width: 1.8;
}
/* Title in SVG */
.graven-title-text {
font-size: 18px; font-weight: 700;
fill: #1a1714;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.graven-svg-rowlabel {
font-size: 12px;
font-weight: 700;
font-family: ui-monospace, monospace;
}
/* Cemetery map als visuele referentie */
.cemetery-map-ref summary {
cursor: pointer; padding: .25rem 0;
display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap;
}
.cemetery-map-ref summary::-webkit-details-marker { display: none; }
.cemetery-map-ref summary::before {
content: '▾'; color: var(--muted); display: inline-block;
transition: transform .15s ease;
}
.cemetery-map-ref details:not([open]) summary::before { transform: rotate(-90deg); }
.cemetery-map-img-wrap {
margin-top: .75rem;
overflow: auto;
border: 1px solid var(--border);
border-radius: 8px;
background: #fafafa;
max-height: 500px;
}
.cemetery-map-img-wrap img {
display: block; max-width: 100%; height: auto;
margin: 0 auto;
}
.cemetery-map-actions {
display: flex; gap: .5rem; flex-wrap: wrap;
margin-top: .5rem;
}
.cemetery-map-upload {
text-align: center; padding: 1.25rem;
border-style: dashed;
}
/* Cemetery image-overlay modus (klikbare hotspots op de papieren plattegrond) */
.cemetery-map-actions-card {
padding: .65rem 1rem !important;
margin-bottom: .75rem;
}
.cemetery-map-actions-card .cemetery-map-actions {
display: flex; gap: .65rem; align-items: center; flex-wrap: wrap;
}
.cemetery-overlay-wrap {
position: relative;
display: block;
width: 100%;
--zoom: 1;
overflow: auto;
background: #fafafa;
border: 1px solid var(--border);
border-radius: 10px;
}
.cemetery-overlay-img {
display: block;
width: calc(100% * var(--zoom, 1));
height: auto;
user-select: none;
pointer-events: none;
}
.cemetery-overlay-grid {
position: absolute;
inset: 0;
width: calc(100% * var(--zoom, 1));
height: 100%;
}
.overlay-cell {
position: absolute;
cursor: pointer;
border-radius: 1px;
transition: background .15s ease, border-color .15s ease, transform .08s;
}
/* Beschikbaar: onzichtbaar, behalve op hover */
.overlay-cell.graven-beschikbaar {
background: transparent;
border: 1px solid transparent;
}
.overlay-cell.graven-beschikbaar:hover {
background: rgba(107, 30, 42, 0.18);
border-color: rgba(107, 30, 42, 0.85);
transform: scale(1.08);
z-index: 5;
}
/* Gereserveerd: gele semi-transparante overlay */
.overlay-cell.graven-gereserveerd {
background: rgba(250, 220, 123, 0.6);
border: 1.5px solid rgba(217, 152, 30, 0.95);
}
.overlay-cell.graven-gereserveerd:hover {
background: rgba(250, 220, 123, 0.85);
}
/* Bezet: rode semi-transparante overlay */
.overlay-cell.graven-bezet {
background: rgba(239, 107, 103, 0.65);
border: 1.5px solid rgba(170, 40, 35, 0.95);
}
.overlay-cell.graven-bezet:hover {
background: rgba(239, 107, 103, 0.9);
}
/* Met dossier: extra outline */
.overlay-cell.graven-has-dossier {
outline: 2px solid #2563eb;
outline-offset: -2px;
}
/* Filter dimming */
.overlay-cell.overlay-dim { opacity: 0.12; }
.overlay-cell.overlay-match {
background: rgba(107, 30, 42, 0.35) !important;
border-color: rgba(107, 30, 42, 0.95) !important;
outline: 2px solid #2563eb !important;
outline-offset: -1px !important;
z-index: 4;
}
/* ─── Wizard / multi-step dossier-form ─────────────────────────────── */
.wizard-nav {
display: flex; gap: .35rem;
flex-wrap: wrap;
margin: 0 0 1rem;
padding: .65rem;
background: var(--bg, #f7f3ee);
border-radius: 10px;
border: 1px solid var(--border);
}
.wizard-step {
display: inline-flex; align-items: center; gap: .5rem;
padding: .45rem .75rem;
border-radius: 999px;
background: transparent;
border: 0;
color: var(--muted);
cursor: pointer;
font: inherit;
font-size: .88rem;
font-weight: 500;
transition: background .15s, color .15s;
white-space: nowrap;
}
.wizard-step:hover { background: rgba(107, 30, 42, .08); color: var(--text); }
.wizard-step .num {
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: #d6d2cb;
color: #fff;
font-weight: 700;
font-size: .75rem;
flex-shrink: 0;
transition: background .15s, color .15s;
}
.wizard-step.active {
background: var(--primary, #2563eb);
color: #fff;
}
.wizard-step.active:hover { background: var(--primary, #2563eb); }
.wizard-step.active .num {
background: #fff;
color: var(--primary, #2563eb);
}
/* Fill-state kleuren — data-gedreven (rood/oranje/groen) */
.wizard-step.fill-empty .num { background: #c94545; color: #fff; }
.wizard-step.fill-partial .num { background: #e89538; color: #fff; }
.wizard-step.fill-complete .num { background: #2a7a3a; color: #fff; }
.wizard-step.fill-complete .num::before { content: '✓'; }
.wizard-step.fill-complete .num > * { display: none; }
/* Actieve stap behoudt zijn primaire styling, kleur in cirkel blijft wel zichtbaar */
.wizard-step.active.fill-empty .num { background: #c94545; color: #fff; }
.wizard-step.active.fill-partial .num { background: #e89538; color: #fff; }
.wizard-step.active.fill-complete .num { background: #2a7a3a; color: #fff; }
fieldset[data-step][hidden] { display: none !important; }
.wizard-actions {
display: flex; justify-content: space-between; gap: .5rem;
align-items: center; flex-wrap: wrap;
}
.wizard-actions-right { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 720px) {
.wizard-step .lbl { display: none; }
.wizard-step { padding: .45rem .5rem; }
.wizard-step.active .lbl { display: inline; }
}
/* Bij printen: alle steps zichtbaar */
@media print {
fieldset[data-step] { display: block !important; }
.wizard-nav, .wizard-actions { display: none !important; }
}
/* Artsverklaring scan-rij in intake-form */
.artsverklaring-row {
display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
padding: .5rem .65rem; background: var(--bg, #f7f3ee);
border-radius: 8px; border: 1px solid var(--border);
}
/* Kostenoverzicht in wizard stap 3 */
.wizard-kosten-table { margin: .5rem 0; }
.wizard-kosten-totals {
display: flex; gap: 1.25rem; flex-wrap: wrap;
padding: .5rem 0; font-size: .95rem;
}
.wizard-kosten-presets summary {
cursor: pointer; color: var(--primary); font-weight: 600; font-size: .9rem;
}
.wizard-kosten-presets-title {
margin: 0; color: var(--primary); font-weight: 600; font-size: .9rem;
}
.wizard-preset-grid {
/* Eén tegel per regel — gebruiker wil ze recht onder elkaar (Word-stijl).
De volgorde komt overeen met de vaste volgorde in KOSTEN_PRESETS. */
display: flex; flex-direction: column; gap: .35rem; margin-top: .65rem;
}
.wizard-preset-wrap { width: 100%; }
.wizard-preset-btn {
text-align: left; width: 100%;
display: flex; justify-content: space-between; align-items: center;
gap: .75rem; padding: .55rem .75rem;
}
.wizard-preset-btn .wizard-preset-omschrijving { flex: 1; }
/* Beheermodus: admin-tools naast preset-tegel */
.wizard-preset-wrap,
.preset-wrap {
display: inline-flex; align-items: stretch; gap: 0;
}
.wizard-preset-admin,
.preset-admin {
display: inline-flex; align-items: stretch;
border: 1px solid var(--border); border-left: 0;
border-radius: 0 6px 6px 0; overflow: hidden;
background: #fafaf6;
}
.wizard-preset-wrap .wizard-preset-btn,
.preset-wrap .preset-btn {
border-radius: 6px 0 0 6px;
}
.wizard-preset-wrap > .wizard-preset-btn:only-child,
.preset-wrap > .preset-btn:only-child {
border-radius: 6px;
}
.wizard-preset-admin button,
.preset-admin button {
border: 0; background: transparent; padding: 0 .5rem;
cursor: pointer; font-size: .9rem;
border-left: 1px solid var(--border);
}
.wizard-preset-admin button:hover,
.preset-admin button:hover { background: #fde6c2; }
.is-hidden-preset {
opacity: .55; text-decoration: line-through;
}
/* Verborgen kist-kaart */
.kist-card.is-hidden-catalog { opacity: .6; }
.kist-hidden-badge {
position: absolute; top: .4rem; left: .4rem;
background: #b3261e; color: #fff; padding: .15rem .45rem;
border-radius: 4px; font-size: .7rem; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
}
.kist-card-img { position: relative; }
.catalog-edit-row { flex-wrap: wrap; align-items: center; }
.catalog-price-edit { display: inline-flex; align-items: center; gap: .35rem; }
.catalog-price-edit input {
width: 6em; padding: .3rem .45rem;
border: 1px solid var(--border); border-radius: 5px;
font: inherit; text-align: right;
}
/* Navigatie-tegels (Kist / Bloemen / Extra) onderscheiden zich met
een licht gekleurde achtergrond zodat ze opvallen tussen de presets. */
.wizard-preset-nav,
.preset-nav {
background: linear-gradient(135deg, #fff7e0, #fde6c2);
border: 1px solid #e3b977;
color: #6b4218;
font-weight: 600;
}
.wizard-preset-nav:hover,
.preset-nav:hover { background: linear-gradient(135deg, #fff1d0, #f8d59c); }
.wizard-preset-nav-extra,
.preset-nav-extra {
background: linear-gradient(135deg, #e6f4ec, #cbe9d4);
border-color: #7fb795; color: #2f5a3d;
}
.wizard-preset-nav-extra:hover,
.preset-nav-extra:hover { background: linear-gradient(135deg, #dbeee2, #b8dfc4); }
.wizard-kosten-add {
display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
margin-top: .85rem; padding-top: .85rem;
border-top: 1px solid var(--border);
}
.wizard-kosten-add input,
.wizard-kosten-add select {
padding: .5rem .65rem; border: 1px solid var(--border);
border-radius: 6px; font: inherit;
}
.wizard-kosten-add #wk-omschrijving { flex: 1; min-width: 180px; }
/* Kist-pagina: banner voor actief dossier-concept */
.kist-draft-banner {
display: flex; gap: .65rem; align-items: center; flex-wrap: wrap;
margin-bottom: 1rem;
}
.kist-draft-banner select {
padding: .35rem .55rem; border: 1px solid var(--border);
border-radius: 6px; font: inherit;
}
/* Grote dossier-level betaald-status toggle */
.kost-toggle-big {
padding: .55rem 1.1rem;
font-size: 1rem;
font-weight: 700;
border-radius: 10px;
}
/* Catalogus-filter (Kisten + Bloemen) */
.catalog-filter-card { padding: .75rem 1rem; margin-bottom: 1rem; }
.catalog-filter {
display: flex; gap: .85rem; align-items: flex-end; flex-wrap: wrap;
}
.catalog-filter-inline {
display: flex; flex-direction: column; gap: .15rem;
flex: 1; min-width: 180px; max-width: 300px;
}
.catalog-filter-inline input {
padding: .5rem .65rem; border: 1px solid var(--border);
border-radius: 6px; font: inherit; background: #fff;
}
.catalog-filter-count { margin-left: auto; }
/* ─── Catalogus-galerij nieuw ontwerp (Kisten) ───────────────────────────── */
.catalog-zoekbalk {
display: flex; gap: .75rem; align-items: stretch; margin-bottom: .85rem;
}
.catalog-search {
flex: 1; display: flex; align-items: center; gap: .6rem;
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; padding: 0 1rem;
}
.catalog-search-icon { opacity: .5; font-size: .95rem; }
.catalog-search input {
flex: 1; border: none; background: transparent; font: inherit;
padding: .9rem 0; outline: none;
}
.catalog-filters-toggle {
border-radius: 14px; white-space: nowrap;
}
.catalog-chips {
display: flex; gap: .55rem; align-items: center; flex-wrap: wrap;
margin-bottom: 1.1rem;
}
.catalog-chips.is-collapsed > .catalog-chip,
.catalog-chips.is-collapsed > .catalog-wis { display: none; }
.catalog-chip {
appearance: none; -webkit-appearance: none;
border: 1px solid var(--border); background: var(--surface);
border-radius: 999px; padding: .5rem 1.9rem .5rem 1rem;
font: inherit; font-size: .88rem; cursor: pointer; color: var(--text);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right .8rem center;
}
.catalog-chip-toggle {
padding: .5rem 1rem; background-image: none;
}
.catalog-chip-toggle.is-on {
background: color-mix(in srgb, var(--primary) 12%, #fff);
border-color: var(--primary); color: var(--primary); font-weight: 600;
}
.catalog-wis {
border: none; background: transparent; color: var(--primary);
font: inherit; font-size: .85rem; cursor: pointer; padding: .4rem .2rem;
}
.catalog-count { margin-left: auto; color: var(--muted); font-size: .85rem; }
.catalog-view {
display: inline-flex; border: 1px solid var(--border);
border-radius: 10px; overflow: hidden;
}
.catalog-view-btn {
border: none; background: var(--surface); cursor: pointer;
padding: .45rem .7rem; font-size: 1rem; color: var(--muted);
}
.catalog-view-btn.is-on { background: color-mix(in srgb, var(--primary) 12%, #fff); color: var(--primary); }
/* Kaart-extra's: hart, badge, foot-rij */
.kist-card-imgwrap { position: relative; }
.kist-fav {
position: absolute; top: .55rem; right: .55rem;
width: 34px; height: 34px; border-radius: 50%;
border: none; cursor: pointer; font-size: 1.05rem; line-height: 1;
background: rgba(255,255,255,.92); color: #b33; box-shadow: 0 1px 4px rgba(0,0,0,.15);
display: flex; align-items: center; justify-content: center;
}
.kist-fav.is-fav { color: #e0245e; }
.kist-badge-top {
position: absolute; bottom: .55rem; left: .55rem;
background: rgba(40,30,15,.82); color: #ffd479;
font-size: .72rem; font-weight: 600; padding: .2rem .55rem;
border-radius: 6px; letter-spacing: .02em;
}
.kist-card-body { padding: .7rem .85rem .85rem; display: flex; flex-direction: column; gap: .2rem; }
.kist-card-naam { font-size: .95rem; }
.kist-card-foot {
display: flex; align-items: center; justify-content: space-between;
gap: .5rem; margin-top: .5rem;
}
.kist-card-foot .kist-price { font-size: .95rem; }
.kist-kies-btn { white-space: nowrap; }
/* Lijstweergave */
.kist-grid.is-list { grid-template-columns: 1fr; gap: .6rem; }
.kist-grid.is-list .kist-card { flex-direction: row; align-items: stretch; }
.kist-grid.is-list .kist-card-imgwrap { width: 150px; flex: none; }
.kist-grid.is-list .kist-card-img { aspect-ratio: 4 / 3; height: 100%; }
.kist-grid.is-list .kist-card-body { flex: 1; justify-content: center; }
.kist-grid.is-list .kist-badge-top,
.kist-grid.is-list .kist-fav { transform: scale(.9); }
/* Paginering */
.catalog-paginering {
display: flex; gap: .35rem; justify-content: center; align-items: center;
margin-top: 1.5rem; flex-wrap: wrap;
}
.cat-page, .cat-page-nav {
min-width: 38px; height: 38px; border-radius: 10px;
border: 1px solid var(--border); background: var(--surface);
cursor: pointer; font: inherit; color: var(--text);
}
.cat-page.is-on { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.cat-page-nav:disabled { opacity: .4; cursor: default; }
@media (max-width: 640px) {
.catalog-zoekbalk { flex-wrap: wrap; }
.catalog-count { width: 100%; margin-left: 0; order: 5; }
}
/* ─── App-shell: vaste zijbalk + werkgebied ──────────────────────────────── */
.app-shell { display: flex; align-items: flex-start; min-height: 100vh; }
.sidebar {
width: 248px; flex: none; align-self: stretch;
background: var(--surface); border-right: 1px solid var(--border);
position: sticky; top: 0; height: 100vh;
display: flex; flex-direction: column;
padding: 1.25rem 0 1rem;
}
.sidebar-brand {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: .3rem; padding: .25rem 1rem 1.25rem;
}
.sidebar-logo {
width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
color: var(--primary); background: var(--bg);
border: 1px solid var(--border); border-radius: 18px; margin-bottom: .4rem;
}
.sidebar-logo svg { width: 34px; height: 34px; }
.sidebar-brand strong { font-size: 1.05rem; }
.sidebar-sub { font-size: .74rem; color: var(--muted); line-height: 1.3; }
.sidenav { display: flex; flex-direction: column; gap: 2px; padding: .5rem .75rem; }
.sidenav a {
display: flex; align-items: center; gap: .8rem;
padding: .68rem .85rem; border-radius: 12px;
color: var(--text); font-size: .95rem; text-decoration: none;
}
.sidenav a svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.sidenav a:hover { background: var(--bg); text-decoration: none; }
.sidenav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.sidenav a.active svg { color: var(--primary); }
.sidebar-foot { margin-top: auto; padding: .75rem 1rem 0; }
.sidebar-user {
display: flex; align-items: center; gap: .65rem;
background: var(--bg); border: 1px solid var(--border);
border-radius: 14px; padding: .6rem .7rem; margin-bottom: .5rem;
}
.side-avatar {
width: 38px; height: 38px; flex: none; border-radius: 50%;
background: var(--primary); color: #fff; font-weight: 600; font-size: .82rem;
display: flex; align-items: center; justify-content: center;
}
.side-user-text { display: flex; flex-direction: column; min-width: 0; }
.side-user-text strong { font-size: .88rem; }
.side-user-text small {
font-size: .73rem; color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-logout { width: 100%; justify-content: center; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-main .topbar-inner { max-width: none; }
/* Geen horizontale pagina-beweging meer: clip i.p.v. hidden zodat de
sticky-zijbalk blijft werken. Brede tabellen scrollen binnen hun kaart. */
body { overflow-x: clip; }
.app-main { overflow-x: clip; }
/* Brede schermen (iPad/desktop): de zijbalk verzorgt de navigatie, dus de
bovenbalk is verborgen. Binnen een dossier draaien we het om: zijbalk weg,
alleen de bovenbalk, en het werkgebied gebruikt de volle breedte. */
@media (min-width: 981px) {
.topbar { display: none; }
body.in-dossier .sidebar { display: none; }
body.in-dossier .topbar { display: block; }
}
/* Onder 980px valt de zijbalk altijd weg; de bovenbalk-navigatie blijft. */
@media (max-width: 980px) {
.sidebar { display: none; }
/* Bovenbalk op tablet-breedte: merk + gebruiker samen op de eerste rij,
de navigatie zakt naar een eigen, horizontaal scrollbare rij eronder.
Zo raakt de merktekst niet meer ingeklemd (voorheen brak "Uitvaart
Intake" en de ondertitel lelijk af). */
.topbar-inner { flex-wrap: wrap; gap: .6rem 1rem; }
.topnav { order: 3; width: 100%; overflow-x: auto; flex-basis: 100%; }
.user-area { margin-left: auto; }
}
/* ─── v1: klassieke bovenbalk-layout (zoals vanouds) ─────────────────────────
Geen zijbalk, altijd de bovenbalk — ongeacht schermbreedte of route. */
body.design-v1 .sidebar { display: none !important; }
body.design-v1 .topbar { display: block !important; }
body.design-v1 .app-main .topbar-inner { max-width: 1200px; }
/* ─── Dossiers-pagina ────────────────────────────────────────────────────── */
.dossiers-filterbar {
display: flex; gap: .75rem; align-items: stretch;
margin-bottom: 1.25rem; flex-wrap: wrap;
}
.dossiers-filterbar .catalog-search { flex: 1; min-width: 260px; }
.dossiers-control {
appearance: none; -webkit-appearance: none;
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; font: inherit; color: var(--text); cursor: pointer;
display: inline-flex; align-items: center; gap: .5rem;
padding: .85rem 1.1rem; white-space: nowrap;
}
select.dossiers-control {
padding-right: 2.4rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 1rem center;
}
.dossiers-control:hover { background: var(--bg); }
.dossiers-wis {
align-self: center; color: var(--primary); font-size: .85rem;
white-space: nowrap; padding: 0 .25rem;
}
.dossiers-kaart {
background: var(--surface); border: 1px solid var(--border);
border-radius: 18px; overflow-x: auto;
}
.dossiers-kaart .table { background: transparent; min-width: 820px; }
.dossiers-kaart .table th { padding: 1rem 1.15rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dossiers-kaart .table td { padding: 1rem 1.15rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dossiers-kaart .table tbody tr:last-child td { border-bottom: none; }
.dossiers-kaart .table tbody tr { cursor: pointer; transition: background .12s; }
.dossiers-kaart .table tbody tr:hover { background: var(--bg); }
.dossier-link { color: var(--primary); font-weight: 600; }
.dossiers-chevron { color: var(--muted); text-align: right; font-size: 1.25rem; width: 1.5rem; }
/* Statusbadge met icoon (✓ Voltooid) */
.status { display: inline-flex; align-items: center; gap: .3rem; }
.status-ico { font-size: .85em; line-height: 1; }
/* ─── Account: snelnavigatie naar instellingen-secties ───────────────────── */
.account-nav {
display: flex; flex-wrap: wrap; gap: .4rem;
margin: -.25rem 0 1.5rem;
}
.account-nav a {
font-size: .85rem; padding: .42rem .85rem;
border: 1px solid var(--border); border-radius: 999px;
background: var(--surface); color: var(--text); text-decoration: none;
white-space: nowrap;
}
.account-nav a:hover { background: var(--bg); text-decoration: none; border-color: var(--primary); color: var(--primary); }
/* Anker-secties netjes onder een eventuele sticky bovenbalk laten landen */
.card[id] { scroll-margin-top: 1.25rem; }
/* ─── Toast-meldingen ────────────────────────────────────────────────────── */
#toast-host {
position: fixed; left: 0; right: 0;
bottom: calc(1rem + env(safe-area-inset-bottom));
display: flex; flex-direction: column; align-items: center; gap: .4rem;
z-index: 3000; pointer-events: none;
}
.toast {
background: #2b3a4a; color: #fff;
padding: .6rem 1rem; border-radius: 10px;
font-size: .9rem; line-height: 1.35; max-width: min(90vw, 460px);
box-shadow: 0 6px 20px rgba(0,0,0,.25);
opacity: 0; transform: translateY(10px);
transition: opacity .25s, transform .25s;
}
.toast-in { opacity: 1; transform: none; }
.toast-success { background: #1c7a43; }
.toast-error { background: #b3261e; }
/* ─── Ledenadministratie ─────────────────────────────────────────────────── */
.leden-cards { display: flex; flex-direction: column; gap: .6rem; }
.lid-card {
display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
border: 1px solid var(--border); border-radius: 12px;
padding: .7rem .9rem; background: var(--bg);
}
.lid-card-body { min-width: 0; }
.lid-card-top { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .15rem; }
.lid-card-acties { display: flex; gap: .3rem; flex: none; }
.gekoppelde-dossiers { margin: .5rem 0 0; padding-left: 1.1rem; line-height: 1.7; }
/* ─── Edge-to-edge veilige zones (statusbalk/notch in de native app) ──────────
De app loopt tot achter de statusbalk; deze regels vullen die strook met de
app-kleur (geen zwart meer) en houden de inhoud eronder vandaan. Op web zijn
de env()-waarden 0, dus geen effect daar. */
html { background: var(--bg); }
.topbar { padding-top: env(safe-area-inset-top); }
.sidebar { padding-top: calc(1.25rem + env(safe-area-inset-top)); }
#login-screen, #profile-screen { padding-top: env(safe-area-inset-top); }
/* In de zijbalk-layout (bovenbalk verborgen) heeft het werkgebied zelf de
veilige marge bovenaan nodig; in de bovenbalk-layout doet de bovenbalk dat. */
@media (min-width: 981px) {
body:not(.design-v1):not(.in-dossier) .app-main { padding-top: env(safe-area-inset-top); }
}