@media print {
  /* Hide everything by default */
  body * {
    visibility: hidden;
  }

  /*
    The 'no-print' class can be added to any element that should ALWAYS be hidden
    when printing. This is more explicit than the catch-all above.
  */
  .no-print,
  .no-print * {
    display: none !important;
  }

  /*
    Define the printable area. Everything inside this will be made visible again.
    This is the core of the strategy.
  */
  .printable-area,
  .printable-area * {
    visibility: visible;
  }

  /* Make the print-only header visible */
  .print-header {
    display: block !important;
    visibility: visible !important;
  }

  /* Position the printable area at the top of the page */
  .printable-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 2rem;
    margin: 0;
  }

  /* Remove box shadows and other screen-only styles */
  .printable-area [class*="shadow"] {
    box-shadow: none !important;
  }

  /* Ensure card borders are visible for structure */
  .printable-area .card {
    border: 1px solid #ccc !important;
  }

  /* Reset background colors to be print-friendly */
  .printable-area * {
    background-color: transparent !important;
    color: #000 !important;
  }
}