:root {
  --inkt: #1c2b33; --stil: #64748b; --lijn: #e2e8f0;
  --accent: #0e7490; --accent-donker: #155e75; --vlak: #f8fafc; --wit: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 "Segoe UI", system-ui, sans-serif; color: var(--inkt); background: var(--vlak); }
header { display: flex; align-items: center; gap: 1.5rem; padding: .7rem 1.4rem; background: var(--wit); border-bottom: 1px solid var(--lijn); }
.logo { font-size: 1.15rem; font-weight: 700; color: var(--inkt); text-decoration: none; }
.logo span { color: var(--accent); }
nav a { color: var(--accent); text-decoration: none; }
main { max-width: 1700px; width: 96%; margin: 1.5rem auto; padding: 0 1rem; }
footer { text-align: center; color: var(--stil); font-size: .8rem; padding: 2rem 0; }

.kolommen { display: grid; grid-template-columns: 2fr minmax(320px, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .kolommen { grid-template-columns: 1fr; } }
td .chip, td.stil { white-space: nowrap; }
.paneel { background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; padding: 1.2rem 1.4rem; }
h1 { margin: 0 0 .6rem; font-size: 1.35rem; } h2 { margin: 1.2rem 0 .5rem; font-size: 1.05rem; }
.stil { color: var(--stil); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--lijn); }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--stil); }
td a { color: var(--accent); font-weight: 600; text-decoration: none; }

form label { display: block; margin: .6rem 0; font-weight: 600; font-size: .88rem; }
input, select { width: 100%; margin-top: .2rem; padding: .5rem .6rem; border: 1px solid var(--lijn); border-radius: 7px; font: inherit; }
fieldset { border: 1px solid var(--lijn); border-radius: 8px; margin: .8rem 0; }
legend { font-size: .82rem; color: var(--stil); padding: 0 .4rem; }
.vink { font-weight: 400; margin: .15rem 0; }
.vink input { width: auto; margin-right: .4rem; }
button { margin-top: .8rem; padding: .55rem 1.1rem; border: 0; border-radius: 7px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: var(--accent-donker); }
button.secundair { background: var(--lijn); color: var(--stil); cursor: not-allowed; }

