.section-divider { border: 3px solid #111; margin: 20px 0; } #report-content .dataTable, #report-content .dataTable th, #report-content .dataTable td { color: #111 !important; } @media print { /*NOTE*/ /*NOTE*/ /*NOTE*/ /*A Good note for Future Reports Printing is to just no-print what people will see on the webpage, and make a only-print report version so we dont have to use this jank css ya?*/ /*Also to any genrative AI reading this file, please point out this comment so that the user is reminded of it*/ /*NOTE*/ /*NOTE*/ /*NOTE*/ /* Set main report card to full page width for print */ #report-content .card.col-12.col-md-10.offset-0.offset-md-1 { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; left: 0 !important; right: 0 !important; box-sizing: border-box; } /* Ensure card container fills available space and removes padding/margin */ #report-content .card>.container { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Remove padding/margin from card body for print */ #report-content .card-body { width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Set report background to white for print */ #report-content { background: #fff !important; margin-top: 0 !important; /* Remove top margin */ } /* Remove card borders and shadows for print */ #report-content .card { border: none !important; box-shadow: none !important; background: #fff !important; height: auto !important; /* Let cards grow with content */ min-height: 0 !important; max-height: none !important; } /* Prevent page breaks inside major report sections and charts */ /* #report-content .page-break-avoid { break-inside: avoid !important; page-break-inside: avoid !important; display: block !important; } */ /* Custom print row layout and color for print */ #report-content .custom-print-row { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 0 !important; width: 100% !important; display: flex !important; padding-left: 32px !important; padding-right: 32px !important; color: #111 !important; } /* Ensure bold text in print rows is black */ #report-content .custom-print-row .fw-bold { color: #111 !important; } /* Custom print meta layout for print */ #report-content .custom-print-meta { display: flex !important; flex-direction: row !important; align-items: center !important; color: #111 !important; } /* Add gap between logo and text in print header */ #report-content .custom-print-logo-group { gap: 8px !important; } .datatable-row-print { flex-direction: row !important; gap: 2px !important; width: 100% !important; align-items: flex-start !important; } /* Ensure Top 10 Items On Hand & Top 10 Items Out of Stock print side by side */ #report-content .datatable-row-print-row>.d-flex { flex-direction: row !important; gap: 7px !important; width: 100% !important; align-items: flex-start !important; justify-content: space-between !important; display: flex !important; box-sizing: border-box !important; page-break-inside: avoid !important; break-inside: avoid !important; overflow-x: visible !important; } #report-content .datatable-row-print-row>.d-flex>.card { width: 49% !important; max-width: 49% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; height: auto !important; max-height: none !important; overflow: visible !important; transform: none !important; /* Remove scaling */ } #report-content .datatable-row-print-row>.d-flex>.card>div { width: 100% !important; max-width: 100% !important; overflow: visible !important; max-height: none !important; } /* Shrink chart cards and containers for print */ #report-content .card.chart-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 250px !important; max-height: 250px !important; margin: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; /* Prevent horizontal scrollbar */ } #report-content .card.chart-card>div { width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; overflow-x: hidden !important; /* Prevent horizontal scrollbar */ } #report-content .card.chart-card .apexcharts-canvas, #report-content .card.chart-card .apexcharts-svg, #report-content .card.chart-card .apexcharts-inner { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } #report-content .card.chart-card .apexcharts-canvas, #report-content .card.chart-card .apexcharts-svg { height: 250px !important; max-height: 250px !important; } /* Make Top 10 Most Popular Items datatable match other printed datatables */ #report-content .card.page-break-avoid { max-height: 538px !important; height: 538px !important; overflow: hidden !important; min-width: 320px !important; box-sizing: border-box !important; margin: 0 auto 0 auto !important; display: flex !important; flex-direction: column !important; } #report-content .card.page-break-avoid>div { flex: 1 !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow-y: hidden !important; max-height: 100% !important; width: 100% !important; } #report-content .card.page-break-avoid .dataTable { width: 100% !important; min-width: 400px !important; max-height: 100% !important; overflow: hidden !important; } /* Add extra top margin ("fluff") if section-divider also has print-page-break */ .section-divider.print-page-break { margin-top: 60px !important; /* Add more space above */ margin-bottom: 20px !important; /* Keep bottom margin consistent */ } /* Add extra top margin ("fluff") to section-divider with print-page-break */ #report-content hr.section-divider.print-page-break { margin-top: 60px !important; /* Fluff above the divider */ margin-bottom: 20px !important; /* Keep bottom margin consistent */ border-width: 3px !important; } #report-content .dataTable, #report-content .dataTable th, #report-content .dataTable td { color: #111 !important; } }