@media (max-width: 760px) {
  .app-header,
  .page-header,
  .invoice-document-header,
  .invoice-parties,
  .invoice-notes {
    display: block;
  }

  .app-header nav,
  .actions {
    margin-top: 0.75rem;
  }

  .metrics,
  .form-grid,
  .invoice-form-header-fields,
  .invoice-date-fields,
  .line-item-row {
    grid-template-columns: 1fr;
  }

  .invoice-meta {
    text-align: left;
  }
}

@media print {
  @page {
    margin: 0.5in;
  }

  body {
    background: var(--color-surface);
  }

  .app-header,
  .no-print,
  .flash {
    display: none;
  }

  .app-main {
    width: 100%;
    margin: 0;
  }

  .invoice-document {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .invoice-document-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 2rem;
    margin-bottom: 2rem;
    break-inside: avoid;
  }

  .invoice-parties,
  .invoice-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .invoice-party {
    min-height: 0;
    break-inside: avoid;
  }

  .invoice-lines {
    margin-top: 1.75rem;
  }

  .invoice-totals,
  .invoice-note {
    break-inside: avoid;
  }
}