/**
 * CSS Variables para impressão
 * Centraliza valores reutilizáveis para facilitar manutenção
 */

:root {
  /* ===== Dimensões de Página ===== */
  --print-page-width: 210mm;
  --print-page-height: 297mm;
  --print-margin: 0;
  --print-padding-bottom: 0;

  /* ===== Dimensões de Gráfico ===== */
  --chart-height-desktop: 280px;
  --chart-height-mobile: 300px;
  --chart-min-height-mobile: 300px;
  --chart-legend-icon-size: 9px;
  --chart-legend-icon-radius: 4.5px;

  /* ===== Dimensões de Grade de Fotos ===== */
  --photo-cell-height: 450px;
  --photo-column-width: 49%;
  --photo-grid-gap: 0px;
  --photo-border-radius: 12px;
  --photo-label-font-size: 8px;

  /* ===== Cores ===== */
  --print-bg-paper: #FFFAF0;
  --print-bg-sand: #FFFBEB;

  /* ===== Tipografia ===== */
  --print-heading-size: 12px;
  --print-heading-line-height: 1.3;
  --print-footer-font-size: 7px;
  --print-footer-line-height: 1.1;
  --print-label-font-size: 7px;
  --print-sm-size: 10px;
  --print-xs-size: 8px;

  /* ===== Z-index ===== */
  --print-footer-z-index: 10;
  --print-label-z-index: 10;

  /* ===== Espaçamento (Tailwind Overrides) ===== */
  --print-p-4: 3px;
  --print-p-5: 4px;
  --print-p-8: 5px;
  --print-m-top-small: 2px;
  --print-m-bottom-small: 1px;
  --print-gap-2: 1px;
  --print-gap-3: 2px;
  --print-gap-4: 2px;
  --print-gap-6: 3px;
  --print-gap-8: 4px;
  --print-column-gap-6: 5px;
  --print-row-gap-4: 1px;
}/**
 * Layout CSS para impressão
 * Configura página, margens, backgrounds, tipografia e utilitários Tailwind
 */

