@media print {
    /* Basic A4 page setup */
    @page {
        size: A4;
        margin: 0.1cm; /* Adjust margins as needed */
    }

    body {
        margin: 0;
        padding: 0;
        font-size: 10pt; /* Set a base font size for print - adjust as needed */
        line-height: 1; /* Adjust line height for readability */
        color: #000; /* Ensure text is black for print */
        background-color: #fff; /* Ensure background is white */
    }

        /* Hide everything on the page first */
        body * {
            visibility: hidden !important;
        }

    /* Make only the designated print area and its children visible */
    #evaluationPrintArea, #evaluationPrintArea * {
        visibility: visible !important;
    }

    #evaluationPrintArea {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important; /* Will be 100% of the A4 printable area */
        margin: 0 !important;
        padding: 0 !important; /* Minimal padding for the container itself */
        border: none !important;
        box-shadow: none !important;
    }

    /* Global rule for elements that should never be printed */
    .no-print, .no-print * {
        display: none !important;
    }

    /* Remove any background colors or shadows from common elements for print */
    .card, .bg-light, .border {
        background-color: #fff !important;
        border-color: #ccc !important; /* Lighten borders for print */
        box-shadow: none !important;
    }

    /* Ensure links are just text, not underlined or colored if not desired */
    a, a:visited {
        color: #000 !important;
        text-decoration: none !important;
    }

    .select-table, /* Assuming SelectTable might have a root class 'select-table' */
    select.form-control, /* If it renders a standard select */
    .form-select /* If it uses Bootstrap's .form-select style */ {
        -webkit-appearance: none !important; /* Remove default styling (arrow) in WebKit browsers */
        -moz-appearance: none !important; /* Remove default styling (arrow) in Firefox */
        appearance: none !important; /* Remove default styling (arrow) in standard browsers */
        background-image: none !important; /* Remove arrow if it's a background image */
        /* Ensure it looks like a text field */
        border: 1px solid #ccc !important;
        background-color: #fff !important;
        padding-right: 0.75rem !important; /* Adjust padding if arrow space is removed. Match other inputs. */
    }

        .select-table-arrow-container, /* Example: A container for the arrow */
        .select-table .fa-chevron-down, /* Example: If it uses a Font Awesome icon */
        .select-table i[class*="arrow"], /* Example: If it uses an <i> tag with 'arrow' in its class */
        .select-table svg.dropdown-arrow /* Example: If it uses an SVG for the arrow */ {
            display: none !important;
        }

        .select-table-selection-text, /* A hypothetical class for the displayed text part */
        .select-table input[readonly] /* If it uses a readonly input to display text */ {
            padding: 0.375rem 0.75rem !important; /* Match typical form-control padding */
            display: block !important;
            width: 100% !important;
            min-height: calc(1.5em + 0.75rem + 2px) !important; /* Approximate height of a form-control */
            border: none !important; /* Remove internal border if the outer wrapper has one */
            background-color: transparent !important; /* Make background transparent if outer wrapper has color */
        }
}