/* Survey Reports - Custom Styles */

/* Animation for fade in/out notifications */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

/* Print styles for reports */
@media print {
  /* Hide elements we don't want to print */
  button, 
  [data-controller="report"],
  .no-print {
    display: none !important;
  }
  
  /* Ensure all content is visible */
  .container {
    width: 100% !important;
    max-width: none !important;
  }
  
  /* Make sure background colors print */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* Add page breaks before major sections */
  .page-break-before {
    page-break-before: always;
  }
  
  /* Expand all collapsed content for printing */
  .print-expand {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* Enhanced chart styling */
.chart-container {
  position: relative;
  min-height: 500px;
  max-height: 80vh; /* Limit height to 80% of viewport height */
  width: 100%;
  overflow-y: auto; /* Allow scrolling if content exceeds max-height */
}

.sentiment-chart-container {
  position: relative;
  height: 16rem; /* Fixed height */
  width: 100%;
  overflow: hidden; /* Prevent unwanted scrolling */
}

/* Custom tooltip styles for charts */
.custom-chart-tooltip {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 4px;
  padding: 10px;
  color: #333;
  font-size: 14px;
  pointer-events: none;
}

/* Enhanced tab content styling */
/* [data-tab-content] {
  transition: opacity 0.2s ease-in-out;
  height: 100%;
} */

/* Ensure chart tab content fills the container and animates nicely */
[role="tabpanel"] {
  animation: fadeIn 0.3s ease forwards;
  height: 100%;
}

/* Response highlight styles */
.response-highlight {
  background: rgba(59, 130, 246, 0.1);
  border-left: 3px solid rgba(59, 130, 246, 1);
}

/* Text response styling */
.text-response-container {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 10px;
}

.text-response-container::-webkit-scrollbar {
  width: 6px;
}

.text-response-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.text-response-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

.text-response-container::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}