@media print {

  /* ===== Configuração de Página ===== */
  @page {
    size: A4 portrait !important;
    margin: 0 !important;
    /* Force ZERO */
  }

  html {
    width: var(--print-page-width) !important;
    background-color: var(--print-bg-paper) !important;
  }

  body {
    background-color: var(--print-bg-paper) !important;
    /* Height and Width handled in global block below */
  }

  /* ===== Backgrounds ===== */
  main,
  [class*="bg-paper"],
  .bg-paper {
    background-color: var(--print-bg-paper) !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  [class*="bg-sand"],
  .bg-sand {
    background-color: var(--print-bg-sand) !important;
  }

  /* ===== Ajuste de Cores ===== */
  *:not(.chart-legend-dot),
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
  }

  /* Permitir box-shadow nas bolinhas da legenda */
  .chart-legend-dot {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: unset !important;
  }

  /* ===== Visibilidade ===== */
  .no-print {
    display: none !important;
  }

  /* ===== Footer Rules moved to footer.css ===== */

  /* ===== Ensure main container is flex for footer positioning ===== */
  main {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
  }

  main>div:last-child:has(.print-footer-content),
  main>div:last-child:has(.print-footer-text) {
    margin-top: auto !important;
  }

  /* CRITICAL GLOBAL FIX: Allow full expansion */
  html,
  body {
    width: 210mm !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: var(--print-padding-bottom) !important;
    overflow: visible !important;
    background-color: white !important;
  }

  /* Garante que o container principal permita o rodapé aparecer */
  main {
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  main>div {
    width: 100% !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* ===== Reset de Inputs ===== */
  input,
  select,
  textarea {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }

  /* main>div {
    flex: 1 !important;
  } */

  /* ===== Largura Total para Containers ===== */
  main>div,
  main>div>div,
  main>div>div>div {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ===== Padding Seletivo ===== */
  /* Padding padrão para containers sem photo-grid ou chart */
  main>div:not(:has(.photo-grid-container)):not(:has(.chart-container)),
  main>div>div:not(:has(.photo-grid-container)):not(:has(.chart-container)),
  main>div>div>div:not(:has(.photo-grid-container)):not(:has(.chart-container)) {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Remove padding de containers com PhotoGrid */
  .px-6.pt-2:has(.photo-grid-container) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* .px-6.pt-2:has(.chart-container),
  div:has(.chart-container) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  } */

  /* Remove margens ao redor do chart container */
  /* div:has(.chart-container),
  .px-6.py-4:has(.chart-container),
  .px-6:has(.chart-container),
  div[class*="px-6"]:has(.chart-container) {
    margin: 0 !important;
    padding: 0 !important;
  } */

  /* Remove gap entre MetricsManager e chart */
  .no-print+div:has(.chart-container),
  .no-print~div:has(.chart-container),
  div:has(.no-print)+div:has(.chart-container),
  div:has(.no-print)~div:has(.chart-container) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
  }

  /* Remove margens do próprio chart-container - REMOVIDO para permitir ajustes */
  /*
  .chart-container {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  */

  /* Remove espaçamento do título do chart - REMOVIDO para permitir ajustes */
  /*
  .chart-container h3 {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  */

  /* Remove espaçamento de containers pais do chart */
  main>div>div:has(.chart-container),
  main>div>div>div:has(.chart-container) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: 0 !important;
  }

  /* Mantém padding para outros elementos */
  .px-6.pt-2:not(:has(.photo-grid-container)):not(:has(.chart-container)) {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Remove padding da photo-grid */
  .photo-grid-container,
  .photo-grid-container * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .photo-grid-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .photo-grid-container:has(.photo-cell) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ===== Fix para Chrome - Margem Branca ===== */
  @supports selector(::-webkit-scrollbar) {
    @page {
      size: 210mm 297mm !important;
      margin: 0 !important;
    }

    /* Just confirm width/margin here, height is handled globally */
    html,
    body {
      width: 210mm !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    main {
      width: 210mm !important;
      max-width: 210mm !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }

  /* ===== Tailwind Utility Overrides ===== */
  .p-4 {
    padding: var(--print-p-4) !important;
  }

  .p-5 {
    padding: var(--print-p-5) !important;
  }

  .p-8 {
    padding: var(--print-p-8) !important;
  }

  .mb-2,
  .mb-3 {
    margin-bottom: var(--print-m-bottom-small) !important;
  }

  .mb-4,
  .mb-6,
  .mb-8 {
    margin-bottom: var(--print-m-top-small) !important;
  }

  .mt-4,
  .mt-6 {
    margin-top: var(--print-m-top-small) !important;
  }

  .pt-2,
  .pt-3 {
    padding-top: 1px !important;
  }

  .pb-1 {
    padding-bottom: 0 !important;
  }

  .pb-2 {
    padding-bottom: 1px !important;
  }

  /* Grid gaps */
  [class*="gap-x-6"] {
    column-gap: var(--print-column-gap-6) !important;
  }

  [class*="gap-y-4"] {
    row-gap: var(--print-row-gap-4) !important;
  }

  [class*="gap-2"] {
    gap: var(--print-gap-2) !important;
  }

  [class*="gap-3"] {
    gap: var(--print-gap-3) !important;
  }

  [class*="gap-4"] {
    gap: var(--print-gap-4) !important;
  }

  [class*="gap-6"] {
    gap: var(--print-gap-6) !important;
  }

  [class*="gap-8"] {
    gap: var(--print-gap-8) !important;
  }

  /* ===== Controle de Quebra de Página ===== */
  .print-keep-together {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* ===== Tipografia ===== */
  h1 {
    font-size: 17px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  h3 {
    margin-top: var(--print-m-top-small) !important;
    margin-bottom: var(--print-m-bottom-small) !important;
    padding: 0 !important;
    font-size: var(--print-heading-size) !important;
    line-height: var(--print-heading-line-height) !important;
  }

  label {
    font-size: var(--print-label-font-size) !important;
    margin-bottom: 0 !important;
    line-height: 1.1 !important;
  }

  .text-sm {
    font-size: var(--print-sm-size) !important;
  }

  .text-xs {
    font-size: var(--print-xs-size) !important;
  }

  .text-\[10px\] {
    font-size: var(--print-xs-size) !important;
  }

  /* ===== Bordas ===== */
  [class*="border-b"] {
    border-bottom-width: 1px !important;
  }

  .page-break-after {
    page-break-after: always !important;
    break-after: page !important;
  }

  .page-break-before-always {
    page-break-before: always !important;
    break-before: page !important;
    margin-top: 0 !important;
  }

  /* ===== FIX: Full-screen overlays (Dossier/Modal) ===== */
  /* Targets the container in HarvestDossierView, but excludes no-print overlays */
  .fixed.inset-0.z-\[200\],
  .fixed.inset-0.z-50,
  body>div>div.fixed.inset-0:not(.no-print) {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    z-index: auto !important;
    background-color: white !important;
  }

  /* ===== FIX: Explicitly hide loading overlay ===== */
  /* ===== FIX: Explicitly hide loading overlay (Aggressive) ===== */
  #print-loading-overlay,
  #global-print-loader {
    display: none !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    z-index: -9999 !important;
  }

  /* ===== FIX: Prevent Extra Pages (Desktop Logic) ===== */
  html,
  body {
    width: 210mm !important;
    height: 297mm !important;
    /* Fixed height A4 */
    min-height: 297mm !important;
    max-height: 297mm !important;
    overflow: hidden !important;
    /* Kill Page 2 */
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--print-bg-paper) !important;
  }

  /* ===== FORCE SINGLE PAGE PRINT (Strict Mode) ===== */
  /* ===== FORCE SINGLE PAGE PRINT (Strict Mode) ===== */
  .force-print-single-page,
  main.force-print-single-page {
    height: 297mm !important;
    max-height: 297mm !important;
    min-height: 297mm !important;
    overflow: hidden !important;
    display: block !important;
    /* Switch to BLOCK to avoid Flex bugs */
    position: relative !important;
    /* Ensure padding for absolute footer */
    padding-bottom: 4rem !important;
    margin: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: var(--print-bg-paper) !important;
    /* Kill beige gap */
    page-break-after: avoid !important;
    break-after: avoid !important;
    top: 0 !important;
  }

  /* Ensure fixed footer at the absolute bottom of physical page */
  .force-print-single-page .print-footer-mobile {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: transparent !important;
    /* Transparent to not block if overlap happens */
    z-index: 50 !important;
    margin-top: 0 !important;
    padding-bottom: 2mm !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* ===== FIX: Explicit Header Pull-Up ===== */
  /* ===== FIX: Explicit Header Pull-Up ===== */
  .header-root {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 20 !important;
  }

  /* ===== FIX: Content Height Constraints (Prevent Footer Collision) ===== */
  /* SCOPED TO DESKTOP ONLY (.force-print-single-page) */

  /* Force Photo Grid Height (Desktop Only) */
  .force-print-single-page .photo-grid-container {
    height: 420px !important;
    max-height: 420px !important;
    overflow: hidden !important;
  }

  /* Force Photo Cell Height (Desktop Only) */
  .force-print-single-page .photo-cell,
  .force-print-single-page .photo-cell img {
    height: 420px !important;
    max-height: 420px !important;
    object-fit: cover !important;
  }

  /* Force Chart Height (Desktop Only) */
  .force-print-single-page .chart-container,
  .force-print-single-page .recharts-responsive-container,
  .force-print-single-page .recharts-wrapper,
  .force-print-single-page .recharts-surface {
    height: 300px !important;
    max-height: 300px !important;
  }

  /* Ensure SVG scales correctly within the forced height */
  .force-print-single-page .recharts-surface {
    overflow: visible !important;
  }

  /* Target first child styling if needed? */
  .print-layout-root,
  .print-content-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    /* Kill flex alignment gaps */
  }

  /* Force Chart Title Spacing (Desktop Only) */
  .force-print-single-page .chart-title-force-space {
    margin-top: 95px !important;
    padding-top: 6px !important;
    display: block !important;
    clear: both !important;
    /* Ensure it drops below floated elements if any */
  }

  /* ===== FIX: Legend visibility and size for print ===== */
  /* Ensure legend container is visible */
  .force-print-single-page .chart-container .flex.justify-center.items-center {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    gap: 24px !important;
  }

  /* Ensure legend color indicators (circles) are visible and larger */
  .force-print-single-page .chart-container .w-2.h-2.rounded-full,
  .force-print-single-page .chart-container div[class*="rounded-full"][style*="background"] {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    flex-shrink: 0 !important;
  }

  /* Ensure legend text is readable */
  .force-print-single-page .chart-container .text-stone-600,
  .force-print-single-page .chart-container span[class*="text-stone"] {
    font-size: 11px !important;
    font-weight: 600 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* ===== FIX: Ensure X-axis labels are not cut off ===== */
  .force-print-single-page .chart-container svg,
  .force-print-single-page .chart-container .recharts-surface {
    overflow: visible !important;
  }

  .force-print-single-page .chart-container .recharts-xAxis,
  .force-print-single-page .chart-container .recharts-cartesian-axis-x {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .force-print-single-page .chart-container .recharts-xAxis text,
  .force-print-single-page .chart-container .recharts-cartesian-axis-tick-value {
    font-size: 10px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Target first child styling if needed? */
  .force-print-single-page>div {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ===== FIX: Remove white rectangle overlay on chart ===== */
  /* Remove white backgrounds from internal elements that might overlay the chart */
  .force-print-single-page>div,
  .force-print-single-page>div>div,
  .force-print-single-page .relative.z-10 {
    background-color: transparent !important;
    background: transparent !important;
  }

  /* Ensure chart container is always visible and on top */
  .force-print-single-page .chart-container {
    position: relative !important;
    z-index: 30 !important;
    background-color: transparent !important;
    background: transparent !important;
  }

  /* Remove any white backgrounds from parent containers of chart */
  .force-print-single-page div:has(.chart-container) {
    background-color: transparent !important;
    background: transparent !important;
  }

  /* Ensure no element overlays the chart with white background */
  .force-print-single-page>div[class*="relative"],
  .force-print-single-page>div[class*="z-"] {
    background-color: transparent !important;
    background: transparent !important;
  }

  /* Fix for any spacer or empty divs that might create white rectangles */
  .force-print-single-page div[class*="spacer"],
  .force-print-single-page div:empty,
  .force-print-single-page div[style*="height: 0"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Ensure overflow doesn't create white rectangles */
  .force-print-single-page>div {
    overflow: visible !important;
  }

  /* Make sure chart wrapper and content wrapper don't have white backgrounds */
  .force-print-single-page .print-content-wrapper,
  .force-print-single-page .print-layout-root {
    background-color: transparent !important;
    background: transparent !important;
  }

  /* ===== MOBILE SPECIFIC ADJUSTMENTS (max-width: 767px) ===== */
  @media (max-width: 767px) {
    
    /* Force Photo Grid Height (Mobile Only) - Reduzido para 250px */
    .force-print-single-page .photo-grid-container {
      height: 250px !important;
      max-height: 250px !important;
      overflow: hidden !important;
      margin-bottom: 4px !important;
    }

    /* Force Photo Cell Height (Mobile Only) - Reduzido para 250px */
    .force-print-single-page .photo-cell,
    .force-print-single-page .photo-cell img {
      height: 250px !important;
      max-height: 250px !important;
      object-fit: cover !important;
    }

    /* Force Chart Height (Mobile Only) - Reduzido para 200px */
    .force-print-single-page .chart-container,
    .force-print-single-page .recharts-responsive-container,
    .force-print-single-page .recharts-wrapper,
    .force-print-single-page .recharts-surface {
      height: 200px !important;
      max-height: 200px !important;
    }

    /* Comprimir elementos internos do gráfico (Mobile) */
    .force-print-single-page .recharts-legend-wrapper {
      margin-top: 0 !important;
      padding-top: 0 !important;
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
    }

    /* Reduzir tamanho da fonte dos labels do gráfico (Mobile) */
    .force-print-single-page .recharts-text {
      font-size: 9px !important;
    }

    /* Reduzir espaçamento da legenda (Mobile) */
    .force-print-single-page .recharts-legend-item {
      margin: 0 4px !important;
    }

    /* Force Chart Title Spacing (Mobile Only) - Comprimido ao máximo */
    .force-print-single-page .chart-title-force-space {
      margin-top: 4px !important;
      padding-top: 4px !important;
      margin-bottom: 4px !important;
      padding-bottom: 2px !important;
      display: block !important;
      clear: both !important;
      font-size: 13px !important;
      line-height: 1.2 !important;
    }

    /* Reduzir espaçamento entre seções ao mínimo (Mobile) */
    .force-print-single-page .px-6.pt-2 {
      padding-top: 2px !important;
      margin-bottom: 2px !important;
    }

    .force-print-single-page .px-6.py-4 {
      padding-top: 2px !important;
      padding-bottom: 2px !important;
      margin-top: 0 !important;
      margin-bottom: 2px !important;
    }

    /* Ajustar gap entre elementos ao mínimo (Mobile) */
    .force-print-single-page .flex-grow.flex.flex-col {
      gap: 2px !important;
    }

    /* Comprimir espaçamento interno do chart-container (Mobile) */
    .force-print-single-page .chart-container {
      margin-top: 2px !important;
      margin-bottom: 4px !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    /* Reduzir header spacing (Mobile) */
    .force-print-single-page header {
      padding-top: 8px !important;
      padding-bottom: 4px !important;
      margin-bottom: 4px !important;
    }

    /* Ajustar footer (Mobile) */
    .force-print-single-page .print-footer-mobile {
      padding-top: 4px !important;
      padding-bottom: 8px !important;
      font-size: 8px !important;
      line-height: 1.2 !important;
    }

    .force-print-single-page .print-footer-content,
    .force-print-single-page .print-footer-text {
      font-size: 8px !important;
      line-height: 1.2 !important;
    }
    
    /* ESCONDE faixas decorativas verdes no mobile */
    .bg-gradient-to-b,
    .bg-gradient-to-t,
    div[class*="bg-gradient"],
    .absolute[class*="bg-gradient"],
    [class*="from-olive"],
    [class*="to-transparent"] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      height: 0 !important;
      width: 0 !important;
      max-height: 0 !important;
      overflow: hidden !important;
    }
    
    /* ESCONDE qualquer div absolute com altura 32 (h-32) que possa ser decoração */
    .absolute.h-32,
    div.absolute[class*="h-32"] {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
    }
  }
  
  /* REGRA GLOBAL PARA PRINT: Esconde gradientes decorativos */
  @media print {
    .bg-gradient-to-b.from-olive,
    .bg-gradient-to-t.from-olive,
    [class*="bg-gradient"][class*="from-olive"],
    .absolute[class*="bg-gradient"] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      height: 0 !important;
      width: 0 !important;
    }
  }
}/**
 * Chart CSS para impressão
 * Consolida todas as regras de gráfico do Recharts, eliminando duplicações
 */

/* ===== FORÇA MÁXIMA: Gráfico SEMPRE visível ===== */
.chart-container {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-height: 320px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.chart-wrapper {
  display: block !important;
  width: 100% !important;
  height: 260px !important;
  min-height: 260px !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.recharts-responsive-container {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.recharts-wrapper {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.recharts-legend-wrapper {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== ULTIMATE FIX: Main Chart SVG Always Visible ===== */
/* Garante que o SVG principal do gráfico seja SEMPRE visível */
.chart-container svg.recharts-surface,
.chart-container .recharts-responsive-container svg.recharts-surface,
.recharts-surface {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  overflow: visible !important;
  position: relative !important;
}

/* FIX ESPECÍFICO CHROME: Força dimensões no wrapper do Recharts */
.chart-container .recharts-wrapper {
  width: 100% !important;
  height: 280px !important;
  min-width: 100% !important;
  min-height: 280px !important;
}

/* FIX ESPECÍFICO CHROME: Garante que o container responsivo tenha altura fixa */
.chart-container .recharts-responsive-container {
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  width: 99% !important;
}

/* FIX CHROME: Força SVG a ter largura calculada */
.chart-container .recharts-responsive-container > div {
  width: 100% !important;
  height: 100% !important;
}

/* FIX CHROME: Gráfico de Evolução no Dossiê */
.dossier-print-root .recharts-responsive-container,
.dossier-print-root .recharts-responsive-container > div {
  display: block !important;
  width: 99% !important;
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
}

.dossier-print-root .recharts-wrapper {
  display: block !important;
  width: 100% !important;
  height: 320px !important;
  min-height: 320px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.dossier-print-root svg.recharts-surface {
  display: block !important;
  width: 100% !important;
  height: 320px !important;
  min-height: 320px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* FORÇA MÁXIMA: Todos os elementos do LineChart visíveis */
.dossier-print-root .recharts-line,
.dossier-print-root .recharts-line-curve,
.dossier-print-root .recharts-line-dots,
.dossier-print-root .recharts-cartesian-grid,
.dossier-print-root .recharts-xAxis,
.dossier-print-root .recharts-yAxis {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Garante que SVGs grandes (gráfico principal) sejam visíveis */
.chart-container svg[width]:not([width="9"]):not([width="10"]):not([width="11"]):not([width="12"]),
.chart-container svg[width="746"],
.chart-container svg[width="800"],
.chart-container svg[width="100%"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* Esta regra garante que o gráfico seja SEMPRE visível na aplicação normal */
.chart-container {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 300px !important;
}

.chart-container .chart-wrapper {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 260px !important;
}

.chart-container .recharts-responsive-container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 260px !important;
  min-height: 260px !important;
}

.chart-container svg.recharts-surface {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 260px !important;
}



/* ===== CRITICAL: Chart Always Visible on Screen (Not Print) ===== */
@media screen {

  .chart-container,
  .chart-container[data-chart-converted="true"],
  .chart-wrapper,
  .chart-container .chart-wrapper,
  .chart-container .recharts-responsive-container,
  .chart-container .recharts-wrapper,
  .chart-container svg,
  .chart-container svg.recharts-surface,
  .recharts-responsive-container,
  .recharts-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Garante que ResponsiveContainer está visível */
  .chart-container .recharts-responsive-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
  }

  /* Garante que SVG está visível */
  .chart-container svg.recharts-surface {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 260px !important;
  }
}



/* CRITICAL: Garante que gráfico fique visível na aplicação normal mesmo quando data-chart-converted está presente */
.chart-container[data-chart-converted="true"],
.chart-container[data-chart-converted="true"] .chart-wrapper,
.chart-container[data-chart-converted="true"] .recharts-responsive-container,
.chart-container[data-chart-converted="true"] .recharts-wrapper,
.chart-container[data-chart-converted="true"] svg,
.chart-container[data-chart-converted="true"] svg.recharts-surface {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.chart-container,
.chart-wrapper,
.recharts-responsive-container,
.recharts-wrapper,
.chart-container svg,
svg.recharts-surface {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== Mobile Screen Rules ===== */
@media (max-width: 767px) {
  .chart-container {
    min-height: 320px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding-bottom: 20px !important;
  }

  .chart-container .chart-wrapper,
  .chart-container .recharts-responsive-container {
    display: block !important;
    visibility: visible !important;
  }

  .chart-wrapper {
    min-height: 260px !important;
    height: 260px !important;
    display: block !important;
    visibility: visible !important;
  }

  .recharts-responsive-container {
    min-height: 260px !important;
    height: 260px !important;
    display: block !important;
    visibility: visible !important;
  }
  
  /* Garante que a legenda seja totalmente visível no mobile */
  .chart-container .recharts-legend-wrapper {
    position: relative !important;
    width: 100% !important;
    margin-top: 12px !important;
    padding: 0 8px !important;
    overflow: visible !important;
  }
  
  .chart-container .recharts-legend-wrapper ul {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* ===== Mobile Print Rules ===== */
@media print and (max-width: 767px) {
  .chart-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  /* Esconde faixas decorativas verdes no mobile */
  .bg-gradient-to-b,
  .bg-gradient-to-t,
  div[class*="bg-gradient"],
  .dossier-print-root .bg-gradient-to-b,
  .dossier-print-root .bg-gradient-to-t {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }
}

/* ===== Print Rules (All Devices) ===== */
@media print {

  /* Chart Container */
  .chart-container {
    height: 300px !important;
    max-height: 300px !important;
    min-height: 300px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Chart Inner Elements - Full Width */
  .chart-container .chart-wrapper,
  .chart-container .recharts-responsive-container,
  .chart-container .recharts-surface,
  .chart-container svg.recharts-surface {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .chart-container .recharts-responsive-container {
    height: 260px !important;
    min-height: 260px !important;
  }
  
  .chart-container svg.recharts-surface {
    height: 260px !important;
    min-height: 260px !important;
  }
}

/* CRITICAL: Never hide chart wrapper in print mode */
.chart-container .chart-wrapper[style*="display: none"] {
  display: block !important;
}

/* Chart Wrapper */
.chart-wrapper {
  height: 260px !important;
  min-height: 260px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

/* Recharts Responsive Container */
.recharts-responsive-container {
  height: 260px !important;
  min-height: 260px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  overflow: visible !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* CRITICAL: Ensure all SVG elements are visible */
.chart-container svg,
.chart-container .recharts-wrapper svg,
.chart-container .recharts-surface,
.chart-container svg.recharts-surface,
svg.recharts-surface {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* CRITICAL: Ensure recharts wrapper is visible */
.chart-container .recharts-wrapper,
.recharts-wrapper {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== Legend Container ===== */
.chart-container .recharts-legend-wrapper,
.recharts-legend-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  font-size: 11px !important;
  gap: 20px !important;
  padding-top: 0 !important;
  padding-bottom: 15px !important;
  margin-bottom: 0 !important;
}

/* ===== Legend UL (inner container) ===== */
.recharts-legend-wrapper ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== Legend Items ===== */
.recharts-legend-item {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== Legend Icon Container ===== */
.recharts-legend-item-icon {
  width: var(--chart-legend-icon-size) !important;
  height: var(--chart-legend-icon-size) !important;
  max-width: var(--chart-legend-icon-size) !important;
  max-height: var(--chart-legend-icon-size) !important;
  min-width: var(--chart-legend-icon-size) !important;
  min-height: var(--chart-legend-icon-size) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

/* ===== Legend SVG Icons (Consolidated Rules) ===== */
.recharts-legend-item svg,
.recharts-legend-item-icon svg,
.legend-icon-svg,
.recharts-legend-wrapper svg,
.chart-container .recharts-legend-item svg,
.chart-container .recharts-legend-wrapper svg {
  width: var(--chart-legend-icon-size) !important;
  height: var(--chart-legend-icon-size) !important;
  max-width: var(--chart-legend-icon-size) !important;
  max-height: var(--chart-legend-icon-size) !important;
  min-width: var(--chart-legend-icon-size) !important;
  min-height: var(--chart-legend-icon-size) !important;
  transform: none !important;
  transform-origin: center !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  display: inline-block !important;
}

/* ===== Legend Circle Elements ===== */
/* Note: Circle attributes (r, cx, cy) must be set via JavaScript */
/* CSS cannot override SVG attributes - only styles */
.recharts-legend-item svg circle,
.legend-icon-svg circle,
.recharts-legend-wrapper svg circle,
.chart-container .recharts-legend-wrapper svg circle {
  transform: none !important;
}

/* ===== EXCEÇÃO: Custom Legend Dot (sobrescreve regras gerais) ===== */
.chart-container .recharts-legend-wrapper .chart-legend-container .chart-legend-dot,
.recharts-legend-wrapper .chart-legend-container .chart-legend-dot,
.chart-legend-container .chart-legend-dot,
.chart-legend-dot {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.chart-container:not(:has(img[data-chart-image="true"])) .recharts-responsive-container {
  display: block !important;
}

/* CRITICAL FIX: Force SVG to have explicit dimensions for PDF rendering */
@media print {
  .chart-container .recharts-responsive-container svg.recharts-surface {
    width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Ensure SVG has viewBox if missing */
  .chart-container svg.recharts-surface:not([viewBox]) {
    width: 100% !important;
    height: 260px !important;
  }
  
  /* Força visibilidade do gráfico no Dossier */
  .dossier-print-root .chart-container,
  .dossier-print-root .chart-wrapper,
  .dossier-print-root .recharts-responsive-container,
  .dossier-print-root svg.recharts-surface {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .dossier-print-root .chart-container {
    height: 300px !important;
    min-height: 300px !important;
  }
  
  .dossier-print-root .recharts-responsive-container {
    height: 260px !important;
    min-height: 260px !important;
  }
  
  .dossier-print-root svg.recharts-surface {
    height: 260px !important;
    min-height: 260px !important;
  }
}

/* ULTIMATE FIX: Force SVG visibility - override any inline styles */
.chart-container .recharts-responsive-container[style*="display: none"],
.chart-container .recharts-responsive-container[style*="visibility: hidden"],
.chart-container .recharts-responsive-container[style*="opacity: 0"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force SVG element itself to be visible */
.chart-container svg.recharts-surface[style*="display: none"],
.chart-container svg.recharts-surface[style*="visibility: hidden"],
.chart-container svg.recharts-surface[style*="opacity: 0"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ULTIMATE FIX: Force SVG to render in PDF - override everything */
.chart-container .recharts-responsive-container,
.chart-container .chart-wrapper .recharts-responsive-container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  overflow: visible !important;
}

.chart-container svg.recharts-surface {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* Hide any PNG images that might have been created */
.chart-container img[data-chart-image="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* CRITICAL: Conditionally handle Chart Image vs SVG */
/* Fallback: If image exists (Mobile), show it and hide SVG */
.chart-container img[data-chart-image="true"],
.chart-container[data-chart-converted="true"] img[data-chart-image="true"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 320px !important;
  max-height: 320px !important;
  object-fit: contain !important;
  position: relative !important;
  left: auto !important;
  z-index: 20 !important;
}

/* When image is present, HIDE the SVG/Recharts containers. Only when img exists (mobile fallback). */
/* Do NOT hide by data-chart-converted alone: desktop flow sets it without adding img, so SVG must stay visible. */
.chart-container:has(img[data-chart-image="true"]) .recharts-responsive-container,
.chart-container:has(img[data-chart-image="true"]) .chart-wrapper .recharts-responsive-container,
.chart-container:has(img[data-chart-image="true"]) svg.recharts-surface {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* CRITICAL: Garante que gráfico e legenda sejam sempre visíveis na aplicação normal */
@media screen {
  .chart-container {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 300px !important;
  }

  .chart-container .chart-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 260px !important;
  }

  .chart-container .recharts-responsive-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 260px !important;
  }

  .chart-container svg.recharts-surface {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 260px !important;
  }

  .chart-container .recharts-legend-wrapper {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
  }

  .chart-container .recharts-legend-item {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .chart-container .recharts-legend-item-icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* Garante que o eixo X fique dentro do gráfico */
.chart-container .recharts-cartesian-axis {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

.chart-container h3 {
  position: relative !important;
  order: 1 !important;
  margin-bottom: 1rem !important;
  width: 100% !important;
  text-align: center !important;
}

.chart-container .chart-wrapper {
  position: relative !important;
  order: 2 !important;
  width: 100% !important;
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.chart-container .recharts-responsive-container {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.chart-container .recharts-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.chart-container svg.recharts-surface {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

/* Garante que o eixo X fique dentro do gráfico */
.chart-container .recharts-cartesian-axis-x {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* Garante que a legenda fique dentro do gráfico */
.chart-container .recharts-legend-wrapper {
  position: relative !important;
  width: 100% !important;
  margin-top: 8px !important;
  max-width: 100% !important;
}

/* Garante que todos os elementos do Recharts fiquem dentro do container */
.chart-container .recharts-layer {
  position: relative !important;
}

/* CRITICAL: Garante que gráfico seja visível e bem posicionado na aplicação */
@media screen {
  .chart-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    min-height: 300px !important;
  }

  .chart-container .chart-wrapper {
    width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    position: relative !important;
    overflow: visible !important;
  }

  .chart-container .recharts-responsive-container {
    width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
    position: relative !important;
  }

  .chart-container svg.recharts-surface {
    width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Garante que todos os elementos do Recharts sejam visíveis */
  .chart-container .recharts-wrapper,
  .chart-container .recharts-layer,
  .chart-container .recharts-cartesian-axis,
  .chart-container .recharts-legend-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* CRITICAL: Corrige SVG principal que está sendo renderizado com largura 0 */
@media screen {
  .chart-container svg.recharts-surface {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
  }

  /* Força largura específica para SVGs grandes (gráfico principal) */
  .chart-container .recharts-responsive-container svg.recharts-surface {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Garante que o wrapper do Recharts também tenha largura correta */
  .chart-container .recharts-wrapper {
    width: 100% !important;
    min-width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
  }
}

/* CRITICAL: Garante que SVG principal seja totalmente visível e não cortado */
@media screen {
  .chart-container .recharts-responsive-container {
    overflow: visible !important;
  }

  .chart-container .recharts-wrapper {
    overflow: visible !important;
  }

  .chart-container svg.recharts-surface {
    overflow: visible !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  }

  /* Garante que todos os elementos dentro do SVG sejam visíveis */
  .chart-container svg.recharts-surface * {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Garante que o chart-wrapper não corte o conteúdo */
  .chart-container .chart-wrapper {
    overflow: visible !important;
  }
}

/* CRITICAL: Corrige posicionamento do SVG para garantir que fique no lugar correto */
@media screen {
  .chart-container .recharts-responsive-container {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
  }

  .chart-container .recharts-wrapper {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .chart-container svg.recharts-surface {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
  }

  /* Garante que não há elementos sobrepondo o SVG */
  .chart-container .chart-wrapper {
    position: relative !important;
    z-index: 1 !important;
  }

  .chart-container .recharts-responsive-container {
    z-index: 2 !important;
  }

  .chart-container svg.recharts-surface {
    z-index: 3 !important;
  }
}


/* SOLUÇÃO DEFINITIVA: Força clip-path: none em TODOS os elementos do gráfico */
.chart-container svg *,
.chart-container svg.recharts-surface *,
.chart-container .recharts-responsive-container * {
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* Remove clipPath completamente via CSS */
.chart-container svg defs clipPath {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
}

/* Força elementos do gráfico a serem visíveis */
.chart-container svg .recharts-bar,
.chart-container svg .recharts-bar-rectangle,
.chart-container svg .recharts-line,
.chart-container svg .recharts-line-curve,
.chart-container svg path[d],
.chart-container svg rect[width][height] {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== PÁGINAS DE AVALIAÇÃO DO DOSSIÊ: Gráfico acima, imagens abaixo (sem sobreposição) ===== */
/* Só o wrapper externo usa overflow: hidden para não sobrepor o Registro Visual; internos ficam visible para o Recharts renderizar */
.dossier-print-root .dossier-evaluation-chart {
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
  contain: layout paint !important;
}

.dossier-print-root .dossier-evaluation-chart .chart-container,
.dossier-print-root .dossier-evaluation-chart .chart-wrapper,
.dossier-print-root .dossier-evaluation-chart .recharts-responsive-container,
.dossier-print-root .dossier-evaluation-chart .recharts-wrapper {
  overflow: visible !important;
  position: relative !important;
}

.dossier-print-root .dossier-registro-visual {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 24px !important;
}

@media print {
  /* Bloco do gráfico no dossiê: altura suficiente para o chart + título; overflow só no wrapper externo */
  .dossier-print-root .dossier-evaluation-chart {
    overflow: hidden !important;
    max-height: 420px !important;
  }

  .dossier-print-root .dossier-evaluation-chart .chart-container {
    max-height: 380px !important;
    min-height: 320px !important;
    overflow: visible !important;
  }

  .dossier-print-root .dossier-evaluation-chart .chart-wrapper {
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
    overflow: visible !important;
  }

  .dossier-print-root .dossier-evaluation-chart .recharts-responsive-container,
  .dossier-print-root .dossier-evaluation-chart .recharts-wrapper {
    overflow: visible !important;
    height: 320px !important;
    min-height: 320px !important;
  }

  /* No dossiê, título do gráfico sem margem grande para não empurrar o chart */
  .dossier-print-root .dossier-evaluation-chart .chart-container h3.chart-title-force-space {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Registro Visual sempre abaixo do gráfico, sem sobreposição */
  .dossier-print-root .dossier-registro-visual {
    break-before: avoid !important;
    page-break-before: avoid !important;
  }

  /* Limitar altura das fotos nas páginas de avaliação */
  .dossier-print-root .grid.grid-cols-2 > div {
    height: 280px !important;
    max-height: 280px !important;
  }

  .dossier-print-root .grid.grid-cols-2 img {
    height: 280px !important;
    max-height: 280px !important;
    object-fit: cover !important;
  }
}

/* ===== CUSTOM LEGEND COMPONENT - PRINT STYLES ===== */
@media print {
  /* Container da legenda customizada */
  .chart-legend-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 32px !important;
    width: 100% !important;
    padding: 8px 0 !important;
    margin-bottom: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Item individual da legenda */
  .chart-legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Bolinha colorida da legenda - DIV com box-shadow para garantir visibilidade no PDF */
  /* Seletor muito específico para sobrescrever regras gerais */
  .chart-container .recharts-legend-wrapper .chart-legend-container .chart-legend-dot,
  .recharts-legend-wrapper .chart-legend-container .chart-legend-dot,
  .chart-legend-container .chart-legend-dot,
  .chart-legend-dot {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    box-shadow: unset !important;
  }

  /* Texto da legenda */
  .chart-legend-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #57534e !important;
    white-space: nowrap !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Título do gráfico com mais espaço das fotos */
  .chart-container h3.chart-title-force-space {
    margin-top: 140px !important;
    padding-top: 20px !important;
  }

  /* GRÁFICO MAIOR E MAIS PRÓXIMO DO RODAPÉ */
  .chart-container {
    height: auto !important;
    max-height: none !important;
    min-height: 380px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .chart-container .chart-wrapper {
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
  }

  .chart-container .recharts-responsive-container {
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
  }

  .chart-container svg.recharts-surface {
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
  }

  .chart-container .recharts-wrapper {
    height: 340px !important;
    min-height: 340px !important;
  }
}

/* ===== DESKTOP PRINT: Gráfico maior para melhor visualização ===== */
@media print and (min-width: 768px) {
  .chart-container {
    min-height: 400px !important;
    height: auto !important;
  }

  .chart-container .chart-wrapper {
    height: 380px !important;
    min-height: 380px !important;
  }

  .chart-container .recharts-responsive-container,
  .chart-container svg.recharts-surface,
  .chart-container .recharts-wrapper {
    height: 380px !important;
    min-height: 380px !important;
  }
}

/* ===== MOBILE PRINT: Gráfico menor para caber na página ===== */
@media print and (max-width: 767px) {
  /* Container do gráfico - altura menor para mobile */
  .chart-container {
    min-height: 200px !important;
    max-height: 220px !important;
    height: 200px !important;
  }

  /* Título com menos margem no mobile */
  .chart-container h3.chart-title-force-space {
    margin-top: 8px !important;
    padding-top: 4px !important;
  }

  /* Wrapper e containers internos - altura 180px para mobile */
  .chart-container .chart-wrapper {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
  }

  .chart-container .recharts-responsive-container {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
  }

  .chart-container svg.recharts-surface {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
  }

  .chart-container .recharts-wrapper {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
  }
}
/**
 * Photos CSS para impressão
 * Consolida todas as regras de grade de fotos, eliminando duplicações
 */

/* ===== Photo Grid Container ===== */
@media print {
  /* Grid Container Layout */
  .photo-grid-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-template-columns: var(--photo-column-width) var(--photo-column-width) !important;
    gap: var(--photo-grid-gap) !important;
    column-gap: var(--photo-grid-gap) !important;
    row-gap: var(--photo-grid-gap) !important;
    height: var(--photo-cell-height) !important;
    min-height: var(--photo-cell-height) !important;
    max-height: var(--photo-cell-height) !important;
    box-sizing: border-box !important;
  }

  /* Override any gap utilities */
  .photo-grid-container[class*="gap"],
  .photo-grid-container.grid {
    gap: var(--photo-grid-gap) !important;
    column-gap: var(--photo-grid-gap) !important;
    row-gap: var(--photo-grid-gap) !important;
  }

  /* Grid Children */
  .photo-grid-container > div {
    display: contents !important;
  }

  /* Cells take exactly 49% of container width */
  .photo-grid-container[style*="49%"] .photo-cell,
  .photo-grid-container .photo-cell {
    grid-column: span 1 !important;
  }

  /* Remove padding from parent containers */
  .photo-grid-container,
  .photo-grid-container + *,
  div:has(> .photo-grid-container),
  div:has(> div > .photo-grid-container),
  div:has(> div > div > .photo-grid-container),
  main:has(.photo-grid-container),
  main > div:has(.photo-grid-container),
  main > div > div:has(.photo-grid-container) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ===== Photo Cells ===== */
.photo-cell {
  display: block !important;
  overflow: hidden !important;
  border-radius: var(--photo-border-radius) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

@media print {
  /* Cell dimensions - fills 100% of grid column (which is 49% of container) */
  .photo-grid-container[style*="49%"] .photo-cell,
  .photo-grid-container .photo-cell,
  .photo-cell:has(img) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: var(--photo-cell-height) !important;
    min-height: var(--photo-cell-height) !important;
    max-height: var(--photo-cell-height) !important;
    box-sizing: border-box !important;
    border: none !important;
    border-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Single image cells (col-span-2) */
  .photo-cell.col-span-2,
  .photo-cell.col-span-2:has(img) {
    height: var(--photo-cell-height) !important;
    min-height: var(--photo-cell-height) !important;
    max-height: var(--photo-cell-height) !important;
  }

  /* Hide empty cells in print */
  .photo-cell:not(:has(img)):not(:has(.text-center)) {
    display: none !important;
  }
}

/* ===== Photo Labels ===== */
.photo-cell > div[class*="absolute"],
.photo-cell div.absolute.bottom-4.right-4,
.photo-cell div[class*="bottom-4"][class*="right-4"] {
  position: absolute !important;
  bottom: 4px !important;
  right: 4px !important;
  left: auto !important;
  top: auto !important;
  z-index: var(--print-label-z-index) !important;
  margin: 0 !important;
  padding: 2px 6px !important;
  font-size: var(--photo-label-font-size) !important;
  line-height: 1.2 !important;
  transform: none !important;
}

/* ===== Images and Canvas ===== */
.photo-cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--photo-border-radius) !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.photo-cell canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: var(--photo-border-radius) !important;
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

@media print {
  /* Image dimensions in print */
  .photo-cell img,
  .photo-cell canvas {
    height: var(--photo-cell-height) !important;
    min-height: var(--photo-cell-height) !important;
    max-height: var(--photo-cell-height) !important;
    width: 100% !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
  }

  /* Single image - preserve aspect ratio */
  .photo-cell.col-span-2 img,
  .photo-cell.col-span-2 canvas,
  .photo-cell:has(img):only-of-type img,
  .photo-cell:has(img):only-of-type canvas {
    height: var(--photo-cell-height) !important;
    min-height: var(--photo-cell-height) !important;
    max-height: var(--photo-cell-height) !important;
    object-fit: contain !important;
  }

  /* Data URL images (mobile conversion) */
  .photo-cell img[src^="data:"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
/**
 * Footer CSS para impressão
 * Consolida regras de footer e corrige media queries aninhados
 */

@media print {
  /* ===== Footer Positioning (Desktop & Mobile) ===== */
  footer,
  main > div:last-child,
  [class*="mt-auto"],
  .print-footer-mobile,
  div[class*="print-footer-mobile"] {
    margin-top: auto !important;
    padding: 3px 6px !important;
    padding-bottom: 8px !important;
    font-size: var(--print-footer-font-size) !important;
    line-height: var(--print-footer-line-height) !important;
    flex-shrink: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: auto !important;
    position: relative !important;
    z-index: var(--print-footer-z-index) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ===== Footer Borders ===== */
  footer > div,
  footer [class*="border-t"],
  [class*="mt-auto"] [class*="border-t"],
  [class*="mt-auto"] > div,
  .print-footer-content {
    padding-top: 2px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ===== Footer Text ===== */
  [class*="mt-auto"] span,
  .print-footer-text,
  .print-footer-content span {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    width: auto !important;
  }

  /* ===== CRITICAL: Ensure footer container is visible ===== */
  div:has(.print-footer-content),
  div:has(.print-footer-text) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: auto !important;
    padding-bottom: 8px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* ===== Ensure main container allows footer space ===== */
  main {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
  }

  main > div:last-child {
    margin-top: auto !important;
  }
}

/* ===== Mobile-Specific Footer Rules ===== */
@media print and (max-width: 768px) {
  footer,
  main > div:last-child,
  [class*="mt-auto"],
  div[class*="mt-auto"],
  .print-footer-mobile {
    height: auto !important;
    min-height: 20px !important;
  }

  [class*="mt-auto"] [class*="border-t"],
  [class*="mt-auto"] > div,
  .print-footer-content {
    width: 100% !important;
  }
}