/* ─── Variables (Shared with Admin) ─── */
:root {
    --canvas:           #FAFAF8;
    --surface:          #FFFFFF;
    --border:           rgba(0, 0, 0, 0.08);
    --text-primary:     #111111;
    --text-secondary:   #787774;
    --accent:           #0CD874;
    --radius:           5px;
}

/* ─── Global Overrides ─── */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

html body .dx-dashboard-container:not(.dx-dashboard-item-container),
html body #dashboardControl {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

html body.theme-light {
    font-family: 'DM Sans', sans-serif !important;
    background-color: var(--canvas) !important;
    color: var(--text-primary) !important;
}

/* ─── DevExpress Header Override ─── */
html body .dx-dashboard-surface {
    box-sizing: border-box !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    padding-bottom: 4px !important;
}

html body.theme-light .dx-dashboard-surface {
    background-color: var(--canvas) !important;
}

html body .dx-dashboard-title-toolbar {
    box-sizing: border-box !important;
    max-width: 100% !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
}

html body.theme-light .dx-dashboard-title-toolbar {
    background-color: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
}

html body.theme-light .dx-dashboard-title-toolbar .dx-toolbar-item {
    color: var(--text-primary) !important;
}

/* ─── Títulos dos Componentes em BOLD ─── */
html body .dx-dashboard-caption-toolbar .dx-toolbar-label,
html body .dx-dashboard-caption-toolbar .dx-item-content,
html body .dx-dashboard-item-caption,
html body .dx-dashboard-caption,
html body [class*="dx-dashboard-caption"] span,
html body [class*="dx-dashboard-caption"] div {
    font-weight: 700 !important;
}

