/* ==========================================================================
   Print Styles
   
   Best Practices:
   - Use @media print for all print-specific styles
   - Override overflow:hidden on containers to allow multi-page content flow
   - Use break-inside: avoid to prevent awkward page breaks within elements
   - Hide non-essential UI elements (navigation, buttons, etc.)
   ========================================================================== */

/* ==========================================================================
   Screen-only Styles (Collapsible Content)
   ========================================================================== */

.collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.collapsible-content.collapsed {
    max-height: 0;
    opacity: 0;
}

.collapsible-content.expanded {
    max-height: 2000px; /* Large enough to accommodate content */
    opacity: 1;
}

/* ==========================================================================
   Print Media Styles
   ========================================================================== */

@media print {
    /* Page Setup */
    @page {
        margin: 0.25in;
        size: auto;
    }

    /* --------------------------------------------------------------------------
       Critical: Enable Multi-Page Content Flow
       -------------------------------------------------------------------------- */
    html,
    body,
    html:has(.page),
    body:has(.page),
    .page,
    .mud-layout,
    .mud-main-content,
    .mud-tabs-panels {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        position: static !important;
    }

    /* --------------------------------------------------------------------------
       Typography & Colors - Compact for Print
       -------------------------------------------------------------------------- */
    * {
        color: black !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html {
        font: 8pt/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }

    /* --------------------------------------------------------------------------
       Hide Non-Essential UI Elements
       -------------------------------------------------------------------------- */
    .noprint,
    .sidebar,
    .mud-appbar,
    .mud-drawer,
    .mud-tabs-tabbar,
    .mud-avatar,
    .mud-chip,
    .mud-button,
    .mud-icon-button,
    button {
        display: none !important;
    }

    /* --------------------------------------------------------------------------
       Compact Header for Print
       -------------------------------------------------------------------------- */
    .mud-paper[elevation="0"] {
        padding: 4px !important;
        margin-bottom: 8px !important;
    }

    /* --------------------------------------------------------------------------
       Compact Layout - Reduce Spacing
       -------------------------------------------------------------------------- */
    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .mud-tabs-panels {
        padding: 0 !important;
    }

    /* Reduce inner tab panel container padding, but not the cards themselves */
    .mud-tabs-panels > .mud-tabpanel > .pa-4 {
        padding: 4px !important;
    }

    .mud-tabs-panels .pa-4 {
        padding: 16px !important;
    }

    /* Reduce grid spacing */
    .mud-grid {
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 4px !important;
    }

    .mud-grid-spacing-xs-4 {
        margin: 0 !important;
    }

    .mud-grid-spacing-xs-4 > .mud-grid-item {
        padding: 2px 4px !important;
    }

    /* Compact cards - ensure consistent margins and padding for ALL sections */
    .mud-paper {
        padding: 16px !important;
        margin: 0 0 4px 0 !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .mud-paper.pa-4,
    .mud-paper.pa-3 {
        padding: 16px !important;
    }

    /* Reduce margins on text elements */
    .mb-3 {
        margin-bottom: 4px !important;
    }

    .mb-2 {
        margin-bottom: 2px !important;
    }

    .mb-1 {
        margin-bottom: 1px !important;
    }

    .mt-2 {
        margin-top: 2px !important;
    }

    /* Compact section headers */
    .mud-typography-h6 {
        font-size: 9pt !important;
        font-weight: bold !important;
        margin-bottom: 4px !important;
    }

    .mud-typography-body2 {
        font-size: 8pt !important;
        line-height: 1.2 !important;
    }

    .mud-typography-subtitle1 {
        font-size: 8pt !important;
        font-weight: bold !important;
    }

    /* Hide decorative icons in headers to save space */
    .mud-paper > .mud-stack > .mud-icon-root,
    .mud-stack > .mud-stack > .mud-icon-root {
        display: none !important;
    }

    /* --------------------------------------------------------------------------
       Full Width Layout for Print
       -------------------------------------------------------------------------- */
    .mud-grid-item-xs-12.mud-grid-item-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .mud-grid-item-xs-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* --------------------------------------------------------------------------
       Collapsible Content: Force Visible When Printing
       -------------------------------------------------------------------------- */
    .collapsible-content,
    .collapsible-content.collapsed,
    .collapsible-content.expanded {
        max-height: none !important;
        height: auto !important;
        opacity: 1 !important;
        overflow: visible !important;
        display: block !important;
        visibility: visible !important;
        transition: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Contact cards grid */
    .collapsible-content > .mud-grid {
        padding: 0 !important;
        margin: 0 !important;
        gap: 4px !important;
    }

    /* Contact cards - full width */
    .collapsible-content .mud-grid-item-xs-12.mud-grid-item-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 2px 4px 2px 0 !important;
    }

    /* Contact card papers - ensure right border is visible */
    .collapsible-content .mud-paper {
        padding: 16px !important;
        margin: 0 !important;
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        max-width: calc(100% - 8px) !important;
        box-sizing: border-box !important;
    }

    /* Hide the outer "Additional Project Info" container border */
    .mud-grid-item-xs-12 > .mud-paper:has(.collapsible-content) {
        border: none !important;
        padding: 0 4px !important;
        margin-top: 12px !important;
        break-before: auto;
        page-break-before: auto;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Hide the outermost container borders */
    .mud-tabs {
        border: none !important;
        box-shadow: none !important;
    }

    .mud-tabs-panels {
        border: none !important;
    }

    /* --------------------------------------------------------------------------
       Always show Project Info tab when printing, hide other tabs
       -------------------------------------------------------------------------- */
    
    /* Hide all content inside MudTabs panels by default */
    .mud-tabs-panels .mud-tabpanel {
        display: none !important;
    }

    /* Show the Project Info content container and its parent tab panel */
    #project-info-content {
        display: block !important;
    }
    
    /* Show the tab panel that contains project-info-content */
    .mud-tabpanel:has(#project-info-content) {
        display: block !important;
    }

    /* --------------------------------------------------------------------------
       Grid Layout for Print
       -------------------------------------------------------------------------- */
    .mud-grid {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    /* --------------------------------------------------------------------------
       Page Break Control - Allow content to flow naturally
       Only prevent breaks inside small elements like table rows
       -------------------------------------------------------------------------- */
    .mud-paper,
    .mud-card {
        break-inside: auto;
        page-break-inside: auto;
    }

    /* Only prevent breaks inside contact cards (small sections) */
    .collapsible-content .mud-paper {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .mud-grid-item {
        break-after: auto;
        page-break-after: auto;
        break-inside: auto;
        page-break-inside: auto;
    }

    /* --------------------------------------------------------------------------
       Table Print Styles
       -------------------------------------------------------------------------- */
    table {
        border-collapse: collapse;
        width: 100%;
        font-size: 8pt;
        page-break-inside: auto;
    }

    tr {
        page-break-inside: avoid !important;
        page-break-after: auto;
    }

    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 4px;
    }

    /* --------------------------------------------------------------------------
       Print Header - Add a simple title
       -------------------------------------------------------------------------- */
    .mud-tabs-panels::before {
        content: "Request Details";
        display: block;
        font-size: 12pt;
        font-weight: bold;
        margin-bottom: 8px;
        border-bottom: 2px solid black;
        padding-bottom: 4px;
    }

    /* --------------------------------------------------------------------------
       Info row label width - more compact
       -------------------------------------------------------------------------- */
    .mud-stack[row] .mud-typography-body2[style*="min-width: 120px"] {
        min-width: 100px !important;
    }
}