.lc-group-header-segments-button-icon {
    width: 12px;
    /* height: 10px; */
    left: 1px;
    top: 0px;
    /* Textos / Claros */

    background: #8b90a3;
    transform: matrix(0, 1, 1, 0, 0, 0);
}

.lc-group-header-segments .chevron-visible {
    transform: rotate(0deg);
}

.titlefix {
    width: calc(100% - 36px);
    transform: translateY(-30px);
    display: flex;
    position: relative;
    z-index: 1000000;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.lc-group-header-segments .chevron-nonvisible {
    transform: rotate(-90deg);
}

.bodyGroup.collapsed {
    max-height: 0;
    display: none;
    min-width: calc(30vw);
}

.bodyGroup>div {
    width: calc(100% - 4px);
}

.bodyGroup.scroll>div {
    width: calc(100% + 4px);
}

.bodyGroup.scroll>div::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.25rem;
    background-color: #eee;
    z-index: 5;
}

.bodyGroup.scroll>div::-webkit-scrollbar-thumb {
    background: #cccccf;
    border-radius: 0.25rem;
}

.bodyGroup.scroll>div::-webkit-scrollbar-thumb:hover {
    background: #ddd;
}

.bodyGroup.scroll>div::-webkit-scrollbar-track {
    border-radius: 0.25rem;
}

.bodyGroup {
    min-width: calc(30vw);
}

.lc-group-header-segments-button {
    /* Frame 129 */

    width: 12px;
    left: 4px;
    top: 9px;
    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 6px;
    display: flex;
    align-content: center;
    justify-content: center;
}

.lc-group-header-segments-money {
    /* 0,00 */
    width: 100px;
    height: 22px;
    font-family: "Ubuntu", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 160%;
    /* or 22px */

    text-align: right;
    letter-spacing: -0.05em;
    font-feature-settings: "tnum" on, "lnum" on;
    /* Textos / Padr?o */

    color: #525252;
    /* Inside auto layout */

    flex: none;
    order: 2;
    flex-grow: 0;
    margin: 0px 6px;
}

.lc-group-header-segments-title {
    /* Texto */
    max-width: calc(100vw - 620px);
    height: 22px;
    /* Texto/Padr?o - 14pt/Semibold */

    font-family: "Ubuntu", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 160%;
    /* or 22px */
    /* Link */

    color: var(--text-default);
    /* Inside auto layout */

    margin: 0px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-group-header-segments {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px 4px;
    width: 100%;
    height: 30px;
    background: #ebebeb;
    border-radius: 6px;
    margin: 4px 0px;
}

.icon-minus,
.icon-plus {
    margin-right: 10px;
    position: relative;
}


.values-container {
    display: flex;
    -webkit-user-select: none;
            user-select: none;
    position: relative;
    overflow: visible;
    justify-content: flex-end;
    gap: 15px;
    width: 350px;
}

/* Regras simples para todas as colunas */
.values-container span.row,
.values-container div.row,
span.row.w-100.text-right,
div.row.w-100.text-right {
    width: 100px !important;
    text-align: right !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.values-container-wrapper {
    position: relative;
    transition: transform 0.2s ease;
}

.drag-area {
    position: absolute;
    left: -12px;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    z-index: 11;
    background-color: transparent;
    pointer-events: auto;
}

.drag-area:hover+.drag-line {
    background-color: #999;
}

.drag-line {
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #ccc;
    z-index: 5;
    border-radius: 1px;
    opacity: 0.7;
    transition: background-color 0.2s ease;
    pointer-events: none;
}

.drag-line:hover {
    background-color: #999;
}

.finops-row .values-container-wrapper,
.virtual-item .values-container-wrapper,
.tree-node .values-container-wrapper,
.tree-node-child .values-container-wrapper {
    position: relative;
    transition: transform 0.2s ease;
}

.finops-row .values-container-wrapper .drag-line,
.virtual-item .values-container-wrapper .drag-line,
.tree-node .values-container-wrapper .drag-line,
.tree-node-child .values-container-wrapper .drag-line {
    display: block;
}

.values-container {
    position: relative;
    z-index: 12;
    pointer-events: auto;
}

.values-container span {
    position: relative;
    z-index: 13;
    pointer-events: auto;
}

.drag-area:hover {
    cursor: col-resize;
}

.drag-area:hover+.drag-line {
    background-color: #999;
}

.lc-segment-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-height: 27px;
}

.lc-segment-title-filter {
    display: flex;
    justify-content: flex-end;
}

.lc-group-body {
    width: 65%;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    align-items: center;
    top: 75px;
}

.lc-group-row {
    padding-left: 32px;
    padding-right: 3px;
    border-bottom: 1px solid #ccc;
    width: 100%;
    height: 30px;
    flex: none;
    order: 1;
    flex-grow: 0;
    margin: 0;
    max-width: inherit;
}

.lc-group-row-inner-text {
    max-width: calc(100vw - 600px);
    height: 22px;
    font-family: "Ubuntu", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    color: var(--text-default);
    flex: none;
    order: 1;
    flex-grow: 0;
    margin: 0px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-group-row-inner-text-sidemodal {
    max-width: calc(100vw - 600px);
    height: 22px;
    font-family: "Ubuntu", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    color: var(--text-default);
    flex: none;
    order: 1;
    flex-grow: 0;
    margin: 0px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-group-row-inner-money {
    width: 100px;
    height: 22px;
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    text-align: right;
    font-feature-settings: "tnum" on, "lnum" on;
    color: var(--text-default);
    margin: 0 2px 0 10px;
}

.lc-group-row-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    width: inherit;
    height: 22px;
    justify-content: space-between;
}

.lc-group-row-inner>.row>.lc-iconlink.small {
    visibility: hidden;
}

.lc-group-row-inner:hover>.row>.lc-iconlink.small {
    visibility: visible;
}

.lc-group-header-segments>.row>.lc-iconlink.small {
    visibility: hidden;
}

.lc-group-header-segments:hover>.row>.lc-iconlink.small {
    visibility: visible;
}

.lc-selectLabel {
    position: static;
    height: 18px;
    left: 0px;
    top: 0px;
    font-family: "Ubuntu", sans-serif;
    font-style: normal;
    line-height: 150%;
    font-size: 12px;
    line-height: 150%;
    margin: 3px 0px;
}

.lc-group-row>.lc-group-row-inner>.pp-tooltip {
    width: 80%;
    overflow: hidden;
}


.finops-row-title {
    border-bottom: solid 1px #E2E6F3;
    display: flex;
    justify-content: space-between;
    /* background: #EAEEF6; */
    /* border-radius: 0.25rem; */
    /*padding: 0.25rem 0.5rem;*/
    color: #2E1956;
    font-family: "Ubuntu", sans-serif;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.maiores-consumos-full {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.maiores-consumos-full .titlefix {
    min-height: 1.25rem;
    margin-bottom: 4px;
    transform: translateY(0);
}

.finops-row {
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-left: 0px;
    color: #2E1956;
    align-items: center;
    padding: 1px 0;
    line-height: 1.2;
}

.finops-row:hover {
    background-color: #F1F5FB !important;
}

.finops-row:nth-child(even) {
    background: #fff;
}

.striped .finops-row:nth-child(odd) {
    background-color: #fdfdfd;
}

.finops-row:nth-child(odd) {
    background: #fff;
}

.finops-row.link {
    margin-left: 0;
}

/* .finops-row .ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
} */

/* Estilos para Virtual Table */
.virtual-data-container {
    width: 100%;
    border: none;
    border-radius: 4px;
    background: #fff;
    margin: 4px 0;
}

.virtual-data-container .finops-row {
    border-bottom: 1px solid #ccc;
    margin-left: 0;
    padding: 4px 8px;
}

.virtual-data-container .finops-row:last-child {
    border-bottom: none;
}

.virtual-data-container .finops-row:hover {
    background-color: #F1F5FB !important;
}

/* Customiza??o da scrollbar para a virtual table */
.virtual-data-container div[style*="overflow"]::-webkit-scrollbar {
    width: 6px;
}

.virtual-data-container div[style*="overflow"]::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 3px;
}

.virtual-data-container div[style*="overflow"]::-webkit-scrollbar-thumb {
    background: #cccccf;
    border-radius: 3px;
}

.virtual-data-container div[style*="overflow"]::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

.expand-collapse-buttons {
    display: flex;
    align-items: left;
}

.expand-collapse-buttons>.btn-expand {
    border: none;
    background: #fff;
    color: var(--color-primary-blue);
    font-size: 12px;
    padding: 5px 0px;
    margin-bottom: 5px;
    font-family: "Ubuntu", sans-serif;
}

.expand-collapse-buttons .btn-expand:hover {
    /* background: #F1F5FB; */
    color: var(--text-default);
    font-family: "Ubuntu", sans-serif;
}

/* Estrutura de ?rvore baseada no CodePen */
.tree-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree-list {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 16px;
    position: relative;
}


.tree-list::after {
    content: "";
    display: block;
    width: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    border-left: 1px solid #ccc;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    z-index: 0;
}

.tree-child {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 16px;
    position: relative;
}

.tree-child:after {
    content: "";
    display: block;
    width: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    border-left: 1px solid #ccc;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    z-index: 0;
}

.tree-node:last-child:before {
    background: white;
    height: auto;
    top: 0.75em;
    bottom: 0;
}

.custom-virtual-list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.virtual-scroll-container {
    border-radius: 4px;
    margin-left: 0px;
    position: relative;
    overflow: auto;
    padding: 0;
    margin-bottom: 0;
    box-sizing: border-box;
}

.virtual-scroll-container>div {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
}


.virtual-scroll-container::-webkit-scrollbar {
    width: 6px;
}

.virtual-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.virtual-scroll-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.virtual-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.virtual-item {
    /* border-bottom: 1px solid #eee; */
    background: white;
    margin: 0;
    padding: 0;
    position: relative;
    line-height: 1.1;
}

.virtual-item:hover {
    background: #f5f5f5;
}

.virtual-item.last-item {
    border-bottom: none;
}

.virtual-item>.finops-row>div>span:last-child {
    margin: 0 2px;
}


.tree-node {
    margin: 0;
    padding: 0 4px;
    line-height: 1.1em;
    position: relative;
    overflow: clip;
    list-style: none;
}

.tree-node-child {
    list-style: none;
    line-height: 1.1em;
    position: relative;
    margin: 0;
}

.tree-node-child:last-child:before {
    background: white;
    height: auto;
    top: 0.75em;
    bottom: 0;
}

.tree-parent {
    /* overflow: clip; */
}

.tree-node-child>.finops-row.level-1,
.tree-node>.finops-row.level-0,
.tree-child.striped>.tree-node-child>.virtual-scroll-container>div>.virtual-item>.finops-row.level-2,
.tree-child.striped>.tree-parent>.tree-node-child>.finops-row.level-2 {
    margin-right: 6px !important;
}

.tree-node-child>.finops-row.level-3,
.virtual-item>.finops-row.level-3 {
    margin-right: 0px !important;
}
/**
 * ===================================================================
 * PERSPECTIVE CHARTS - PROFESSIONAL THEME (ECHARTS-INSPIRED)
 * ===================================================================
 * Estilos profissionais para gráficos do Perspective.js
 * Inspirado no visual moderno e elegante do ECharts
 * 
 * Características:
 * - Gradientes suaves e modernos
 * - Sombras e profundidade
 * - Animações fluidas
 * - Paleta de cores profissional
 * - Tipografia otimizada
 * - Responsividade
 */

/* ===================================================================
   1. PALETA DE CORES PROFISSIONAL (ECHARTS-INSPIRED)
   =================================================================== */

:root {
  /* ===== CORES PRIMÁRIAS - PALETA PROFISSIONAL ===== */
  --chart-primary: #4A90E2;
  --chart-primary-light: #64B5F6;
  --chart-primary-dark: #1976D2;

  /* ===== PALETA DE CORES PARA SÉRIES DE DADOS (25 CORES DISTINTAS) ===== */
  /* Cores principais (1-9) - Usadas por padrão */
  --chart-color-1: #4A90E2;   /* Azul médio suave */
  --chart-color-2: #7CB342;   /* Verde oliva */
  --chart-color-3: #F4A460;   /* Âmbar suave */
  --chart-color-4: #9575CD;   /* Roxo médio */
  --chart-color-5: #4DB6AC;   /* Teal */
  --chart-color-6: #E57373;   /* Coral suave */
  --chart-color-7: #FFB74D;   /* Laranja suave */
  --chart-color-8: #64B5F6;   /* Azul claro */
  --chart-color-9: #81C784;   /* Verde claro */

  /* Cores estendidas (10-25) - Para gráficos com muitas séries */
  --chart-color-10: #BA68C8;  /* Violeta */
  --chart-color-11: #4DD0E1;  /* Ciano */
  --chart-color-12: #FF8A65;  /* Salmão */
  --chart-color-13: #A1887F;  /* Marrom suave */
  --chart-color-14: #90A4AE;  /* Cinza azulado */
  --chart-color-15: #AED581;  /* Lima suave */
  --chart-color-16: #CE93D8;  /* Lavanda */
  --chart-color-17: #80CBC4;  /* Turquesa */
  --chart-color-18: #FFAB91;  /* Pêssego */
  --chart-color-19: #C5E1A5;  /* Verde menta */
  --chart-color-20: #B39DDB;  /* Periwinkle */
  --chart-color-21: #80DEEA;  /* Aqua */
  --chart-color-22: #BCAAA4;  /* Taupe */
  --chart-color-23: #FFD54F;  /* Amarelo suave */
  --chart-color-24: #9FA8DA;  /* Azul acinzentado */
  --chart-color-25: #A5D6A7;  /* Verde menta claro */

  /* ===== CORES DE STATUS ===== */
  --chart-success: #7CB342;   /* Verde oliva */
  --chart-warning: #FFB74D;   /* Laranja suave */
  --chart-error: #E57373;     /* Coral suave */
  --chart-info: #4DD0E1;      /* Ciano */

  /* ===== CORES DE FUNDO E SUPERFÍCIE ===== */
  --chart-bg: #ffffff;
  --chart-bg-secondary: #fafafa;
  --chart-surface: #ffffff;

  /* ===== CORES DE TEXTO ===== */
  --chart-text-primary: #333333;
  --chart-text-secondary: #666666;
  --chart-text-muted: #999999;

  /* ===== CORES DE GRID E BORDAS ===== */
  --chart-grid: #e0e0e0;
  --chart-grid-light: #f0f0f0;
  --chart-border: #d0d0d0;

  /* ===== CORES DE DESTAQUE E INTERAÇÃO ===== */
  --chart-highlight: #E3F2FD;
  --chart-hover: #BBDEFB;

  /* ===== SOMBRAS ===== */
  --chart-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --chart-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --chart-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.16);

  /* ===== GRADIENTES SUAVES ===== */
  --chart-gradient-blue: linear-gradient(180deg, rgba(74, 144, 226, 0.75) 0%, rgba(74, 144, 226, 0.15) 100%);
  --chart-gradient-green: linear-gradient(180deg, rgba(124, 179, 66, 0.75) 0%, rgba(124, 179, 66, 0.15) 100%);
  --chart-gradient-amber: linear-gradient(180deg, rgba(244, 164, 96, 0.75) 0%, rgba(244, 164, 96, 0.15) 100%);
  --chart-gradient-purple: linear-gradient(180deg, rgba(149, 117, 205, 0.75) 0%, rgba(149, 117, 205, 0.15) 100%);
  --chart-gradient-teal: linear-gradient(180deg, rgba(77, 182, 172, 0.75) 0%, rgba(77, 182, 172, 0.15) 100%);
  --chart-gradient-coral: linear-gradient(180deg, rgba(229, 115, 115, 0.75) 0%, rgba(229, 115, 115, 0.15) 100%);

  /* ===== FONTES - PADRÃO DO SISTEMA (UBUNTU) ===== */
  --chart-font-family: 'Ubuntu', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif;
  --chart-font-family-mono: 'Ubuntu Mono', 'Roboto Mono', 'Consolas', 'Menlo', monospace;
  --chart-font-size-base: 12px;
  --chart-font-size-small: 11px;
  --chart-font-size-large: 14px;
  --chart-font-weight-normal: 400;
  --chart-font-weight-medium: 500;
  --chart-font-weight-bold: 600;
}

/* ===================================================================
   2. CONTAINER PRINCIPAL DOS CHARTS
   =================================================================== */

/* Container geral do Perspective com charts */
perspective-viewer[plugin*="Line"],
perspective-viewer[plugin*="Bar"],
perspective-viewer[plugin*="Area"],
perspective-viewer[plugin*="Scatter"],
perspective-viewer[plugin*="Heatmap"],
perspective-viewer[plugin*="Sunburst"],
perspective-viewer[plugin*="Treemap"] {
  background: #ffffff !important;
  background: var(--chart-bg) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
  box-shadow: var(--chart-shadow-md) !important;
  overflow: hidden !important;
  transition: box-shadow 0.3s ease !important;
}

perspective-viewer[plugin*="Line"]:hover,
perspective-viewer[plugin*="Bar"]:hover,
perspective-viewer[plugin*="Area"]:hover,
perspective-viewer[plugin*="Scatter"]:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16) !important;
  box-shadow: var(--chart-shadow-lg) !important;
}