/* ─── Contêiner de Componentes e Cards (Estilo idêntico aos Filtros - Cantos Soft) ─── */
html body .dx-layout-item-container,
html body .dx-dashboard-caption-toolbar {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .dx-dashboard-widget-viewer-item,
html body .dx-dashboard-item:not(.dx-dashboard-simple-border) {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .dx-dashboard-simple-border,
html body .dx-dashboard-item-container:not(.dx-layout-item-container):not(.dx-dashboard-standalone-item):not(.dx-tab *) {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    background-color: var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
}

html body .dx-dashboard-tabs-content {
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px !important;
    overflow: hidden !important;
}

html body .dx-flex-card-layout,
html body .dx-card,
html body .dx-card-item,
html body .dx-card-container,
html body .dx-card-main-container,
html body .dx-dashboard-card,
html body .dx-dashboard-card-item,
html body .dx-card-table {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
}
html body .dx-card-item,
html body .dx-card-container,
html body .dx-card-main-container,
html body .dx-card-item-container,
html body .dx-dashboard-card,
html body .dx-dashboard-card-item,
html body .dx-card-table {
    border-radius: var(--radius) !important;
}

/* O DevExpress às vezes calcula a largura interna do Card errada por
   alguns pixels (mesmo bug de timing dos outros itens) e mostra uma barra
   de rolagem horizontal por baixo — ela "rouba" altura do card e deixa o
   conteúdo desproporcional/espremido. Diferente da grade (onde a barra é
   necessária pra não esconder colunas de dados de verdade), aqui o
   conteúdo é só um número/rótulo curto e centralizado — os poucos pixels
   que sobram não fazem falta visualmente, então basta esconder a barra
   (sem JS, sem depender de acertar um timing). Escopado só ao Card pra não
   afetar o scroll de outros componentes que também usam .dx-scrollable-*. */
html body .dx-card-scrollable-holder .dx-scrollable-container,
html body .dx-card-scrollable-holder .dx-scrollable-wrapper {
    overflow-x: hidden !important;
}
/* O DevExtreme não usa scrollbar nativa aqui, é uma "simulada" (renderizada
   por ele mesmo como elemento próprio, .dx-scrollable-scrollbar) — por isso
   overflow-x:hidden sozinho (acima) não escondia a barra, só desativava a
   rolagem nativa que nem estava sendo usada. */
html body .dx-card-scrollable-holder .dx-scrollable-scrollbar.dx-scrollbar-horizontal {
    display: none !important;
}

/* Causa raiz de verdade do desalinhamento: o DevExpress soma 12px de
   padding esquerdo/direito (.widget-viewer-table) SEM diminuir a largura
   do conteúdo por dentro — resultado: o card nasce ~24px mais largo que o
   espaço real, deslocado ~12px pra direita (gera a barra de rolagem e o
   "não centralizado"). Vem de uma folha de estilo que o próprio DevExpress
   gera dinamicamente (não dá nem pra ler via JS — erro de CORS ao tentar
   inspecionar as regras), com especificidade alta o bastante pra vencer um
   seletor de uma classe só, mesmo com !important — por isso a repetição
   da classe abaixo (truque válido de CSS pra aumentar especificidade sem
   precisar saber o seletor exato que está competindo). */
html body div.widget-viewer-table.widget-viewer-table.widget-viewer-table.widget-viewer-table {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}


/* Cards de KPI (Resumo Financeiro) - removendo TODAS as bordas internas */
html body .dx-card-table,
html body .dx-card-table td,
html body .dx-card-table tr,
html body .dx-card-table th,
html body .dx-card-item,
html body .dx-card,
html body .dx-card-container,
html body .dx-card-main-container,
html body .dx-card-main-container td,
html body .dx-card-main-container tr,
html body .dx-card-main-container table,
html body .dx-dashboard-card-item .dx-card-table,
html body .dx-dashboard-card-item .dx-card-table td,
html body .dx-dashboard-card-item .dx-card-table tr,
html body .dx-dashboard-card-item td,
html body .dx-dashboard-card-item table {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}


html body.theme-light .dx-button-mode-contained.dx-button-default {
    background-color: var(--accent) !important;
    color: white !important;
}

html body.theme-light .dx-datagrid-headers {
    background-color: #F5F5F3 !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border) !important;
}

html body.theme-light .dx-dashboard-viewer .dx-dashboard-parameters-panel {
    background-color: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
}

html body.theme-light .dx-overlay-content {
    border-radius: var(--radius) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* ─── Tooltip do Gráfico e Overlays (suavização) ─── */

/* HTML overlay — cobre popups, tooltips, menus e dropdowns */
html body .dx-tooltip-wrapper .dx-overlay-content,
html body .dx-tooltip .dx-overlay-content,
html body .dx-overlay-wrapper.dx-tooltip-wrapper .dx-popup-content,
html body .dx-tooltip-content,
html body .dx-chart-tooltip,
html body [class*="dxc-tooltip-container"],
html body [class*="dx-tooltip"] {
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.14) !important;
}

/* SVG interno do tooltip do gráfico DevExpress Charts */
html body svg .dxc-tooltip rect,
html body svg [class*="dxc-tooltip"] rect,
html body .dx-chart svg .dxc-tooltip rect,
html body svg .dxc-tooltip-wrapper rect,
html body svg g[class*="tooltip"] rect {
    rx: 8px !important;
    ry: 8px !important;
}

/* ─── Rótulos de Gráficos — Sem Sombras, Visual Limpo e Nítido ─── */
html body svg .dxc-labels text,
html body svg [class*="dxc-labels"] text,
html body svg g.dxc-labels text {
    filter: none !important;
    text-shadow: none !important;
}


/* ─── DevExpress Dark Theme Override (Brand Identity) ─── */
html body.theme-dark {
    --border:        rgba(255, 255, 255, 0.12) !important;
    --comp-border:   rgba(255, 255, 255, 0.12) !important;
    --accent-dark: #0CD874; /* Verde OneBIHand */
    --tab-active-bg: #2b2b2b;  /* Cor do painel de conteúdo do tabpanel */
    --tab-gutter:    #1e1e1e;  /* Cor do fundo ATRÁS das abas (área acima delas) */
}

/* Selected Items / Highlights */
html body.theme-dark .dx-dashboard-item-selected {
    border-color: var(--accent-dark) !important;
}

/* Primary Buttons */
html body.theme-dark .dx-button-mode-contained.dx-button-default,
html body.theme-dark .dx-button-mode-contained.dx-button-success {
    background-color: var(--accent-dark) !important;
    color: #111111 !important;
}

/* Toolbox and Menus Highlights */
html body.theme-dark .dx-state-focused,
html body.theme-dark .dx-state-active,
html body.theme-dark .dx-list-item-selected {
    color: var(--accent-dark) !important;
}

/* Toggle Switches */
html body.theme-dark .dx-switch-on {
    background-color: var(--accent-dark) !important;
}

/* --- Arredondamento Profundo de Containers Visuais --- */
html body .dx-dashboard-widget-container,
html body .dx-dashboard-widget-viewer,
html body .dx-card-main-container,
html body .dx-dashboard-card,
html body .dx-datagrid {
    border-radius: var(--radius) !important;
}

/* Para corrigir quadrados restantes nos cantos dos headers de grids */
html body .dx-datagrid-headers {
    border-top-left-radius: var(--radius) !important;
    border-top-right-radius: var(--radius) !important;
}

/* Grid: título da coluna em uma linha, com "..." quando não cabe (texto completo no hover). Mesma regra no _Layout.cshtml. */
html body .dx-datagrid-headers .dx-header-row > td,
html body .dx-datagrid-headers .dx-header-row > td > .dx-datagrid-text-content,
html body .dx-datagrid-headers .dx-datagrid-text-content,
html body .dx-datagrid-nowrap.dx-datagrid-headers .dx-header-row > td,
html body .dx-datagrid-nowrap.dx-datagrid-headers .dx-header-row > td > .dx-datagrid-text-content {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
}
html body .dx-datagrid-headers .dx-header-row > td > .dx-datagrid-text-content {
    display: inline-block !important;
    max-width: 100% !important;
    vertical-align: middle !important;
}

html body .dx-datagrid-headers .dx-header-row {
    height: auto !important;
}

html body .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    vertical-align: middle !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

html body .dx-datagrid-headers .dx-column-indicators {
    float: right !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Colunas numéricas (alinhadas à direita via style inline "text-align:
   right" do próprio DevExpress) ficavam coladas na borda/linha divisória
   da coluna seguinte — um respiro à direita evita isso, sem mudar o
   alinhamento em si. */
html body .dx-datagrid [style*="text-align: right"] {
    padding-right: 3px !important;
}
html body .dx-datagrid [style*="text-align: left"] {
    padding-left: 3px !important;
}

/* ─── Chrome-like Tabs (DevExpress v21.2 usa dxTabs = .dx-tabs) ─── */

/* Container das abas: overflow VISÍVEL + sem linha inferior */
html body .dx-tabs,
html body .dx-tabpanel-tabs,
html body .dx-tabs-wrapper,
html body .dx-tab-strip,
html body .dx-widget.dx-tabs {
    border-bottom: none !important;
    border-bottom-width: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1;
}

/* Tabpanel container: sem borda no topo (a aba ativa "fecha" o gap) */
html body .dx-tabpanel-container,
html body .dx-widget.dx-tabpanel-container {
    border-top: none !important;
    border-top-width: 0 !important;
}

/* Cada aba individualmente */
html body .dx-tabs .dx-tab,
html body .dx-tabpanel-tabs .dx-tab,
html body .dx-tabs.dx-tabpanel-tabs .dx-tab {
    border-radius: 8px 8px 0 0 !important;
    margin: 0 10px !important;
    border: none !important;
    position: relative !important;
    overflow: visible !important;
    transition: background-color 0.2s, color 0.2s;
}

/* ─ DARK: Aba Ativa ─ */
html body.theme-dark .dx-tab.dx-tab-selected,
html body.theme-dark .dx-tabs .dx-tab.dx-tab-selected {
    background-color: var(--tab-active-bg) !important;
    z-index: 3 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

/* Canto côncavo ESQUERDO da aba ativa (dark) */
html body.theme-dark .dx-tab.dx-tab-selected::before,
html body.theme-dark .dx-tabs .dx-tab.dx-tab-selected::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: -10px !important;
    width: 10px !important;
    height: 10px !important;
    pointer-events: none !important;
    z-index: 4 !important;
    display: block !important;
    background: radial-gradient(
        circle at 0 0,
        transparent 10px,
        var(--tab-active-bg) 10.5px
    ) !important;
}

/* Canto côncavo DIREITO da aba ativa (dark) */
html body.theme-dark .dx-tab.dx-tab-selected::after,
html body.theme-dark .dx-tabs .dx-tab.dx-tab-selected::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: -10px !important;
    width: 10px !important;
    height: 10px !important;
    pointer-events: none !important;
    z-index: 4 !important;
    display: block !important;
    background: radial-gradient(
        circle at 100% 0,
        transparent 10px,
        var(--tab-active-bg) 10.5px
    ) !important;
}

/* ─ DARK: Abas Inativas ─ */
html body.theme-dark .dx-tab:not(.dx-tab-selected) {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.4) !important;
}
html body.theme-dark .dx-tab:not(.dx-tab-selected):hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ─ LIGHT: Aba Ativa ─ */
html body.theme-light .dx-tab.dx-tab-selected,
html body.theme-light .dx-tabs .dx-tab.dx-tab-selected {
    background-color: var(--surface) !important;
    z-index: 3 !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

/* Canto côncavo ESQUERDO (light) */
html body.theme-light .dx-tab.dx-tab-selected::before,
html body.theme-light .dx-tabs .dx-tab.dx-tab-selected::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: -10px !important;
    width: 10px !important;
    height: 10px !important;
    pointer-events: none !important;
    z-index: 4 !important;
    display: block !important;
    background: radial-gradient(
        circle at 0 0,
        transparent 10px,
        var(--surface) 10.5px
    ) !important;
}

/* Canto côncavo DIREITO (light) */
html body.theme-light .dx-tab.dx-tab-selected::after,
html body.theme-light .dx-tabs .dx-tab.dx-tab-selected::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: -10px !important;
    width: 10px !important;
    height: 10px !important;
    pointer-events: none !important;
    z-index: 4 !important;
    display: block !important;
    background: radial-gradient(
        circle at 100% 0,
        transparent 10px,
        var(--surface) 10.5px
    ) !important;
}

/* ─ LIGHT: Abas Inativas ─ */
html body.theme-light .dx-tab:not(.dx-tab-selected) {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: var(--text-secondary) !important;
}
html body.theme-light .dx-tab:not(.dx-tab-selected):hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color: var(--text-primary) !important;
}

