/**
 * Print stylesheet for Herbier specimen detail page
 *
 * Applied via media="print" - provides print-optimized layout
 * Reference: Story 3-6 - Print Specimen Detail Page
 */

@media print {
    /* ========================================
     * 1. Hide Navigation Elements
     * ======================================== */
    .head-bar,
    #breadcrumb,
    .menu_lang,
    .visually-hidden-focusable {
        display: none !important;
    }

    /* ========================================
     * 2. Hide Interactive Elements - FORMS
     * ======================================== */
    /* Comment submission form - hide (but keep comments_div_container with approved comments visible) */
    .comments_form,
    .comment_result_div,
    #comment_form,
    .comment_container {
        display: none !important;
    }

    /* Loan request section - hide entirely including the h4 title */
    .loan_form_container,
    .loan_form_container * {
        display: none !important;
    }

    /* ========================================
     * 3. Hide Footer
     * ======================================== */
    .bandeau-pre-footer,
    .footer_row,
    #footer {
        display: none !important;
    }

    /* ========================================
     * 4. Hide Zoom Controls and Overlays
     * ======================================== */
    .easyzoom--overlay,
    .zoombox-overlay,
    .zoombox-wrap,
    .zoombox-bg {
        display: none !important;
    }

    /* Disable zoom pointer cursor */
    .easyzoom a {
        cursor: default;
    }

    /* ========================================
     * 5. Hide Print Button and Flash Messages
     * ======================================== */
    .btn-print,
    .d-print-none,
    .alert {
        display: none !important;
    }

    /* ========================================
     * 6. Hide Secondary Photos (label, detail)
     * ======================================== */
    .other_pictures_container,
    .other_pictures_container *,
    .secondary_pics,
    .thumbnail.zoombox,
    a.zoombox {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* ========================================
     * 7. Page Setup
     * ======================================== */
    @page {
        margin: 0.5cm;
        size: A4 portrait;
    }

    /* Try to hide browser-generated headers/footers (limited browser support) */
    @page {
        @top-left { content: none; }
        @top-center { content: none; }
        @top-right { content: none; }
        @bottom-left { content: none; }
        @bottom-center { content: none; }
        @bottom-right { content: none; }
    }

    /* Reset body - compact for single page */
    body {
        font-size: 9pt !important;
        line-height: 1.2 !important;
        color: #000 !important;
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Remove container restrictions */
    .container,
    .global_content_container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ========================================
     * 8. FORCE Bootstrap Grid Layout for Print
     * Bootstrap col-md-* classes don't work in print
     * ======================================== */

    /* Main container row - use flexbox */
    .image_part > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px;
    }

    /* Photo column - 25% width */
    .image_part > .row > .col-md-3 {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        width: 20% !important;
    }

    /* Data column - 75% width */
    .image_part > .row > .col-md-9 {
        flex: 0 0 78% !important;
        max-width: 78% !important;
        width: 78% !important;
    }

    /* Inner data columns */
    .col-md-9 > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .col-md-9 > .row > .col-md-5 {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        width: 48% !important;
    }

    .col-md-9 > .row > .col-md-7 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* ========================================
     * 9. Photo Styling
     * ======================================== */
    .easyzoom {
        width: 100% !important;
        height: auto !important;
    }

    .img_zoomed,
    .img-thumbnail {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        border: 1px solid #ccc !important;
    }

    /* Photo caption */
    .col-md-3 small {
        font-size: 8pt !important;
    }

    /* ========================================
     * 10. Data List Styling
     * ======================================== */
    .herbier_fiche_list {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .herbier_fiche_list li {
        display: flex !important;
        flex-wrap: nowrap !important;
        padding: 0 !important;
        border-bottom: 1px solid #eee;
        font-size: 8pt !important;
        line-height: 1.2 !important;
    }

    .herbier_fiche_list li.row {
        margin: 0 !important;
    }

    /* Labels - 40% width */
    .herbier_fiche_list label,
    .herbier_fiche_list .col-md-5 {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        width: 40% !important;
        font-weight: bold !important;
        color: #333 !important;
        padding: 0 2px !important;
        font-size: 8pt !important;
    }

    /* Values - 60% width */
    .herbier_fiche_list span,
    .herbier_fiche_list .col-md-7,
    .herbier_fiche_list a {
        flex: 0 0 58% !important;
        max-width: 58% !important;
        width: 58% !important;
        padding: 0 2px !important;
        font-size: 8pt !important;
    }

    .colFiche {
        padding: 0 2px !important;
    }

    /* ========================================
     * 11. Internal Notes / Comments Section - Compact
     * ======================================== */
    .commentaire {
        margin-top: 5px !important;
        padding: 3px !important;
        border: 1px solid #ddd !important;
        font-size: 8pt !important;
    }

    .comment_base_herbier_container {
        font-size: 8pt !important;
    }

    /* Comments list (approved comments) - keep visible */
    .comments_div_container {
        margin-top: 5px !important;
    }

    .comments_div_container h4 {
        font-size: 9pt !important;
        margin-bottom: 3px !important;
    }

    /* ========================================
     * 12. Reorder: Comments above Copyright using flexbox order
     * ======================================== */

    /* Make parent a flex container to reorder children */
    .col-md-9 {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Comments first (order 1) - stack vertically */
    .comments_div_container {
        order: 1 !important;
        border: none !important;
        border-top: none !important;
        margin-top: 10px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Copyright last (order 2) */
    .copyright_part {
        order: 2 !important;
        display: block !important;
        visibility: visible !important;
        margin-top: 8px !important;
        padding-top: 5px !important;
        border-top: 1px solid #ccc !important;
        text-align: center !important;
        font-size: 7pt !important;
    }

    /* Hide comments section title "Commentaires utilisateurs :" but keep comments visible */
    .comments_div_container h4 {
        display: none !important;
    }

    /* ========================================
     * 12b. Comment items styling for print - MAX 3 COMMENTS
     * ======================================== */
    .comments_div_container .card {
        display: block !important;
        border: 1px solid #ccc !important;
        border-radius: 3px !important;
        margin-bottom: 5px !important;
        padding: 4px 8px !important;
        background: #fafafa !important;
        page-break-inside: avoid;
    }

    /* Hide comments after the 3rd one (nth-of-type counts only .card elements) */
    .comments_div_container .card:nth-of-type(n+4) {
        display: none !important;
    }

    .comments_div_container .card-body {
        padding: 0 !important;
    }

    .comments_div_container .card-subtitle {
        font-size: 8pt !important;
        font-style: italic !important;
        margin-bottom: 2px !important;
        color: #555 !important;
    }

    .comments_div_container .card-text {
        font-size: 9pt !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    /* ========================================
     * 13. Print Header - Compact
     * ======================================== */
    .print-header {
        display: block !important;
        margin-bottom: 5px !important;
        padding-bottom: 3px !important;
        border-bottom: 1px solid #333 !important;
    }

    .print-header h1 {
        font-size: 12pt !important;
        margin: 0 !important;
    }

    .print-header .text-muted {
        font-size: 8pt !important;
        color: #666 !important;
        margin: 0 !important;
    }

    /* ========================================
     * 14. Page Break Controls
     * ======================================== */
    .herbier_fiche_list,
    .commentaire {
        page-break-inside: avoid;
    }

    /* ========================================
     * 15. Other Determinations Table
     * ======================================== */
    .autres_det {
        margin-top: 10px !important;
    }

    .autres_det table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 9pt !important;
    }

    .autres_det th,
    .autres_det td {
        border: 1px solid #ddd !important;
        padding: 3px !important;
    }

    /* ========================================
     * 16. Force Color Printing
     * ======================================== */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ========================================
     * 17. Links - don't show URLs
     * ======================================== */
    a[href]:after {
        content: none !important;
    }
}