/* ─── 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;
}

/* Popups dos filtros (combo com Confirmar/Cancelar, listas, datas) e filtro em árvore:
   cantos arredondados nos dois temas (antes só no tema claro). overflow:hidden para o
   fundo da barra de botões e da lista não "vazar" pelos cantos. */
html body .dx-dropdowneditor-overlay .dx-overlay-content,
html body .dx-tagbox-popup-wrapper .dx-overlay-content,
html body .dx-dropdownbox-popup-wrapper .dx-overlay-content,
html body .dx-selectbox-popup-wrapper .dx-overlay-content {
    border-radius: 8px !important;
    overflow: hidden !important;
}

html body .dx-dropdowneditor-overlay .dx-popup-bottom,
html body .dx-tagbox-popup-wrapper .dx-popup-bottom {
    border-radius: 0 0 8px 8px !important;
}

html body .dx-dashboard-item .dx-treeview,
html body .dx-overlay-content .dx-treeview {
    border-radius: 8px !important;
    overflow: hidden;
}

html body .dx-treeview .dx-treeview-search,
html body .dx-treeview .dx-texteditor {
    border-radius: 8px !important;
}

/* Filtro em árvore (DevExpress 21.2 usa dxTreeList): caixa com cantos arredondados.
   As bordas ficam nos blocos internos (cabeçalho/linhas), então cada um ganha o canto do seu lado. */
html body .dx-dashboard-item .dx-treelist,
html body .dx-dashboard-item .dx-treelist-container {
    border-radius: 8px !important;
}
html body .dx-dashboard-item .dx-treelist-borders > .dx-treelist-headers {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}
html body .dx-dashboard-item .dx-treelist-borders > .dx-treelist-rowsview,
html body .dx-dashboard-item .dx-treelist-borders > .dx-treelist-total-footer {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}
html body .dx-dashboard-item .dx-treelist-borders > .dx-treelist-headers:last-child,
html body .dx-dashboard-item .dx-treelist-borders > .dx-treelist-rowsview:first-child {
    border-radius: 8px !important;
}
html body .dx-dashboard-item .dx-treelist-search-panel,
html body .dx-dashboard-item .dx-treelist .dx-texteditor {
    border-radius: 8px !important;
}

/* Barra Confirmar/Cancelar do filtro em árvore (TreeViewApplyButtonExtension.js): mesmo jeito
   do combo — lado a lado quando cabe, um embaixo do outro quando o filtro é estreito. */
html body .treeview-apply-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 2px 0 2px;
    box-sizing: border-box;
}
html body .treeview-apply-bar > .dx-button {
    flex: 1 1 100px;
    min-width: 0;
    border-radius: 8px !important;
}
html body .treeview-apply-bar:not(.has-pending) > .dx-button {
    opacity: .55;
}

/* Filtro em árvore com busca: no tema do painel a busca fica num painel de cabeçalho com borda
   própria (acima do "(Todos)"). Os cantos de cima vão para ele; o "(Todos)" logo abaixo fica reto. */
html body .dx-dashboard-item .dx-treelist-header-panel {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}
html body .dx-dashboard-item .dx-treelist-header-panel + .dx-treelist-headers,
html body .dx-dashboard-item .dx-treelist-borders > .dx-treelist-header-panel + .dx-treelist-headers {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Rodapé (Index.cshtml): nome do usuário conectado + mensagens do canal (FooterMessages.js).
   Só texto na faixa vazia de baixo do painel, sem caixa. */
#viewerFooter {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: 9px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    line-height: 1;
    color: inherit;
    background: none;
    border: none;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    z-index: 5;
}
#viewerUserName {
    opacity: .55;
    flex: 0 0 auto;
}
#viewerMessage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: viewerMessageIn .4s ease;
}
#viewerMessage .fa-bell {
    color: #F2A900;
    font-size: 11px;
}
#viewerMessage a {
    color: #0B7BD6;
    text-decoration: underline;
    pointer-events: auto;
    overflow: hidden;
    text-overflow: ellipsis;
}
@keyframes viewerMessageIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

/* Filtro em árvore (dxTreeList) no mesmo padrão das listas dos outros filtros
   (_Layout: itens com padding 3px e fonte 11px). Antes as linhas usavam o padrão do
   grid do DevExtreme (~7px e 13px), bem mais espaçadas. */
