/* Slepen/plakken van foto's, zie js/foto-dropzone.js. Werkt in de publieke site
   (--groen/--kader) en in het beheer (--kleur-accent/--kleur-kader). */
.dropzone-vlak {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.7rem;
    margin: 0.4rem 0;
    padding: 0.7rem 0.9rem;
    border: 2px dashed var(--kader, var(--kleur-kader, #bbb));
    border-radius: 8px;
    background: rgba(127, 127, 127, 0.05);
    color: var(--inkt-zacht, #555);
    font-size: 0.9rem;
    cursor: pointer;
}
.dropzone-vlak:hover, .dropzone-vlak:focus-visible { border-color: var(--groen, var(--kleur-accent, #2f5233)); outline: none; }
.dropzone-over { border-color: var(--groen, var(--kleur-accent, #2f5233)); background: rgba(47, 82, 51, 0.12); }
.dropzone-actief .dropzone-vlak { border-color: var(--groen, var(--kleur-accent, #2f5233)); }
.dropzone-gevuld { border-style: solid; }
.dropzone-voorbeelden { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.dropzone-voorbeeld { height: 3.2rem; width: auto; border-radius: 4px; border: 1px solid var(--kader, var(--kleur-kader, #ccc)); background: #fff; }
.dropzone-status { flex-basis: 100%; font-size: 0.85rem; }
.dropzone-fout { color: var(--rood, #8c2f2f); }
.dropzone-wis { margin-left: auto; }
.foto-beheer-sleuf .dropzone-vlak { padding: 0.4rem 0.5rem; font-size: 0.75rem; margin: 0.2rem 0; }
.foto-beheer-sleuf .dropzone-voorbeeld { height: 2rem; }