@media print {
  /* CRITICAL: Force white background and hide all layout containers that might have shadows/colors */
  html, body { 
    background: #ffffff !important; 
    color: #000000 !important; 
    margin: 0 !important; 
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide EVERY UI element by default when printing */
  #sidebar, .sidebar, #topbar, .topbar, #mob-bottom-nav, #mob-overlay, 
  #toast-container, #install-banner, .btn, button, .no-print, .sync-dot { 
    display: none !important; 
  }

  /* PORTAL-BASED PRINTING (Invoices & Receipts) */
  body.printing-invoice #main,
  body.printing-invoice #app > *:not(#inv-print-portal) { 
    display: none !important; 
  }

  body.printing-invoice #inv-print-portal { 
    display: block !important; 
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 999999 !important;
  }

  /* GENERAL PAGE PRINTING (Dashboard, Inventory etc.) */
  body:not(.printing-invoice) #main { 
    display: block !important; 
    width: 100% !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    box-shadow: none !important;
  }
  
  body:not(.printing-invoice) #content { 
    display: block !important; 
    width: 100% !important; 
    padding: 20px !important;
    overflow: visible !important;
  }

  /* Remove all shadows and backgrounds from cards to prevent 'grey shadow' effect */
  .card, .stat-card, .tbl-wrap, table {
    box-shadow: none !important;
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    overflow: visible !important;
  }

  img { max-width: 100% !important; }
}

#inv-print-portal { display: none; }