html body .dx-dashboard-item .dx-treelist .dx-row > td,
html body .dx-dashboard-item .dx-treelist .dx-header-row > td {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
}
html body .dx-dashboard-item .dx-treelist .dx-treelist-text-content,
html body .dx-dashboard-item .dx-treelist-search-panel .dx-texteditor-input,
html body .dx-dashboard-item .dx-treelist-search-panel .dx-placeholder {
    font-size: 11px !important;
}
html body .dx-dashboard-item .dx-treelist-header-panel {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

/* Caixa do filtro em árvore: a borda vem do container do item (regra geral de itens acima);
   o conteúdo de dentro (faixa da busca) tinha fundo de cantos retos e cobria o arredondado.
   overflow:hidden recorta o conteúdo pelo canto da caixa. */
html body .dx-dashboard-item-container:has(.dx-treelist),
html body .dx-dashboard-tree-item {
    border-radius: 8px !important;
    overflow: hidden !important;
}
html body .dx-dashboard-item .dx-treelist-header-panel {
    background-color: transparent !important;
}

/* Mensagens do rodapé: fixas (duração 0) + a que está revezando, separadas por "•". */
#viewerMessage .viewer-message-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
#viewerMessage .viewer-message-item + .viewer-message-item::before {
    content: '•';
    opacity: .5;
    margin-right: 4px;
}



/* Filtro de data: botões mais justos nas laterais (cabem mais por linha), ainda centralizados.
   O DevExpress põe margem/padding também no invólucro de cada botão, além do conteúdo. */
html body .dx-dashboard-date-filter-item .dx-dashboard-date-filter-button,
html body .dx-dashboard-date-filter-item .dx-button {
    margin: 0 !important;
    padding: 0 !important;
}
html body .dx-dashboard-date-filter-item .dx-button .dx-button-content,
html body .dx-dashboard-date-filter-item .dx-button-has-text .dx-button-content {
    padding: 3px 4px !important;
}

/* ─── Celular (layout mobile do DevExpress): botões numa faixa própria no topo e o painel
   (com a linha do título) logo abaixo — antes os botões ficavam por cima do título.
   A classe viewer-mobile é posta no body pelo Index.cshtml quando o layout mobile é usado. ─── */
html body.viewer-mobile #dashboardHost {
    top: 44px !important;
}
html body.viewer-mobile::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: #FFFFFF;
    border-bottom: 1px solid #E4E4E0;
    z-index: 9999990;
}
html body.viewer-mobile.theme-dark::before {
    background: #202025;
    border-bottom-color: #34343B;
}
html body.viewer-mobile #panelMenuMobileSelectedDashboards {
    position: fixed !important;
    top: 6px !important;
    left: 8px !important;
    right: auto !important;
    margin: 0 !important;
    display: flex !important;
    gap: 4px;
}
html body.viewer-mobile #topMenuActionsWrap {
    position: fixed !important;
    top: 0 !important;
    right: 8px !important;
    height: 44px !important;
}

/* Filtro em árvore com linhas compactas (25px): as caixas de marcar do DevExtreme (22px) quase
   encostavam umas nas outras e pareciam uma coluna só. 16px como nas listas dos outros filtros. */
html body .dx-dashboard-item .dx-treelist .dx-checkbox-icon {
    width: 16px !important;
    height: 16px !important;
    border-radius: 3px !important;
}
html body .dx-dashboard-item .dx-treelist .dx-checkbox-container,
html body .dx-dashboard-item .dx-treelist .dx-checkbox {
    min-height: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
}
html body .dx-dashboard-item .dx-treelist .dx-checkbox-checked .dx-checkbox-icon::before {
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
    margin-top: -6px !important;
    margin-left: -6px !important;
}
html body .dx-dashboard-item .dx-treelist .dx-checkbox-indeterminate .dx-checkbox-icon::before {
    width: 8px !important;
    height: 8px !important;
}

/* Filtro em árvore: caixa do "(Todos)" (cabeçalho) igual às das linhas — o cabeçalho alinhava pelo
   topo (subia) e o tema do painel deixa o cabeçalho mais apagado. Mesma borda e opacidade nas duas. */
