/* ============================================
   FORCE PORTRAIT MODE - OVERRIDE DESKTOP WIDTHS
   ============================================ */
@page {
    size: 8.5in 11in portrait;
    margin: 0.5in;
}

@page :first {
    size: 8.5in 11in portrait;
    margin: 0.5in;
}

/* ULTRA-AGGRESSIVE: Set CSS variables for print */
:root {
    --print-max-width: 7.5in;
    --print-page-width: 8.5in;
    --print-content-width: 7.5in; /* 8.5in - 1in total margins */
}

@media print {
    /* STEP 0: NUCLEAR - Cap EVERYTHING to content width (accounting for margins) */
    * {
        max-width: 7.5in !important;
        width: auto !important;
        box-sizing: border-box !important;
    }

    /* STEP 1: Force HTML/BODY to letter portrait dimensions */
    html {
        width: 8.5in !important;
        max-width: 8.5in !important;
        min-height: 11in !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body {
        width: 8.5in !important;
        max-width: 8.5in !important;
        min-height: 11in !important;
        margin: 0 !important;
        padding: 0.5in !important; /* Add padding to body for margins */
        background: white !important;
        font-family: Arial, sans-serif;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Print Layout - Clean container */
    .print-layout {
        width: 100% !important;
        max-width: 7.5in !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: white !important;
        box-sizing: border-box !important;
    }

    /* Print page content */
    .print-page {
        width: 100% !important;
        max-width: 7.5in !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: white !important;
        box-sizing: border-box !important;
    }

    /* STEP 2: Override ALL layout containers to portrait-safe widths */
    .apple-shell,
    .apple-main,
    .apple-container,
    .apple-container.wide,
    .apple-container.full,
    .apple-container.dashboard-wide,
    .apple-page-container {
        width: 100% !important;
        max-width: 8.5in !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* STEP 3: Card containers */
    .apple-card {
        width: 100% !important;
        max-width: 8.5in !important;
        margin: 0 !important;
        padding: 0.5in !important;
        border: none !important;
        box-shadow: none !important;
        background: white !important;
        backdrop-filter: none !important;
    }

    /* STEP 4: Print-specific areas */
    #print-invoice,
    #print-area,
    .print-page,
    [id*="print"] {
        width: 100% !important;
        max-width: 8.5in !important;
        margin: 0 !important;
        padding: 0.5in !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        display: block !important;
    }

    /* STEP 5: NUCLEAR OPTION - Override ALL inline styles inside print areas */
    #print-invoice [style*="display"],
    #print-area [style*="display"],
    #print-invoice div[style],
    #print-area div[style] {
        display: block !important;
        width: auto !important;
        max-width: 8.5in !important;
        flex: none !important;
        grid-template-columns: 1fr !important;
    }

    /* Kill flexbox layouts specifically */
    #print-invoice [style*="flex"],
    #print-area [style*="flex"] {
        display: block !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 8.5in !important;
        flex: none !important;
    }

    /* Kill grid layouts specifically */
    #print-invoice [style*="grid"],
    #print-area [style*="grid"] {
        display: block !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 8.5in !important;
    }

    /* Override inline width styles (like width:300px on logo) */
    #print-invoice [style*="width"],
    #print-area [style*="width"] {
        width: auto !important;
        max-width: 8.5in !important;
    }

    /* Specifically target images with inline width */
    #print-invoice img[style],
    #print-area img[style] {
        width: auto !important;
        max-width: 200px !important;
        height: auto !important;
    }

        /************************************
     * HIDE ALL APP CHROME
     ************************************/
        nav, header, footer,
        .apple-page-container, .apple-button-primary, .apple-button-secondary,
        .apple-page-title, .theme-toggle, .apple-topbar, .apple-shell > header,
        button, .apple-button, .apple-card-header, .apple-card-body,
        .apple-nav, .topbar-inner, .topbar-left, .top-nav, .adminbutton {
            display: none !important;
        }

        /************************************
     * NUCLEAR OVERRIDES FOR INLINE FLEX/GRID
     ************************************/
        #print-invoice * {
            min-width: 0 !important; /* Prevent overflow from natural widths */
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        #print-invoice [style*="flex"],
        #print-area [style*="flex"] {
            display: block !important;
            flex-direction: column !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        #print-invoice [style*="grid"],
        #print-area [style*="grid"] {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
        }
            /************************************
     * HEADINGS
     ************************************/
            #print-area h1, #print-invoice h1, .print-page h1 {
                margin: 0 0 4px 0 !important;
                line-height: 1.1;
                font-size: 1.4rem;
            }

            #print-area h2, #print-invoice h2, .print-page h2 {
                margin: 0px 0 0px 0 !important;
                line-height: 1.15;
                font-size: 1.2rem;
                page-break-after: avoid;
            }
            /************************************
     * PARAGRAPH SPACING
     ************************************/
            #print-area p, #print-invoice p, .print-page p {
                margin: 2px 0 !important;
            }
            /************************************
     * IMAGES (LOGO, MEDECO BADGE)
     ************************************/
            #print-invoice img:not([src*="qr"]):not([src*="data:image"]),
            #print-area img:not([src*="qr"]):not([src*="data:image"]) {
                max-width: 100% !important;
                height: auto !important;
                display: block !important; /* Prevent side-by-side expansion */
            }
        /************************************
     * QR CODE
     ************************************/
        .qr-box {
            margin-top: 8px;
            text-align: center;
            page-break-inside: avoid;
            width: 100% !important;
        }

            .qr-box img,
            #print-invoice img[src*="qr"],
            #print-area img[src*="qr"],
            #print-invoice img[src*="data:image"],
            #print-area img[src*="data:image"] {
                width: 80px !important;
                height: 80px !important;
                max-width: 80px !important;
                max-height: 80px !important;
                display: block !important;
                margin: 0 auto !important;
            }
        /************************************
     * TABLES
     ************************************/
        .print-table {
            width: 100% !important;
            border-collapse: collapse;
            margin-top: 6px;
            font-size: 11px;
            table-layout: fixed;
            page-break-inside: auto;
        }

            .print-table th,
            .print-table td {
                border: 1px solid #333;
                padding: 3px 5px;
                text-align: left;
                overflow: hidden;
                text-overflow: ellipsis;
                box-sizing: border-box;
            }
                /* Column widths */
                .print-table th:nth-child(1),
                .print-table td:nth-child(1) {
                    width: 30%;
                }

                .print-table th:nth-child(2),
                .print-table td:nth-child(2) {
                    width: 10%;
                    text-align: center;
                }

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

                .print-table th:nth-child(4),
                .print-table td:nth-child(4) {
                    width: 30%;
                    text-align: right;
                }
        /************************************
     * SIGNATURE BOX
     ************************************/
        .signature-box {
            margin-top: 12px;
            width: 100% !important;
        }

        .signature-line {
            border-bottom: 2px solid #000;
            height: 30px;
            width: 100%;
        }

        /* Two-column address block — exempt from the nuclear block override */
        .print-address-grid {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 40px !important;
            margin-bottom: 20px !important;
            width: 100% !important;
        }

        .print-address-grid > div {
            display: block !important;
            width: auto !important;
        }
    }