/**
 * Standards Tracker Styles
 * 
 * PURPOSE: Styles for the personalized Standards Tracker page
 * LOCATION: /plugins/teacherai-simple/assets/css/standards-tracker.css
 * 
 * NOTE: The tracker content (stats row, coverage bar, standard pills, subject cards)
 * is styled by standards-report.css (shared with Standards Report page).
 * This file handles ONLY the tracker-specific UI:
 *   - Empty state (no lessons yet)
 *   - Grade tabs (auto-populated from library)
 *   - Curriculum filter buttons
 *   - Collapsible not-yet-covered toggle
 * 
 * ORIGINAL: Claude 250 + Tony | January 15, 2026
 * REBUILT:  Claude 361 + Tony | April 6, 2026
 * SIMPLIFIED + CURRICULUM: Claude 372 + Tony | April 10, 2026
 * 
 * TEAM TEACHAI FOREVER! 💜
 */

/* ==========================================================================
   EMPTY STATE — No lessons in library yet
   ========================================================================== */

.tracker-empty-state {
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    margin-top: 1rem;
}

.tracker-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.tracker-empty-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1F2937;
    margin: 0 0 0.5rem 0;
}

.tracker-empty-subtitle {
    font-size: 1rem;
    color: #6B7280;
    margin: 0 0 2rem 0;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

.tracker-empty-cta {
    display: inline-block;
    color: #7C3AED;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: underline;
}

.tracker-empty-cta:hover {
    color: #6D28D9;
}

/* ==========================================================================
   CURRICULUM FILTER — Toggle between All / named curricula
   Only renders when teacher has named curricula
   ========================================================================== */

.tracker-curriculum-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.tracker-curriculum-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #6B7280;
    margin-right: 0.25rem;
}

.tracker-curriculum-options {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.tracker-curriculum-btn {
    padding: 0.375rem 0.75rem;
    border: 1.5px solid #E5E7EB;
    border-radius: 999px;
    background: white;
    color: #374151;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tracker-curriculum-btn:hover {
    border-color: #C4B5FD;
    background: #FAF5FF;
    color: #7C3AED;
}

.tracker-curriculum-btn--active {
    border-color: #8B5CF6;
    background: #8B5CF6;
    color: white;
}

.tracker-curriculum-btn--active:hover {
    border-color: #7C3AED;
    background: #7C3AED;
    color: white;
}

/* ==========================================================================
   GRADE TAB BAR — Auto-populated from library
   ========================================================================== */

.tracker-tab-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.tracker-tab-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.25rem;
}

#tracker-tab-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Individual grade tab */
.tracker-grade-tab {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid #E5E7EB;
    border-radius: 0.5rem;
    background: white;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    font-family: inherit;
    font-size: 0.875rem;
}

.tracker-grade-tab:hover {
    border-color: #C4B5FD;
    background: #FAF5FF;
}

.tracker-grade-tab--active {
    border-color: #8B5CF6;
    background: #8B5CF6;
    color: white;
}

.tracker-grade-tab--active:hover {
    border-color: #7C3AED;
    background: #7C3AED;
}

.tracker-grade-tab-label {
    font-weight: 700;
    font-size: 1rem;
}

.tracker-grade-tab-name {
    font-weight: 500;
    font-size: 0.8125rem;
    color: #6B7280;
}

.tracker-grade-tab--active .tracker-grade-tab-name {
    color: rgba(255, 255, 255, 0.85);
}

/* Lesson count badge on each tab */
.tracker-grade-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: #F3F4F6;
    color: #6B7280;
    line-height: 1;
}

.tracker-grade-tab--active .tracker-grade-tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* ==========================================================================
   GRADE ANALYSIS HEADING — Curriculum name suffix
   ========================================================================== */

.grade-analysis-curriculum {
    font-size: 0.875rem;
    font-weight: 500;
    color: #8B5CF6;
}

/* ==========================================================================
   NOT YET COVERED — Collapsible toggle
   ========================================================================== */

.tracker-not-yet-toggle {
    user-select: none;
}

.tracker-not-yet-toggle:hover {
    color: #374151 !important;
}

.tracker-not-yet-arrow {
    display: inline-block;
    font-size: 0.75rem;
    margin-right: 0.25rem;
    transition: transform 0.2s ease;
}

.tracker-not-yet-hint {
    font-size: 0.8125rem;
    margin-top: -0.25rem;
}

/* ==========================================================================
   GRADE CONTENT AREA — The AJAX-loaded zone
   ========================================================================== */

#tracker-grade-content {
    transition: opacity 0.2s ease;
}

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

@media (max-width: 640px) {
    .tracker-empty-state {
        padding: 2rem 1rem;
    }

    .tracker-tab-container {
        gap: 0.375rem;
    }

    .tracker-grade-tab-name {
        display: none;
    }

    .tracker-curriculum-filter {
        gap: 0.375rem;
    }

    .tracker-curriculum-btn {
        font-size: 0.75rem;
        padding: 0.3125rem 0.625rem;
    }
}

/* ==========================================================================
   TRACKER-SPECIFIC COLOR OVERRIDES
   The tracker is a personal journey — no red, ever.
   Any coverage > 0% is progress. Progress is green.
   ========================================================================== */

.standards-report-page .coverage-bar.bad {
    background: linear-gradient(90deg, #10B981, #34D399);
}

.standards-report-page .stat-number.stat-bad {
    color: #059669;
}

.standards-report-page .coverage-bar.warning {
    background: linear-gradient(90deg, #10B981, #34D399);
}

.standards-report-page .stat-number.stat-warning {
    color: #059669;
}