/*
 * 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.
 */

/* Print styles for professional document printing */
@media print {
  /* Page setup with smaller margins */
  @page {
    margin: 0.5in 0.6in 0.7in 0.6in;
    size: letter;
    
    /* Header with document title and organization */
    @top-center {
      content: string(document-title);
      font-family: system-ui, sans-serif;
      font-size: 10pt;
      color: #4b5563;
      margin-bottom: 0.2in;
    }
    
    /* Footer with page numbers and date */
    @bottom-right {
      content: "Page " counter(page) " of " counter(pages);
      font-family: system-ui, sans-serif;
      font-size: 9pt;
      color: #6b7280;
    }
    
    @bottom-left {
      content: "Generated " string(print-date);
      font-family: system-ui, sans-serif;
      font-size: 9pt;
      color: #6b7280;
    }
  }
  
  /* Reset body and main containers */
  body {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11pt !important;
    line-height: 1.4 !important;
    color: black !important;
    background: white !important;
  }
  
  main {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    display: block !important;
  }
  
  /* Hide all navigation and UI chrome */
  nav,
  .print\:hidden,
  button:not(.print-show),
  .btn,
  .button,
  .action-bar,
  .navbar,
  .sidebar,
  .notification,
  .alert:not(.print-show),
  [data-turbo-permanent],
  .fixed,
  .sticky,
  .dropdown,
  .modal,
  .overlay {
    display: none !important;
  }
  
  /* Hide interactive elements */
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .hover\:bg-gray-50,
  .hover\:bg-gray-100,
  .hover\:text-blue-600,
  .cursor-pointer,
  .transition-colors,
  [data-action],
  [data-controller] {
    pointer-events: none !important;
  }
  
  /* Typography optimization for print */
  h1 {
    font-size: 18pt !important;
    line-height: 1.2 !important;
    margin: 0 0 12pt 0 !important;
    font-weight: bold !important;
    color: black !important;
    page-break-after: avoid !important;
  }
  
  h2 {
    font-size: 14pt !important;
    line-height: 1.3 !important;
    margin: 16pt 0 8pt 0 !important;
    font-weight: bold !important;
    color: black !important;
    page-break-after: avoid !important;
  }
  
  h3 {
    font-size: 12pt !important;
    line-height: 1.3 !important;
    margin: 12pt 0 6pt 0 !important;
    font-weight: bold !important;
    color: black !important;
    page-break-after: avoid !important;
  }
  
  p {
    margin: 0 0 8pt 0 !important;
    orphans: 3;
    widows: 3;
  }
  
  /* Smart page breaks */
  .print\:break-inside-avoid,
  .user-story,
  .requirement,
  .spec-section,
  .completeness-gap,
  section {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  
  .print\:break-after-page,
  .spec-group {
    page-break-after: always !important;
    break-after: page !important;
  }
  
  /* Compact grid layouts */
  .grid {
    display: block !important;
  }
  
  .grid > div {
    display: inline-block !important;
    width: 48% !important;
    margin: 0 1% 8pt 0 !important;
    vertical-align: top !important;
    break-inside: avoid !important;
  }
  
  /* Table optimizations */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 10pt !important;
  }
  
  th, td {
    border: 1px solid #d1d5db !important;
    padding: 4pt 6pt !important;
    text-align: left !important;
  }
  
  thead {
    display: table-header-group !important;
  }
  
  /* Link handling */
  a {
    color: black !important;
    text-decoration: none !important;
  }
  
  /* Show URLs for important links */
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }
  
  /* Utility classes */
  .print\:hidden { display: none !important; }
  .print\:block { display: block !important; }
  .print\:inline { display: inline !important; }
  .print\:w-full { width: 100% !important; }
  .print\:max-w-none { max-width: none !important; }
  .print\:text-black { color: black !important; }
  .print\:bg-white { background-color: white !important; }
  .print\:bg-gray-200 { background-color: #e5e7eb !important; }
  .print\:border { border-width: 1px !important; }
  .print\:border-gray-300 { border-color: #d1d5db !important; }
  .print\:border-gray-400 { border-color: #9ca3af !important; }
  .print\:no-underline { text-decoration: none !important; }
  
  .print\:mb-2 { margin-bottom: 4pt !important; }
  .print\:mb-4 { margin-bottom: 8pt !important; }
  .print\:mb-6 { margin-bottom: 12pt !important; }
  .print\:mb-8 { margin-bottom: 16pt !important; }
  .print\:p-3 { padding: 6pt !important; }
  .print\:p-4 { padding: 8pt !important; }
  
  .print\:text-sm { font-size: 10pt !important; }
  .print\:text-xs { font-size: 9pt !important; }
  .print\:text-xl { font-size: 12pt !important; }
  .print\:text-2xl { font-size: 14pt !important; }
  
  /* Color adjustments for print */
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  
  /* Mermaid diagram optimizations */
  .mermaid-diagram,
  .type-graph-container,
  .ui-paths-graph-container {
    background: white !important;
    border: 1px solid #d1d5db !important;
    page-break-inside: avoid !important;
  }
  
  .mermaid-diagram svg,
  .type-graph-container svg,
  .ui-paths-graph-container svg {
    max-width: 100% !important;
    height: auto !important;
    background: white !important;
  }
  
  /* Tree structure optimizations */
  .ui-element-tree {
    font-size: 10pt !important;
  }
  
  .tree-item {
    padding: 2pt 4pt !important;
    border: none !important;
  }
  
  .tree-children {
    padding-left: 16pt !important;
  }
  
  /* Compact spacing for sections */
  section {
    margin-bottom: 16pt !important;
  }
  
  .completeness-section,
  .user-stories-section {
    margin-bottom: 20pt !important;
  }
  
  /* Multi-column layouts for lists */
  .completeness-gaps,
  .properties-list,
  .personas-grid > div,
  .actions-grid > div {
    break-inside: avoid !important;
    margin-bottom: 8pt !important;
  }
  
  /* Improve content density */
  .space-y-4 > * + * {
    margin-top: 8pt !important;
  }
  
  .space-y-6 > * + * {
    margin-top: 12pt !important;
  }
}