/* ===================================================================
   3. ESTILOS PARA GRÁFICOS DE LINHA (Y LINE)
   =================================================================== */

/* Container do gráfico de linha */
perspective-viewer[plugin="Y Line"] .chart-container,
perspective-viewer[plugin="Y Line"] svg {
  background: #ffffff !important;
  background: var(--chart-bg) !important;
  border-radius: 8px !important;
}

/* Linhas do gráfico */
perspective-viewer[plugin="Y Line"] path.line,
perspective-viewer[plugin="Y Line"] .line-series {
  stroke-width: 3px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
  transition: stroke-width 0.2s ease, filter 0.2s ease !important;
}

perspective-viewer[plugin="Y Line"] path.line:hover,
perspective-viewer[plugin="Y Line"] .line-series:hover {
  stroke-width: 4px !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.15)) !important;
}

/* Pontos de dados */
perspective-viewer[plugin="Y Line"] circle.point,
perspective-viewer[plugin="Y Line"] .data-point {
  r: 4 !important;
  fill: #ffffff !important;
  fill: var(--chart-bg) !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) !important;
  transition: r 0.2s ease, filter 0.2s ease !important;
}

perspective-viewer[plugin="Y Line"] circle.point:hover,
perspective-viewer[plugin="Y Line"] .data-point:hover {
  r: 6 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

/* Área sob a linha (se houver) */
perspective-viewer[plugin="Y Line"] path.area,
perspective-viewer[plugin="Y Line"] .area-fill {
  fill-opacity: 0.15 !important;
  transition: fill-opacity 0.2s ease !important;
}

perspective-viewer[plugin="Y Line"] path.area:hover,
perspective-viewer[plugin="Y Line"] .area-fill:hover {
  fill-opacity: 0.25 !important;
}

/* ===================================================================
   4. ESTILOS PARA GRÁFICOS DE BARRA (Y BAR)
   =================================================================== */

/* Container do gráfico de barras */
perspective-viewer[plugin="Y Bar"] .chart-container,
perspective-viewer[plugin="Y Bar"] svg {
  background: #ffffff !important;
  background: var(--chart-bg) !important;
  border-radius: 8px !important;
}

/* Barras do gráfico */
perspective-viewer[plugin="Y Bar"] rect.bar,
perspective-viewer[plugin="Y Bar"] .bar-series {
  rx: 4 !important;
  ry: 4 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08)) !important;
  transition: filter 0.2s ease, opacity 0.2s ease !important;
}

perspective-viewer[plugin="Y Bar"] rect.bar:hover,
perspective-viewer[plugin="Y Bar"] .bar-series:hover {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12)) !important;
  opacity: 0.9 !important;
}

/* Gradientes para barras */
perspective-viewer[plugin="Y Bar"] rect.bar[fill*="#5470c6"],
perspective-viewer[plugin="Y Bar"] .bar-series[fill*="#5470c6"] {
  fill: url(#gradient-blue) !important;
}

perspective-viewer[plugin="Y Bar"] rect.bar[fill*="#91cc75"],
perspective-viewer[plugin="Y Bar"] .bar-series[fill*="#91cc75"] {
  fill: url(#gradient-green) !important;
}

/* ===================================================================
   5. ESTILOS PARA GRÁFICOS DE ÁREA
   =================================================================== */

perspective-viewer[plugin*="Area"] path.area {
  fill-opacity: 0.3 !important;
  transition: fill-opacity 0.2s ease !important;
}

perspective-viewer[plugin*="Area"] path.area:hover {
  fill-opacity: 0.5 !important;
}

perspective-viewer[plugin*="Area"] path.line {
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
}

/* ===================================================================
   6. ESTILOS PARA SCATTER PLOT
   =================================================================== */

perspective-viewer[plugin*="Scatter"] circle.point {
  r: 5 !important;
  fill-opacity: 0.7 !important;
  stroke-width: 1.5px !important;
  stroke: #ffffff !important;
  stroke: var(--chart-bg) !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1)) !important;
  transition: r 0.2s ease, fill-opacity 0.2s ease !important;
}

perspective-viewer[plugin*="Scatter"] circle.point:hover {
  r: 7 !important;
  fill-opacity: 1 !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)) !important;
}

/* ===================================================================
   7. ESTILOS PARA HEATMAP
   =================================================================== */

perspective-viewer[plugin="Heatmap"] rect.cell {
  stroke: #ffffff !important;
  stroke: var(--chart-bg) !important;
  stroke-width: 2px !important;
  rx: 2 !important;
  ry: 2 !important;
  transition: stroke-width 0.2s ease, filter 0.2s ease !important;
}

