/**
 * Print Styles for KTMArena Clone
 * Optimized for device comparison tables and general print layouts
 */

@media print {
    /* Force light mode colors */
    * {
        background: white !important;
        color: black !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Hide unwanted elements */
    header, footer, nav, .header, .footer,
    .device-selection-container,
    .print-comparison-btn,
    .print-specs-btn,
    .mobile-menu-toggle,
    .search-results,
    .compare-bar,
    .notification,
    .breadcrumbs,
    .sidebar,
    .comments-section,
    .rating-section,
    .social-share {
        display: none !important;
    }
    
    /* Reset body for maximum space usage */
    body {
        margin: 0 !important;
        padding: 5pt !important;
        font-family: Arial, sans-serif !important;
        font-size: 8pt !important;
        line-height: 1.2 !important;
    }
    
    /* Show comparison table */
    .comparison-table-container {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Device page hero section for print */
    .device-hero {
        display: block !important;
        text-align: center !important;
        margin-bottom: 15pt !important;
        page-break-after: avoid !important;
    }
    
    .device-hero img {
        max-width: 150pt !important;
        height: auto !important;
        margin: 0 auto 10pt auto !important;
    }
    
    .device-hero h1 {
        font-size: 14pt !important;
        font-weight: bold !important;
        margin: 0 0 10pt 0 !important;
        text-align: center !important;
    }
    
    /* Category headers - more compact */
    .spec-category h3 {
        background: #f0f0f0 !important;
        color: black !important;
        padding: 4pt !important;
        margin: 5pt 0 2pt 0 !important;
        font-size: 10pt !important;
        font-weight: bold !important;
        border: 1px solid #000 !important;
        text-align: center !important;
    }
    
    /* Table styling - optimized for space */
    .specs-table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 8pt !important;
        background: white !important;
        table-layout: auto !important;
        break-inside: auto !important;
    }
    
    .specs-table th {
        background: #e0e0e0 !important;
        color: black !important;
        border: 1px solid #000 !important;
        padding: 3pt !important;
        font-size: 7pt !important;
        font-weight: bold !important;
        text-align: center !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    .specs-table td {
        background: white !important;
        color: black !important;
        border: 1px solid #000 !important;
        padding: 3pt !important;
        font-size: 6pt !important;
        vertical-align: top !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        line-height: 1.1 !important;
    }
    
    /* First column (specification names) - slightly larger */
    .specs-table td:first-child {
        background: #f8f9fa !important;
        font-weight: 500 !important;
        font-size: 7pt !important;
        min-width: 80pt !important;
    }
    
    /* Device specifications table (single device page) */
    .device-specs-table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-bottom: 10pt !important;
    }
    
    .device-specs-table th,
    .device-specs-table td {
        border: 1px solid #000 !important;
        padding: 4pt !important;
        font-size: 8pt !important;
        text-align: left !important;
    }
    
    .device-specs-table th {
        background: #f0f0f0 !important;
        font-weight: bold !important;
        width: 30% !important;
    }
    
    /* Page settings - minimal margins for maximum space */
    @page {
        size: A4 landscape;
        margin: 0.3cm;
    }
    
    /* Portrait mode for device pages - use a separate @page rule */
    @page device-page {
        size: A4 portrait;
        margin: 0.5cm;
    }
    
    /* Allow page breaks within tables for better space usage */
    .specs-table {
        page-break-inside: auto !important;
    }
    
    /* Allow rows to break across pages if needed */
    .specs-table tr {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }
    
    /* Allow categories to break across pages */
    .spec-category {
        page-break-inside: auto !important;
        break-inside: auto !important;
        margin-bottom: 8pt !important;
    }
    
    /* Optimize column widths for better fit */
    .specs-table th:first-child,
    .specs-table td:first-child {
        width: 20% !important;
        max-width: 20% !important;
    }
    
    /* Device columns should share remaining space equally */
    .specs-table th:not(:first-child),
    .specs-table td:not(:first-child) {
        width: auto !important;
        min-width: 60pt !important;
    }
    
    /* Force text to wrap and use available space */
    .specs-table th,
    .specs-table td {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    
    /* Reduce spacing between elements */
    .table-responsive {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure tables use full width */
    .table-responsive .specs-table {
        min-width: 100% !important;
    }
    
    /* Print title for documents */
    .print-title {
        font-size: 16pt !important;
        font-weight: bold !important;
        text-align: center !important;
        margin-bottom: 15pt !important;
        border-bottom: 2px solid #000 !important;
        padding-bottom: 5pt !important;
    }
    
    /* General content styling */
    h1, h2, h3, h4, h5, h6 {
        color: black !important;
        page-break-after: avoid !important;
    }
    
    p, div {
        orphans: 3 !important;
        widows: 3 !important;
    }
    
    /* Links should not show URLs in print for device pages */
    a[href]:after {
        content: "";
    }
    
    /* Also hide URLs for internal navigation */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }
}