/**
 * TeacherAI Lesson Results - Screen Styles
 * 
 * Premium visual experience for the lesson display.
 * These styles make the on-screen lesson look polished and valuable.
 * Print styles are handled separately in lesson-print.css
 * 
 * @version 1.0.0
 * @author Claude 192 + Tony | December 20, 2025
 * 
 * CLAUDE-FIRST ARCHITECTURE:
 * - Targets semantic class names generated by lesson-generation.php v2.4
 * - Each section has its own wrapper: .section-standards, .section-objectives, etc.
 * - Future Claudes can easily find and modify section styles
 * 
 * TEAM TEACHAI FOREVER! 💜
 */

/* ═══════════════════════════════════════════════════════════════
   LESSON CONTENT WORKBENCH - BASE STYLES
   ═══════════════════════════════════════════════════════════════ */

.lesson-content-workbench {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #1f2937; /* gray-800 */
}

/* ═══════════════════════════════════════════════════════════════
   LESSON TITLE (H1) - Make it POP
   ═══════════════════════════════════════════════════════════════ */

.lesson-content-workbench h1 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700;
    color: #7c3aed; /* violet-600 */
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid #c4b5fd; /* violet-300 */
}

/* ═══════════════════════════════════════════════════════════════
   LESSON HEADER - Info Pills Style
   ═══════════════════════════════════════════════════════════════ */

