/**
 * Fusion Library Styles
 * TeacherAI Center
 * 
 * @package TeacherAI
 * @since 2.6.0
 * @author Claude 223 - TEAM TEACHAI (original)
 * @modified Claude 224 - Grade selector centering & purple palette (Jan 2, 2026)
 * @modified Claude 277 - Shared grade tab classes for Library + Blocks pages (Feb 7, 2026)
 * 
 * COLOR THEME: PURPLE 💜 (Fusion = Purple throughout platform)
 * 
 * 💜 PURPLE PALETTE:
 * - Light:     #EDE9FE (purple 100)
 * - Medium:    #DDD6FE (purple 200)
 * - Border:    #A78BFA (purple 400)
 * - Primary:   #8B5CF6 (purple 500)
 * - Secondary: #7C3AED (purple 600)
 * - Dark:      #5B21B6 (purple 800)
 * 
 * Location: /wp-content/plugins/teacherai-simple/assets/css/fusion-library.css
 */

/* =============================================================================
   HERO BANNER - Clean version (Claude 280 - Baton 1 FINAL)
   Light lavender, icon-above-title, NO stats (those live in abstract strip below)
   ============================================================================= */

.hero-banner-compact {
    text-align: center;
    padding: 2rem 1.5rem;
    background: #F5F3FF;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid #E9E5F5;
}

.hero-banner-compact .hero-banner-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #5B21B6;
    margin: 0 0 0.25rem 0;
}

.hero-banner-compact .hero-banner-subtitle {
    font-size: 0.9375rem;
    color: #7C3AED;
    font-weight: 500;
    margin: 0;
}

/* =============================================================================
   CURRICULUM ABSTRACT STRIP (Claude 280 - Baton 1 FINAL)
   Horizontal bar between hero and grade selector
   Stats + frameworks get their own space to breathe
   ============================================================================= */

.curriculum-abstract-strip {
    background: white;
    border: 1px solid #E9E5F5;
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.curriculum-abstract-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.curriculum-stat-item {
    font-size: 0.875rem;
    color: #5B21B6;
}

.curriculum-stat-item strong {
    font-weight: 700;
}

.curriculum-stat-dot {
    color: #C4B5FD;
    font-size: 0.875rem;
}

.curriculum-abstract-frameworks {
    font-size: 0.75rem;
    color: #7C3AED;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* =============================================================================
   CURRICULUM SIDEBAR CARD - Right sidebar (Claude 280 - Baton 1)
   Bridge link to Standards Report + curriculum quick reference
   Purple left-border accent, white background
   ============================================================================= */

.curriculum-about-card {
    background: white;
    border: 1px solid #E9E5F5;
    border-left: 4px solid #8B5CF6;
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
}

.curriculum-about-heading {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem 0;
}

.curriculum-about-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #5B21B6;
    margin: 0 0 0.125rem 0;
    line-height: 1.3;
}

.curriculum-about-tagline {
    font-size: 0.75rem;
    color: #7C3AED;
    font-style: italic;
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}

.curriculum-bridge-link {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #7C3AED;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    background: #F5F3FF;
    border-radius: 0.375rem;
    text-align: center;
    transition: all 0.2s ease;
}

.curriculum-bridge-link:hover {
    background: #EDE9FE;
    color: #5B21B6;
    text-decoration: none;
}

/* =============================================================================
   CONTENT TAB BAR — Claude 281 Baton 2
   📚 Lessons | 📦 Curriculum Framework
   Purple accent for active tab, gray for inactive
   Sits between grade selector and lesson cards / framework content
   ============================================================================= */

.content-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #E5E7EB;
    margin-bottom: 1.5rem;
}

.content-tab {
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #6B7280;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.content-tab:hover {
    color: #7C3AED;
    background: #FAFAFE;
    text-decoration: none;
}

.content-tab.active {
    color: #7C3AED;
    font-weight: 600;
    border-bottom-color: #7C3AED;
}

/* =============================================================================
   PAGE-SPECIFIC STYLES
   ============================================================================= */

.fusion-library-page {
    /* Page wrapper inherits from platform-core.css */
}

/* =============================================================================
   SHARED GRADE TABS - Used on Fusion Library AND Curriculum Blocks pages
   Claude 277 - Feb 7, 2026
   ONE SOURCE OF TRUTH for grade tab styling across both pages
   ============================================================================= */

