/* app/static/css/print.css */

/* @page directive suggests default print settings to the browser. */
@page {
    size: A3 landscape; /* Suggests A3 paper in landscape, scales well for A4 too. */
    margin: 1cm;
}

/* @media print ensures these styles ONLY apply when printing. */
@media print {
    body {
        background-color: #fff !important; /* Force a white background. */
        font-size: 10pt; /* Use points for print consistency. */
    }

    /* Hide all non-essential elements from the printed report. */
    .navbar, 
    .filter-bar, 
    .card-header .btn, 
    .card-footer, 
    .popover,
    #loading-spinner {
        display: none !important;
    }

    /* Reset main content area for printing. */
    .card {
        border: none !important;
        box-shadow: none !important;
    }

    .card-header {
        background-color: transparent !important;
        text-align: center;
        border-bottom: 2px solid #000;
        padding-bottom: 1rem;
    }

    .card-header h4 {
        font-size: 16pt;
        font-weight: bold;
    }

    .card-body, .container-fluid {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Crucial for ensuring background colors are printed in most browsers. */
    .task-item {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        border: 1px solid #ccc !important;
    }

    /* Style the table for clarity on paper. */
    .heatmap-table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    .heatmap-table th, .heatmap-table td {
        border: 1px solid #ddd !important;
        font-size: 8pt; /* Smaller font to fit more data. */
        padding: 4px !important;
    }
    
    .heatmap-table th {
        background-color: #f2f2f2 !important; /* Light grey for headers */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .employee-col {
        background-color: #f8f9fa !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Ensure links are visually distinct in print. */
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
}