html body .dx-dashboard-item .dx-treelist .dx-header-row > td,
html body .dx-dashboard-item .dx-treelist .dx-data-row > td {
    vertical-align: middle !important;
    opacity: 1 !important;
}
html body .dx-dashboard-item .dx-treelist .dx-header-row .dx-checkbox,
html body .dx-dashboard-item .dx-treelist .dx-data-row .dx-checkbox {
    opacity: 1 !important;
    margin-top: 0 !important;
    top: 0 !important;
    vertical-align: middle !important;
}
html body .dx-dashboard-item .dx-treelist .dx-header-row .dx-checkbox-icon,
html body .dx-dashboard-item .dx-treelist .dx-data-row .dx-checkbox-icon {
    border: 1px solid rgba(0, 0, 0, .28) !important;
    opacity: 1 !important;
}
html body.theme-dark .dx-dashboard-item .dx-treelist .dx-header-row .dx-checkbox-icon,
html body.theme-dark .dx-dashboard-item .dx-treelist .dx-data-row .dx-checkbox-icon {
    border-color: rgba(255, 255, 255, .35) !important;
}

/* Caixas do filtro em árvore: a borda (1px) somava aos 16px e o contêiner de 16px cortava a linha
   de baixo em algumas linhas (arredondamento de subpixel). Borda dentro dos 16px e sem corte. */
html body .dx-dashboard-item .dx-treelist .dx-checkbox-icon {
    box-sizing: border-box !important;
}
html body .dx-dashboard-item .dx-treelist .dx-checkbox-container,
html body .dx-dashboard-item .dx-treelist .dx-checkbox {
    height: auto !important;
    min-height: 16px !important;
    overflow: visible !important;
}

/* Linha de baixo sumindo em algumas caixas: a célula da árvore (.dx-treelist-cell-expandable) tem
   overflow escondido e cortava o pixel de baixo da caixa (conforme zoom/fonte). Sem corte nela;
   o texto continua com "..." pelo próprio .dx-treelist-text-content. */
html body .dx-dashboard-item .dx-treelist .dx-treelist-cell-expandable,
html body .dx-dashboard-item .dx-treelist .dx-header-row > td,
html body .dx-dashboard-item .dx-treelist .dx-data-row > td {
    overflow: visible !important;
}
html body .dx-dashboard-item .dx-treelist .dx-treelist-text-content {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
/* Filtro de data dentro de aba/grupo: lá o item não recebe .dx-dashboard-date-filter-item, então
   as regras acima não pegavam (botões grandes, fonte maior, muito espaço nas laterais). Mesmo visual,
   preso ao conjunto de botões do filtro, que existe com ou sem grupo. */
html body .dx-dashboard-date-filter-buttons {
    justify-content: center !important;
    gap: 3px !important;
}
html body .dx-dashboard-date-filter-buttons .dx-dashboard-date-filter-button,
html body .dx-dashboard-date-filter-buttons .dx-button {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 24px !important;
    height: 24px !important;
}
html body .dx-dashboard-date-filter-buttons .dx-button .dx-button-content,
html body .dx-dashboard-date-filter-buttons .dx-button-has-text .dx-button-content {
    padding: 3px 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body .dx-dashboard-date-filter-buttons .dx-button-text {
    font-size: 10px !important;
    line-height: normal !important;
    white-space: nowrap !important;
}

/* Botões do filtro de data cortados em cima/embaixo: sem título o DevExpress puxa a área dos botões
   3px para fora (margin:-3px), contando com a margem de 3px de cada botão — que zeramos acima.
   Sem deslocamento e com 1px de folga, as bordas da primeira e da última linha aparecem. */
html body .dx-dashboard-date-filter-buttons,
html body .dx-dashboard-date-filter-buttons.dx-dashboard-date-filter-buttons-no-caption {
    margin: 0 !important;
    padding: 1px !important;
    box-sizing: border-box !important;
}

/* ─── Abas de painel (contêiner de abas do DevExpress = .dx-dashboard-layout-tabs) ─── (v92: visual abaixo, "Chrome" desenhado na faixa do título)
   O DevExpress calcula a largura de cada aba no item interno (.dx-dashboard-standalone-item, estilo
   inline), estica as visíveis para preencher a linha, zera a largura das que não cabem e mostra o
   botão "..." (.dx-dashboard-toggle-menu-button) com a lista. Nada aqui pode somar largura à aba
   (padding/margem/borda lateral), senão as últimas abas e o "..." vão para fora da tela. */
html body .dx-dashboard-layout-tabs .dx-tab {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}
html body .dx-dashboard-layout-tabs .dx-tab:has(.dx-dashboard-standalone-item[style*="width: 0px"]) {
    display: none !important;
}
html body .dx-dashboard-layout-tabs .dx-tab .dx-dashboard-standalone-item {
    position: relative !important;
    height: 100% !important;
    overflow: hidden !important;
}
html body .dx-dashboard-layout-tabs .dx-tab .dx-dashboard-ellipsis {
    padding: 0 10px !important;
    box-sizing: border-box !important;
}
html body .dx-dashboard-toggle-menu-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 11;
    cursor: pointer;
}
/* Rodapé (nome do usuário + mensagens) com faixa própria: o painel termina 11px acima da borda (a margem interna de ~18px do DevExpress completa o espaço; mesmo respiro acima e abaixo do texto),
   em vez de ir até o fim da tela e ficar por baixo do texto (ex.: pivot que ocupa a altura toda).
   O DevExpress dimensiona o painel pelo contêiner, então tudo se ajusta a essa altura. */
html body #dashboardHost {
    bottom: 11px !important;
}