perspective-viewer[plugin="Heatmap"] rect.cell:hover {
  stroke-width: 3px !important;
  filter: brightness(1.1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important;
}

/* ===================================================================
   8. GRID E EIXOS
   =================================================================== */

/* Linhas de grid */
perspective-viewer .grid-line,
perspective-viewer line.grid {
  stroke: #f0f0f0 !important;
  stroke: var(--chart-grid-light) !important;
  stroke-width: 1px !important;
  stroke-dasharray: 4, 4 !important;
  opacity: 0.6 !important;
}

/* Eixos principais */
perspective-viewer .axis-line,
perspective-viewer path.domain {
  stroke: #e0e0e0 !important;
  stroke: var(--chart-grid) !important;
  stroke-width: 1.5px !important;
}

/* Labels dos eixos */
perspective-viewer .axis text,
perspective-viewer .tick text {
  font-family: 'Ubuntu', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif !important;
  font-family: var(--chart-font-family) !important;
  font-size: 12px !important;
  font-size: var(--chart-font-size-base) !important;
  font-weight: 500 !important;
  font-weight: var(--chart-font-weight-medium) !important;
  fill: #666666 !important;
  fill: var(--chart-text-secondary) !important;
}

/* Títulos dos eixos */
perspective-viewer .axis-title {
  font-family: 'Ubuntu', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif !important;
  font-family: var(--chart-font-family) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-weight: var(--chart-font-weight-bold) !important;
  fill: #333333 !important;
  fill: var(--chart-text-primary) !important;
}

/* ===================================================================
   9. TOOLTIP E LEGENDAS
   =================================================================== */

/* Tooltip */
perspective-viewer .tooltip,
perspective-viewer .chart-tooltip {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #d0d0d0 !important;
  border: 1px solid var(--chart-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
  box-shadow: var(--chart-shadow-md) !important;
  padding: 12px 16px !important;
  font-family: 'Ubuntu', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif !important;
  font-family: var(--chart-font-family) !important;
  font-size: 13px !important;
  color: #333333 !important;
  color: var(--chart-text-primary) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

/* Legenda */
perspective-viewer .legend {
  font-family: 'Ubuntu', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif !important;
  font-family: var(--chart-font-family) !important;
  font-size: 12px !important;
  font-size: var(--chart-font-size-base) !important;
  font-weight: 500 !important;
  font-weight: var(--chart-font-weight-medium) !important;
}

perspective-viewer .legend-item {
  padding: 6px 12px !important;
  border-radius: 6px !important;
  transition: background-color 0.2s ease !important;
}

perspective-viewer .legend-item:hover {
  background-color: #E3F2FD !important;
  background-color: var(--chart-highlight) !important;
}

perspective-viewer .legend-marker {
  border-radius: 50% !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* ===================================================================
   10. ANIMAÇÕES SUAVES (ECHARTS-STYLE)
   =================================================================== */

/* Animação de entrada para gráficos */
@keyframes chartFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

perspective-viewer[plugin*="Line"] svg,
perspective-viewer[plugin*="Bar"] svg,
perspective-viewer[plugin*="Area"] svg,
perspective-viewer[plugin*="Scatter"] svg {
  animation: chartFadeIn 0.4s ease-out !important;
}

/* Animação de crescimento para barras */
@keyframes barGrow {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

perspective-viewer[plugin="Y Bar"] rect.bar {
  animation: barGrow 0.5s ease-out !important;
}

/* Animação de desenho para linhas */
@keyframes lineDraw {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Pulse simples para indicadores */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Pulse suave para pontos de destaque */
@keyframes pointPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

perspective-viewer .highlight-point {
  animation: pointPulse 2s ease-in-out infinite !important;
}

/* ===================================================================
   11. ESTILOS PARA SUNBURST E TREEMAP
   =================================================================== */

/* Sunburst */
perspective-viewer[plugin="Sunburst"] path.arc {
  stroke: #ffffff !important;
  stroke: var(--chart-bg) !important;
  stroke-width: 2px !important;
  transition: opacity 0.2s ease, filter 0.2s ease !important;
}

perspective-viewer[plugin="Sunburst"] path.arc:hover {
  opacity: 0.9 !important;
  filter: brightness(1.1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)) !important;
}

/* Treemap */
perspective-viewer[plugin="Treemap"] rect.cell {
  stroke: #ffffff !important;
  stroke: var(--chart-bg) !important;
  stroke-width: 2px !important;
  rx: 4 !important;
  ry: 4 !important;
  transition: opacity 0.2s ease, filter 0.2s ease !important;
}

perspective-viewer[plugin="Treemap"] rect.cell:hover {
  opacity: 0.9 !important;
  filter: brightness(1.05) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.12)) !important;
}

perspective-viewer[plugin="Treemap"] text {
  font-family: 'Ubuntu', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif !important;
  font-family: var(--chart-font-family) !important;
  font-size: 12px !important;
  font-size: var(--chart-font-size-base) !important;
  font-weight: 600 !important;
  font-weight: var(--chart-font-weight-bold) !important;
  fill: #333333 !important;
  fill: var(--chart-text-primary) !important;
  pointer-events: none !important;
}

/* ===================================================================
   12. RESPONSIVIDADE E MOBILE
   =================================================================== */

@media (max-width: 768px) {
  perspective-viewer[plugin*="Line"] path.line,
  perspective-viewer[plugin*="Line"] .line-series {
    stroke-width: 2px !important;
  }

  perspective-viewer[plugin*="Line"] circle.point,
  perspective-viewer[plugin*="Line"] .data-point {
    r: 3 !important;
  }

  perspective-viewer .axis text,
  perspective-viewer .tick text {
    font-size: 10px !important;
  }

  perspective-viewer .tooltip,
  perspective-viewer .chart-tooltip {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
}

/* ===================================================================
   13. CORES ESPECÍFICAS PARA SÉRIES DE DADOS
   =================================================================== */

/* Série 1 - Azul */
perspective-viewer .series-0,
perspective-viewer [data-series="0"] {
  stroke: #4A90E2 !important;
  stroke: var(--chart-color-1) !important;
  fill: #4A90E2 !important;
  fill: var(--chart-color-1) !important;
}

/* Série 2 - Verde */
perspective-viewer .series-1,
perspective-viewer [data-series="1"] {
  stroke: #7CB342 !important;
  stroke: var(--chart-color-2) !important;
  fill: #7CB342 !important;
  fill: var(--chart-color-2) !important;
}

/* Série 3 - Amarelo */
perspective-viewer .series-2,
perspective-viewer [data-series="2"] {
  stroke: #F4A460 !important;
  stroke: var(--chart-color-3) !important;
  fill: #F4A460 !important;
  fill: var(--chart-color-3) !important;
}

/* Série 4 - Vermelho */
perspective-viewer .series-3,
perspective-viewer [data-series="3"] {
  stroke: #9575CD !important;
  stroke: var(--chart-color-4) !important;
  fill: #9575CD !important;
  fill: var(--chart-color-4) !important;
}

/* Série 5 - Azul claro */
perspective-viewer .series-4,
perspective-viewer [data-series="4"] {
  stroke: #4DB6AC !important;
  stroke: var(--chart-color-5) !important;
  fill: #4DB6AC !important;
  fill: var(--chart-color-5) !important;
}

/* Série 6 - Verde escuro */
perspective-viewer .series-5,
perspective-viewer [data-series="5"] {
  stroke: #E57373 !important;
  stroke: var(--chart-color-6) !important;
  fill: #E57373 !important;
  fill: var(--chart-color-6) !important;
}

/* Série 7 - Laranja */
perspective-viewer .series-6,
perspective-viewer [data-series="6"] {
  stroke: #FFB74D !important;
  stroke: var(--chart-color-7) !important;
  fill: #FFB74D !important;
  fill: var(--chart-color-7) !important;
}

/* Série 8 - Roxo */
perspective-viewer .series-7,
perspective-viewer [data-series="7"] {
  stroke: #64B5F6 !important;
  stroke: var(--chart-color-8) !important;
  fill: #64B5F6 !important;
  fill: var(--chart-color-8) !important;
}

/* Série 9 - Rosa */
perspective-viewer .series-8,
perspective-viewer [data-series="8"] {
  stroke: #81C784 !important;
  stroke: var(--chart-color-9) !important;
  fill: #81C784 !important;
  fill: var(--chart-color-9) !important;
}

/* ===================================================================
   14. DEFINIÇÕES DE GRADIENTES SVG
   =================================================================== */

/* Gradientes para uso em SVG */
perspective-viewer svg defs {
  display: block !important;
}

/* Gradiente azul */
perspective-viewer svg linearGradient#gradient-blue stop:first-child {
  stop-color: rgba(84, 112, 198, 0.8) !important;
  stop-opacity: 1 !important;
}

perspective-viewer svg linearGradient#gradient-blue stop:last-child {
  stop-color: rgba(84, 112, 198, 0.2) !important;
  stop-opacity: 1 !important;
}

/* Gradiente verde */
perspective-viewer svg linearGradient#gradient-green stop:first-child {
  stop-color: rgba(145, 204, 117, 0.8) !important;
  stop-opacity: 1 !important;
}

perspective-viewer svg linearGradient#gradient-green stop:last-child {
  stop-color: rgba(145, 204, 117, 0.2) !important;
  stop-opacity: 1 !important;
}

/* ===================================================================
   15. ESTADOS DE INTERAÇÃO
   =================================================================== */

/* Estado de foco */
perspective-viewer:focus-within {
  outline: 2px solid #4A90E2 !important;
  outline: 2px solid var(--chart-primary) !important;
  outline-offset: 2px !important;
}

/* Estado de seleção */
perspective-viewer .selected {
  filter: brightness(1.1) drop-shadow(0 4px 12px rgba(84, 112, 198, 0.3)) !important;
}

/* Estado desabilitado */
perspective-viewer[disabled] {
  opacity: 0.6 !important;
  pointer-events: none !important;
  filter: grayscale(0.5) !important;
}

/* ===================================================================
   16. MELHORIAS DE ACESSIBILIDADE
   =================================================================== */

/* Alto contraste para melhor legibilidade */
@media (prefers-contrast: high) {
  perspective-viewer .axis text,
  perspective-viewer .tick text {
    font-weight: 600 !important;
    fill: #000000 !important;
  }

  perspective-viewer .grid-line,
  perspective-viewer line.grid {
    stroke: #666666 !important;
    opacity: 1 !important;
  }
}