/* Container - centers the grade buttons */
.grade-selector {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    margin-bottom: 1.5rem;
}

/* Individual grade tab button */
.grade-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 2px solid #DDD6FE;
    background: #FEFBFF;
    color: #7C3AED;
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 0;
    flex: 1 1 0;
    max-width: 120px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.grade-btn:hover {
    border-color: #A78BFA;
    background: #F3E8FF;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Active state - purple gradient */
.grade-btn.active {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    color: white;
    border-color: #7C3AED;
}

/* Grade name label (e.g., "K", "Grade 3") */
.grade-btn .grade-label {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Lesson count text (e.g., "46 lessons") */
.grade-btn .grade-count {
    font-size: 0.7rem;
    color: #A78BFA;
    font-weight: 400;
    line-height: 1.3;
}

/* Standards count text (e.g., "257 standards") */
.grade-btn .grade-standards {
    font-size: 0.65rem;
    color: #C4B5FD;
    font-weight: 400;
    line-height: 1.3;
}

/* Active state overrides for count text */
.grade-btn.active .grade-count,
.grade-btn.active .grade-standards {
    color: rgba(255, 255, 255, 0.9);
}

/* =============================================================================
   LESSON CARDS
   ============================================================================= */

.fusion-library-page .lesson-card {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.2s ease;
}

.fusion-library-page .lesson-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Fusion Badge */
.fusion-library-page .fusion-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}

/* Meta Tags */
.fusion-library-page .meta-tag {
    padding: 0.25rem 0.625rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
}

.fusion-library-page .meta-tag.grade {
    background: #F3E8FF;
    color: #7C3AED;
    font-weight: 500;
}

.fusion-library-page .meta-tag.subject {
    background: #EEF2FF;
    color: #4F46E5;
}

.fusion-library-page .meta-tag.duration {
    background: #F3F4F6;
    color: #4B5563;
}

.fusion-library-page .meta-tag.standards {
    background: #ECFDF5;
    color: #059669;
}

/* Tool Icons */
.fusion-library-page .tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: #F3E8FF;
    color: #7C3AED;
    border-radius: 9999px;
    font-size: 0.875rem;
}

/* =============================================================================
   COPY TO LIBRARY BUTTON
   ============================================================================= */

.fusion-library-page .copy-to-library-btn {
    padding: 0.5rem 1rem;
    background: white;
    border: 2px solid #C4B5FD;
    color: #7C3AED;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.fusion-library-page .copy-to-library-btn:hover {
    background: #F3E8FF;
    border-color: #8B5CF6;
}

.fusion-library-page .copy-to-library-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fusion-library-page .copy-to-library-btn.copying {
    background: #F3E8FF;
    color: #6D28D9;
}

.fusion-library-page .copy-to-library-btn.copied {
    background: #ECFDF5;
    border-color: #22C55E;
    color: #16A34A;
}

/* =============================================================================
   ACCESS DENIED VIEW
   ============================================================================= */

.fusion-library-page .access-denied-hero {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%);
    border-radius: 1rem;
    border: 2px solid #A78BFA;
}

.fusion-library-page .upgrade-cta {
    display: inline-block;
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    box-shadow: 0 4px 14px 0 rgba(124, 58, 237, 0.39);
    transition: all 0.2s ease;
}

.fusion-library-page .upgrade-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(124, 58, 237, 0.45);
}

/* =============================================================================
   SIDEBAR STYLES
   ============================================================================= */

.fusion-library-page .sidebar-grade-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

.fusion-library-page .sidebar-grade-link:hover {
    background: #F3E8FF;
}

.fusion-library-page .sidebar-grade-link.active {
    background: #EDE9FE;
    color: #5B21B6;
    font-weight: 500;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
    .grade-selector {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    .grade-btn {
        min-width: auto;
    }
    
    .fusion-library-page .lesson-card-actions {
        flex-direction: column;
        width: 100%;
        margin-top: 1rem;
    }
    
    .fusion-library-page .lesson-card-actions a,
    .fusion-library-page .lesson-card-actions button {
        width: 100%;
    }
}

/* =============================================================================
   LOADING/SUCCESS STATES
   ============================================================================= */

.fusion-library-page .copy-success-message {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}