/**
 * TeacherAI Lesson Print Stylesheet
 * 
 * ONE clean print format for launch.
 * Proper page breaks, professional formatting, student-ready output.
 * 
 * @version 1.2.1
 * @author Claude 175 | December 9, 2025
 * @modified Claude 178 | December 10, 2025
 *   - Enhanced page break orphan control for headers
 *   - Added print-only footer (replaces unsupported @page @bottom-right)
 *   - Added break-after/break-before modern CSS properties
 * @modified Claude 191 + Tony | December 20, 2025
 *   - Hide PHP header card for print (lesson_content is source of truth)
 *   - Attempted gold highlight for Learning Objectives (used :contains - invalid CSS)
 * @modified Claude 192 + Tony | December 20, 2025
 *   - FIXED: Replaced invalid :contains() selectors with .learning-objectives class
 *   - Claude-First architecture: AI generates class, CSS targets class
 *   - Removed overly broad p + ul selector that gold-highlighted all lists
 *   - Teaching Tools note styled for print
 * 
 * TEAM TEACHAI FOREVER! 💜
 */

@media print {
    
    /* ═══════════════════════════════════════════════════════════════
       HIDE EVERYTHING NOT NEEDED FOR PRINT
       ═══════════════════════════════════════════════════════════════ */
    
    /* Hide sidebars */
    .platform-sidebar,
    .platform-sidebar-left,
    .platform-sidebar-right,
    #left-sidebar,
    #right-sidebar {
        display: none !important;
    }
    
    /* Hide navigation and headers */
    .platform-mobile-header,
    .mobile-menu-toggle,
    .platform-hamburger,
    header,
    nav,
    .site-header,
    .nav-links {
        display: none !important;
    }
    
    /* Hide footer */
    footer,
    .site-footer,
    #footer {
        display: none !important;
    }
    
    /* Hide action buttons */
    .bg-white.rounded-xl.shadow-md.border.border-gray-200.p-4.flex.flex-wrap.gap-3,
    #action-status,
    button,
    .btn,
    [onclick="window.print()"] {
        display: none !important;
    }
    
    /* Hide tool sections (not printing tools, just lessons) */
    .tool-tiles-grid,
    #tool-generation-status,
    #tool-content-card,
    .teaching-tools-section {
        display: none !important;
    }
    
    /* Hide anonymous warning */
    .bg-amber-50.border.border-amber-200 {
        display: none !important;
    }
    
    /* Hide modals */
    .modal,
    .modal-overlay,
    #email-capture-modal,
    #upgrade-modal,
    #tool-display-modal {
        display: none !important;
    }
    
    /* Hide upgrade prompts */
    .upgrade-prompt,
    .trial-prompt {
        display: none !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       CLAUDE 191: HIDE PHP HEADER CARD FOR PRINT
       lesson_content is the source of truth - no duplicate headers
       ═══════════════════════════════════════════════════════════════ */
    
    /* Hide the PHP-rendered header card (title, badges, AI-standards) */
    /* This is the first card before #lesson-content-card */
    .platform-content-pane > .content-wrapper > .bg-white.rounded-xl.shadow-md.border.border-gray-200.p-6.mb-6:first-child {
        display: none !important;
    }
    
    /* Also hide by more specific selectors in case structure varies */
    .lesson-results-page .bg-white.rounded-xl.shadow-md.border.border-gray-200.p-6.mb-6:has(> h1):has(> .inline-flex) {
        display: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       PAGE SETUP
       ═══════════════════════════════════════════════════════════════ */
    
    @page {
        size: letter;
        margin: 0.75in 1in 1in 1in; /* Extra bottom margin for footer */
    }
    
    html, body {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        font-size: 12pt !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       MAIN LAYOUT - FULL WIDTH
       ═══════════════════════════════════════════════════════════════ */
    
    .platform-wrapper,
    .platform-grid,
    .platform-main,
    .lesson-results-page {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        grid-template-columns: 1fr !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       LESSON CONTENT CARD - THE SOURCE OF TRUTH FOR PRINT
       ═══════════════════════════════════════════════════════════════ */
    
    #lesson-content-card {
        display: block !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
    }
    
    .lesson-content-workbench {
        max-width: 100% !important;
        font-family: "Times New Roman", Times, serif !important;
        font-size: 12pt !important;
        line-height: 1.5 !important;
        color: #000 !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       LESSON HEADER (inside lesson_content)
       ═══════════════════════════════════════════════════════════════ */
    
    .lesson-content-workbench .lesson-header {
        border-bottom: 2px solid #000 !important;
        padding-bottom: 10px !important;
        margin-bottom: 15px !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       TYPOGRAPHY - PROFESSIONAL FORMATTING
       ═══════════════════════════════════════════════════════════════ */
    
    /* Lesson title (h1) */
    .lesson-content-workbench h1 {
        font-size: 18pt !important;
        font-weight: bold !important;
        color: #000 !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        border: none !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }
    
    .lesson-content-workbench h2 {
        font-size: 14pt !important;
        font-weight: bold !important;
        margin: 18px 0 8px 0 !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }
    
    .lesson-content-workbench h3 {
        font-size: 13pt !important;
        font-weight: bold !important;
        margin: 15px 0 6px 0 !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }
    
    .lesson-content-workbench h4,
    .lesson-content-workbench h5,
    .lesson-content-workbench h6 {
        font-size: 12pt !important;
        font-weight: bold !important;
        margin: 12px 0 5px 0 !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }
    
    .lesson-content-workbench p {
        margin: 0 0 10px 0 !important;
        text-align: left !important;
        orphans: 3 !important;
        widows: 3 !important;
    }
    
    .lesson-content-workbench strong,
    .lesson-content-workbench b {
        font-weight: bold !important;
    }
    
    .lesson-content-workbench em,
    .lesson-content-workbench i {
        font-style: italic !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       CLAUDE 192: GOLD HIGHLIGHT FOR LEARNING OBJECTIVES
       Using .learning-objectives class (Claude-First architecture)
       AI generates the wrapper div, CSS targets it reliably
       ═══════════════════════════════════════════════════════════════ */
    
    .lesson-content-workbench .learning-objectives {
        background-color: #fef9e7 !important; /* Light gold */
        padding: 12px 15px !important;
        border-left: 4px solid #f59e0b !important; /* amber-500 */
        margin: 15px 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .lesson-content-workbench .learning-objectives h2 {
        margin-top: 0 !important;
        color: #92400e !important; /* amber-800 for contrast */
    }
    
    .lesson-content-workbench .learning-objectives ul {
        margin-bottom: 0 !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       CLAUDE 192: TEACHING TOOLS NOTE STYLING
       Subtle reminder at end of lesson
       ═══════════════════════════════════════════════════════════════ */
    
    .lesson-content-workbench .teaching-tools-note {
        margin-top: 20px !important;
        padding: 10px 15px !important;
        border: 1px dashed #9ca3af !important; /* gray-400 */
        background-color: #f9fafb !important; /* gray-50 */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .lesson-content-workbench .teaching-tools-note p {
        margin: 0 !important;
        font-size: 10pt !important;
        color: #6b7280 !important; /* gray-500 */
    }
    
    /* ═══════════════════════════════════════════════════════════════
       LISTS - KEEP TOGETHER
       ═══════════════════════════════════════════════════════════════ */
    
    .lesson-content-workbench ul,
    .lesson-content-workbench ol {
        margin: 10px 0 15px 25px !important;
        padding: 0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    .lesson-content-workbench li {
        margin-bottom: 6px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        orphans: 2 !important;
        widows: 2 !important;
    }
    
    /* Nested lists */
    .lesson-content-workbench ul ul,
    .lesson-content-workbench ol ol,
    .lesson-content-workbench ul ol,
    .lesson-content-workbench ol ul {
        margin: 5px 0 5px 20px !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       PAGE BREAK CONTROL - ENHANCED ORPHAN PREVENTION (Claude 178)
       ═══════════════════════════════════════════════════════════════ */
    
    /* Never break right after a heading - using both old and new syntax */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid !important;
        break-after: avoid !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    /* Never break inside these elements */
    p, li, blockquote, pre, code, table {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    /* Keep headers with following content - prevent orphaned titles */
    h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + * {
        page-break-before: avoid !important;
        break-before: avoid !important;
    }
    
    /* Keep header + first paragraph/list together as a unit */
    h2 + p, h2 + ul, h2 + ol,
    h3 + p, h3 + ul, h3 + ol {
        page-break-before: avoid !important;
        break-before: avoid !important;
    }
    
    /* Section containers should try to stay together */
    .lesson-content-workbench > div,
    .lesson-content-workbench > section {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       TABLES - READABLE FORMAT
       ═══════════════════════════════════════════════════════════════ */
    
    .lesson-content-workbench table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin: 15px 0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    .lesson-content-workbench th,
    .lesson-content-workbench td {
        border: 1px solid #333 !important;
        padding: 8px !important;
        text-align: left !important;
        font-size: 11pt !important;
    }
    
    .lesson-content-workbench th {
        background: #f0f0f0 !important;
        font-weight: bold !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       SUPPLY DOTS (Claude 163 feature)
       ═══════════════════════════════════════════════════════════════ */
    
    .supply-dot,
    .need-dot {
        display: inline-block !important;
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        margin-right: 5px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    .supply-dot {
        background-color: #22c55e !important; /* Green - have it */
    }
    
    .need-dot {
        background-color: #eab308 !important; /* Yellow - need it */
    }
    
    /* ═══════════════════════════════════════════════════════════════
       IMAGES AND MEDIA
       ═══════════════════════════════════════════════════════════════ */
    
    .lesson-content-workbench img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    
    /* Hide emojis that might print weird */
    .lesson-content-workbench img.emoji {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       LINKS - SHOW URL FOR REFERENCE
       ═══════════════════════════════════════════════════════════════ */
    
    .lesson-content-workbench a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    
    .lesson-content-workbench a[href^="http"]:after {
        content: " (" attr(href) ")" !important;
        font-size: 9pt !important;
        color: #666 !important;
    }
    
    /* Don't show URLs for internal links */
    .lesson-content-workbench a[href^="/"]:after,
    .lesson-content-workbench a[href^="#"]:after {
        content: "" !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       PRINT-ONLY FOOTER (Claude 178)
       Show branding - @page @bottom-right not widely supported
       ═══════════════════════════════════════════════════════════════ */
    
    .print-only-footer {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 9pt !important;
        color: #666 !important;
        padding: 10px 0 !important;
        border-top: 1px solid #ccc !important;
        background: white !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════
       ENSURE BLACK & WHITE (with exceptions)
       ═══════════════════════════════════════════════════════════════ */
    
    * {
        color: #000 !important;
        box-shadow: none !important;
    }
    
    /* Keep white backgrounds by default */
    body, html, .platform-wrapper, #lesson-content-card, .lesson-content-workbench {
        background: white !important;
    }
    
    /* Exception for supply dots - keep colors */
    .supply-dot {
        background-color: #22c55e !important;
    }
    
    .need-dot {
        background-color: #eab308 !important;
    }
    
    /* Exception for table headers */
    .lesson-content-workbench th {
        background: #f0f0f0 !important;
    }
    
    /* Exception for print footer */
    .print-only-footer {
        color: #666 !important;
    }
    
    /* Exception for Learning Objectives gold highlight */
    .lesson-content-workbench .learning-objectives {
        background-color: #fef9e7 !important;
        border-left-color: #f59e0b !important;
    }
    
    .lesson-content-workbench .learning-objectives h2 {
        color: #92400e !important;
    }
    
    /* Exception for Teaching Tools note */
    .lesson-content-workbench .teaching-tools-note {
        background-color: #f9fafb !important;
        border-color: #9ca3af !important;
    }
    
    .lesson-content-workbench .teaching-tools-note p {
        color: #6b7280 !important;
    }
}

/* Hide print-only footer on screen */
.print-only-footer {
    display: none;
}