/* Print-Specific Styles */

@media print {

    /* Hide non-essential elements */
    header,
    nav,
    footer,
    #auth-nav,
    #user-nav,
    #dashboard-view, /* Hide dashboard view entirely */
    #signing-view,   /* Hide signing view entirely */
    #auth-view,      /* Hide auth view entirely */
    #document-controls,
    #field-palette,
    #signer-controls,
    #signing-progress-indicator,
    .dashboard-controls, /* Hide search bar */
    .doc-list-items button, /* Hide buttons in list items if dashboard somehow gets printed */
    .field-context-menu, /* Hide context menus */
    .resize-handle, /* Hide resize handles */
    .validation-indicator, /* Hide validation indicators */
    #loading-overlay /* Hide loading overlay */
    {
        display: none !important;
    }

    /* Ensure the document view and viewer container take up space */
    body, #app-container, #document-view, #viewer-container {
        display: block !important; /* Override potential display: none from JS */
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background-color: #fff !important; /* Ensure white background */
        color: #000 !important; /* Ensure black text */
        overflow: visible !important; /* Show all content */
    }

    /* Style the page container and canvas for printing */
    .page-container {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        page-break-after: always; /* Try to put each page container on a new print page */
    }

    .page-container canvas {
        /* Let the browser scale the whole page uniformly for print (keeps overlays aligned). */
        max-width: none !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important; /* Center canvas */
        box-shadow: none !important;
        border: none !important;
    }

    /* Multi-page print mode (generated temporarily in JS). */
    #page-container.print-pages {
        width: auto !important;
        height: auto !important;
    }

    #page-container.print-pages .print-page {
        position: relative !important;
        page-break-after: always;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    #page-container.print-pages .print-page canvas {
        max-width: none !important;
        height: auto !important;
    }

    .document-field .field-label,
    .document-field .field-value {
        display: block !important;
        color: #000 !important;
    }

    /* Ensure fields are visible and positioned correctly relative to the canvas */
    .document-field {
        position: absolute !important; /* Keep absolute positioning */
        border: 1px solid #666 !important; /* Simple border for visibility */
        background-color: transparent !important; /* No background */
        color: #000 !important; /* Black text */
        page-break-inside: avoid !important; /* Try not to break fields across pages */
        opacity: 1 !important; /* Ensure full opacity */
    }

    /* Hide field labels in print? Optional */
    /* .document-field .field-label { display: none !important; } */

    /* Ensure field content (text, images) is visible */
    .document-field img,
    .document-field .field-text-value,
    .document-field .field-date-value {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
        color: #000 !important;
    }

    /* Style checkbox/dropdown values for print */
    .field-type-checkbox .field-checkbox-input {
        /* Hide the actual input, rely on drawn checkmark if needed */
        /* display: none !important; */
        /* Or style it simply */
        appearance: none;
        border: 1px solid #000;
        width: 1em;
        height: 1em;
        vertical-align: middle;
    }
    .field-type-checkbox .field-checkbox-input:checked::before {
        content: '✔'; /* Simple checkmark */
        display: block;
        text-align: center;
        line-height: 1em;
        color: #000;
    }
    .field-type-checkbox .field-checkbox-label {
        color: #000 !important;
    }

    .field-type-dropdown .field-dropdown-select {
        /* Hide the select element, show the value */
        display: none !important;
    }
    /* We need to add the value as text content for printing if select is hidden */
    /* This requires JS adjustment or a different approach */
    /* Alternative: Style the select minimally */
    /*
    .field-type-dropdown .field-dropdown-select {
        appearance: none;
        border: none;
        background: none;
        padding: 0;
        font-size: inherit;
        color: #000;
    }
    */

    /* Remove unnecessary spacing */
    section {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Attempt to prevent page breaks within the viewer container if possible */
    #viewer-container {
        page-break-inside: avoid;
    }

}