@* Views/Admin/SurveyAnalysis/AnalyzeQuestionnaire.cshtml *@
@model Services.AIViewModel.QuestionnaireAnalysisOverview

@{
    ViewData["Title"] = $"AI Analysis - {Model.QuestionnaireTitle}";
}

<div class="nexgen-analysis-dashboard">
    <!-- Dynamic Background -->
    <div class="bg-pattern">
        <div class="grid-overlay"></div>
        <div class="gradient-mesh"></div>
    </div>

    <!-- Header Section -->
    <section class="analysis-header">
        <div class="container-fluid">
            <div class="header-content">
                <div class="breadcrumb-nexgen">
                    <a href="@Url.Action("Index")" class="breadcrumb-link">
                        <i class="fas fa-brain"></i>
                        <span>Analysis Dashboard</span>
                    </a>
                    <i class="fas fa-chevron-right breadcrumb-separator"></i>
                    <span class="breadcrumb-current">@Model.QuestionnaireTitle</span>
                </div>
                
                <div class="header-main">
                    <div class="title-section">
                        <div class="title-badge">
                            <span class="badge-dot"></span>
                            <span>MULTI-DIMENSIONAL INSIGHTS</span>
                        </div>
                        <h1 class="analysis-title">
                            <i class="fas fa-chart-line title-icon"></i>
                            Mental Health
                            <span class="title-gradient">Analysis</span>
                        </h1>
                        <p class="analysis-subtitle">Multi-dimensional mental health analysis powered by Azure AI Services</p>
                    </div>
                    
                    <div class="action-buttons">
                        <a href="@Url.Action("Dashboard", new { id = Model.QuestionnaireId })" class="btn-nexgen primary">
                            <i class="fas fa-tachometer-alt"></i>
                            <span>Executive Dashboard</span>
                        </a>
                        <a href="@Url.Action("GenerateReport", new { id = Model.QuestionnaireId })" class="btn-nexgen secondary">
                            <i class="fas fa-file-alt"></i>
                            <span>Generate Report</span>
                        </a>
                        <a href="@Url.Action("ExportAnalysis", new { id = Model.QuestionnaireId })" class="btn-nexgen secondary">
                            <i class="fas fa-download"></i>
                            <span>Export Data</span>
                        </a>
                        <a href="@Url.Action("HighRiskResponses", new { id = Model.QuestionnaireId })" class="btn-nexgen danger">
                            <i class="fas fa-exclamation-triangle"></i>
                            <span>High Risk</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Key Metrics Overview -->
    <section class="metrics-overview">
        <div class="container-fluid">
            <div class="metrics-grid">
                <div class="metric-card total-responses">
                    <div class="metric-glow"></div>
                    <div class="metric-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="metric-content">
                        <div class="metric-value">@Model.TotalResponses</div>
                        <div class="metric-label">Total Responses</div>
                    </div>
                    <div class="metric-decoration"></div>
                </div>

                <div class="metric-card ai-analyzed">
                    <div class="metric-glow"></div>
                    <div class="metric-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <div class="metric-content">
                        <div class="metric-value">@Model.AnalyzedResponses</div>
                        <div class="metric-label">Responses Analyzed</div>
                    </div>
                    <div class="metric-decoration"></div>
                </div>

                <div class="metric-card positive-sentiment">
                    <div class="metric-glow"></div>
                    <div class="metric-icon">
                        <i class="fas fa-smile"></i>
                    </div>
                    <div class="metric-content">
                        <div class="metric-value">@Math.Round(Model.OverallPositiveSentiment * 100, 1)%</div>
                        <div class="metric-label">Positive Sentiment</div>
                    </div>
                    <div class="metric-decoration"></div>
                </div>

                <div class="metric-card risk-alerts">
                    <div class="metric-glow"></div>
                    <div class="metric-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div class="metric-content">
                        <div class="metric-value">@(Model.HighRiskResponses + Model.CriticalRiskResponses)</div>
                        <div class="metric-label">High/Critical Risk</div>
                    </div>
                    <div class="metric-decoration"></div>
                    @if (Model.HighRiskResponses + Model.CriticalRiskResponses > 0)
                    {
                        <div class="risk-indicator"></div>
                    }
                </div>
            </div>
        </div>
    </section>

    <!-- Analysis Dashboard -->
    <section class="analysis-dashboard">
        <div class="container-fluid">
            <div class="dashboard-grid">
                <!-- Risk Distribution -->
                <div class="analysis-card risk-distribution">
                    <div class="card-glow"></div>
                    <div class="card-header">
                        <div class="header-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div class="header-content">
                            <h3>Mental Health Risk Distribution</h3>
                            <p>Comprehensive risk assessment across all response types</p>
                        </div>
                    </div>
                    <div class="card-body">
                        @if (Model.AnalyzedResponses > 0)
                        {
                            <div class="risk-levels">
                                <div class="risk-level low-risk">
                                    <div class="risk-header">
                                        <div class="risk-indicator"></div>
                                        <span class="risk-label">Low Risk</span>
                                        <span class="risk-count">@Model.LowRiskResponses</span>
                                    </div>
                                    <div class="risk-progress">
                                        <div class="progress-fill" style="width: @(Model.AnalyzedResponses > 0 ? (Model.LowRiskResponses * 100.0 / Model.AnalyzedResponses) : 0)%"></div>
                                    </div>
                                    <div class="risk-percentage">@Math.Round(Model.AnalyzedResponses > 0 ? (Model.LowRiskResponses * 100.0 / Model.AnalyzedResponses) : 0, 1)%</div>
                                </div>

                                <div class="risk-level moderate-risk">
                                    <div class="risk-header">
                                        <div class="risk-indicator"></div>
                                        <span class="risk-label">Moderate Risk</span>
                                        <span class="risk-count">@Model.ModerateRiskResponses</span>
                                    </div>
                                    <div class="risk-progress">
                                        <div class="progress-fill" style="width: @(Model.AnalyzedResponses > 0 ? (Model.ModerateRiskResponses * 100.0 / Model.AnalyzedResponses) : 0)%"></div>
                                    </div>
                                    <div class="risk-percentage">@Math.Round(Model.AnalyzedResponses > 0 ? (Model.ModerateRiskResponses * 100.0 / Model.AnalyzedResponses) : 0, 1)%</div>
                                </div>

                                <div class="risk-level high-risk">
                                    <div class="risk-header">
                                        <div class="risk-indicator"></div>
                                        <span class="risk-label">High Risk</span>
                                        <span class="risk-count">@Model.HighRiskResponses</span>
                                    </div>
                                    <div class="risk-progress">
                                        <div class="progress-fill" style="width: @(Model.AnalyzedResponses > 0 ? (Model.HighRiskResponses * 100.0 / Model.AnalyzedResponses) : 0)%"></div>
                                    </div>
                                    <div class="risk-percentage">@Math.Round(Model.AnalyzedResponses > 0 ? (Model.HighRiskResponses * 100.0 / Model.AnalyzedResponses) : 0, 1)%</div>
                                </div>

                                <div class="risk-level critical-risk">
                                    <div class="risk-header">
                                        <div class="risk-indicator"></div>
                                        <span class="risk-label">Critical Risk</span>
                                        <span class="risk-count">@Model.CriticalRiskResponses</span>
                                    </div>
                                    <div class="risk-progress">
                                        <div class="progress-fill" style="width: @(Model.AnalyzedResponses > 0 ? (Model.CriticalRiskResponses * 100.0 / Model.AnalyzedResponses) : 0)%"></div>
                                    </div>
                                    <div class="risk-percentage">@Math.Round(Model.AnalyzedResponses > 0 ? (Model.CriticalRiskResponses * 100.0 / Model.AnalyzedResponses) : 0, 1)%</div>
                                </div>
                            </div>

                            @if (Model.HighRiskResponses > 0 || Model.CriticalRiskResponses > 0)
                            {
                                <div class="alert-nexgen warning">
                                    <div class="alert-stripe"></div>
                                    <div class="alert-icon"><i class="fas fa-exclamation-triangle"></i></div>
                                    <div class="alert-content">
                                        <div class="alert-label">ATTENTION REQUIRED</div>
                                        <div class="alert-text">
                                            <strong>@(Model.HighRiskResponses + Model.CriticalRiskResponses) responses</strong> require immediate attention.
                                            <a href="@Url.Action("HighRiskResponses", new { id = Model.QuestionnaireId })" class="alert-link">View details</a>
                                        </div>
                                    </div>
                                </div>
                            }
                        }
                        else
                        {
                            <div class="empty-state">
                                <i class="fas fa-info-circle"></i>
                                <p>No risk assessment data available</p>
                            </div>
                        }
                    </div>
                </div>

                <!-- Sentiment Analysis -->
                <div class="analysis-card sentiment-analysis">
                    <div class="card-glow"></div>
                    <div class="card-header">
                        <div class="header-icon">
                            <i class="fas fa-heart"></i>
                        </div>
                        <div class="header-content">
                            <h3>Overall Sentiment Analysis</h3>
                            <p>Emotional tone assessment across responses</p>
                        </div>
                    </div>
                    <div class="card-body">
                        @if (Model.AnalyzedResponses > 0)
                        {
                            <div class="sentiment-levels">
                                <div class="sentiment-level positive">
                                    <div class="sentiment-header">
                                        <i class="fas fa-smile sentiment-icon"></i>
                                        <span class="sentiment-label">Positive</span>
                                        <span class="sentiment-percentage">@Math.Round(Model.OverallPositiveSentiment * 100, 1)%</span>
                                    </div>
                                    <div class="sentiment-progress">
                                        <div class="progress-fill" style="width: @(Model.OverallPositiveSentiment * 100)%"></div>
                                    </div>
                                </div>

                                <div class="sentiment-level neutral">
                                    <div class="sentiment-header">
                                        <i class="fas fa-meh sentiment-icon"></i>
                                        <span class="sentiment-label">Neutral</span>
                                        <span class="sentiment-percentage">@Math.Round(Model.OverallNeutralSentiment * 100, 1)%</span>
                                    </div>
                                    <div class="sentiment-progress">
                                        <div class="progress-fill" style="width: @(Model.OverallNeutralSentiment * 100)%"></div>
                                    </div>
                                </div>

                                <div class="sentiment-level negative">
                                    <div class="sentiment-header">
                                        <i class="fas fa-frown sentiment-icon"></i>
                                        <span class="sentiment-label">Negative</span>
                                        <span class="sentiment-percentage">@Math.Round(Model.OverallNegativeSentiment * 100, 1)%</span>
                                    </div>
                                    <div class="sentiment-progress">
                                        <div class="progress-fill" style="width: @(Model.OverallNegativeSentiment * 100)%"></div>
                                    </div>
                                </div>
                            </div>

                           
                                string sentimentStatus = "";
                                string sentimentColor = "";
                                string sentimentIcon = "";
                                
                                if (Model.OverallPositiveSentiment >= 0.6)
                                {
                                    sentimentStatus = "Excellent mental health climate";
                                    sentimentColor = "success";
                                    sentimentIcon = "fa-thumbs-up";
                                }
                                else if (Model.OverallPositiveSentiment >= 0.4)
                                {
                                    sentimentStatus = "Moderate mental health climate";
                                    sentimentColor = "warning";
                                    sentimentIcon = "fa-balance-scale";
                                }
                                else
                                {
                                    sentimentStatus = "Concerning mental health climate";
                                    sentimentColor = "danger";
                                    sentimentIcon = "fa-exclamation-triangle";
                                }
                          

                            <div class="sentiment-interpretation @sentimentColor">
                                <div class="interpretation-icon">
                                    <i class="fas @sentimentIcon"></i>
                                </div>
                                <div class="interpretation-text">@sentimentStatus</div>
                            </div>
                        }
                        else
                        {
                            <div class="empty-state">
                                <i class="fas fa-info-circle"></i>
                                <p>No sentiment analysis data available</p>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Executive Summary -->
    @if (!string.IsNullOrEmpty(Model.ExecutiveSummary))
    {
        <section class="executive-summary-section">
            <div class="container-fluid">
                <div class="summary-card">
                    <div class="card-glow"></div>
                    <div class="summary-header">
                        <div class="header-decoration"></div>
                        <div class="header-content">
                            <i class="fas fa-clipboard-list header-icon"></i>
                            <h3>Executive Summary</h3>
                            <p>Comprehensive analysis overview across all question types</p>
                        </div>
                    </div>
                    <div class="summary-content">
                        <div class="executive-text">
                            @Html.Raw(Model.ExecutiveSummary.Replace("\n", "<br />"))
                        </div>
                    </div>
                </div>
            </div>
        </section>
    }

    <!-- Insights Dashboard -->
    <section class="insights-dashboard">
        <div class="container-fluid">
            <div class="insights-grid">
                <!-- Workplace Issues -->
                <div class="insights-card workplace-issues">
                    <div class="card-glow"></div>
                    <div class="card-header">
                        <div class="header-icon">
                            <i class="fas fa-exclamation-circle"></i>
                        </div>
                        <div class="header-content">
                            <h3>Top Workplace Issues & Interventions</h3>
                            <p>Priority-ranked issues with recommended actions</p>
                        </div>
                    </div>
                    <div class="card-body">
                        @if (Model.TopWorkplaceIssues != null && Model.TopWorkplaceIssues.Any())
                        {
                            <div class="issues-list">
                                @foreach (var issue in Model.TopWorkplaceIssues.Take(5))
                                {
                                    <div class="issue-item priority-@issue.Priority">
                                        <div class="issue-header">
                                            <div class="priority-indicator">
                                                <span class="priority-level">P@issue.Priority</span>
                                            </div>
                                            <div class="issue-content">
                                                <div class="issue-category">@issue.Category</div>
                                                <div class="priority-badge">
                                                    <span>Priority @issue.Priority</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="issue-description">@issue.Issue</div>
                                        <div class="intervention-section">
                                            <div class="intervention-header">
                                                <i class="fas fa-lightbulb"></i>
                                                <span>Recommended Intervention</span>
                                            </div>
                                            <div class="intervention-text">@issue.RecommendedIntervention</div>
                                        </div>
                                        @if (issue.AffectedAreas.Any())
                                        {
                                            <div class="affected-areas">
                                                @foreach (var area in issue.AffectedAreas)
                                                {
                                                    <span class="area-tag">@area</span>
                                                }
                                            </div>
                                        }
                                    </div>
                                }
                            </div>
                        }
                        else
                        {
                            <div class="empty-state">
                                <i class="fas fa-info-circle"></i>
                                <p>No workplace issues identified in the analysis</p>
                            </div>
                        }
                    </div>
                </div>

                <!-- Common Themes -->
                <div class="insights-card common-themes">
                    <div class="card-glow"></div>
                    <div class="card-header">
                        <div class="header-icon">
                            <i class="fas fa-tags"></i>
                        </div>
                        <div class="header-content">
                            <h3>Common Themes</h3>
                            <p>Key patterns and categories identified</p>
                        </div>
                    </div>
                    <div class="card-body">
                        @if (Model.MostCommonKeyPhrases != null && Model.MostCommonKeyPhrases.Any())
                        {
                            <div class="themes-section">
                                <div class="theme-group">
                                    <div class="theme-header">
                                        <i class="fas fa-quote-left"></i>
                                        <span>MOST MENTIONED PHRASES</span>
                                    </div>
                                    <div class="phrase-tags">
                                        @foreach (var phrase in Model.MostCommonKeyPhrases.Take(8))
                                        {
                                            <span class="phrase-tag">@phrase</span>
                                        }
                                    </div>
                                </div>

                                @if (Model.TopWorkplaceIssues.Any())
                                {
                                    <div class="theme-group">
                                        <div class="theme-header">
                                            <i class="fas fa-layer-group"></i>
                                            <span>ISSUE CATEGORIES</span>
                                        </div>
                                        <div class="category-tags">
                                            @foreach (var category in Model.TopWorkplaceIssues.Select(i => i.Category).Distinct().Take(5))
                                            {
                                                <span class="category-tag">@category</span>
                                            }
                                        </div>
                                    </div>
                                }
                            </div>
                        }
                        else
                        {
                            <div class="empty-state">
                                <i class="fas fa-info-circle"></i>
                                <p>No common themes identified</p>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Analysis Metadata -->
    <section class="analysis-metadata">
        <div class="container-fluid">
            <div class="metadata-card">
                <div class="metadata-content">
                    <div class="metadata-info">
                        <div class="info-icon">
                            <i class="fas fa-info-circle"></i>
                        </div>
                        <div class="info-text">
                            <span>Analysis completed on @Model.LastAnalyzedAt.ToString("MMMM dd, yyyy 'at' HH:mm")</span>
                            <span class="separator">|</span>
                            <span>@Model.AnalyzedResponses responses analyzed across multiple question types</span>
                            <span class="separator">|</span>
                            <span>Powered by Azure AI Services</span>
                        </div>
                    </div>
                    <div class="metadata-actions">
                        <a href="@Url.Action("BatchAnalyze", new { id = Model.QuestionnaireId })" class="action-btn refresh">
                            <i class="fas fa-sync"></i>
                            <span>Refresh Analysis</span>
                        </a>
                        <a href="@Url.Action("AnalyzeTrends", new { id = Model.QuestionnaireId })" class="action-btn trends">
                            <i class="fas fa-chart-area"></i>
                            <span>View Trends</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@functions {
    private string GetPriorityBorderColor(int priority)
    {
        switch (priority)
        {
            case 5:
                return "border-danger";
            case 4:
                return "border-warning";
            case 3:
                return "border-primary";
            case 2:
                return "border-info";
            default:
                return "border-secondary";
        }
    }

    private string GetPriorityBadgeColor(int priority)
    {
        switch (priority)
        {
            case 5:
                return "bg-danger";
            case 4:
                return "bg-warning text-dark";
            case 3:
                return "bg-primary";
            case 2:
                return "bg-info";
            default:
                return "bg-secondary";
        }
    }
}

@section Styles {
    <style>
        @@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

        :root {
            --neon-blue: #60a5fa;
            --neon-purple: #c084fc;
            --neon-green: #34d399;
            --neon-pink: #f472b6;
            --neon-yellow: #fbbf24;
            --neon-red: #f87171;
            --neon-cyan: #22d3ee;
            
            --dark-900: #0f172a;
            --dark-800: #1e293b;
            --dark-700: #334155;
            --dark-600: #475569;
            --dark-500: #64748b;
            --dark-400: #94a3b8;
            --dark-300: #cbd5e1;
            --dark-200: #e2e8f0;
            --dark-100: #f1f5f9;
            
            --glass-bg: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.1);
            --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
            
            --font-main: 'Space Grotesk', sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-main);
            background: var(--dark-900);
            color: #e2e8f0;
            overflow-x: hidden;
        }

        .nexgen-analysis-dashboard {
            min-height: 100vh;
            position: relative;
            background: var(--dark-900);
        }

        /* Dynamic Background */
        .bg-pattern {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1;
            overflow: hidden;
        }

        .grid-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(96, 165, 250, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(96, 165, 250, 0.1) 1px, transparent 1px);
            background-size: 60px 60px;
            animation: gridMove 20s linear infinite;
        }

        .gradient-mesh {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 20%, rgba(96, 165, 250, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 60%, rgba(192, 132, 252, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(52, 211, 153, 0.15) 0%, transparent 50%);
            animation: meshShift 15s ease-in-out infinite;
        }

        /* Header Section */
        .analysis-header {
            position: relative;
            z-index: 10;
            padding: 2rem 0;
            border-bottom: 1px solid rgba(96, 165, 250, 0.2);
        }

        .header-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .breadcrumb-nexgen {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
            font-family: var(--font-mono);
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .breadcrumb-link {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--dark-400);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .breadcrumb-link:hover {
            color: var(--neon-blue);
        }

        .breadcrumb-separator {
            color: var(--dark-500);
            font-size: 0.6rem;
        }

        .breadcrumb-current {
            color: var(--neon-blue);
        }

        .header-main {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 2rem;
        }

        .title-section {
            flex: 1;
        }

        .title-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.5rem 1.2rem;
            background: rgba(96, 165, 250, 0.1);
            border: 1px solid rgba(96, 165, 250, 0.3);
            border-radius: 50px;
            margin-bottom: 1.5rem;
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            color: var(--neon-blue);
        }

        .badge-dot {
            width: 6px;
            height: 6px;
            background: var(--neon-green);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        .analysis-title {
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 1rem;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .title-icon {
            color: var(--neon-blue);
        }

        .title-gradient {
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple), var(--neon-pink));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .analysis-subtitle {
            font-size: 1.1rem;
            color: var(--dark-300);
            line-height: 1.6;
        }

        .action-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: flex-start;
        }

        .btn-nexgen {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 0.8rem 1.5rem;
            border-radius: 12px;
            text-decoration: none;
            font-family: var(--font-mono);
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            transition: all 0.3s ease;
            border: 1px solid;
            position: relative;
            overflow: hidden;
        }

        .btn-nexgen.primary {
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
            border-color: transparent;
            color: white;
        }

        .btn-nexgen.secondary {
            background: var(--glass-bg);
            border-color: var(--glass-border);
            color: var(--dark-300);
            backdrop-filter: blur(10px);
        }

        .btn-nexgen.danger {
            background: rgba(248, 113, 113, 0.1);
            border-color: rgba(248, 113, 113, 0.3);
            color: var(--neon-red);
        }

        .btn-nexgen:hover {
            transform: translateY(-2px);
            text-decoration: none;
        }

        .btn-nexgen.primary:hover {
            box-shadow: 0 15px 30px rgba(96, 165, 250, 0.3);
            color: white;
        }

        .btn-nexgen.secondary:hover {
            background: rgba(96, 165, 250, 0.1);
            border-color: rgba(96, 165, 250, 0.3);
            color: var(--neon-blue);
        }

        .btn-nexgen.danger:hover {
            background: rgba(248, 113, 113, 0.2);
            color: var(--neon-red);
        }

        /* Metrics Overview */
        .metrics-overview {
            position: relative;
            z-index: 10;
            padding: 3rem 0;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .metric-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 2rem;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .metric-card:hover {
            transform: translateY(-5px);
            border-color: rgba(96, 165, 250, 0.4);
        }

        .metric-glow {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .metric-card:hover .metric-glow {
            opacity: 1;
        }

        .metric-card.total-responses .metric-glow {
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan));
        }

        .metric-card.ai-analyzed .metric-glow {
            background: linear-gradient(90deg, var(--neon-purple), var(--neon-pink));
        }

        .metric-card.positive-sentiment .metric-glow {
            background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan));
        }

        .metric-card.risk-alerts .metric-glow {
            background: linear-gradient(90deg, var(--neon-red), var(--neon-yellow));
        }

        .metric-icon {
            width: 60px;
            height: 60px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: white;
        }

        .metric-card.total-responses .metric-icon {
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-cyan));
        }

        .metric-card.ai-analyzed .metric-icon {
            background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
        }

        .metric-card.positive-sentiment .metric-icon {
            background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan));
        }

        .metric-card.risk-alerts .metric-icon {
            background: linear-gradient(135deg, var(--neon-red), var(--neon-yellow));
        }

        .metric-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 0.5rem;
            line-height: 1;
        }

        .metric-label {
            font-family: var(--font-mono);
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            color: var(--dark-400);
            text-transform: uppercase;
        }

        .metric-decoration {
            position: absolute;
            bottom: -20px;
            right: -20px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            opacity: 0.1;
        }

        .metric-card.total-responses .metric-decoration {
            background: var(--neon-blue);
        }

        .metric-card.ai-analyzed .metric-decoration {
            background: var(--neon-purple);
        }

        .metric-card.positive-sentiment .metric-decoration {
            background: var(--neon-green);
        }

        .metric-card.risk-alerts .metric-decoration {
            background: var(--neon-red);
        }

        .risk-indicator {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 12px;
            height: 12px;
            background: var(--neon-red);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        /* Analysis Dashboard */
        .analysis-dashboard {
            position: relative;
            z-index: 10;
            padding: 3rem 0;
        }

        .dashboard-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .analysis-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            transition: all 0.3s ease;
        }

        .analysis-card:hover {
            transform: translateY(-3px);
            border-color: rgba(96, 165, 250, 0.4);
        }

        .card-glow {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .analysis-card:hover .card-glow {
            opacity: 1;
        }

        .card-header {
            padding: 2rem 2rem 1rem;
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .header-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.3rem;
        }

        .header-content h3 {
            font-size: 1.3rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 0.3rem;
        }

        .header-content p {
            color: var(--dark-300);
            font-size: 0.9rem;
        }

        .card-body {
            padding: 1rem 2rem 2rem;
        }

        /* Enhanced Risk Distribution */
        .risk-levels {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .risk-level {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 1.2rem;
            transition: all 0.2s ease;
            position: relative;
        }

        .risk-level:hover {
            background: rgba(255, 255, 255, 0.05);
            transform: translateX(5px);
        }

        .risk-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .risk-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 1rem;
            box-shadow: 0 0 10px currentColor;
        }

        .risk-level.low-risk .risk-indicator {
            background: var(--neon-green);
        }

        .risk-level.moderate-risk .risk-indicator {
            background: var(--neon-yellow);
        }

        .risk-level.high-risk .risk-indicator {
            background: var(--neon-red);
        }

        .risk-level.critical-risk .risk-indicator {
            background: #dc2626;
        }

        .risk-label {
            flex: 1;
            font-weight: 600;
            color: #ffffff;
            font-size: 1rem;
        }

        .risk-count {
            font-family: var(--font-mono);
            font-weight: 700;
            color: var(--dark-300);
            background: rgba(255, 255, 255, 0.05);
            padding: 0.3rem 0.8rem;
            border-radius: 6px;
            min-width: 40px;
            text-align: center;
        }

        .risk-progress {
            height: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 0.8rem;
            position: relative;
        }

        .risk-progress .progress-fill {
            height: 100%;
            border-radius: 5px;
            transition: width 0.8s ease;
            position: relative;
            overflow: hidden;
        }

        .risk-progress .progress-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(255, 255, 255, 0.2) 50%, 
                transparent 100%);
            animation: shimmer 2s infinite;
        }

        .risk-percentage {
            font-family: var(--font-mono);
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--dark-400);
            text-align: right;
        }

        .risk-level.low-risk .progress-fill {
            background: linear-gradient(90deg, var(--neon-green), #22d3ee);
        }

        .risk-level.moderate-risk .progress-fill {
            background: linear-gradient(90deg, var(--neon-yellow), #fb923c);
        }

        .risk-level.high-risk .progress-fill {
            background: linear-gradient(90deg, var(--neon-red), #fbbf24);
        }

        .risk-level.critical-risk .progress-fill {
            background: linear-gradient(90deg, #dc2626, #991b1b);
        }

        /* Sentiment Analysis */
        .sentiment-levels {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .sentiment-level {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 1.2rem;
            transition: all 0.2s ease;
        }

        .sentiment-level:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .sentiment-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .sentiment-icon {
            margin-right: 1rem;
            font-size: 1.1rem;
        }

        .sentiment-level.positive .sentiment-icon {
            color: var(--neon-green);
        }

        .sentiment-level.neutral .sentiment-icon {
            color: var(--dark-400);
        }

        .sentiment-level.negative .sentiment-icon {
            color: var(--neon-red);
        }

        .sentiment-label {
            flex: 1;
            font-weight: 600;
            color: #ffffff;
        }

        .sentiment-percentage {
            font-family: var(--font-mono);
            font-weight: 700;
            color: var(--dark-300);
        }

        .sentiment-progress {
            height: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            overflow: hidden;
        }

        .sentiment-progress .progress-fill {
            height: 100%;
            border-radius: 5px;
            transition: width 0.6s ease;
        }

        .sentiment-level.positive .progress-fill {
            background: linear-gradient(90deg, var(--neon-green), #22d3ee);
        }

        .sentiment-level.neutral .progress-fill {
            background: linear-gradient(90deg, var(--dark-400), var(--dark-500));
        }

        .sentiment-level.negative .progress-fill {
            background: linear-gradient(90deg, var(--neon-red), #fbbf24);
        }

        .sentiment-interpretation {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.2rem;
            border-radius: 12px;
            border: 1px solid;
        }

        .sentiment-interpretation.success {
            background: rgba(52, 211, 153, 0.1);
            border-color: rgba(52, 211, 153, 0.3);
        }

        .sentiment-interpretation.warning {
            background: rgba(251, 191, 36, 0.1);
            border-color: rgba(251, 191, 36, 0.3);
        }

        .sentiment-interpretation.danger {
            background: rgba(248, 113, 113, 0.1);
            border-color: rgba(248, 113, 113, 0.3);
        }

        .interpretation-icon {
            font-size: 1.2rem;
        }

        .sentiment-interpretation.success .interpretation-icon {
            color: var(--neon-green);
        }

        .sentiment-interpretation.warning .interpretation-icon {
            color: var(--neon-yellow);
        }

        .sentiment-interpretation.danger .interpretation-icon {
            color: var(--neon-red);
        }

        .interpretation-text {
            font-weight: 600;
            color: #ffffff;
        }

        /* Enhanced Executive Summary */
        .executive-summary-section {
            position: relative;
            z-index: 10;
            padding: 3rem 0;
        }

        .summary-card {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
        }

        .summary-header {
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
            padding: 2rem;
            position: relative;
        }

        .header-decoration {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
        }

        .summary-header .header-content {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .summary-header .header-icon {
            font-size: 1.5rem;
            color: white;
        }

        .summary-header h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
            margin-bottom: 0.3rem;
        }

        .summary-header p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
        }

        .summary-content {
            padding: 2rem;
        }

        .executive-text {
            font-size: 1.1rem;
            line-height: 1.8;
            color: var(--dark-200);
        }

        /* Enhanced Insights Dashboard */
        .insights-dashboard {
            position: relative;
            z-index: 10;
            padding: 3rem 0;
        }

        .insights-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 2rem;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .insights-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            transition: all 0.3s ease;
        }

        .insights-card:hover {
            transform: translateY(-3px);
            border-color: rgba(96, 165, 250, 0.4);
        }

        /* Enhanced Workplace Issues */
        .issues-list {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .issue-item {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 1.5rem;
            position: relative;
            border-left: 4px solid;
            transition: all 0.3s ease;
        }

        .issue-item:hover {
            background: rgba(255, 255, 255, 0.05);
            transform: translateX(5px);
        }

        .issue-item.priority-5 {
            border-left-color: var(--neon-red);
        }

        .issue-item.priority-4 {
            border-left-color: var(--neon-yellow);
        }

        .issue-item.priority-3 {
            border-left-color: var(--neon-blue);
        }

        .issue-item.priority-2 {
            border-left-color: var(--neon-cyan);
        }

        .issue-item.priority-1 {
            border-left-color: var(--dark-500);
        }

        .issue-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .priority-indicator {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 700;
            color: white;
            flex-shrink: 0;
        }

        .issue-content {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .issue-item.priority-5 .priority-indicator {
            background: var(--neon-red);
        }

        .issue-item.priority-4 .priority-indicator {
            background: var(--neon-yellow);
            color: var(--dark-900);
        }

        .issue-item.priority-3 .priority-indicator {
            background: var(--neon-blue);
        }

        .issue-item.priority-2 .priority-indicator {
            background: var(--neon-cyan);
        }

        .issue-item.priority-1 .priority-indicator {
            background: var(--dark-500);
        }

        .priority-level {
            font-size: 0.8rem;
        }

        .issue-category {
            font-weight: 700;
            color: #ffffff;
            font-size: 1.1rem;
        }

        .priority-badge {
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            border: 1px solid;
        }

        .issue-item.priority-5 .priority-badge {
            background: rgba(248, 113, 113, 0.2);
            border-color: var(--neon-red);
            color: var(--neon-red);
        }

        .issue-item.priority-4 .priority-badge {
            background: rgba(251, 191, 36, 0.2);
            border-color: var(--neon-yellow);
            color: var(--neon-yellow);
        }

        .issue-item.priority-3 .priority-badge {
            background: rgba(96, 165, 250, 0.2);
            border-color: var(--neon-blue);
            color: var(--neon-blue);
        }

        .issue-description {
            color: var(--dark-300);
            margin-bottom: 1rem;
            line-height: 1.5;
        }

        .intervention-section {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .intervention-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: var(--font-mono);
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            color: var(--neon-blue);
            margin-bottom: 0.8rem;
        }

        .intervention-text {
            color: var(--dark-200);
            line-height: 1.5;
        }

        .affected-areas {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .area-tag {
            padding: 0.3rem 0.8rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            font-size: 0.75rem;
            color: var(--dark-300);
        }

        /* Common Themes */
        .themes-section {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .theme-group {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 1.5rem;
        }

        .theme-header {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            color: var(--dark-300);
            margin-bottom: 1rem;
        }

        .phrase-tags,
        .category-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
        }

        .phrase-tag {
            padding: 0.4rem 0.8rem;
            background: rgba(96, 165, 250, 0.2);
            border: 1px solid rgba(96, 165, 250, 0.3);
            border-radius: 6px;
            font-size: 0.75rem;
            color: var(--neon-blue);
        }

        .category-tag {
            padding: 0.4rem 0.8rem;
            background: rgba(251, 191, 36, 0.2);
            border: 1px solid rgba(251, 191, 36, 0.3);
            border-radius: 6px;
            font-size: 0.75rem;
            color: var(--neon-yellow);
        }

        /* Analysis Metadata */
        .analysis-metadata {
            position: relative;
            z-index: 10;
            padding: 2rem 0 4rem;
        }

        .metadata-card {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .metadata-content {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
        }

        .metadata-info {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .info-icon {
            color: var(--neon-blue);
            font-size: 1.1rem;
        }

        .info-text {
            font-family: var(--font-mono);
            font-size: 0.8rem;
            color: var(--dark-300);
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .separator {
            color: var(--dark-500);
        }

        .metadata-actions {
            display: flex;
            gap: 1rem;
        }

        .action-btn {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.6rem 1.2rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            color: var(--dark-300);
            text-decoration: none;
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            transition: all 0.2s ease;
        }

        .action-btn:hover {
            background: rgba(96, 165, 250, 0.1);
            border-color: rgba(96, 165, 250, 0.3);
            color: var(--neon-blue);
            text-decoration: none;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 3rem;
            color: var(--dark-400);
        }

        .empty-state i {
            font-size: 2rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        /* Alert System */
        .alert-nexgen {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.5rem;
            border-radius: 12px;
            margin-top: 1.5rem;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        .alert-stripe {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
        }

        .alert-nexgen.warning {
            background: rgba(251, 191, 36, 0.1);
            border: 1px solid rgba(251, 191, 36, 0.3);
        }

        .alert-nexgen.warning .alert-stripe {
            background: var(--neon-yellow);
        }

        .alert-icon {
            color: var(--neon-yellow);
            font-size: 1.2rem;
        }

        .alert-label {
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            color: var(--neon-yellow);
            margin-bottom: 0.2rem;
        }

        .alert-text {
            color: var(--dark-300);
        }

        .alert-link {
            color: var(--neon-blue);
            text-decoration: none;
        }

        .alert-link:hover {
            color: var(--neon-cyan);
        }

        /* Animations */
        @@keyframes gridMove {
            0% { transform: translate(0, 0); }
            100% { transform: translate(60px, 60px); }
        }

        @@keyframes meshShift {
            0%, 100% { 
                filter: hue-rotate(0deg);
                transform: scale(1);
            }
            50% { 
                filter: hue-rotate(30deg);
                transform: scale(1.05);
            }
        }

        @@keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.1); }
        }

        @@keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        /* Responsive Design */
        @@media (max-width: 1200px) {
            .dashboard-grid,
            .insights-grid {
                grid-template-columns: 1fr;
            }
            
            .metrics-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            }
        }

        @@media (max-width: 768px) {
            .header-main {
                flex-direction: column;
                align-items: stretch;
                gap: 2rem;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            .analysis-title {
                font-size: 2.5rem;
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
            
            .metadata-content {
                flex-direction: column;
                align-items: stretch;
                text-align: center;
            }
            
            .metadata-actions {
                justify-content: center;
            }
            
            .info-text {
                flex-direction: column;
                gap: 0.5rem;
            }

            .issue-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .issue-content {
                width: 100%;
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
        }

        @@media (max-width: 480px) {
            .metrics-grid {
                grid-template-columns: 1fr;
            }
            
            .card-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
        }
    </style>
}