/* ─ Container do conteúdo da aba (dxTabPanel apenas) ─ */
html body .dx-tabpanel-container {
    border-radius: 0 0 var(--radius) var(--radius) !important;
    overflow: hidden !important;
}

/* Garante que o datagrid header não mostre borda no topo quando dentro de aba */
html body .dx-tabpanel-container .dx-datagrid-headers,
html body .dx-dashboard-item .dx-tabpanel-container .dx-datagrid-headers,
html body [class*="dx-dashboard"] .dx-tabpanel-container .dx-datagrid-headers {
    border-top: none !important;
}

/* Quando a aba contém APENAS um datagrid (sem caption toolbar), 
   o header do grid fica logo abaixo das abas e precisa de top:none */
html body .dx-dashboard-item .dx-tabs ~ .dx-tabpanel-container .dx-datagrid-headers,
html body .dx-dashboard-item .dx-tabpanel-container > div > .dx-datagrid .dx-datagrid-headers {
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Garantindo que gráficos SVG não vazem sem quebrar nada */
html body .dx-dashboard-item-content svg > rect.dx-area-background,
html body .dx-dashboard-item-content svg > rect[fill="none"] {
    rx: var(--radius) !important;
    ry: var(--radius) !important;
}

/* Quadradinho de marcação dos checkboxes (filtros de múltipla seleção,
   listas etc.) — cantos levemente arredondados, sutil. */
html body .dx-checkbox-icon {
    border-radius: 3px !important;
}

/* Arredondamento suave para filtros e inputs menores */
html body .dx-button,
html body .dx-texteditor,
html body .dx-texteditor-container,
html body .dx-texteditor-input,
html body .dx-dropdowneditor,
html body .dx-dropdowneditor-input-wrapper,
html body .dx-dropdowneditor-button,
html body .dx-list-item {
    border-radius: var(--radius) !important;
}

/* ─── Menu Dropdown "Bonito" no Topo (Dashboard Title Toolbar) ─── */
html body .dx-dashboard-title-toolbar .dx-dropdowneditor {
    border-radius: 20px !important;
    background-color: rgba(12, 216, 116, 0.1) !important;
    border: 1px solid rgba(12, 216, 116, 0.4) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
html body .dx-dashboard-title-toolbar .dx-texteditor-input {
    color: var(--accent-dark) !important;
    font-weight: 600 !important;
    padding-left: 15px !important;
}
html body .dx-dashboard-title-toolbar .dx-dropdowneditor-button {
    background-color: transparent !important;
    border-radius: 0 20px 20px 0 !important;
}
html body .dx-dashboard-title-toolbar .dx-dropdowneditor-icon {
    color: var(--accent-dark) !important;
}

/* ─── SVG Chart Labels — Soft Rounded Corners ─── */
/* rx/ry são as propriedades CSS para arredondar <rect> em SVG */

/* Labels de dados em gráficos DevExpress — cantos arredondados suaves */
html body svg .dxc-labels rect,
html body svg [class*="dxc-labels"] rect,
html body svg g.dxc-label rect,
html body svg g[class*="dxc-label"] rect,
html body svg g[class*="label"] rect,
html body svg rect[class*="label"],
html body .dx-chart svg .dxc-labels rect {
    rx: 5px !important;
    ry: 5px !important;
    stroke: none !important;
}

/* Tooltips do gráfico */
html body .dx-tooltip-wrapper .dx-overlay-content,
html body .dxc-tooltip,
html body [class*="dxc-tooltip"] {
    border-radius: 6px !important;
    overflow: hidden !important;
}

/* Popup/Tooltip SVG rect interno */
html body svg .dxc-tooltip rect,
html body [class*="dxc-tooltip"] rect {
    rx: 6px;
    ry: 6px;
}



/* ─── Ajuste Fino dos Filtros (Compactação Externa, Padding Interno e Tipografia) ─── */
html body .dx-dashboard-group-item .dx-layout-item-container,
html body .dx-dashboard-group-item .dx-dashboard-group-item-child {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

html body .dx-dashboard-group-item .dx-layout-item-wrapper,
html body .dx-dashboard-group-item .dx-layout-item,
html body .dx-dashboard-group-item .dx-layout-group {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

html body .dx-dashboard-group-item .dx-dashboard-caption-toolbar {
    min-height: 18px !important;
    height: 18px !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
}

html body .dx-dashboard-group-item .dx-dashboard-caption-toolbar .dx-toolbar-items-container {
    height: 18px !important;
    min-height: 18px !important;
}

html body .dx-dashboard-group-item .dx-dragbar-s {
    height: 2px !important;
    min-height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .dx-dashboard-group-item .dx-texteditor-container {
    height: 20px !important;
}

html body .dx-dashboard-group-item .dx-texteditor-input,
html body .dx-dashboard-group-item .dx-placeholder {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 11px !important;
}

html body .dx-dashboard-date-filter-item .dx-button {
    min-height: 24px !important;
    height: 24px !important;
}

/* O texto ficava desalinhado verticalmente porque o line-height (12px) era
   menor que a altura real do texto renderizado — display:flex + align/justify
   center centraliza de verdade em vez de depender de padding/line-height. */
html body .dx-dashboard-date-filter-item .dx-button .dx-button-content {
    padding: 3px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .dx-dashboard-date-filter-item .dx-button-text {
    font-size: 10px !important;
    line-height: normal !important;
    white-space: nowrap !important;
}

/* Cada botão do filtro de data (Este Ano / Este Mês / Mês passado / Aplicar
   Filtro) vinha com a largura do texto mais longo do grupo (padrão do
   dx-buttongroup), maior que o espaço disponível no item — por isso só cabia
   1 por linha, ficando grandes e desalinhados. Deixamos cada um do tamanho do
   próprio texto e o container flex cuida de encaixar quantos couberem por
   linha, centralizados. */
html body .dx-dashboard-date-filter-buttons {
    justify-content: center !important;
    gap: 3px !important;
}

html body .dx-dashboard-date-filter-button {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
}

html body .dx-dashboard-date-filter-item .dx-button {
    width: auto !important;
    min-width: 0 !important;
}

html body .dx-dropdowneditor-overlay .dx-list-item,
html body .dx-dropdowneditor-overlay .dx-list-item-content {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    min-height: 22px !important;
}

html body .dx-dashboard-group-item .dx-dashboard-caption-toolbar .dx-toolbar-label,
html body .dx-dashboard-group-item .dx-dashboard-caption-toolbar .dx-item-content,
html body .dx-dashboard-group-item .dx-dashboard-item-caption,
html body .dx-dashboard-group-item .dx-dashboard-ellipsis {
    font-size: 11px !important;
}

html body .dx-dropdowneditor-overlay .dx-list-item,
html body .dx-dropdowneditor-overlay .dx-list-item-content,
html body .dx-dropdowneditor-overlay .dx-checkbox-text {
    font-size: 11px !important;
}

/* Popup do filtro de múltipla seleção (checkbox + Confirmar/Cancelar) vinha
   com respiros padrão do DevExpress bem largos (20px ao redor da lista e
   dos botões, "(Todos)" bem mais alto que os outros itens) — reduzido pra
   caber mais itens na tela sem precisar rolar tanto. Escopado a popups que
   têm a lista de seleção (:has), pra não encolher outros popups do app. */
html body .dx-overlay-content:has(.dx-list-select-all) .dx-popup-content.dx-popup-content {
    padding: 8px !important;
}
html body .dx-overlay-content:has(.dx-list-select-all) .dx-popup-bottom {
    padding: 8px !important;
}
html body .dx-list-select-all {
    padding: 6px 0 !important;
}
/* Confirmar/Cancelar do filtro de múltipla seleção (popup do tagbox): os botões
   ficam no grupo "center" da barra, que a DevExtreme renderiza como tabela com
   largura própria — com filtro estreito ela transbordava e cortava o "Confirmar".
   Vira flex: lado a lado quando cabem (>=100px cada), senão um embaixo do outro.
   Validado em navegador headless com a DevExtreme do Viewer (150/200/260/280px). */html body .dx-tagbox-popup-wrapper .dx-popup-bottom.dx-toolbar {
    height: auto !important;
}
html body .dx-tagbox-popup-wrapper .dx-popup-bottom .dx-toolbar-items-container {
    height: auto !important;
}
html body .dx-tagbox-popup-wrapper .dx-popup-bottom .dx-toolbar-center {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}
html body .dx-tagbox-popup-wrapper .dx-popup-bottom .dx-toolbar-center .dx-toolbar-item {
    display: block !important;
    flex: 1 1 100px !important;
    min-width: 0 !important;
    padding: 0 !important;
}
html body .dx-tagbox-popup-wrapper .dx-popup-bottom .dx-toolbar-center .dx-button {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}
html body .dx-tagbox-popup-wrapper .dx-popup-bottom .dx-toolbar-center .dx-button .dx-button-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
}


/* O DevExpress calcula a largura interna do conteúdo do dashboard (o wrapper
   com padding esquerdo/direito, usado como respiro nas bordas) usando o
   próprio valor em pixels que ele mesmo atribui, sem descontar seu padding —
   por isso o conteúdo (grids largos, etc.) ultrapassa exatamente pela largura
   do padding direito e sai cortado pela borda direita da tela, enquanto a
   esquerda respeita a margem normalmente (o padding-left empurra o conteúdo
   via fluxo normal, então nunca vaza). Forçar 100%/auto em vez do valor fixo
   corrige a conta.  */
html body [data-bind*="scrollView.contentWrapperStyles"] {
    width: 100% !important;
    max-width: 100% !important;
}