/* print.css - Print-specific styles */

@media print {
  /* Combine all @page rules into a single block for clarity and compliance.
    This fixes the 'Expected declaration but found @bottom-right' warning.
*/
  @page {
    margin: 1cm;
    size: portrait; /* Default to portrait orientation */

    /* Add page numbers to the bottom right of every page */
    @bottom-right {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 10pt; /* Optional: adds a font size for legibility */
    }
  }

  /* Hide non-essential elements */
  header,
  footer,
  nav,
  .sidebar,
  .contacts-sidebar,
  button,
  .filter-button,
  .chart-action-button,
  .action-button,
  .message-composer,
  .conversation-actions,
  .overlay,
  .archetype-popout,
  .current-role-context,
  .editor-tabs,
  .editor-footer,
  form button,
  .form-actions,
  .add-field-button,
  .field-actions {
    display: none !important;
  }

  /* Basic resets for printing */
  body {
    background: white !important;
    color: black !important;
    font-family: serif !important; /* Serif fonts are more readable in print */
    font-size: 12pt !important;
    line-height: 1.3 !important;
  }

  /* Better link display in print */
  a {
    text-decoration: underline !important;
    color: #000 !important;
  }

  /* Show URLs for links (Tufte style) */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 90%;
    color: #333 !important;
    font-style: italic;
  }

  /* Don't show URLs for internal or JavaScript links */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }

  /* Layout adjustments */
  .container,
  .dashboard-container,
  .main-container,
  .conversation-container,
  .dashboard,
  .communications-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    height: auto !important;
  }

  .content,
  .main-content,
  .conversation-view,
  .message-thread,
  .editor-content {
    width: 100% !important;
    overflow: visible !important;
    height: auto !important;
    display: block !important;
  }

  /* Make sure whites are white */
  .feature-card,
  .step-card,
  .user-card,
  .testimonial-card,
  .right-card,
  .intro-box,
  .chart,
  .conversation-example {
    background-color: white !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  /* Ensure elements don't break across pages */
  h1, h2, h3, h4, h5, h6,
  .chart-container,
  .summary-cards,
  .feature-card,
  .step-card,
  .data-table,
  .message,
  .right-card,
  .insight-card,
  img,
  table,
  figure {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Start new headings on a new page if they're near the bottom */
  h1, h2, h3 {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  /* Don't break inside list items or table cells */
  li, tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Force backgrounds to print for certain elements (may not work in all browsers) */
  .chart,
  .pie-chart,
  .chart-bar,
  .legend-color,
  .badge,
  .contact-avatar,
  .message.professional .message-content,
  .message.individual .message-content,
  .progress-bar,
  .step-dot {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Make text black for better contrast */
  .text-muted,
  .text-light,
  .card-label,
  .field-description,
  .last-activity,
  .message-metadata,
  .metadata-label,
  .field-detail {
    color: #333 !important;
  }

  /* Improve table readability */
  .data-table,
  .stages-table,
  .comparison-table {
    border-collapse: collapse !important;
    width: 100% !important;
  }

  .data-table th,
  .data-table td,
  .stages-table th,
  .stages-table td,
  .comparison-table th,
  .comparison-table td {
    border: 1px solid #999 !important;
    padding: 8pt !important;
  }

  /* Don't let card footers get cut off */
  .right-card {
    padding-bottom: 2cm !important;
    min-height: 0 !important;
  }

  .right-card-footer {
    position: static !important;
    margin-top: 1cm !important;
  }

  /* Fix grid displays */
  .grid,
  .feature-grid,
  .step-grid,
  .user-grid,
  .testimonial-grid,
  .rights-container,
  .insights-grid,
  .summary-cards {
    display: block !important;
  }

  .grid > *,
  .feature-grid > *,
  .step-grid > *,
  .user-grid > *,
  .testimonial-grid > *,
  .rights-container > *,
  .insights-grid > *,
  .summary-cards > * {
    margin-bottom: 1cm !important;
  }

  /* Make sure charts still look good */
  .chart {
    height: auto !important;
    min-height: 300pt !important;
    border: 1px solid #ccc !important;
  }

  /* Fix messagess display */
  .message {
    border: 1px solid #ccc !important;
    margin: 10pt 0 !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* Remove transformations on hover to prevent weird print artifacts */
  .feature-card:hover,
  .step-card:hover,
  .user-card:hover {
    transform: none !important;
  }
}