:root {
  color-scheme: light;
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 65% 40%;
  --success-foreground: 0 0% 98%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --radius: 0.65rem;
  --radius-sm: calc(var(--radius) - 0.25rem);
  --radius-md: calc(var(--radius) - 0.125rem);
  --radius-lg: var(--radius);
  --sidebar: 0 0% 98%;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 0 0% 3.9%;
  --sidebar-primary: 0 0% 9%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 0 0% 96.1%;
  --sidebar-accent-foreground: 0 0% 9%;
  --sidebar-border: 0 0% 89.8%;
  --sidebar-ring: 0 0% 3.9%;
}

.dark {
  color-scheme: dark;
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --card: 0 0% 9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 65% 50%;
  --success-foreground: 0 0% 10%;
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  --sidebar: 0 0% 15%;
  --sidebar-background: 0 0% 15%;
  --sidebar-foreground: 0 0% 98%;
  --sidebar-primary: 220 70% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 20%;
  --sidebar-accent-foreground: 0 0% 98%;
  --sidebar-border: 0 0% 14.9%;
  --sidebar-ring: 0 0% 83.1%;
}


/**
 * CSS MINIMALISTA para modo de apresentação (export de dashboard)
 * Aplicado temporariamente durante a captura
 *
 * FILOSOFIA: Mexer o MÍNIMO possível no layout.
 * Apenas esconder UI e desabilitar animações.
 */

/* ========================================
   1. ESCONDER ELEMENTOS DE UI
   ======================================== */

/* Esconder botões, menus e elementos de navegação */
.onepage-mode button,
.onepage-mode .no-print,
.onepage-mode .sidebar,
.onepage-mode .mobile-menu,
.onepage-mode nav,
.onepage-mode [role="navigation"],
.onepage-mode .header-actions {
  display: none !important;
  visibility: hidden !important;
}

/* ========================================
   1.5. GARANTIR BACKGROUND VISÍVEL
   ======================================== */

/* Usar um background mais próximo do container real do app (Card) */
.onepage-mode {
  background-color: hsl(var(--card, 0 0% 9%)) !important;
  background: hsl(var(--card, 0 0% 9%)) !important;
  padding: 0 32px 32px 32px !important; /* Margem profissional (sem topo) */
  box-sizing: border-box !important;
}

/* KPI bar: quando o export força layout "desktop" via overrides, o `divide-y` do mobile
   pode ficar aplicado e gerar linhas horizontais erradas. Normalizar para "divide-x"
   apenas no export (onepage-mode). */
.onepage-mode [data-dashboard-kpi-bar] > * {
  border-top-width: 0 !important;
}
.onepage-mode [data-dashboard-kpi-bar] > * + * {
  border-left-width: 1px !important;
  border-left-style: solid !important;
  border-left-color: rgba(255, 255, 255, 0.1) !important;
}

/* Export canônico: manter KPIs em layout "desktop" mesmo se o viewport do usuário for menor.
   Tailwind breakpoints dependem do viewport, então forçamos aqui via data-attributes. */
.onepage-mode [data-dashboard-kpi-metrics] {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  -moz-column-gap: 8px !important;
       column-gap: 8px !important;
  row-gap: 0 !important;
}

.onepage-mode [data-dashboard-kpi-metrics] [data-dashboard-kpi-pipe] {
  display: none !important;
}

/* Separador canônico na exportação (evita `|` grudado em alguns browsers no html-to-image).
   Renderizar como prefixo do item seguinte (e não sufixo do item anterior) para evitar
   casos em que o `|` parece colado no valor anterior (ex.: Plays). */
.onepage-mode [data-dashboard-kpi-metrics] > span + span::before {
  /* NBSP antes/depois para evitar colapso de espaços na captura */
  content: "\00a0|\00a0";
  display: inline-block;
  white-space: pre;
  color: rgba(255, 255, 255, 0.25);
}

/* ========================================
   1.6. EVITAR TEXTOS CORTADOS (CRÍTICO!)
   ======================================== */

