/*
 * Cores das telas personalizadas, derivadas do tema ativo do XAF (temas Bootstrap 5 da DevExpress).
 * Só usam variáveis que todos os temas definem na raiz: fundo, texto e cores de contexto. As variações
 * (superfícies, bordas, tons suaves) são calculadas com color-mix, porque o XAF não aplica
 * data-bs-theme="dark" e, no tema escuro, --bs-tertiary-bg e --bs-emphasis-color continuam com os valores do tema claro.
 */
:root {
    --crm-bg: var(--bs-body-bg);
    --crm-text: var(--bs-body-color);
    --crm-text-strong: color-mix(in srgb, var(--bs-body-color) 92%, var(--bs-body-bg));
    --crm-muted: color-mix(in srgb, var(--bs-body-color) 64%, var(--bs-body-bg));
    --crm-subtle: color-mix(in srgb, var(--bs-body-color) 46%, var(--bs-body-bg));
    --crm-surface: var(--bs-body-bg);
    --crm-surface-alt: color-mix(in srgb, var(--bs-body-color) 4%, var(--bs-body-bg));
    --crm-surface-hover: color-mix(in srgb, var(--bs-body-color) 8%, var(--bs-body-bg));
    --crm-border: color-mix(in srgb, var(--bs-body-color) 14%, var(--bs-body-bg));
    --crm-border-strong: color-mix(in srgb, var(--bs-body-color) 26%, var(--bs-body-bg));
    --crm-overlay: color-mix(in srgb, #000 45%, transparent);
    --crm-shadow: 0 1px 3px color-mix(in srgb, #000 12%, transparent);
    --crm-shadow-lg: 0 12px 32px color-mix(in srgb, #000 18%, transparent);

    --crm-primary: var(--bs-primary);
    --crm-on-primary: #fff;
    --crm-primary-hover: color-mix(in srgb, var(--bs-primary) 85%, #000);
    --crm-primary-soft: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-body-bg));
    --crm-primary-border: color-mix(in srgb, var(--bs-primary) 40%, var(--bs-body-bg));
    --crm-primary-text: color-mix(in srgb, var(--bs-primary) 78%, var(--bs-body-color));

    --crm-success: var(--bs-success);
    --crm-success-soft: color-mix(in srgb, var(--bs-success) 14%, var(--bs-body-bg));
    --crm-success-text: color-mix(in srgb, var(--bs-success) 70%, var(--bs-body-color));
    --crm-warning: var(--bs-warning);
    --crm-warning-soft: color-mix(in srgb, var(--bs-warning) 16%, var(--bs-body-bg));
    --crm-warning-text: color-mix(in srgb, var(--bs-warning) 62%, var(--bs-body-color));
    --crm-danger: var(--bs-danger);
    --crm-danger-soft: color-mix(in srgb, var(--bs-danger) 12%, var(--bs-body-bg));
    --crm-danger-text: color-mix(in srgb, var(--bs-danger) 72%, var(--bs-body-color));
    --crm-info: var(--bs-info);
    --crm-info-soft: color-mix(in srgb, var(--bs-info) 12%, var(--bs-body-bg));
    --crm-info-text: color-mix(in srgb, var(--bs-info) 72%, var(--bs-body-color));
}

/*
 * Campos nativos das telas personalizadas que não definem cor seguem o tema, em vez do branco do navegador.
 * :where() deixa a especificidade em zero: qualquer regra de componente ou da DevExpress prevalece.
 */
:where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), select, textarea) {
    background-color: var(--crm-surface);
    color: var(--crm-text);
}

html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../images/Logo.svg');
    mask: url('../images/Logo.svg');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 32px;
    height: 24px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* Em telas estreitas o título da tela não passa por cima do sino, do usuário e das configurações: fica com elipse
   (feature 11328). */
@media (max-width: 767.98px) {
    .xaf-caption-container {
        min-width: 0;
        max-width: calc(100vw - 15rem);
    }
}