/* Global icon size override for XAF icons.
 *
 * XAF renders most standard icons (toolbar actions, navigation menu, grid
 * item icons, tab/layout-group icons, combobox, context menu, captions) as
 * <img> elements pinned to a hardcoded 16px in the framework stylesheet
 * (_content/DevExpress.ExpressApp.Blazor/styles.css). This file is linked
 * AFTER that stylesheet in _Host.cshtml, so overriding the same classes wins
 * by load order. This is the single global place to change icon size.
 *
 * --erp-icon-size is the global default. The three context-specific tokens
 * below default to it, so set the global to change everything at once, or
 * override a single context token to size that context independently. */
:root {
    --erp-icon-size: 16px;

    /* Detail view group headers (layout group captions). */
    --erp-icon-size-group-header: 18px;

    /* In-place property editors (grid cell icons, icon comboboxes / lookups). */
    --erp-icon-size-property-editor: var(--erp-icon-size);

    /* Actions (toolbar buttons, context-menu actions, ribbon items). */
    --erp-icon-size-action: var(--erp-icon-size);
}

/* --- Default-sized contexts (nav menu, tabs, captions, context menu) --- */
.xaf-caption-icon,
.xaf-context-menu-item-icon,
.xaf-nav-menu-item-icon,
.xaf-layout-tab-icon {
    max-width: var(--erp-icon-size);
    max-height: var(--erp-icon-size);
    width: var(--erp-icon-size);
    height: var(--erp-icon-size);
}

/* --- Detail view group headers --- */
.xaf-layout-group-icon {
    max-width: var(--erp-icon-size-group-header);
    max-height: var(--erp-icon-size-group-header);
    width: var(--erp-icon-size-group-header);
    height: var(--erp-icon-size-group-header);
}

/* --- In-place property editors --- */
.xaf-grid-item-icon,
.xaf-combobox-icon {
    max-width: var(--erp-icon-size-property-editor);
    max-height: var(--erp-icon-size-property-editor);
    width: var(--erp-icon-size-property-editor);
    height: var(--erp-icon-size-property-editor);
}

/* --- Actions --- */
.xaf-toolbar-item-icon,
.dxbl-ribbon-item .image {
    max-width: var(--erp-icon-size-action);
    max-height: var(--erp-icon-size-action);
    width: var(--erp-icon-size-action);
    height: var(--erp-icon-size-action);
}

/* Inline-SVG icons (svg.dxbl-image) and the Fluent theme size from these
 * custom properties rather than fixed px, so set them too for full coverage. */
.dxbl-image {
    --dxbl-image-width: var(--erp-icon-size);
    --dxbl-image-height: var(--erp-icon-size);
}