/* Redução de movimento para acessibilidade */
@media (prefers-reduced-motion: reduce) {
  perspective-viewer *,
  perspective-viewer *::before,
  perspective-viewer *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===================================================================
   17. FORÇAR TEMA CLARO (SEMPRE FUNDO BRANCO)
   =================================================================== */

/* Garantir que o tema escuro NUNCA seja aplicado */
@media (prefers-color-scheme: dark) {
  :root {
    /* Manter cores claras mesmo em modo escuro do sistema */
    --chart-bg: #ffffff !important;
    --chart-bg-secondary: #fafafa !important;
    --chart-surface: #ffffff !important;
    --chart-text-primary: #333333 !important;
    --chart-text-secondary: #666666 !important;
    --chart-text-muted: #999999 !important;
    --chart-grid: #e0e0e0 !important;
    --chart-grid-light: #f0f0f0 !important;
    --chart-border: #e0e0e0 !important;
    --chart-highlight: #f5f7fa !important;
    --chart-hover: #e3f2fd !important;
  }

  perspective-viewer {
    background: #ffffff !important;
    color: #333333 !important;
  }

  perspective-viewer .tooltip,
  perspective-viewer .chart-tooltip {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: #e0e0e0 !important;
    color: #333333 !important;
  }
}

/* ===================================================================
   18. CUSTOMIZAÇÕES ESPECÍFICAS PARA DATAGRID
   =================================================================== */

/* Melhorar visual da tabela quando em modo Datagrid */
perspective-viewer[plugin="Datagrid"] {
  --plugin--background: var(--chart-bg) !important;
  --row--background: var(--chart-bg) !important;
  --cell--background: var(--chart-bg) !important;
  --header--background: var(--chart-bg-secondary) !important;
}

/* Headers da tabela com visual profissional */
perspective-viewer[plugin="Datagrid"] table thead th {
  background: linear-gradient(180deg, #f8f9fa 0%, #f0f1f3 100%) !important;
  border-bottom: 2px solid #4A90E2 !important;
  border-bottom: 2px solid var(--chart-primary) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 11px !important;
  color: #333333 !important;
  color: var(--chart-text-primary) !important;
  padding: 12px 16px !important;
}

/* Células da tabela */
perspective-viewer[plugin="Datagrid"] table tbody td {
  padding: 10px 16px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  border-bottom: 1px solid var(--chart-grid-light) !important;
  transition: background-color 0.15s ease !important;
}

/* Hover nas linhas */
perspective-viewer[plugin="Datagrid"] table tbody tr:hover td {
  background-color: #E3F2FD !important;
  background-color: var(--chart-highlight) !important;
}

/* Células numéricas com destaque */
perspective-viewer[plugin="Datagrid"] table tbody td[data-type="float"],
perspective-viewer[plugin="Datagrid"] table tbody td[data-type="integer"] {
  font-family: 'Ubuntu Mono', 'Roboto Mono', 'Consolas', 'Menlo', monospace !important;
  font-family: var(--chart-font-family-mono) !important;
  font-weight: 500 !important;
  font-weight: var(--chart-font-weight-medium) !important;
  text-align: right !important;
  background: linear-gradient(90deg, transparent 0%, rgba(84, 112, 198, 0.03) 100%) !important;
}

/* Valores positivos em verde */
perspective-viewer[plugin="Datagrid"] table tbody td.positive,
perspective-viewer[plugin="Datagrid"] table tbody td[data-value^="+"] {
  color: #7CB342 !important;
  color: var(--chart-color-2) !important;
  font-weight: 600 !important;
}

/* Valores negativos em vermelho */
perspective-viewer[plugin="Datagrid"] table tbody td.negative,
perspective-viewer[plugin="Datagrid"] table tbody td[data-value^="-"] {
  color: #9575CD !important;
  color: var(--chart-color-4) !important;
  font-weight: 600 !important;
}

/* ===================================================================
   19. MELHORIAS PARA GRÁFICOS DE LINHA MÚLTIPLAS
   =================================================================== */

/* Linhas com diferentes espessuras para hierarquia visual */
perspective-viewer[plugin="Y Line"] .series-0 path.line {
  stroke-width: 3.5px !important;
}

perspective-viewer[plugin="Y Line"] .series-1 path.line {
  stroke-width: 3px !important;
}

perspective-viewer[plugin="Y Line"] .series-2 path.line {
  stroke-width: 2.5px !important;
}

/* Área de preenchimento com gradiente */
perspective-viewer[plugin="Y Line"] .series-0 path.area {
  fill: url(#gradient-blue) !important;
}

perspective-viewer[plugin="Y Line"] .series-1 path.area {
  fill: url(#gradient-green) !important;
}

perspective-viewer[plugin="Y Line"] .series-2 path.area {
  fill: url(#gradient-yellow) !important;
}

/* ===================================================================
   20. ESTILOS PARA GRÁFICOS EMPILHADOS (STACKED)
   =================================================================== */

/* Barras empilhadas com bordas suaves */
perspective-viewer[plugin="Y Bar"][stacked="true"] rect.bar {
  stroke: #ffffff !important;
  stroke: var(--chart-bg) !important;
  stroke-width: 1px !important;
}

/* Transição suave entre segmentos */
perspective-viewer[plugin="Y Bar"][stacked="true"] .bar-segment {
  transition: opacity 0.2s ease, filter 0.2s ease !important;
}

perspective-viewer[plugin="Y Bar"][stacked="true"] .bar-segment:hover {
  opacity: 0.85 !important;
  filter: brightness(1.1) !important;
}

/* ===================================================================
   21. INDICADORES VISUAIS E BADGES
   =================================================================== */

/* Badge de valor no topo das barras */
perspective-viewer .value-label {
  font-family: 'Ubuntu', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif !important;
  font-family: var(--chart-font-family) !important;
  font-size: 11px !important;
  font-size: var(--chart-font-size-small) !important;
  font-weight: 600 !important;
  font-weight: var(--chart-font-weight-bold) !important;
  fill: #666666 !important;
  fill: var(--chart-text-secondary) !important;
  text-anchor: middle !important;
}

/* Linha de referência (threshold) */
perspective-viewer .reference-line {
  stroke: #9575CD !important;
  stroke: var(--chart-color-4) !important;
  stroke-width: 2px !important;
  stroke-dasharray: 8, 4 !important;
  opacity: 0.7 !important;
}

/* Label da linha de referência */
perspective-viewer .reference-label {
  font-family: 'Ubuntu', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif !important;
  font-family: var(--chart-font-family) !important;
  font-size: 11px !important;
  font-size: var(--chart-font-size-small) !important;
  font-weight: 600 !important;
  font-weight: var(--chart-font-weight-bold) !important;
  fill: #9575CD !important;
  fill: var(--chart-color-4) !important;
  background: #ffffff !important;
  background: var(--chart-bg) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

/* ===================================================================
   22. ZOOM E PAN - CONTROLES INTERATIVOS
   =================================================================== */

/* Área de seleção para zoom */
perspective-viewer .zoom-selection {
  fill: rgba(84, 112, 198, 0.15) !important;
  stroke: #4A90E2 !important;
  stroke: var(--chart-primary) !important;
  stroke-width: 1.5px !important;
  stroke-dasharray: 4, 2 !important;
}

/* Botões de zoom */
perspective-viewer .zoom-controls {
  background: #ffffff !important;
  background: var(--chart-bg) !important;
  border: 1px solid #d0d0d0 !important;
  border: 1px solid var(--chart-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  box-shadow: var(--chart-shadow-sm) !important;
  padding: 4px !important;
}

perspective-viewer .zoom-button {
  background: transparent !important;
  border: none !important;
  color: #666666 !important;
  color: var(--chart-text-secondary) !important;
  cursor: pointer !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

perspective-viewer .zoom-button:hover {
  background: #E3F2FD !important;
  background: var(--chart-highlight) !important;
  color: #4A90E2 !important;
  color: var(--chart-primary) !important;
}

/* ===================================================================
   23. PERFORMANCE E OTIMIZAÇÕES
   =================================================================== */

/* Usar will-change para elementos animados */
perspective-viewer path.line,
perspective-viewer rect.bar,
perspective-viewer circle.point {
  will-change: transform, opacity !important;
}

/* Otimizar renderização de SVG */
perspective-viewer svg {
  shape-rendering: geometricPrecision !important;
  text-rendering: optimizeLegibility !important;
}

/* Usar GPU para transformações */
perspective-viewer .animated-element {
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

/* ===================================================================
   24. GARANTIR FUNDO BRANCO EM ELEMENTOS BASE (sem sobrescrever gradientes)
   =================================================================== */

/* Fundo branco apenas no container principal */
perspective-viewer {
  background-color: #ffffff !important;
  background-color: var(--chart-bg) !important;
}

/* Exceções para elementos que precisam de fundo transparente */
perspective-viewer svg,
perspective-viewer svg *,
perspective-viewer path,
perspective-viewer circle,
perspective-viewer rect.bar,
perspective-viewer line {
  background-color: transparent !important;
}

/* Garantir que tabelas tenham fundo branco (container apenas) */
perspective-viewer[plugin="Datagrid"] table {
  background-color: #ffffff !important;
}

/* NOTA: Removido !important de td/tr para permitir gradientes do plugin_config */

/* Headers com gradiente claro */
perspective-viewer[plugin="Datagrid"] thead,
perspective-viewer[plugin="Datagrid"] th {
  background: linear-gradient(180deg, #f8f9fa 0%, #f0f1f3 100%) !important;
}

/* Tooltip sempre com fundo branco */
perspective-viewer .tooltip,
perspective-viewer .chart-tooltip,
perspective-viewer [role="tooltip"] {
  background: rgba(255, 255, 255, 0.98) !important;
  color: #333333 !important;
  border: 1px solid #e0e0e0 !important;
}

/* Legendas com fundo branco */
perspective-viewer .legend,
perspective-viewer .chart-legend {
  background: #ffffff !important;
  color: #333333 !important;
}

/* Painéis e controles com fundo branco */
perspective-viewer .controls,
perspective-viewer .panel,
perspective-viewer .zoom-controls {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
}

/* ===================================================================
   25. NOTAS FINAIS E DOCUMENTAÇÃO
   =================================================================== */

/*
 * GUIA DE USO:
 *
 * Este arquivo CSS fornece estilos profissionais para todos os plugins
 * de visualização do Perspective.js, inspirados no visual do ECharts.
 *
 * IMPORTANTE: SEMPRE FUNDO BRANCO
 * - O sistema usa APENAS tema claro
 * - Fundo branco em todos os elementos
 * - Mesmo em modo escuro do sistema, mantém fundo branco
 *
 * PLUGINS SUPORTADOS:
 * - Datagrid: Tabela de dados com visual moderno
 * - Y Line: Gráficos de linha com gradientes e sombras
 * - Y Bar: Gráficos de barra com cantos arredondados
 * - Y Area: Gráficos de área com preenchimento gradiente
 * - X/Y Scatter: Gráficos de dispersão com pontos destacados
 * - Heatmap: Mapas de calor com células arredondadas
 * - Sunburst: Gráficos radiais hierárquicos
 * - Treemap: Mapas de árvore com células arredondadas
 *
 * CARACTERÍSTICAS:
 * - Paleta de cores profissional (9 cores)
 * - Gradientes suaves
 * - Sombras e profundidade
 * - Animações fluidas
 * - Responsividade
 * - Acessibilidade (alto contraste, redução de movimento)
 * - SEMPRE fundo branco (sem tema escuro)
 *
 * CUSTOMIZAÇÃO:
 * Para customizar as cores, edite as variáveis CSS em :root
 * Para desabilitar animações, use prefers-reduced-motion
 * NUNCA alterar para tema escuro - sistema é sempre claro
 */


/**
 * ===================================================================
 * PERSPECTIVE COLUMN MONITOR - SISTEMA DE MONITORAMENTO CSS
 * ===================================================================
 * Sistema avan?ado de monitoramento e substitui??o de labels de colunas
 * usando CSS din?mico e observadores de muta??o DOM
 * 
 * Funcionalidades:
 * - Monitoramento autom?tico de mudan?as no DOM
 * - Substitui??o din?mica de labels t?cnicos por nomes amig?veis
 * - Suporte a m?ltiplas estruturas do Perspective (shadow DOM, light DOM)
 * - Fallbacks robustos para diferentes vers?es do Perspective
 * - Performance otimizada com debouncing
 */

/* ===================================================================
   1. VARI?VEIS CSS PARA LABELS AMIG?VEIS
   =================================================================== */

:root {
  /* Labels Financeiros */
  --label-Vbr: "Valor Bruto";
  --label-Cst: "Custo";
  --label-Mrg: "Margem";
  --label-Tax: "Taxa";
  --label-Bdg: "Or?amento";
  --label-Csq: "Quantidade";
  --label-Pct: "Porcento";

  /* Labels de Identifica??o */
  --label-Srv: "Servi?o";
  --label-Prv: "Provedor";
  --label-Cat: "Categoria";
  --label-Sub: "SubCategoria";
  --label-Rec: "Recurso";
  --label-Rci: "Id do Recurso";
  --label-Acc: "Assinatura";
  --label-Acn: "Nome Assinatura";
  --label-Rgn: "Região";

  /* Labels Organizacionais */
  --label-Cdc: "Centro de Custo";
  --label-Ctr: "Contrato";
  --label-Rsg: "Grupo do Recurso";
  --label-Ccr: "Regra CdeC";
  --label-Ccrd: "Regra CdeC Nome";

  /* Labels de Metadados */
  --label-Tag: "Tags";
  --label-Met: "Métrica";
  --label-Uni: "Unidade";

  /* Labels Temporais */
  --label-Dat: "Data";
  --label-Ano: "Ano";
  --label-Mes: "M�s";
  --label-Dia: "Dia";

  /* Labels de Controle */
  --label-Smg: "Margem (Flag)";
  --label-Spt: "Suporte (Flag)";

  /* Configura??es de estilo para labels amig?veis */
  --friendly-label-font-weight: 600;
  --friendly-label-color: #212121;
  --friendly-label-font-size: 14px;
  --friendly-label-padding: 12px 8px;
  --friendly-label-background: #f5f5f5;
  --friendly-label-border: 1px solid #e0e0e0;
}

/* ===================================================================
   2. SISTEMA DE SUBSTITUI??O AUTOM?TICA DE LABELS
   =================================================================== */

/* Classe base para headers com labels amig?veis */
.perspective-friendly-header {
  position: relative !important;
  overflow: hidden !important;
  text-indent: -9999px !important; /* Esconde texto original */
}

.perspective-friendly-header::after {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: #f5f5f5 !important;
  background: var(--friendly-label-background) !important;
  border: 1px solid #e0e0e0 !important;
  border: var(--friendly-label-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-weight: var(--friendly-label-font-weight) !important;
  color: #212121 !important;
  color: var(--friendly-label-color) !important;
  font-size: 14px !important;
  font-size: var(--friendly-label-font-size) !important;
  padding: 12px 8px !important;
  padding: var(--friendly-label-padding) !important;
  text-indent: 0 !important; /* Reset text-indent para o pseudo-element */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Regras adicionais para garantir funcionamento */
perspective-viewer .perspective-friendly-header,
perspective-viewer table .perspective-friendly-header,
perspective-viewer th.perspective-friendly-header,
perspective-viewer td.perspective-friendly-header,
[data-perspective-container] .perspective-friendly-header {
  position: relative !important;
  color: transparent !important;
  text-shadow: none !important;
}

perspective-viewer .perspective-friendly-header::after,
perspective-viewer table .perspective-friendly-header::after,
perspective-viewer th.perspective-friendly-header::after,
perspective-viewer td.perspective-friendly-header::after,
[data-perspective-container] .perspective-friendly-header::after {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: #f5f5f5 !important;
  background: var(--friendly-label-background) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-weight: var(--friendly-label-font-weight) !important;
  color: #212121 !important;
  color: var(--friendly-label-color) !important;
  font-size: 14px !important;
  font-size: var(--friendly-label-font-size) !important;
  padding: 12px 8px !important;
  padding: var(--friendly-label-padding) !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  z-index: 1 !important;
}

/* Fallback para elementos que j? t?m o texto substitu?do */
.friendly-label-applied {
  font-weight: 600 !important;
  font-weight: var(--friendly-label-font-weight) !important;
  color: #212121 !important;
  color: var(--friendly-label-color) !important;
  background: #f5f5f5 !important;
  background: var(--friendly-label-background) !important;
  text-align: center !important;
}

/* ===================================================================
   PAINEL DE SELEÇÃO - COLUNAS DISPONÍVEIS
   =================================================================== */

/* Elementos do painel de seleção com labels amigáveis */
.perspective-friendly-selection {
  font-weight: 500 !important;
  color: #1976d2 !important;
  background: rgba(25, 118, 210, 0.05) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  transition: all 0.2s ease !important;
}

.perspective-friendly-selection:hover {
  background: rgba(25, 118, 210, 0.1) !important;
  color: #1565c0 !important;
}

/* Elementos específicos do painel de configuração */
perspective-viewer .config-panel .friendly-label-applied,
perspective-viewer .perspective-config-panel .friendly-label-applied,
perspective-viewer .column-list .friendly-label-applied,
perspective-viewer .column-selector .friendly-label-applied {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #333 !important;
  background: transparent !important;
  padding: 4px 8px !important;
  border-radius: 3px !important;
}

/* Elementos de drag and drop */
perspective-viewer .draggable-column.friendly-label-applied,
perspective-viewer .column-item.friendly-label-applied,
perspective-viewer .perspective-column-item.friendly-label-applied {
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%) !important;
  border: 1px solid #bbdefb !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  margin: 2px !important;
  font-weight: 500 !important;
  color: #1976d2 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.draggable-column.friendly-label-applied:hover,
.column-item.friendly-label-applied:hover,
.perspective-column-item.friendly-label-applied:hover {
  background: linear-gradient(135deg, #bbdefb 0%, #e1bee7 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}

/* Select options */
select option.friendly-label-applied {
  font-weight: 500 !important;
  color: #1976d2 !important;
  background: #f8f9fa !important;
}

/* Dropdown items */
.dropdown-item.friendly-label-applied,
.select-option.friendly-label-applied {
  font-weight: 500 !important;
  color: #1976d2 !important;
  background: rgba(25, 118, 210, 0.05) !important;
  border-left: 3px solid #1976d2 !important;
  padding-left: 12px !important;
}

/* Elementos com nomes de campos */
.column-name.friendly-label-applied,
.field-name.friendly-label-applied,
.perspective-field.friendly-label-applied {
  font-weight: 600 !important;
  color: #1976d2 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(25, 118, 210, 0.3) !important;
  text-underline-offset: 2px !important;
}

/* ===================================================================
   3. LABELS ESPEC?FICOS USANDO ATRIBUTOS DATA
   =================================================================== */

/* Headers com atributo data-column */
perspective-viewer [data-column="Vbr"].perspective-friendly-header::after { content: "Valor Bruto" !important; content: var(--label-Vbr) !important; }
perspective-viewer [data-column="Cst"].perspective-friendly-header::after { content: "Custo" !important; content: var(--label-Cst) !important; }
perspective-viewer [data-column="Mrg"].perspective-friendly-header::after { content: "Margem" !important; content: var(--label-Mrg) !important; }
perspective-viewer [data-column="Tax"].perspective-friendly-header::after { content: "Taxa" !important; content: var(--label-Tax) !important; }
perspective-viewer [data-column="Bdg"].perspective-friendly-header::after { content: "Or?amento" !important; content: var(--label-Bdg) !important; }
perspective-viewer [data-column="Csq"].perspective-friendly-header::after { content: "Quantidade" !important; content: var(--label-Csq) !important; }
perspective-viewer [data-column="Pct"].perspective-friendly-header::after { content: "Porcento" !important; content: var(--label-Pct) !important; }

perspective-viewer [data-column="Srv"].perspective-friendly-header::after { content: "Servi?o" !important; content: var(--label-Srv) !important; }
perspective-viewer [data-column="Prv"].perspective-friendly-header::after { content: "Provedor" !important; content: var(--label-Prv) !important; }
perspective-viewer [data-column="Cat"].perspective-friendly-header::after { content: "Categoria" !important; content: var(--label-Cat) !important; }
perspective-viewer [data-column="Sub"].perspective-friendly-header::after { content: "SubCategoria" !important; content: var(--label-Sub) !important; }
perspective-viewer [data-column="Rec"].perspective-friendly-header::after { content: "Recurso" !important; content: var(--label-Rec) !important; }
perspective-viewer [data-column="Rci"].perspective-friendly-header::after { content: "Id do Recurso" !important; content: var(--label-Rci) !important; }
perspective-viewer [data-column="Acc"].perspective-friendly-header::after { content: "Assinatura" !important; content: var(--label-Acc) !important; }
perspective-viewer [data-column="Acn"].perspective-friendly-header::after { content: "Nome Assinatura" !important; content: var(--label-Acn) !important; }
perspective-viewer [data-column="Rgn"].perspective-friendly-header::after { content: "Região" !important; content: var(--label-Rgn) !important; }

perspective-viewer [data-column="Cdc"].perspective-friendly-header::after { content: "Centro de Custo" !important; content: var(--label-Cdc) !important; }
perspective-viewer [data-column="Ctr"].perspective-friendly-header::after { content: "Contrato" !important; content: var(--label-Ctr) !important; }
perspective-viewer [data-column="Rsg"].perspective-friendly-header::after { content: "Grupo do Recurso" !important; content: var(--label-Rsg) !important; }
perspective-viewer [data-column="Ccr"].perspective-friendly-header::after { content: "Regra CdeC" !important; content: var(--label-Ccr) !important; }
perspective-viewer [data-column="Ccrd"].perspective-friendly-header::after { content: "Regra CdeC Nome" !important; content: var(--label-Ccrd) !important; }

perspective-viewer [data-column="Tag"].perspective-friendly-header::after { content: "Tags" !important; content: var(--label-Tag) !important; }
perspective-viewer [data-column="Met"].perspective-friendly-header::after { content: "Métrica" !important; content: var(--label-Met) !important; }
perspective-viewer [data-column="Uni"].perspective-friendly-header::after { content: "Unidade" !important; content: var(--label-Uni) !important; }

perspective-viewer [data-column="Dat"].perspective-friendly-header::after { content: "Data" !important; content: var(--label-Dat) !important; }
perspective-viewer [data-column="Ano"].perspective-friendly-header::after { content: "Ano" !important; content: var(--label-Ano) !important; }
perspective-viewer [data-column="Mes"].perspective-friendly-header::after { content: "M�s" !important; content: var(--label-Mes) !important; }
perspective-viewer [data-column="Dia"].perspective-friendly-header::after { content: "Dia" !important; content: var(--label-Dia) !important; }

perspective-viewer [data-column="Smg"].perspective-friendly-header::after { content: "Margem (Flag)" !important; content: var(--label-Smg) !important; }
perspective-viewer [data-column="Spt"].perspective-friendly-header::after { content: "Suporte (Flag)" !important; content: var(--label-Spt) !important; }

/* ===================================================================
   4. FALLBACK PARA HEADERS SEM ATRIBUTOS DATA
   =================================================================== */

/* Headers baseados em conte?do de texto */
perspective-viewer th.perspective-friendly-header[data-friendly-label]::after {
  content: attr(data-friendly-label) !important;
}

/* ===================================================================
   5. SUPORTE A DIFERENTES ESTRUTURAS DO PERSPECTIVE
   =================================================================== */

/* Para tabelas em shadow DOM */
perspective-viewer::part(table) th.perspective-friendly-header::after,
perspective-viewer::part(header) .perspective-friendly-header::after {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: #f5f5f5 !important;
  background: var(--friendly-label-background) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-weight: var(--friendly-label-font-weight) !important;
  color: #212121 !important;
  color: var(--friendly-label-color) !important;
  font-size: 14px !important;
  font-size: var(--friendly-label-font-size) !important;
  padding: 12px 8px !important;
  padding: var(--friendly-label-padding) !important;
}

/* Para elementos de configura??o (dropdowns, selectors) */
perspective-viewer .column-selector .perspective-friendly-header::after,
perspective-viewer .config-panel .perspective-friendly-header::after {
  position: static !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
}

/* ===================================================================
   6. ANIMA??ES E TRANSI??ES
   =================================================================== */

.perspective-friendly-header::after {
  transition: all 0.2s ease-in-out !important;
}

.perspective-friendly-header:hover::after {
  background: #e3f2fd !important;
  color: #1976d2 !important;
}

/* ===================================================================
   7. RESPONSIVIDADE
   =================================================================== */

@media (max-width: 768px) {
  :root {
    --friendly-label-font-size: 12px;
    --friendly-label-padding: 8px 4px;
  }
  
  .perspective-friendly-header::after {
    font-size: 14px !important;
    font-size: var(--friendly-label-font-size) !important;
    padding: 12px 8px !important;
    padding: var(--friendly-label-padding) !important;
  }
}

/* ===================================================================
   8. CLASSES UTILIT?RIAS PARA CONTROLE MANUAL
   =================================================================== */

/* Classe para for?ar exibi??o do label original */
.perspective-show-original {
  text-indent: 0 !important;
}

.perspective-show-original::after {
  display: none !important;
}

/* Classe para labels customizados */
.perspective-custom-label[data-custom-label]::after {
  content: attr(data-custom-label) !important;
}

/* ===================================================================
   9. DEBUG E DESENVOLVIMENTO
   =================================================================== */

/* Classe para destacar headers monitorados (apenas para debug) */
.perspective-debug .perspective-friendly-header {
  outline: 2px dashed #ff9800 !important;
  outline-offset: -2px !important;
}

.perspective-debug .perspective-friendly-header::after {
  background: rgba(255, 152, 0, 0.1) !important;
}

/**
 * ===================================================================
 * PERSPECTIVE.JS CUSTOM THEME - FINOPS DASHBOARD
 * ===================================================================
 * Professional blue/white theme using official Perspective CSS variables
 * Based on FINOS Perspective documentation and theme system
 */

/* ===================================================================
   0. HABILITAR SELE��O/C�PIA DE TEXTO NAS C�LULAS
   =================================================================== */
perspective-viewer,
perspective-viewer table,
perspective-viewer thead,
perspective-viewer tbody,
perspective-viewer tr,
perspective-viewer th,
perspective-viewer td {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* ===================================================================
   1. PERSPECTIVE OFFICIAL CSS VARIABLES OVERRIDE
   =================================================================== */

perspective-viewer {
  /* ===== CONFIGURA??O DE FONTE PERSONALIZADA (UBUNTU - PADRÃO DO SISTEMA) ===== */
  font-family: 'Ubuntu', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;

  /* Vari?veis de fonte para elementos internos */
  --theme--font-family: 'Ubuntu', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif !important;
  --theme--font-size: 12px !important;
  --theme--font-weight: 400 !important;
  --theme--line-height: 1.5 !important;

  /* Core theme colors - Paleta profissional elegante */
  --theme--color--accent: #4A90E2 !important;
  --theme--color--positive: #7CB342 !important;
  --theme--color--negative: #E57373 !important;
  --theme--color--warning: #FFB74D !important;

  /* Background and surface colors */
  --theme--color--surface: #ffffff !important;
  --theme--color--background: #fafafa !important;

  /* Text colors */
  --theme--color--on-surface: #333333 !important;
  --theme--color--on-background: #666666 !important;

  /* Border colors */
  --theme--color--border: #e0e0e0 !important;
  --theme--color--column-border: #e0e0e0 !important;

  /* Selection and interaction colors */
  --theme--color--selected: #E3F2FD !important;
  --theme--color--selected-border: #4A90E2 !important;

  /* Status bar and inactive elements */
  --inactive--border-color: #e0e0e0 !important;
  --active--border-color: #4A90E2 !important;

  /* Plugin-specific overrides */
  --plugin--background: #ffffff !important;
  --plugin--border: #e0e0e0 !important;

  /* Sombras e profundidade */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  transition: box-shadow 0.3s ease !important;
}

/* Hover no viewer para dar feedback visual */
perspective-viewer:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* ===================================================================
   2. DATA TABLE STYLING (Light DOM - can be styled directly)
   =================================================================== */

/* Table headers - these are in light DOM and can be styled */
perspective-viewer table thead th {
  background-color: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  color: #212121 !important;
  font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  padding: 12px 8px !important;
  text-align: left !important;
}

/* Table cells */
perspective-viewer table tbody td {
  border: 1px solid #f0f0f0 !important;
  color: #212121 !important;
  font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  padding: 8px !important;
}

/* Alternating row colors */
perspective-viewer table tbody tr:nth-child(even) {
  background-color: #fafafa !important;
}

perspective-viewer table tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
}

/* Row hover effect */
perspective-viewer table tbody tr:hover {
  background-color: #e3f2fd !important;
}

/* Numeric columns alignment */
perspective-viewer table td[data-type="float"],
perspective-viewer table td[data-type="integer"] {
  text-align: right !important;
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-weight: 500 !important;
}

/* Positive/negative value styling */
perspective-viewer table td.positive {
  color: #4caf50 !important;
}

perspective-viewer table td.negative {
  color: #f44336 !important;
}

/* ===================================================================
   3. CONTAINER AND LAYOUT STYLING
   =================================================================== */

/* Main perspective viewer container */
perspective-viewer {
  font-family: 'Inter', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  background-color: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Force remove any red styling that might appear */
perspective-viewer *[style*="background-color: red"],
perspective-viewer *[style*="background-color: #ff0000"],
perspective-viewer *[style*="background: red"] {
  background-color: #f8f9fa !important;
  background: #f8f9fa !important;
}

/* Override any red classes */
perspective-viewer [class*="red"]:not([class*="error-message"]) {
  background-color: #f8f9fa !important;
  color: #424242 !important;
}

/* ===================================================================
   4. RESPONSIVE AND MOBILE ADJUSTMENTS
   =================================================================== */

/* Mobile adjustments */
@media (max-width: 768px) {
  perspective-viewer {
    font-size: 12px !important;
  }

  perspective-viewer table th,
  perspective-viewer table td {
    padding: 6px 4px !important;
    font-size: 12px !important;
  }
}

/* ===================================================================
   5. LABELS AMIG?VEIS PARA HEADERS DE COLUNAS
   =================================================================== */

/* M?todo 1: CSS Content Replacement para Headers Espec?ficos */
/* Baseado na documenta??o do Perspective sobre styling de tabelas */

/* Estilo geral para headers com labels customizados */
perspective-viewer table thead th[data-column] {
  position: relative;
  overflow: hidden;
}

/* Estilo para labels amig?veis aplicados via JavaScript */
perspective-viewer table thead th .friendly-label {
  font-weight: 600;
  color: #212121;
  font-size: 14px;
  text-align: center;
  display: block;
  padding: 4px 8px;
}

/* Fallback: Labels amig?veis usando CSS ::after pseudo-element */
perspective-viewer table thead th[data-column="Vbr"]::after {
  content: "Valor Bruto";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #212121;
  padding: 12px 8px;
}

perspective-viewer table thead th[data-column="Vbr"]:not(:has(.friendly-label)) {
  color: transparent;
  /* Hide original text only if no friendly label span */
}

perspective-viewer table thead th[data-column="Cst"]::after {
  content: "Custo";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #212121;
  padding: 12px 8px;
}

perspective-viewer table thead th[data-column="Cst"] {
  color: transparent;
}

perspective-viewer table thead th[data-column="Mrg"]::after {
  content: "Margem";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #212121;
  padding: 12px 8px;
}

perspective-viewer table thead th[data-column="Mrg"] {
  color: transparent;
}

perspective-viewer table thead th[data-column="Csq"]::after {
  content: "Quantidade";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #212121;
  padding: 12px 8px;
}

perspective-viewer table thead th[data-column="Csq"] {
  color: transparent;
}

perspective-viewer table thead th[data-column="Srv"]::after {
  content: "Servi?o";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #212121;
  padding: 12px 8px;
}

perspective-viewer table thead th[data-column="Srv"] {
  color: transparent;
}

perspective-viewer table thead th[data-column="Prv"]::after {
  content: "Provedor";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #212121;
  padding: 12px 8px;
}

perspective-viewer table thead th[data-column="Prv"] {
  color: transparent;
}

perspective-viewer table thead th[data-column="Cat"]::after {
  content: "Categoria";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #212121;
  padding: 12px 8px;
}

perspective-viewer table thead th[data-column="Cat"] {
  color: transparent;
}

/* CSS para outros campos importantes */
perspective-viewer table thead th[data-column="Ano"]::after {
  content: "Ano";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #212121;
  padding: 12px 8px;
}

perspective-viewer table thead th[data-column="Mes"]::after {
  content: "M?s";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #212121;
  padding: 12px 8px;
}

/* M?todo 2: Fallback usando text-indent para esconder texto original */
perspective-viewer table thead th[title="Vbr"],
perspective-viewer table thead th[title="Cst"],
perspective-viewer table thead th[title="Mrg"],
perspective-viewer table thead th[title="Csq"],
perspective-viewer table thead th[title="Srv"],
perspective-viewer table thead th[title="Prv"],
perspective-viewer table thead th[title="Cat"],
perspective-viewer table thead th[title="Ano"],
perspective-viewer table thead th[title="Mes"] {
  text-indent: -9999px;
  overflow: hidden;
}

/* ===================================================================
   6. TOOLBAR CUSTOMIZATION - HIDE MENU BAR AND TOOLBAR COMPLETELY
   =================================================================== */

/* Hide toolbar buttons using CSS variables and selectors */
perspective-viewer {
  /* Try to hide specific toolbar elements */
  --toolbar-button-filter-display: none !important;
  --toolbar-button-settings-display: none !important;
  --toolbar-button-lock-display: none !important;

  /* Hide the entire menu bar/toolbar */
  --menu-bar-display: none !important;
  --toolbar-display: none !important;
  --settings-panel-display: none !important;

  /* Força o botão "Configurar" do Perspective (pseudo-elemento ::before/::after)
     a não ter conteúdo nem ser clicável, independente da localização carregada. */
  --config-button-icon--content: "" !important;
  --config-button--content: "" !important;
  --settings-button--content: "" !important;
  --config-button-display: none !important;
  --settings-button-display: none !important;
  --toolbar-settings-display: none !important;
}

/* Attempt to hide toolbar buttons through shadow DOM penetration */
perspective-viewer::part(toolbar) {
  /* Hide specific buttons if parts are exposed */
}

/* Hide toolbar buttons using more specific selectors */
perspective-viewer [data-testid*="filter"],
perspective-viewer [data-testid*="settings"],
perspective-viewer [data-testid*="config"],
perspective-viewer [data-testid*="lock"],
perspective-viewer [title*="Filter"],
perspective-viewer [title*="Settings"],
perspective-viewer [title*="Config"],
perspective-viewer [title*="configurar" i],
perspective-viewer [title*="configuração" i],
perspective-viewer [title*="configuracao" i],
perspective-viewer [title*="Lock"],
perspective-viewer [aria-label*="Filter"],
perspective-viewer [aria-label*="Settings"],
perspective-viewer [aria-label*="Config"],
perspective-viewer [aria-label*="configurar" i],
perspective-viewer [aria-label*="configuração" i],
perspective-viewer [aria-label*="configuracao" i],
perspective-viewer [aria-label*="Lock"],
perspective-viewer #config_button,
perspective-viewer #settings_button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide buttons by icon content or class names */
perspective-viewer button[class*="filter"],
perspective-viewer button[class*="settings"],
perspective-viewer button[class*="lock"],
perspective-viewer .toolbar-button[class*="filter"],
perspective-viewer .toolbar-button[class*="settings"],
perspective-viewer .toolbar-button[class*="lock"] {
  display: none !important;
  visibility: hidden !important;
}

/* Hide specific SVG icons in toolbar */
perspective-viewer svg[class*="filter"],
perspective-viewer svg[class*="settings"],
perspective-viewer svg[class*="lock"] {
  display: none !important;
}

/* Alternative approach: hide by position if buttons are in specific order */
perspective-viewer .toolbar>*:nth-child(1),
perspective-viewer .toolbar>*:nth-child(2),
perspective-viewer .toolbar>*:nth-child(3) {
  display: none !important;
}

/* Hide status bar buttons */
perspective-viewer #status_bar button:nth-child(1),
perspective-viewer #status_bar button:nth-child(2),
perspective-viewer #status_bar button:nth-child(3) {
  display: none !important;
}

/* Specific class-based hiding for toolbar icons */
perspective-viewer.hide-toolbar-icons {
  /* Use CSS variables to hide toolbar elements */
  --toolbar-opacity: 0;
  --toolbar-visibility: hidden;
  --toolbar-pointer-events: none;
}

/* More aggressive hiding for the specific class */
perspective-viewer.hide-toolbar-icons button,
perspective-viewer.hide-toolbar-icons .toolbar-button,
perspective-viewer.hide-toolbar-icons [role="button"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Hide by common icon patterns */
perspective-viewer.hide-toolbar-icons [class*="icon"],
perspective-viewer.hide-toolbar-icons svg,
perspective-viewer.hide-toolbar-icons i {
  display: none !important;
}

/* ===================================================================
   COMPREHENSIVE MENU BAR HIDING - MULTIPLE APPROACHES
   =================================================================== */

/* Hide the entire menu bar/toolbar using multiple selectors */
perspective-viewer #menu-bar,
perspective-viewer .menu-bar,
perspective-viewer [id*="menu"],
perspective-viewer [class*="menu"],
perspective-viewer [id*="toolbar"],
perspective-viewer [class*="toolbar"],
perspective-viewer .perspective-toolbar,
perspective-viewer .perspective-menu,
perspective-viewer .perspective-settings,
perspective-viewer .perspective-config-panel {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Hide settings panel and configuration UI - PADR?O (pode ser sobrescrito) */
perspective-viewer:not(.settings-always-open) [data-testid*="settings"],
perspective-viewer:not(.settings-always-open) [data-testid*="config"],
perspective-viewer:not(.settings-always-open) [data-testid*="menu"],
perspective-viewer:not(.settings-always-open) [aria-label*="Settings"],
perspective-viewer:not(.settings-always-open) [aria-label*="Menu"],
perspective-viewer:not(.settings-always-open) [aria-label*="Configuration"],
perspective-viewer:not(.settings-always-open) [aria-label*="configurar" i],
perspective-viewer:not(.settings-always-open) [aria-label*="configuração" i],
perspective-viewer:not(.settings-always-open) [title*="Settings"],
perspective-viewer:not(.settings-always-open) [title*="Menu"],
perspective-viewer:not(.settings-always-open) [title*="Configuration"],
perspective-viewer:not(.settings-always-open) [title*="configurar" i],
perspective-viewer:not(.settings-always-open) [title*="configuração" i],
perspective-viewer:not(.settings-always-open) [title*="configuracao" i],
perspective-viewer:not(.settings-always-open) #config_button,
perspective-viewer:not(.settings-always-open) #settings_button {
  display: none !important;
  visibility: hidden !important;
}

/* Classe para manter settings sempre aberto */
perspective-viewer.settings-always-open [data-testid*="settings"],
perspective-viewer.settings-always-open [data-testid*="config"],
perspective-viewer.settings-always-open [data-testid*="menu"],
perspective-viewer.settings-always-open [aria-label*="Settings"],
perspective-viewer.settings-always-open [aria-label*="Menu"],
perspective-viewer.settings-always-open [aria-label*="Configuration"],
perspective-viewer.settings-always-open [title*="Settings"],
perspective-viewer.settings-always-open [title*="Menu"],
perspective-viewer.settings-always-open [title*="Configuration"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Garantir que o painel de settings fique vis?vel */
perspective-viewer.settings-always-open {
  --settings-panel-display: block !important;
  --toolbar-display: block !important;
  --menu-bar-display: block !important;
}

/* Hide any floating panels or overlays */
perspective-viewer .floating-panel,
perspective-viewer .overlay,
perspective-viewer .modal,
perspective-viewer .popup,
perspective-viewer .dropdown-menu {
  display: none !important;
  visibility: hidden !important;
}

/* Force hide using CSS containment */
perspective-viewer {
  contain: layout style paint !important;
}

/* Hide any shadow DOM toolbar elements using ::part if available */
perspective-viewer::part(menu-bar),
perspective-viewer::part(toolbar),
perspective-viewer::part(settings),
perspective-viewer::part(config-panel) {
  display: none !important;
  visibility: hidden !important;
}

/* ===================================================================
   OCULTA??O DO BOT?O SIDEBAR CLOSE - ESPEC?FICO
   =================================================================== */

/* Ocultar bot?o sidebar_close_button_inner especificamente */
perspective-viewer #sidebar_close_button_inner,
perspective-viewer .sidebar_close_button_inner,
perspective-viewer [id="sidebar_close_button_inner"],
perspective-viewer [class="sidebar_close_button_inner"],
perspective-viewer [id*="sidebar_close_button"],
perspective-viewer [class*="sidebar_close_button"],
perspective-viewer [id*="sidebar-close-button"],
perspective-viewer [class*="sidebar-close-button"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* Ocultar qualquer bot?o de fechar em sidebars */
perspective-viewer button[class*="close"],
perspective-viewer button[id*="close"],
perspective-viewer [role="button"][class*="close"],
perspective-viewer [role="button"][id*="close"],
perspective-viewer .close-button,
perspective-viewer .sidebar-close,
perspective-viewer .panel-close {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ===================================================================
   6. CONFIGURA??O GLOBAL DE FONTES
   =================================================================== */

/* Aplicar fonte personalizada a todos os elementos do Perspective */
perspective-viewer,
perspective-viewer *,
perspective-viewer table,
perspective-viewer table *,
perspective-viewer .column-item,
perspective-viewer .draggable-column,
perspective-viewer .perspective-column-item,
perspective-viewer .sub-columns,
perspective-viewer .sub-columns *,
perspective-viewer [class*="column"],
perspective-viewer [class*="field"],
perspective-viewer span,
perspective-viewer div,
perspective-viewer button,
perspective-viewer input,
perspective-viewer select,
perspective-viewer option {
  font-family: 'Ubuntu', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Arial', sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Tamanhos de fonte espec?ficos para diferentes elementos */
perspective-viewer table thead th {
  font-size: 14px !important;
  font-weight: 600 !important;
}

perspective-viewer table tbody td {
  font-size: 13px !important;
  font-weight: 400 !important;
}

perspective-viewer .column-item,
perspective-viewer .draggable-column,
perspective-viewer .perspective-column-item {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Labels amig?veis com fonte destacada */
perspective-viewer .friendly-label-applied {
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ===================================================================
   7. LABELS AMIG?VEIS PARA PAINEL DE SUB-COLUMNS
   =================================================================== */

/* Estilo para elementos do painel de sub-columns com labels amig?veis */
.perspective-sub-columns-labeled {
  font-weight: 500 !important;
  color: #1976d2 !important;
}

/* Estilo para elementos que receberam labels amig?veis */
.friendly-label-applied {
  position: relative;
  font-weight: 500;
  color: #1976d2;
}

/* Tooltip mostrando o nome t?cnico original */
.friendly-label-applied[data-original-text]:hover::after {
  content: "(" attr(data-original-text) ")";
  position: absolute;
  top: -25px;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
}

/* Seletores espec?ficos para o painel de sub-columns */
perspective-viewer .sub-columns .column-item,
perspective-viewer .sub-columns .draggable-column,
perspective-viewer .sub-columns .perspective-column-item,
perspective-viewer [class*="sub-column"] .column-item,
perspective-viewer [class*="columns-panel"] .column-item,
perspective-viewer [class*="column-selector"] .column-item {
  font-weight: 500;
  transition: all 0.2s ease;
  padding: 4px 8px;
  border-radius: 4px;
}

perspective-viewer .sub-columns .column-item:hover,
perspective-viewer .sub-columns .draggable-column:hover,
perspective-viewer .sub-columns .perspective-column-item:hover,
perspective-viewer [class*="column"] .column-item:hover {
  background-color: #e3f2fd;
  transform: translateX(2px);
}

/* Estilo para ?cones + texto no painel de sub-columns */
perspective-viewer .column-item .icon+span,
perspective-viewer .draggable-column .icon+span,
perspective-viewer .column-item span:last-child,
perspective-viewer .draggable-column span:last-child {
  margin-left: 8px;
  font-weight: 500;
}

/* Estilo espec?fico para elementos de lista de colunas */
perspective-viewer li[class*="column"],
perspective-viewer div[class*="column"] span,
perspective-viewer div[class*="field"] span {
  font-weight: 500;
  color: #333;
}

/* Destaque para campos que foram traduzidos */
perspective-viewer .friendly-label-applied {
  background: linear-gradient(90deg, transparent 0%, #e3f2fd 50%, transparent 100%);
  animation: highlight 0.5s ease-in-out;
}

@keyframes highlight {
  0% {
    background-color: transparent;
  }

  50% {
    background-color: #e3f2fd;
  }

  100% {
    background-color: transparent;
  }
}

/* ===================================================================
   7. OCULTAR BOT�O SETTINGS_BUTTON - FINOPS PERSPECTIVE
   =================================================================== */

/* Ocultar bot�o settings_button usando m�ltiplas estrat�gias */
perspective-viewer button[id*="settings"],
perspective-viewer button[class*="settings-button"],
perspective-viewer [id*="settings-button"],
perspective-viewer [class*="settings-button"],
perspective-viewer button:has-text("Configura��es"),
perspective-viewer button:has-text("Settings"),
perspective-viewer button[title*="Configura��es"],
perspective-viewer button[title*="Settings"],
perspective-viewer button[aria-label*="Configura��es"],
perspective-viewer button[aria-label*="Settings"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Ocultar qualquer elemento que use a vari�vel --settings-button--content */
perspective-viewer *[style*="--settings-button--content"] {
  display: none !important;
  visibility: hidden !important;
}

/* Garantir que o atributo settings="false" seja respeitado */
perspective-viewer[settings="false"] button[class*="settings"],
perspective-viewer[settings="false"] [id*="settings"],
perspective-viewer[settings="false"] [class*="config-button"] {
  display: none !important;
  visibility: hidden !important;
}

/* ===================================================================
   8. FINAL NOTES
   =================================================================== */

/*
 * This CSS file provides basic theming for Perspective.js using the official
 * CSS variables documented at https://perspective.finos.org/guide/how_to/javascript/theming.html
 *
 * The main styling approach:
 * 1. Use official --theme--color--* variables for theming
 * 2. Style light DOM elements (like tables) directly
 * 3. Avoid trying to style shadow DOM elements which are encapsulated
 * 4. Use expressions and CSS for friendly column labels
 * 5. Hide specific toolbar buttons using multiple CSS strategies
 * 6. Hide settings_button specifically for FinOps Perspective
 *
 * For more advanced theming, consider creating a custom theme following
 * the official Perspective documentation.
 */
/**
 * Perspective Viewer - Localização pt-BR
 *
 * Este arquivo contém as traduções em português brasileiro para o Perspective Viewer
 * usando o suporte oficial de i18n adicionado em março de 2024 (PR #2565).
 *
 * Baseado no arquivo oficial pt.css do FINOS Perspective com ajustes para pt-BR.
 * Referência: https://github.com/finos/perspective/tree/master/rust/perspective-viewer/src/themes/intl
 */

perspective-viewer {
  /* Aggregate Function Labels - Rótulos das Funções de Agregação */
  --sum--content: "Soma";
  --avg--content: "Média";
  --mean--content: "Média";
  --count--content: "Contagem";
  --distinct-count--content: "Contagem Única";
  --count-distinct--content: "Contagem Única";
  --min--content: "Mínimo";
  --max--content: "Máximo";
  --first--content: "Primeiro";
  --last--content: "Último";
  --median--content: "Mediana";
  --std--content: "Desvio Padrão";
  --stddev--content: "Desvio Padrão";
  --var--content: "Variância";
  --variance--content: "Variância";
  --abs-sum--content: "Soma Absoluta";
  --dominant--content: "Dominante";
  --join--content: "Junção";
  --unique--content: "Único";
  --any--content: "Qualquer";
  --high--content: "Alto";
  --low--content: "Baixo";
  --pct-sum-parent--content: "% Soma do Pai";
  --pct-sum-grand-total--content: "% Soma do Total";

  /* Config labels */
  --group-by-label--content: "Linhas";
  --split-by-label--content: "Colunas";
  --sort-label--content: "Ordenar Por";
  --filter-label--content: "Filtrar";
  --transpose-button--content: "Transpor";
  /* Botão de configuração do Perspective: ocultado por política de read-only.
     Mantemos o content vazio para nunca exibir o tooltip "configurar" ao usuário. */
  --config-button-icon--content: "";
  --all-columns-label--content: "Todas as Colunas";
  --untitled--content: "sem título";

  /* Plugin names */
  --plugin-name-datagrid--content: "Grade de Dados";
  --plugin-name-treemap--content: "Mapa de Árvore";
  --plugin-name-sunburst--content: "Gráfico Solar";
  --plugin-name-heatmap--content: "Mapa de Calor";
  --plugin-name-x-bar--content: "Barras X";
  --plugin-name-y-bar--content: "Barras Y";
  --plugin-name-y-line--content: "Linha Y";
  --plugin-name-x-y-line--content: "Linha X/Y";
  --plugin-name-x-y-scatter--content: "Dispersão X/Y";
  --plugin-name-y-scatter--content: "Dispersão Y";
  --plugin-name-y-area--content: "Área Y";
  --plugin-name-ohlc--content: "OHLC";
  --plugin-name-candlestick--content: "Candlestick";

  /* Column Selector names */
  --column-selector-column-columns--content: "Valores";
  --column-selector-column-x-axis--content: "Eixo X";
  --column-selector-column-y-axis--content: "Eixo Y";
  --column-selector-column-color--content: "Cor";
  --column-selector-column-size--content: "Tamanho";
  --column-selector-column-symbol--content: "Símbolo";
  --column-selector-column-label--content: "Rótulo";
  --column-selector-column-tooltip--content: "Dica";
  --add-expression-button--content: "Nova Coluna";

  /* Toolbar */
  --no-results--content: "Coluna Inválida";
  --datagrid-column-edit-button--content: "Editar";
  --copy-button--content: "Copiar";
  --export-button--content: "Exportar";
  --reset-button--content: "Redefinir";
  --edit-mode--read-only--content: "Somente Leitura";
  --edit-mode--edit--content: "Editar Texto";
  --edit-mode--select-row--content: "Selecionar Linha";
  --edit-mode--select-column--content: "Selecionar Coluna";
  --edit-mode--select-region--content: "Selecionar Região";
  --scroll-lock-toggle--content: "Rolagem Livre";
  --scroll-lock-alt-toggle--content: "Alinhar Rolagem";

  /* Column Settings */
  --color-label--content: "Cor";
  --format-label--content: "Formato";
  --timezone-label--content: "Fuso Horário";
  --date-style-label--content: "Estilo de Data";
  --time-style-label--content: "Estilo de Hora";
  --foreground-label--content: "Primeiro Plano";
  --background-label--content: "Plano de Fundo";
  --series-label--content: "Série";
  --color-range-label--content: "Faixa de Cores";
  --style-label--content: "Estilo";
  --minimum-integer-digits-label--content: "Dígitos Inteiros Mínimos";
  --rounding-increment-label--content: "Incremento de Arredondamento";
  --notation-label--content: "Notação";
  --use-grouping-label--content: "Usar Agrupamento";
  --sign-display-label--content: "Exibição de Sinal";
  --aggregate-depth-label--content: "Profundidade de Agregação";
  --max-value-label--content: "Valor Máximo";
  --rounding-priority-label--content: "Prioridade de Arredondamento";
  --rounding-mode-label--content: "Modo de Arredondamento";
  --trailing-zero-display-label--content: "Exibição de Zeros à Direita";
  --fractional-digits-label--content: "Dígitos Fracionários";
  --significant-digits-label--content: "Dígitos Significativos";
  --year-label--content: "Ano";
  --month-label--content: "Mês";
  --day-label--content: "Dia";
  --weekday-label--content: "Dia da Semana";
  --hour-label--content: "Hora";
  --minute-label--content: "Minuto";
  --second-label--content: "Segundo";
  --fractional-seconds-label--content: "Segundos Fracionários";
  --hours-label--content: "12/24 Horas";

  /* Tabs */
  --style-tab-label--content: "Estilo";
  --attributes-tab-label--content: "Atributos";
  --debug-tab-label--content: "Debug JSON";

  /* Aggregate Functions - Funções de Agregação */
  --aggregate-sum--content: "Soma";
  --aggregate-avg--content: "Média";
  --aggregate-mean--content: "Média";
  --aggregate-count--content: "Contagem";
  --aggregate-count-distinct--content: "Contagem Única";
  --aggregate-distinct-count--content: "Contagem Única";
  --aggregate-min--content: "Mínimo";
  --aggregate-max--content: "Máximo";
  --aggregate-first--content: "Primeiro";
  --aggregate-last--content: "Último";
  --aggregate-median--content: "Mediana";
  --aggregate-std--content: "Desvio Padrão";
  --aggregate-stddev--content: "Desvio Padrão";
  --aggregate-var--content: "Variância";
  --aggregate-variance--content: "Variância";
  --aggregate-abs-sum--content: "Soma Absoluta";
  --aggregate-dominant--content: "Dominante";
  --aggregate-join--content: "Junção";
  --aggregate-unique--content: "Único";
  --aggregate-any--content: "Qualquer";
  --aggregate-high--content: "Alto";
  --aggregate-low--content: "Baixo";
  --aggregate-pct-sum-parent--content: "% Soma do Pai";
  --aggregate-pct-sum-grand-total--content: "% Soma do Total";

  /* Sort Orders - Ordens de Classificação */
  --sort-asc--content: "Crescente";
  --sort-desc--content: "Decrescente";
  --sort-none--content: "Nenhuma";
  --sort-ascending--content: "Crescente";
  --sort-descending--content: "Decrescente";

  /* Filter Operations - Operações de Filtro */
  --filter-equals--content: "Igual a";
  --filter-not-equals--content: "Diferente de";
  --filter-greater-than--content: "Maior que";
  --filter-less-than--content: "Menor que";
  --filter-greater-equal--content: "Maior ou igual";
  --filter-less-equal--content: "Menor ou igual";
  --filter-begins-with--content: "Começa com";
  --filter-ends-with--content: "Termina com";
  --filter-contains--content: "Contém";
  --filter-not-contains--content: "Não contém";
  --filter-in--content: "Em";
  --filter-not-in--content: "Não em";
  --filter-is-null--content: "É nulo";
  --filter-is-not-null--content: "Não é nulo";
  --filter-between--content: "Entre";
  --filter-not-between--content: "Não entre";

  /* Mensagens de Sistema - System Messages */
  --loading--content: "Carregando...";
  --no-data--content: "Nenhum dado disponível";
  --error--content: "Erro ao carregar dados";
  --connection-error--content: "Erro de conexão";
  --invalid-data--content: "Dados inválidos";
  --processing--content: "Processando...";
  --calculating--content: "Calculando...";
  --updating--content: "Atualizando...";

  /* Botões e Ações Adicionais - Additional Buttons and Actions */
  --save-button--content: "Salvar";
  --cancel-button--content: "Cancelar";
  --apply-button--content: "Aplicar";
  --clear-button--content: "Limpar";
  --refresh-button--content: "Atualizar";
  --download-button--content: "Baixar";
  --print-button--content: "Imprimir";
  --share-button--content: "Compartilhar";
  --settings-button--content: "Configurações";
  --help-button--content: "Ajuda";
}
 #menu-bar {
  display: none !important;
  opacity: 0 !important;
}
/* Estilo adicional para melhor experiência em português */
perspective-viewer {
  /* Ajustar fonte para melhor legibilidade em português */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Ajustar espaçamento para textos mais longos em português */
  --column-selector-width: 200px;
  --toolbar-button-min-width: 80px;
}

/* Responsividade para textos em português */
@media (max-width: 768px) {
  perspective-viewer {
    --column-selector-width: 150px;
    --toolbar-button-min-width: 60px;
  }
}

/* ===================================================================
   OCULTAR MENU-BAR DA TOOLBAR
   =================================================================== */

/* Garantir que o menu-bar sempre seja oculto */
:host #main_column #status_bar #menu-bar,
:host #main_column #status_bar.titled #menu-bar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* Seletores alternativos para diferentes estruturas */
perspective-viewer #main_column #status_bar #menu-bar,
perspective-viewer #main_column #status_bar.titled #menu-bar,
perspective-viewer::part(menu-bar),
perspective-viewer [id="menu-bar"],
perspective-viewer [class*="menu-bar"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ocultar todos os elementos dentro do menu-bar */
:host #main_column #status_bar #menu-bar *,
:host #main_column #status_bar.titled #menu-bar *,
perspective-viewer #menu-bar *,
perspective-viewer [id="menu-bar"] * {
  display: none !important;
  visibility: hidden !important;
}

/* Traduções específicas para dropdowns de colunas */
perspective-viewer {
  /* Sobrescrever textos dos dropdowns de agregação */
  --column-aggregate-sum--content: "soma";
  --column-aggregate-avg--content: "média";
  --column-aggregate-mean--content: "média";
  --column-aggregate-count--content: "contagem";
  --column-aggregate-distinct-count--content: "contagem distinta";
  --column-aggregate-count-distinct--content: "contagem distinta";
  --column-aggregate-min--content: "mínimo";
  --column-aggregate-max--content: "máximo";
  --column-aggregate-first--content: "primeiro";
  --column-aggregate-last--content: "último";
  --column-aggregate-median--content: "mediana";
  --column-aggregate-std--content: "desvio padrão";
  --column-aggregate-stddev--content: "desvio padrão";
  --column-aggregate-var--content: "variância";
  --column-aggregate-variance--content: "variância";
  --column-aggregate-abs-sum--content: "soma absoluta";
  --column-aggregate-dominant--content: "valor dominante (moda)";
  --column-aggregate-join--content: "junção";
  --column-aggregate-unique--content: "únicos";
  --column-aggregate-any--content: "qualquer";
  --column-aggregate-high--content: "alta";
  --column-aggregate-low--content: "baixa";
  --column-aggregate-high-minus-low--content: "alta menos baixa";
  --column-aggregate-first-by-index--content: "primeiro por índice";
  --column-aggregate-last-by-index--content: "último por índice";
  --column-aggregate-last-minus-first--content: "último menos primeiro";
  --column-aggregate-q1--content: "Q1";
  --column-aggregate-q3--content: "Q3";
  --column-aggregate-pct-sum-parent--content: "% da soma do pai";
  --column-aggregate-pct-sum-grand-total--content: "% da soma do total geral";
}

/* Traduzir opções específicas dos dropdowns usando classes específicas do Perspective */

/* Target aggregate selector containers specifically */
.dropdown-width-container option[value="sum"],
.aggregate-selector option[value="sum"],
perspective-viewer .dropdown-width-container option[value="sum"],
perspective-viewer .aggregate-selector option[value="sum"] {
  font-size: 0 !important;
}

.dropdown-width-container option[value="sum"]::after,
.aggregate-selector option[value="sum"]::after,
perspective-viewer .dropdown-width-container option[value="sum"]::after,
perspective-viewer .aggregate-selector option[value="sum"]::after {
  content: "soma" !important;
  font-size: 14px !important;
}

.dropdown-width-container option[value="count"],
.aggregate-selector option[value="count"],
perspective-viewer .dropdown-width-container option[value="count"],
perspective-viewer .aggregate-selector option[value="count"] {
  font-size: 0 !important;
}

.dropdown-width-container option[value="count"]::after,
.aggregate-selector option[value="count"]::after,
perspective-viewer .dropdown-width-container option[value="count"]::after,
perspective-viewer .aggregate-selector option[value="count"]::after {
  content: "contagem" !important;
  font-size: 14px !important;
}

perspective-viewer option[value="distinct count"],
perspective-viewer [data-value="distinct count"],
perspective-viewer [title="distinct count"] {
  font-size: 0 !important;
}

perspective-viewer option[value="distinct count"]::after,
perspective-viewer [data-value="distinct count"]::after,
perspective-viewer [title="distinct count"]::after {
  content: "contagem única" !important;
  font-size: 14px !important;
}

perspective-viewer option[value="avg"],
perspective-viewer option[value="mean"],
perspective-viewer [data-value="avg"],
perspective-viewer [data-value="mean"],
perspective-viewer [title="avg"],
perspective-viewer [title="mean"] {
  font-size: 0 !important;
}

perspective-viewer option[value="avg"]::after,
perspective-viewer option[value="mean"]::after,
perspective-viewer [data-value="avg"]::after,
perspective-viewer [data-value="mean"]::after,
perspective-viewer [title="avg"]::after,
perspective-viewer [title="mean"]::after {
  content: "média" !important;
  font-size: 14px !important;
}

perspective-viewer option[value="min"],
perspective-viewer [data-value="min"],
perspective-viewer [title="min"] {
  font-size: 0 !important;
}

perspective-viewer option[value="min"]::after,
perspective-viewer [data-value="min"]::after,
perspective-viewer [title="min"]::after {
  content: "mínimo" !important;
  font-size: 14px !important;
}

perspective-viewer option[value="max"],
perspective-viewer [data-value="max"],
perspective-viewer [title="max"] {
  font-size: 0 !important;
}

perspective-viewer option[value="max"]::after,
perspective-viewer [data-value="max"]::after,
perspective-viewer [title="max"]::after {
  content: "máximo" !important;
  font-size: 14px !important;
}

perspective-viewer option[value="first"],
perspective-viewer [data-value="first"],
perspective-viewer [title="first"] {
  font-size: 0 !important;
}

perspective-viewer option[value="first"]::after,
perspective-viewer [data-value="first"]::after,
perspective-viewer [title="first"]::after {
  content: "primeiro" !important;
  font-size: 14px !important;
}

perspective-viewer option[value="last"],
perspective-viewer [data-value="last"],
perspective-viewer [title="last"] {
  font-size: 0 !important;
}

perspective-viewer option[value="last"]::after,
perspective-viewer [data-value="last"]::after,
perspective-viewer [title="last"]::after {
  content: "último" !important;
  font-size: 14px !important;
}

perspective-viewer option[value="median"],
perspective-viewer [data-value="median"],
perspective-viewer [title="median"] {
  font-size: 0 !important;
}

perspective-viewer option[value="median"]::after,
perspective-viewer [data-value="median"]::after,
perspective-viewer [title="median"]::after {
  content: "mediana" !important;
  font-size: 14px !important;
}

perspective-viewer option[value="std"],
perspective-viewer option[value="stddev"],
perspective-viewer [data-value="std"],
perspective-viewer [data-value="stddev"],
perspective-viewer [title="std"],
perspective-viewer [title="stddev"] {
  font-size: 0 !important;
}

perspective-viewer option[value="std"]::after,
perspective-viewer option[value="stddev"]::after,
perspective-viewer [data-value="std"]::after,
perspective-viewer [data-value="stddev"]::after,
perspective-viewer [title="std"]::after,
perspective-viewer [title="stddev"]::after {
  content: "desvio padrão" !important;
  font-size: 14px !important;
}

perspective-viewer option[value="var"],
perspective-viewer option[value="variance"],
perspective-viewer [data-value="var"],
perspective-viewer [data-value="variance"],
perspective-viewer [title="var"],
perspective-viewer [title="variance"] {
  font-size: 0 !important;
}

perspective-viewer option[value="var"]::after,
perspective-viewer option[value="variance"]::after,
perspective-viewer [data-value="var"]::after,
perspective-viewer [data-value="variance"]::after,
perspective-viewer [title="var"]::after,
perspective-viewer [title="variance"]::after {
  content: "variância" !important;
  font-size: 14px !important;
}

perspective-viewer option[value="dominant"],
perspective-viewer [data-value="dominant"],
perspective-viewer [title="dominant"] {
  font-size: 0 !important;
}

perspective-viewer option[value="dominant"]::after,
perspective-viewer [data-value="dominant"]::after,
perspective-viewer [title="dominant"]::after {
  content: "dominante" !important;
  font-size: 14px !important;
}

perspective-viewer option[value="high"],
perspective-viewer [data-value="high"],
perspective-viewer [title="high"] {
  font-size: 0 !important;
}

perspective-viewer option[value="high"]::after,
perspective-viewer [data-value="high"]::after,
perspective-viewer [title="high"]::after {
  content: "alto" !important;
  font-size: 14px !important;
}

perspective-viewer option[value="low"],
perspective-viewer [data-value="low"],
perspective-viewer [title="low"] {
  font-size: 0 !important;
}

perspective-viewer option[value="low"]::after,
perspective-viewer [data-value="low"]::after,
perspective-viewer [title="low"]::after {
  content: "baixo" !important;
  font-size: 14px !important;
}