/* Abas de painel: visual "Chrome" desenhado DENTRO da largura que o DevExpress reserva para cada aba. */
html body .dx-dashboard-layout-tabs .dx-tab,
html body .dx-dashboard-layout-tabs .dx-tab:hover,
html body .dx-dashboard-layout-tabs .dx-tab.dx-tab-selected {
    background: transparent !important;
    box-shadow: none !important;
}
html body .dx-dashboard-layout-tabs .dx-tab::before,
html body .dx-dashboard-layout-tabs .dx-tab::after {
    content: none !important;
    display: none !important;
}
html body .dx-dashboard-layout-tabs .dx-tab .dx-dashboard-standalone-item {
    overflow: visible !important;
}
html body .dx-dashboard-layout-tabs .dx-tab .dx-dashboard-caption-toolbar {
    margin: 0 10px !important;
    width: calc(100% - 20px) !important;
    height: 100% !important;
    border-radius: 8px 8px 0 0 !important;
    position: relative !important;
    overflow: visible !important;
    transition: background-color .2s, color .2s;
}
html body.theme-light .dx-dashboard-layout-tabs .dx-tab .dx-dashboard-caption-toolbar { background-color: rgba(0, 0, 0, .04) !important; color: var(--text-secondary) !important; }
html body.theme-light .dx-dashboard-layout-tabs .dx-tab:not(.dx-tab-selected):hover .dx-dashboard-caption-toolbar { background-color: rgba(0, 0, 0, .08) !important; color: var(--text-primary) !important; }
html body.theme-light .dx-dashboard-layout-tabs .dx-tab.dx-tab-selected .dx-dashboard-caption-toolbar { background-color: var(--surface) !important; color: var(--text-primary) !important; font-weight: 500 !important; }
html body.theme-dark .dx-dashboard-layout-tabs .dx-tab .dx-dashboard-caption-toolbar { background-color: rgba(255, 255, 255, .04) !important; color: rgba(255, 255, 255, .4) !important; }
html body.theme-dark .dx-dashboard-layout-tabs .dx-tab:not(.dx-tab-selected):hover .dx-dashboard-caption-toolbar { background-color: rgba(255, 255, 255, .08) !important; color: rgba(255, 255, 255, .7) !important; }
html body.theme-dark .dx-dashboard-layout-tabs .dx-tab.dx-tab-selected .dx-dashboard-caption-toolbar { background-color: var(--tab-active-bg) !important; color: #fff !important; font-weight: 500 !important; }
/* cantos côncavos da aba selecionada (agora na faixa do título, dentro da folga de 10px) */
html body .dx-dashboard-layout-tabs .dx-tab.dx-tab-selected .dx-dashboard-caption-toolbar::before,
html body .dx-dashboard-layout-tabs .dx-tab.dx-tab-selected .dx-dashboard-caption-toolbar::after {
    content: ''; position: absolute; bottom: 0; width: 10px; height: 10px; pointer-events: none; z-index: 4;
}
html body .dx-dashboard-layout-tabs .dx-tab.dx-tab-selected .dx-dashboard-caption-toolbar::before { left: -10px; }
html body .dx-dashboard-layout-tabs .dx-tab.dx-tab-selected .dx-dashboard-caption-toolbar::after { right: -10px; }
html body.theme-light .dx-dashboard-layout-tabs .dx-tab.dx-tab-selected .dx-dashboard-caption-toolbar::before { background: radial-gradient(circle at 0 0, transparent 10px, var(--surface) 10.5px); }
html body.theme-light .dx-dashboard-layout-tabs .dx-tab.dx-tab-selected .dx-dashboard-caption-toolbar::after { background: radial-gradient(circle at 100% 0, transparent 10px, var(--surface) 10.5px); }
html body.theme-dark .dx-dashboard-layout-tabs .dx-tab.dx-tab-selected .dx-dashboard-caption-toolbar::before { background: radial-gradient(circle at 0 0, transparent 10px, var(--tab-active-bg) 10.5px); }
html body.theme-dark .dx-dashboard-layout-tabs .dx-tab.dx-tab-selected .dx-dashboard-caption-toolbar::after { background: radial-gradient(circle at 100% 0, transparent 10px, var(--tab-active-bg) 10.5px); }
/* Fio vertical entre abas: borda direita padrão do item do DevExpress dentro da aba. */
html body .dx-dashboard-layout-tabs .dx-tab .dx-dashboard-standalone-item {
    border: none !important;
}

/* Filtro em lista (Caixa de listagem / opções tipo "Recorte") e área de linhas do filtro em árvore:
   cantos arredondados como os demais filtros; overflow escondido para o fundo das linhas não cobrir o canto. */
html body .dx-dashboard-item .dx-dashboard-list,
html body .dx-dashboard-list.dx-scrollable {
    border-radius: 8px !important;
    overflow: hidden !important;
}
/* no filtro em árvore as linhas ficam abaixo de busca/(Todos): só os cantos de baixo, senão abre um dente no meio da caixa */
html body .dx-dashboard-item .dx-treelist-rowsview {
    border-radius: 0 0 8px 8px !important;
    overflow: hidden !important;
}

/* Aba selecionada: a regra antiga "body.theme-* .dx-tabs .dx-tab.dx-tab-selected" (mais específica) e o DevExpress
   (".dx-tab-selected .dx-dashboard-item-container") pintavam de branco a aba inteira e o item interno, tapando o
   título arredondado e os cantos côncavos — a aba aparecia quadrada. Só o título (.dx-dashboard-caption-toolbar) tem fundo. */
html body .dx-dashboard-layout-tabs.dx-tabs .dx-tab,
html body .dx-dashboard-layout-tabs.dx-tabs .dx-tab.dx-tab-selected,
html body .dx-dashboard-layout-tabs.dx-tabs .dx-tab .dx-dashboard-standalone-item {
    background: transparent !important;
    box-shadow: none !important;
}

/* Abas de painel: desliga os cantos côncavos do visual antigo (::before/::after na aba inteira, regra
   "body.theme-* .dx-tabs .dx-tab.dx-tab-selected::before" mais específica). Eles ficavam por fora da aba,
   em cima da vizinha, e formavam "dentes". Os cantos agora são só os do título (.dx-dashboard-caption-toolbar). */
html body .dx-dashboard-layout-tabs.dx-tabs .dx-tab.dx-tab-selected::before,
html body .dx-dashboard-layout-tabs.dx-tabs .dx-tab.dx-tab-selected::after,
html body .dx-dashboard-layout-tabs.dx-tabs .dx-tab::before,
html body .dx-dashboard-layout-tabs.dx-tabs .dx-tab::after {
    content: none !important;
    display: none !important;
}

/* Celular (layout mobile do DevExpress): cada componente vem numa caixa fixa de 250px (altura inline).
   Componente de texto ocupa só a altura do próprio texto. Os demais (gráfico, card, grade) seguem com a altura do DevExpress. */
html body dashboard-mobile-layout-widget .dx-list-item:has(.dx-dashboard-textbox-content) .dx-dashboard-standalone-item-container,
html body dashboard-mobile-layout-widget .dx-list-item:has(.dx-dashboard-textbox-content) .dx-dashboard-standalone-item,
html body dashboard-mobile-layout-widget .dx-list-item:has(.dx-dashboard-textbox-content) .dx-dashboard-item,
html body dashboard-mobile-layout-widget .dx-list-item:has(.dx-dashboard-textbox-content) .dx-dashboard-item > .dx-scrollable,
html body dashboard-mobile-layout-widget .dx-list-item:has(.dx-dashboard-textbox-content) .dx-dashboard-item > .dx-scrollable > .dx-scrollable-wrapper,
html body dashboard-mobile-layout-widget .dx-list-item:has(.dx-dashboard-textbox-content) .dx-dashboard-item > .dx-scrollable > .dx-scrollable-wrapper > .dx-scrollable-container {
    height: auto !important;
}
/* Celular: a lista de painéis rola dentro da altura visível da tela (sem altura ela crescia com todos os painéis
   e, como a página não rola, os de baixo ficavam inalcançáveis). 70px = título do popup + margens. */
html body .dashboard-picker-mobile-wrap .dashboard-picker-list {
    height: calc(100vh - 70px) !important;
    height: calc(100dvh - 70px) !important;
}/* Celular: com um popup em tela cheia aberto (lista de painéis, cenários, filtros), a faixa de botões do topo
   (z-index alto) ficava por cima do título do popup — tocar no "X" acertava o botão de sair. Some enquanto o popup está aberto. */
html body.viewer-mobile:has(.dx-popup-wrapper .dx-popup-fullscreen)::before,
html body.viewer-mobile:has(.dx-popup-wrapper .dx-popup-fullscreen) #panelMenuMobileSelectedDashboards,
html body.viewer-mobile:has(.dx-popup-wrapper .dx-popup-fullscreen) #topMenuActionsWrap {
    display: none !important;
}
/* Celular: a mensagem do canal vai para a faixa de botões do topo (entre os botões da esquerda e da direita).
   No rodapé ela ficava por cima do último componente. O nome do usuário não aparece no celular. */
