/* ============================================
Keur & Advies — Exotenscan PWA
Huisstijl: goud (#BF863B), zwart en wit
============================================ */
:root {
--kleur-primair: #BF863B;
--kleur-primair-donker: #9c6c2a;
--kleur-primair-licht: #e8c489;
--kleur-primair-zacht: #f9f0de;
--kleur-zwart: #14110b; /* warm zwart i.p.v. pikzwart — eleganter */
--kleur-wit: #FFFFFF;
--kleur-achtergrond: #faf8f3; /* iets warmer */
--kleur-oppervlak: #ffffff;
--kleur-oppervlak-mat: #f6f3ec;
--kleur-tekst: #211e18; /* warm donkergrijs, niet hard zwart */
--kleur-tekst-zacht: #6b665d;
--kleur-tekst-hint: #9c978c;
--kleur-grens: #e7e1d4;
--kleur-grens-mat: #f1ece2;
--kleur-succes: #4a7c3a;
--kleur-succes-bg: #e8f0d8;
--kleur-waarschuwing: #c89020;
--kleur-waarschuwing-bg: #faecc8;
--kleur-gevaar: #b8412a;
--kleur-gevaar-bg: #f5d4c8;
--kleur-info: #2a5e84;
--kleur-info-bg: #d8e8f2;
--risico-laag-bg: #e8f0d8;
--risico-laag-tekst: #4a6b1f;
--risico-middel-bg: #faecc8;
--risico-middel-tekst: #8a6818;
--risico-hoog-bg: #f5d4a8;
--risico-hoog-tekst: #8a4818;
--risico-zeer-hoog-bg: #f5c0b0;
--risico-zeer-hoog-tekst: #8a2818;
/* Verfijnde schaduw-schaal — natuurlijker, gelaagd */
--schaduw-zacht: 0 1px 2px rgba(20, 17, 11, 0.04), 0 0 0 1px rgba(20, 17, 11, 0.03);
--schaduw-medium: 0 4px 12px -2px rgba(20, 17, 11, 0.08), 0 2px 4px -1px rgba(20, 17, 11, 0.04);
--schaduw-sterk: 0 12px 28px -6px rgba(20, 17, 11, 0.14), 0 4px 8px -2px rgba(20, 17, 11, 0.06);
--schaduw-goud: 0 4px 14px -3px rgba(191, 134, 59, 0.28);
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
--container-max: 1100px;
--radius: 10px;
--radius-klein: 7px;
--radius-groot: 16px;
--radius-vol: 999px;
/* Spacing-schaal — consistente ritmiek door de hele app */
--ruimte-xs: 0.35rem;
--ruimte-s: 0.6rem;
--ruimte-m: 1rem;
--ruimte-l: 1.5rem;
--ruimte-xl: 2.5rem;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: var(--font-body);
background: var(--kleur-achtergrond);
color: var(--kleur-tekst);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#app { min-height: 100vh; display: flex; flex-direction: column; }
/* ===== HEADER ===== */
.app-header {
background: var(--kleur-zwart);
color: var(--kleur-wit);
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 0 var(--kleur-primair), 0 4px 12px rgba(0, 0, 0, 0.15);
}
.header-inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 1rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.85rem; }
.brand-logo { height: 44px; width: auto; display: block; }
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.1;
border-left: 1px solid rgba(191, 134, 59, 0.4);
padding-left: 0.85rem;
}
.brand-product {
font-family: var(--font-display);
font-weight: 400;
font-style: italic;
font-size: 1.15rem;
color: var(--kleur-primair);
}
.brand-sub {
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 500;
margin-top: 0.2rem;
}
/* ===== KNOPPEN ===== */
.btn-primary {
background: var(--kleur-primair);
color: var(--kleur-wit);
border: none;
padding: 0.75rem 1.4rem;
border-radius: var(--radius-klein);
font-family: var(--font-body);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.55rem;
transition: all 0.2s ease;
box-shadow: var(--schaduw-zacht);
}
.btn-primary svg,
.btn-secundair svg,
.btn-gevaar svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.btn-primary:hover {
background: var(--kleur-primair-donker);
transform: translateY(-1px);
box-shadow: var(--schaduw-medium);
}
.btn-primary .plus { font-size: 1.2rem; line-height: 1; font-weight: 400; }
.btn-secundair {
background: transparent;
color: var(--kleur-tekst-zacht);
border: 1px solid var(--kleur-grens);
padding: 0.75rem 1.4rem;
border-radius: var(--radius-klein);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.btn-secundair:hover {
border-color: var(--kleur-primair);
color: var(--kleur-primair-donker);
}
.btn-gevaar {
background: transparent;
color: var(--kleur-gevaar);
border: 1px solid var(--kleur-gevaar);
padding: 0.75rem 1.4rem;
border-radius: var(--radius-klein);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.btn-gevaar:hover { background: var(--kleur-gevaar); color: var(--kleur-wit); }
.terug-knop {
background: transparent;
border: none;
color: var(--kleur-tekst-zacht);
font-family: var(--font-body);
font-size: 0.9rem;
cursor: pointer;
padding: 0.5rem 0;
margin-bottom: 1rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: color 0.2s ease;
}
.terug-knop .arrow {
width: 16px;
height: 16px;
transition: transform 0.2s ease;
}
.terug-knop:hover { color: var(--kleur-primair-donker); }
.terug-knop:hover .arrow { transform: translateX(-2px); }
/* ===== HOOFDINHOUD ===== */
main { flex: 1; }
.view { display: none; padding: 2rem 0 4rem; }
.view.actief { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 1.5rem;
}
.page-intro {
margin-bottom: 1.75rem;
padding-bottom: 1.25rem;
border-bottom: 2px solid var(--kleur-primair);
position: relative;
}
.page-title-row {
display: flex;
justify-content: space-between;
align-items: end;
gap: 1rem;
}
.page-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2rem, 5vw, 2.75rem);
color: var(--kleur-zwart);
letter-spacing: -0.01em;
line-height: 1.1;
}
.page-sub {
color: var(--kleur-tekst-zacht);
margin-top: 0.4rem;
font-size: 1rem;
font-style: italic;
}
/* ===== STATISTIEK-KAARTEN ===== */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.stat-kaart {
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 1.5rem;
position: relative;
overflow: hidden;
transition: all 0.2s ease;
}
.stat-kaart:hover {
transform: translateY(-2px);
box-shadow: var(--schaduw-medium);
border-color: var(--kleur-grens-mat);
}
.stat-kaart::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--kleur-zwart);
}
.stat-kaart.kleur-blauw::before { background: linear-gradient(to right, var(--kleur-primair), var(--kleur-primair-donker)); }
.stat-kaart.kleur-groen::before { background: #4a7c3a; }
.stat-kaart.kleur-oranje::before { background: #c89020; }
.stat-label {
font-size: 0.7rem;
font-weight: 700;
color: var(--kleur-tekst-zacht);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.6rem;
}
.stat-waarde {
font-family: var(--font-display);
font-weight: 700;
font-size: 2.5rem;
color: var(--kleur-zwart);
line-height: 1;
}
.stat-context {
font-size: 0.82rem;
color: var(--kleur-tekst-zacht);
margin-top: 0.6rem;
}
/* ===== ZOEKBALK ===== */
.zoekbalk {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 0.75rem;
margin-bottom: 1.5rem;
align-items: center;
}
.zoek-input-wrap {
position: relative;
}
.zoek-icoon {
position: absolute;
left: 0.9rem;
top: 50%;
transform: translateY(-50%);
color: var(--kleur-tekst-zacht);
width: 18px;
height: 18px;
pointer-events: none;
}
.zoekbalk input[type="text"] {
width: 100%;
padding: 0.75rem 0.9rem 0.75rem 2.25rem;
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
background: var(--kleur-oppervlak);
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--kleur-tekst);
transition: all 0.2s ease;
}
.zoekbalk input[type="text"]:focus {
outline: none;
border-color: var(--kleur-primair);
box-shadow: 0 0 0 3px rgba(191, 134, 59, 0.15);
}
.filter-select {
padding: 0.75rem 0.9rem;
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
background: var(--kleur-oppervlak);
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--kleur-tekst);
cursor: pointer;
transition: all 0.2s ease;
}
.filter-select:focus,
.filter-select:hover {
border-color: var(--kleur-primair);
outline: none;
}
@media (max-width: 700px) {
.zoekbalk {
grid-template-columns: 1fr;
}
}
/* ===== RAPPORTEN LIJST ===== */
.rapporten-grid { display: grid; gap: 0.75rem; }
.rapport-kaart {
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1.25rem;
align-items: center;
}
.rapport-kaart::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--kleur-primair);
transform: scaleY(0);
transform-origin: center;
transition: transform 0.25s ease;
}
.rapport-kaart:hover {
border-color: var(--kleur-primair-licht);
transform: translateY(-1px);
box-shadow: var(--schaduw-sterk);
}
.rapport-kaart:hover::before { transform: scaleY(1); }
.rapport-nummer {
background: var(--kleur-oppervlak-mat);
border: 1px solid var(--kleur-grens);
padding: 0.4rem 0.7rem;
border-radius: var(--radius-klein);
font-family: var(--font-body);
font-weight: 700;
font-size: 0.85rem;
color: var(--kleur-primair-donker);
letter-spacing: 0.03em;
white-space: nowrap;
}
.rapport-info {
min-width: 0;
}
.rapport-naam {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.15rem;
color: var(--kleur-zwart);
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0.2rem;
}
.rapport-meta {
color: var(--kleur-tekst-zacht);
font-size: 0.85rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
gap: 0.4rem;
}
.rapport-meta::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background-color: var(--kleur-primair);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
flex-shrink: 0;
}
.rapport-status {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.3rem;
}
.status-badge {
padding: 0.25rem 0.7rem;
border-radius: 100px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
.status-concept {
background: var(--kleur-info-bg);
color: var(--kleur-info);
}
.status-definitief {
background: var(--kleur-succes-bg);
color: var(--kleur-succes);
}
.status-verzonden {
background: var(--kleur-primair-zacht);
color: var(--kleur-primair-donker);
}
.rapport-datum {
font-size: 0.75rem;
color: var(--kleur-tekst-zacht);
font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
.rapport-kaart {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.rapport-nummer { justify-self: start; }
.rapport-status { align-items: flex-start; flex-direction: row; }
}
/* ===== LEGE STAAT ===== */
.lege-staat {
text-align: center;
padding: 4rem 1rem;
color: var(--kleur-tekst-zacht);
}
.lege-staat.verborgen { display: none; }
.lege-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
color: var(--kleur-primair);
opacity: 0.4;
}
.lege-icon svg { width: 100%; height: 100%; }
.lege-staat h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.5rem;
color: var(--kleur-zwart);
margin-bottom: 0.5rem;
}
.lege-staat p { max-width: 360px; margin: 0 auto; }
/* ===== BEWERK HEADER ===== */
.bewerk-header {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--kleur-primair);
}
/* ===== FORMULIER ===== */
.rapport-form {
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-groot);
padding: 2.5rem;
box-shadow: var(--schaduw-zacht);
}
.form-sectie {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--kleur-grens);
}
.form-sectie:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.sectie-titel {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.4rem;
color: var(--kleur-zwart);
margin-bottom: 1.5rem;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 0.75rem;
}
.sectie-beschrijving {
color: var(--kleur-tekst-zacht);
font-size: 0.9rem;
margin-bottom: 1.25rem;
margin-top: -0.75rem;
font-style: italic;
}
.veld { margin-bottom: 1.25rem; }
.veld:last-child { margin-bottom: 0; }
.veld-label {
display: block;
font-size: 0.8rem;
font-weight: 700;
color: var(--kleur-tekst);
margin-bottom: 0.5rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.veld-verplicht { color: var(--kleur-primair); margin-left: 0.2rem; }
.veld-toelichting {
font-size: 0.85rem;
color: var(--kleur-tekst-zacht);
font-style: italic;
margin-top: 0.25rem;
margin-bottom: 0.5rem;
}
.veld input[type="text"],
.veld input[type="email"],
.veld input[type="tel"],
.veld input[type="number"],
.veld input[type="date"],
.veld select,
.veld textarea {
width: 100%;
padding: 0.75rem 0.9rem;
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
background: var(--kleur-oppervlak);
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--kleur-tekst);
transition: all 0.2s ease;
}
.veld input:focus,
.veld select:focus,
.veld textarea:focus {
outline: none;
border-color: var(--kleur-primair);
box-shadow: 0 0 0 3px rgba(191, 134, 59, 0.15);
}
.veld textarea {
min-height: 100px;
resize: vertical;
font-family: var(--font-body);
line-height: 1.6;
}
.veld-rij {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 600px) {
.veld-rij { grid-template-columns: 1fr; }
}
/* Ja/Nee */
.janee-groep { display: flex; gap: 0.5rem; }
.janee-knop {
flex: 1;
padding: 0.7rem 1rem;
border: 1px solid var(--kleur-grens);
background: var(--kleur-oppervlak);
border-radius: var(--radius-klein);
cursor: pointer;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--kleur-tekst-zacht);
transition: all 0.2s ease;
}
.janee-knop:hover { border-color: var(--kleur-primair-licht); }
.janee-knop.gekozen {
background: var(--kleur-primair);
color: var(--kleur-wit);
border-color: var(--kleur-primair);
}
/* Checkbox-groep */
.checkbox-groep { display: grid; gap: 0.5rem; }
.checkbox-optie {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.85rem;
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
cursor: pointer;
transition: all 0.2s ease;
background: var(--kleur-oppervlak);
font-size: 0.95rem;
}
.checkbox-optie:hover {
border-color: var(--kleur-primair-licht);
background: var(--kleur-oppervlak-mat);
}
.checkbox-optie input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--kleur-primair);
margin: 0;
}
.checkbox-optie.gekozen {
border-color: var(--kleur-primair);
background: rgba(191, 134, 59, 0.06);
}
/* Soort-item */
.soort-item {
background: var(--kleur-oppervlak-mat);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 1.5rem;
margin-bottom: 0.75rem;
position: relative;
border-left: 4px solid var(--kleur-primair);
}
.soort-item-titel {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--kleur-zwart);
margin-bottom: 1rem;
padding-right: 5rem;
}
.soort-verwijder {
position: absolute;
top: 1rem;
right: 1rem;
background: transparent;
border: 1px solid var(--kleur-grens);
color: var(--kleur-gevaar);
cursor: pointer;
font-size: 0.75rem;
padding: 0.35rem 0.75rem;
border-radius: var(--radius-klein);
transition: all 0.2s ease;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.35rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.soort-verwijder svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.soort-verwijder:hover {
background: var(--kleur-gevaar);
color: var(--kleur-wit);
border-color: var(--kleur-gevaar);
}
.knop-toevoegen {
background: transparent;
border: 1px dashed var(--kleur-primair);
color: var(--kleur-primair-donker);
padding: 0.85rem;
border-radius: var(--radius-klein);
width: 100%;
cursor: pointer;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 600;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.knop-toevoegen svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.knop-toevoegen:hover {
background: rgba(191, 134, 59, 0.06);
border-style: solid;
}
/* Form acties */
.form-acties {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 2px solid var(--kleur-primair);
}
/* ===== DETAIL VIEW ===== */
.detail-header {
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-groot);
padding: 2rem 2.25rem;
margin-bottom: 1.5rem;
box-shadow: var(--schaduw-zacht);
position: relative;
overflow: hidden;
}
.detail-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--kleur-primair);
}
.detail-header-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.detail-nummer-badge {
background: var(--kleur-zwart);
color: var(--kleur-wit);
padding: 0.5rem 1rem;
border-radius: var(--radius-klein);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.detail-nummer-badge::before {
content: '';
width: 6px;
height: 6px;
background: var(--kleur-primair);
border-radius: 50%;
}
.detail-naam {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.75rem, 4vw, 2.4rem);
color: var(--kleur-zwart);
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 0.4rem;
}
.detail-meta {
color: var(--kleur-tekst-zacht);
font-style: italic;
font-size: 0.95rem;
}
.detail-acties {
display: flex;
gap: 0.5rem;
margin: 1.25rem 0 2rem;
flex-wrap: wrap;
}
.detail-sectie {
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 1.75rem 2rem;
margin-bottom: 1rem;
box-shadow: var(--schaduw-zacht);
}
.detail-sectie h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.15rem;
color: var(--kleur-zwart);
margin-bottom: 1.25rem;
letter-spacing: -0.01em;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--kleur-grens);
display: flex;
align-items: center;
gap: 0.5rem;
}
.detail-sectie h3::before {
content: '';
width: 8px;
height: 8px;
background: var(--kleur-primair);
border-radius: 50%;
}
.detail-rij {
display: grid;
grid-template-columns: 180px 1fr;
gap: 1rem;
padding: 0.6rem 0;
border-bottom: 1px solid var(--kleur-grens-mat);
font-size: 0.95rem;
}
.detail-rij:last-child { border-bottom: none; }
.detail-rij-label {
color: var(--kleur-tekst-zacht);
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.detail-rij-waarde { color: var(--kleur-tekst); }
@media (max-width: 600px) {
.detail-rij { grid-template-columns: 1fr; gap: 0.2rem; }
}
.detail-tekst {
white-space: pre-wrap;
line-height: 1.7;
color: var(--kleur-tekst);
}
.detail-soort {
padding: 1.25rem;
background: var(--kleur-oppervlak-mat);
border-radius: var(--radius-klein);
margin-bottom: 0.75rem;
border-left: 4px solid var(--kleur-primair);
}
.detail-soort-naam {
font-family: var(--font-display);
font-weight: 700;
color: var(--kleur-zwart);
font-size: 1.1rem;
}
.detail-soort-wet {
font-style: italic;
color: var(--kleur-tekst-zacht);
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.risico-badge {
display: inline-block;
padding: 0.2rem 0.7rem;
border-radius: 100px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 0.5rem;
}
.risico-laag { background: var(--risico-laag-bg); color: var(--risico-laag-tekst); }
.risico-middel { background: var(--risico-middel-bg); color: var(--risico-middel-tekst); }
.risico-hoog { background: var(--risico-hoog-bg); color: var(--risico-hoog-tekst); }
.risico-zeer-hoog { background: var(--risico-zeer-hoog-bg); color: var(--risico-zeer-hoog-tekst); }
/* Status wijzig-knoppen in detail */
.status-wijzig {
display: flex;
gap: 0.4rem;
align-items: center;
margin-top: 0.5rem;
flex-wrap: wrap;
}
.status-wijzig-label {
font-size: 0.75rem;
color: var(--kleur-tekst-zacht);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-right: 0.3rem;
}
.status-knop {
background: transparent;
border: 1px solid var(--kleur-grens);
color: var(--kleur-tekst-zacht);
padding: 0.3rem 0.8rem;
border-radius: 100px;
cursor: pointer;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.2s ease;
}
.status-knop:hover { border-color: var(--kleur-primair); }
.status-knop.actief {
background: var(--kleur-zwart);
color: var(--kleur-wit);
border-color: var(--kleur-zwart);
}
/* Detail-weergave: actie-badge per soort */
.detail-actie-badge {
margin-top: 0.85rem;
padding: 0.6rem 1rem;
border-radius: var(--radius-klein);
color: var(--kleur-wit);
font-size: 0.85rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.detail-actie-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.85;
}
/* ===== ACTIEPLAN — gekleurde keuze-knoppen ===== */
.actie-blok {
margin-top: 1rem;
padding: 1.25rem 1.5rem;
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
}
.actieplan-groep {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.6rem;
margin-top: 0.75rem;
}
@media (min-width: 720px) {
.actieplan-groep {
grid-template-columns: repeat(4, 1fr);
}
}
.actieplan-knop {
background: var(--kleur-wit);
border: 2px solid var(--kleur-grens);
color: var(--kleur-tekst);
padding: 1rem 0.75rem;
border-radius: var(--radius-klein);
cursor: pointer;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
line-height: 1.3;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55rem;
text-align: center;
min-height: 88px;
}
.actieplan-knop:hover {
border-color: var(--actie-kleur);
color: var(--actie-kleur-donker);
transform: translateY(-1px);
box-shadow: var(--schaduw-zacht);
}
.actieplan-knop.gekozen {
background: var(--actie-kleur);
border-color: var(--actie-kleur);
color: var(--kleur-wit);
box-shadow: var(--schaduw-medium);
}
.actieplan-knop.gekozen:hover {
background: var(--actie-kleur-donker);
color: var(--kleur-wit);
}
.actieplan-knop-icoon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.actieplan-knop-icoon svg {
width: 22px;
height: 22px;
}
.actieplan-knop-label {
font-size: 0.82rem;
line-height: 1.25;
}
/* ===== EXPERT-BLOK ===== */
.expert-blok {
background: linear-gradient(to right, rgba(191, 134, 59, 0.05), rgba(191, 134, 59, 0.02));
border: 1px solid var(--kleur-primair-licht);
border-left: 4px solid var(--kleur-primair);
border-radius: var(--radius-klein);
padding: 1.25rem 1.5rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
.expert-blok-titel {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--kleur-primair-donker);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.expert-blok-titel::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
background-color: var(--kleur-primair);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
flex-shrink: 0;
}
.expert-blok .veld:last-child { margin-bottom: 0; }
/* ===== FOTO'S ===== */
.foto-blok {
margin-top: 1rem;
padding: 1.25rem;
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
}
.foto-galerij {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 0.75rem;
margin: 0.75rem 0 1rem;
}
.foto-leeg {
color: var(--kleur-tekst-hint);
font-size: 0.9rem;
font-style: italic;
text-align: center;
padding: 1rem;
border: 1px dashed var(--kleur-grens);
border-radius: var(--radius-klein);
}
.foto-thumb {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--radius-klein);
overflow: hidden;
border: 1px solid var(--kleur-grens);
background: var(--kleur-oppervlak-mat);
}
.foto-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.foto-verwijder {
position: absolute;
top: 4px;
right: 4px;
width: 24px;
height: 24px;
border: none;
background: rgba(0, 0, 0, 0.7);
color: var(--kleur-wit);
border-radius: 50%;
cursor: pointer;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
padding: 0;
}
.foto-verwijder svg {
width: 12px;
height: 12px;
}
.foto-verwijder:hover { background: var(--kleur-gevaar); }
.foto-acties {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.foto-knop {
flex: 1;
min-width: 140px;
background: transparent;
border: 1px solid var(--kleur-grens);
color: var(--kleur-tekst);
padding: 0.7rem 1rem;
border-radius: var(--radius-klein);
cursor: pointer;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 600;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
}
.foto-knop svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.foto-knop:hover {
border-color: var(--kleur-primair);
color: var(--kleur-primair-donker);
}
.foto-knop-camera {
background: var(--kleur-zwart);
color: var(--kleur-wit);
border-color: var(--kleur-zwart);
}
.foto-knop-camera:hover {
background: var(--kleur-primair);
border-color: var(--kleur-primair);
color: var(--kleur-wit);
}
/* Foto overlay (lightbox) */
.foto-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
cursor: zoom-out;
animation: fadeIn 0.2s ease;
}
.foto-overlay img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: var(--radius);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
/* ===== ADRES-AUTOCOMPLETE ===== */
.adres-veld-wrap {
position: relative;
width: 100%;
}
.adres-veld-wrap input {
width: 100%;
}
.adres-suggesties {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
box-shadow: var(--schaduw-sterk);
z-index: 50;
max-height: 300px;
overflow-y: auto;
}
.adres-suggestie {
padding: 0.7rem 0.9rem;
cursor: pointer;
border-bottom: 1px solid var(--kleur-grens-mat);
transition: background 0.15s ease;
}
.adres-suggestie:last-child { border-bottom: none; }
.adres-suggestie:hover {
background: var(--kleur-primair-zacht);
}
.adres-suggestie-hoofd {
font-weight: 600;
color: var(--kleur-zwart);
font-size: 0.95rem;
}
.adres-suggestie-sub {
font-size: 0.82rem;
color: var(--kleur-tekst-zacht);
margin-top: 0.15rem;
}
.adres-geen-resultaat {
padding: 0.75rem 0.9rem;
color: var(--kleur-tekst-hint);
font-style: italic;
font-size: 0.9rem;
}
/* ============================================
DETAIL SOORT
============================================ */
.detail-soort-detail {
margin-top: 0.5rem;
font-size: 0.9rem;
color: var(--kleur-tekst-zacht);
}
.detail-soort-blok {
margin-top: 0.85rem;
padding: 0.75rem 1rem;
background: var(--kleur-oppervlak);
border-radius: var(--radius-klein);
border-left: 3px solid var(--kleur-grens);
font-size: 0.9rem;
}
.detail-soort-expert {
border-left-color: var(--kleur-primair);
background: linear-gradient(to right, rgba(191, 134, 59, 0.04), transparent);
}
.detail-soort-blok-label {
font-size: 0.7rem;
font-weight: 700;
color: var(--kleur-tekst-zacht);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.4rem;
}
.detail-soort-expert .detail-soort-blok-label {
color: var(--kleur-primair-donker);
}
.detail-foto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 0.5rem;
}
.detail-foto-grid img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius-klein);
cursor: zoom-in;
border: 1px solid var(--kleur-grens);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.detail-foto-grid img:hover {
transform: scale(1.03);
box-shadow: var(--schaduw-medium);
}
/* ============================================
HEADER ACTIES (instellingen-knop)
============================================ */
.header-acties {
display: flex;
align-items: center;
gap: 0.75rem;
}
.btn-icoon {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.85);
width: 40px;
height: 40px;
border-radius: var(--radius-klein);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-icoon svg { width: 20px; height: 20px; }
.btn-icoon:hover {
background: rgba(191, 134, 59, 0.15);
border-color: var(--kleur-primair);
color: var(--kleur-primair);
}
/* ============================================
DASHBOARD — uitgebreide stats
============================================ */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.stat-inspecteur {
cursor: pointer;
background: linear-gradient(135deg, var(--kleur-oppervlak) 0%, var(--kleur-oppervlak-mat) 100%);
}
.stat-inspecteur:hover {
border-color: var(--kleur-primair);
transform: translateY(-1px);
box-shadow: var(--schaduw-medium);
}
.stat-inspecteur.waarschuwing {
border-color: #b8893b;
background: linear-gradient(135deg, rgba(184, 137, 59, 0.08) 0%, rgba(184, 137, 59, 0.02) 100%);
}
.stat-inspecteur-naam {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
color: var(--kleur-zwart);
margin: 0.5rem 0 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ============================================
VOORTGANGSBALK
============================================ */
.voortgang-blok {
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
position: sticky;
top: 0;
z-index: 10;
backdrop-filter: blur(8px);
box-shadow: var(--schaduw-zacht);
}
.voortgang-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.6rem;
}
.voortgang-label {
font-size: 0.85rem;
font-weight: 700;
color: var(--kleur-tekst-zacht);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.voortgang-percentage {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
color: var(--kleur-primair-donker);
}
.voortgang-balk {
background: var(--kleur-oppervlak-mat);
border-radius: 999px;
height: 6px;
overflow: hidden;
margin-bottom: 1rem;
}
.voortgang-vulling {
height: 100%;
background: linear-gradient(to right, var(--kleur-primair), var(--kleur-primair-donker));
border-radius: 999px;
transition: width 0.4s ease;
}
.voortgang-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.voortgang-tab {
background: transparent;
border: 1px solid var(--kleur-grens);
color: var(--kleur-tekst-zacht);
padding: 0.4rem 0.75rem;
border-radius: 999px;
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: all 0.2s ease;
}
.voortgang-tab:hover {
border-color: var(--kleur-primair);
color: var(--kleur-primair-donker);
}
.voortgang-tab.compleet {
background: rgba(74, 124, 58, 0.08);
border-color: #4a7c3a;
color: #3a6a2a;
}
.voortgang-tab-icoon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--kleur-grens);
color: var(--kleur-tekst-zacht);
font-size: 0.7rem;
font-weight: 700;
}
.voortgang-tab.compleet .voortgang-tab-icoon {
background: #4a7c3a;
color: var(--kleur-wit);
}
.voortgang-tab-icoon svg { width: 11px; height: 11px; }
.voortgang-tab-nummer {
font-size: 0.7rem;
line-height: 1;
}
/* ============================================
OPSLAG-STATUS INDICATOR
============================================ */
.bewerk-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.opslag-status {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.9rem;
background: rgba(74, 124, 58, 0.08);
color: #3a6a2a;
border: 1px solid rgba(74, 124, 58, 0.25);
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
transition: all 0.3s ease;
}
.opslag-status svg { width: 14px; height: 14px; }
.opslag-status.bezig {
background: rgba(200, 144, 32, 0.08);
color: #8a6818;
border-color: rgba(200, 144, 32, 0.25);
}
.opslag-status.bezig svg {
animation: spin 1.2s linear infinite;
}
/* Opslag mislukt — duidelijk rood, zodat de gebruiker het ziet */
.opslag-status.fout {
background: rgba(184, 65, 42, 0.1);
color: #b8412a;
border-color: rgba(184, 65, 42, 0.4);
font-weight: 700;
}
.opslag-status.fout svg {
animation: none;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ============================================
SECTIE-NUMMER (in bewerk-formulier)
============================================ */
.sectie-titel {
display: flex;
align-items: center;
gap: 0.75rem;
}
.sectie-nummer {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--kleur-primair), var(--kleur-primair-donker, #9c6c2a));
color: white;
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 700;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(191, 134, 59, 0.25);
}
/* ============================================
INSTELLINGEN
============================================ */
.instellingen-blok {
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 2rem;
margin-bottom: 1.5rem;
}
.instellingen-blok-header {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--kleur-grens-mat);
}
.instellingen-blok-header h2 {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 700;
color: var(--kleur-zwart);
margin: 0 0 0.25rem 0;
}
.instellingen-blok-header p {
color: var(--kleur-tekst-zacht);
font-size: 0.9rem;
margin: 0;
}
/* Inspecteur-keuze-knoppen */
.inspecteur-keuze-lijst {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.75rem;
}
.inspecteur-keuze {
background: var(--kleur-oppervlak);
border: 2px solid var(--kleur-grens);
padding: 1rem;
border-radius: var(--radius-klein);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.85rem;
text-align: left;
font-family: inherit;
transition: all 0.2s ease;
position: relative;
}
.inspecteur-keuze:hover {
border-color: var(--kleur-primair);
transform: translateY(-1px);
}
.inspecteur-keuze.gekozen {
border-color: var(--kleur-primair);
background: rgba(191, 134, 59, 0.06);
box-shadow: var(--schaduw-medium);
}
.inspecteur-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--kleur-primair), var(--kleur-primair-donker));
color: var(--kleur-wit);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
flex-shrink: 0;
}
.inspecteur-avatar.groot {
width: 56px;
height: 56px;
font-size: 1.25rem;
}
.inspecteur-info {
flex: 1;
min-width: 0;
}
.inspecteur-naam {
font-weight: 700;
color: var(--kleur-zwart);
font-size: 1rem;
margin-bottom: 0.15rem;
}
.inspecteur-functie {
font-size: 0.82rem;
color: var(--kleur-tekst-zacht);
}
.inspecteur-actief-badge {
background: var(--kleur-primair);
color: var(--kleur-wit);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.2rem 0.55rem;
border-radius: 999px;
position: absolute;
top: 0.6rem;
right: 0.6rem;
}
/* Inspecteur-card */
.inspecteurs-beheer-lijst {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1rem;
}
.inspecteur-card {
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 1.5rem;
}
.inspecteur-card-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--kleur-grens-mat);
}
.inspecteur-card-titel {
flex: 1;
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 700;
color: var(--kleur-zwart);
}
.inspecteur-verwijder {
background: transparent;
border: 1px solid var(--kleur-grens);
color: var(--kleur-gevaar);
width: 34px;
height: 34px;
border-radius: var(--radius-klein);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.inspecteur-verwijder svg { width: 16px; height: 16px; }
.inspecteur-verwijder:hover {
background: var(--kleur-gevaar);
color: var(--kleur-wit);
border-color: var(--kleur-gevaar);
}
.inspecteur-velden-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
/* Handtekening-preview in instellingen */
.handtekening-preview {
margin-top: 1.5rem;
padding: 1.25rem 1.5rem;
background: linear-gradient(135deg, #fafaf7, #f5f3ee);
border: 1px dashed var(--kleur-primair);
border-radius: var(--radius-klein);
}
.handtekening-preview-label {
font-size: 0.7rem;
font-weight: 700;
color: var(--kleur-tekst-zacht);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.75rem;
}
.handtekening-cursief {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 1.8rem;
color: var(--kleur-primair-donker);
line-height: 1.1;
margin-bottom: 0.25rem;
}
.handtekening-lijn {
height: 1px;
background: var(--kleur-tekst-zacht);
margin: 0.5rem 0;
width: 70%;
}
.handtekening-info-naam {
font-weight: 700;
color: var(--kleur-zwart);
font-size: 0.95rem;
}
.handtekening-info-functie {
font-size: 0.82rem;
color: var(--kleur-tekst-zacht);
}
/* Bedrijfsgegevens grid */
.bedrijfs-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.85rem;
}
.bedrijfs-info-item {
padding: 0.85rem 1rem;
background: var(--kleur-oppervlak);
border-radius: var(--radius-klein);
border-left: 3px solid var(--kleur-primair);
}
.bedrijfs-info-label {
display: block;
font-size: 0.7rem;
font-weight: 700;
color: var(--kleur-tekst-zacht);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.25rem;
}
.bedrijfs-info-waarde {
font-weight: 600;
color: var(--kleur-zwart);
font-size: 0.9rem;
}
.lege-staat-mini {
text-align: center;
padding: 1.5rem;
color: var(--kleur-tekst-hint);
font-style: italic;
border: 1px dashed var(--kleur-grens);
border-radius: var(--radius-klein);
}
/* ===== TOAST ===== */
.toast {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--kleur-zwart);
color: var(--kleur-wit);
padding: 0.85rem 1.75rem;
border-radius: 100px;
font-size: 0.9rem;
font-weight: 500;
box-shadow: var(--schaduw-sterk);
opacity: 0;
transition: all 0.3s ease;
z-index: 1000;
pointer-events: none;
max-width: 90%;
text-align: center;
border: 1px solid var(--kleur-primair);
}
.toast.toon { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ===== MOBIEL ===== */
@media (max-width: 600px) {
.header-inner { padding: 0.75rem 0.85rem; gap: 0.5rem; }
.brand-logo { height: 36px; }
.brand-text { display: none; }
.btn-primary .btn-label { display: none; }
.btn-primary {
padding: 0.6rem 0.85rem;
gap: 0;
min-width: 44px;
min-height: 44px;
}
.btn-primary svg { width: 20px; height: 20px; }
.container { padding: 0 1rem; }
.rapport-form { padding: 1.5rem 1rem; }
.detail-sectie, .detail-header { padding: 1.5rem 1rem; }
.form-acties { flex-direction: column-reverse; gap: 0.65rem; }
.form-acties button { width: 100%; min-height: 48px; }
.detail-acties button { flex: 1; min-width: 140px; }
.stat-waarde { font-size: 1.75rem; }
/* Mobiel gebruikersmenu compacter */
.gebruiker-knop {
padding: 0.3rem 0.7rem 0.3rem 0.3rem !important;
gap: 0.4rem !important;
}
.gebruiker-naam-mini {
max-width: 70px !important;
font-size: 0.8rem !important;
}
.gebruiker-rol-badge { display: none; }
/* Header-acties compacter */
.header-acties { gap: 0.5rem !important; }
}
/* Heel klein scherm (oude iPhone SE etc) */
@media (max-width: 380px) {
.gebruiker-naam-mini { display: none; }
.gebruiker-knop {
padding: 0.3rem !important;
border-radius: 50% !important;
}
}
/* ============================================
LOGIN OVERLAY — mobiel & iPad-proof
============================================ */
body.niet-ingelogd { overflow: hidden; }
body.niet-ingelogd > #app { display: none; }
.login-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.login-achtergrond {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 20%, rgba(191, 134, 59, 0.35) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(191, 134, 59, 0.20) 0%, transparent 50%),
linear-gradient(135deg, #010202 0%, #0f0f0f 100%);
z-index: -1;
}
.login-paneel {
background: var(--kleur-wit);
border-radius: 20px;
padding: 2.5rem 2rem;
max-width: 440px;
width: 100%;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(191, 134, 59, 0.15);
position: relative;
max-height: calc(100vh - 3rem);
overflow-y: auto;
}
.login-brand {
display: flex;
align-items: center;
gap: 1rem;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--kleur-grens);
}
.login-logo {
width: 56px;
height: 56px;
flex-shrink: 0;
}
.login-merknaam {
flex: 1;
line-height: 1.1;
}
.login-merk-naam {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.05rem;
color: var(--kleur-zwart);
letter-spacing: 0.08em;
}
.login-merk-product {
font-family: var(--font-display);
font-style: italic;
font-size: 1.2rem;
color: var(--kleur-primair-donker);
margin-top: 0.15rem;
}
.login-welkom h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.5rem;
color: var(--kleur-zwart);
margin: 0 0 0.4rem 0;
}
.login-welkom p {
color: var(--kleur-tekst-zacht);
font-size: 0.92rem;
line-height: 1.5;
margin: 0 0 1.5rem 0;
}
.login-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.login-veld { display: flex; flex-direction: column; }
.login-label {
font-size: 0.75rem;
font-weight: 700;
color: var(--kleur-tekst-zacht);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.45rem;
}
.login-veld input {
width: 100%;
padding: 0.85rem 1rem;
border: 1.5px solid var(--kleur-grens);
border-radius: 10px;
background: var(--kleur-wit);
font-family: inherit;
font-size: 1rem;
color: var(--kleur-zwart);
transition: all 0.2s ease;
-webkit-appearance: none;
}
.login-veld input:focus {
outline: none;
border-color: var(--kleur-primair);
box-shadow: 0 0 0 3px rgba(191, 134, 59, 0.15);
}
.login-wachtwoord-wrap {
position: relative;
display: flex;
}
.login-wachtwoord-wrap input { padding-right: 3rem; }
.login-toon-ww {
position: absolute;
right: 0.4rem;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: var(--kleur-tekst-zacht);
width: 38px;
height: 38px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.login-toon-ww:hover { color: var(--kleur-primair-donker); background: var(--kleur-oppervlak-mat); }
.login-toon-ww svg { width: 18px; height: 18px; }
.login-fout {
background: rgba(184, 65, 42, 0.08);
color: #8a3120;
border: 1px solid rgba(184, 65, 42, 0.25);
padding: 0.7rem 0.95rem;
border-radius: 8px;
font-size: 0.88rem;
line-height: 1.4;
}
.login-succes {
background: rgba(74, 124, 58, 0.08);
color: #3a6a2a;
border: 1px solid rgba(74, 124, 58, 0.25);
padding: 0.7rem 0.95rem;
border-radius: 8px;
font-size: 0.88rem;
}
.login-knop {
width: 100%;
padding: 0.95rem 1.25rem;
border-radius: 10px;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s ease;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.login-knop-primair {
background: linear-gradient(135deg, var(--kleur-primair) 0%, var(--kleur-primair-donker) 100%);
color: var(--kleur-wit);
box-shadow: 0 4px 16px rgba(191, 134, 59, 0.3);
}
.login-knop-primair:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(191, 134, 59, 0.4);
}
.login-knop:disabled {
cursor: not-allowed;
opacity: 0.7;
transform: none;
}
.login-knop-spinner svg {
width: 18px;
height: 18px;
animation: spin 0.8s linear infinite;
}
.login-link {
background: transparent;
border: none;
color: var(--kleur-tekst-zacht);
font-family: inherit;
font-size: 0.88rem;
cursor: pointer;
text-align: center;
padding: 0.5rem;
margin-top: 0.25rem;
}
.login-link:hover { color: var(--kleur-primair-donker); text-decoration: underline; }
.verborgen { display: none !important; }
/* iPad / kleine schermen */
@media (max-width: 480px) {
.login-paneel {
padding: 2rem 1.5rem;
border-radius: 16px;
}
.login-welkom h2 { font-size: 1.3rem; }
.login-merk-naam { font-size: 0.95rem; }
.login-merk-product { font-size: 1.05rem; }
}
/* iPad portrait — meer ademruimte */
@media (min-width: 600px) and (max-width: 1024px) {
.login-paneel {
max-width: 500px;
padding: 3rem 2.5rem;
}
}
/* ============================================
GEBRUIKERSMENU (rechtsboven na inloggen)
============================================ */
.gebruiker-menu-wrap {
position: relative;
}
.gebruiker-knop {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.4rem 0.8rem 0.4rem 0.4rem;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 999px;
cursor: pointer;
color: rgba(255, 255, 255, 0.95);
font-family: inherit;
font-size: 0.85rem;
transition: all 0.2s ease;
}
.gebruiker-knop:hover {
border-color: var(--kleur-primair);
background: rgba(191, 134, 59, 0.1);
}
.gebruiker-avatar-mini {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--kleur-primair), var(--kleur-primair-donker));
color: var(--kleur-wit);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.75rem;
flex-shrink: 0;
}
.gebruiker-naam-mini {
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
.gebruiker-rol-badge {
background: linear-gradient(135deg, #BF863B, #9c6c2a);
color: #ffffff;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.2rem 0.55rem;
border-radius: 999px;
box-shadow: 0 1px 3px rgba(191, 134, 59, 0.3);
}
.gebruiker-rol-badge:empty {
display: none;
}
.gebruiker-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
min-width: 240px;
overflow: hidden;
z-index: 100;
}
.gebruiker-dropdown-header {
padding: 1rem 1.25rem;
background: var(--kleur-oppervlak);
border-bottom: 1px solid var(--kleur-grens);
}
.gebruiker-dropdown-naam {
font-weight: 700;
color: var(--kleur-zwart);
font-size: 0.95rem;
}
.gebruiker-dropdown-email {
font-size: 0.8rem;
color: var(--kleur-tekst-zacht);
margin-top: 0.15rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gebruiker-dropdown-menu {
padding: 0.5rem;
}
.gebruiker-dropdown-item {
display: flex;
align-items: center;
gap: 0.7rem;
width: 100%;
padding: 0.65rem 0.85rem;
background: transparent;
border: none;
text-align: left;
color: var(--kleur-tekst);
font-family: inherit;
font-size: 0.9rem;
cursor: pointer;
border-radius: 8px;
transition: background 0.15s ease;
}
.gebruiker-dropdown-item:hover {
background: var(--kleur-oppervlak-mat);
color: var(--kleur-primair-donker);
}
.gebruiker-dropdown-item.gevaar { color: var(--kleur-gevaar); }
.gebruiker-dropdown-item.gevaar:hover { background: rgba(184, 65, 42, 0.08); }
.gebruiker-dropdown-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.gebruiker-dropdown-divider {
height: 1px;
background: var(--kleur-grens);
margin: 0.35rem 0;
}
/* ============================================
BETER RESPONSIVE — TOUCH-PROOF
============================================ */
@media (max-width: 720px) {
/* Grotere tap-targets */
button, .btn-primary, .btn-secundair, .btn-gevaar,
.janee-knop, .actieplan-knop, input, select, textarea {
min-height: 44px; /* Apple's aanbevolen minimum */
}
/* Stat-grid 1-koloms op telefoon */
.stat-grid {
grid-template-columns: 1fr;
}
.stat-actie { grid-column: span 1; }
/* Voortgangsbalk compacter */
.voortgang-blok {
padding: 1rem;
}
/* Header acties — instellingen-knop blijven, nieuw-rapport compacter */
.header-acties .btn-primary .btn-label {
display: none;
}
}
/* iPad — twee koloms layout */
@media (min-width: 768px) and (max-width: 1180px) {
.container {
max-width: 1080px;
}
/* Inspecteurs/klanten op iPad twee-koloms */
.inspecteur-keuze-lijst {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================
MODALS (klantbewerking, gebruikertoevoegen)
============================================ */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
backdrop-filter: blur(4px);
animation: fadeIn 0.2s ease;
}
.modal-paneel {
background: var(--kleur-wit);
border-radius: 16px;
max-width: 560px;
width: 100%;
max-height: calc(100vh - 2rem);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--kleur-grens);
background: var(--kleur-oppervlak);
}
.modal-header h2 {
font-family: var(--font-display);
font-size: 1.25rem;
margin: 0;
color: var(--kleur-zwart);
}
.modal-sluit {
background: transparent;
border: none;
font-size: 1.6rem;
color: var(--kleur-tekst-zacht);
cursor: pointer;
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.modal-sluit:hover {
background: var(--kleur-oppervlak-mat);
color: var(--kleur-zwart);
}
.modal-inhoud {
padding: 1.5rem;
overflow-y: auto;
flex: 1;
}
.modal-acties {
padding: 1rem 1.5rem;
border-top: 1px solid var(--kleur-grens);
background: var(--kleur-oppervlak);
display: flex;
gap: 0.75rem;
justify-content: flex-end;
flex-wrap: wrap;
}
.veld-rij {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 480px) {
.veld-rij { grid-template-columns: 1fr; }
}
.info-blok {
background: rgba(191, 134, 59, 0.06);
border-left: 3px solid var(--kleur-primair);
padding: 0.85rem 1rem;
border-radius: 6px;
margin-bottom: 1.25rem;
font-size: 0.88rem;
color: var(--kleur-tekst);
}
.info-blok p { margin: 0; }
/* ============================================
KLANTEN-LIJST
============================================ */
.klanten-lijst {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
.klant-kaart {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens);
border-radius: 10px;
transition: all 0.2s ease;
}
.klant-kaart:hover {
border-color: var(--kleur-primair);
background: var(--kleur-wit);
box-shadow: var(--schaduw-zacht);
}
.klant-kaart-info { flex: 1; min-width: 0; }
.klant-naam { font-weight: 700; color: var(--kleur-zwart); font-size: 1rem; }
.klant-bedrijf { font-size: 0.88rem; color: var(--kleur-primair-donker); margin-top: 0.15rem; }
.klant-meta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 0.4rem;
font-size: 0.82rem;
color: var(--kleur-tekst-zacht);
}
.btn-mini {
padding: 0.5rem 1rem;
background: transparent;
border: 1px solid var(--kleur-grens);
color: var(--kleur-tekst);
border-radius: 6px;
cursor: pointer;
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
transition: all 0.2s ease;
}
.btn-mini:hover {
border-color: var(--kleur-primair);
color: var(--kleur-primair-donker);
}
.btn-mini-gevaar { color: var(--kleur-gevaar); border-color: rgba(184, 65, 42, 0.3); }
.btn-mini-gevaar:hover { background: var(--kleur-gevaar); color: white; border-color: var(--kleur-gevaar); }
/* ============================================
GEBRUIKERS-LIJST
============================================ */
.gebruikers-lijst {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
.gebruiker-kaart {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens);
border-radius: 10px;
}
.gebruiker-kaart.inactief { opacity: 0.55; }
.gebruiker-kaart-info { flex: 1; min-width: 0; }
.gebruiker-kaart-naam {
font-weight: 700;
color: var(--kleur-zwart);
font-size: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.gebruiker-kaart-meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.35rem;
flex-wrap: wrap;
font-size: 0.85rem;
color: var(--kleur-tekst-zacht);
}
.huidige-badge, .inactief-badge {
font-size: 0.65rem;
font-weight: 700;
padding: 0.15rem 0.45rem;
border-radius: 4px;
letter-spacing: 0.05em;
}
.huidige-badge { background: var(--kleur-primair); color: white; }
.inactief-badge { background: var(--kleur-tekst-zacht); color: white; }
/* Rol pills */
.rol-pill {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.25rem 0.65rem;
border-radius: 999px;
}
.rol-eigenaar {
background: rgba(191, 134, 59, 0.15);
color: var(--kleur-primair-donker);
border: 1px solid var(--kleur-primair);
}
.rol-administratie {
background: rgba(74, 124, 58, 0.12);
color: #3a6a2a;
border: 1px solid #4a7c3a;
}
.rol-inspecteur {
background: var(--kleur-oppervlak-mat);
color: var(--kleur-tekst);
border: 1px solid var(--kleur-grens);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ============================================
LAAD-SCHERM (terwijl Firebase auth checkt)
============================================ */
body.bezig-met-laden #app { visibility: hidden; }
.laad-scherm {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #010202 0%, #0f0f0f 100%);
transition: opacity 0.3s ease;
}
.laad-scherm.verborgen {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.laad-inhoud {
text-align: center;
color: white;
}
.laad-logo {
width: 72px;
height: 72px;
margin: 0 auto 1rem;
display: block;
}
.laad-titel {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 1.6rem;
color: #BF863B;
margin-bottom: 1.5rem;
}
.laad-spinner {
width: 30px;
height: 30px;
border: 3px solid rgba(191, 134, 59, 0.2);
border-top-color: #BF863B;
border-radius: 50%;
margin: 0 auto;
animation: spin 0.8s linear infinite;
}
/* ============================================
EIGENAAR-PANEEL
============================================ */
.eigenaar-container {
max-width: 1100px;
}
.eigenaar-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.eigenaar-titel-blok {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.eigenaar-icoon {
width: 56px;
height: 56px;
border-radius: 12px;
background: linear-gradient(135deg, var(--kleur-primair), var(--kleur-primair-donker));
color: var(--kleur-wit);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: var(--schaduw-medium);
}
.eigenaar-icoon svg { width: 28px; height: 28px; }
/* Tabs */
.eigenaar-tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
border-bottom: 2px solid var(--kleur-grens);
overflow-x: auto;
padding-bottom: 0;
}
.eigenaar-tab {
background: transparent;
border: none;
color: var(--kleur-tekst-zacht);
padding: 0.85rem 1.25rem;
font-family: inherit;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.55rem;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
transition: all 0.2s ease;
}
.eigenaar-tab svg { width: 18px; height: 18px; }
.eigenaar-tab:hover {
color: var(--kleur-tekst);
}
.eigenaar-tab.actief {
color: var(--kleur-primair-donker);
border-bottom-color: var(--kleur-primair);
}
.eigenaar-sectie {
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 2rem;
margin-bottom: 1.5rem;
}
.eigenaar-sectie-header {
margin-bottom: 1.5rem;
}
.eigenaar-sectie-header h2 {
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--kleur-zwart);
margin: 0 0 0.3rem;
}
.eigenaar-sectie-header p {
color: var(--kleur-tekst-zacht);
font-size: 0.9rem;
margin: 0;
}
.sectie-subtitel {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 700;
color: var(--kleur-zwart);
margin: 2rem 0 0.85rem;
padding-top: 1rem;
border-top: 1px solid var(--kleur-grens-mat);
}
.eigenaar-laden {
text-align: center;
padding: 3rem 1rem;
color: var(--kleur-tekst-zacht);
font-style: italic;
}
.eigenaar-fout {
background: rgba(184, 65, 42, 0.08);
color: #8a3120;
padding: 1rem;
border-radius: 8px;
border: 1px solid rgba(184, 65, 42, 0.25);
}
/* Rollen-tabel */
.rollen-tabel {
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
overflow: hidden;
}
.rollen-tabel-header {
display: grid;
grid-template-columns: 2fr 1.4fr 1fr 1.2fr;
background: var(--kleur-zwart);
color: var(--kleur-wit);
padding: 0.85rem 1.25rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
gap: 1rem;
}
.rollen-rij {
display: grid;
grid-template-columns: 2fr 1.4fr 1fr 1.2fr;
padding: 1rem 1.25rem;
align-items: center;
gap: 1rem;
border-bottom: 1px solid var(--kleur-grens-mat);
transition: background 0.15s ease;
}
.rollen-rij:last-child { border-bottom: none; }
.rollen-rij:hover { background: var(--kleur-oppervlak); }
.rollen-rij.inactief { opacity: 0.55; }
.rollen-cel {
font-size: 0.92rem;
overflow: hidden;
text-overflow: ellipsis;
}
.rollen-gebruiker {
display: flex;
align-items: center;
gap: 0.85rem;
min-width: 0;
}
.rollen-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--kleur-primair), var(--kleur-primair-donker));
color: var(--kleur-wit);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.85rem;
flex-shrink: 0;
}
.rollen-naam {
font-weight: 700;
color: var(--kleur-zwart);
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.rollen-email {
font-size: 0.78rem;
color: var(--kleur-tekst-zacht);
margin-top: 0.15rem;
}
.rollen-mini-badge {
font-size: 0.62rem;
font-weight: 700;
padding: 0.15rem 0.4rem;
border-radius: 4px;
text-transform: uppercase;
}
.rollen-mini-badge.super {
background: var(--kleur-primair);
color: var(--kleur-wit);
}
.rollen-mini-badge.huidige {
background: var(--kleur-zwart);
color: var(--kleur-primair);
}
.rollen-select {
padding: 0.5rem 0.75rem;
border: 1px solid var(--kleur-grens);
border-radius: 6px;
background: var(--kleur-wit);
font-family: inherit;
font-size: 0.85rem;
cursor: pointer;
width: 100%;
}
.rollen-select:disabled {
background: var(--kleur-oppervlak-mat);
color: var(--kleur-tekst-zacht);
cursor: not-allowed;
}
.status-pil {
display: inline-block;
padding: 0.3rem 0.7rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
}
.status-pil.actief {
background: rgba(74, 124, 58, 0.1);
color: #3a6a2a;
}
.status-pil.inactief {
background: var(--kleur-oppervlak-mat);
color: var(--kleur-tekst-zacht);
}
.status-pil.concept {
background: rgba(200, 144, 32, 0.12);
color: #8a6818;
}
.status-pil.definitief {
background: rgba(184, 137, 59, 0.12);
color: var(--kleur-primair-donker);
}
.status-pil.verzonden {
background: rgba(74, 124, 58, 0.12);
color: #3a6a2a;
}
.rollen-vergrendeld {
font-size: 0.78rem;
color: var(--kleur-tekst-zacht);
font-style: italic;
}
/* Grote stats */
.grote-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.grote-stat {
background: linear-gradient(135deg, var(--kleur-oppervlak), var(--kleur-oppervlak-mat));
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
padding: 1.5rem;
text-align: center;
}
.grote-stat-cijfer {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 700;
color: var(--kleur-zwart);
line-height: 1;
}
.grote-stat-suffix {
font-size: 1.25rem;
color: var(--kleur-tekst-zacht);
}
.grote-stat-label {
font-size: 0.82rem;
color: var(--kleur-tekst-zacht);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 0.5rem;
font-weight: 600;
}
/* Advies stats */
.advies-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.85rem;
margin-bottom: 1rem;
}
.advies-stat {
padding: 1.25rem;
border-radius: var(--radius-klein);
text-align: center;
color: var(--kleur-wit);
}
.advies-stat.kleur-groen { background: #4a7c3a; }
.advies-stat.kleur-geel { background: #c89020; }
.advies-stat.kleur-oranje { background: #b8893b; }
.advies-stat.kleur-rood { background: #b8412a; }
.advies-stat-cijfer {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 700;
line-height: 1;
}
.advies-stat-label {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 0.4rem;
opacity: 0.9;
}
/* Status stats */
.status-stats {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.status-stat {
background: var(--kleur-oppervlak);
padding: 1rem 1.5rem;
border-radius: var(--radius-klein);
border: 1px solid var(--kleur-grens);
display: flex;
flex-direction: column;
align-items: center;
min-width: 100px;
}
.status-stat-cijfer {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 700;
color: var(--kleur-zwart);
}
.status-stat-label {
font-size: 0.72rem;
color: var(--kleur-tekst-zacht);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 0.2rem;
}
/* Top lijst */
.top-lijst {
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
overflow: hidden;
}
.top-rij {
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
gap: 1rem;
padding: 0.85rem 1.25rem;
border-bottom: 1px solid var(--kleur-grens-mat);
}
.top-rij:last-child { border-bottom: none; }
.top-rij:hover { background: var(--kleur-oppervlak); }
.top-positie {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--kleur-zwart);
color: var(--kleur-primair);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.85rem;
}
.top-naam { font-weight: 600; color: var(--kleur-zwart); }
.top-aantal { color: var(--kleur-tekst-zacht); font-size: 0.85rem; }
/* Activiteit */
.activiteit-lijst {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.activiteit-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.85rem 1.25rem;
background: var(--kleur-oppervlak);
border-radius: var(--radius-klein);
border-left: 3px solid var(--kleur-primair);
}
.activiteit-icoon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--kleur-wit);
color: var(--kleur-primair-donker);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.activiteit-icoon svg { width: 18px; height: 18px; }
.activiteit-inhoud { flex: 1; min-width: 0; }
.activiteit-titel {
font-weight: 600;
color: var(--kleur-zwart);
font-size: 0.92rem;
}
.activiteit-meta {
font-size: 0.78rem;
color: var(--kleur-tekst-zacht);
margin-top: 0.15rem;
}
/* Onderhoud */
.onderhoud-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.onderhoud-kaart {
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 1.5rem;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.onderhoud-kaart.gevaar {
border-color: rgba(184, 65, 42, 0.3);
background: rgba(184, 65, 42, 0.03);
}
.onderhoud-icoon {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--kleur-wit);
color: var(--kleur-primair-donker);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 0.85rem;
}
.onderhoud-kaart.gevaar .onderhoud-icoon {
color: var(--kleur-gevaar);
}
.onderhoud-icoon svg { width: 22px; height: 22px; }
.onderhoud-kaart h3 {
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--kleur-zwart);
margin: 0 0 0.4rem;
}
.onderhoud-kaart p {
color: var(--kleur-tekst-zacht);
font-size: 0.88rem;
margin: 0 0 1rem;
line-height: 1.5;
}
.info-blok-eigenaar {
background: linear-gradient(135deg, rgba(191, 134, 59, 0.08), rgba(191, 134, 59, 0.02));
border-left: 3px solid var(--kleur-primair);
padding: 1.25rem 1.5rem;
border-radius: var(--radius-klein);
}
.info-blok-eigenaar h4 {
font-family: var(--font-display);
font-size: 0.95rem;
color: var(--kleur-zwart);
margin: 0 0 0.65rem;
}
.info-blok-eigenaar ul {
margin: 0;
padding-left: 1.25rem;
color: var(--kleur-tekst);
font-size: 0.88rem;
line-height: 1.7;
}
/* Gouden dropdown-item (eigenaar-paneel) */
.gebruiker-dropdown-item.gouden {
color: var(--kleur-primair-donker);
font-weight: 700;
}
.gebruiker-dropdown-item.gouden:hover {
background: rgba(191, 134, 59, 0.1);
color: var(--kleur-primair-donker);
}
/* Geen toegang */
.geen-toegang {
text-align: center;
padding: 4rem 1rem;
}
.geen-toegang-icoon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
border-radius: 50%;
background: rgba(184, 65, 42, 0.08);
color: var(--kleur-gevaar);
display: inline-flex;
align-items: center;
justify-content: center;
}
.geen-toegang-icoon svg { width: 40px; height: 40px; }
.geen-toegang h1 {
font-family: var(--font-display);
color: var(--kleur-zwart);
margin-bottom: 0.5rem;
}
.geen-toegang p {
color: var(--kleur-tekst-zacht);
margin-bottom: 2rem;
}
/* Mobiel */
@media (max-width: 720px) {
.rollen-tabel-header { display: none; }
.rollen-rij {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.rollen-cel {
display: flex;
align-items: center;
gap: 0.5rem;
}
.rollen-cel::before {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
color: var(--kleur-tekst-zacht);
min-width: 70px;
}
.rollen-rij .rollen-cel:nth-child(2)::before { content: 'Rol:'; }
.rollen-rij .rollen-cel:nth-child(3)::before { content: 'Status:'; }
.rollen-rij .rollen-cel:nth-child(4)::before { content: 'Acties:'; }
.rollen-gebruiker::before { content: none !important; }
}
/* ============================================
PWA / SAFE AREA — voor iPhone/iPad/Android met notch en home-indicator
============================================ */
/* Algemene safe-area variabelen (werkt ook in browser) */
:root {
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
}
/* Detect PWA standalone mode (op iPhone-thuisscherm of geïnstalleerde Android PWA) */
@media (display-mode: standalone), (display-mode: fullscreen) {
/* === HEADER — boven safe-area heen tekenen, content binnenin === */
.app-header {
padding-top: calc(var(--safe-top) + 0px) !important;
padding-left: var(--safe-left);
padding-right: var(--safe-right);
}
.header-inner {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
min-height: 60px;
}
/* === Container: extra horizontale ruimte voor landscape iPhone === */
.container {
padding-left: max(1.25rem, var(--safe-left)) !important;
padding-right: max(1.25rem, var(--safe-right)) !important;
}
/* === Main content: extra bovenruimte zodat eerste element niet onder header zit === */
main {
padding-bottom: max(2rem, var(--safe-bottom)) !important;
}
/* === Form-acties (PDF download knop): boven de home-indicator === */
.form-acties {
position: sticky;
bottom: 0;
background: linear-gradient(to bottom, transparent, var(--kleur-achtergrond) 30%);
padding-top: 1rem !important;
padding-bottom: calc(max(1rem, var(--safe-bottom)) + 0.5rem) !important;
margin-left: calc(-1 * var(--safe-left));
margin-right: calc(-1 * var(--safe-right));
padding-left: max(1.25rem, var(--safe-left));
padding-right: max(1.25rem, var(--safe-right));
z-index: 5;
}
/* === Modals — full safe-area === */
.modal-overlay {
padding-top: max(1rem, var(--safe-top)) !important;
padding-bottom: max(1rem, var(--safe-bottom)) !important;
padding-left: max(1rem, var(--safe-left)) !important;
padding-right: max(1rem, var(--safe-right)) !important;
}
.modal-acties {
padding-bottom: max(1rem, calc(var(--safe-bottom) * 0.5)) !important;
}
/* === Login-overlay: paneel binnen safe-area === */
.login-overlay {
padding-top: max(1.5rem, var(--safe-top)) !important;
padding-bottom: max(1.5rem, var(--safe-bottom)) !important;
padding-left: max(1rem, var(--safe-left)) !important;
padding-right: max(1rem, var(--safe-right)) !important;
}
/* === Voortgangsbalk (sticky) — onder safe-top blijven === */
.voortgang-blok {
top: calc(var(--safe-top) + 60px) !important;
}
/* === Gebruiker-dropdown: niet onder homebar === */
.gebruiker-dropdown {
max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 80px);
overflow-y: auto;
}
/* === Foto-modal === */
.foto-modal {
padding-top: max(1rem, var(--safe-top));
padding-bottom: max(1rem, var(--safe-bottom));
}
}
/* ============================================
TOUCH-VRIENDELIJK: ALLE knoppen minimaal 44x44 in PWA / mobiel
============================================ */
@media (max-width: 1024px), (display-mode: standalone) {
/* Apple's minimum aanbevolen tap-target: 44x44 punten */
button:not(.modal-sluit):not(.login-toon-ww):not(.terug-knop),
.btn-primary,
.btn-secundair,
.btn-gevaar,
.btn-mini,
select,
.janee-knop,
.actieplan-knop,
.voortgang-tab,
.eigenaar-tab,
.gebruiker-knop,
.btn-icoon {
min-height: 44px;
}
/* Form input velden ook makkelijker raken */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="search"],
textarea,
select {
min-height: 44px;
font-size: 16px !important; /* Voorkomt zoom-in op iOS bij focus */
}
/* Modal-sluit en mini-icons mogen iets kleiner */
.modal-sluit,
.login-toon-ww,
.gebruiker-dropdown-item {
min-height: 40px;
}
/* Dropdown-items: meer ruimte */
.gebruiker-dropdown-item {
padding: 0.85rem 1rem !important;
}
/* Header acties: vermijd te kleine knoppen */
.header-acties {
gap: 0.6rem !important;
}
/* Stat-kaarten klikbaar maken voor heel het oppervlak */
.stat-kaart {
min-height: 88px;
}
/* Voortgangs-tabs op telefoon: groter */
.voortgang-tab {
padding: 0.6rem 0.95rem !important;
}
/* Eigenaar-tabs op telefoon */
.eigenaar-tab {
padding: 0.95rem 1rem !important;
font-size: 0.88rem !important;
}
/* Rollen-tabel knoppen */
.rollen-rij .btn-mini {
padding: 0.65rem 1rem !important;
font-size: 0.85rem !important;
}
/* Klanten-kaart actie-knoppen */
.klant-kaart-acties .btn-mini,
.gebruiker-kaart-acties .btn-mini {
padding: 0.65rem 1rem !important;
}
/* Voorkom dat tap-targets overlappen */
.actieplan-groep {
gap: 0.65rem !important;
}
/* Soort-item: foto-acties knoppen groter */
.foto-knop,
.foto-verwijder {
min-height: 44px !important;
min-width: 44px !important;
}
/* Detail-soort verwijder-knop */
.soort-verwijder-knop {
min-width: 44px !important;
min-height: 44px !important;
}
}
/* ============================================
iPHONE SPECIFIEK — extra fixes
============================================ */
@supports (-webkit-touch-callout: none) {
/* iOS-only: voorkom zoom bij dubbel-tap */
button, a, input, select, textarea {
touch-action: manipulation;
}
/* Stop "tap highlight" met grijze flash */
* {
-webkit-tap-highlight-color: rgba(191, 134, 59, 0.15);
}
/* Smooth scroll voor iOS */
.modal-inhoud,
.container,
main {
-webkit-overflow-scrolling: touch;
}
}
/* ============================================
LANDSCAPE MODUS op kleine schermen
============================================ */
@media (max-height: 500px) and (orientation: landscape) {
.login-paneel {
padding: 1.5rem 2rem !important;
max-height: calc(100vh - 1rem);
}
.login-brand {
padding-bottom: 1rem !important;
margin-bottom: 1rem !important;
}
.login-welkom h2 {
font-size: 1.2rem !important;
}
.login-welkom p {
margin-bottom: 1rem !important;
}
}
/* Altijd: safe-area op iOS — ook in Safari */
.app-header,
.login-overlay,
.modal-overlay {
padding-top: env(safe-area-inset-top, 0);
}
/* Container respecteert altijd de safe area aan zijkanten */
.container,
.bewerk-header,
.page-intro {
padding-left: max(1.25rem, env(safe-area-inset-left, 1.25rem));
padding-right: max(1.25rem, env(safe-area-inset-right, 1.25rem));
}
/* ============================================
GROTERE TAP-TARGETS (Apple guideline: min 44x44 pt)
============================================ */
/* Alle knoppen minimaal 44px hoog */
button,
.btn-primary,
.btn-secundair,
.btn-gevaar,
.btn-mini {
min-height: 44px;
}
/* Mini-knoppen iets kleiner toegestaan op desktop, maar groot op touch */
@media (pointer: coarse) {
.btn-mini {
min-height: 44px;
padding: 0.65rem 1.1rem;
}
/* Tap target voor klantkaart-knop */
.klant-kaart-acties .btn-mini,
.gebruiker-kaart-acties .btn-mini {
min-width: 88px;
}
/* Input velden ook iets groter */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
min-height: 44px;
font-size: 16px !important; /* voorkomt iOS zoom-in */
}
/* Modal sluit-knop groter */
.modal-sluit {
width: 44px;
height: 44px;
font-size: 1.8rem;
}
/* Actieplan-knoppen iets ruimer */
.actieplan-knop {
min-height: 100px;
padding: 1rem 0.85rem;
}
/* Stat-kaarten klikbaarder op touch */
.stat-kaart {
cursor: pointer;
}
/* Terugknop groter */
.terug-knop {
padding: 0.85rem 1.1rem;
font-size: 0.95rem;
}
/* Voortgang-tabs */
.voortgang-tab {
padding: 0.65rem 1rem;
min-height: 40px;
}
/* Gebruikersmenu items */
.gebruiker-dropdown-item {
padding: 0.95rem 1rem;
font-size: 0.95rem;
}
/* Login-velden ruimer */
.login-veld input {
min-height: 50px;
font-size: 16px !important;
padding: 1rem 1.1rem;
}
.login-knop {
min-height: 52px;
font-size: 1rem;
}
/* Eigenaar tabs */
.eigenaar-tab {
padding: 1rem 1.4rem;
min-height: 48px;
}
/* Foto-knop */
.foto-toevoegen-knop {
min-height: 56px;
padding: 1rem 1.5rem;
font-size: 1rem;
}
}
/* ============================================
PWA HEADER — extra ruimte bovenaan
============================================ */
@media (display-mode: standalone) {
.app-header {
/* Compenseer voor verloren statusbar */
position: sticky;
top: 0;
z-index: 100;
background: var(--kleur-zwart);
}
/* Op PWA: scroll-padding-top zodat sticky elements goed werken */
html {
scroll-padding-top: calc(60px + env(safe-area-inset-top));
}
/* Voortgangsbalk sticky: zit nu onder de app-header */
.voortgang-blok {
top: calc(60px + env(safe-area-inset-top));
}
/* PWA modus: ga niet vol-scherm-achter-de-notch (witte balk vermijden) */
body {
background: var(--kleur-zwart); /* Achter notch */
}
}
/* ============================================
IPHONE LANDSCAPE — extra safe-area zijkanten
============================================ */
@media (orientation: landscape) and (max-device-width: 932px) {
.app-header .header-inner {
padding-left: env(safe-area-inset-left, 1rem);
padding-right: env(safe-area-inset-right, 1rem);
}
}
/* ============================================
ANDROID PWA — bottom nav-bar
============================================ */
@supports (padding: env(safe-area-inset-bottom)) {
.toast {
bottom: max(1rem, calc(1rem + env(safe-area-inset-bottom)));
}
}
/* ============================================
TAP HIGHLIGHT verwijderen op iOS (lelijk blauw)
============================================ */
* {
-webkit-tap-highlight-color: transparent;
}
/* Maar wel feedback op interactieve elementen via :active */
button:active,
.btn-primary:active,
.btn-secundair:active,
.klant-kaart:active,
.gebruiker-kaart:active,
.actieplan-knop:active,
.stat-kaart:active {
transform: scale(0.97);
transition: transform 0.1s ease;
}
/* ============================================
SCROLLING — soepel op iOS
============================================ */
html,
body,
main,
.container,
.modal-inhoud {
-webkit-overflow-scrolling: touch;
}
/* Voorkom dat de hele pagina ongewenst meebeweegt bij overscrol */
body {
overscroll-behavior-y: none;
}
/* ============================================
FIX: gebruikersmenu op mobiel (PWA)
============================================ */
@media (max-width: 720px) {
.gebruiker-menu-wrap {
position: static;
}
/* Dropdown breder en gecentreerd op mobiel */
.gebruiker-dropdown {
position: fixed;
top: auto;
bottom: env(safe-area-inset-bottom, 0);
left: 0.5rem;
right: 0.5rem;
min-width: auto;
border-radius: 16px 16px 8px 8px;
max-height: 70vh;
overflow-y: auto;
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
animation: slideUp 0.25s ease;
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Verberg de naam in de header op kleine schermen */
.gebruiker-naam-mini { display: none; }
/* Maak gebruiker-knop kleiner */
.gebruiker-knop {
padding: 0.3rem;
}
.gebruiker-rol-badge {
display: none;
}
}
/* ============================================
FIX: form acties op mobiel/PWA — sticky bottom
============================================ */
@media (max-width: 720px) {
.form-acties {
position: sticky;
bottom: 0;
background: rgba(250, 250, 247, 0.96);
backdrop-filter: blur(10px);
padding: 1rem;
padding-bottom: max(1rem, env(safe-area-inset-bottom));
margin: 1rem -1.25rem -1.25rem;
border-top: 1px solid var(--kleur-grens);
z-index: 5;
display: flex;
gap: 0.5rem;
}
.form-acties button {
flex: 1;
}
/* PDF-knop label korter */
.form-acties .btn-primary span:not(.btn-icoon) {
font-size: 0.85rem;
}
}
/* ============================================
FIX: modal-acties altijd zichtbaar
============================================ */
.modal-acties {
position: sticky;
bottom: 0;
background: var(--kleur-oppervlak);
z-index: 2;
}
/* ============================================
FIX: nieuw-rapport-knop touch-target groter
============================================ */
@media (pointer: coarse) and (max-width: 720px) {
#btnNieuw {
min-height: 44px;
padding: 0.7rem 0.9rem;
}
#btnNieuw .btn-label {
display: none; /* op mobiel alleen plus-icoon */
}
#btnNieuw svg {
width: 20px;
height: 20px;
}
}
/* ============================================
FIX: rollen tabel op mobiel — kaartweergave
============================================ */
@media (max-width: 720px) {
.rollen-cel.rollen-acties {
display: flex;
justify-content: flex-end;
}
.rollen-cel.rollen-acties button {
flex: 1;
max-width: 200px;
}
}
/* ============================================
FOTO-GALERIJ touch-vriendelijker
============================================ */
@media (pointer: coarse) {
.foto-galerij img,
.detail-foto-grid img {
min-width: 90px;
min-height: 90px;
}
.foto-verwijder-knop {
min-width: 36px;
min-height: 36px;
font-size: 1.1rem;
}
}
/* ============================================
SOFT KEYBOARD fix — als toetsenbord open is
op iOS, zorg dat het input zichtbaar blijft
============================================ */
@supports (height: 100dvh) {
.login-overlay {
height: 100dvh;
}
.modal-overlay {
height: 100dvh;
}
}
/* ============================================
PWA splash screen achtergrond
============================================ */
@media (display-mode: standalone) {
/* Voorkom witte flash bij opstart */
html, body {
background: var(--kleur-zwart);
}
}
/* ============================================
PWA INSTALL BANNER (Android/Chrome)
============================================ */
.install-banner {
position: fixed;
bottom: calc(max(1rem, var(--safe-bottom)));
left: calc(max(1rem, var(--safe-left)));
right: calc(max(1rem, var(--safe-right)));
z-index: 200;
animation: slideUp 0.4s ease;
}
.install-banner-inhoud {
background: linear-gradient(135deg, #010202, #1a1a1a);
color: var(--kleur-wit);
border-radius: 16px;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
gap: 0.85rem;
max-width: 560px;
margin: 0 auto;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(191, 134, 59, 0.25);
}
.install-banner-icoon {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--kleur-primair);
color: var(--kleur-wit);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.install-banner-icoon svg { width: 22px; height: 22px; }
.install-banner-tekst { flex: 1; min-width: 0; }
.install-banner-titel {
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 0.1rem;
}
.install-banner-sub {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.65);
}
.install-banner-knop {
background: var(--kleur-primair);
color: var(--kleur-wit);
border: none;
padding: 0.65rem 1.25rem;
border-radius: 8px;
font-family: inherit;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
min-height: 44px;
flex-shrink: 0;
}
.install-banner-knop:hover {
background: var(--kleur-primair-donker);
}
.install-banner-sluit {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.5);
font-size: 1.5rem;
width: 32px;
height: 32px;
cursor: pointer;
padding: 0;
flex-shrink: 0;
line-height: 1;
}
.install-banner-sluit:hover { color: white; }
@keyframes slideUp {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* ============================================
iOS INSTALL HINT
============================================ */
.ios-install-hint {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 250;
display: flex;
align-items: flex-end;
padding: 1rem;
padding-bottom: max(1rem, var(--safe-bottom));
backdrop-filter: blur(4px);
animation: fadeIn 0.3s ease;
}
.ios-install-paneel {
background: var(--kleur-wit);
border-radius: 20px;
padding: 2rem 1.5rem 1.5rem;
max-width: 440px;
width: 100%;
margin: 0 auto;
text-align: center;
position: relative;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
animation: slideUp 0.4s ease;
}
.ios-install-sluit {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: transparent;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
color: var(--kleur-tekst-zacht);
font-size: 1.4rem;
cursor: pointer;
line-height: 1;
}
.ios-install-sluit:hover {
background: var(--kleur-oppervlak);
color: var(--kleur-zwart);
}
.ios-install-logo {
width: 56px;
height: 56px;
margin: 0 auto 1rem;
display: block;
}
.ios-install-paneel h3 {
font-family: var(--font-display);
font-size: 1.3rem;
color: var(--kleur-zwart);
margin: 0 0 0.85rem;
}
.ios-install-paneel p {
color: var(--kleur-tekst);
font-size: 0.95rem;
line-height: 1.5;
margin: 0 0 1.5rem;
}
.ios-install-paneel p strong {
color: var(--kleur-zwart);
font-weight: 700;
}
.ios-install-paneel .btn-secundair {
width: 100%;
min-height: 44px;
}
/* Klein scherm */
@media (max-width: 480px) {
.install-banner-inhoud {
padding: 0.85rem 1rem;
gap: 0.65rem;
}
.install-banner-titel { font-size: 0.88rem; }
.install-banner-sub { font-size: 0.72rem; }
.install-banner-knop { padding: 0.55rem 0.9rem; font-size: 0.8rem; }
}
/* ============================================
AUTOMATISCHE TOELICHTING bij soorten
============================================ */
.toelichting-blok {
margin-top: 1rem;
padding: 1.1rem 1.25rem;
background: linear-gradient(135deg, rgba(191, 134, 59, 0.05), rgba(191, 134, 59, 0.02));
border: 1px solid rgba(191, 134, 59, 0.25);
border-left: 3px solid var(--kleur-primair);
border-radius: var(--radius-klein);
}
.toelichting-blok-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.25rem;
flex-wrap: wrap;
}
.toelichting-blok-header .veld-label {
margin: 0;
}
.toelichting-auto-melding {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: rgba(74, 124, 58, 0.1);
color: #3a6a2a;
padding: 0.25rem 0.65rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.toelichting-auto-melding svg {
width: 12px;
height: 12px;
}
.soort-toelichting-textarea {
width: 100%;
min-height: 120px;
padding: 0.85rem 1rem;
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
font-family: inherit;
font-size: 0.92rem;
color: var(--kleur-tekst);
line-height: 1.55;
resize: vertical;
background: var(--kleur-wit);
transition: border-color 0.15s ease;
}
.soort-toelichting-textarea:focus {
outline: none;
border-color: var(--kleur-primair);
box-shadow: 0 0 0 2px rgba(191, 134, 59, 0.15);
}
/* ============================================
GROTERE FOTO'S met bijschrift
============================================ */
.foto-galerij {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
.foto-thumb.foto-thumb-groot {
aspect-ratio: auto;
width: 100%;
border-radius: var(--radius-klein);
overflow: hidden;
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens);
position: relative;
display: flex;
flex-direction: column;
transition: all 0.2s ease;
}
.foto-thumb.foto-thumb-groot:hover {
box-shadow: var(--schaduw-medium);
border-color: var(--kleur-primair);
}
.foto-thumb.foto-thumb-groot img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
cursor: zoom-in;
display: block;
}
.foto-thumb.foto-thumb-groot .foto-verwijder {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 32px;
height: 32px;
background: rgba(0, 0, 0, 0.7);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease;
z-index: 2;
}
.foto-thumb.foto-thumb-groot .foto-verwijder:hover {
background: var(--kleur-gevaar);
}
.foto-thumb.foto-thumb-groot .foto-verwijder svg {
width: 16px;
height: 16px;
}
.foto-bijschrift {
width: 100%;
padding: 0.6rem 0.85rem;
border: none;
border-top: 1px solid var(--kleur-grens);
background: var(--kleur-wit);
font-family: inherit;
font-size: 0.82rem;
color: var(--kleur-tekst);
font-style: italic;
}
.foto-bijschrift:focus {
outline: none;
background: rgba(191, 134, 59, 0.05);
}
.foto-bijschrift::placeholder {
color: var(--kleur-tekst-hint);
font-style: normal;
}
/* Mobiel: 1 foto per rij */
@media (max-width: 600px) {
.foto-galerij {
grid-template-columns: 1fr;
}
}
/* ============================================
COÖRDINATEN-BADGE bij adres-veld
============================================ */
.coordinaten-badge {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.65rem;
padding: 0.6rem 0.9rem;
background: linear-gradient(135deg, rgba(191, 134, 59, 0.08), rgba(191, 134, 59, 0.03));
border: 1px solid rgba(191, 134, 59, 0.25);
border-radius: var(--radius-klein);
font-size: 0.82rem;
color: var(--kleur-primair-donker);
flex-wrap: wrap;
}
.coordinaten-badge svg {
color: var(--kleur-primair);
}
.coordinaten-badge span {
flex: 1;
font-family: 'SF Mono', Consolas, monospace;
font-size: 0.8rem;
color: var(--kleur-tekst);
}
.coordinaten-link {
color: var(--kleur-primair-donker);
font-weight: 700;
text-decoration: none;
font-size: 0.78rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
transition: background 0.15s ease;
}
.coordinaten-link:hover {
background: rgba(191, 134, 59, 0.1);
text-decoration: underline;
}
/* ============================================
PDF-INSTELLINGEN SECTIE
============================================ */
.pdf-instellingen-sectie {
background: linear-gradient(135deg, rgba(74, 96, 74, 0.04), rgba(74, 96, 74, 0.01));
border: 1px solid rgba(74, 96, 74, 0.2);
border-left: 3px solid #4a604a;
}
.pdf-instellingen-sectie .sectie-titel {
color: #2d4a2d;
}
.pdf-instellingen-sectie .sectie-nummer {
background: #4a604a !important;
color: white !important;
}
.pdf-toggle {
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
padding: 1.25rem;
margin-top: 1rem;
transition: border-color 0.15s ease;
}
.pdf-toggle:hover {
border-color: rgba(74, 96, 74, 0.4);
}
.pdf-toggle-label {
display: flex;
align-items: flex-start;
gap: 0.85rem;
cursor: pointer;
user-select: none;
}
.pdf-toggle-label input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.pdf-toggle-slider {
position: relative;
width: 44px;
height: 24px;
background: var(--kleur-grens);
border-radius: 99px;
flex-shrink: 0;
transition: background 0.2s ease;
margin-top: 2px;
}
.pdf-toggle-slider::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
transition: transform 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.pdf-toggle-label input:checked + .pdf-toggle-slider {
background: #4a604a;
}
.pdf-toggle-label input:checked + .pdf-toggle-slider::before {
transform: translateX(20px);
}
.pdf-toggle-tekst {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.pdf-toggle-tekst strong {
color: var(--kleur-zwart);
font-size: 0.95rem;
font-weight: 700;
}
.pdf-toggle-sub {
color: var(--kleur-tekst-zacht);
font-size: 0.82rem;
line-height: 1.5;
}
.pdf-instellingen-info {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin-top: 1rem;
padding: 0.85rem 1rem;
background: rgba(74, 96, 74, 0.06);
border-radius: var(--radius-klein);
font-size: 0.82rem;
color: var(--kleur-tekst);
line-height: 1.5;
}
.pdf-instellingen-info svg {
width: 16px;
height: 16px;
color: #4a604a;
flex-shrink: 0;
margin-top: 1px;
}
/* ============================================
RELATIES VIEW
============================================ */
.relaties-container {
max-width: 1100px;
}
.relaties-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.relaties-titel-blok {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.relaties-icoon {
width: 56px;
height: 56px;
border-radius: 12px;
background: linear-gradient(135deg, var(--kleur-primair), var(--kleur-primair-donker));
color: var(--kleur-wit);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: var(--schaduw-medium);
}
.relaties-icoon svg { width: 28px; height: 28px; }
.relaties-acties-top {
display: flex;
gap: 0.65rem;
flex-wrap: wrap;
}
/* Zoekbalk */
.relaties-zoek-wrap {
position: relative;
margin-bottom: 1.5rem;
}
.relaties-zoek-icoon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--kleur-tekst-zacht);
pointer-events: none;
}
.relaties-zoek-input {
width: 100%;
padding: 0.85rem 1rem 0.85rem 2.85rem;
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
background: var(--kleur-wit);
font-family: inherit;
font-size: 0.95rem;
transition: border-color 0.15s ease;
}
.relaties-zoek-input:focus {
outline: none;
border-color: var(--kleur-primair);
box-shadow: 0 0 0 2px rgba(191, 134, 59, 0.15);
}
/* Klantenkaarten grid */
.klanten-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.klant-kaart {
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 1.25rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.klant-kaart:hover {
border-color: var(--kleur-primair);
box-shadow: var(--schaduw-medium);
transform: translateY(-2px);
}
.klant-kaart-header {
display: flex;
gap: 0.85rem;
align-items: center;
margin-bottom: 0.5rem;
}
.klant-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--kleur-primair), var(--kleur-primair-donker));
color: var(--kleur-wit);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
flex-shrink: 0;
}
.klant-avatar-groot {
width: 64px;
height: 64px;
font-size: 1.4rem;
}
.klant-meta {
flex: 1;
min-width: 0;
}
.klant-naam {
font-weight: 700;
color: var(--kleur-zwart);
font-size: 1rem;
line-height: 1.2;
}
.klant-bedrijf {
color: var(--kleur-tekst-zacht);
font-size: 0.82rem;
margin-top: 0.15rem;
}
.klant-veld {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.82rem;
color: var(--kleur-tekst);
}
.klant-veld svg {
width: 14px;
height: 14px;
color: var(--kleur-tekst-zacht);
flex-shrink: 0;
}
.klant-veld span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.klant-kaart-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0.85rem;
margin-top: 0.5rem;
border-top: 1px solid var(--kleur-grens-mat);
}
.klant-stat {
font-size: 0.82rem;
color: var(--kleur-tekst-zacht);
}
.klant-stat strong {
color: var(--kleur-zwart);
font-size: 0.95rem;
}
.klant-open-knop {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.45rem 0.75rem;
background: transparent;
border: 1px solid var(--kleur-grens);
border-radius: 6px;
color: var(--kleur-primair-donker);
font-family: inherit;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
}
.klant-open-knop:hover {
background: var(--kleur-primair);
color: var(--kleur-wit);
border-color: var(--kleur-primair);
}
/* Klant detail */
.klant-detail-header {
margin-bottom: 1rem;
}
.klant-detail-card {
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 2rem;
margin-bottom: 1.5rem;
}
.klant-detail-top {
display: flex;
gap: 1.5rem;
align-items: flex-start;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.klant-detail-meta {
flex: 1;
min-width: 200px;
}
.klant-detail-naam {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 700;
color: var(--kleur-zwart);
margin: 0 0 0.25rem;
line-height: 1.1;
}
.klant-detail-bedrijf {
color: var(--kleur-tekst-zacht);
font-size: 1rem;
margin-bottom: 0.85rem;
}
.klant-detail-pills {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.klant-pill {
background: var(--kleur-oppervlak);
padding: 0.35rem 0.85rem;
border-radius: 999px;
font-size: 0.78rem;
color: var(--kleur-tekst);
}
.klant-pill strong {
color: var(--kleur-zwart);
margin-right: 0.25rem;
}
.klant-detail-acties {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.klant-detail-gegevens {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
padding-top: 1.5rem;
border-top: 1px solid var(--kleur-grens-mat);
}
.klant-gegeven {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.klant-gegeven label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--kleur-tekst-zacht);
font-weight: 700;
}
.klant-gegeven a, .klant-gegeven span {
color: var(--kleur-zwart);
font-size: 0.92rem;
text-decoration: none;
}
.klant-gegeven a:hover {
color: var(--kleur-primair-donker);
text-decoration: underline;
}
.klant-notities {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--kleur-grens-mat);
}
.klant-notities label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--kleur-tekst-zacht);
font-weight: 700;
display: block;
margin-bottom: 0.4rem;
}
.klant-notities p {
margin: 0;
line-height: 1.6;
color: var(--kleur-tekst);
}
/* Relaties blokken (afspraken/rapporten) */
.relaties-blok {
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.relaties-blok-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.25rem;
flex-wrap: wrap;
gap: 0.65rem;
}
.relaties-blok-header h2 {
font-family: var(--font-display);
font-size: 1.3rem;
color: var(--kleur-zwart);
margin: 0;
display: flex;
align-items: center;
gap: 0.65rem;
}
.btn-klein {
padding: 0.5rem 0.9rem !important;
font-size: 0.85rem !important;
}
.relaties-sub-titel {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--kleur-tekst-zacht);
margin: 1.25rem 0 0.65rem;
font-weight: 700;
}
.relaties-sub-titel:first-child { margin-top: 0; }
/* Afspraken */
.afspraken-lijst {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.afspraak-kaart {
display: flex;
gap: 1rem;
align-items: center;
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens-mat);
border-radius: var(--radius-klein);
padding: 0.85rem 1rem;
transition: all 0.15s ease;
}
.afspraak-kaart:hover {
border-color: var(--kleur-primair);
background: var(--kleur-wit);
}
.afspraak-kaart.voltooid {
opacity: 0.7;
background: rgba(74, 124, 58, 0.04);
}
.afspraak-kaart.overdue {
border-left: 3px solid var(--kleur-gevaar);
}
.afspraak-datum {
width: 60px;
text-align: center;
flex-shrink: 0;
padding: 0.65rem;
background: var(--kleur-wit);
border-radius: 6px;
border: 1px solid var(--kleur-grens);
}
.afspraak-dag {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
color: var(--kleur-zwart);
line-height: 1;
}
.afspraak-maand {
font-size: 0.68rem;
text-transform: uppercase;
color: var(--kleur-tekst-zacht);
font-weight: 700;
margin-top: 0.2rem;
}
.afspraak-inhoud {
flex: 1;
min-width: 0;
}
.afspraak-titel {
font-weight: 700;
color: var(--kleur-zwart);
margin-bottom: 0.2rem;
}
.afspraak-meta {
display: flex;
gap: 0.5rem;
font-size: 0.82rem;
color: var(--kleur-tekst-zacht);
flex-wrap: wrap;
}
.afspraak-badge {
background: rgba(74, 124, 58, 0.12);
color: #3a6a2a;
padding: 0.15rem 0.5rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
}
.afspraak-notitie {
font-size: 0.82rem;
color: var(--kleur-tekst);
margin-top: 0.35rem;
line-height: 1.4;
}
.afspraak-acties {
display: flex;
gap: 0.25rem;
flex-shrink: 0;
}
.afspraak-knop {
width: 32px;
height: 32px;
background: transparent;
border: 1px solid var(--kleur-grens);
border-radius: 6px;
color: var(--kleur-tekst-zacht);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.afspraak-knop:hover {
color: var(--kleur-primair-donker);
border-color: var(--kleur-primair);
}
.afspraak-knop.afspraak-voltooi:hover {
color: #3a6a2a;
border-color: #4a7c3a;
background: rgba(74, 124, 58, 0.08);
}
.afspraak-knop.afspraak-verwijder:hover {
color: var(--kleur-gevaar);
border-color: var(--kleur-gevaar);
background: rgba(184, 65, 42, 0.06);
}
/* Rapporten regel in klantdetail */
.klant-rapporten-lijst {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.klant-rapport-regel {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.85rem 1rem;
background: var(--kleur-oppervlak);
border-radius: var(--radius-klein);
cursor: pointer;
transition: all 0.15s ease;
}
.klant-rapport-regel:hover {
background: var(--kleur-wit);
box-shadow: var(--schaduw-licht);
}
.rapport-icoon-mini {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--kleur-primair);
color: var(--kleur-wit);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rapport-icoon-mini svg { width: 18px; height: 18px; }
.rapport-info {
flex: 1;
min-width: 0;
}
.rapport-info-top {
display: flex;
gap: 0.65rem;
align-items: center;
margin-bottom: 0.15rem;
}
.rapport-info-locatie {
font-size: 0.82rem;
color: var(--kleur-tekst-zacht);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rapport-info-datum {
font-size: 0.82rem;
color: var(--kleur-tekst-zacht);
flex-shrink: 0;
}
.meer-link {
text-align: center;
color: var(--kleur-tekst-zacht);
font-size: 0.82rem;
padding: 0.5rem;
font-style: italic;
}
/* Lege staat */
.lege-staat-groot {
text-align: center;
padding: 4rem 1rem;
}
.lege-staat-icoon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
border-radius: 50%;
background: var(--kleur-oppervlak);
color: var(--kleur-tekst-zacht);
display: inline-flex;
align-items: center;
justify-content: center;
}
.lege-staat-icoon svg { width: 40px; height: 40px; }
.lege-staat-groot h2 {
font-family: var(--font-display);
color: var(--kleur-zwart);
margin-bottom: 0.5rem;
}
.lege-staat-groot p {
color: var(--kleur-tekst-zacht);
margin-bottom: 2rem;
}
.lege-staat-mini {
text-align: center;
padding: 2rem 1rem;
color: var(--kleur-tekst-zacht);
font-style: italic;
}
/* Modal grid form */
.modal-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.modal-form-grid .veld-vol {
grid-column: 1 / -1;
}
.modal-groot {
max-width: 640px;
}
@media (max-width: 600px) {
.modal-form-grid {
grid-template-columns: 1fr;
}
}
/* ============================================
MAIL-KEUZE MODAL
============================================ */
.modal-keuze {
max-width: 580px;
}
.mail-keuze-intro {
color: var(--kleur-tekst-zacht);
margin: 0 0 1.25rem;
font-size: 0.95rem;
}
.mail-keuze-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.mail-keuze-kaart {
background: var(--kleur-wit);
border: 2px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 1.5rem 1.25rem;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.mail-keuze-kaart:hover {
border-color: var(--kleur-primair);
background: var(--kleur-oppervlak);
transform: translateY(-2px);
box-shadow: var(--schaduw-medium);
}
.mail-keuze-icoon {
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--kleur-zwart);
color: var(--kleur-wit);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
}
.mail-keuze-icoon.goud {
background: linear-gradient(135deg, var(--kleur-primair), var(--kleur-primair-donker));
}
.mail-keuze-icoon svg { width: 26px; height: 26px; }
.mail-keuze-titel {
font-family: var(--font-display);
font-weight: 700;
color: var(--kleur-zwart);
font-size: 1.1rem;
}
.mail-keuze-sub {
font-size: 0.82rem;
color: var(--kleur-tekst-zacht);
line-height: 1.45;
}
@media (max-width: 540px) {
.mail-keuze-grid {
grid-template-columns: 1fr;
}
}
/* ============================================
FACTUUR MODAL
============================================ */
.modal-factuur {
max-width: 780px;
}
.factuur-klant-blok {
background: var(--kleur-oppervlak);
border-radius: var(--radius-klein);
padding: 1rem 1.25rem;
margin-bottom: 1.25rem;
line-height: 1.6;
font-size: 0.92rem;
color: var(--kleur-tekst);
}
.factuur-klant-blok strong {
color: var(--kleur-zwart);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.factuur-klant-email {
margin-top: 0.5rem;
color: var(--kleur-primair-donker);
font-size: 0.85rem;
}
.factuur-geen-email {
margin-top: 0.5rem;
color: var(--kleur-gevaar);
font-size: 0.82rem;
font-weight: 600;
}
.factuur-sectie-titel {
font-family: var(--font-display);
color: var(--kleur-zwart);
margin: 1.5rem 0 0.85rem;
font-size: 1rem;
font-weight: 700;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--kleur-grens-mat);
}
.factuur-regels {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
/* Geen losse kolomkoppen meer — labels staan in elke regel zelf */
.factuur-regels-kop {
display: none;
}
/* Elke factuurregel = een nette kaart */
.factuur-regel {
position: relative;
display: grid;
grid-template-columns: 110px 130px 1fr;
gap: 0.7rem 0.65rem;
align-items: end;
padding: 0.9rem;
padding-right: 2.6rem; /* ruimte voor verwijderknop */
background: var(--kleur-oppervlak, #faf8f3);
border: 1px solid var(--kleur-grens-mat, #e8e4db);
border-radius: 12px;
}
/* Labeltekst boven elk veld — altijd zichtbaar */
.fr-label {
display: block;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--kleur-tekst-zacht);
margin-bottom: 0.3rem;
}
.fr-veld { min-width: 0; }
/* Omschrijving = volle breedte bovenaan */
.fr-oms { grid-column: 1 / -1; }
/* Aantal links-onder, prijs ernaast, totaal rechts */
.fr-aantal-wrap { grid-column: 1; }
.fr-prijs-wrap { grid-column: 2; }
/* Totaal rechts-onder, duidelijk in een wit balkje */
.fr-totaal-wrap {
grid-column: 3;
display: flex;
flex-direction: column;
}
.fr-totaal-wrap .factuur-regel-totaal {
background: var(--kleur-wit, #fff);
border: 1px solid var(--kleur-grens, #ddd6c8);
border-radius: 8px;
padding: 0.55rem 0.7rem;
font-weight: 700;
color: var(--kleur-primair-donker, #9C6C2A);
text-align: right;
font-size: 0.95rem;
white-space: nowrap;
}
.factuur-regel input {
width: 100%;
padding: 0.6rem 0.7rem !important;
border: 1px solid var(--kleur-grens);
border-radius: 8px;
font-family: inherit;
font-size: 0.92rem;
box-sizing: border-box;
background: var(--kleur-wit, #fff);
}
.factuur-regel input:focus {
outline: none;
border-color: var(--kleur-primair);
box-shadow: 0 0 0 3px rgba(191, 134, 59, 0.15);
}
.factuur-aantal, .factuur-prijs {
text-align: right;
}
/* Verwijderknop netjes rechtsboven in de kaart */
.factuur-regel-verwijder {
position: absolute;
top: 0.6rem;
right: 0.6rem;
width: 30px;
height: 30px;
background: var(--kleur-wit, #fff);
border: 1px solid var(--kleur-grens);
border-radius: 8px;
color: var(--kleur-tekst-zacht);
cursor: pointer;
font-size: 1.15rem;
line-height: 1;
flex-shrink: 0;
transition: all 0.15s ease;
}
.factuur-regel-verwijder:hover {
color: var(--kleur-gevaar);
border-color: var(--kleur-gevaar);
background: rgba(184, 65, 42, 0.06);
}
.factuur-totalen {
background: var(--kleur-oppervlak);
border-radius: 12px;
padding: 1.1rem 1.35rem;
margin-top: 1.5rem;
}
.totalen-rij {
display: flex;
justify-content: space-between;
padding: 0.4rem 0;
font-size: 0.95rem;
color: var(--kleur-tekst);
}
.totalen-rij-totaal {
padding-top: 0.85rem;
margin-top: 0.5rem;
border-top: 2px solid var(--kleur-primair);
font-size: 1.25rem;
color: var(--kleur-zwart);
}
.totalen-rij-totaal strong {
color: var(--kleur-primair-donker);
font-family: var(--font-display);
}
.factuur-instellingen-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.factuur-instellingen-grid .veld-vol {
grid-column: 1 / -1;
}
/* Rapport-mail-knop in relaties */
.rapport-mail-knop {
width: 36px;
height: 36px;
background: transparent;
border: 1px solid var(--kleur-grens);
border-radius: 6px;
color: var(--kleur-primair-donker);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
flex-shrink: 0;
}
.rapport-mail-knop:hover {
background: var(--kleur-primair);
color: var(--kleur-wit);
border-color: var(--kleur-primair);
}
/* ============================================
TARIEVEN-PAGINA (admin tab)
============================================ */
.tarieven-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-bottom: 0;
}
.tarief-kaart {
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
padding: 1.25rem;
}
.tarief-label {
display: block;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--kleur-tekst-zacht);
margin-bottom: 0.5rem;
}
.tarief-input-wrap {
display: flex;
align-items: center;
gap: 0.25rem;
margin-bottom: 0.5rem;
}
.tarief-prefix, .tarief-suffix {
color: var(--kleur-tekst-zacht);
font-weight: 700;
font-size: 0.95rem;
}
.tarief-input-wrap input {
flex: 1;
padding: 0.7rem 0.85rem !important;
border: 1px solid var(--kleur-grens);
border-radius: 6px;
font-family: inherit;
font-size: 1.1rem;
font-weight: 700;
color: var(--kleur-zwart);
background: var(--kleur-wit);
min-width: 0;
}
.tarief-input-wrap input:focus {
outline: none;
border-color: var(--kleur-primair);
}
.tarief-toelichting {
color: var(--kleur-tekst-zacht);
font-size: 0.75rem;
line-height: 1.4;
}
/* Facturen lijst in admin */
.facturen-lijst {
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
overflow: hidden;
}
.factuur-rij {
display: grid;
grid-template-columns: 130px 1fr 90px 110px 100px;
gap: 1rem;
padding: 0.85rem 1.25rem;
border-bottom: 1px solid var(--kleur-grens-mat);
font-size: 0.9rem;
align-items: center;
transition: background 0.15s ease;
}
.factuur-rij:last-child { border-bottom: none; }
.factuur-rij:hover { background: var(--kleur-oppervlak); }
.factuur-rij-bedrag {
text-align: right;
font-weight: 700;
color: var(--kleur-zwart);
}
@media (max-width: 720px) {
.factuur-rij {
grid-template-columns: 1fr;
gap: 0.25rem;
}
}
/* ============================================
BEDRIJFSGEGEVENS GRID
============================================ */
.bedrijf-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.bedrijf-grid .veld {
margin: 0;
}
.bedrijf-grid input {
padding: 0.7rem 0.85rem !important;
border: 1px solid var(--kleur-grens);
border-radius: 6px;
font-family: inherit;
font-size: 0.95rem;
width: 100%;
box-sizing: border-box;
}
.bedrijf-grid input:focus {
outline: none;
border-color: var(--kleur-primair);
box-shadow: 0 0 0 2px rgba(191, 134, 59, 0.15);
}
/* ============================================
MOBIEL-VRIENDELIJK — alle nieuwe modals en lijsten
============================================ */
@media (max-width: 720px) {
/* Eigenaar tabs scrollbaar */
.eigenaar-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-bottom: 1.25rem;
padding-bottom: 1px;
}
.eigenaar-tabs::-webkit-scrollbar { display: none; }
.eigenaar-tab {
padding: 0.85rem 1rem !important;
font-size: 0.85rem !important;
white-space: nowrap;
min-width: max-content;
}
/* Tarieven grid: 1 kolom op telefoon */
.tarieven-grid,
.bedrijf-grid {
grid-template-columns: 1fr !important;
}
.tarief-kaart {
padding: 1rem !important;
}
/* Modals: full-screen op telefoon */
.modal-factuur,
.modal-keuze,
.modal-groot {
max-width: 100% !important;
max-height: calc(100vh - 2rem);
width: calc(100vw - 1rem) !important;
margin: 0.5rem auto !important;
}
.modal-header {
padding: 1rem 1.25rem !important;
}
.modal-header h2 {
font-size: 1.1rem !important;
}
.modal-inhoud {
padding: 1.25rem !important;
max-height: calc(100vh - 200px);
overflow-y: auto;
}
.modal-acties {
flex-direction: column-reverse !important;
gap: 0.5rem !important;
padding: 1rem 1.25rem !important;
}
.modal-acties button {
width: 100% !important;
min-height: 48px;
justify-content: center;
}
/* Modal form: 1 kolom */
.modal-form-grid,
.factuur-instellingen-grid {
grid-template-columns: 1fr !important;
}
/* Mail-keuze: 1 kolom */
.mail-keuze-grid {
grid-template-columns: 1fr !important;
gap: 0.75rem;
}
.mail-keuze-kaart {
padding: 1.25rem 1rem !important;
flex-direction: row !important;
text-align: left !important;
gap: 1rem !important;
align-items: center;
}
.mail-keuze-icoon {
width: 48px !important;
height: 48px !important;
margin-bottom: 0 !important;
flex-shrink: 0;
}
.mail-keuze-titel {
font-size: 1rem !important;
}
.mail-keuze-sub {
font-size: 0.78rem !important;
}
/* Factuurregels op telefoon — de kaart-layout werkt al,
hier alleen kleine telefoon-tweaks */
.factuur-regel {
grid-template-columns: 1fr 1fr; /* aantal + prijs naast elkaar */
padding: 0.85rem;
padding-right: 0.85rem;
}
/* Op telefoon: totaal onderaan over de volle breedte */
.fr-totaal-wrap {
grid-column: 1 / -1;
flex-direction: row !important;
justify-content: space-between;
align-items: center;
background: var(--kleur-wit, #fff);
border: 1px solid var(--kleur-grens, #ddd6c8);
border-radius: 8px;
padding: 0.5rem 0.75rem;
}
.fr-totaal-wrap .fr-label {
margin-bottom: 0;
}
.fr-totaal-wrap .factuur-regel-totaal {
background: transparent;
border: none;
padding: 0;
font-size: 1.05rem;
}
/* Verwijderknop krijgt eigen plek onderin (niet over velden heen) */
.factuur-regel {
padding-bottom: 0.85rem;
}
.factuur-regel input {
font-size: 16px !important; /* voorkomt inzoomen op iOS */
}
/* Facturen lijst */
.factuur-rij {
grid-template-columns: 1fr !important;
gap: 0.4rem !important;
padding: 1rem !important;
}
.factuur-rij-bedrag {
text-align: left !important;
font-size: 1.1rem !important;
}
.factuur-rij-nr,
.factuur-rij-klant,
.factuur-rij-datum,
.factuur-rij-status {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Voorvoegsels voor mobiele tabel */
.factuur-rij-klant::before { content: 'Klant: '; color: var(--kleur-tekst-zacht); font-size: 0.78rem; }
.factuur-rij-datum::before { content: 'Datum: '; color: var(--kleur-tekst-zacht); font-size: 0.78rem; }
.factuur-rij-bedrag::before { content: 'Bedrag: '; color: var(--kleur-tekst-zacht); font-size: 0.78rem; }
.factuur-rij-status::before { content: 'Status: '; color: var(--kleur-tekst-zacht); font-size: 0.78rem; }
/* Klant-detail header in relaties */
.klant-detail-top {
flex-direction: column;
align-items: stretch !important;
}
.klant-detail-acties {
width: 100%;
}
.klant-detail-acties button {
flex: 1;
justify-content: center;
}
/* Klanten grid: 1 kolom */
.klanten-grid {
grid-template-columns: 1fr !important;
}
/* Klant-rapport regel met mail-knop */
.klant-rapport-regel {
flex-wrap: wrap;
position: relative;
}
.rapport-info-datum {
font-size: 0.72rem !important;
margin-left: auto;
margin-right: 40px;
}
.rapport-mail-knop {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
}
/* Afspraken-kaarten compact */
.afspraak-kaart {
flex-wrap: wrap;
padding: 0.85rem;
gap: 0.75rem;
}
.afspraak-datum {
width: 50px;
padding: 0.5rem;
}
.afspraak-dag { font-size: 1.2rem; }
.afspraak-maand { font-size: 0.62rem; }
.afspraak-inhoud {
flex: 1;
min-width: 0;
}
.afspraak-titel { font-size: 0.92rem; }
.afspraak-meta { font-size: 0.78rem; }
.afspraak-acties {
order: 3;
width: 100%;
justify-content: flex-end;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--kleur-grens-mat);
}
/* Stats grid responsief */
.grote-stats-grid {
grid-template-columns: 1fr 1fr !important;
gap: 0.65rem !important;
}
.grote-stat {
padding: 1rem !important;
}
.grote-stat-cijfer {
font-size: 1.6rem !important;
}
/* Relaties header */
.relaties-header {
flex-direction: column;
align-items: stretch;
}
.relaties-acties-top {
width: 100%;
}
.relaties-acties-top button {
flex: 1;
justify-content: center;
}
/* Eigenaar header */
.eigenaar-header {
flex-direction: column;
align-items: stretch;
}
/* Rollen tabel — mobiele kaart-stijl */
.rollen-rij {
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens) !important;
border-radius: 8px;
margin-bottom: 0.5rem;
padding: 1rem !important;
}
/* Eigenaar sectie padding */
.eigenaar-sectie {
padding: 1.25rem !important;
}
}
@media (max-width: 480px) {
/* Heel klein scherm — extra compact */
.klant-detail-card {
padding: 1.25rem !important;
}
.klant-detail-naam {
font-size: 1.5rem !important;
}
.klant-detail-pills {
gap: 0.4rem;
}
.klant-pill {
font-size: 0.72rem !important;
padding: 0.25rem 0.65rem !important;
}
.grote-stats-grid {
grid-template-columns: 1fr !important;
}
/* Status-pil compacter */
.status-pil {
font-size: 0.7rem !important;
padding: 0.2rem 0.5rem !important;
}
/* Lege staten kleiner */
.lege-staat-groot {
padding: 2rem 1rem !important;
}
.lege-staat-icoon {
width: 60px !important;
height: 60px !important;
}
.lege-staat-icoon svg {
width: 30px !important;
height: 30px !important;
}
/* Header buttons compact */
.btn-primary, .btn-secundair, .btn-gevaar {
font-size: 0.85rem;
}
}
/* ============================================
OFFLINE INDICATOR — rechtsonder, klikbaar
============================================ */
.offline-indicator {
position: fixed;
bottom: 1.25rem;
right: 1.25rem;
z-index: 9000;
font-size: 0.85rem;
}
/* Safe-area op iOS PWA */
@supports (padding: max(0px)) {
.offline-indicator {
bottom: max(1.25rem, env(safe-area-inset-bottom));
right: max(1.25rem, env(safe-area-inset-right));
}
}
.offline-indicator-knop {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.9rem;
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: 999px;
cursor: pointer;
box-shadow: var(--schaduw-medium);
font-weight: 600;
color: var(--kleur-tekst);
transition: all 0.15s ease;
user-select: none;
}
.offline-indicator-knop:hover {
transform: translateY(-1px);
box-shadow: var(--schaduw-groot, 0 6px 20px rgba(0,0,0,0.15));
}
.offline-indicator-puntje {
width: 9px;
height: 9px;
border-radius: 50%;
background: #6b6b66;
flex-shrink: 0;
position: relative;
}
/* Online — groen met pulse */
.offline-indicator-knop.online .offline-indicator-puntje {
background: #4a7c3a;
box-shadow: 0 0 0 0 rgba(74, 124, 58, 0.6);
animation: pulse-groen 2s infinite;
}
@keyframes pulse-groen {
0% { box-shadow: 0 0 0 0 rgba(74, 124, 58, 0.5); }
70% { box-shadow: 0 0 0 6px rgba(74, 124, 58, 0); }
100% { box-shadow: 0 0 0 0 rgba(74, 124, 58, 0); }
}
.offline-indicator-knop.online .offline-indicator-tekst {
color: #2d5a1d;
}
/* Pending — oranje pulse */
.offline-indicator-knop.pending .offline-indicator-puntje {
background: #d97706;
animation: pulse-oranje 1s infinite;
}
@keyframes pulse-oranje {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
}
.offline-indicator-knop.pending .offline-indicator-tekst {
color: #92590a;
}
/* Offline — rood */
.offline-indicator-knop.offline {
background: #fef2f2;
border-color: #dc2626;
}
.offline-indicator-knop.offline .offline-indicator-puntje {
background: #dc2626;
}
.offline-indicator-knop.offline .offline-indicator-tekst {
color: #991b1b;
}
/* Tooltip met sync-details */
.offline-indicator-tooltip {
position: absolute;
bottom: calc(100% + 0.75rem);
right: 0;
width: 320px;
max-width: calc(100vw - 2.5rem);
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
padding: 1.25rem;
transform-origin: bottom right;
animation: tooltip-in 0.2s ease;
}
.offline-indicator-tooltip.verborgen {
display: none;
}
@keyframes tooltip-in {
from { opacity: 0; transform: scale(0.95) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.tooltip-titel {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--kleur-zwart);
margin-bottom: 0.85rem;
padding-bottom: 0.65rem;
border-bottom: 1px solid var(--kleur-grens-mat);
}
.tooltip-status {
background: var(--kleur-oppervlak);
border-radius: var(--radius-klein);
padding: 0.75rem 0.9rem;
margin-bottom: 0.85rem;
}
.tooltip-status.online {
background: rgba(74, 124, 58, 0.08);
border-left: 3px solid #4a7c3a;
}
.tooltip-status.pending {
background: rgba(217, 119, 6, 0.08);
border-left: 3px solid #d97706;
}
.tooltip-status.offline {
background: rgba(220, 38, 38, 0.06);
border-left: 3px solid #dc2626;
}
.tooltip-status strong {
display: block;
color: var(--kleur-zwart);
margin-bottom: 0.25rem;
font-size: 0.9rem;
}
.tooltip-status p {
margin: 0;
font-size: 0.78rem;
color: var(--kleur-tekst);
line-height: 1.45;
}
.tooltip-meta {
background: var(--kleur-oppervlak);
border-radius: var(--radius-klein);
padding: 0.65rem 0.9rem;
margin-bottom: 0.85rem;
}
.tooltip-meta-rij {
display: flex;
justify-content: space-between;
padding: 0.25rem 0;
font-size: 0.82rem;
color: var(--kleur-tekst-zacht);
}
.tooltip-meta-rij strong {
color: var(--kleur-zwart);
font-weight: 600;
}
.tooltip-uitleg {
padding: 0.65rem 0.9rem;
background: rgba(191, 134, 59, 0.06);
border-left: 3px solid var(--kleur-primair);
border-radius: var(--radius-klein);
}
.tooltip-uitleg p {
margin: 0;
font-size: 0.78rem;
color: var(--kleur-tekst);
line-height: 1.45;
}
/* Body offline-modus: subtiele indicatie hele app */
body.offline-modus::before {
content: 'Offline modus — wijzigingen worden opgeslagen';
position: fixed;
top: 0;
left: 0;
right: 0;
background: #dc2626;
color: white;
font-size: 0.78rem;
font-weight: 700;
padding: 0.35rem 1rem;
text-align: center;
z-index: 9999;
letter-spacing: 0.02em;
}
body.offline-modus header {
margin-top: 28px;
}
/* Mobiel: indicator kleiner */
@media (max-width: 600px) {
.offline-indicator {
bottom: 1rem;
right: 1rem;
}
.offline-indicator-knop {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
}
.offline-indicator-tooltip {
right: -0.5rem;
width: calc(100vw - 2rem);
}
}
/* ============================================
ADMIN-PAGINA — MOBIEL & IPAD RESPONSIVE
============================================ */
/* Admin container: niet te breed op desktop maar full-width op mobiel */
.eigenaar-container {
max-width: 1200px;
padding: 1.5rem;
}
/* Header: flex layout */
.eigenaar-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.eigenaar-titel-blok {
display: flex;
gap: 1.25rem;
align-items: center;
}
.eigenaar-icoon {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, #010202, #2a2622);
color: var(--kleur-primair);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: var(--schaduw-medium);
}
.eigenaar-icoon svg { width: 28px; height: 28px; }
/* Sectie header rij — voor inline-acties */
.sectie-header-rij {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
width: 100%;
}
.sectie-header-acties {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
/* ═══ TABS ═══ */
.eigenaar-tabs {
display: flex;
gap: 0.25rem;
margin-bottom: 1.5rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px; /* ruimte voor focus-rings */
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 0.35rem;
}
.eigenaar-tabs::-webkit-scrollbar { display: none; }
.eigenaar-tab {
background: transparent;
border: none;
color: var(--kleur-tekst-zacht);
padding: 0.75rem 1.1rem;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: inherit;
font-size: 0.92rem;
font-weight: 600;
transition: all 0.15s ease;
white-space: nowrap;
min-width: max-content;
flex-shrink: 0;
}
.eigenaar-tab svg { width: 16px; height: 16px; }
.eigenaar-tab:hover {
color: var(--kleur-zwart);
background: var(--kleur-oppervlak);
}
.eigenaar-tab.actief {
background: var(--kleur-zwart);
color: var(--kleur-primair);
}
/* Tab inhoud */
#eigenaarTabInhoud {
animation: fadeIn 0.2s ease;
}
.eigenaar-sectie {
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 1.75rem;
margin-bottom: 1.5rem;
}
.eigenaar-sectie-header h2 {
font-family: var(--font-display);
font-size: 1.3rem;
color: var(--kleur-zwart);
margin: 0 0 0.35rem;
}
.eigenaar-sectie-header p {
color: var(--kleur-tekst-zacht);
margin: 0 0 1.25rem;
font-size: 0.9rem;
}
/* ═══ iPad (tablet) breakpoint ═══ */
@media (max-width: 1024px) {
.eigenaar-container {
padding: 1.25rem;
}
/* Tabs blijven schuifbaar */
.eigenaar-tab {
padding: 0.7rem 0.95rem;
font-size: 0.88rem;
}
.eigenaar-tab span {
display: inline; /* houd tekst zichtbaar op iPad */
}
}
/* ═══ Mobiel breakpoint ═══ */
@media (max-width: 720px) {
.eigenaar-container {
padding: 1rem 0.85rem;
}
/* Header: stapelen */
.eigenaar-header {
margin-bottom: 1.25rem;
gap: 0.85rem;
}
.eigenaar-titel-blok {
gap: 0.85rem;
}
.eigenaar-icoon {
width: 44px;
height: 44px;
border-radius: 10px;
}
.eigenaar-icoon svg { width: 22px; height: 22px; }
.page-title {
font-size: 1.5rem;
}
.page-sub {
font-size: 0.82rem;
}
/* Tabs: scroll horizontaal */
.eigenaar-tabs {
padding: 0.3rem;
margin-left: -0.85rem;
margin-right: -0.85rem;
border-radius: 0;
border-left: none;
border-right: none;
padding-left: 0.85rem;
padding-right: 0.85rem;
}
.eigenaar-tab {
padding: 0.65rem 0.85rem;
font-size: 0.85rem;
gap: 0.35rem;
}
.eigenaar-tab svg {
width: 15px;
height: 15px;
}
/* Secties compacter */
.eigenaar-sectie {
padding: 1.25rem 1rem;
margin-bottom: 1rem;
border-radius: var(--radius-klein);
}
.eigenaar-sectie-header h2 {
font-size: 1.1rem;
}
/* Header acties: full-width */
.sectie-header-rij {
flex-direction: column;
align-items: stretch;
}
.sectie-header-acties {
width: 100%;
}
.sectie-header-acties button {
flex: 1;
justify-content: center;
font-size: 0.85rem;
padding: 0.6rem 0.85rem;
}
/* Tarieven grid: 1 kolom */
.tarieven-grid,
.bedrijf-grid {
grid-template-columns: 1fr !important;
gap: 0.75rem;
}
.tarief-kaart {
padding: 1rem;
}
.tarief-input-wrap input {
font-size: 16px; /* voorkomt zoom op iOS */
}
/* Klanten kaarten: 1 kolom op mobiel */
.klanten-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.klant-kaart {
padding: 1rem;
}
/* Stats grid */
.grote-stats-grid {
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
}
.grote-stat {
padding: 1rem;
}
.grote-stat-cijfer {
font-size: 1.6rem;
}
/* Facturen-rij: kaarten in plaats van tabel */
.factuur-rij {
grid-template-columns: 1fr;
gap: 0.4rem;
padding: 0.95rem;
}
.factuur-rij > div {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
}
.factuur-rij-bedrag {
text-align: left;
font-size: 1rem;
}
.factuur-rij-klant::before { content: 'Klant:'; color: var(--kleur-tekst-zacht); font-weight: 400; font-size: 0.78rem; }
.factuur-rij-datum::before { content: 'Datum:'; color: var(--kleur-tekst-zacht); font-weight: 400; font-size: 0.78rem; }
.factuur-rij-bedrag::before { content: 'Bedrag:'; color: var(--kleur-tekst-zacht); font-weight: 400; font-size: 0.78rem; }
.factuur-rij-status::before { content: 'Status:'; color: var(--kleur-tekst-zacht); font-weight: 400; font-size: 0.78rem; }
/* Inputs niet zoom op iOS */
.bedrijf-grid input,
.veld input,
.veld textarea,
.veld select {
font-size: 16px;
}
}
/* ═══ Klein mobiel ═══ */
@media (max-width: 480px) {
.grote-stats-grid {
grid-template-columns: 1fr;
}
.eigenaar-header {
flex-direction: column;
align-items: stretch;
}
.eigenaar-header > button {
width: 100%;
justify-content: center;
}
.eigenaar-icoon {
width: 40px;
height: 40px;
}
.page-title {
font-size: 1.3rem;
}
/* Klant-detail */
.klant-detail-card {
padding: 1.25rem 1rem;
}
.klant-detail-naam {
font-size: 1.4rem;
}
}
/* Geen-toegang scherm */
.geen-toegang {
max-width: 480px;
margin: 4rem auto;
text-align: center;
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 3rem 2rem;
}
.geen-toegang h1 {
font-family: var(--font-display);
color: var(--kleur-zwart);
margin-bottom: 1rem;
}
.geen-toegang p {
color: var(--kleur-tekst-zacht);
margin-bottom: 2rem;
}
/* ============================================
DASHBOARD SNELKOPPELINGEN (voor admins)
============================================ */
.snelkoppelingen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 0.85rem;
margin-bottom: 1.5rem;
}
.snelkoppeling-kaart {
display: flex;
align-items: center;
gap: 0.95rem;
padding: 1rem 1.25rem;
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
text-decoration: none;
color: inherit;
cursor: pointer;
transition: all 0.15s ease;
}
.snelkoppeling-kaart:hover {
border-color: var(--kleur-primair);
transform: translateY(-2px);
box-shadow: var(--schaduw-medium);
}
.snelkoppeling-icoon {
width: 44px;
height: 44px;
border-radius: 10px;
background: linear-gradient(135deg, var(--kleur-primair), var(--kleur-primair-donker));
color: var(--kleur-wit);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.snelkoppeling-icoon svg {
width: 22px;
height: 22px;
}
.snelkoppeling-tekst {
flex: 1;
min-width: 0;
}
.snelkoppeling-titel {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
color: var(--kleur-zwart);
line-height: 1.2;
}
.snelkoppeling-sub {
font-size: 0.82rem;
color: var(--kleur-tekst-zacht);
margin-top: 0.2rem;
}
.snelkoppeling-pijl {
width: 18px;
height: 18px;
color: var(--kleur-tekst-zacht);
flex-shrink: 0;
transition: transform 0.15s ease;
}
.snelkoppeling-kaart:hover .snelkoppeling-pijl {
color: var(--kleur-primair-donker);
transform: translateX(3px);
}
@media (max-width: 600px) {
.snelkoppelingen {
grid-template-columns: 1fr;
gap: 0.65rem;
}
.snelkoppeling-kaart {
padding: 0.85rem 1rem;
min-height: 60px;
}
.snelkoppeling-icoon {
width: 38px;
height: 38px;
}
.snelkoppeling-icoon svg {
width: 18px;
height: 18px;
}
.snelkoppeling-titel {
font-size: 0.95rem;
}
.snelkoppeling-sub {
font-size: 0.75rem;
}
}
/* ============================================
OPENSTAANDE FACTUREN — herinneringen sectie
============================================ */
.openstaande-lijst {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.openstaande-kaart {
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius);
padding: 1.25rem;
transition: all 0.15s ease;
}
.openstaande-kaart:hover {
background: var(--kleur-wit);
box-shadow: var(--schaduw-licht);
}
.openstaande-kaart-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 0.85rem;
flex-wrap: wrap;
}
.openstaande-info {
flex: 1;
min-width: 0;
}
.openstaande-nr {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
color: var(--kleur-zwart);
margin-bottom: 0.15rem;
}
.openstaande-klant {
color: var(--kleur-tekst);
font-size: 0.92rem;
margin-bottom: 0.35rem;
}
.openstaande-status {
font-size: 0.82rem;
font-weight: 700;
}
.openstaande-bedrag {
text-align: right;
flex-shrink: 0;
}
.bedrag-totaal {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.3rem;
color: var(--kleur-zwart);
}
.bedrag-vervaldag {
font-size: 0.75rem;
color: var(--kleur-tekst-zacht);
margin-top: 0.25rem;
}
.herinneringen-historie {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.85rem;
padding: 0.65rem 0.85rem;
background: var(--kleur-wit);
border-radius: var(--radius-klein);
border: 1px solid var(--kleur-grens-mat);
}
.herinnering-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.65rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
}
.suggestie-blok {
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(217, 119, 6, 0.06);
border-left: 3px solid #d97706;
padding: 0.75rem 1rem;
border-radius: var(--radius-klein);
margin-bottom: 0.85rem;
}
.suggestie-icoon {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.suggestie-tekst {
flex: 1;
font-size: 0.85rem;
line-height: 1.4;
}
.suggestie-tekst strong {
display: block;
color: var(--kleur-zwart);
margin-bottom: 0.15rem;
}
.suggestie-tekst span {
color: var(--kleur-tekst-zacht);
}
.openstaande-acties {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.openstaande-acties button {
flex: 1;
min-width: max-content;
justify-content: center;
}
/* ===== Herinnering modal ===== */
.herinnering-factuur-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
background: var(--kleur-oppervlak);
border-radius: var(--radius-klein);
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.88rem;
line-height: 1.7;
}
.herinnering-factuur-info strong {
color: var(--kleur-zwart);
}
.herinnering-kop {
font-family: var(--font-display);
font-weight: 700;
color: var(--kleur-zwart);
margin: 1.5rem 0 0.85rem;
font-size: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--kleur-grens-mat);
}
.niveau-keuze {
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.niveau-optie {
display: block;
cursor: pointer;
}
.niveau-optie input[type="radio"] {
position: absolute;
opacity: 0;
}
.niveau-kaart {
background: var(--kleur-wit);
border: 2px solid var(--kleur-grens);
border-left-width: 4px;
border-radius: var(--radius-klein);
padding: 0.85rem 1rem;
transition: all 0.15s ease;
}
.niveau-optie input[type="radio"]:checked + .niveau-kaart {
border-color: var(--kleur-primair);
background: rgba(191, 134, 59, 0.04);
box-shadow: 0 0 0 2px rgba(191, 134, 59, 0.15);
}
.niveau-optie.al-verstuurd .niveau-kaart {
opacity: 0.6;
}
.niveau-titel-rij {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.25rem;
}
.niveau-titel-rij strong {
color: var(--kleur-zwart);
font-size: 0.95rem;
}
.niveau-badge {
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
}
.niveau-beschr {
color: var(--kleur-tekst);
font-size: 0.82rem;
margin-bottom: 0.15rem;
}
.niveau-info {
color: var(--kleur-tekst-zacht);
font-size: 0.75rem;
}
/* Mobiel */
@media (max-width: 600px) {
.openstaande-kaart {
padding: 1rem;
}
.openstaande-kaart-top {
flex-direction: column;
gap: 0.5rem;
}
.openstaande-bedrag {
text-align: left;
}
.openstaande-acties {
flex-direction: column;
}
.openstaande-acties button {
width: 100%;
}
.herinnering-factuur-info {
grid-template-columns: 1fr;
}
}
/* ============================================
WELKOM-SCHERM (na auto-login)
============================================ */
.welkom-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--kleur-primair), var(--kleur-primair-donker));
color: white;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 28px;
margin: 0 auto 16px;
box-shadow: 0 4px 12px rgba(191, 134, 59, 0.3);
}
.welkom-laad-blok {
background: var(--kleur-oppervlak);
border-radius: 10px;
padding: 16px;
margin: 20px 0 16px;
text-align: center;
}
.welkom-status {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 13px;
color: var(--kleur-tekst-zacht);
font-weight: 500;
}
.welkom-status.klaar {
color: #2d5a1d;
font-weight: 700;
}
.welkom-laad-spinner {
width: 14px;
height: 14px;
border: 2px solid var(--kleur-grens);
border-top-color: var(--kleur-primair);
border-radius: 50%;
animation: welkomspin 0.8s linear infinite;
display: inline-block;
}
@keyframes welkomspin {
to { transform: rotate(360deg); }
}
.login-knop.aan-het-laden {
opacity: 0.6;
cursor: wait;
}
.login-knop.aan-het-laden:not(:disabled) {
cursor: pointer;
}
/* ============================================
NAVIGATIE DROPDOWN IN HEADER
============================================ */
/* ============================================
NAVIGATIE DROPDOWN — PROFESSIONELE VERSIE
============================================ */
.nav-menu-wrap {
position: relative;
margin-left: 1rem;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
/* Verberg menu als niet ingelogd */
body.niet-ingelogd .nav-menu-wrap {
display: none !important;
}
.nav-menu-knop {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
height: 40px;
min-width: 130px;
padding: 0 0.85rem;
background: rgba(191, 134, 59, 0.1);
border: 1px solid rgba(191, 134, 59, 0.3);
border-radius: 10px;
color: #ffffff;
cursor: pointer;
font-family: inherit;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.01em;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.nav-menu-knop:hover {
background: rgba(191, 134, 59, 0.2);
border-color: rgba(191, 134, 59, 0.55);
}
.nav-menu-knop:active {
transform: scale(0.97);
}
.nav-menu-knop[aria-expanded="true"] {
background: #BF863B;
color: #010202;
border-color: #BF863B;
}
.nav-menu-label {
flex: 1;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-menu-chevron {
width: 16px;
height: 16px;
flex-shrink: 0;
stroke: currentColor;
transition: transform 0.2s ease;
opacity: 0.8;
}
.nav-menu-knop[aria-expanded="true"] .nav-menu-chevron {
transform: rotate(180deg);
opacity: 1;
}
/* ─── DROPDOWN ─── */
.nav-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
width: 280px;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.06),
0 16px 40px rgba(0, 0, 0, 0.18);
padding: 0.4rem;
z-index: 100;
animation: navDropdownIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes navDropdownIn {
from {
opacity: 0;
transform: translateY(-8px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.nav-dropdown.verborgen {
display: none;
}
/* ─── DROPDOWN ITEMS ─── */
.nav-dropdown-item {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.7rem 0.85rem;
border-radius: 8px;
color: #1f1d18;
text-decoration: none;
cursor: pointer;
transition: background 0.12s ease;
-webkit-tap-highlight-color: transparent;
}
.nav-dropdown-item + .nav-dropdown-item {
margin-top: 2px;
}
.nav-dropdown-item:hover {
background: #f5f3ee;
}
.nav-dropdown-item:active {
background: #ebe8df;
}
.nav-dropdown-item.actief {
background: linear-gradient(135deg, rgba(191, 134, 59, 0.12), rgba(191, 134, 59, 0.06));
border-left: 3px solid #BF863B;
padding-left: calc(0.85rem - 3px);
}
.nav-dropdown-item.actief .nav-item-titel {
color: #8a5e26;
}
.nav-dropdown-item svg {
width: 18px;
height: 18px;
flex-shrink: 0;
stroke: #6b6760;
transition: stroke 0.12s ease;
}
.nav-dropdown-item.gouden-item svg {
stroke: #BF863B;
}
.nav-dropdown-item.actief svg {
stroke: #8a5e26;
}
.nav-dropdown-item:hover svg {
stroke: #1f1d18;
}
.nav-item-content {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.nav-item-titel {
font-weight: 600;
color: #1f1d18;
font-size: 0.92rem;
line-height: 1.3;
transition: color 0.12s ease;
}
.nav-item-sub {
font-size: 0.74rem;
color: #8a857a;
margin-top: 0.15rem;
line-height: 1.3;
}
/* ─── HEADER LAYOUT ─── */
/* Zorg dat menu netjes tussen logo en acties zit */
.header-inner > .nav-menu-wrap {
margin-right: auto;
}
/* ─── RESPONSIVE ─── */
/* Tablet: iets compacter */
@media (max-width: 1024px) {
.nav-menu-knop {
min-width: 120px;
padding: 0 0.85rem 0 0.75rem;
font-size: 0.84rem;
}
}
/* Tablet portrait — alleen icoon zichtbaar */
@media (max-width: 768px) {
.nav-menu-wrap {
margin-left: 0.6rem;
}
.nav-menu-knop {
min-width: 0;
width: 42px;
height: 42px;
padding: 0;
justify-content: center;
border-radius: 10px;
}
.nav-menu-label,
.nav-menu-chevron {
display: none;
}
}
/* Mobile: full-width dropdown */
@media (max-width: 560px) {
.nav-menu-wrap {
margin-left: 0.5rem;
}
.nav-menu-knop {
width: 38px;
height: 38px;
}
.nav-menu-icoon {
width: 18px;
height: 18px;
}
.nav-dropdown {
width: calc(100vw - 1.5rem);
max-width: 320px;
left: 0;
}
}
/* ============================================
WELKOM-PANEEL — vervangt stat-kaarten op dashboard
============================================ */
.welkom-paneel {
background: linear-gradient(135deg, #ffffff 0%, #f9f6ef 100%);
border: 1px solid rgba(191, 134, 59, 0.18);
border-radius: 14px;
padding: 1.6rem 1.8rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(191, 134, 59, 0.06);
position: relative;
overflow: hidden;
}
.welkom-paneel::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, #BF863B, #9c6c2a);
}
.welkom-tekst {
flex: 1;
min-width: 0;
}
.welkom-titel {
font-family: var(--font-display, Georgia, serif);
font-size: 1.5rem;
font-weight: 700;
color: #010202;
margin: 0 0 0.5rem;
line-height: 1.2;
}
.welkom-uitleg {
color: #555;
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
}
.welkom-kerncijfer {
font-weight: 700;
color: #010202;
font-size: 1.05rem;
}
.welkom-detail {
color: #6b6760;
}
.welkom-detail strong {
color: #010202;
font-weight: 600;
}
.welkom-scheider {
color: #BF863B;
margin: 0 0.55rem;
font-weight: 700;
}
.welkom-icoon {
flex-shrink: 0;
width: 56px;
height: 56px;
background: rgba(191, 134, 59, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #BF863B;
}
.welkom-icoon svg {
width: 30px;
height: 30px;
}
.welkom-paneel-compact {
padding: 1.2rem 1.5rem;
}
.welkom-paneel-compact .welkom-titel {
font-size: 1.25rem;
margin-bottom: 0.3rem;
}
/* Mobile */
@media (max-width: 640px) {
.welkom-paneel {
padding: 1.2rem 1.3rem;
}
.welkom-titel {
font-size: 1.2rem;
}
.welkom-uitleg {
font-size: 0.88rem;
}
.welkom-icoon {
width: 44px;
height: 44px;
}
.welkom-icoon svg {
width: 22px;
height: 22px;
}
.welkom-scheider {
display: block;
margin: 0.35rem 0;
opacity: 0;
height: 0.35rem;
}
}
/* Verberg oude stat-grid styling wanneer welkom-paneel binnen statistieken zit */
#statistieken .welkom-paneel {
grid-column: 1 / -1;
}
/* Rol-detail in gebruikersmenu */
.gebruiker-dropdown-rol {
font-size: 0.78rem;
color: #BF863B;
background: rgba(191, 134, 59, 0.08);
padding: 0.4rem 0.65rem;
border-radius: 6px;
margin-top: 0.5rem;
font-weight: 600;
display: inline-block;
}
/* ============================================
KLANT-SELECTOR — boven opdrachtgever velden
============================================ */
.klant-selector-blok {
background: linear-gradient(135deg, #f9f6ef 0%, #fefcf7 100%);
border: 1px solid rgba(191, 134, 59, 0.18);
border-radius: 12px;
padding: 1rem 1.25rem;
margin-bottom: 1.25rem;
box-shadow: 0 1px 3px rgba(191, 134, 59, 0.04);
}
.klant-selector-rij {
display: flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
}
.klant-selector-label-blok {
flex: 1;
min-width: 180px;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.klant-selector-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
color: #010202;
font-size: 0.92rem;
cursor: pointer;
}
.klant-selector-label svg {
width: 18px;
height: 18px;
color: #BF863B;
flex-shrink: 0;
}
.klant-selector-sub {
font-size: 0.78rem;
color: #8a857a;
margin-left: 1.7rem;
}
.klant-selector-select {
flex: 1.5;
min-width: 220px;
height: 42px;
padding: 0 0.85rem;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 8px;
background: white;
font-size: 0.92rem;
font-family: inherit;
color: #010202;
cursor: pointer;
transition: border-color 0.15s ease;
}
.klant-selector-select:hover,
.klant-selector-select:focus {
border-color: #BF863B;
outline: none;
}
.klant-selector-clear {
width: 36px;
height: 36px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
background: white;
color: #6b6760;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
flex-shrink: 0;
}
.klant-selector-clear:hover {
background: #fef2f2;
color: #dc2626;
border-color: #fca5a5;
}
.klant-selector-leeg {
display: flex;
align-items: center;
gap: 0.85rem;
}
.klant-selector-icoon {
width: 40px;
height: 40px;
background: rgba(191, 134, 59, 0.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #BF863B;
flex-shrink: 0;
}
.klant-selector-icoon svg {
width: 22px;
height: 22px;
}
.klant-selector-tekst {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.klant-selector-tekst strong {
color: #010202;
font-size: 0.92rem;
font-weight: 700;
}
.klant-selector-tekst span {
font-size: 0.82rem;
color: #6b6760;
line-height: 1.4;
}
/* ============================================
LOCATIE COPY-KNOP — locatie sectie
============================================ */
.locatie-copy-blok {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 1rem;
padding: 0.65rem 0.85rem;
background: rgba(74, 124, 58, 0.06);
border: 1px dashed rgba(74, 124, 58, 0.3);
border-radius: 10px;
flex-wrap: wrap;
}
.locatie-copy-knop {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: white;
color: #2d5a1d;
border: 1px solid #4a7c3a;
padding: 0.55rem 0.95rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.88rem;
font-family: inherit;
cursor: pointer;
transition: all 0.15s ease;
}
.locatie-copy-knop:hover {
background: #4a7c3a;
color: white;
}
.locatie-copy-knop:active {
transform: scale(0.97);
}
.locatie-copy-knop svg {
color: currentColor;
}
.locatie-copy-hint {
font-size: 0.82rem;
color: #6b6760;
font-style: italic;
}
/* Mobile aanpassingen voor klant-selector */
@media (max-width: 640px) {
.klant-selector-rij {
flex-direction: column;
align-items: stretch;
}
.klant-selector-label-blok {
min-width: 0;
}
.klant-selector-select {
min-width: 0;
width: 100%;
}
.klant-selector-clear {
align-self: flex-end;
}
}
/* ============================================
MOBILE/iPad/PWA - ALGEMENE POLISH (versie 2026)
============================================ */
/* === IPAD PORTRAIT EN TUSSENGROOTTES (768-1024) === */
@media (min-width: 768px) and (max-width: 1024px) {
/* Header: meer ruimte voor de knop */
.header-inner {
padding: 0.85rem 1.25rem !important;
}
/* Container: niet te smal */
.container {
padding: 0 1.5rem;
}
/* Formulieren: 2 kolommen waar passend */
.veld-rij {
grid-template-columns: 1fr 1fr !important;
gap: 1.25rem;
}
/* Stat-kaarten: 2 kolommen */
.stat-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Rapportlijst grid */
.rapporten-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Modal niet te smal op iPad */
.modal-paneel {
max-width: 720px;
}
/* Snelkoppelingen: 3-kolom op iPad */
.dashboard-snelkoppelingen {
grid-template-columns: repeat(3, 1fr);
}
}
/* === MOBIEL: tap-zones groter, knoppen vol-breed === */
@media (max-width: 640px) {
/* Container ruimte */
.container {
padding: 0 0.85rem;
}
/* Form-secties iets minder padding */
.form-sectie {
padding: 1.2rem 1rem;
border-radius: 12px;
}
/* Velden: comfortabele tap-grootte */
.veld input,
.veld select,
.veld textarea {
font-size: 16px; /* voorkomt iOS zoom-in */
padding: 0.75rem 0.85rem;
min-height: 44px;
}
.veld textarea {
min-height: 88px;
}
/* Buttons: minimum tap-area 44px */
.btn-primary,
.btn-secundair,
.btn-gevaar {
min-height: 44px;
padding: 0.65rem 1.1rem;
font-size: 0.95rem;
}
/* Modal: full-screen op mobile */
.modal-overlay {
padding: 0.5rem !important;
align-items: flex-end;
}
.modal-paneel {
max-height: 90vh;
border-radius: 16px 16px 0 0;
max-width: 100%;
}
.modal-header {
padding: 0.95rem 1.1rem !important;
}
.modal-inhoud {
padding: 1rem 1.1rem !important;
}
.modal-acties {
padding: 0.85rem 1.1rem !important;
position: sticky;
bottom: 0;
background: white;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.modal-acties button {
flex: 1;
}
/* Stat-grid stacked */
.stat-grid {
grid-template-columns: 1fr;
}
/* Rapport-kaarten full-width */
.rapporten-grid {
grid-template-columns: 1fr;
}
/* Section-titels iets kleiner */
.sectie-titel {
font-size: 1.15rem !important;
}
/* Snelkoppelingen: 1 kolom op telefoon */
.dashboard-snelkoppelingen {
grid-template-columns: 1fr;
}
}
/* === IPHONE NOTCH / iOS SAFE AREAS === */
@supports (padding: max(0px)) {
.app-header {
padding-top: max(0.5rem, env(safe-area-inset-top));
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
main {
padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
/* Sticky modal-acties met safe area */
@media (max-width: 640px) {
.modal-acties {
padding-bottom: max(0.85rem, env(safe-area-inset-bottom)) !important;
}
}
}
/* === PWA STANDALONE MODE === */
@media all and (display-mode: standalone) {
/* Extra padding boven voor iOS notch */
body {
padding-top: env(safe-area-inset-top);
}
/* Verberg "install" prompts in PWA-modus */
#installBanner,
#iosInstallHint {
display: none !important;
}
}
/* === DARK MODE - voorbereiden maar nog uitgeschakeld === */
/* Niet actief - alleen ready voor toekomst */
/* === ACTIEVE TAP-FEEDBACK voor touch devices === */
@media (hover: none) and (pointer: coarse) {
.btn-primary:active,
.btn-secundair:active,
.btn-gevaar:active,
.rapport-kaart:active,
.nav-dropdown-item:active,
.dashboard-snelkoppeling:active {
transform: scale(0.97);
transition: transform 0.08s ease;
}
/* Hover-effecten uit op touch */
.rapport-kaart:hover {
transform: none;
}
}
/* === KLEINE TELEFOONS (< 380px) === */
@media (max-width: 380px) {
.container {
padding: 0 0.65rem;
}
.form-sectie {
padding: 1rem 0.75rem;
}
.sectie-titel {
font-size: 1.05rem !important;
}
.veld-rij {
gap: 0.65rem;
}
/* Welkom-paneel compacter */
.welkom-paneel {
padding: 0.95rem 1rem !important;
flex-direction: row !important;
gap: 0.8rem !important;
}
.welkom-icoon {
width: 40px !important;
height: 40px !important;
}
.welkom-titel {
font-size: 1.05rem !important;
}
}
/* === HORIZONTAAL SCROLLEN VOORKOMEN === */
html, body {
overflow-x: hidden;
}
* {
max-width: 100%;
box-sizing: border-box;
}
img, svg, video {
max-width: 100%;
height: auto;
}
/* ============================================
PLANTNET — Plant-identificatie UI
============================================ */
/* Knop op foto-thumb */
.foto-identificeer {
position: absolute;
bottom: 0.5rem;
left: 0.5rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.65rem;
background: rgba(74, 124, 58, 0.95);
color: white;
border: none;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
z-index: 2;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
transition: all 0.15s ease;
}
.foto-identificeer:hover {
background: #4a7c3a;
transform: scale(1.05);
}
.foto-identificeer:active {
transform: scale(0.95);
}
.foto-identificeer svg {
width: 14px;
height: 14px;
}
/* Modal */
.plantnet-modal {
max-width: 640px;
}
.plantnet-foto-preview {
width: 100%;
height: 200px;
background: #f5f3ee;
border-radius: 12px;
overflow: hidden;
margin-bottom: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
}
.plantnet-foto-preview img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.plantnet-organ-keuze {
margin-bottom: 1.25rem;
}
.plantnet-organ-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
margin-top: 0.5rem;
}
.plantnet-organ-knop {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 0.75rem 0.5rem;
background: white;
border: 2px solid #e8e4db;
border-radius: 10px;
cursor: pointer;
font-size: 0.82rem;
font-weight: 600;
color: #6b6760;
transition: all 0.15s ease;
font-family: inherit;
}
.plantnet-organ-knop:hover {
border-color: #BF863B;
background: rgba(191, 134, 59, 0.05);
}
.plantnet-organ-knop.gekozen {
border-color: #4a7c3a;
background: rgba(74, 124, 58, 0.08);
color: #2d5a1d;
}
.plantnet-organ-knop svg {
width: 26px;
height: 26px;
stroke: currentColor;
margin-bottom: 0.15rem;
}
.plantnet-organ-icoon {
display: none;
}
/* Resultaten */
.plantnet-resultaten {
margin-top: 0.5rem;
}
.plantnet-status {
text-align: center;
color: #8a857a;
font-size: 0.92rem;
padding: 1rem;
font-style: italic;
}
.plantnet-resultaten-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
margin-bottom: 0.85rem;
padding-bottom: 0.7rem;
border-bottom: 1px solid #e8e4db;
flex-wrap: wrap;
}
.plantnet-resultaten-header strong {
color: #010202;
font-size: 0.95rem;
}
.plantnet-tip {
font-size: 0.78rem;
color: #8a857a;
font-style: italic;
}
.plantnet-suggesties {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.plantnet-suggestie {
display: flex;
align-items: center;
gap: 0.85rem;
width: 100%;
padding: 0.85rem;
background: white;
border: 1px solid #e8e4db;
border-radius: 10px;
cursor: pointer;
text-align: left;
transition: all 0.15s ease;
font-family: inherit;
}
.plantnet-suggestie:hover {
border-color: #BF863B;
background: #fefcf7;
transform: translateX(2px);
}
.plantnet-suggestie:active {
transform: scale(0.99);
}
.plantnet-suggestie.top-match {
border-color: rgba(74, 124, 58, 0.4);
background: linear-gradient(135deg, rgba(74, 124, 58, 0.04), rgba(255, 255, 255, 0.8));
}
.plantnet-suggestie-score {
flex-shrink: 0;
width: 52px;
height: 52px;
background: #9c6c2a;
color: white;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.92rem;
}
.plantnet-suggestie-info {
flex: 1;
min-width: 0;
}
.plantnet-suggestie-naam {
font-weight: 700;
color: #010202;
font-size: 0.95rem;
line-height: 1.3;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.plantnet-suggestie-latijn {
font-style: italic;
color: #6b6760;
font-size: 0.85rem;
margin-top: 0.15rem;
}
.plantnet-suggestie-familie {
color: #8a857a;
font-size: 0.78rem;
margin-top: 0.15rem;
}
.plantnet-suggestie-pijl {
width: 18px;
height: 18px;
color: #BF863B;
flex-shrink: 0;
}
.plantnet-exote-badge {
background: #dc2626;
color: white;
font-size: 0.72rem;
font-weight: 700;
padding: 0.15rem 0.5rem;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.plantnet-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: plantnetSpin 0.8s linear infinite;
vertical-align: middle;
margin-right: 0.35rem;
}
@keyframes plantnetSpin {
to { transform: rotate(360deg); }
}
/* Uitleg-blok in administratie */
.plantnet-uitleg {
background: #f9f6ef;
border-left: 3px solid #4a7c3a;
padding: 1rem 1.25rem;
border-radius: 8px;
margin-bottom: 1rem;
font-size: 0.92rem;
line-height: 1.5;
}
.plantnet-uitleg strong {
display: block;
color: #010202;
margin-bottom: 0.5rem;
}
.plantnet-uitleg ol {
margin: 0.5rem 0;
padding-left: 1.5rem;
color: #555;
}
.plantnet-uitleg ol li {
margin-bottom: 0.3rem;
}
.plantnet-uitleg a {
color: #BF863B;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.plantnet-uitleg a:hover {
color: #9c6c2a;
}
.plantnet-info {
margin: 0.5rem 0 0;
color: #2d5a1d;
font-size: 0.85rem;
}
/* Mobile */
@media (max-width: 640px) {
.plantnet-organ-grid {
grid-template-columns: repeat(2, 1fr);
}
.plantnet-suggestie-score {
width: 44px;
height: 44px;
font-size: 0.85rem;
}
.plantnet-foto-preview {
height: 160px;
}
.foto-identificeer span {
display: none;
}
.foto-identificeer {
padding: 0.5rem;
}
}
/* ============================================
GEBRUIKER-MENU ZICHTBAARHEID FIX
============================================ */
/* Standaard: zichtbaar (overrides oude display:none inline) */
.gebruiker-menu-wrap {
display: inline-flex !important;
}
/* Verberg alleen wanneer niet-ingelogd */
body.niet-ingelogd .gebruiker-menu-wrap {
display: none !important;
}
/* ============================================
ROL-GEBASEERDE ZICHTBAARHEID (defensief)
============================================ */
/* Administratie-item: ALTIJD zichtbaar voor ingelogde gebruikers.
Inspecteurs zien het ook maar krijgen bij klikken een melding;
de route zelf weigert hun toegang. Zo kan het knopje nooit meer
"verdwijnen" door timing- of cache-problemen. */
#navItemAdmin {
display: flex;
}
/* Alleen verbergen als er niemand is ingelogd */
body.niet-ingelogd .nav-menu-wrap {
display: none !important;
}
body.niet-ingelogd #navItemAdmin {
display: none !important;
}
/* ============================================
PROFIEL — vergrendelde velden + info-box
============================================ */
.profiel-info-box {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 0.95rem 1.15rem;
background: linear-gradient(135deg, rgba(191, 134, 59, 0.06), rgba(191, 134, 59, 0.02));
border-left: 3px solid #BF863B;
border-radius: 8px;
margin: 1.25rem 0;
}
.profiel-info-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
background: rgba(191, 134, 59, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #BF863B;
}
.profiel-info-icon svg {
width: 18px;
height: 18px;
}
.profiel-info-tekst {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.profiel-info-tekst strong {
color: #010202;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.35;
}
.profiel-info-tekst span {
color: #6b6760;
font-size: 0.85rem;
line-height: 1.45;
}
/* Vergrendeld label */
.veld-vergrendeld {
color: #BF863B;
font-size: 0.75rem;
font-weight: 600;
font-style: italic;
margin-left: 0.35rem;
}
/* Disabled-input styling iets duidelijker */
.veld input:disabled {
background: #f9f6ef;
color: #6b6760;
border-color: rgba(0, 0, 0, 0.08);
cursor: not-allowed;
font-style: italic;
}
/* ============================================
MAIL-KEUZE MODAL — Versturen naar klant
============================================ */
.modal-paneel-keuze {
max-width: 640px;
}
.mail-keuze-intro {
color: #4a4640;
font-size: 1rem;
margin: 0 0 1.5rem;
line-height: 1.5;
text-align: center;
}
.mail-keuze-intro strong {
color: #010202;
font-weight: 700;
}
.mail-keuze-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.mail-keuze-kaart {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1.75rem 1.4rem 1.4rem;
background: white;
border: 1.5px solid #e8e4db;
border-radius: 14px;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
overflow: hidden;
}
.mail-keuze-kaart::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: #BF863B;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s ease;
}
.mail-keuze-kaart:hover {
border-color: #BF863B;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(191, 134, 59, 0.15);
}
.mail-keuze-kaart:hover::before {
transform: scaleX(1);
}
.mail-keuze-kaart:active {
transform: translateY(-1px);
}
.mail-keuze-icoon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, #1f1d18, #2d2a23);
color: white;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.1rem;
transition: transform 0.25s ease;
}
.mail-keuze-kaart:hover .mail-keuze-icoon {
transform: scale(1.08) rotate(-3deg);
}
.mail-keuze-icoon svg {
width: 30px;
height: 30px;
}
.mail-keuze-icoon.goud {
background: linear-gradient(135deg, #BF863B, #9c6c2a);
}
.mail-keuze-titel {
font-family: var(--font-display, Georgia, serif);
font-weight: 700;
font-size: 1.15rem;
color: #010202;
margin-bottom: 0.5rem;
letter-spacing: -0.01em;
}
.mail-keuze-sub {
color: #6b6760;
font-size: 0.85rem;
line-height: 1.5;
margin-bottom: 1rem;
}
.mail-keuze-pijl {
width: 36px;
height: 36px;
background: #f5f3ee;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #BF863B;
transition: all 0.25s ease;
margin-top: auto;
}
.mail-keuze-pijl svg {
width: 16px;
height: 16px;
}
.mail-keuze-kaart:hover .mail-keuze-pijl {
background: #BF863B;
color: white;
transform: translateX(4px);
}
/* Mobile */
@media (max-width: 560px) {
.mail-keuze-grid {
grid-template-columns: 1fr;
gap: 0.85rem;
}
.mail-keuze-kaart {
padding: 1.4rem 1.25rem 1.25rem;
flex-direction: row;
text-align: left;
align-items: center;
gap: 0.95rem;
}
.mail-keuze-icoon {
margin-bottom: 0;
flex-shrink: 0;
width: 56px;
height: 56px;
}
.mail-keuze-sub {
margin-bottom: 0;
font-size: 0.82rem;
}
.mail-keuze-pijl {
position: absolute;
right: 1.25rem;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
}
}
/* ============================================
BEVESTIG-MODAL — vervangt native confirm()
============================================ */
.modal-paneel-bevestig {
max-width: 440px;
}
.bevestig-inhoud {
padding: 2rem 1.75rem 1.6rem;
text-align: center;
}
.bevestig-icoon {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
}
.bevestig-icoon svg {
width: 32px;
height: 32px;
stroke-width: 2;
}
.bevestig-titel {
font-family: var(--font-display, Georgia, serif);
font-size: 1.3rem;
font-weight: 700;
color: #010202;
margin: 0 0 0.65rem;
letter-spacing: -0.01em;
line-height: 1.3;
}
.bevestig-bericht {
color: #6b6760;
font-size: 0.95rem;
line-height: 1.55;
margin: 0 0 1.75rem;
}
.bevestig-knoppen {
display: flex;
gap: 0.75rem;
justify-content: center;
}
.bevestig-knoppen button {
min-width: 130px;
font-weight: 700;
}
@media (max-width: 480px) {
.bevestig-inhoud {
padding: 1.6rem 1.25rem 1.4rem;
}
.bevestig-knoppen {
flex-direction: column-reverse;
}
.bevestig-knoppen button {
width: 100%;
}
}
/* PlantNet professionele aanpassingen */
.plantnet-bezig {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 1.5rem;
color: #4a4640;
font-size: 0.95rem;
}
.plantnet-bezig .plantnet-spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(74, 124, 58, 0.2);
border-top-color: #4a7c3a;
}
.plantnet-fout {
display: flex;
align-items: flex-start;
gap: 0.85rem;
background: #fef2f2;
border-left: 3px solid #dc2626;
padding: 1rem 1.25rem;
border-radius: 8px;
}
.plantnet-fout-icoon {
flex-shrink: 0;
width: 36px;
height: 36px;
background: rgba(220, 38, 38, 0.12);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #dc2626;
}
.plantnet-fout-icoon svg {
width: 18px;
height: 18px;
}
.plantnet-fout-tekst {
flex: 1;
}
.plantnet-fout-tekst strong {
display: block;
font-size: 0.95rem;
margin-bottom: 0.25rem;
color: #991b1b;
}
.plantnet-fout-tekst p {
margin: 0;
font-size: 0.85rem;
line-height: 1.5;
color: #7f1d1d;
}
.plantnet-disclaimer {
margin-top: 1rem;
padding: 0.7rem 0.95rem;
background: rgba(217, 119, 6, 0.08);
border-left: 3px solid #d97706;
border-radius: 6px;
font-size: 0.82rem;
color: #92590a;
line-height: 1.5;
display: flex;
align-items: flex-start;
gap: 0.55rem;
}
.plantnet-disclaimer svg {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 1px;
}
.plantnet-exote-badge {
background: #dc2626;
color: white;
font-size: 0.72rem;
font-weight: 700;
padding: 0.15rem 0.55rem;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
line-height: 1.4;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.plantnet-exote-badge::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
}
/* ============================================
PLANTNET — SETUP & TEST in Administratie
============================================ */
.plantnet-domain-blok {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.5rem 0 0.25rem;
padding: 0.6rem 0.85rem;
background: #1a1a17;
border-radius: 6px;
font-family: 'Courier New', monospace;
}
.plantnet-domain-blok code {
flex: 1;
color: #BF863B;
font-size: 0.92rem;
background: transparent;
padding: 0;
word-break: break-all;
}
.plantnet-copy-knop {
flex-shrink: 0;
padding: 0.35rem 0.85rem;
background: #BF863B;
color: white;
border: none;
border-radius: 4px;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: background 0.15s ease;
}
.plantnet-copy-knop:hover {
background: #9c6c2a;
}
.plantnet-copy-knop.gekopieerd {
background: #15803d;
}
.plantnet-knoppen-rij {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
flex-wrap: wrap;
}
.plantnet-test-bezig {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.85rem 1.1rem;
background: rgba(191, 134, 59, 0.08);
border-left: 3px solid #BF863B;
border-radius: 6px;
color: #4a4640;
font-size: 0.92rem;
}
.plantnet-test-bezig .plantnet-spinner {
border: 2px solid rgba(191, 134, 59, 0.2);
border-top-color: #BF863B;
width: 14px;
height: 14px;
}
.plantnet-test-blok {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 1rem 1.2rem;
border-radius: 8px;
line-height: 1.55;
}
.plantnet-test-icoon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
}
.plantnet-test-icoon svg {
width: 18px;
height: 18px;
}
.plantnet-test-content {
flex: 1;
}
.plantnet-test-content strong {
display: block;
font-size: 1rem;
margin-bottom: 0.35rem;
}
.plantnet-test-bericht {
font-size: 0.88rem;
line-height: 1.55;
}
.plantnet-test-bericht code {
background: rgba(0, 0, 0, 0.08);
padding: 0.15rem 0.45rem;
border-radius: 4px;
font-size: 0.85em;
font-family: 'Courier New', monospace;
}
.plantnet-test-domein {
margin: 0.5rem 0;
padding: 0.55rem 0.85rem;
background: rgba(0, 0, 0, 0.06);
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 0.92rem;
font-weight: 600;
user-select: all;
}
.plantnet-test-domein code {
background: transparent;
padding: 0;
}
/* ============================================
POLISH — final mobile-specific fixes
============================================ */
/* Forceer alle SVG-iconen in dialogs naar max-size
— vangnet tegen CSS-conflicten met gigantische iconen */
.modal-paneel svg:not([style*="width"]):not([width]),
.plantnet-modal svg:not([style*="width"]):not([width]) {
max-width: 32px;
max-height: 32px;
}
/* PlantNet organ grid op mobile: 2 kolommen */
@media (max-width: 560px) {
.plantnet-organ-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.5rem !important;
}
.plantnet-organ-knop {
padding: 0.8rem 0.5rem !important;
font-size: 0.82rem !important;
}
.plantnet-modal {
max-width: 100% !important;
margin: 0.5rem !important;
}
.plantnet-foto-preview {
max-height: 200px !important;
}
}
/* Foto-thumb buttons op mobile groter klikbaar */
@media (max-width: 560px) {
.foto-verwijder,
.foto-identificeer {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
}
.foto-verwijder svg,
.foto-identificeer svg {
width: 16px !important;
height: 16px !important;
}
}
/* Bevestig-modal mobile */
@media (max-width: 480px) {
.modal-paneel-bevestig {
max-width: 100%;
margin: 1rem;
}
}
/* Algemeen: voorkom horizontal scroll op mobile */
@media (max-width: 480px) {
body {
overflow-x: hidden;
}
.modal-overlay {
padding: 0.5rem;
}
}
/* PlantNet test-blok responsive */
@media (max-width: 560px) {
.plantnet-test-blok {
flex-direction: column;
gap: 0.5rem;
text-align: left;
}
.plantnet-knoppen-rij {
flex-direction: column;
}
.plantnet-knoppen-rij button {
width: 100%;
justify-content: center;
}
}
/* ============================================
KLANT-ZOEK — typeahead met 3+ letters
============================================ */
.klant-zoek-rij {
background: linear-gradient(135deg, rgba(191, 134, 59, 0.06), rgba(191, 134, 59, 0.02));
border: 1px solid rgba(191, 134, 59, 0.2);
border-radius: 10px;
padding: 1rem 1.15rem;
margin-bottom: 1rem;
}
.klant-zoek-label-blok {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin-bottom: 0.6rem;
}
.klant-zoek-label {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: #BF863B;
font-weight: 700;
font-size: 0.92rem;
letter-spacing: 0.01em;
}
.klant-zoek-sub {
color: #6b6760;
font-size: 0.82rem;
}
.klant-zoek-input-wrap {
position: relative;
}
.klant-zoek-icoon {
position: absolute;
left: 0.85rem;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: #BF863B;
pointer-events: none;
}
.klant-zoek-input {
width: 100%;
padding: 0.7rem 2.5rem 0.7rem 2.5rem;
background: white;
border: 1.5px solid #e8e4db;
border-radius: 7px;
font-size: 0.95rem;
font-family: inherit;
color: #1a1a17;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.klant-zoek-input:focus {
outline: none;
border-color: #BF863B;
box-shadow: 0 0 0 3px rgba(191, 134, 59, 0.12);
}
.klant-zoek-clear {
position: absolute;
right: 0.55rem;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
background: #f5f3ee;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #6b6760;
transition: background 0.15s ease;
}
.klant-zoek-clear:hover {
background: #BF863B;
color: white;
}
.klant-zoek-resultaten {
margin-top: 0.6rem;
background: white;
border: 1px solid #e8e4db;
border-radius: 8px;
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease;
}
.klant-zoek-resultaten.actief {
max-height: 480px;
overflow-y: auto;
}
.klant-zoek-geen-resultaat {
padding: 1rem;
text-align: center;
color: #6b6760;
font-size: 0.88rem;
}
.klant-zoek-resultaat {
width: 100%;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 0.85rem;
background: white;
border: none;
border-bottom: 1px solid #f0ece2;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.12s ease;
}
.klant-zoek-resultaat:hover {
background: #faf8f2;
}
.klant-zoek-resultaat:last-child {
border-bottom: none;
}
.klant-zoek-avatar {
flex-shrink: 0;
width: 36px;
height: 36px;
background: linear-gradient(135deg, #BF863B, #9c6c2a);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.02em;
}
.klant-zoek-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.klant-zoek-info strong {
color: #1a1a17;
font-size: 0.92rem;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.klant-zoek-info span {
color: #6b6760;
font-size: 0.8rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.klant-zoek-pijl {
color: #BF863B;
flex-shrink: 0;
opacity: 0.6;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.klant-zoek-resultaat:hover .klant-zoek-pijl {
transform: translateX(3px);
opacity: 1;
}
@media (max-width: 560px) {
.klant-zoek-rij {
padding: 0.85rem 0.9rem;
}
.klant-zoek-avatar {
width: 32px;
height: 32px;
font-size: 0.72rem;
}
}
/* ============================================
GLOBALE SVG-SIZE PROTECTION
Voorkomt gigantische SVG's bij CSS-conflicten
============================================ */
/* Algemene cap: geen enkele SVG kan groter dan 48px worden
tenzij expliciet ingesteld via inline style, width-attribute, of class */
svg:not([style*="width"]):not([width]):not([class]) {
max-width: 48px;
max-height: 48px;
}
/* Uitzonderingen voor specifieke contexten waar grotere SVG's OK zijn */
.svg-groot,
.handtekening-svg,
.pdf-preview svg,
.logo-groot svg {
max-width: none !important;
max-height: none !important;
}
/* Forceer SVG in formulier-labels altijd klein (alleen als geen inline style) */
label svg:not([style*="width"]):not([width]) {
width: 16px;
height: 16px;
flex-shrink: 0;
display: inline-block;
vertical-align: middle;
}
/* Forceer SVG in knoppen altijd klein (alleen als geen inline style) */
button svg:not([style*="width"]):not([width]) {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* SVG in input-icons */
input + svg:not([style*="width"]):not([width]) {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Klant-zoek input-wrap met search icoon */
.klant-zoek-input-wrap {
position: relative;
}
.klant-zoek-resultaten {
margin-top: 0.6rem;
background: white;
border: 1px solid #e8e4db;
border-radius: 8px;
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease;
}
.klant-zoek-resultaten.actief {
max-height: 480px;
overflow-y: auto;
}
/* ============================================
NIEUWE GEBRUIKER — modal met rol-keuze kaarten
============================================ */
/* Eigenaar-sectie-header met knop rechts */
.eigenaar-sectie-header-flex {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
}
.eigenaar-sectie-header-flex > div:first-child {
flex: 1;
min-width: 220px;
}
/* Rol-keuze kaarten */
.nieuwe-gebruiker-rollen {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-top: 0.35rem;
}
.rol-kaart-keuze {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.85rem 1rem;
background: white;
border: 1.5px solid #e8e4db;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
}
.rol-kaart-keuze:hover {
border-color: #BF863B;
background: #faf8f2;
}
.rol-kaart-keuze input[type="radio"] {
margin-top: 3px;
accent-color: #BF863B;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.rol-kaart-keuze:has(input:checked) {
border-color: #BF863B;
background: #faf6ee;
box-shadow: 0 0 0 3px rgba(191, 134, 59, 0.08);
}
.rol-kaart-inhoud {
flex: 1;
}
.rol-kaart-titel {
font-weight: 700;
color: #1a1a17;
font-size: 0.96rem;
margin-bottom: 0.2rem;
}
.rol-kaart-sub {
color: #6b6760;
font-size: 0.82rem;
line-height: 1.45;
}
/* Foutmelding in nieuwe-gebruiker modal */
.ng-fout {
display: flex;
align-items: flex-start;
gap: 0.55rem;
margin-top: 1rem;
padding: 0.7rem 0.95rem;
background: #fef2f2;
border-left: 3px solid #dc2626;
border-radius: 6px;
color: #991b1b;
font-size: 0.88rem;
line-height: 1.5;
}
/* Mobile */
@media (max-width: 560px) {
.eigenaar-sectie-header-flex {
flex-direction: column;
}
.eigenaar-sectie-header-flex button {
width: 100%;
justify-content: center;
}
.rol-kaart-keuze {
padding: 0.75rem 0.85rem;
}
}
/* ============================================
AFSPRAKEN — gekoppeld rapport + nieuwe knoppen
============================================ */
.afspraak-badge.gekoppeld {
background: rgba(74, 124, 58, 0.12);
color: #2d4a2d;
border: 1px solid rgba(74, 124, 58, 0.3);
padding: 0.15rem 0.55rem;
border-radius: 4px;
font-size: 0.72rem;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
.afspraak-maak-rapport {
color: #BF863B !important;
}
.afspraak-maak-rapport:hover {
background: rgba(191, 134, 59, 0.12) !important;
color: #9c6c2a !important;
}
.afspraak-open-rapport {
color: #2d4a2d !important;
}
.afspraak-open-rapport:hover {
background: rgba(74, 124, 58, 0.12) !important;
color: #1a3320 !important;
}
/* ============================================
FOTO-BIJSCHRIFT in detail-view
============================================ */
.detail-foto-item {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.detail-foto-bijschrift {
font-size: 0.75rem;
color: #6b6760;
font-style: italic;
line-height: 1.35;
text-align: center;
padding: 0 0.2rem;
}
/* ============================================
DETAIL-VIEW — COMPACTER & MOBIEL-VRIENDELIJK
============================================ */
/* Detail-view: container netjes gecentreerd, zoals de rest van de app.
De max-width zit op de .container (die heeft margin:0 auto), NIET op
de .view zelf — anders staat de hele sectie links uitgelijnd. */
#detailView .container {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.detail-header {
padding: 1.4rem 1.6rem !important;
margin-bottom: 1rem !important;
}
.detail-naam {
font-size: clamp(1.4rem, 3vw, 1.85rem) !important;
margin-bottom: 0.25rem !important;
}
.detail-meta {
font-size: 0.88rem !important;
font-style: normal !important;
}
.detail-nummer-badge {
padding: 0.4rem 0.8rem !important;
font-size: 0.85rem !important;
}
.detail-acties {
margin: 1rem 0 1.25rem !important;
gap: 0.45rem !important;
}
.detail-acties .btn-primary,
.detail-acties .btn-secundair {
padding: 0.55rem 1rem !important;
font-size: 0.88rem !important;
}
/* Compactere secties */
.detail-sectie {
padding: 1.2rem 1.4rem !important;
margin-bottom: 0.75rem !important;
}
.detail-sectie h3 {
font-size: 1.02rem !important;
margin-bottom: 0.9rem !important;
padding-bottom: 0.5rem !important;
}
.detail-rij {
grid-template-columns: 150px 1fr !important;
padding: 0.45rem 0 !important;
font-size: 0.9rem !important;
}
.detail-rij-label {
font-size: 0.7rem !important;
}
/* Soort-kaartjes compacter */
.detail-soort-blok {
padding: 0.7rem 0.9rem !important;
margin-top: 0.5rem !important;
}
.detail-soort-blok-label {
font-size: 0.7rem !important;
margin-bottom: 0.3rem !important;
}
/* Foto-grid compacter — meer foto's tegelijk zichtbaar */
.detail-foto-grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
gap: 0.4rem !important;
}
@media (min-width: 768px) {
.detail-foto-grid {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
}
}
/* Detail-foto-bijschrift kleiner */
.detail-foto-bijschrift {
font-size: 0.68rem !important;
line-height: 1.25 !important;
}
/* ===== MOBILE PWA: extra compact en optimaal voor smal scherm ===== */
@media (max-width: 600px) {
#detailView .container {
padding: 0.6rem 0.75rem !important;
}
.detail-header {
padding: 1rem 1.1rem !important;
}
.detail-naam {
font-size: 1.25rem !important;
}
.detail-sectie {
padding: 0.95rem 1.05rem !important;
border-radius: 10px !important;
}
.detail-sectie h3 {
font-size: 0.95rem !important;
}
/* Acties knoppen: full-width op smal scherm, in een grid */
.detail-acties {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.4rem !important;
}
.detail-acties button,
.detail-acties .btn-primary,
.detail-acties .btn-secundair {
width: 100% !important;
justify-content: center !important;
padding: 0.6rem 0.5rem !important;
font-size: 0.82rem !important;
}
/* Eerste actie (PDF download) full-width */
.detail-acties > *:first-child {
grid-column: 1 / -1 !important;
}
/* Rij-layout: label boven waarde op mobiel */
.detail-rij {
grid-template-columns: 1fr !important;
gap: 0.15rem !important;
padding: 0.4rem 0 !important;
font-size: 0.88rem !important;
}
.detail-rij-label {
font-size: 0.66rem !important;
}
/* Foto-grid op mobiel: 3 per rij */
.detail-foto-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.35rem !important;
}
}
/* iPad / tablet portrait */
@media (min-width: 601px) and (max-width: 900px) {
.detail-acties {
gap: 0.5rem !important;
}
}
/* ============================================
COORDINATEN — knop in formulier + modal
============================================ */
.coordinaten-blok {
background: linear-gradient(135deg, rgba(191, 134, 59, 0.06), rgba(191, 134, 59, 0.02));
border: 1px solid rgba(191, 134, 59, 0.2);
border-radius: 10px;
padding: 0.85rem 1.05rem;
margin-bottom: 1rem;
margin-top: -0.5rem;
}
.coordinaten-info {
display: flex;
align-items: center;
gap: 1rem;
justify-content: space-between;
flex-wrap: wrap;
}
.coordinaten-info-tekst {
flex: 1;
min-width: 180px;
}
.coordinaten-info-label {
display: flex;
align-items: center;
gap: 0.4rem;
color: #BF863B;
font-weight: 700;
font-size: 0.85rem;
margin-bottom: 0.2rem;
letter-spacing: 0.01em;
}
.coordinaten-waarde {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.88rem;
color: #1a1a17;
font-weight: 600;
}
.coordinaten-leeg {
color: #6b6760;
font-size: 0.85rem;
font-style: italic;
}
.coordinaten-knop {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 0.95rem;
background: white;
border: 1.5px solid #BF863B;
color: #BF863B;
border-radius: 7px;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.15s ease;
font-family: inherit;
white-space: nowrap;
}
.coordinaten-knop:hover {
background: #BF863B;
color: white;
transform: translateY(-1px);
}
/* OF-scheiding in modal */
.coord-divider {
display: flex;
align-items: center;
margin: 1.25rem 0;
color: #b8b3a8;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
}
.coord-divider::before,
.coord-divider::after {
content: '';
flex: 1;
height: 1px;
background: #e8e4db;
}
.coord-divider span {
padding: 0 0.85rem;
}
/* Status-melding in modal */
.coord-status {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.95rem;
border-radius: 6px;
font-size: 0.88rem;
margin-top: 1rem;
line-height: 1.4;
}
.coord-status-info {
background: #f0f9ff;
border-left: 3px solid #0284c7;
color: #075985;
}
.coord-status-succes {
background: #f0fdf4;
border-left: 3px solid #16a34a;
color: #14532d;
}
.coord-status-fout {
background: #fef2f2;
border-left: 3px solid #dc2626;
color: #991b1b;
}
/* Mobile */
@media (max-width: 560px) {
.coordinaten-info {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
}
.coordinaten-knop {
width: 100%;
justify-content: center;
}
}
/* ============================================
MOBIEL/PWA OPTIMALISATIE — Soort-items en formulier
Gericht op fijn werken vanaf telefoon
============================================ */
/* Foto-blok bovenaan: prominente call-to-action op mobile */
@media (max-width: 600px) {
.foto-blok {
background: rgba(191, 134, 59, 0.04);
border: 1px solid rgba(191, 134, 59, 0.18);
border-radius: 12px;
padding: 0.9rem 0.9rem 1rem !important;
margin-bottom: 1rem !important;
}
.foto-blok .veld-label {
font-size: 0.92rem !important;
font-weight: 700 !important;
margin-bottom: 0.3rem !important;
}
.foto-blok .veld-toelichting {
font-size: 0.78rem !important;
margin-bottom: 0.7rem !important;
}
/* Foto-knoppen full-width op mobile, naast elkaar */
.foto-acties {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.5rem !important;
margin-top: 0.6rem !important;
}
.foto-knop {
padding: 0.85rem 0.6rem !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
justify-content: center !important;
white-space: nowrap !important;
}
/* Foto-galerij: groter en duidelijker op mobile */
.foto-galerij {
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.45rem !important;
}
.foto-thumb {
aspect-ratio: 1 / 1 !important;
border-radius: 8px !important;
}
/* Verwijder + identificeer knoppen op thumbs groter (touch-friendly) */
.foto-verwijder,
.foto-identificeer {
min-width: 34px !important;
min-height: 34px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Soort-item compacter maar touch-friendly */
.soort-item {
padding: 1rem 0.85rem !important;
border-radius: 12px !important;
margin-bottom: 1rem !important;
}
.soort-item-titel {
font-size: 0.92rem !important;
margin-bottom: 0.85rem !important;
padding-right: 5.5rem !important; /* ruimte voor verwijder-knop */
}
.soort-verwijder {
padding: 0.5rem 0.65rem !important;
font-size: 0.78rem !important;
top: 0.85rem !important;
right: 0.65rem !important;
}
.soort-verwijder span {
display: none !important; /* alleen icoon op mobile */
}
/* Velden onder elkaar — geen kolommen */
.soort-item .veld {
margin-bottom: 0.95rem !important;
}
.veld-label {
font-size: 0.78rem !important;
margin-bottom: 0.3rem !important;
}
.veld-toelichting {
font-size: 0.75rem !important;
margin-bottom: 0.35rem !important;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
font-size: 16px !important; /* voorkomt zoom op iOS */
padding: 0.7rem 0.85rem !important;
border-radius: 8px !important;
}
/* Toelichting-textarea iets compacter */
.soort-toelichting-textarea {
min-height: 100px !important;
font-size: 14px !important;
}
.toelichting-blok {
padding: 0.85rem !important;
margin: 0.85rem 0 !important;
}
/* Actieplan blok mobile */
.actie-blok {
padding: 0.85rem !important;
margin: 0.85rem 0 !important;
}
/* Actieplan-keuze knoppen full-width op mobile */
.actieplan-keuze {
grid-template-columns: 1fr !important;
gap: 0.45rem !important;
}
.actieplan-optie {
padding: 0.7rem 0.85rem !important;
}
}
/* Soort-toevoegen knop prominent op mobile */
@media (max-width: 600px) {
.knop-toevoegen {
width: 100% !important;
justify-content: center !important;
padding: 0.9rem 1rem !important;
font-size: 0.92rem !important;
font-weight: 700 !important;
margin-top: 0.5rem !important;
}
}
/* Form-sectie containers compacter op mobile */
@media (max-width: 600px) {
.form-sectie {
padding: 1.1rem 1rem !important;
margin-bottom: 0.85rem !important;
border-radius: 12px !important;
}
.sectie-titel {
font-size: 1.05rem !important;
margin-bottom: 0.85rem !important;
}
.sectie-beschrijving {
font-size: 0.83rem !important;
margin-bottom: 0.85rem !important;
}
.sectie-nummer {
width: 28px !important;
height: 28px !important;
font-size: 0.85rem !important;
}
}
/* (verouderde stappen-balk regel verwijderd — zie definitieve fix onderaan) */
/* Container padding op mobile */
@media (max-width: 600px) {
.container,
main > .container {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
}
/* iOS safe-area onderkant — voor PWA met home-indicator */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
body {
padding-bottom: env(safe-area-inset-bottom);
}
}
/* ════════════════════════════════════════════════
MOBIEL/PWA — RAPPORT-FORMULIER OPTIMALISATIE v94
Maakt het aanmaken van rapporten op telefoon
overzichtelijker, sneller en professioneler
════════════════════════════════════════════════ */
@media (max-width: 600px) {
/* === Voortgangsbalk: compact, sticky, horizontaal scrollbaar === */
.voortgang-blok {
padding: 0.8rem 0.9rem !important;
margin-bottom: 1rem !important;
border-radius: 12px !important;
/* Sticky onder de hoofdnavigatie */
position: sticky !important;
top: 56px !important;
z-index: 40 !important;
background: rgba(255, 255, 255, 0.96) !important;
backdrop-filter: blur(10px) !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}
.voortgang-header {
margin-bottom: 0.45rem !important;
}
.voortgang-label {
font-size: 0.72rem !important;
}
.voortgang-percentage {
font-size: 1rem !important;
}
.voortgang-balk {
height: 5px !important;
margin-bottom: 0.7rem !important;
}
/* Tabs: horizontaal scrollbaar i.p.v. wrappen — bespaart verticale ruimte */
.voortgang-tabs {
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 0.4rem !important;
padding-bottom: 0.25rem !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
.voortgang-tabs::-webkit-scrollbar {
display: none !important;
}
.voortgang-tab {
flex-shrink: 0 !important;
padding: 0.45rem 0.7rem !important;
font-size: 0.78rem !important;
white-space: nowrap !important;
}
/* === Form-secties: ruimer, duidelijker, kaart-stijl === */
.form-sectie {
padding: 1.1rem 0.95rem !important;
margin-bottom: 0.9rem !important;
border-radius: 14px !important;
box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
}
.sectie-titel {
font-size: 1.08rem !important;
margin-bottom: 0.4rem !important;
display: flex !important;
align-items: center !important;
gap: 0.55rem !important;
}
.sectie-nummer {
width: 26px !important;
height: 26px !important;
font-size: 0.82rem !important;
flex-shrink: 0 !important;
}
.sectie-beschrijving {
font-size: 0.82rem !important;
margin-bottom: 1rem !important;
line-height: 1.45 !important;
}
/* === Velden: groter en makkelijker te tappen === */
.veld {
margin-bottom: 1rem !important;
}
.veld:last-child {
margin-bottom: 0 !important;
}
.veld-label {
font-size: 0.8rem !important;
font-weight: 700 !important;
margin-bottom: 0.35rem !important;
letter-spacing: 0.02em !important;
}
.veld-toelichting {
font-size: 0.76rem !important;
margin-bottom: 0.4rem !important;
line-height: 1.4 !important;
}
/* Inputs: 16px voorkomt iOS-zoom, ruime tap-target */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
font-size: 16px !important;
padding: 0.75rem 0.85rem !important;
border-radius: 10px !important;
min-height: 46px !important;
}
textarea {
min-height: 90px !important;
line-height: 1.5 !important;
}
/* === Ja/Nee keuze-knoppen groter === */
.janee-groep,
.ja-nee-groep {
gap: 0.5rem !important;
}
.janee-optie,
.ja-nee-optie {
padding: 0.8rem 0.5rem !important;
font-size: 0.9rem !important;
min-height: 48px !important;
}
/* === Onderste actie-knoppen: sticky balk onderaan scherm === */
.rapport-acties,
.formulier-acties {
position: sticky !important;
bottom: 0 !important;
background: rgba(255,255,255,0.97) !important;
backdrop-filter: blur(10px) !important;
margin: 1rem -0.75rem 0 !important;
padding: 0.8rem 0.75rem !important;
padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px)) !important;
border-top: 1px solid var(--kleur-grens) !important;
z-index: 35 !important;
display: flex !important;
gap: 0.5rem !important;
}
.rapport-acties button,
.formulier-acties button {
flex: 1 !important;
padding: 0.85rem 0.5rem !important;
font-size: 0.88rem !important;
font-weight: 700 !important;
justify-content: center !important;
min-height: 48px !important;
}
/* PDF-knop / hoofdactie krijgt accent */
.rapport-acties .btn-primary,
.formulier-acties .btn-primary {
flex: 1.4 !important;
}
/* === Detailadvies-sectie === */
.pdf-instellingen-sectie {
padding: 1rem 0.9rem !important;
}
/* === Toelichting-blok (binnen soort) === */
.toelichting-blok {
border-radius: 12px !important;
}
/* === Algemene container-marge kleiner === */
.rapport-formulier,
#rapportFormulier {
padding-bottom: 1rem !important;
}
}
/* === Tablet / iPad portret: tussenmaat === */
@media (min-width: 601px) and (max-width: 900px) {
.voortgang-tabs {
gap: 0.45rem !important;
}
.form-sectie {
padding: 1.4rem 1.5rem !important;
}
}
/* === PWA standalone: extra ademruimte bovenaan (geen browser-balk) === */
@media (display-mode: standalone) {
.voortgang-blok {
top: 8px !important;
}
}
/* Vloeiend scrollen bij tab-klik op alle schermen */
html {
scroll-behavior: smooth;
}
/* ════════════════════════════════════════════════
OMGEVINGSFOTO'S — overzichtsfoto's van het perceel
════════════════════════════════════════════════ */
.omgevingsfotos-blok {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px dashed var(--kleur-grens);
}
.omgevingsfotos-blok .veld-label {
color: var(--kleur-tekst);
}
@media (max-width: 600px) {
.omgevingsfotos-blok {
margin-top: 1rem;
padding-top: 1rem;
}
}
/* ════════════════════════════════════════════════
STAPPEN-BALK — nette genummerde voortgang met lijnen
════════════════════════════════════════════════ */
.voortgang-stappen {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0;
padding: 0.5rem 0.25rem 0.25rem;
width: 100%;
}
/* Eén stap = cirkel + label eronder */
.stap {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
background: transparent;
border: none !important;
cursor: pointer;
padding: 0;
margin: 0;
min-height: 0 !important;
height: auto !important;
font-family: inherit;
flex-shrink: 0;
flex: 1;
min-width: 0;
transition: transform 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
.stap:hover {
transform: translateY(-2px);
}
.stap:focus {
outline: none;
}
/* De cirkel met nummer of vinkje */
.stap-cirkel {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--kleur-wit, #fff);
border: 2px solid var(--kleur-grens, #e0dccf);
color: var(--kleur-tekst-zacht, #8a8578);
transition: all 0.25s ease;
flex-shrink: 0;
box-sizing: border-box;
}
.stap-nummer {
font-size: 0.88rem;
font-weight: 700;
line-height: 1;
}
/* Compleet: groene cirkel met wit vinkje */
.stap-compleet .stap-cirkel {
background: #4a7c3a;
border-color: #4a7c3a;
color: #fff;
box-shadow: 0 2px 8px rgba(74, 124, 58, 0.3);
}
.stap:hover .stap-cirkel {
border-color: #BF863B;
}
.stap-compleet:hover .stap-cirkel {
border-color: #4a7c3a;
}
/* Label onder de cirkel */
.stap-label {
font-size: 0.74rem;
font-weight: 600;
color: var(--kleur-tekst-zacht, #8a8578);
text-align: center;
line-height: 1.25;
transition: color 0.25s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.stap-compleet .stap-label {
color: #3a6a2a;
font-weight: 700;
}
/* Verbindingslijn tussen twee stappen — ligt op cirkel-midden hoogte */
.stap-lijn {
flex: 1;
height: 2.5px;
background: var(--kleur-grens, #e0dccf);
margin-top: 15px; /* = halve cirkelhoogte (32/2) - halve lijndikte */
min-width: 8px;
border-radius: 2px;
transition: background 0.3s ease;
}
.stap-lijn-compleet {
background: #4a7c3a;
}
/* === Mobiel: compacter maar nog steeds nette rij === */
@media (max-width: 600px) {
.voortgang-stappen {
padding: 0.15rem 0 0;
}
.stap {
width: 3.7rem;
gap: 0.3rem;
}
.stap-cirkel {
width: 26px;
height: 26px;
border-width: 2px;
}
.stap-nummer {
font-size: 0.78rem;
}
.stap-cirkel svg {
width: 12px !important;
height: 12px !important;
}
.stap-label {
font-size: 0.64rem;
}
.stap-lijn {
margin-top: 12px;
min-width: 0.25rem;
}
}
/* Heel smal scherm (<360px): labels iets kleiner */
@media (max-width: 360px) {
.stap {
width: 3.2rem;
}
.stap-label {
font-size: 0.6rem;
}
}
/* ════════════════════════════════════════════════════════════
███ DEFINITIEVE MOBIEL/PWA LAYOUT-FIX ███
Dit blok staat bewust als LAATSTE in het bestand en overschrijft
alle eerdere, tegenstrijdige sticky-regels. Eén consistent systeem:
- app-header: vaste hoogte, sticky bovenaan
- voortgang-blok: sticky direct daaronder, exact uitgelijnd
- geen enkele overlap meer
════════════════════════════════════════════════════════════ */
/* CSS-variabele voor de header-hoogte zodat alles consistent uitlijnt */
:root {
--mobiel-header-hoogte: 60px;
}
@media (max-width: 600px) {
/* ─── HEADER: vaste, voorspelbare hoogte ─── */
.app-header {
position: sticky !important;
top: 0 !important;
z-index: 200 !important;
/* safe-area bovenaan voor notch (PWA) */
padding-top: env(safe-area-inset-top, 0px) !important;
}
.header-inner {
padding: 0.6rem 0.85rem !important;
min-height: var(--mobiel-header-hoogte) !important;
box-sizing: border-box !important;
}
.brand-logo {
height: 32px !important;
}
.brand-product {
font-size: 0.95rem !important;
}
.brand-sub {
font-size: 0.62rem !important;
}
/* ─── VOORTGANGSBALK: sticky exact onder de header ─── */
.voortgang-blok {
position: sticky !important;
/* exact onder header: header-hoogte + safe-area */
top: calc(var(--mobiel-header-hoogte) + env(safe-area-inset-top, 0px)) !important;
z-index: 90 !important;
margin: 0 0 1rem 0 !important;
border-radius: 0 0 14px 14px !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
padding: 0.75rem 0.9rem !important;
}
/* ─── SCROLL-PADDING: bij tab-klik scrollt sectie netjes onder beide balken ─── */
html {
scroll-padding-top: calc(var(--mobiel-header-hoogte) + 130px + env(safe-area-inset-top, 0px)) !important;
}
/* ─── FORM-SECTIES: geen overlap met sticky balken ─── */
.form-sectie {
scroll-margin-top: calc(var(--mobiel-header-hoogte) + 130px + env(safe-area-inset-top, 0px)) !important;
}
/* ─── STICKY ACTIE-KNOPPEN ONDERAAN: niet over de inhoud heen ─── */
.form-acties {
position: sticky !important;
bottom: 0 !important;
z-index: 80 !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
margin: 1.5rem -0.75rem 0 !important;
padding: 0.75rem 0.85rem !important;
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
border-top: 1px solid var(--kleur-grens, #e8e4db) !important;
box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08) !important;
display: flex !important;
gap: 0.5rem !important;
}
.form-acties button {
flex: 1 !important;
justify-content: center !important;
min-height: 48px !important;
font-size: 0.88rem !important;
font-weight: 700 !important;
}
.form-acties .btn-primary {
flex: 1.5 !important;
}
/* Zorg dat de laatste inhoud niet achter de sticky knoppenbalk verdwijnt */
.rapport-form,
#rapportForm {
padding-bottom: 1rem !important;
}
/* ─── DROPDOWN-MENU: altijd boven alles, geen overlap ─── */
.nav-dropdown {
z-index: 250 !important;
}
.gebruiker-dropdown,
.gebruiker-menu {
z-index: 250 !important;
}
/* ─── MODALS: altijd helemaal bovenaan ─── */
.modal-overlay {
z-index: 500 !important;
/* safe-area zodat modal niet achter notch/home-indicator komt */
padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) 0.5rem
calc(env(safe-area-inset-bottom, 0px) + 0.5rem) !important;
}
.modal-paneel {
max-height: calc(100vh - env(safe-area-inset-top, 0px)
- env(safe-area-inset-bottom, 0px) - 1rem) !important;
overflow-y: auto !important;
}
/* ─── TOAST: boven de sticky knoppenbalk, niet erachter ─── */
.toast {
bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem) !important;
}
/* ─── OFFLINE-INDICATOR: niet over knoppen heen ─── */
.offline-indicator,
#offlineIndicator {
z-index: 70 !important;
bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem) !important;
}
/* ─── SYNC-INDICATOR: rechtsboven, los van andere elementen ─── */
.sync-indicator,
#syncIndicator {
z-index: 70 !important;
}
/* ─── DETAIL-VIEW: knoppen niet plakkend (anders dubbel sticky) ─── */
.detail-acties {
position: static !important;
}
/* ─── CONTAINER: consistente marges ─── */
.container,
main > .container {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
/* Algemeen: voorkom horizontale overflow (veroorzaakt rare overlap) */
body, #app, main {
overflow-x: hidden !important;
max-width: 100vw !important;
}
}
/* ─── PWA STANDALONE: header tegen bovenrand, achtergrond achter notch ─── */
@media (display-mode: standalone) and (max-width: 600px) {
body {
background: var(--kleur-zwart, #010202);
}
.app-header {
/* notch-ruimte al via padding-top hierboven */
background: var(--kleur-zwart, #010202) !important;
}
}
/* ─── ZEER SMAL SCHERM (<360px): nog compacter ─── */
@media (max-width: 360px) {
.header-inner {
padding: 0.5rem 0.7rem !important;
}
.brand-sub {
display: none !important; /* bespaar ruimte */
}
.voortgang-blok {
padding: 0.6rem 0.7rem !important;
}
}
/* Hint-tekst onder een invoerveld (bv. Mollie-link uitleg) */
.veld-hint {
margin-top: 0.35rem;
font-size: 0.78rem;
line-height: 1.4;
color: var(--kleur-tekst-zacht, #8a8578);
}
/* Mollie-betaallink rij: invoerveld + knop naast elkaar */
.mollie-link-rij {
display: flex;
gap: 0.5rem;
align-items: stretch;
}
.mollie-link-rij input {
flex: 1;
min-width: 0;
}
.mollie-link-rij .btn-secundair {
flex-shrink: 0;
white-space: nowrap;
}
@media (max-width: 600px) {
.mollie-link-rij {
flex-direction: column;
}
.mollie-link-rij .btn-secundair {
width: 100%;
justify-content: center;
}
}
/* Getalveld met eenheid ernaast (bv. m² bij aangetroffen exoot) */
.getal-veld-wrap {
display: flex;
align-items: stretch;
gap: 0;
}
.getal-veld-wrap input {
flex: 1;
min-width: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.getal-veld-suffix {
display: flex;
align-items: center;
padding: 0 0.9rem;
background: var(--kleur-grens, #e8e4db);
color: var(--kleur-tekst, #4a4a44);
font-weight: 600;
font-size: 0.9rem;
border: 1px solid var(--kleur-grens, #e8e4db);
border-left: none;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
white-space: nowrap;
}
/* "Alleen-lezen" melding in detail-view (rapport van andere inspecteur) */
.detail-alleen-lezen {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.9rem;
background: var(--kleur-grens, #e8e4db);
color: var(--kleur-tekst, #4a4a44);
border-radius: 8px;
font-size: 0.85rem;
font-weight: 500;
}
.detail-alleen-lezen svg { color: var(--kleur-tekst-zacht, #8a8578); }
/* ════════════════════════════════════════════════
FACTUUR-MODAL — opgepoetst, nette knoppen
════════════════════════════════════════════════ */
/* "Regel toevoegen" knop — netjes met gouden accent */
.btn-toevoegen {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.75rem;
padding: 0.6rem 1rem;
background: rgba(191, 134, 59, 0.08);
border: 1.5px dashed var(--kleur-primair, #BF863B);
border-radius: 9px;
color: var(--kleur-primair-donker, #9C6C2A);
font-family: inherit;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-toevoegen:hover {
background: rgba(191, 134, 59, 0.16);
border-style: solid;
}
.btn-toevoegen:active {
transform: scale(0.98);
}
/* Factuur klant-blok netjes */
.factuur-klant-blok {
background: var(--kleur-oppervlak, #faf8f3);
border: 1px solid var(--kleur-grens-mat, #e8e4db);
border-radius: 12px;
padding: 1rem 1.15rem;
line-height: 1.55;
font-size: 0.92rem;
}
.factuur-klant-blok > div:first-child {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--kleur-tekst-zacht);
margin-bottom: 0.2rem;
}
.factuur-klant-email {
color: var(--kleur-primair-donker, #9C6C2A);
font-weight: 600;
margin-top: 0.3rem;
}
.factuur-geen-email {
color: var(--kleur-gevaar, #b8412a);
font-size: 0.82rem;
margin-top: 0.4rem;
line-height: 1.4;
}
/* Veld-hint algemeen netjes binnen modals */
.factuur-instellingen-grid .veld { min-width: 0; }
.factuur-instellingen-grid label.veld-label {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--kleur-tekst-zacht);
display: block;
margin-bottom: 0.35rem;
}
.factuur-instellingen-grid input,
.factuur-instellingen-grid textarea {
width: 100%;
box-sizing: border-box;
padding: 0.65rem 0.8rem;
border: 1px solid var(--kleur-grens);
border-radius: 8px;
font-family: inherit;
font-size: 0.92rem;
background: var(--kleur-wit, #fff);
}
.factuur-instellingen-grid input:focus,
.factuur-instellingen-grid textarea:focus {
outline: none;
border-color: var(--kleur-primair);
box-shadow: 0 0 0 3px rgba(191, 134, 59, 0.15);
}
/* ─── MOBIEL / iPad / PWA — factuurmodal vult scherm netjes ─── */
@media (max-width: 820px) {
.btn-toevoegen {
width: 100%;
justify-content: center;
padding: 0.8rem;
font-size: 0.92rem;
}
}
@media (max-width: 600px) {
/* Modal vult bijna het hele scherm op de telefoon */
.modal {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-radius: 16px 16px 0 0 !important;
max-height: 95vh !important;
align-self: flex-end;
}
/* Inhoud scrollt, koppen + actieknoppen blijven staan */
.modal-inhoud {
max-height: calc(95vh - 170px) !important;
-webkit-overflow-scrolling: touch;
}
/* Actieknoppen onderaan: vol scherm, safe-area voor home-indicator */
.modal-acties {
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
position: sticky;
bottom: 0;
background: var(--kleur-wit, #fff);
border-top: 1px solid var(--kleur-grens-mat, #e8e4db);
}
.factuur-sectie-titel {
font-size: 0.95rem;
margin: 1.25rem 0 0.7rem;
}
.factuur-totalen {
padding: 0.9rem 1rem;
}
.totalen-rij-totaal {
font-size: 1.15rem;
}
}
/* ─── iPad / tablet: modal lekker breed maar niet te breed ─── */
@media (min-width: 601px) and (max-width: 1024px) {
.modal {
max-width: 90vw !important;
}
}
/* ════════════════════════════════════════════════
FACTUUR-BLOK in de afspraak-modal
════════════════════════════════════════════════ */
.afspraak-factuur-blok {
background: var(--kleur-oppervlak, #faf8f3);
border: 1px solid var(--kleur-grens-mat, #e8e4db);
border-radius: 12px;
padding: 0.9rem 1rem;
}
.afspraak-factuur-toggle {
display: flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
font-weight: 600;
font-size: 0.92rem;
color: var(--kleur-zwart, #1a1a17);
}
.afspraak-factuur-toggle input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--kleur-primair, #BF863B);
flex-shrink: 0;
cursor: pointer;
}
.afspraak-factuur-detail {
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px dashed var(--kleur-grens, #ddd6c8);
}
.afspraak-factuur-detail input {
width: 100%;
box-sizing: border-box;
padding: 0.6rem 0.75rem;
border: 1px solid var(--kleur-grens);
border-radius: 8px;
font-family: inherit;
font-size: 0.95rem;
}
.afspraak-factuur-detail input:focus {
outline: none;
border-color: var(--kleur-primair);
box-shadow: 0 0 0 3px rgba(191, 134, 59, 0.15);
}
.afspraak-factuur-hint {
margin-top: 0.6rem;
font-size: 0.8rem;
line-height: 1.45;
color: var(--kleur-tekst-zacht, #8a8578);
}
@media (max-width: 600px) {
.afspraak-factuur-detail input { font-size: 16px; }
}
/* Bedrag-rij met standaardtarief-knop in afspraak-factuurblok */
.afspraak-bedrag-rij {
display: flex;
gap: 0.5rem;
align-items: stretch;
}
.afspraak-bedrag-rij input {
flex: 1;
min-width: 0;
}
.afspraak-standaard-knop {
flex-shrink: 0;
padding: 0 0.85rem;
background: rgba(191, 134, 59, 0.1);
border: 1px solid var(--kleur-primair, #BF863B);
border-radius: 8px;
color: var(--kleur-primair-donker, #9C6C2A);
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease;
}
.afspraak-standaard-knop:hover {
background: rgba(191, 134, 59, 0.2);
}
/* Live totaal-weergave (subtotaal + BTW + totaal) */
.afspraak-factuur-totaal {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin-top: 0.7rem;
padding: 0.65rem 0.8rem;
background: var(--kleur-wit, #fff);
border: 1px solid var(--kleur-grens, #ddd6c8);
border-radius: 8px;
font-size: 0.86rem;
color: var(--kleur-tekst, #4a4a44);
}
.afspraak-totaal-groot {
font-weight: 700;
font-size: 1rem;
color: var(--kleur-primair-donker, #9C6C2A);
margin-top: 0.2rem;
padding-top: 0.3rem;
border-top: 1px solid var(--kleur-grens-mat, #e8e4db);
}
.afspraak-totaal-leeg {
color: var(--kleur-tekst-zacht, #8a8578);
font-style: italic;
}
@media (max-width: 600px) {
.afspraak-standaard-knop { font-size: 0.78rem; padding: 0 0.6rem; }
}
/* Toegewezen inspecteur badge op afspraak-kaart */
.afspraak-toegewezen {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.15rem 0.5rem;
background: rgba(191, 134, 59, 0.1);
color: var(--kleur-primair-donker, #9C6C2A);
border-radius: 6px;
font-size: 0.78rem;
font-weight: 600;
}
/* Profiel-actiebalk (Bewerken / Opslaan / Annuleren) */
.profiel-actie-balk {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
margin: 0 0 1.2rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--kleur-grens-mat, #e8e4db);
}
.profiel-actie-balk button {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
@media (max-width: 600px) {
.profiel-actie-balk {
flex-direction: column-reverse;
}
.profiel-actie-balk button {
width: 100%;
justify-content: center;
}
}
/* Extra gebruikers-info in rollen-tabel */
.rollen-telefoon,
.rollen-functie {
font-size: 0.78rem;
color: var(--kleur-tekst-zacht, #8a8578);
margin-top: 0.1rem;
}
.rollen-telefoon::before { content: '☎ '; }
.rollen-functie::before { content: '👤 '; }
/* Bewerk-gebruiker modal */
.bewerk-gebruiker-header {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.9rem 1rem;
background: var(--kleur-oppervlak, #faf8f3);
border: 1px solid var(--kleur-grens-mat, #e8e4db);
border-radius: 12px;
margin-bottom: 1.25rem;
}
.rollen-avatar.groot {
width: 48px;
height: 48px;
font-size: 1rem;
flex-shrink: 0;
}
.bewerk-gebruiker-email {
font-weight: 600;
color: var(--kleur-zwart, #1a1a17);
margin-bottom: 0.15rem;
}
.bewerk-gebruiker-rol-info {
font-size: 0.82rem;
color: var(--kleur-tekst-zacht, #8a8578);
}
.bewerk-gebruiker-rol-info strong {
color: var(--kleur-primair-donker, #9C6C2A);
}
/* Meerdere acties op één rij */
.rollen-acties { display: flex; gap: 0.4rem; flex-wrap: wrap; }
@media (max-width: 600px) {
.rollen-acties .btn-mini { flex: 1; }
}
/* Melding "rol staat vast" voor administratie in nieuwe-gebruiker modal */
.rol-vast-melding {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.8rem 1rem;
background: rgba(191, 134, 59, 0.08);
border: 1px solid var(--kleur-grens, #ddd6c8);
border-radius: 10px;
color: var(--kleur-tekst, #4a4a44);
font-size: 0.9rem;
line-height: 1.4;
}
.rol-vast-melding svg {
color: var(--kleur-primair, #BF863B);
}
.rol-vast-melding strong {
color: var(--kleur-primair-donker, #9C6C2A);
}
/* Opslag-status: offline opgeslagen — duidelijk dat het lokaal staat
en automatisch syncroniseert zodra er weer verbinding is */
.opslag-status.offline {
background: rgba(191, 134, 59, 0.12);
color: var(--kleur-primair-donker, #9C6C2A);
border-color: rgba(191, 134, 59, 0.4);
}
.opslag-status.offline::before {
content: '⬇';
margin-right: 0.3rem;
}
/* ════════════════════════════════════════════════════════════════
PROFESSIONELE UPGRADE — verfijning van bestaande stijlen
Niets vervangt eerder werk; deze regels finetunen het geheel.
════════════════════════════════════════════════════════════════ */
/* ─── TYPOGRAFIE ─── meer karakter, betere leesbaarheid */
body {
font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1;
text-rendering: optimizeLegibility;
}
h1, h2, h3 {
letter-spacing: -0.02em;
line-height: 1.15;
}
h1 { font-weight: 700; }
h2 { font-weight: 650; }
.lijst-titel, .bewerk-titel, .detail-titel {
letter-spacing: -0.025em;
}
/* ─── KLEUR-VERFIJNING ─── iets warmer, minder fel */
:root {
--kleur-achtergrond: #faf8f3;
--kleur-oppervlak-mat: #f4f0e8;
--schaduw-laag: 0 1px 2px rgba(20, 14, 4, 0.04), 0 0 0 1px rgba(20, 14, 4, 0.04);
--schaduw-medium: 0 4px 12px -2px rgba(20, 14, 4, 0.08), 0 2px 4px -1px rgba(20, 14, 4, 0.04);
--schaduw-hoog: 0 12px 32px -4px rgba(20, 14, 4, 0.12), 0 4px 8px -2px rgba(20, 14, 4, 0.06);
--schaduw-goud: 0 4px 14px -2px rgba(191, 134, 59, 0.25);
}
/* ─── PRIMAIRE KNOP ─── met subtiele gradient, voelt rijker */
.btn-primary {
background: linear-gradient(135deg, #C4923F 0%, #B07B30 100%);
box-shadow: var(--schaduw-goud), inset 0 1px 0 rgba(255, 255, 255, 0.18);
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.btn-primary:hover:not(:disabled) {
background: linear-gradient(135deg, #cd9c4c 0%, #b78437 100%);
box-shadow: 0 6px 20px -2px rgba(191, 134, 59, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.22);
transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
transform: translateY(0);
box-shadow: var(--schaduw-laag);
}
.btn-primary:disabled {
opacity: 0.55;
cursor: not-allowed;
background: linear-gradient(135deg, #b89868 0%, #a18757 100%);
}
/* ─── SECUNDAIRE KNOP ─── strakker, premium-touch */
.btn-secundair {
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
transition: all 0.15s ease;
box-shadow: var(--schaduw-laag);
}
.btn-secundair:hover:not(:disabled) {
border-color: var(--kleur-primair);
color: var(--kleur-primair-donker);
background: #fdfcfa;
transform: translateY(-1px);
}
/* ─── KAARTEN ─── meer diepte, levendiger */
.rapport-kaart,
.klant-kaart,
.factuur-kaart,
.afspraak-kaart,
.eigenaar-sectie,
.inspecteur-card,
.bedrijfs-info-grid {
box-shadow: var(--schaduw-laag);
transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.rapport-kaart:hover,
.klant-kaart:hover,
.factuur-kaart:hover,
.afspraak-kaart:hover {
box-shadow: var(--schaduw-medium);
transform: translateY(-2px);
border-color: rgba(191, 134, 59, 0.3);
}
/* ─── INVOERVELDEN ─── premium focus-stijl */
input[type="text"]:not(.search-input),
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
input[type="url"],
select,
textarea {
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
background: var(--kleur-wit);
}
input[type="text"]:focus:not(.search-input),
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--kleur-primair);
box-shadow: 0 0 0 4px rgba(191, 134, 59, 0.13);
background: var(--kleur-wit);
}
/* ─── STATUS-BALK opslag — verfijnd */
.opslag-status {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: all 0.25s ease;
font-weight: 600;
letter-spacing: -0.01em;
}
.opslag-status.opgeslagen {
background: rgba(74, 124, 58, 0.08);
border: 1px solid rgba(74, 124, 58, 0.2);
color: #3d6630;
}
.opslag-status.bezig {
background: rgba(191, 134, 59, 0.08);
border: 1px solid rgba(191, 134, 59, 0.2);
}
/* ─── HEADER ─── strakker met fijne gouden lijn */
.app-header {
box-shadow:
0 1px 0 rgba(191, 134, 59, 0.4),
0 2px 0 var(--kleur-primair),
0 8px 24px -4px rgba(0, 0, 0, 0.18);
}
/* ─── NIEUW RAPPORT KNOP ─── prominenter, signature-knop */
#btnNieuw {
background: linear-gradient(135deg, #C4923F 0%, #9C6C2A 100%);
padding: 0.7rem 1.2rem;
font-size: 0.82rem;
letter-spacing: 0.06em;
box-shadow: 0 4px 14px -2px rgba(191, 134, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* ─── GEBRUIKER-BADGE rechtsboven — premium look ─── */
.gebruiker-knop {
transition: background 0.2s ease;
}
.gebruiker-knop:hover {
background: rgba(191, 134, 59, 0.12);
}
/* ─── BADGES op rapporten ─── strakker */
.status-pil, .factuur-status-pil, .rol-pill,
.afspraak-badge, .afspraak-toegewezen {
font-size: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 700;
padding: 0.22rem 0.6rem;
border-radius: 999px;
line-height: 1.4;
}
/* ─── DASHBOARD-STATISTIEKEN ─── eleganter ─── */
.statistiek-kaart {
box-shadow: var(--schaduw-laag);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.statistiek-kaart:hover {
transform: translateY(-1px);
box-shadow: var(--schaduw-medium);
}
.statistiek-cijfer {
font-feature-settings: 'tnum' 1;
letter-spacing: -0.04em;
}
/* ─── MODAL-VERFIJNING ─── betere diepte ─── */
.modal-overlay {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background: rgba(20, 14, 4, 0.5);
animation: fadeIn 0.2s ease;
}
.modal-paneel {
box-shadow:
0 24px 64px -12px rgba(20, 14, 4, 0.25),
0 8px 16px -4px rgba(20, 14, 4, 0.1);
animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ─── LIJST-VERSCHIJN-ANIMATIE — content komt zacht binnen ─── */
.lijst-grid > *,
.klanten-grid > *,
.facturen-grid > * {
animation: kaartVerschijnt 0.35s ease-out backwards;
}
.lijst-grid > *:nth-child(1) { animation-delay: 0.02s; }
.lijst-grid > *:nth-child(2) { animation-delay: 0.05s; }
.lijst-grid > *:nth-child(3) { animation-delay: 0.08s; }
.lijst-grid > *:nth-child(4) { animation-delay: 0.11s; }
.lijst-grid > *:nth-child(5) { animation-delay: 0.14s; }
.lijst-grid > *:nth-child(6) { animation-delay: 0.17s; }
.lijst-grid > *:nth-child(7) { animation-delay: 0.20s; }
.lijst-grid > *:nth-child(8) { animation-delay: 0.23s; }
@keyframes kaartVerschijnt {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── FOTO-MINIATUREN ─── meer karakter ─── */
.foto-thumb,
.foto-thumb-groot {
box-shadow: var(--schaduw-laag);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.foto-thumb:hover,
.foto-thumb-groot:hover {
transform: scale(1.02);
box-shadow: var(--schaduw-medium);
}
/* ─── SCROLLBAR ─── subtieler, premium ─── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(20, 14, 4, 0.12);
border-radius: 999px;
border: 2px solid var(--kleur-achtergrond);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(20, 14, 4, 0.2);
}
/* ─── TOAST-MELDINGEN ─── strakker, premium ─── */
.toast {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: var(--schaduw-hoog);
border: 1px solid rgba(255, 255, 255, 0.1);
animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-weight: 500;
letter-spacing: -0.005em;
}
@keyframes toastIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── NAV-DROPDOWN ─── meer karakter ─── */
.nav-dropdown {
border: 1px solid rgba(20, 14, 4, 0.08);
box-shadow: var(--schaduw-hoog);
animation: dropdownIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dropdownIn {
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.nav-dropdown-item {
transition: background 0.12s ease, padding 0.15s ease;
}
.nav-dropdown-item:hover {
background: rgba(191, 134, 59, 0.08);
}
/* ─── FORMULIER-SECTIES bij bewerken ─── meer rust ─── */
.sectie-titel, .form-sectie-titel {
letter-spacing: -0.01em;
color: var(--kleur-tekst);
}
/* ─── VOORTGANGSBALK ─── eleganter ─── */
.voortgang-balk-vulling {
background: linear-gradient(90deg, #C4923F 0%, #B07B30 100%);
box-shadow: 0 0 8px rgba(191, 134, 59, 0.4);
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ─── BUTTON-FOCUS — toegankelijk én premium ─── */
button:focus-visible {
outline: 2px solid var(--kleur-primair);
outline-offset: 2px;
}
/* ─── EMPTY-STATES — minder kil ─── */
.geen-rapporten, .geen-data, .lege-state {
color: var(--kleur-tekst-zacht);
font-style: italic;
}
/* ─── MOBIEL — premium touch-targets ─── */
@media (max-width: 768px) {
.btn-primary, .btn-secundair, .btn-gevaar {
min-height: 44px;
font-size: 0.88rem;
}
input, select, textarea {
min-height: 44px;
font-size: 16px; /* voorkomt iOS zoom */
}
}
/* ─── REDUCED MOTION respecteren ─── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ─── STATUSBADGES per status — semantische kleuren ─── */
.status-pil.concept,
.factuur-status-pil.concept {
background: #f4f0e8;
color: #8a7a52;
border: 1px solid #e8e0c8;
}
.status-pil.in-behandeling,
.status-pil.bezig {
background: rgba(191, 134, 59, 0.12);
color: #9C6C2A;
border: 1px solid rgba(191, 134, 59, 0.3);
}
.status-pil.voltooid,
.status-pil.afgerond,
.status-pil.verzonden,
.factuur-status-pil.verzonden {
background: rgba(74, 124, 58, 0.12);
color: #3d6630;
border: 1px solid rgba(74, 124, 58, 0.3);
}
.status-pil.betaald,
.factuur-status-pil.betaald {
background: rgba(74, 124, 58, 0.18);
color: #2d5524;
border: 1px solid rgba(74, 124, 58, 0.4);
font-weight: 700;
}
.status-pil.afgezegd,
.status-pil.geweigerd,
.factuur-status-pil.te-laat,
.factuur-status-pil.achterstallig {
background: rgba(184, 65, 42, 0.1);
color: #a8391e;
border: 1px solid rgba(184, 65, 42, 0.3);
}
/* ─── DETAIL-PAGINA ─── ruimer, premium gevoel ─── */
.detail-naam {
letter-spacing: -0.025em;
font-weight: 700;
}
.detail-acties button {
min-width: 140px;
justify-content: center;
}
/* ─── HANDTEKENING-PREVIEW ─── eleganter ─── */
.handtekening-preview {
background: linear-gradient(135deg, #fdfcfa 0%, #f9f5ec 100%);
border: 1px solid rgba(191, 134, 59, 0.18);
box-shadow: var(--schaduw-laag);
}
.handtekening-cursief {
font-style: italic;
color: var(--kleur-primair-donker);
letter-spacing: 0.01em;
}
/* ─── ZACHTE INACTIEVE STAAT ─── voor uitgegrijsde elementen ─── */
[disabled], .disabled {
opacity: 0.55;
}
/* ─── PAGE-TITLE — meer klasse ─── */
.page-title {
font-size: clamp(1.8rem, 4vw, 2.4rem);
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 0.35rem;
}
.page-sub {
color: var(--kleur-tekst-zacht);
font-size: 0.95rem;
letter-spacing: -0.005em;
}
/* ════════════════════════════════════════════════════════════════
PROFESSIONELE VERFIJNING — RONDE 2 (v149)
Gerichte styling-verbeteringen, systematisch per onderdeel.
════════════════════════════════════════════════════════════════ */
/* ─── LOGIN ─── nog meer diepte en verfijning ─── */
.login-achtergrond {
background:
radial-gradient(ellipse at 25% 15%, rgba(191, 134, 59, 0.32) 0%, transparent 55%),
radial-gradient(ellipse at 75% 85%, rgba(191, 134, 59, 0.16) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(40, 30, 15, 0.3) 0%, transparent 70%),
linear-gradient(150deg, #14110b 0%, #1c1810 50%, #0d0b07 100%);
}
.login-paneel {
border-radius: 22px;
box-shadow:
0 30px 90px rgba(0, 0, 0, 0.5),
0 8px 24px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(191, 134, 59, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
animation: loginIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes loginIn {
from { opacity: 0; transform: translateY(24px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-merk-naam { letter-spacing: 0.1em; }
/* ─── HEADER ─── verfijnde merknaam-typografie ─── */
.app-header { letter-spacing: -0.01em; }
/* ─── CONTAINER-RITME ─── meer adem tussen secties ─── */
.view .container { padding-top: 2rem; padding-bottom: 3rem; }
.page-intro { margin-bottom: 2rem; }
/* ─── RAPPORT-KAART ─── verfijnde binnenkant ─── */
.rapport-kaart {
border-radius: var(--radius-groot);
padding: 1.25rem 1.4rem;
}
.rapport-kaart-titel, .rapport-titel {
letter-spacing: -0.015em;
font-weight: 700;
}
.rapport-kaart-meta, .rapport-meta {
color: var(--kleur-tekst-zacht);
font-size: 0.85rem;
}
/* ─── KNOPPEN ─── consistente premium radius ─── */
.btn-primary, .btn-secundair, .btn-gevaar {
border-radius: var(--radius-klein);
letter-spacing: 0.03em;
}
/* ─── SECTIE-KOPPEN in formulier ─── meer hiërarchie ─── */
.form-sectie, .bewerk-sectie {
margin-bottom: 1.75rem;
}
.sectie-titel, .form-sectie-titel, .bewerk-sectie-titel {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.01em;
position: relative;
padding-left: 0.85rem;
}
/* Gouden streepje vóór sectietitels — signature-detail */
.sectie-titel::before, .form-sectie-titel::before, .bewerk-sectie-titel::before {
content: '';
position: absolute;
left: 0;
top: 0.15em;
bottom: 0.15em;
width: 3px;
border-radius: 2px;
background: linear-gradient(180deg, var(--kleur-primair) 0%, var(--kleur-primair-donker) 100%);
}
/* ─── VELD-LABELS ─── strakker ─── */
.veld-label {
font-weight: 600;
font-size: 0.82rem;
letter-spacing: 0.01em;
color: var(--kleur-tekst);
margin-bottom: 0.4rem;
}
.veld-toelichting {
font-size: 0.78rem;
color: var(--kleur-tekst-hint);
margin-top: 0.35rem;
line-height: 1.4;
}
/* ─── INPUTS ─── ruimer, premium ─── */
input[type="text"]:not(.search-input),
input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="time"], input[type="password"],
input[type="url"], select, textarea {
border-radius: var(--radius-klein);
padding: 0.7rem 0.85rem;
font-size: 0.95rem;
border: 1px solid var(--kleur-grens);
}
/* ─── DETAIL-PAGINA ─── premium koptekst ─── */
.detail-header, .detail-kop {
margin-bottom: 1.75rem;
}
.detail-naam, .detail-titel {
font-family: var(--font-display);
letter-spacing: -0.02em;
}
/* ─── TABELLEN ─── strakker, premium ─── */
table { border-collapse: collapse; width: 100%; }
th {
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--kleur-tekst-zacht);
font-weight: 700;
text-align: left;
padding: 0.7rem 0.85rem;
border-bottom: 2px solid var(--kleur-grens);
}
td {
padding: 0.7rem 0.85rem;
border-bottom: 1px solid var(--kleur-grens-mat);
font-size: 0.9rem;
}
tr:last-child td { border-bottom: none; }
/* ─── SNELKOPPELINGEN op dashboard ─── premium kaarten ─── */
.snelkoppeling-kaart {
border-radius: var(--radius-groot);
transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
box-shadow: var(--schaduw-zacht);
}
.snelkoppeling-kaart:hover {
transform: translateY(-2px);
box-shadow: var(--schaduw-medium);
border-color: rgba(191, 134, 59, 0.35);
}
.snelkoppeling-icoon {
background: linear-gradient(135deg, var(--kleur-primair-zacht) 0%, #f3e6cd 100%);
color: var(--kleur-primair-donker);
}
/* ─── PROGRESS / VOORTGANG ─── eleganter ─── */
.voortgang-balk {
background: var(--kleur-grens-mat);
border-radius: var(--radius-vol);
overflow: hidden;
}
/* ─── FORMULIER-VOORTGANG bovenaan bewerk ─── premium ─── */
.bewerk-voortgang {
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens-mat);
border-radius: var(--radius);
box-shadow: var(--schaduw-zacht);
}
/* ─── LEGE STATES ─── warmer, uitnodigend ─── */
.welkom-paneel {
border-radius: var(--radius-groot);
box-shadow: var(--schaduw-medium);
background: linear-gradient(135deg, #ffffff 0%, #fdfaf3 100%);
border: 1px solid var(--kleur-grens-mat);
}
.welkom-titel {
font-family: var(--font-display);
letter-spacing: -0.02em;
}
/* ─── FOTO-GALERIJ ─── strakker grid ─── */
.foto-galerij, .fotos-grid {
gap: 0.85rem;
}
.foto-item, .foto-thumb-wrap {
border-radius: var(--radius);
overflow: hidden;
}
/* ─── DIVIDER-LIJNEN ─── subtieler ─── */
hr, .divider {
border: none;
border-top: 1px solid var(--kleur-grens-mat);
margin: 1.5rem 0;
}
/* ─── SOORT-KAART in formulier ─── meer karakter ─── */
.soort-blok, .soort-kaart {
border-radius: var(--radius-groot);
border: 1px solid var(--kleur-grens);
box-shadow: var(--schaduw-zacht);
transition: box-shadow 0.2s ease;
}
.soort-blok:focus-within, .soort-kaart:focus-within {
box-shadow: var(--schaduw-medium);
border-color: rgba(191, 134, 59, 0.3);
}
/* ─── SELECTIE-KLEUR ─── huisstijl ─── */
::selection {
background: rgba(191, 134, 59, 0.22);
color: var(--kleur-zwart);
}
/* ─── FIJNERE LINK-STIJL ─── */
a { transition: color 0.15s ease; }
/* ─── EXTRA ADEM op mobiel ─── */
@media (max-width: 768px) {
.view .container { padding-top: 1.25rem; padding-bottom: 2rem; }
.rapport-kaart { padding: 1.1rem 1.2rem; }
.page-title { font-size: 1.7rem; }
}
/* ════════════════════════════════════════════════════════════════
FACTURATIE-TAB (v154)
════════════════════════════════════════════════════════════════ */
.facturatie-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1.75rem;
}
.fact-stat-kaart {
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens-mat);
border-radius: var(--radius);
padding: 1.1rem 1.25rem;
box-shadow: var(--schaduw-zacht);
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.fact-stat-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--kleur-tekst-zacht);
font-weight: 700;
}
.fact-stat-cijfer {
font-size: 1.7rem;
font-weight: 700;
color: var(--kleur-zwart);
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.fact-stat-sub {
font-size: 0.78rem;
color: var(--kleur-tekst-hint);
}
.facturatie-acties {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.facturatie-titel {
font-family: var(--font-display);
font-size: 1.3rem;
letter-spacing: -0.02em;
margin: 0;
}
.facturatie-tabel-wrap {
background: var(--kleur-oppervlak);
border: 1px solid var(--kleur-grens-mat);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--schaduw-zacht);
}
.facturatie-tabel { width: 100%; border-collapse: collapse; }
.facturatie-tabel th {
font-size: 0.72rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--kleur-tekst-zacht);
font-weight: 700;
text-align: left;
padding: 0.75rem 1rem;
background: var(--kleur-oppervlak-mat);
border-bottom: 1px solid var(--kleur-grens);
}
.facturatie-tabel td {
padding: 0.8rem 1rem;
border-bottom: 1px solid var(--kleur-grens-mat);
font-size: 0.9rem;
}
.facturatie-tabel tr:last-child td { border-bottom: none; }
.facturatie-tabel tbody tr { transition: background 0.12s ease; }
.facturatie-tabel tbody tr:hover { background: var(--kleur-primair-zacht); }
.btn-mini {
padding: 0.35rem 0.85rem;
font-size: 0.8rem;
border-radius: var(--radius-klein);
border: 1px solid var(--kleur-grens);
background: var(--kleur-wit);
color: var(--kleur-tekst);
cursor: pointer;
font-weight: 600;
transition: all 0.15s ease;
}
.btn-mini:hover {
border-color: var(--kleur-primair);
color: var(--kleur-primair-donker);
background: var(--kleur-primair-zacht);
}
/* Factuur-modals */
.fact-select, .modal-inhoud input[type="text"], .modal-inhoud input[type="number"] {
width: 100%;
padding: 0.65rem 0.8rem;
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
font-size: 0.95rem;
}
.fact-totaal-preview {
margin-top: 1.25rem;
padding: 1rem;
background: var(--kleur-oppervlak-mat);
border-radius: var(--radius-klein);
}
.fact-preview-regel {
display: flex;
justify-content: space-between;
padding: 0.3rem 0;
font-size: 0.9rem;
color: var(--kleur-tekst-zacht);
}
.fact-preview-totaal {
margin-top: 0.4rem;
padding-top: 0.6rem;
border-top: 1px solid var(--kleur-grens);
font-weight: 700;
font-size: 1.05rem;
color: var(--kleur-zwart);
}
.fact-detail-rij {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem 0;
border-bottom: 1px solid var(--kleur-grens-mat);
font-size: 0.92rem;
}
.fact-detail-rij:last-child { border-bottom: none; }
.fact-detail-rij > span:first-child { color: var(--kleur-tekst-zacht); }
.fact-mollie-blok:not(:empty) { margin-top: 1rem; }
.fact-mollie-succes {
padding: 0.85rem;
background: var(--kleur-succes-bg);
border-radius: var(--radius-klein);
font-size: 0.85rem;
color: #2d5524;
word-break: break-all;
}
.fact-mollie-succes a { color: #2d5524; font-weight: 600; }
.fact-mollie-fout {
padding: 0.85rem;
background: var(--kleur-gevaar-bg);
border-radius: var(--radius-klein);
font-size: 0.85rem;
color: #a8391e;
}
@media (max-width: 600px) {
.facturatie-stats { grid-template-columns: 1fr; gap: 0.6rem; }
.facturatie-tabel th:nth-child(3),
.facturatie-tabel td:nth-child(3) { display: none; } /* verberg rapport-kolom op mobiel */
}
/* ════════════════════════════════════════════════════════════════
TARIEVEN VEREENVOUDIGD + BTW-WEERGAVE (v156)
════════════════════════════════════════════════════════════════ */
.tarief-kaart-hoofd {
grid-column: 1 / -1;
border: 1px solid rgba(191, 134, 59, 0.3);
background: linear-gradient(135deg, #ffffff 0%, #fdfaf3 100%);
}
.tarief-btw-weergave {
margin-top: 0.85rem;
padding: 0.85rem 1rem;
background: var(--kleur-oppervlak-mat);
border-radius: var(--radius-klein);
max-width: 320px;
}
.tarief-btw-regel {
display: flex;
justify-content: space-between;
padding: 0.25rem 0;
font-size: 0.88rem;
color: var(--kleur-tekst-zacht);
font-variant-numeric: tabular-nums;
}
.tarief-btw-incl {
margin-top: 0.35rem;
padding-top: 0.5rem;
border-top: 1px solid var(--kleur-grens);
font-weight: 700;
font-size: 1rem;
color: var(--kleur-zwart);
}
.fact-tarief-melding {
margin-top: 0.85rem;
padding: 0.75rem 0.9rem;
background: var(--kleur-primair-zacht);
border-radius: var(--radius-klein);
font-size: 0.83rem;
color: var(--kleur-primair-donker);
line-height: 1.45;
}
/* ════════════════════════════════════════════════════════════════
MAIL-KEUZE als buttons + onthoud-voorkeur (v157)
════════════════════════════════════════════════════════════════ */
button.mail-keuze-kaart {
width: 100%;
text-align: left;
cursor: pointer;
font-family: inherit;
display: block;
}
.mail-onthoud {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--kleur-tekst-zacht);
margin: 0.5rem 0 1rem;
cursor: pointer;
}
.mail-onthoud input { width: auto; min-height: auto; }
/* ─── Mail-keuze: aanbevolen optie (Outlook classic) (v158) ─── */
.mail-keuze-aanbevolen {
border-color: var(--kleur-primair) !important;
background: var(--kleur-primair-zacht) !important;
}
.mail-keuze-tag {
display: inline-block;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--kleur-primair);
color: #fff;
padding: 0.12rem 0.5rem;
border-radius: 999px;
margin-left: 0.5rem;
vertical-align: middle;
}
/* ════════════════════════════════════════════════════════════════
MAIL-KEUZE MODAL — schone, strakke vormgeving (v159)
Overschrijft de oude losse-blokken-stijl met een nette lijst.
════════════════════════════════════════════════════════════════ */
.mail-keuze-lijst {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-top: 0.5rem;
}
button.mail-keuze-kaart {
position: relative;
display: flex !important;
flex-direction: column;
align-items: flex-start !important;
text-align: left !important;
gap: 0.15rem;
width: 100%;
padding: 0.85rem 1rem !important;
background: var(--kleur-wit);
border: 1px solid var(--kleur-grens);
border-radius: var(--radius-klein);
cursor: pointer;
font-family: inherit;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
box-shadow: none !important;
overflow: hidden;
}
button.mail-keuze-kaart::before { display: none !important; }
button.mail-keuze-kaart:hover {
border-color: var(--kleur-primair);
background: #fdfaf3;
transform: none !important;
box-shadow: var(--schaduw-zacht) !important;
}
button.mail-keuze-kaart:active {
transform: scale(0.995) !important;
}
.mail-keuze-kaart .mail-keuze-titel {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.95rem;
color: var(--kleur-zwart);
display: flex;
align-items: center;
gap: 0.4rem;
}
.mail-keuze-kaart .mail-keuze-sub {
font-size: 0.8rem;
color: var(--kleur-tekst-zacht);
line-height: 1.35;
}
.mail-keuze-aanbevolen {
border-color: var(--kleur-primair) !important;
background: var(--kleur-primair-zacht) !important;
}
.mail-keuze-aanbevolen:hover {
background: #f6ead2 !important;
}
.mail-keuze-tag {
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
background: var(--kleur-primair);
color: #fff;
padding: 0.1rem 0.45rem;
border-radius: 999px;
}
/* Modal zelf strakker: kop, inhoud en voet sluiten op elkaar aan */
.modal-overlay .modal {
border-radius: var(--radius-groot);
overflow: hidden;
box-shadow: 0 24px 64px -12px rgba(20, 17, 11, 0.28), 0 8px 16px -4px rgba(20, 17, 11, 0.12);
}
.modal-overlay .modal .modal-header {
padding: 1.1rem 1.4rem;
border-bottom: 1px solid var(--kleur-grens-mat);
}
.modal-overlay .modal .modal-header h2 {
font-size: 1.15rem;
margin: 0;
letter-spacing: -0.015em;
}
.modal-overlay .modal .modal-inhoud {
padding: 1.25rem 1.4rem;
}
.modal-overlay .modal .modal-inhoud > p {
font-size: 0.88rem;
line-height: 1.5;
margin: 0 0 0.75rem;
}
.modal-overlay .modal .modal-acties {
padding: 0.9rem 1.4rem;
border-top: 1px solid var(--kleur-grens-mat);
background: var(--kleur-oppervlak-mat);
display: flex;
justify-content: flex-end;
}
.mail-onthoud {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.82rem;
color: var(--kleur-tekst-zacht);
margin: 0 0 1rem;
padding: 0.6rem 0.75rem;
background: var(--kleur-oppervlak-mat);
border-radius: var(--radius-klein);
cursor: pointer;
}
.mail-onthoud input { width: auto !important; min-height: auto !important; margin: 0; }
/* Basis voor .modal (gebruikt door factuur-mail-modal) — gelijk aan modal-paneel */
.modal-overlay > .modal {
background: var(--kleur-wit);
width: 100%;
max-height: 90vh;
overflow-y: auto;
animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}