﻿@media print {

    /* Set the page to landscape mode */
    @page {
        size: landscape;
        margin: 2mm; /* Narrower margin */
    }

    body {
        -webkit-print-color-adjust: exact; /* For Chrome/Safari */
        color-adjust: exact; /* For Firefox */
    }

    /* Ensure full width for containers and rows */
    .container {
        max-width: 100%;
    }

    main {
        width: 100%
    }

    form {
        width: 90%
    }
    /* Reset margins and padding for printing */
    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        font-size: 12px;
        place-content: center;
        align-content: center;
    }

    .container, .row, .form-section {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        page-break-inside: avoid;
        margin-bottom: 2px;
        place-content: center;
    }

    /* First column styling with 70% width */
    .first-column {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /*        align-items: flex-start;*/
        width: 70%; /* Set width to 70% */
        padding: 5px; /* Adjust padding */
        margin-right: 1%; /* Add small margin between columns */
    }

    /* Second column styling with 30% width */
    .second-column {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 25%; /* Set width to 30% */
        padding-left: 5px;
        padding-right: 5px;
        background-color: #fff;
    }

        /* Ensure full-width form controls in both columns */
        .first-column .form-group,
        .second-column .form-group {
            width: 100%;
            margin-bottom: 5px;
        }
    /* Ensure the header covers the full width */
    .first-column .header {
        width: 100%;
        display: block !important; /* Ensure the header is displayed */
        visibility: visible !important; /* Ensure the header is visible */
        position: relative; /* Prevent it from being cut off */
        background-color: #000;
        color: #fff;
        padding: 10px;
        text-align: left;
    }
    /* Ensure the image doesn't strech to the full width */
    .first-column .img-icon {
        max-width: 15%;
        height: auto; /* Maintain aspect ratio */
        object-fit: contain;
        max-width: 120px; /* Optional: Restrict maximum width */
    }

    /* Ensure inputs, textareas, and selects are 100% width in both columns */
    .first-column .form-control,
    .second-column .form-control,
    .first-column input,
    .second-column input,
    .first-column textarea,
    .second-column textarea,
    .first-column select,
    .second-column select {
        width: 100%;
        margin-bottom: 5px; /* Add space between elements */
        padding: 5px;
        box-sizing: border-box;
        border: 1px solid black;
    }

    /* Ensure proper alignment of radio buttons and checkboxes */
    /*        .first-column .radio-inline,
        .second-column .radio-inline,*/
    .first-column .radio,
    .second-column .radio,
    .first-column .checkbox-inline,
    .second-column .checkbox-inline {
        display: inline-block;
        margin-right: 5px;
    }

    .text-center {
        text-align: center !important;
    }

    /* Hide unnecessary elements for printing */
    .btn, .navbar, .sidebar, .footer {
        display: none !important;
    }
    /* Show some needed buttons i.e. status, files*/
    .btn-print {
        display: block !important;
        background-color: #007bff !important; /* Set your desired background color */
        color: #fff !important; /* Set text color to be readable on the background */
        border: 1px solid #007bff !important; /* Make sure the border color is displayed */
    }

    img {
        display: block !important; /* Ensure images are visible */
        max-width: 100%; /* Ensure the image doesn't overflow */
        height: auto; /* Maintain aspect ratio */
    }

    /* Table styles for print */
    table, td, th {
        border: 1px solid black;
        width: 100%;
        text-align: center;
    }

    /* Force page breaks */
    .page-break {
        page-break-after: always;
    }
    /* Ensure radio buttons are displayed inline */
    .radio-inline {
        display: inline-block !important; /* Force inline display */
        margin-left: 2px; /* Space between radio buttons */
        margin-right: 2px; /* Space between radio buttons */
        vertical-align: middle; /* Align with text */
    }
    /* Keep radio buttons and small input elements aligned */
    input[type="radio"], input[type="checkbox"] {
        margin-right: 5px; /* Add space between the radio button and label text */
        width: 15%;
    }
}
