﻿@media print {
    body {
        font-size: 10px; /* Reduce font size to fit more content */
        color: #000;
        overflow: hidden; /* Prevent scrollbars */
        margin: 0; /* Remove default margins */
        padding: 0;
        height: 100vh; /* Ensure the body height matches the viewport height */
    }

    .btn, button {
        display: none !important; /* Force hide all buttons during printing */
    }

    .container {
        margin: 0;
        padding: 0;
    }

    .tile-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px; /* Reduce gap between tiles to fit more content */
        margin: 0 auto; /* Center the grid on the page */
        align-content: flex-start; /* Align rows to the top */
    }

    .tile {
        background-color: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 4px; /* Reduce border radius */
        padding: 8px; /* Reduce padding */
        width: calc(20% - 8px); /* Adjust width for 5 tiles per row */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        text-align: center;
        page-break-inside: avoid; /* Prevent tiles from being split across pages */
    }

    .tile-header {
        font-weight: bold;
        font-size: 0.8rem; /* Reduce font size for headers */
        margin-bottom: 4px; /* Reduce margin */
    }

    .tile-image {
        max-width: 100%;
        max-height: 50px; /* Reduce image size */
        object-fit: cover;
        border-radius: 2px; /* Reduce border radius */
    }

    .print-page {
        page-break-after: always; /* Ensure each page breaks after content */
    }

    header, .page-header {
        display: none; /* Hide the page header */
    }

    /* Ensure rows of tiles fit entirely on the page */
    .tile-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px; /* Match the gap in .tile-grid */
        page-break-inside: avoid; /* Prevent rows from being split across pages */
    }

    /* Dynamically adjust the height of the grid to fit within the printable area */
    .tile-grid {
        max-height: calc(100vh - 2rem); /* Ensure the grid fits within the printable area */
        overflow: hidden; /* Prevent overflow of tiles */
    }
}
