/* Staff Full Profile — Claude Design "Sectioned Cards" (Direction C) polish.

   Applied by EMS.Blazor.Server/Controllers/StaffFullProfileDesignBlazorController, which
   adds CSS classes to the built-in editors' ComponentModels — the documented XAF Blazor
   way to restyle built-in editors (no custom Razor component, which this project excludes
   from the build). Selectors that reach into DevExpress markup (e.g. .dxbl-checkbox*) are
   best-effort starting points and should be confirmed/refined against the running Blazor
   DOM via browser DevTools. */

/* Scope marker added to every editor on the design views. */
.ems-staff-fp-field {
    font-family: "Segoe UI", "Open Sans", system-ui, sans-serif;
}

/* Flags / Experience booleans → pill chips. The class lands on the DxCheckBox editor root. */
.ems-pill-field {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    margin: 2px 6px 2px 0;
    border-radius: 999px;
    border: 1px solid #E1E1E6;
    background: #ECECEF;
    color: #7C7686;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* Checked (true) state. DevExpress marks a checked DxCheckBox with .dxbl-checkbox-checked
   (confirm the exact class in DevTools and adjust if needed). */
.ems-pill-field.dxbl-checkbox-checked,
.ems-pill-field:has(.dxbl-checkbox-checked),
.ems-pill-field:has(input:checked) {
    color: #533162;
    background: #EADDFF;
    border-color: #D9C7EF;
}