/* Print styles */
@media print {
    .print-header {
        display: block !important;
        width: 100%;
        margin-bottom: 10px;
        page-break-after: avoid !important;
        /* Prevent page break after header */
        break-after: avoid !important;
        /* For broader browser support */
        column-span: all;
        position: relative;
        margin-bottom: 0;
        padding-bottom: 10px;
    }

    .print-header h1 {
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        margin: 0;
        padding: 5px 0;
        border-bottom: 2px solid #000;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    .quantity-on-hand {
        display: none !important;
    }


    .out-of-stock {
        display: none !important;
        /* Hidden by default in print */
        color: lightcoral;
        font-weight: bold;
        font-size: 8px;
    }

    /* When we want to show the message (controlled by JS) */
    .show-tos .out-of-stock {
        display: block !important;
    }

    .accordion-item:first-of-type {
        page-break-before: avoid !important;
        break-before: avoid !important;
    }

    /* Page setup */
    body::after {
        content: counter(page);
        counter-increment: pages;
        display: none;  /* Hide it from screen view */
    }

    @page:first {
        margin: 1.5cm 0.5cm 0.5cm 0.5cm;  
    }

    @page {
        margin: 2cm 0.5cm 0.5cm 0.5cm;  /* top right bottom left */
        counter-increment: page;

        @bottom-right {
            content: "Page " counter(page) " of " counter(pages);
            font-size: 10px;
            margin-right: 1cm;
            margin-bottom: .5cm;
        }
    }

    /* Hide everything above accordions */
    body>p,
    /* "Products" text */
    body>div>p,
    body>select,
    /* Pricing scheme dropdown */
    body>input,
    /* Checkbox */
    body>label,
    /* Any labels */
    body>button,
    /* Print button */
    body>hr {
        /* Horizontal rule */
        display: none !important;
    }

    body {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .category-name {
        display: block !important;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
        padding-bottom: 2px;
        border-bottom: 1px solid #000;
        /* Thinner border */
    }

    /* Hide elements we don't want to print */
    .accordion-button,
    .product-action,
    button,
    select,
    input,
    .htmx-indicator,
    .spinner,
    hr {
        display: none !important;
    }

    /* Show all accordion content when printing */
    .accordion-content {
        display: block !important;
        width: 100%;
        padding: 0;
    }

    /* Adjust product row for printing */
    .product-row {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        page-break-inside: avoid !important;
        /* Force this rule */
        break-inside: avoid !important;
        /* For broader browser support */
        width: 100%;
        margin: 2px 0;
        padding: 2px 0;
    }

    /* Category styling */
    .accordion-item {
        margin: 8px 0;
        border: 0px !important;
    }

    /* Show category name */
    .accordion-header {
        display: block !important;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 8px;
        padding-bottom: 3px;
        border-bottom: 2px solid #000;
    }

    /* Ensure prices align right */
    .product-price {
        font-size: 11px;
        text-align: right;
        padding-right: 5px;
        /* Reduced from 20px */
    }

    /* Ensure product names are clear */
    .product-name {
        font-size: 11px;
        /* Reduced from 14px */
    }

    /* Add some spacing between sections */
    .accordion-content {
        margin-bottom: 8px;
        /* Reduced from 30px */
    }

        /* Hide categories with no visible content */
        .accordion-item:not(:has(.accordion-content .product-row:not(.hidden):not([style*="display: none"]))) {
            display: none !important;
        }
    
        /* Always show accordion content in print mode */
        .accordion-content {
            display: block !important;
        }
    
        /* Hide empty accordion content */
        .accordion-content:empty {
            display: none !important;
        }

    /* Add this to your regular styles */
    .category-name {
        display: block !important;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 15px;
        padding-bottom: 5px;
        border-bottom: 2px solid #000;
    }

    /* Hide the button but keep the header div */
    .accordion-button {
        display: none !important;
    }

    /* Create two-column layout container */
    .accordion-container {
        column-count: 2;
        column-gap: 20px;
        column-fill: balance;
        width: 100%;
        margin-top: 0;
        padding-top: 0;
        float: left;
    }

    /* Allow categories to flow between columns */
    .accordion-item {
        break-inside: auto;
        page-break-inside: auto;
        display: block;
        width: 100%;
        margin: 8px 0;
    }

    /* But still prevent individual product rows from breaking */
    .product-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Adjust product row for narrower columns */
    .product-row {
        grid-template-columns: 3fr 1fr 1fr;
        font-size: 10px;
        margin: 1px 0;
        padding: 1px 0;
    }

    /* Further reduce some sizes for column layout */
    .category-name {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .product-name,
    .product-price {
        font-size: 10px;
    }
    
    /* Ensure header spans both columns */
    .print-header {
        column-span: all;
    }

    /* Category header break control */
    .category-name {
        orphans: 2;  /* Requires at least 2 product rows to print with header */
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Ensure product rows stay with their header when possible */
    .accordion-item {
        orphans: 2;  /* Minimum rows at bottom of page */
        widows: 2;   /* Minimum rows at top of page */
    }

    /* Keep individual product rows intact */
    .product-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}