/* Weathertop Print Styles */
/* This file controls the print layout for the Weathertop application. */
/* It is designed to produce professional, client-ready PDF reports. */

@media print {
    /* ==========================================
       1. Global Resets & Hiding Elements
       ========================================== */
    
    /* Hide all navigation, buttons, and interactive elements */
    header,
    nav,
    footer,
    .mobile-nav-container,
    .back-button,
    .print-button,
    .pdf-button-secondary,
    .sidebar-actions,
    .more-button,
    .user-menu,
    .filter-apply-button,
    .load-more-btn,
    .search-row,
    .documents-filters-container,
    .secondary-filters,
    .nav-tab,
    .logo,
    #secondary-filters-toggle,
    .expand-icon,
    .close-modal,
    .modal-header .close-modal {
        display: none !important;
    }

    /* Reset body and main container */
    body {
        background: white;
        color: black;
        font-family: 'Inter', sans-serif;
        font-size: 10pt;
        line-height: 1.4;
        margin: 0;
        padding: 0;
    }

    main {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }

    /* ==========================================
       2. Print Header (The "Letterhead")
       ========================================== */
    
    /* Inject a print-only header */
    body::before {
        content: "Weathertop";
        display: block;
        font-size: 24pt;
        font-weight: 800;
        color: #000;
        border-bottom: 3px solid #000;
        padding-bottom: 5px;
        margin-bottom: 0px; /* Reduced margin */
        letter-spacing: -1px;
        /* Logo integration */
        background-image: url('/logo.PNG');
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 40px auto; /* Adjust size as needed */
        padding-left: 70px; /* Space for logo */
        line-height: 60px; /* Align text with logo height */
    }

    /* Add printed date after header */
    body::after {
        content: "Printed: " attr(data-print-date);
        display: block;
        font-size: 9pt;
        color: #666;
        margin-top: 5px;
        margin-bottom: 15px;
        text-align: right;
    }

    /* ==========================================
       3. Layout & Grid
       ========================================== */

    .document-detail-view {
        display: block;
        width: 100%;
        max-width: 100%;
        background: white;
    }

    .document-detail-body {
        display: block; /* Changed from grid to block for float layout */
    }

    /* ==========================================
       4. Sidebar Styling
       ========================================== */
    
    .document-sidebar {
        display: block !important;
        background-color: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        padding: 15px;
        border-radius: 8px;
        font-size: 9pt;
        border: 1px solid #ddd;
        
        /* Float layout for first-page-only effect */
        float: left;
        width: 250px;
        margin-right: 30px;
        margin-bottom: 20px;
    }

    .sidebar-card {
        background: transparent;
        border: none;
        padding: 0;
        margin-bottom: 15px;
        box-shadow: none;
        page-break-inside: avoid;
    }

    .sidebar-section-title {
        font-size: 8pt;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #555;
        margin-bottom: 8px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 4px;
        font-weight: 700;
    }

    .sidebar-meta-item {
        margin-bottom: 6px;
        display: flex;
        flex-direction: column;
    }

    .meta-label {
        font-size: 7.5pt;
        color: #666;
        text-transform: uppercase;
    }

    .meta-value {
        font-size: 9pt;
        font-weight: 500;
        color: #000;
    }

    /* ==========================================
       5. Main Content Styling
       ========================================== */
    
    .document-main-content {
        padding: 0;
        /* No specific width needed, it will wrap around float */
    }

    .document-detail-header {
        margin-bottom: 20px; /* Reduced margin */
        border-bottom: none;
        padding-bottom: 0;
        display: block !important;
    }

    .document-detail-title {
        font-size: 18pt;
        font-weight: 700;
        color: #000;
        margin: 0;
        line-height: 1.3;
    }

    .content-section {
        margin-bottom: 10px;
        page-break-inside: avoid;
    }

    /* Specific styling for Stages Section to force new page and columns */
    #stages-section {
        page-break-before: always;
        display: block;
    }

    #stages-section .expandable-content {
        column-count: 2;
        column-gap: 2rem;
        column-fill: balance; /* Balance columns to ensure 2-column layout even for short lists */
        display: block;
    }

    .content-section-title {
        font-size: 12pt;
        font-weight: 700;
        border-bottom: 2px solid #eee;
        padding-bottom: 4px;
        margin-bottom: 2px;
        color: #000;
    }

    .content-text {
        font-size: 10pt;
        text-align: justify;
        color: #000;
    }

    /* ==========================================
       6. Components & Compact Lists
       ========================================== */

    /* Hide elements marked for print hiding */
    .hide-on-print {
        display: none !important;
    }

    /* Expandable Sections - Always Expanded */
    .expandable-content {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .expandable-header {
        pointer-events: none;
        padding-left: 0;
    }

    /* Minimal List Items */
    .minimal-list-item {
        page-break-inside: avoid;
        border-bottom: 1px solid #eee;
        padding: 5px 0;
    }

    .minimal-list-item .list-title {
        font-weight: 600;
        font-size: 9.5pt;
    }

    /* Stages List - Compact inline view with two columns */
    .stages-list {
        font-size: 8pt;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* More specific selector to override minimal-list-item styles */
    .stages-list .stage-list-item {
        display: block;
        margin-bottom: 1px;
        page-break-inside: avoid;
        border-bottom: none !important;
        padding: 0 !important;
        line-height: 1.3;
    }

    .stage-header-row {
        display: block;
    }

    .list-date {
        font-weight: 600; /* Made bold */
        color: #000;
        display: inline;
        margin-right: 6px;
        font-size: 8pt; /* Same size as stage */
    }

    .stage-details {
        display: none !important; /* Hide actions completely */
    }

    .list-phase {
        font-weight: 400; /* Normal weight to match date size */
        display: inline;
        margin-right: 0;
        font-size: 8pt; /* Same size as date */
    }

    .list-committee {
        display: none;
    }

    .stage-description {
        display: none;
    }

    .stage-action {
        display: none !important; /* Hide actions */
    }

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