/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
@import "tailwindcss";

/* Classes dinâmicas de cor de plano ficam listadas em
   app/views/shared/_tailwind_safelist.html.erb pra Tailwind 4 detectar. */

/* Confirm modal animation */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Mobile sidebar ────────────────────────────────────────── */
/* Overlay */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.2s;
}
.mobile-overlay.is-open {
  opacity: 1;
}

/* Mobile-only rules: hide sidebar, show hamburger */
@media (max-width: 767px) {
  .mobile-sidebar {
    position: fixed !important;
    top: 57px;
    left: 0;
    bottom: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
  }
  .mobile-sidebar.is-open {
    transform: translateX(0);
  }
  .mobile-hamburger { display: flex !important; }
}

/* Desktop: hamburger is always hidden */
@media (min-width: 768px) {
  .mobile-hamburger { display: none !important; }
  .mobile-overlay { display: none !important; }
}

/* ── Print seletivo do Resultado da Avaliação ─────────────── */
/* Ativado via body class por print_section_controller.js. Usa @media print
   para não afetar visualização normal. Modo "full" não oculta nada. */
@media print {
  body.print-mode-scores .js-section-belle,
  body.print-mode-scores .js-section-pdi { display: none !important; }
  body.print-mode-belle  .js-section-scores,
  body.print-mode-belle  .js-section-pdi { display: none !important; }

  /* Mantém o bloco do radar numa página só — evita o título na pág 1 e gráfico
     cortado na pág 2. */
  .js-radar-block {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .js-radar-block canvas {
    /* Largura maior que o container comprime as labels. Dá folga vertical
       pra elas respirarem sem cortar. */
    max-height: 680px !important;
    width: 100% !important;
    height: auto !important;
  }
}