/*
 * Globale enum-badge kleurstijlen.
 * Gedeeld door EnumBadgeComponent (property editor) én KanbanComponent.
 * Scoped interactie-stijlen (.enum-badge-option, .enum-badge-select, enz.)
 * blijven in EnumBadgeComponent.razor.css.
 */

.enum-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    padding: 3px 9px;
    font-size: 11.5px;
    line-height: 1;
    font-weight: 400;
    border: 1px solid transparent;
    white-space: nowrap;
}

.enum-badge-readonly {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding-top: 5px;
    /* Even hoog als een invoerveld, zodat de velden eronder gelijk lopen met de kolom ernaast. */
    padding-bottom: 4px;
}

/* ── Kleurvarianten ──────────────────────────────────────────────────────── */

.enum-badge-neutral {
    background: color-mix(in srgb, var(--dxds-neutral-120) 15%, var(--fc-surface));
    color: var(--dxds-neutral-170);
    border-color: color-mix(in srgb, var(--dxds-neutral-120) 35%, var(--fc-border));
}

.enum-badge-default {
    background: color-mix(in srgb, var(--dxds-neutral-120) 15%, var(--fc-surface));
    color: var(--dxds-neutral-170);
    border-color: color-mix(in srgb, var(--dxds-neutral-120) 35%, var(--fc-border));
}

.enum-badge-muted {
    background: color-mix(in srgb, var(--dxds-neutral-90) 20%, var(--fc-surface));
    color: var(--dxds-neutral-150);
    border-color: color-mix(in srgb, var(--dxds-neutral-90) 40%, var(--fc-border));
}

.enum-badge-info {
    background: color-mix(in srgb, var(--dxds-info-80) 18%, var(--fc-surface));
    color: var(--dxds-info-130);
    border-color: color-mix(in srgb, var(--dxds-info-80) 45%, var(--fc-border));
}

.enum-badge-success {
    background: color-mix(in srgb, var(--dxds-success-90) 15%, var(--fc-surface));
    color: var(--dxds-success-130);
    border-color: color-mix(in srgb, var(--dxds-success-90) 35%, var(--fc-border));
}

.enum-badge-warning {
    background: color-mix(in srgb, var(--dxds-warning-80) 22%, var(--fc-surface));
    color: var(--dxds-warning-130);
    border-color: color-mix(in srgb, var(--dxds-warning-80) 45%, var(--fc-border));
}

.enum-badge-danger {
    background: color-mix(in srgb, var(--dxds-danger-90) 15%, var(--fc-surface));
    color: var(--dxds-danger-120);
    border-color: color-mix(in srgb, var(--dxds-danger-90) 35%, var(--fc-border));
}

.enum-badge-primary {
    background: color-mix(in srgb, var(--fc-primary) 20%, var(--fc-surface));
    color: var(--dxds-primary-120);
    border-color: color-mix(in srgb, var(--fc-primary) 50%, var(--fc-border));
}

.enum-badge-secondary {
    background: color-mix(in srgb, var(--dxds-secondary-100) 22%, var(--fc-surface));
    color: var(--dxds-secondary-150);
    border-color: color-mix(in srgb, var(--dxds-secondary-100) 50%, var(--fc-border));
}

.enum-badge-purple {
    background: color-mix(in srgb, var(--dxds-info-120) 20%, var(--fc-surface));
    color: var(--dxds-info-140);
    border-color: color-mix(in srgb, var(--dxds-info-120) 50%, var(--fc-border));
}

.enum-badge-indigo {
    background: color-mix(in srgb, var(--dxds-info-110) 18%, var(--fc-surface));
    color: var(--dxds-info-140);
    border-color: color-mix(in srgb, var(--dxds-info-110) 45%, var(--fc-border));
}

.enum-badge-teal {
    background: color-mix(in srgb, var(--dxds-primary-70) 20%, var(--fc-surface));
    color: var(--dxds-primary-120);
    border-color: color-mix(in srgb, var(--dxds-primary-70) 48%, var(--fc-border));
}

.enum-badge-orange {
    background: color-mix(in srgb, var(--dxds-warning-90) 20%, var(--fc-surface));
    color: var(--dxds-warning-130);
    border-color: color-mix(in srgb, var(--dxds-warning-90) 50%, var(--fc-border));
}

.enum-badge-pink {
    background: color-mix(in srgb, var(--dxds-danger-80) 18%, var(--fc-surface));
    color: var(--dxds-danger-120);
    border-color: color-mix(in srgb, var(--dxds-danger-80) 45%, var(--fc-border));
}

.enum-badge-cyan {
    background: color-mix(in srgb, var(--dxds-info-80) 20%, var(--fc-surface));
    color: var(--dxds-info-130);
    border-color: color-mix(in srgb, var(--dxds-info-80) 50%, var(--fc-border));
}

/* ── Donkere modus ───────────────────────────────────────────────────────────
 * De achtergronden mengen al met --fc-surface en worden vanzelf donker; de tekst gebruikt hierboven donkere
 * paletstappen en krijgt in donker de lichte stap van hetzelfde palet. */
body.dxbl-theme-dark .enum-badge-neutral,
body.dxbl-theme-dark .enum-badge-default  { color: var(--dxds-neutral-40); }
body.dxbl-theme-dark .enum-badge-muted    { color: var(--dxds-neutral-60); }
body.dxbl-theme-dark .enum-badge-info,
body.dxbl-theme-dark .enum-badge-cyan     { color: var(--dxds-info-40); }
body.dxbl-theme-dark .enum-badge-success  { color: var(--dxds-success-40); }
body.dxbl-theme-dark .enum-badge-warning,
body.dxbl-theme-dark .enum-badge-orange   { color: var(--dxds-warning-40); }
body.dxbl-theme-dark .enum-badge-danger,
body.dxbl-theme-dark .enum-badge-pink     { color: var(--dxds-danger-40); }
body.dxbl-theme-dark .enum-badge-primary,
body.dxbl-theme-dark .enum-badge-teal     { color: var(--dxds-primary-40); }
body.dxbl-theme-dark .enum-badge-secondary { color: var(--dxds-secondary-50); }
body.dxbl-theme-dark .enum-badge-purple,
body.dxbl-theme-dark .enum-badge-indigo   { color: var(--dxds-info-50); }