/**
 * TMI Investor Profile System - Print Stylesheet
 * ===============================================
 * Optimized for A4 PDF printing
 * 
 * Usage: This stylesheet is automatically applied when printing
 * via window.print() or browser print functionality.
 */

@media print {
    /* ==========================================================================
       PAGE SETUP
       ========================================================================== */
    
    @page {
        size: A4;
        margin: 2cm 1.5cm;
    }
    
    @page :first {
        margin-top: 1.5cm;
    }
    
    /* ==========================================================================
       RESET & BASE STYLES
       ========================================================================== */
    
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    html, body {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        background: #fff !important;
    }
    
    body {
        font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 11pt;
        line-height: 1.5;
        color: #1a1a1a !important;
    }
    
    /* ==========================================================================
       HIDE NON-PRINT ELEMENTS
       ========================================================================== */
    
    /* Navigation and interactive elements */
    button,
    .btn-primary,
    .no-print,
    nav,
    footer,
    .progress-bar,
    #progress-bar,
    #progress-saved,
    #back-btn,
    #next-btn,
    #toast,
    #welcome-screen,
    #assessment-screen,
    #processing-screen,
    #error-screen {
        display: none !important;
    }
    
    /* Only show report screen */
    #report-screen {
        display: block !important;
    }
    
    /* Hide action buttons in report */
    #report-screen > div:first-child {
        display: none !important;
    }
    
    /* ==========================================================================
       CONTAINER & LAYOUT
       ========================================================================== */
    
    #app {
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .report-content,
    #report-content {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    /* ==========================================================================
       PROFILE CARD
       ========================================================================== */
    
    #profile-card {
        background: linear-gradient(135deg, #0D9488 0%, #065F46 100%) !important;
        color: #fff !important;
        padding: 20pt !important;
        margin-bottom: 20pt !important;
        border-radius: 8pt !important;
        page-break-inside: avoid;
        page-break-after: avoid;
    }
    
    #profile-card p {
        color: #e0f2f1 !important;
        margin: 0 0 4pt 0 !important;
    }
    
    #profile-name {
        font-size: 18pt !important;
        font-weight: bold !important;
        margin: 0 0 8pt 0 !important;
    }
    
    #profile-scores {
        font-size: 9pt !important;
        opacity: 0.9 !important;
    }
    
    /* ==========================================================================
       TYPOGRAPHY
       ========================================================================== */
    
    .report-content h1,
    #report-content h1 {
        font-size: 16pt !important;
        font-weight: 700 !important;
        color: #065F46 !important;
        margin: 24pt 0 12pt 0 !important;
        padding-bottom: 6pt !important;
        border-bottom: 2pt solid #0D9488 !important;
        page-break-after: avoid !important;
    }
    
    .report-content h2,
    #report-content h2 {
        font-size: 13pt !important;
        font-weight: 600 !important;
        color: #0D9488 !important;
        margin: 18pt 0 10pt 0 !important;
        page-break-after: avoid !important;
    }
    
    .report-content h3,
    #report-content h3 {
        font-size: 11pt !important;
        font-weight: 600 !important;
        color: #1F2937 !important;
        margin: 14pt 0 8pt 0 !important;
        page-break-after: avoid !important;
    }
    
    .report-content p,
    #report-content p {
        font-size: 10pt !important;
        line-height: 1.6 !important;
        margin: 0 0 8pt 0 !important;
        text-align: justify !important;
        orphans: 3 !important;
        widows: 3 !important;
    }
    
    .report-content strong,
    #report-content strong {
        font-weight: 600 !important;
        color: #1F2937 !important;
    }
    
    .report-content em,
    #report-content em {
        font-style: italic !important;
    }
    
    /* ==========================================================================
       LISTS
       ========================================================================== */
    
    .report-content ul,
    .report-content ol,
    #report-content ul,
    #report-content ol {
        margin: 8pt 0 12pt 20pt !important;
        padding: 0 !important;
    }
    
    .report-content li,
    #report-content li {
        font-size: 10pt !important;
        line-height: 1.5 !important;
        margin: 0 0 4pt 0 !important;
        page-break-inside: avoid !important;
    }
    
    .report-content ul li,
    #report-content ul li {
        list-style-type: disc !important;
    }
    
    .report-content ol li,
    #report-content ol li {
        list-style-type: decimal !important;
    }
    
    /* Nested lists */
    .report-content li ul,
    .report-content li ol,
    #report-content li ul,
    #report-content li ol {
        margin: 4pt 0 4pt 16pt !important;
    }
    
    /* ==========================================================================
       TABLES
       ========================================================================== */
    
    .report-content table,
    #report-content table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin: 12pt 0 !important;
        page-break-inside: avoid !important;
        font-size: 9pt !important;
    }
    
    .report-content th,
    #report-content th {
        background: #f0fdfa !important;
        color: #065F46 !important;
        font-weight: 600 !important;
        text-align: left !important;
        padding: 8pt 10pt !important;
        border: 1pt solid #d1d5db !important;
    }
    
    .report-content td,
    #report-content td {
        padding: 6pt 10pt !important;
        border: 1pt solid #d1d5db !important;
        vertical-align: top !important;
    }
    
    .report-content tr:nth-child(even) td,
    #report-content tr:nth-child(even) td {
        background: #f9fafb !important;
    }
    
    /* ==========================================================================
       BLOCKQUOTES
       ========================================================================== */
    
    .report-content blockquote,
    #report-content blockquote {
        margin: 12pt 0 !important;
        padding: 10pt 16pt !important;
        border-left: 3pt solid #D97706 !important;
        background: #fffbeb !important;
        font-style: italic !important;
        color: #4b5563 !important;
        page-break-inside: avoid !important;
    }
    
    .report-content blockquote p,
    #report-content blockquote p {
        margin: 0 !important;
    }
    
    /* ==========================================================================
       CODE BLOCKS
       ========================================================================== */
    
    .report-content pre,
    #report-content pre {
        background: #f3f4f6 !important;
        padding: 10pt !important;
        border-radius: 4pt !important;
        font-family: 'Courier New', monospace !important;
        font-size: 9pt !important;
        overflow-wrap: break-word !important;
        white-space: pre-wrap !important;
        page-break-inside: avoid !important;
    }
    
    .report-content code,
    #report-content code {
        font-family: 'Courier New', monospace !important;
        font-size: 9pt !important;
        background: #f3f4f6 !important;
        padding: 1pt 3pt !important;
        border-radius: 2pt !important;
    }
    
    /* ==========================================================================
       HORIZONTAL RULES
       ========================================================================== */
    
    .report-content hr,
    #report-content hr {
        border: none !important;
        border-top: 1pt solid #e5e7eb !important;
        margin: 16pt 0 !important;
    }
    
    /* ==========================================================================
       PAGE BREAKS
       ========================================================================== */
    
    /* Prevent breaking inside important elements */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid !important;
    }
    
    p, li, blockquote, pre, table {
        page-break-inside: avoid !important;
    }
    
    /* Keep headings with following content */
    h1 + *, h2 + *, h3 + * {
        page-break-before: avoid !important;
    }
    
    /* Force page breaks before major sections */
    .page-break-before {
        page-break-before: always !important;
    }
    
    /* ==========================================================================
       LINKS
       ========================================================================== */
    
    .report-content a,
    #report-content a {
        color: #0D9488 !important;
        text-decoration: underline !important;
    }
    
    /* Show URL after links */
    .report-content a[href^="http"]:after,
    #report-content a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        color: #6b7280;
    }
    
    /* ==========================================================================
       ARABIC TEXT
       ========================================================================== */
    
    [dir="rtl"],
    .arabic-text {
        direction: rtl !important;
        text-align: right !important;
        font-family: 'Traditional Arabic', 'Scheherazade', serif !important;
    }
    
    /* ==========================================================================
       FOOTER
       ========================================================================== */
    
    .print-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 8pt;
        color: #9ca3af;
        padding: 8pt 0;
        border-top: 0.5pt solid #e5e7eb;
    }
    
    /* ==========================================================================
       SPECIFIC SECTION STYLING
       ========================================================================== */
    
    /* Action items / checklist */
    .report-content li:has(input[type="checkbox"]),
    #report-content li:has(input[type="checkbox"]) {
        list-style: none !important;
        padding-left: 0 !important;
    }
    
    /* Checkbox symbols */
    .report-content li input[type="checkbox"],
    #report-content li input[type="checkbox"] {
        display: none !important;
    }
    
    .report-content li input[type="checkbox"] + label:before,
    #report-content li input[type="checkbox"] + label:before {
        content: "☐ " !important;
        font-size: 12pt !important;
    }
    
    .report-content li input[type="checkbox"]:checked + label:before,
    #report-content li input[type="checkbox"]:checked + label:before {
        content: "☑ " !important;
    }
    
    /* Du'a section styling */
    .dua-section {
        background: #f0fdfa !important;
        padding: 12pt !important;
        border-radius: 6pt !important;
        margin: 12pt 0 !important;
        text-align: center !important;
    }
    
    .dua-arabic {
        font-size: 14pt !important;
        font-family: 'Traditional Arabic', serif !important;
        direction: rtl !important;
        margin-bottom: 8pt !important;
        color: #065F46 !important;
    }
    
    .dua-transliteration {
        font-style: italic !important;
        color: #4b5563 !important;
        margin-bottom: 4pt !important;
    }
    
    .dua-translation {
        color: #1F2937 !important;
    }
    
    /* ==========================================================================
       UTILITIES
       ========================================================================== */
    
    .text-center {
        text-align: center !important;
    }
    
    .text-right {
        text-align: right !important;
    }
    
    .font-bold {
        font-weight: 700 !important;
    }
    
    .mt-4 {
        margin-top: 12pt !important;
    }
    
    .mb-4 {
        margin-bottom: 12pt !important;
    }
    
    /* Hide Tailwind utility classes that shouldn't print */
    .hidden {
        display: none !important;
    }
}

/* ==========================================================================
   FALLBACK FOR BROWSERS WITHOUT @page SUPPORT
   ========================================================================== */

@media print and (max-width: 100%) {
    body {
        width: 210mm;
        min-height: 297mm;
    }
}