/* ==========================================================
   HEALTH WORLD PATHOLOGY — Print Styles
   Pixel-Perfect A4 Report and Invoice Print & PDF Layout
   Zero-Distortion Multi-Template Support
   ========================================================== */

@page {
  size: A4 portrait;
  margin: 0; /* Pure 0 margin to prevent double-margin distortion in modern browsers */
}

@media print {
  /* Global reset for print */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-sizing: border-box !important;
  }

  html,
  body {
    background: #ffffff !important;
    color: #0f172a !important;
    width: 210mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    font-size: 9.5pt !important;
    line-height: 1.4 !important;
    -webkit-font-smoothing: antialiased;
  }

  /* Completely hide all UI chrome and non-printable elements */
  .sidebar,
  .topbar,
  .dashboard-topbar,
  #topbar,
  .sidebar-overlay,
  .toast-container,
  .drawer-overlay,
  .page-header,
  .page-header__actions,
  .page-header__title,
  .page-header__subtitle,
  .breadcrumb,
  .table-toolbar,
  .table-footer,
  .pagination,
  .report-preview-sidebar,
  .btn,
  .btn-segment-group,
  .no-print,
  .share-dropdown-slide,
  #shareDropdownMenu,
  .modal__header,
  .modal__footer,
  .modal__close,
  #globalHeaderSearchWrapper,
  .global-header__user-wrapper,
  .dashboard-topbar__theme-btn {
    display: none !important;
  }

  /* Support clean printing from modals (e.g., Preview Sample PDF or receipt modals) */
  .modal-overlay {
    position: static !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    z-index: auto !important;
  }

  .modal {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .modal__body {
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .modal-overlay:not(:has(.report-page, .invoice-page, .statement-sheet, .b2b-receipt-slip, #printablePatientCard)) {
    display: none !important;
  }

  /* When printing from an active modal (Report Preview / Invoice Preview), completely hide the underlying app */
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet, .b2b-receipt-slip, #printablePatientCard)) .app,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet, .b2b-receipt-slip, #printablePatientCard)) #appShell,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet, .b2b-receipt-slip, #printablePatientCard)) #mainContent,
  body.printing-modal .app,
  body.printing-modal #appShell,
  body.printing-modal #mainContent,
  body.printing-modal .sidebar,
  body.printing-modal .topbar {
    display: none !important;
  }

  .pdf-modal-canvas {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    overflow: visible !important;
  }

  .app,
  .app-shell,
  #appShell,
  .workspace-layout,
  .main,
  .main-area,
  .content,
  #mainContent,
  .report-preview,
  .invoice-preview {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    position: static !important;
    background: transparent !important;
  }

  /* A4 Printable Sheet Standard */
  .report-page,
  .sheet {
    width: 210mm !important;
    max-width: 210mm !important;
    height: 296mm !important;
    min-height: 296mm !important;
    max-height: 296mm !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    page-break-after: always !important;
    break-after: page !important;
  }

  .report-page:last-child,
  .sheet:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }

  .sheet > * {
    flex-shrink: 0 !important;
  }

  .sheet .grow {
    flex: 1 0 4mm !important;
  }

  .sheet .sign {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8mm !important;
  }

  .sheet .report-footer-wrapper {
    margin-top: auto !important;
    flex-shrink: 0 !important;
    width: 100% !important;
  }

  .invoice-page {
    width: 210mm !important;
    max-width: 210mm !important;
    min-height: 297mm !important;
    max-height: 297mm !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    position: relative !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    overflow: hidden !important;
  }

  .report-page:not(:last-child),
  .sheet:not(:last-child) {
    page-break-after: always !important;
    break-after: page !important;
  }

  /* Report Table Column Stabilization — prevent distortion & awkward text wrapping */
  .report-results-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 5mm !important;
  }

  .report-results-table th,
  .report-results-table td {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    vertical-align: middle !important;
  }

  /* Invoice Table Column Stabilization */
  .invoice-items-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin-bottom: 5mm !important;
  }

  .invoice-items-table th:nth-child(1),
  .invoice-items-table td:nth-child(1) {
    width: 8% !important;
  }

  .invoice-items-table th:nth-child(2),
  .invoice-items-table td:nth-child(2) {
    width: 62% !important;
  }

  .invoice-items-table th:nth-child(3),
  .invoice-items-table td:nth-child(3) {
    width: 30% !important;
    text-align: right !important;
  }

  /* Prevent page breaks inside critical blocks */
  table { page-break-inside: auto; }
  tr    { page-break-inside: avoid; page-break-after: auto; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  .report-header,
  .report-patient-info,
  .patient-header-container,
  .patient-col,
  .patient-vr,
  .report-top-qr-box,
  .report-interpretation,
  .report-signatures,
  .report-disclaimer,
  .invoice-header,
  .invoice-parties,
  .invoice-totals,
  .invoice-payment-info {
    page-break-inside: avoid !important;
  }

  /* Links */
  a { color: inherit !important; text-decoration: none !important; }

  /* Clean A4 Invoice / Receipt Design Print Fidelity */
  .invoice-clean-design {
    width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    min-height: 297mm !important;
    padding: 22mm 20mm 18mm 20mm !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #1a1d21 !important;
    position: relative !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
    overflow: hidden !important;
  }

  .invoice-clean-design .top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }
  .invoice-clean-design .brand h1 {
    font-size: 17pt !important;
    font-weight: 700 !important;
    margin: 0 0 2px !important;
    letter-spacing: -0.2px !important;
  }
  .invoice-clean-design .brand .tag {
    color: var(--accent, #0f766e) !important;
    font-size: 9.5pt !important;
    margin-bottom: 8px !important;
  }
  .invoice-clean-design .brand p {
    margin: 0 !important;
    color: #6b7280 !important;
    font-size: 9pt !important;
    line-height: 1.5 !important;
  }
  .invoice-clean-design .doc {
    text-align: right !important;
  }
  .invoice-clean-design .doc .label {
    font-size: 9pt !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
  }
  .invoice-clean-design .doc .no {
    font-size: 17pt !important;
    font-weight: 700 !important;
    margin: 2px 0 8px !important;
  }
  .invoice-clean-design .status {
    display: inline-block !important;
    font-size: 8.5pt !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--accent, #0f766e) !important;
    border: 1px solid var(--accent, #0f766e) !important;
    border-radius: 20px !important;
    padding: 2px 10px !important;
  }

  .invoice-clean-design .meta {
    display: flex !important;
    margin-top: 14mm !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 4mm 0 !important;
  }
  .invoice-clean-design .meta div {
    flex: 1 !important;
  }
  .invoice-clean-design .k {
    font-size: 8pt !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    margin-bottom: 2px !important;
  }
  .invoice-clean-design .v {
    font-size: 10.5pt !important;
    font-weight: 600 !important;
  }

  .invoice-clean-design .cols {
    display: flex !important;
    gap: 14mm !important;
    margin-top: 9mm !important;
  }
  .invoice-clean-design .cols > div {
    flex: 1 !important;
  }
  .invoice-clean-design .cols .k {
    margin-bottom: 4px !important;
  }
  .invoice-clean-design .cols p {
    margin: 0 0 2px !important;
    line-height: 1.5 !important;
  }
  .invoice-clean-design .name {
    font-size: 12pt !important;
    font-weight: 700 !important;
  }
  .invoice-clean-design .mute {
    color: #6b7280 !important;
  }

  .invoice-clean-design table.items {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 11mm !important;
    page-break-inside: avoid !important;
  }
  .invoice-clean-design .items th {
    text-align: left !important;
    font-size: 8pt !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    padding: 0 0 3mm !important;
    border-bottom: 1px solid #1a1d21 !important;
  }
  .invoice-clean-design .items td {
    padding: 4mm 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  .invoice-clean-design .items th.r,
  .invoice-clean-design .items td.r,
  .invoice-clean-design .r {
    text-align: right !important;
  }
  .invoice-clean-design .c {
    width: 10mm !important;
    color: #6b7280 !important;
  }
  .invoice-clean-design .sac {
    width: 28mm !important;
    color: #6b7280 !important;
  }
  .invoice-clean-design .amt {
    width: 32mm !important;
  }
  .invoice-clean-design .items td.amt {
    font-weight: 600 !important;
  }

  .invoice-clean-design .bottom {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 8mm !important;
    gap: 16mm !important;
  }
  .invoice-clean-design .pay {
    flex: 1 !important;
  }
  .invoice-clean-design .pay p {
    margin: 0 0 2px !important;
    line-height: 1.5 !important;
  }
  .invoice-clean-design .totals {
    width: 68mm !important;
  }
  .invoice-clean-design .totals .row {
    display: flex !important;
    justify-content: space-between !important;
    padding: 1.6mm 0 !important;
  }
  .invoice-clean-design .totals .row.grand {
    border-top: 1px solid #1a1d21 !important;
    margin-top: 2mm !important;
    padding-top: 3mm !important;
    font-size: 13pt !important;
    font-weight: 700 !important;
  }
  .invoice-clean-design .totals .row.due {
    color: var(--accent, #0f766e) !important;
    font-weight: 600 !important;
  }
  .invoice-clean-design .words {
    margin-top: 8mm !important;
    font-size: 9.5pt !important;
  }

  .invoice-clean-design .sign {
    margin-top: 20mm !important;
    display: flex !important;
    justify-content: flex-end !important;
  }
  .invoice-clean-design .sign div {
    width: 55mm !important;
    text-align: center !important;
    border-top: 1px solid #1a1d21 !important;
    padding-top: 2mm !important;
    font-size: 9pt !important;
  }
  .invoice-clean-design .sign span {
    display: block !important;
    color: #6b7280 !important;
    font-size: 8pt !important;
  }

  .invoice-clean-design .foot {
    position: absolute !important;
    left: 20mm !important;
    right: 20mm !important;
    bottom: 14mm !important;
    border-top: 1px solid #e5e7eb !important;
    padding-top: 4mm !important;
    font-size: 8pt !important;
    color: #6b7280 !important;
    line-height: 1.6 !important;
  }
  .invoice-clean-design .foot p {
    margin: 0 !important;
  }

  /* B2B Statement Sheet */
  .statement-sheet {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Digital Patient Card Print Isolation */
  body.printing-patient-card * {
    visibility: hidden !important;
  }
  body.printing-patient-card #printablePatientCard,
  body.printing-patient-card #printablePatientCard * {
    visibility: visible !important;
  }
  body.printing-patient-card #printablePatientCard {
    position: absolute !important;
    left: 50% !important;
    top: 20mm !important;
    transform: translateX(-50%) !important;
    width: 460px !important;
    max-width: 460px !important;
    border: 1.5px solid #64748b !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  /* Modal / Full-Size Preview Print Isolation */
  body.printing-modal .app,
  body.printing-modal .app-shell,
  body.printing-modal #appShell,
  body.printing-modal #mainContent,
  body.printing-modal .sidebar,
  body.printing-modal .topbar,
  body.printing-modal .toast-container,
  body.printing-modal .no-print,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet)) .app,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet)) .app-shell,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet)) #appShell,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet)) #mainContent,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet)) .sidebar,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet)) .topbar {
    display: none !important;
  }

  body.printing-modal .modal-overlay,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet)) .modal-overlay.active {
    display: block !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  body.printing-modal .modal,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet)) .modal {
    display: block !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.printing-modal .modal__header,
  body.printing-modal .modal__footer,
  body.printing-modal .modal__close,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet)) .modal__header,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet)) .modal__footer,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet)) .modal__close {
    display: none !important;
  }

  body.printing-modal .pdf-modal-canvas,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .statement-sheet)) .pdf-modal-canvas {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
  }

  body.printing-modal .report-page,
  body.printing-modal .invoice-page,
  body.printing-modal .sheet,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .sheet, .statement-sheet)) .report-page,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .sheet, .statement-sheet)) .invoice-page,
  body:has(.modal-overlay.active:has(.report-page, .invoice-page, .sheet, .statement-sheet)) .sheet {
    margin: 0 auto !important;
    box-shadow: none !important;
    border: none !important;
  }

  body.printing-modal .b2b-receipt-slip,
  body:has(.modal-overlay.active:has(.b2b-receipt-slip)) .b2b-receipt-slip {
    margin: 10mm auto !important;
    max-width: 190mm !important;
    width: 190mm !important;
    box-shadow: none !important;
    border: 1px solid #94a3b8 !important;
  }
}