body {
    background-color: #f0f2f5;
}

.no-print {
    /* This class will be hidden when printing */
}

.report-sheet {
    background-color: white;
    border: 1px solid #dee2e6;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* New style for the unit header */
.unit-header h2 {
    font-weight: bold;
    color: #0056b3; /* A professional blue */
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
}

/* Added styles for doctor contact info */
.unit-header p {
    font-size: 0.9rem; /* Smaller font for contact details */
    color: #333;
    line-height: 1.2; /* Tighter line spacing */
}

.camera-container {
    max-width: 660px;
    margin: auto;
}
#video {
    width: 100%;
    height: auto;
    border: 1px solid #333;
}

.gallery-item {
    position: relative;
    margin-bottom: 1rem;
}

.gallery-item img {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: .25rem;
    padding: .25rem;
}

.delete-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 10;
}

/* Styles for text displayed during print/export in place of inputs */
.print-only-text {
    display: none; /* Hidden by default, shown by JS during export */
    border: none;
    background-color: transparent;
    padding: 0;
    margin-top: 0.1rem; /* Small margin to separate from label */
    margin-bottom: 0.1rem;
    white-space: pre-wrap; /* Preserve line breaks for textareas */
}

.camera-selection label {
    margin-right: 10px;
}


@media print {
    body {
        background-color: white;
        font-size: 12pt;
        line-height: 1.15 !important; /* Tighten general line height */
    }

    .no-print {
        display: none;
    }
    
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.5cm !important; /* Reduce overall container padding for more space */
        margin: 0 !important;
    }

    .report-sheet, .card {
        border: none !important;
        box-shadow: none !important;
    }

    /* These are handled by JS now, but keeping for redundancy if JS fails */
    .form-control, textarea, input, select {
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
        padding-left: 0;
        height: auto;
    }
    .print-only-text {
        display: block !important; /* Ensure it's visible during print */
        margin-top: 0 !important; /* Remove top margin */
        margin-bottom: 0.05rem !important; /* Very tiny separation */
        font-size: 0.9em !important; /* Slightly smaller font for displayed text */
        line-height: 1.1 !important; /* Tighten line height for dense text */
    }

    textarea {
        resize: none;
    }
    
    .form-label {
        font-weight: bold;
        margin-bottom: 0.05rem !important; /* Reduce space below labels */
        font-size: 0.9em !important; /* Slightly smaller font for labels */
    }

    /* Ensure gallery images are properly displayed */
    .gallery-item {
        /* Adjusted to display 3 images per row for print */
        flex: 0 0 33.333% !important; /* Each image takes 33.333% width for 3 per row */
        max-width: 33.333% !important;
        padding: 0.1rem !important; /* Reduce padding further for a tighter fit */
        margin-bottom: 0.1rem !important; /* Reduce vertical margin between image rows */
        box-sizing: border-box !important; /* Include padding in the element's total width and height */
        page-break-inside: avoid; /* Prevent images from breaking across pages */
    }

    .gallery-item img {
        display: block !important; /* Ensure image is a block element */
        width: 100% !important; /* Image fills its container */
        height: auto !important; /* Maintain aspect ratio */
        border: 1px solid #ddd !important; /* Keep borders */
        border-radius: .25rem !important; /* Keep border-radius */
        padding: 0.05rem !important; /* Very small inner padding of images */
    }

    #gallery {
        display: flex !important; /* Ensure it's a flex container */
        flex-wrap: wrap !important; /* Allow images to wrap to next row */
        justify-content: flex-start !important; /* Align images to the start */
        margin-left: -0.1rem !important; /* Counteract padding on gallery-item for tight fit */
        margin-right: -0.1rem !important; /* Counteract padding on gallery-item for tight fit */
        page-break-inside: auto; /* Allow the entire gallery to break across pages if needed */
    }

    /* Ensure the unit header is visible when printing */
    .unit-header {
        display: block !important;
        margin-bottom: 0.5rem !important; /* Reduce space below header block */
    }

    /* Ensure doctor contact info is also visible and formatted correctly */
    .unit-header h2 {
        font-size: 1.5rem !important; /* Slightly smaller for print */
        margin-bottom: 0.2rem !important;
    }
    .unit-header p {
        font-size: 0.85rem !important; /* Even smaller for contact info */
        line-height: 1.1 !important;
    }

    /* Adjust main titles and card header titles */
    h1 {
        font-size: 1.8rem !important;
        margin-bottom: 0.5rem !important;
    }
    .report-sheet .card-header {
        padding-top: 0.3rem !important; /* Reduced header padding */
        padding-bottom: 0.3rem !important; /* Reduced header padding */
    }
    .report-sheet .card-header h2 {
        font-size: 1.3rem !important;
    }

    /* Reduce spacing within the card body and fieldsets for text content to fit on one page */
    .report-sheet .card-body {
        padding: 0.3rem !important; /* Reduce padding inside the card body */
    }

    fieldset {
        padding: 0.3rem 0.5rem !important; /* Reduce padding inside fieldsets */
        margin-bottom: 0.3rem !important; /* Reduce margin between fieldsets */
        page-break-inside: avoid; /* Keep fieldsets on one page if possible */
    }

    legend {
        font-size: 0.95rem !important; /* Make legend text slightly smaller */
        padding: 0 0.4rem !important; /* Reduce legend padding */
    }

    /* Target direct Bootstrap margin classes used in the HTML */
    .mb-3 {
        margin-bottom: 0.3rem !important; /* Reduced margin */
    }

    .mb-2 {
        margin-bottom: 0.2rem !important; /* Reduced margin */
    }

    /* Specific adjustment for the main report title margin */
    .text-center.mb-4 {
        margin-bottom: 0.5rem !important;
    }
}