/* Gedeelde stijlen voor MailTemplate voorbeelddata-componenten.
   Dit bestand wordt globaal geladen zodat child-componenten niet
   geraakt worden door Blazor scoped CSS isolatie. */

/* Sectietitel boven de sleepbare velden */
.scriban-velden-titel {
    font-size: 0.78rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.25rem;
}

/* Container voor de sleepbare veld-badges */
.scriban-velden-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

/* Basis badge stijl */
.scriban-veld-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-family: monospace;
    cursor: grab;
    user-select: none;
    background-color: #d0e8ff;
    border: 1px solid #90c4f0;
    color: #1a4f7a;
    transition: background-color 0.15s, transform 0.1s;
}

.scriban-veld-badge:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.scriban-veld-badge:hover {
    background-color: #b3d9ff;
}

/* Boolean-badge krijgt een andere kleur */
.scriban-veld-badge-bool {
    background-color: #fff0cc;
    border-color: #f0c040;
    color: #7a5000;
}

.scriban-veld-badge-bool:hover {
    background-color: #ffe5a0;
}

/* HTML-blok badge krijgt een groene kleur */
.scriban-veld-badge-html {
    background-color: #e6f4ea;
    border-color: #5da06a;
    color: #2d6a3f;
}

.scriban-veld-badge-html:hover {
    background-color: #c8e6c9;
}

/* Drop-zone wrapper rondom de textarea */
.scriban-dropzone {
    border-radius: 4px;
    transition: box-shadow 0.15s;
}

/* Actieve drop-zone highlight (via JS class toggle) */
.scriban-dropzone-actief {
    box-shadow: 0 0 0 2px #4a9eff;
}