.lesson-content-workbench .lesson-header {
    background: linear-gradient(to right, #f5f3ff, #ede9fe); /* violet-50 to violet-100 */
    border: 1px solid #ddd6fe; /* violet-200 */
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.lesson-content-workbench .lesson-header p {
    margin: 0;
    color: #5b21b6; /* violet-800 */
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADERS (H2) - Consistent Pill Style
   ═══════════════════════════════════════════════════════════════ */

.lesson-content-workbench h2 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: #1f2937; /* gray-800 */
    margin: 1.5rem 0 0.75rem 0;
    padding: 0.5rem 0;
    border-bottom: 2px solid #e5e7eb; /* gray-200 */
}

.lesson-content-workbench h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151; /* gray-700 */
    margin: 1.25rem 0 0.5rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   STANDARDS SECTION - Purple/Indigo Theme
   ═══════════════════════════════════════════════════════════════ */

.lesson-content-workbench .section-standards {
    background: linear-gradient(to bottom right, #eef2ff, #e0e7ff); /* indigo-50 to indigo-100 */
    border: 1px solid #c7d2fe; /* indigo-200 */
    border-left: 4px solid #6366f1; /* indigo-500 */
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.lesson-content-workbench .section-standards h2 {
    color: #3730a3; /* indigo-800 */
    border-bottom: none;
    margin-top: 0;
    padding-bottom: 0.5rem;
}

.lesson-content-workbench .section-standards ul {
    margin: 0;
    padding-left: 1.25rem;
}

.lesson-content-workbench .section-standards li {
    color: #4338ca; /* indigo-700 */
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   LEARNING OBJECTIVES - Gold/Amber Theme (The GOLD!)
   ═══════════════════════════════════════════════════════════════ */

.lesson-content-workbench .section-objectives {
    background: linear-gradient(to bottom right, #fffbeb, #fef3c7); /* amber-50 to amber-100 */
    border: 1px solid #fcd34d; /* amber-300 */
    border-left: 4px solid #f59e0b; /* amber-500 */
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.lesson-content-workbench .section-objectives h2 {
    color: #92400e; /* amber-800 */
    border-bottom: none;
    margin-top: 0;
    padding-bottom: 0.5rem;
}

.lesson-content-workbench .section-objectives p {
    color: #78350f; /* amber-900 */
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.lesson-content-workbench .section-objectives ul {
    margin: 0;
    padding-left: 1.25rem;
}

.lesson-content-workbench .section-objectives li {
    color: #b45309; /* amber-700 */
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   MATERIALS SECTION - Green/Teal Theme
   ═══════════════════════════════════════════════════════════════ */

.lesson-content-workbench .section-materials {
    background: linear-gradient(to bottom right, #f0fdfa, #ccfbf1); /* teal-50 to teal-100 */
    border: 1px solid #99f6e4; /* teal-200 */
    border-left: 4px solid #14b8a6; /* teal-500 */
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.lesson-content-workbench .section-materials h2 {
    color: #115e59; /* teal-800 */
    border-bottom: none;
    margin-top: 0;
    padding-bottom: 0.5rem;
}

.lesson-content-workbench .section-materials ul {
    margin: 0;
    padding-left: 0.5rem;
    list-style: none;
}

.lesson-content-workbench .section-materials li {
    color: #0f766e; /* teal-700 */
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Supply Dots - Green (have it) / Yellow (need to buy) */
.lesson-content-workbench .supply-dot,
.lesson-content-workbench .need-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lesson-content-workbench .supply-dot {
    background-color: #22c55e; /* green-500 */
    box-shadow: 0 0 0 2px #bbf7d0; /* green-200 ring */
}

.lesson-content-workbench .need-dot {
    background-color: #eab308; /* yellow-500 */
    box-shadow: 0 0 0 2px #fef08a; /* yellow-200 ring */
}

/* ═══════════════════════════════════════════════════════════════
   LESSON STRUCTURE - Clean White with Subtle Border
   ═══════════════════════════════════════════════════════════════ */

.lesson-content-workbench .section-structure {
    background: #ffffff;
    border: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.lesson-content-workbench .section-structure h2 {
    color: #7c3aed; /* violet-600 */
    border-bottom: 2px solid #ddd6fe; /* violet-200 */
    margin-top: 0;
}

.lesson-content-workbench .section-structure h3 {
    background: linear-gradient(to right, #f5f3ff, transparent);
    padding: 0.5rem 0.75rem;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    border-left: 3px solid #8b5cf6; /* violet-500 */
    color: #5b21b6; /* violet-800 */
}

/* Ordered list for steps - proper numbering */
.lesson-content-workbench .section-structure ol {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
    counter-reset: step-counter;
}

.lesson-content-workbench .section-structure ol li {
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   FORMATIVE ASSESSMENT - Light Blue Theme
   ═══════════════════════════════════════════════════════════════ */

.lesson-content-workbench .section-assessment {
    background: linear-gradient(to bottom right, #eff6ff, #dbeafe); /* blue-50 to blue-100 */
    border: 1px solid #bfdbfe; /* blue-200 */
    border-left: 4px solid #3b82f6; /* blue-500 */
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.lesson-content-workbench .section-assessment h2 {
    color: #1e40af; /* blue-800 */
    border-bottom: none;
    margin-top: 0;
    padding-bottom: 0.5rem;
}

.lesson-content-workbench .section-assessment p {
    color: #1d4ed8; /* blue-700 */
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.lesson-content-workbench .section-assessment ul {
    margin: 0;
    padding-left: 1.25rem;
}

.lesson-content-workbench .section-assessment li {
    color: #2563eb; /* blue-600 */
    margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   DIFFERENTIATION - Soft Lavender Theme
   ═══════════════════════════════════════════════════════════════ */

.lesson-content-workbench .section-differentiation {
    background: linear-gradient(to bottom right, #faf5ff, #f3e8ff); /* purple-50 to purple-100 */
    border: 1px solid #e9d5ff; /* purple-200 */
    border-left: 4px solid #a855f7; /* purple-500 */
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.lesson-content-workbench .section-differentiation h2 {
    color: #6b21a8; /* purple-800 */
    border-bottom: none;
    margin-top: 0;
    padding-bottom: 0.5rem;
}

.lesson-content-workbench .section-differentiation p {
    color: #7e22ce; /* purple-700 */
    font-weight: 600;
    margin: 1rem 0 0.5rem 0;
}

.lesson-content-workbench .section-differentiation p:first-of-type {
    margin-top: 0;
}

.lesson-content-workbench .section-differentiation ul {
    margin: 0 0 0.75rem 0;
    padding-left: 1.25rem;
}

.lesson-content-workbench .section-differentiation li {
    color: #581c87; /* purple-900 */
    margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   TEACHING TOOLS NOTE - Call to Action
   ═══════════════════════════════════════════════════════════════ */

.lesson-content-workbench .section-tools-note {
    background: linear-gradient(to right, #fef3c7, #fde68a); /* amber-100 to amber-200 */
    border: 2px dashed #f59e0b; /* amber-500 */
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    text-align: center;
}

.lesson-content-workbench .section-tools-note p {
    margin: 0;
    color: #92400e; /* amber-800 */
    font-size: 0.95rem;
}

.lesson-content-workbench .section-tools-note strong {
    color: #78350f; /* amber-900 */
}

/* ═══════════════════════════════════════════════════════════════
   GENERIC LIST STYLING (fallback for older lessons)
   ═══════════════════════════════════════════════════════════════ */

.lesson-content-workbench ul {
    list-style-type: disc;
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}

.lesson-content-workbench ol {
    list-style-type: decimal;
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}

.lesson-content-workbench li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Nested lists */
.lesson-content-workbench ul ul,
.lesson-content-workbench ol ol,
.lesson-content-workbench ul ol,
.lesson-content-workbench ol ul {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════
   PARAGRAPHS & TEXT
   ═══════════════════════════════════════════════════════════════ */

.lesson-content-workbench p {
    margin: 0 0 0.75rem 0;
    line-height: 1.7;
}

.lesson-content-workbench strong {
    font-weight: 600;
    color: #111827; /* gray-900 */
}

.lesson-content-workbench em {
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   LEGACY SUPPORT - Old lessons without wrapper classes
   Target by h2 content (less reliable, but covers existing lessons)
   ═══════════════════════════════════════════════════════════════ */

/* These provide basic styling for lessons generated before v2.4 */
/* New lessons with wrapper classes will override these */

.lesson-content-workbench > h2 {
    background: linear-gradient(to right, #f9fafb, transparent);
    padding: 0.5rem 0.75rem;
    margin-left: -0.5rem;
    border-left: 3px solid #8b5cf6; /* violet-500 */
}

/* ============================================
   LESSON PRINT STYLES - Claude 196 (CORRECTED)
   Added: December 24, 2025
   ============================================ */

@media print {
    
    /* Hide non-printable elements */
    .platform-sidebar,
    .platform-sidebar-left,
    .platform-sidebar-right,
    .platform-mobile-header,
    .platform-mobile-overlay,
    header,
    footer,
    .demo-results-banner,
    .demo-results-cta,
    .tools-inside-card,
    .section-tools-note,
    #action-status,
    nav,
    button,
    .bg-purple-600,
    .bg-green-600,
    .bg-gray-100,
    [class*="modal"] {
        display: none !important;
    }
    
    /* Hide action buttons container */
    .flex.flex-wrap.justify-center.gap-3 {
        display: none !important;
    }
    
    /* Reset page layout */
    .platform-wrapper,
    .platform-grid,
    .platform-content-pane,
    .content-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Lesson card - remove shadow/border */
    #lesson-content-card {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* ALL section boxes - strip colored backgrounds */
    .section-standards,
    .section-objectives,
    .section-materials,
    .section-structure,
    .section-assessment,
    .section-differentiation,
    .lesson-description-intro {
        background: white !important;
        border: 1px solid #ccc !important;
        border-radius: 0 !important;
        padding: 10px 15px !important;
        margin-bottom: 12px !important;
        page-break-inside: avoid;
    }
    
    /* Section headers - simple black text */
    .section-standards h2,
    .section-objectives h2,
    .section-materials h2,
    .section-structure h2,
    .section-assessment h2,
    .section-differentiation h2,
    .lesson-content-workbench h2,
    .lesson-content-workbench h3,
    .lesson-content-workbench h4 {
        color: black !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 0 8px 0 !important;
        font-size: 14pt !important;
        font-weight: bold !important;
    }
    
    /* Subheadings */
    .lesson-content-workbench h4 {
        font-size: 12pt !important;
        margin-top: 10px !important;
    }
    
    /* Body text */
    .lesson-content-workbench p,
    .lesson-content-workbench li,
    .section-standards li,
    .section-objectives li,
    .section-materials li {
        color: black !important;
        font-size: 11pt !important;
        line-height: 1.4 !important;
    }
    
    /* Lists - tighter spacing */
    .lesson-content-workbench ul,
    .lesson-content-workbench ol {
        margin: 5px 0 10px 20px !important;
        padding: 0 !important;
    }
    
    .lesson-content-workbench li {
        margin-bottom: 3px !important;
    }
    
    /* Lesson header */
    .lesson-header {
        background: white !important;
        border: 1px solid #ccc !important;
        padding: 10px 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* Page settings */
    @page {
        margin: 0.5in;
        size: letter;
    }
    
    /* Ensure readable text */
    * {
        color: black !important;
    }
}