/* Desabilitar line-clamp do Tailwind */
.onepage-mode [class*="line-clamp"] {
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

/* ========================================
   1.7. LIMITAR LOGO E IMAGENS
   ======================================== */

/* Limitar tamanho do logo para evitar que fique gigante */
.onepage-mode img {
  max-height: 48px !important; /* Altura máxima do logo */
  max-width: 200px !important; /* Largura máxima também */
  width: auto !important;
  height: auto !important; /* Altura auto para não quebrar aspect ratio */
  -o-object-fit: contain !important;
     object-fit: contain !important;
  display: block !important; /* Forçar display block */
  opacity: 1 !important; /* Garantir que não está invisível */
  visibility: visible !important; /* Garantir visibilidade */
}

/* ========================================
   1.8. BORDAS TRANSPARENTES (SEM COR)
   ======================================== */

/* Garantir que bordas sejam transparentes mas arredondadas */
.onepage-mode [class*="border-transparent"],
.onepage-mode .border-transparent {
  border-color: transparent !important;
}

/* Dashboard (export): evitar ellipsis em nomes curtos na legenda do donut de faixas */
.onepage-mode .dashboard-track-legend-name {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* Recharts: em alguns casos de export, o clip-path pode ficar com largura antiga após mudanças de grid
   (ex.: card full-width), cortando o gráfico antes do fim. Desabilitar clip apenas no timeline. */
.onepage-mode .dashboard-timeline-chart .recharts-area-area,
.onepage-mode .dashboard-timeline-chart .recharts-area-curve,
.onepage-mode .dashboard-timeline-chart .recharts-area-dot,
.onepage-mode .dashboard-timeline-chart .recharts-active-dot {
  clip-path: none !important;
}
.onepage-mode .dashboard-timeline-chart .recharts-surface {
  overflow: visible !important;
}

/* ========================================
   2. DESABILITAR ANIMAÇÕES E TRANSIÇÕES
   ======================================== */

.onepage-mode *,
.onepage-mode *::before,
.onepage-mode *::after {
  animation: none !important;
  animation-duration: 0s !important;
  transition: none !important;
  transition-duration: 0s !important;
}

/* ========================================
   3. GARANTIR CORES VISÍVEIS (IMPORTANTE!)
   ======================================== */

.onepage-mode {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
}

/* ========================================
   3.5. FIX OPERA: CORES SVG/GRÁFICOS (CRÍTICO!)
   ======================================== */

/* Opera tem bug: força texto preto em SVG durante captura */
/* Forçar cor branca/cinza em TODOS elementos de texto SVG */
.onepage-mode svg text,
.onepage-mode svg tspan {
  fill: #e5e5e5 !important; /* Cinza claro (mesmo do texto normal) */
  color: #e5e5e5 !important;
}

/* Recharts: Classes específicas de labels/legendas */
.onepage-mode .recharts-text,
.onepage-mode .recharts-cartesian-axis-tick-value,
.onepage-mode .recharts-legend-item-text,
.onepage-mode .recharts-label,
.onepage-mode .recharts-tooltip-label {
  fill: #e5e5e5 !important;
  color: #e5e5e5 !important;
}

/* ========================================
   4. OTIMIZAÇÕES DE RENDERIZAÇÃO
   ======================================== */

/* Texto nítido */
.onepage-mode {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Remover scrollbars */
.onepage-mode::-webkit-scrollbar {
  display: none !important;
}

.onepage-mode {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Desabilitar interações durante captura */
.onepage-mode * {
  pointer-events: none !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

/* ========================================
   5. FIX MOBILE: “MANCHAS”/ARTEFATOS QUADRADOS (iOS/Android)
   ======================================== */

/*
  Em alguns dispositivos móveis, `box-shadow`, `filter` e `backdrop-filter` podem
  rasterizar em blocos (quadrados) quando a captura usa `transform`/tiling.
  Esta regra só é aplicada durante export no mobile (classe adicionada via JS).
*/
.onepage-mode.onepage-mobile-export *,
.onepage-mode.onepage-mobile-export *::before,
.onepage-mode.onepage-mobile-export *::after {
  filter: none !important;
  backdrop-filter: none !important;
}

/* Remover sombras pesadas apenas no export mobile (mantém bordas/shape). */
.onepage-mode.onepage-mobile-export [class*="shadow"],
.onepage-mode.onepage-mobile-export [style*="box-shadow"] {
  box-shadow: none !important;
}

/* ========================================
   FIM - MAIS NADA!
   ======================================== */

/*
  ⚠️ IMPORTANTE: NÃO adicione regras que alterem:
  - width/max-width (quebra responsividade)
  - height/min-height (distorce gráficos)
  - position (quebra layouts absolute/relative)
  - display (quebra grids e flexbox)
  - overflow (causa vazamentos ou cortes)
  - box-shadow (pode ser necessário para definição visual)

  Se precisar de ajustes, faça via data-attributes específicos
  ou classes adicionais, não com seletores universais!
*/