@media print {
  body * {
    visibility: hidden;
    background-color: white !important;
    color: black !important;
    box-shadow: none !important;
    border: none !important;
    text-shadow: none !important;
  }

  .printable-area, .printable-area * {
    visibility: visible;
  }
  
  .printable-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
    font-size: 12pt;
  }

  header,
  footer,
  nav,
  aside,
  .no-print,
  button,
  input[type="button"],
  input[type="submit"],
  .print-button {
    display: none !important;
    visibility: hidden !important;
  }

  .preview-header, .preview-footer, .app-footer {
    display: none !important;
  }

  main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: black !important;
    page-break-after: avoid;
  }

  p, span, div, li, td, th {
    color: black !important;
  }

  a {
    color: black !important;
    text-decoration: underline !important;
  }
  
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }
   a[href^="/"]:after { /* For internal links, show relative path */
    content: " (internal link)"; /* Or simply hide for internal */
    font-size: 90%;
  }


  table {
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: auto;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  thead {
    display: table-header-group; /* Ensure header repeats on each page */
  }
  
  th, td {
    border: 1px solid #ccc !important;
    padding: 8px !important;
    color: black !important;
  }

  .card, .card-content, .card-header, .card-footer {
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    background-color: white !important;
    page-break-inside: avoid;
  }
  
  .badge {
    border: 1px solid #000 !important;
    color: #000 !important;
    background-color: #fff !important;
  }

  /* Specific overrides for LoanDetails component */
  .loan-details-print p {
    margin-bottom: 4px;
  }
  .loan-details-print strong {
    font-weight: bold;
  }

  .page-title, .card-title {
     color: black !important;
  }
  .text-primary, .currency-usd, .currency-gbp, .currency-eur, .currency-other {
      color: black !important;
  }
  .text-muted-foreground {
      color: #333 !important;
  }
  .text-destructive {
      color: black !important; /* Or a very dark gray if distinction is needed */
  }
   /* Hide icons if not essential for print */
  svg {
    display: none !important; /* This will hide all SVGs. Be specific if some are needed */
  }
  /* If some icons are essential (e.g., indicating loan type), make specific classes to show them */
  .print-icon {
    display: inline-block !important; /* or relevant display type */
    visibility: visible !important;
    
  }
  /* Ensure chart placeholders or simplified data are shown if charts can't print well */
  .recharts-wrapper {
    display: none !important; /* Hides complex charts */
  }
  .chart-placeholder-print { /* You would add this class to a div that explains the chart data */
    display: block !important;
    visibility: visible !important;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    color: black;
  }
}