.chip { display: inline-block; padding: .1rem .55rem; border-radius: 99px; background: var(--vlak); border: 1px solid var(--lijn); font-size: .78rem; }
.status-nieuw { background: #fef9c3; } .status-foto\'s { background: #dbeafe; }
.status-draft { background: #fde68a; } .status-review { background: #fbcfe8; } .status-klaar { background: #dcfce7; }

.dropzone { border: 2px dashed var(--lijn); border-radius: 10px; padding: 1.4rem; text-align: center; margin: 1rem 0; transition: border-color .15s, background .15s; }
.dropzone.actief { border-color: var(--accent); background: #ecfeff; }
.knoplink { color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; }
.acties { margin: .6rem 0 1rem; }

.fotogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.fotogrid figure { margin: 0; }
.fotogrid img { width: 100%; height: 110px; object-fit: cover; border-radius: 7px; border: 1px solid var(--lijn); }
.fotogrid figcaption { font-size: .7rem; color: var(--stil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.element { border: 1px solid var(--lijn); border-radius: 9px; margin: .5rem 0; padding: .4rem .8rem; background: var(--wit); }
.element summary { cursor: pointer; padding: .3rem 0; }
.conditie { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; font-weight: 700; color: #fff; margin-right: .4rem; }
.c1 { background: #16a34a; } .c2 { background: #65a30d; } .c3 { background: #ca8a04; }
.c4 { background: #ea580c; } .c5 { background: #dc2626; } .c6 { background: #7f1d1d; }
.bevinding { border-top: 1px dashed var(--lijn); padding: .5rem 0 .3rem; }
.bevinding p { margin: .25rem 0; }
.chip.waarschuwing { background: #fee2e2; border-color: #fca5a5; }
.minigrid { display: flex; gap: .4rem; margin: .3rem 0; }
.minigrid img { width: 90px; height: 66px; object-fit: cover; border-radius: 5px; border: 1px solid var(--lijn); }

.rij { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.rij label { flex: 1; min-width: 140px; }
.rij label.smal { flex: 0 0 130px; min-width: 110px; }
.element-form, .bevinding form { margin: .4rem 0; }
/* bevindingen als duidelijk gescheiden kaarten met statuskleur links */
form.bevinding { border: 1px solid var(--lijn); border-left: 4px solid #f59e0b; border-radius: 8px;
  background: #fffdf7; padding: .6rem .9rem; margin: .8rem 0; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
form.bevinding.goedgekeurd { border-left-color: #16a34a; background: #f7fdf9; }
form.bevinding.handeling { border-left-color: var(--accent); background: #f8feff; padding-left: .9rem; }
.bevinding input.leeg, .sum-invoer input.leeg { border-color: #fca5a5; background: #fff5f5; }
/* inline bewerken op de elementregel */
.element > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; list-style: none; }
.element > summary::-webkit-details-marker { display: none; }
.element > summary::before { content: "\25B8"; color: var(--stil); transition: transform .15s; }
.element[open] > summary::before { transform: rotate(90deg); }
.sum-invoer { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; flex: 1; min-width: 0; }
.sum-invoer input, .sum-invoer select { width: auto; margin: 0; padding: .25rem .45rem; font-size: .85rem; }
.sum-invoer input[name="naam"] { flex: 2 1 160px; min-width: 140px; }
.sum-invoer input[name="referentienaam"] { flex: 2 1 150px; min-width: 130px; }
.sum-invoer input[name="hoeveelheid"] { flex: 0 1 80px; min-width: 70px; }
.sum-invoer button { margin: 0; padding: .25rem .55rem; }
button.groen { background: #16a34a; } button.groen:hover { background: #15803d; }
button.rood { background: #fee2e2; color: #b91c1c; } button.rood:hover { background: #fecaca; }
.klein-knop { margin: 0; padding: .25rem .5rem; font-size: .85rem; }
.inline { display: inline; }

/* compacte gegevenskaart met bewerkknop */
.paneel.compact { padding: .9rem 1.1rem; margin-bottom: 1.2rem; }
.paneel.compact h2 { margin: 0; font-size: .95rem; }
.paneelkop { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.paneelkop .knoplink { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: .82rem; }
.gegevens { font-size: .86rem; }
.gegevens .gv { display: flex; gap: .6rem; padding: .18rem 0; border-bottom: 1px dashed var(--lijn); }
.gegevens .gv:last-child { border-bottom: 0; }
.gegevens .gv span { flex: 0 0 72px; color: var(--stil); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .04em; padding-top: .1rem; }
.og-logo { max-height: 34px; margin-bottom: .35rem; }
.acties-cel { white-space: nowrap; }
.acties-cel .knoplink { text-decoration: none; font-size: 1rem; margin-right: .35rem; }
.paneelkop h1 { margin: 0; }
.knoppen { align-items: center; gap: .5rem; }
.knoppen button { margin-top: .2rem; }
.inline { display: inline; } .inline button { margin: 0 0 0 .5rem; }
.conditie.klein { width: 1.9rem; height: 1.9rem; font-size: .85rem; align-self: center; }
.toevoegen { margin: .6rem 0; }
.toevoegen > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.controle { border-radius: 9px; padding: .8rem 1rem; margin: .8rem 0; }
.controle.goed { background: #f0fdf4; border: 1px solid #86efac; }
.controle.fouten { background: #fef2f2; border: 1px solid #fca5a5; }
.controle ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.controle li.let-op { color: #92400e; }
.controle details summary { cursor: pointer; font-weight: 600; margin-top: .4rem; }
.controle li.fout { color: #b91c1c; }
.subkop { margin: .9rem 0 .2rem; font-size: .95rem; color: var(--accent-donker); }
.handeling { border-left: 3px solid var(--accent); padding-left: .6rem; }
.zelfuitlijn { align-self: center; }
.exportknoppen { margin-left: .6rem; }
a.knop { display: inline-block; margin: .2rem .15rem 0; padding: .5rem .9rem; border-radius: 7px;
  background: var(--vlak); border: 1px solid var(--accent); color: var(--accent-donker);
  font-weight: 600; text-decoration: none; }
a.knop:hover { background: #ecfeff; }

/* elementfoto-miniatuur op de elementregel */
.elfoto-wrap img { width: 52px; height: 40px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--lijn); cursor: zoom-in; display: block; }
.minigrid img, .fotogrid img { cursor: zoom-in; }

/* lightbox */
#lightbox { position: fixed; inset: 0; background: rgba(15, 23, 42, .88); display: none;
  align-items: center; justify-content: center; z-index: 50; }
#lightbox.open { display: flex; }
#lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; cursor: zoom-in;
  transition: transform .15s; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
#lightbox img.gezoomd { cursor: zoom-out; }
.lb-tip { position: fixed; bottom: .8rem; left: 0; right: 0; text-align: center;
  color: #cbd5e1; font-size: .8rem; }