﻿@media print {
    /* Reset and base styles */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html, body {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        background: white;
        color: black;
        orphans: 3;
        widows: 3;
    }

    body {
        display: block;
    }

    /* Hide elements marked for no-print */
    .no-print,
    .print-icon,
    .buttons,
    nav,
    header,
    footer:not(.print-content-footer),
    .download-btn {
        display: none !important;
    }

    /* CRITICAL: Hide PrintContent for Ctrl+P */
    .print-content,
    body:not(.printing-via-button) .print-content,
    body[data-ctrlp-print] .print-content {
        display: none !important;
    }

    /* Show PrintContent when using print button */
    body.printing-via-button:not([data-ctrlp-print]) .print-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hide main page content when printing */
    body.printing-via-button .cfr-container {
        display: none !important;
    }

    /* Page setup - reduced bottom margin */
    @page {
        margin: 0.5in 1in 1in 1in;
        size: letter;
    }

    /* Print content structure - minimal bottom padding */
    .print-content {
        width: 100%;
        padding-bottom: 0;
        min-height: auto;
    }

    .print-content-header {
        text-align: center;
        page-break-after: avoid;
        margin-bottom: 1rem;
    }

    .jjkLogo {
        width: 22.1625px;
        height: 35px;
        margin: 0 auto 0.5rem;
        display: block;
    }

    .copyright {
        font-family: Arial, sans-serif;
        font-size: 10px;
        text-align: center;
        margin: 0;
    }

    .print-content-title {
        text-align: left;
        margin: 0 0 0.8rem 0;
        page-break-after: avoid;
        font-size: 1.2rem;
        font-weight: bold;
    }

    .print-content-body {
        margin: 0;
        padding: 0 0 0.75in 0;
        min-height: auto;
    }

    /* Footer on every page - positioned at bottom */
    .print-content-footer {
        position: running(footer);
        font-family: Arial, sans-serif;
        font-size: 10px;
        text-align: center;
        line-height: 1.3;
        background: white;
        padding: 0.25in 0;
        margin-top: 0.5in;
        border-top: 1px solid #ddd;
    }

    /* ========================================
       CANADIAN FLAG ICONS - ENSURE VISIBILITY
       ======================================== */
    
    /* Make sure all Canadian flag images are visible and properly styled */
    .canada-flag-icon,
    img[src*="canada_flag"],
    img[alt*="Canada"],
    img[alt*="Canadian"] {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: 1rem !important;
        max-height: 1rem !important;
        vertical-align: middle !important;
        margin-left: 0.25rem !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Ensure flag icons in topic headers are visible */
    .topic-header img[src*="canada_flag"],
    .topic-title img[src*="canada_flag"],
    h2 img[src*="canada_flag"],
    h3 img[src*="canada_flag"] {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* ========================================
       HIDE BLANK ROWS (compare-state-hidden)
       ======================================== */
    
    /* Hide rows with compare-state-hidden class in div-based tables */
    .quickref > div.compare-state-hidden,
    .topic-body div.compare-state-hidden {
        display: none !important;
    }

    /* Hide rows with compare-state-hidden class in HTML tables */
    .topic-body tr.compare-state-hidden,
    table tr.compare-state-hidden {
        display: none !important;
    }

    /* ========================================
       DIV-BASED TABLE STRUCTURE (.quickref)
       ======================================== */
    
    /* Remove scroll container behavior */
    .quickref {
        max-height: none !important;
        overflow: visible !important;
        border: none !important;
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 0.5in !important;
        orphans: 3 !important;
        widows: 3 !important;
    }

    /* Column headers */
    .quickref > div.columnlisting {
        display: table-row !important;
        position: static !important;
        page-break-inside: avoid !important;
        page-break-after: avoid !important;
    }

    .quickref > div.columnlisting > div {
        display: table-cell !important;
        font-weight: bold !important;
        padding: 0.2rem 0.25rem !important;
        border: 1px solid #ccc !important;
        background: white !important;
        color: black !important;
        font-size: 9px !important;
        position: static !important;
        z-index: auto !important;
    }

    /* Data rows - aggressive page break controls */
    .quickref > div:not(.columnlisting):not(.compare-state-hidden) {
        display: table-row !important;
        page-break-inside: avoid !important;
        page-break-after: auto !important;
        orphans: 3 !important;
        widows: 3 !important;
    }

    .quickref > div:not(.columnlisting):not(.compare-state-hidden) > div {
        display: table-cell !important;
        padding: 0.2rem 0.25rem !important;
        border: 1px solid #ccc !important;
        background: white !important;
        color: black !important;
        font-size: 9px !important;
        vertical-align: top !important;
        position: static !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
    }

    /* Remove alternating colors */
    .quickref > div.odd,
    .quickref > div.even {
        background: white !important;
    }

    .quickref > div.odd > div,
    .quickref > div.even > div {
        background: white !important;
    }

    /* Remove sticky column behavior */
    .quickref .sticky-column {
        position: static !important;
        left: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
    }

    /* ========================================
       HTML TABLE STRUCTURE
       ======================================== */

    /* Remove ALL wrapper restrictions */
    .print-content-body > *,
    .print-content-body div,
    .table-wrapper,
    [class*="wrapper"],
    [class*="scroll"] {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        position: static !important;
        display: block !important;
    }

    /* Table - MUST use display: table */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 9px !important;
        font-family: Arial, sans-serif !important;
        page-break-inside: auto !important;
        margin: 0 0 0.5in 0 !important;
        background: white !important;
        display: table !important;
        table-layout: fixed !important;
        orphans: 3 !important;
        widows: 3 !important;
    }

    /* Table header group - repeats on each page */
    thead {
        display: table-header-group !important;
        page-break-inside: avoid !important;
        page-break-after: avoid !important;
    }

    /* Table body group */
    tbody {
        display: table-row-group !important;
        orphans: 3 !important;
        widows: 3 !important;
    }

    tfoot {
        display: table-footer-group !important;
    }

    /* Table rows - aggressive orphan/widow controls - EXCLUDING hidden rows */
    tr:not(.compare-state-hidden) {
        display: table-row !important;
        page-break-inside: avoid !important;
        page-break-after: auto !important;
        orphans: 3 !important;
        widows: 3 !important;
    }

    /* Table cells - MUST use display: table-cell */
    th, td {
        display: table-cell !important;
        padding: 0.2rem 0.25rem !important;
        border: 1px solid #ccc !important;
        text-align: left !important;
        vertical-align: top !important;
        background: white !important;
        color: black !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        page-break-inside: avoid !important;
        orphans: 3 !important;
        widows: 3 !important;
    }

    /* Table header cells */
    thead th {
        font-weight: bold !important;
    }

    /* Caption */
    caption {
        caption-side: top !important;
        text-align: left !important;
        page-break-after: avoid !important;
        font-weight: bold !important;
        padding: 0.2rem 0 !important;
        margin-bottom: 0.2rem !important;
        display: table-caption !important;
        font-size: 10px !important;
    }

    /* Hide colgroup */
    colgroup, col {
        display: none !important;
    }

    /* Remove any positioning/transforms */
    * {
        position: static !important;
        transform: none !important;
        clip: auto !important;
        clip-path: none !important;
    }

    /* Exception for table display properties */
    .quickref {
        display: table !important;
    }
    
    .quickref > div.columnlisting {
        display: table-row !important;
    }
    
    .quickref > div:not(.columnlisting):not(.compare-state-hidden) {
        display: table-row !important;
    }
    
    .quickref > div > div {
        display: table-cell !important;
    }
    
    table {
        display: table !important;
    }
    
    thead {
        display: table-header-group !important;
    }
    
    tbody {
        display: table-row-group !important;
    }
    
    tr:not(.compare-state-hidden) {
        display: table-row !important;
    }
    
    th, td {
        display: table-cell !important;
    }

    /* Exception for Canadian flag images - must remain inline-block */
    .canada-flag-icon,
    img[src*="canada_flag"],
    img[alt*="Canada"],
    img[alt*="Canadian"] {
        position: relative !important;
        display: inline-block !important;
    }
}




