/* Print Styles for Academy Pages - A4 Format */
/* Version 4.0 - Scale approach: looks like website, just smaller */

@media print {
    /* ========================================
       1. HIDE CHROME (nav, menu, assistant) - use display:none
       ======================================== */
    .navbar,
    nav,
    .col-md-2,
    #assistant-panel,
    #assistant-handle,
    .disclaimer-footer,
    footer,
    .print-button,
    button.btn,
    .btn {
        display: none !important;
    }
    
    /* Hide the menu column specifically (not all first children) */
    .row > .col-md-2:first-child {
        display: none !important;
    }
    
    /* ========================================
       3. REMOVE WIDTH CONSTRAINTS - use full A4 width
       ======================================== */
    
    /* Remove Bootstrap container width limits */
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Let the academy article span full printable width */
    .academy-article {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Content column spans full width with minimal padding */
    .col-md-10 {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 100% !important;
    }
    
    /* Remove any row constraints */
    .row {
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* ========================================
       4. PRESERVE COLORS IN PRINT
       ======================================== */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    /* ========================================
       5. KEEP DESKTOP LAYOUTS (prevent mobile collapse)
       ======================================== */
    
    /* Text + media side-by-side */
    .layout-side {
        display: grid !important;
        grid-template-columns: 1.1fr 0.9fr !important;
        gap: 1rem !important;
        align-items: start !important;
    }
    
    /* Step-by-step procedures with media */
    .layout-procedure {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
        align-items: start !important;
    }
    
    /* Procedure with checklist layout */
    .layout-procedure-checklist {
        display: grid !important;
        grid-template-columns: 2fr 1fr !important;
        gap: 1rem !important;
        align-items: start !important;
    }
    
    /* Full-bleed chart/table - reset margins for print */
    .layout-bleed {
        margin-inline: 0 !important;
    }
    
    /* Tax rate charts - 4 columns across */
    .tax-rate-charts-full {
        display: grid !important;
        grid-template-columns: 3fr 1fr 0.5fr 1fr !important;
        gap: 0.75rem !important;
    }
    
    /* Impact of structuring charts - 2 columns */
    #actual-value-charts-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }
    
    /* ========================================
       6. PAGE SETUP WITH FOOTER
       ======================================== */
    @page {
        size: A4;
        margin: 10mm 10mm 18mm 10mm; /* extra bottom margin for footer */
        
        /* Page numbers via CSS counters (works in Firefox, not Chrome/Edge yet) */
        @bottom-right {
            content: counter(page) " of " counter(pages);
            font-size: 9pt;
            color: #666;
        }
    }
    
    /* Fallback footer for browsers that don't support @page margins */
    .print-footer {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5pt 10pt;
        font-size: 9pt;
        color: #666;
        border-top: 1px solid #ddd;
        background: white;
    }
    
    .print-footer-left,
    .print-footer-right {
        line-height: 1;
    }
    
    .print-note {
        font-size: 8pt;
        color: #999;
        font-style: italic;
    }
    
    /* ========================================
       7. TYPOGRAPHY & SPACING ADJUSTMENTS
       ======================================== */
    body {
        background: white !important;
        font-size: 11pt !important;
        line-height: 1.4 !important;
    }
    
    /* Tighten legend so it doesn't dominate vertical space */
    .chart-legend {
        padding: 0.5rem 1rem !important;
        gap: 0.5rem !important;
        margin-top: 0.75rem !important;
    }
    
    .chart-legend .legend-item {
        font-size: 0.8rem !important;
        gap: 0.35rem !important;
    }
    
    .chart-legend .legend-color {
        width: 12px !important;
        height: 12px !important;
    }
    
    /* Remove the outer card wrapper in print to reclaim space */
    /* This targets the first card directly inside the main content column */
    .col-md-10 > .card:first-of-type,
    .col-md-10 > article.card {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Remove padding from outer card body only */
    .col-md-10 > .card:first-of-type > .card-body,
    .col-md-10 > article.card > .card-body {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Avoid page breaks inside important elements */
    .card,
    .section,
    .layout-side,
    .layout-procedure,
    .layout-procedure-checklist,
    table,
    .chart-container {
        page-break-inside: avoid !important;
    }
}

/* ========================================
   SCREEN-ONLY: Print button styling
   ======================================== */
.print-button {
    position: absolute !important;
    right: 1.5rem !important;
    z-index: 1000 !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* Ensure content containers have relative positioning */
.card,
.academy-article {
    position: relative !important;
}