html body.viewer-mobile #dashboardHost {
    bottom: 0 !important;
}
html body.viewer-mobile #viewerFooter {
    top: 0;
    bottom: auto;
    left: 84px;
    right: 120px;
    height: 44px;
    justify-content: center;
    font-size: 16px;
    z-index: 9999995;
}
html body.viewer-mobile #viewerUserName {
    display: none;
}
html body.viewer-mobile #viewerMessage {
    max-width: 100%;
    white-space: nowrap;
}
html body.viewer-mobile #viewerMessage .fa-bell {
    font-size: 16px;
}
html body.viewer-mobile:has(.dx-popup-wrapper .dx-popup-fullscreen) #viewerFooter {
    display: none !important;
}
/* Celular: o componente aberto em tela cheia (toque no item) tem o botão "Voltar" no topo, que ficava embaixo
   da faixa de botões. Esconde a faixa também nesse caso (o seletor anterior só pegava .dx-popup-fullscreen). */
html body.viewer-mobile:has(.dx-dashboard-fullscreen-item-popup)::before,
html body.viewer-mobile:has(.dx-dashboard-fullscreen-item-popup) #panelMenuMobileSelectedDashboards,
html body.viewer-mobile:has(.dx-dashboard-fullscreen-item-popup) #topMenuActionsWrap,
html body.viewer-mobile:has(.dx-dashboard-fullscreen-item-popup) #viewerFooter {
    display: none !important;
}
/* Celular: mensagem do topo rola até o fim quando não cabe (FooterMessages.js) e abre inteira ao tocar. */
html body.viewer-mobile #viewerMessage {
    pointer-events: auto;
    cursor: pointer;
    justify-content: flex-start;
}
html body.viewer-mobile .viewer-message-track {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
}
html body.viewer-mobile .viewer-message-track.scrolling {
    animation-name: viewerMessageScroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes viewerMessageScroll {
    0%, 12% { transform: translateX(0); }
    88%, 100% { transform: translateX(var(--viewer-message-shift, 0)); }
}
.viewer-message-popup {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 1.4;
}
.viewer-message-popup .viewer-message-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 10px 0;
    white-space: normal;
}
.viewer-message-popup .viewer-message-item + .viewer-message-item {
    border-top: 1px solid #E4E4E0;
}
.viewer-message-popup a {
    color: #0B7BD6;
    text-decoration: underline;
    word-break: break-all;
}
/* Rodapé, lado direito: atualização dos dados do painel (FooterMessages.js, Admin → Dashboards → "Atualização"). */
#viewerDataUpdate {
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    opacity: .55;
}
#viewerDataUpdate .fa-rotate {
    font-size: 10px;
    margin-right: 2px;
}
/* Celular: o rodapé vira a faixa do topo (só a mensagem cabe). */
html body.viewer-mobile #viewerDataUpdate {
    display: none !important;
}