@* Views/Admin/SurveyAnalysis/AnalyzeTrends.cshtml *@
@model List<Services.AIViewModel.WorkplaceInsight>

@{
    ViewData["Title"] = $"Mental Health Trends - {ViewBag.QuestionnaireName}";
}

@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;
            --neon-orange: #fb923c;
            --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;
            --success-gradient: linear-gradient(135deg, var(--neon-green), var(--neon-cyan));
            --warning-gradient: linear-gradient(135deg, var(--neon-yellow), var(--neon-orange));
            --danger-gradient: linear-gradient(135deg, var(--neon-red), #dc2626);
            --info-gradient: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
            --primary-gradient: linear-gradient(135deg, var(--neon-green), var(--neon-blue));
        }

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

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

        .nexgen-trends-dashboard {
            min-height: 100vh;
            position: relative;
        }

        /* 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(52, 211, 153, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(52, 211, 153, 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(52, 211, 153, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 60%, rgba(34, 211, 238, 0.15) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(96, 165, 250, 0.15) 0%, transparent 50%);
            animation: meshShift 15s ease-in-out infinite;
        }

        /* Top Navigation */
        .top-nav {
            position: relative;
            z-index: 100;
            padding: 1rem 0;
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(52, 211, 153, 0.2);
        }

        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            align-items: center;
            gap: 3rem;
        }

        .nav-brand {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .brand-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan));
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
        }

        .brand-name {
            font-family: var(--font-mono);
            font-weight: 700;
            font-size: 1.1rem;
            letter-spacing: 0.1em;
            color: #e2e8f0;
        }

        .brand-version {
            font-family: var(--font-mono);
            font-size: 0.7rem;
            color: var(--neon-green);
            background: rgba(52, 211, 153, 0.1);
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            border: 1px solid rgba(52, 211, 153, 0.3);
        }

        .nav-center {
            flex: 1;
            display: flex;
            justify-content: center;
        }

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

        .crumb {
            color: var(--dark-400);
            text-decoration: none;
            transition: color 0.2s ease;
        }

            .crumb:hover {
                color: var(--neon-green);
            }

            .crumb.active {
                color: var(--neon-green);
            }

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

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

        .nav-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.2rem;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 8px;
            color: #e2e8f0;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            backdrop-filter: blur(10px);
            text-decoration: none;
        }

            .nav-btn:hover {
                background: rgba(52, 211, 153, 0.1);
                border-color: rgba(52, 211, 153, 0.3);
                color: var(--neon-green);
            }

        /* Hero Section */
        .hero-nexgen {
            padding: 4rem 0 2rem;
            text-align: center;
            position: relative;
            z-index: 10;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.5rem 1.2rem;
            background: rgba(52, 211, 153, 0.1);
            border: 1px solid rgba(52, 211, 153, 0.3);
            border-radius: 50px;
            margin-bottom: 2rem;
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            color: var(--neon-green);
        }

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

        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            color: #ffffff;
        }

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

        .hero-description {
            font-size: 1.1rem;
            color: var(--dark-300);
            max-width: 600px;
            margin: 0 auto 2rem;
            line-height: 1.6;
        }

        /* Date Range Card */
        .date-range-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            margin-bottom: 3rem;
            box-shadow: var(--glass-shadow);
        }

        .date-range-content {
            display: flex;
            justify-content: between;
            align-items: center;
        }

        .date-range-title {
            font-family: var(--font-mono);
            font-size: 0.9rem;
            font-weight: 600;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

            .date-range-title i {
                color: var(--neon-green);
            }

        .date-badge {
            background: var(--primary-gradient);
            color: white;
            padding: 0.6rem 1.2rem;
            border-radius: 20px;
            font-family: var(--font-mono);
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Chart Cards */
        .chart-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--glass-shadow);
            margin-bottom: 2rem;
            transition: all 0.3s ease;
        }

            .chart-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 20px 40px rgba(52, 211, 153, 0.1);
            }

        .chart-header {
            padding: 2rem 2rem 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .chart-title {
            font-family: var(--font-mono);
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 0;
        }

            .chart-title i {
                color: var(--neon-green);
            }

        .chart-body {
            padding: 2rem;
        }

        .chart-container {
            position: relative;
            height: 300px;
            margin-bottom: 1rem;
        }

        .chart-info {
            text-align: center;
            color: var(--dark-400);
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        /* Sentiment Indicators */
        .sentiment-indicators {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-top: 2rem;
        }

        .sentiment-indicator {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            transition: all 0.3s ease;
        }

            .sentiment-indicator:hover {
                background: rgba(255, 255, 255, 0.05);
                transform: translateY(-2px);
            }

        .sentiment-icon {
            font-size: 1.5rem;
            margin-bottom: 0.8rem;
        }

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

        .sentiment-indicator.neutral .sentiment-icon {
            color: var(--neon-yellow);
        }

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

        .sentiment-title {
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 0.5rem;
        }

        .sentiment-change {
            font-family: var(--font-mono);
            font-size: 0.8rem;
            font-weight: 600;
        }

        .sentiment-indicator.positive .sentiment-change {
            color: var(--neon-green);
        }

        .sentiment-indicator.neutral .sentiment-change {
            color: var(--neon-yellow);
        }

        .sentiment-indicator.negative .sentiment-change {
            color: var(--neon-red);
        }

        /* Improvement Items */
        .improvement-item {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
        }

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

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

        .improvement-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            color: white;
        }

        .improvement-item.positive .improvement-icon {
            background: var(--success-gradient);
        }

        .improvement-item.negative .improvement-icon {
            background: var(--danger-gradient);
        }

        .improvement-item.neutral .improvement-icon {
            background: var(--warning-gradient);
        }

        .improvement-title {
            font-weight: 600;
            color: #ffffff;
        }

            .improvement-title.positive {
                color: var(--neon-green);
            }

            .improvement-title.negative {
                color: var(--neon-red);
            }

            .improvement-title.neutral {
                color: var(--neon-yellow);
            }

        .progress-bar-nexgen {
            height: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 0.5rem;
        }

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

            .progress-fill.success {
                background: var(--success-gradient);
            }

            .progress-fill.danger {
                background: var(--danger-gradient);
            }

            .progress-fill.warning {
                background: var(--warning-gradient);
            }

        .improvement-change {
            font-family: var(--font-mono);
            font-size: 0.8rem;
            color: var(--dark-400);
        }

        /* Intervention Effectiveness */
        .intervention-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--glass-shadow);
            margin-bottom: 2rem;
        }

        .intervention-header {
            background: var(--success-gradient);
            padding: 2rem;
            position: relative;
        }

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

        .intervention-title-group {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: between;
            align-items: center;
        }

        .intervention-title {
            font-family: var(--font-mono);
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            color: white;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .clinical-badge {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            padding: 0.4rem 1rem;
            font-family: var(--font-mono);
            font-size: 0.6rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            color: white;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .intervention-body {
            padding: 2rem;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 2rem;
        }

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

        .results-title {
            font-family: var(--font-mono);
            font-size: 0.9rem;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 1.5rem;
        }

        .intervention-result {
            margin-bottom: 1.5rem;
        }

        .result-header {
            display: flex;
            justify-content: between;
            align-items: center;
            margin-bottom: 0.8rem;
        }

        .result-name {
            font-size: 0.8rem;
            color: var(--dark-200);
        }

        .result-badge {
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-family: var(--font-mono);
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.05em;
        }

            .result-badge.success {
                background: rgba(52, 211, 153, 0.2);
                border: 1px solid var(--neon-green);
                color: var(--neon-green);
            }

            .result-badge.primary {
                background: rgba(96, 165, 250, 0.2);
                border: 1px solid var(--neon-blue);
                color: var(--neon-blue);
            }

            .result-badge.info {
                background: rgba(34, 211, 238, 0.2);
                border: 1px solid var(--neon-cyan);
                color: var(--neon-cyan);
            }

            .result-badge.warning {
                background: rgba(251, 191, 36, 0.2);
                border: 1px solid var(--neon-yellow);
                color: var(--neon-yellow);
            }

        .result-effectiveness {
            font-size: 0.7rem;
            color: var(--dark-400);
        }

        /* Insights Section */
        .insights-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .insights-card {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--glass-shadow);
        }

        .insights-header {
            padding: 2rem 2rem 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .insights-title {
            font-family: var(--font-mono);
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

            .insights-title i {
                color: var(--neon-purple);
            }

        .insights-body {
            padding: 2rem;
        }

        .insight-item {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
        }

            .insight-item:hover {
                background: rgba(255, 255, 255, 0.05);
            }

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

        .insight-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            color: white;
            flex-shrink: 0;
        }

        .insight-item.positive .insight-icon {
            background: var(--success-gradient);
        }

        .insight-item.warning .insight-icon {
            background: var(--warning-gradient);
        }

        .insight-item.info .insight-icon {
            background: var(--info-gradient);
        }

        .insight-content {
            flex: 1;
        }

        .insight-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

            .insight-title.positive {
                color: var(--neon-green);
            }

            .insight-title.warning {
                color: var(--neon-yellow);
            }

            .insight-title.info {
                color: var(--neon-cyan);
            }

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

        .insight-badge {
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-family: var(--font-mono);
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.05em;
        }

            .insight-badge.positive {
                background: rgba(52, 211, 153, 0.2);
                border: 1px solid var(--neon-green);
                color: var(--neon-green);
            }

            .insight-badge.warning {
                background: rgba(251, 191, 36, 0.2);
                border: 1px solid var(--neon-yellow);
                color: var(--neon-yellow);
            }

            .insight-badge.info {
                background: rgba(34, 211, 238, 0.2);
                border: 1px solid var(--neon-cyan);
                color: var(--neon-cyan);
            }

        /* KPI Items */
        .kpi-item {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
        }

            .kpi-item:hover {
                background: rgba(255, 255, 255, 0.05);
                transform: scale(1.02);
            }

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

        .kpi-info {
            flex: 1;
        }

        .kpi-title {
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 0.3rem;
        }

        .kpi-subtitle {
            font-size: 0.8rem;
            color: var(--dark-400);
        }

        .kpi-value-section {
            text-align: right;
        }

        .kpi-value {
            font-family: var(--font-mono);
            font-size: 1.8rem;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 0.3rem;
        }

            .kpi-value.success {
                color: var(--neon-green);
            }

            .kpi-value.primary {
                color: var(--neon-blue);
            }

            .kpi-value.info {
                color: var(--neon-cyan);
            }

            .kpi-value.warning {
                color: var(--neon-yellow);
            }

        .kpi-change {
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--neon-green);
            display: flex;
            align-items: center;
            gap: 0.3rem;
            justify-content: flex-end;
        }

        /* Trending Topics */
        .trending-section {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--glass-shadow);
            margin-bottom: 2rem;
        }

        .trending-header {
            padding: 2rem 2rem 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .trending-title {
            font-family: var(--font-mono);
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

            .trending-title i {
                color: var(--neon-orange);
            }

        .trending-body {
            padding: 2rem;
        }

        .trending-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }

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

        .category-title {
            font-family: var(--font-mono);
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

            .category-title.improving {
                color: var(--neon-green);
            }

            .category-title.attention {
                color: var(--neon-yellow);
            }

        .trending-topic {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }

            .trending-topic:hover {
                background: rgba(255, 255, 255, 0.05);
            }

        .topic-content {
            display: flex;
            justify-content: between;
            align-items: center;
        }

        .topic-indicator {
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 700;
            margin-right: 1rem;
        }

            .topic-indicator.up {
                background: rgba(52, 211, 153, 0.2);
                border: 1px solid var(--neon-green);
                color: var(--neon-green);
            }

            .topic-indicator.down {
                background: rgba(248, 113, 113, 0.2);
                border: 1px solid var(--neon-red);
                color: var(--neon-red);
            }

            .topic-indicator.stable {
                background: rgba(251, 191, 36, 0.2);
                border: 1px solid var(--neon-yellow);
                color: var(--neon-yellow);
            }

        .topic-name {
            flex: 1;
            color: var(--dark-200);
        }

        .topic-change {
            font-family: var(--font-mono);
            font-size: 0.8rem;
            font-weight: 700;
        }

            .topic-change.positive {
                color: var(--neon-green);
            }

            .topic-change.negative {
                color: var(--neon-red);
            }

            .topic-change.neutral {
                color: var(--neon-yellow);
            }

        /* Action Recommendations */
        .recommendations-section {
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--glass-shadow);
            margin-bottom: 2rem;
        }

        .recommendations-header {
            background: var(--primary-gradient);
            padding: 2rem;
            position: relative;
        }

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

        .recommendations-title {
            position: relative;
            z-index: 2;
            font-family: var(--font-mono);
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            color: white;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .recommendations-body {
            padding: 2rem;
        }

        .recommendations-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .action-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid;
            border-radius: 12px;
            padding: 1.5rem;
            transition: all 0.3s ease;
        }

            .action-card:hover {
                transform: translateY(-2px);
                background: rgba(255, 255, 255, 0.05);
            }

            .action-card.success {
                border-color: rgba(52, 211, 153, 0.3);
            }

            .action-card.warning {
                border-color: rgba(251, 191, 36, 0.3);
            }

            .action-card.primary {
                border-color: rgba(96, 165, 250, 0.3);
            }

        .action-header {
            font-family: var(--font-mono);
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

            .action-header.success {
                color: var(--neon-green);
            }

            .action-header.warning {
                color: var(--neon-yellow);
            }

            .action-header.primary {
                color: var(--neon-blue);
            }

        .action-list {
            list-style: none;
            padding: 0;
        }

            .action-list li {
                font-size: 0.8rem;
                color: var(--dark-300);
                line-height: 1.5;
                margin-bottom: 0.5rem;
                padding-left: 1rem;
                position: relative;
            }

                .action-list li::before {
                    content: '→';
                    position: absolute;
                    left: 0;
                    color: var(--neon-cyan);
                    font-weight: bold;
                }

        /* Modal Styling */
        .modal-nexgen {
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(52, 211, 153, 0.2);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        }

        .modal-header-nexgen {
            background: var(--primary-gradient);
            padding: 2rem;
            position: relative;
        }

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

        .modal-title-nexgen {
            position: relative;
            z-index: 2;
            font-family: var(--font-mono);
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            color: white;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .modal-body-nexgen {
            padding: 2rem;
        }

        .modal-footer-nexgen {
            background: rgba(30, 41, 59, 0.8);
            border: none;
            padding: 1.5rem 2rem;
            display: flex;
            gap: 1rem;
            justify-content: flex-end;
        }

        .btn-nexgen {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.8rem 1.5rem;
            border-radius: 8px;
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid;
            text-decoration: none;
        }

            .btn-nexgen.secondary {
                background: rgba(255, 255, 255, 0.05);
                border-color: rgba(255, 255, 255, 0.2);
                color: var(--dark-300);
            }

                .btn-nexgen.secondary:hover {
                    background: rgba(255, 255, 255, 0.1);
                    color: #e2e8f0;
                }

            .btn-nexgen.primary {
                background: var(--primary-gradient);
                border-color: transparent;
                color: white;
            }

                .btn-nexgen.primary:hover {
                    transform: translateY(-1px);
                    box-shadow: 0 10px 20px rgba(52, 211, 153, 0.3);
                    color: white;
                }

        .form-control-nexgen {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: #e2e8f0;
            padding: 0.8rem;
            transition: all 0.2s ease;
        }

            .form-control-nexgen:focus {
                outline: none;
                border-color: rgba(52, 211, 153, 0.5);
                background: rgba(255, 255, 255, 0.08);
                box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1);
            }

        .form-label-nexgen {
            color: var(--dark-300);
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .quick-select-group {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .quick-select-btn {
            padding: 0.6rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            color: var(--dark-300);
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

            .quick-select-btn:hover {
                background: rgba(52, 211, 153, 0.1);
                border-color: rgba(52, 211, 153, 0.3);
                color: var(--neon-green);
            }

        /* 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);
        }

        }

        /* Responsive Design */
        @@media (max-width: 1200px) {
            .insights-section

        {
            grid-template-columns: 1fr;
        }

        .intervention-body {
            grid-template-columns: 1fr;
        }

        .trending-columns {
            grid-template-columns: 1fr;
        }

        }

        @@media (max-width: 768px) {
            .nav-container

        {
            flex-wrap: wrap;
            gap: 1rem;
        }

        .nav-center {
            order: 3;
            flex-basis: 100%;
            justify-content: flex-start;
        }

        .hero-title {
            font-size: 2.5rem;
        }

        .date-range-content {
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
        }

        .sentiment-indicators {
            grid-template-columns: 1fr;
        }

        .recommendations-grid {
            grid-template-columns: 1fr;
        }

        .chart-container {
            height: 250px;
        }

        .quick-select-group {
            grid-template-columns: repeat(2, 1fr);
        }

        }

        @@media (max-width: 480px) {
            .chart-card, .intervention-card, .insights-card, .trending-section, .recommendations-section

        {
            margin-left: 1rem;
            margin-right: 1rem;
        }

        .quick-select-group {
            grid-template-columns: 1fr;
        }

        }

        /* Print Styles */
        @@media print {
            .bg-pattern, .top-nav, .btn-nexgen, .nav-btn

        {
            display: none !important;
        }

        .chart-card,
        .intervention-card,
        .insights-card {
            break-inside: avoid;
            border: 1px solid #333;
            background: white;
            color: black;
        }

        .nexgen-trends-dashboard {
            background: white;
        }

        }

        /* Accessibility */
        @@media (prefers-reduced-motion: reduce) {
            *, *::before, *::after

        {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }

        }

        /* High Contrast Mode */
        @@media (prefers-contrast: high) {
            : root

        {
            --neon-green: #4dff88;
            --neon-cyan: #00e5ff;
            --neon-blue: #4d9fff;
            --dark-300: #ffffff;
            --dark-400: #cccccc;
        }

        .chart-card,
        .intervention-card,
        .insights-card {
            border-width: 2px;
        }

        }
    </style>
}

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

    <!-- Top Navigation Bar -->
    <nav class="top-nav">
        <div class="nav-container">
            <div class="nav-brand">
                <div class="brand-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <div class="brand-text">
                    <span class="brand-name">TRENDS ANALYZER</span>
                    <span class="brand-version">v1.0</span>
                </div>
            </div>

            <div class="nav-center">
                <nav class="breadcrumb-nexgen">
                    <a href="@Url.Action("Index")" class="crumb">
                        <i class="fas fa-brain"></i> ANALYSIS DASHBOARD
                    </a>
                    <i class="fas fa-chevron-right"></i>
                    <a href="@Url.Action("AnalyzeQuestionnaire", new { id = ViewBag.QuestionnaireId })" class="crumb">
                        @ViewBag.QuestionnaireName?.ToUpper()
                    </a>
                    <i class="fas fa-chevron-right"></i>
                    <span class="crumb active">TRENDS ANALYSIS</span>
                </nav>
            </div>

            <div class="nav-actions">
                <button type="button" class="nav-btn" data-bs-toggle="modal" data-bs-target="#dateRangeModal">
                    <i class="fas fa-calendar-alt"></i>
                    <span>Change Period</span>
                </button>
                <button type="button" class="nav-btn" onclick="exportTrendsData()">
                    <i class="fas fa-download"></i>
                    <span>Export Trends</span>
                </button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-nexgen">
        <div class="container-fluid">
            <div class="hero-content">
                <div class="hero-badge">
                    <span class="badge-dot"></span>
                    <span>PREDICTIVE MENTAL HEALTH ANALYTICS</span>
                </div>
                <h1 class="hero-title">
                    Mental Health
                    <span class="title-gradient">Trends</span>
                    Analysis
                </h1>
                <p class="hero-description">
                    Track workplace mental health patterns and intervention effectiveness over time
                </p>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="main-content">
        <div class="container-fluid">
            <!-- Date Range Display -->
            <div class="date-range-card">
                <div class="date-range-content">
                    <h3 class="date-range-title">
                        <i class="fas fa-calendar-check"></i>
                        Analysis Period
                    </h3>
                    <div class="date-badge">
                        <i class="fas fa-calendar"></i>
                        @ViewBag.FromDate.ToString("MMM dd, yyyy") - @ViewBag.ToDate.ToString("MMM dd, yyyy")
                    </div>
                </div>
            </div>

            <!-- Trend Charts Row -->
            <div class="row">
                <div class="col-lg-6">
                    <div class="chart-card">
                        <div class="chart-header">
                            <h2 class="chart-title">
                                <i class="fas fa-heart"></i>
                                Mental Health Score Trends
                            </h2>
                        </div>
                        <div class="chart-body">
                            <div class="chart-container">
                                <canvas id="mentalHealthTrendChart"></canvas>
                            </div>
                            <div class="chart-info">
                                <i class="fas fa-info-circle"></i>
                                Shows overall mental health score progression over time
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="chart-card">
                        <div class="chart-header">
                            <h2 class="chart-title">
                                <i class="fas fa-shield-alt"></i>
                                Risk Level Distribution Trends
                            </h2>
                        </div>
                        <div class="chart-body">
                            <div class="chart-container">
                                <canvas id="riskTrendChart"></canvas>
                            </div>
                            <div class="chart-info">
                                <i class="fas fa-info-circle"></i>
                                Tracks changes in employee risk levels over time
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sentiment and Workplace Factors -->
            <div class="row">
                <div class="col-lg-8">
                    <div class="chart-card">
                        <div class="chart-header">
                            <h2 class="chart-title">
                                <i class="fas fa-smile"></i>
                                Sentiment Evolution
                            </h2>
                        </div>
                        <div class="chart-body">
                            <div class="chart-container">
                                <canvas id="sentimentTrendChart"></canvas>
                            </div>
                            <div class="sentiment-indicators">
                                <div class="sentiment-indicator positive">
                                    <div class="sentiment-icon">
                                        <i class="fas fa-smile"></i>
                                    </div>
                                    <div class="sentiment-title">Positive Trend</div>
                                    <div class="sentiment-change">+15% this period</div>
                                </div>
                                <div class="sentiment-indicator neutral">
                                    <div class="sentiment-icon">
                                        <i class="fas fa-meh"></i>
                                    </div>
                                    <div class="sentiment-title">Neutral Stable</div>
                                    <div class="sentiment-change">-2% this period</div>
                                </div>
                                <div class="sentiment-indicator negative">
                                    <div class="sentiment-icon">
                                        <i class="fas fa-frown"></i>
                                    </div>
                                    <div class="sentiment-title">Negative Decline</div>
                                    <div class="sentiment-change">-13% this period</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="chart-card">
                        <div class="chart-header">
                            <h2 class="chart-title">
                                <i class="fas fa-trending-up"></i>
                                Key Improvements
                            </h2>
                        </div>
                        <div class="chart-body">
                            <div class="improvement-item positive">
                                <div class="improvement-header">
                                    <div class="improvement-icon">
                                        <i class="fas fa-arrow-up"></i>
                                    </div>
                                    <div class="improvement-title positive">Work-Life Balance</div>
                                </div>
                                <div class="progress-bar-nexgen">
                                    <div class="progress-fill success" style="width: 78%"></div>
                                </div>
                                <div class="improvement-change">+23% improvement</div>
                            </div>

                            <div class="improvement-item positive">
                                <div class="improvement-header">
                                    <div class="improvement-icon">
                                        <i class="fas fa-arrow-up"></i>
                                    </div>
                                    <div class="improvement-title positive">Team Communication</div>
                                </div>
                                <div class="progress-bar-nexgen">
                                    <div class="progress-fill success" style="width: 65%"></div>
                                </div>
                                <div class="improvement-change">+18% improvement</div>
                            </div>

                            <div class="improvement-item negative">
                                <div class="improvement-header">
                                    <div class="improvement-icon">
                                        <i class="fas fa-arrow-down"></i>
                                    </div>
                                    <div class="improvement-title negative">Workload Stress</div>
                                </div>
                                <div class="progress-bar-nexgen">
                                    <div class="progress-fill danger" style="width: 45%"></div>
                                </div>
                                <div class="improvement-change">-12% (reduced stress)</div>
                            </div>

                            <div class="improvement-item neutral">
                                <div class="improvement-header">
                                    <div class="improvement-icon">
                                        <i class="fas fa-minus"></i>
                                    </div>
                                    <div class="improvement-title neutral">Management Support</div>
                                </div>
                                <div class="progress-bar-nexgen">
                                    <div class="progress-fill warning" style="width: 55%"></div>
                                </div>
                                <div class="improvement-change">No significant change</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Intervention Effectiveness -->
            <div class="intervention-card">
                <div class="intervention-header">
                    <div class="intervention-title-group">
                        <h2 class="intervention-title">
                            <i class="fas fa-chart-area"></i>
                            NVKN Intervention Effectiveness Tracking
                        </h2>
                        <div class="clinical-badge">
                            <i class="fas fa-user-md"></i>
                            CLINICAL INSIGHTS
                        </div>
                    </div>
                </div>
                <div class="intervention-body">
                    <div class="chart-container">
                        <canvas id="interventionEffectivenessChart"></canvas>
                    </div>
                    <div class="intervention-results">
                        <h3 class="results-title">Intervention Impact</h3>

                        <div class="intervention-result">
                            <div class="result-header">
                                <div class="result-name">Stress Management Workshops</div>
                                <div class="result-badge success">+34%</div>
                            </div>
                            <div class="progress-bar-nexgen">
                                <div class="progress-fill success" style="width: 85%"></div>
                            </div>
                            <div class="result-effectiveness">Highly effective</div>
                        </div>

                        <div class="intervention-result">
                            <div class="result-header">
                                <div class="result-name">Manager Training Program</div>
                                <div class="result-badge primary">+28%</div>
                            </div>
                            <div class="progress-bar-nexgen">
                                <div class="progress-fill" style="width: 75%; background: var(--info-gradient);"></div>
                            </div>
                            <div class="result-effectiveness">Very effective</div>
                        </div>

                        <div class="intervention-result">
                            <div class="result-header">
                                <div class="result-name">Flexible Work Arrangements</div>
                                <div class="result-badge info">+22%</div>
                            </div>
                            <div class="progress-bar-nexgen">
                                <div class="progress-fill" style="width: 65%; background: var(--info-gradient);"></div>
                            </div>
                            <div class="result-effectiveness">Effective</div>
                        </div>

                        <div class="intervention-result">
                            <div class="result-header">
                                <div class="result-name">Team Building Activities</div>
                                <div class="result-badge warning">+12%</div>
                            </div>
                            <div class="progress-bar-nexgen">
                                <div class="progress-fill warning" style="width: 45%"></div>
                            </div>
                            <div class="result-effectiveness">Moderate impact</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Trend Insights and KPIs -->
            <div class="insights-section">
                <div class="insights-card">
                    <div class="insights-header">
                        <h2 class="insights-title">
                            <i class="fas fa-crystal-ball"></i>
                            Trend Insights & Predictions
                        </h2>
                    </div>
                    <div class="insights-body">
                        <div class="insight-item positive">
                            <div class="insight-header">
                                <div class="insight-icon">
                                    <i class="fas fa-trending-up"></i>
                                </div>
                                <div class="insight-content">
                                    <div class="insight-title positive">Positive Trajectory</div>
                                    <div class="insight-description">
                                        Mental health scores have improved 18% over the analyzed period,
                                        indicating successful intervention strategies.
                                    </div>
                                    <div class="insight-badge positive">Predicted: Continued improvement</div>
                                </div>
                            </div>
                        </div>

                        <div class="insight-item warning">
                            <div class="insight-header">
                                <div class="insight-icon">
                                    <i class="fas fa-exclamation-triangle"></i>
                                </div>
                                <div class="insight-content">
                                    <div class="insight-title warning">Area of Concern</div>
                                    <div class="insight-description">
                                        Management support scores remain static.
                                        This may become a limiting factor for further improvements.
                                    </div>
                                    <div class="insight-badge warning">Action needed: Manager training</div>
                                </div>
                            </div>
                        </div>

                        <div class="insight-item info">
                            <div class="insight-header">
                                <div class="insight-icon">
                                    <i class="fas fa-calendar-week"></i>
                                </div>
                                <div class="insight-content">
                                    <div class="insight-title info">Seasonal Pattern</div>
                                    <div class="insight-description">
                                        Mental health scores typically dip during Q4 (holiday stress)
                                        and peak in Q2 (post-intervention period).
                                    </div>
                                    <div class="insight-badge info">Plan: Preventive Q4 interventions</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="insights-card">
                    <div class="insights-header">
                        <h2 class="insights-title">
                            <i class="fas fa-bullseye"></i>
                            Key Performance Indicators
                        </h2>
                    </div>
                    <div class="insights-body">
                        <div class="kpi-item">
                            <div class="kpi-header">
                                <div class="kpi-info">
                                    <div class="kpi-title">Mental Health Response Rate</div>
                                    <div class="kpi-subtitle">Employee participation in assessments</div>
                                </div>
                                <div class="kpi-value-section">
                                    <div class="kpi-value success">87%</div>
                                    <div class="kpi-change">
                                        <i class="fas fa-arrow-up"></i> +12%
                                    </div>
                                </div>
                            </div>
                            <div class="progress-bar-nexgen">
                                <div class="progress-fill success" style="width: 87%"></div>
                            </div>
                        </div>

                        <div class="kpi-item">
                            <div class="kpi-header">
                                <div class="kpi-info">
                                    <div class="kpi-title">High-Risk Case Resolution</div>
                                    <div class="kpi-subtitle">Successful intervention outcomes</div>
                                </div>
                                <div class="kpi-value-section">
                                    <div class="kpi-value primary">73%</div>
                                    <div class="kpi-change">
                                        <i class="fas fa-arrow-up"></i> +8%
                                    </div>
                                </div>
                            </div>
                            <div class="progress-bar-nexgen">
                                <div class="progress-fill" style="width: 73%; background: var(--info-gradient);"></div>
                            </div>
                        </div>

                        <div class="kpi-item">
                            <div class="kpi-header">
                                <div class="kpi-info">
                                    <div class="kpi-title">Workplace Satisfaction</div>
                                    <div class="kpi-subtitle">Overall employee satisfaction score</div>
                                </div>
                                <div class="kpi-value-section">
                                    <div class="kpi-value info">76%</div>
                                    <div class="kpi-change">
                                        <i class="fas fa-arrow-up"></i> +19%
                                    </div>
                                </div>
                            </div>
                            <div class="progress-bar-nexgen">
                                <div class="progress-fill" style="width: 76%; background: var(--info-gradient);"></div>
                            </div>
                        </div>

                        <div class="kpi-item">
                            <div class="kpi-header">
                                <div class="kpi-info">
                                    <div class="kpi-title">Early Warning Detection</div>
                                    <div class="kpi-subtitle">AI-powered risk identification rate</div>
                                </div>
                                <div class="kpi-value-section">
                                    <div class="kpi-value warning">92%</div>
                                    <div class="kpi-change">
                                        <i class="fas fa-arrow-up"></i> +5%
                                    </div>
                                </div>
                            </div>
                            <div class="progress-bar-nexgen">
                                <div class="progress-fill warning" style="width: 92%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Trending Topics -->
            <div class="trending-section">
                <div class="trending-header">
                    <h2 class="trending-title">
                        <i class="fas fa-fire"></i>
                        Trending Mental Health Topics
                    </h2>
                </div>
                <div class="trending-body">
                    <div class="trending-columns">
                        <div class="trending-category">
                            <h3 class="category-title improving">
                                <i class="fas fa-arrow-up"></i>Improving Areas
                            </h3>
                            <div class="trending-topic">
                                <div class="topic-content">
                                    <div class="topic-indicator up">↗</div>
                                    <div class="topic-name">Remote Work Satisfaction</div>
                                    <div class="topic-change positive">+31%</div>
                                </div>
                            </div>
                            <div class="trending-topic">
                                <div class="topic-content">
                                    <div class="topic-indicator up">↗</div>
                                    <div class="topic-name">Team Collaboration</div>
                                    <div class="topic-change positive">+24%</div>
                                </div>
                            </div>
                            <div class="trending-topic">
                                <div class="topic-content">
                                    <div class="topic-indicator up">↗</div>
                                    <div class="topic-name">Mental Health Awareness</div>
                                    <div class="topic-change positive">+28%</div>
                                </div>
                            </div>
                        </div>

                        <div class="trending-category">
                            <h3 class="category-title attention">
                                <i class="fas fa-eye"></i>Areas Needing Attention
                            </h3>
                            <div class="trending-topic">
                                <div class="topic-content">
                                    <div class="topic-indicator stable">→</div>
                                    <div class="topic-name">Deadline Pressure</div>
                                    <div class="topic-change neutral">0%</div>
                                </div>
                            </div>
                            <div class="trending-topic">
                                <div class="topic-content">
                                    <div class="topic-indicator down">↘</div>
                                    <div class="topic-name">Sleep Quality</div>
                                    <div class="topic-change negative">-8%</div>
                                </div>
                            </div>
                            <div class="trending-topic">
                                <div class="topic-content">
                                    <div class="topic-indicator stable">→</div>
                                    <div class="topic-name">Career Development Clarity</div>
                                    <div class="topic-change neutral">-2%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Recommendations -->
            <div class="recommendations-section">
                <div class="recommendations-header">
                    <h2 class="recommendations-title">
                        <i class="fas fa-lightbulb"></i>
                        Trend-Based Action Recommendations
                    </h2>
                </div>
                <div class="recommendations-body">
                    <div class="recommendations-grid">
                        <div class="action-card success">
                            <h3 class="action-header success">
                                <i class="fas fa-check-circle"></i>Continue Success
                            </h3>
                            <ul class="action-list">
                                <li>Maintain current work-life balance initiatives</li>
                                <li>Expand successful stress management programs</li>
                                <li>Share best practices across departments</li>
                            </ul>
                        </div>
                        <div class="action-card warning">
                            <h3 class="action-header warning">
                                <i class="fas fa-exclamation-triangle"></i>Address Concerns
                            </h3>
                            <ul class="action-list">
                                <li>Implement sleep hygiene education programs</li>
                                <li>Review deadline setting processes</li>
                                <li>Enhance manager support training</li>
                            </ul>
                        </div>
                        <div class="action-card primary">
                            <h3 class="action-header primary">
                                <i class="fas fa-rocket"></i>Strategic Focus
                            </h3>
                            <ul class="action-list">
                                <li>Develop career development clarity initiatives</li>
                                <li>Create predictive mental health models</li>
                                <li>Establish quarterly trend review meetings</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<!-- Date Range Selection Modal -->
<div class="modal fade" id="dateRangeModal" tabindex="-1" data-bs-backdrop="true" data-bs-keyboard="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-nexgen">
            <div class="modal-header-nexgen">
                <h2 class="modal-title-nexgen">
                    <i class="fas fa-calendar-alt"></i>
                    Select Analysis Period
                </h2>
            </div>
            <div class="modal-body-nexgen">
                <form id="dateRangeForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="fromDate" class="form-label-nexgen">From Date</label>
                                <input type="date" class="form-control-nexgen" id="fromDate" value="@ViewBag.FromDate.ToString("yyyy-MM-dd")">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="toDate" class="form-label-nexgen">To Date</label>
                                <input type="date" class="form-control-nexgen" id="toDate" value="@ViewBag.ToDate.ToString("yyyy-MM-dd")">
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label-nexgen">Quick Select:</label>
                        <div class="quick-select-group">
                            <button type="button" class="quick-select-btn" onclick="setDateRange(30)">Last 30 Days</button>
                            <button type="button" class="quick-select-btn" onclick="setDateRange(90)">Last 3 Months</button>
                            <button type="button" class="quick-select-btn" onclick="setDateRange(180)">Last 6 Months</button>
                            <button type="button" class="quick-select-btn" onclick="setDateRange(365)">Last Year</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer-nexgen">
                <button type="button" class="btn-nexgen secondary" data-bs-dismiss="modal">CANCEL</button>
                <button type="button" class="btn-nexgen primary" onclick="applyDateRange()">
                    <i class="fas fa-chart-line"></i> ANALYZE PERIOD
                </button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            initializeTrendCharts();
        });

        function initializeTrendCharts() {
            // Chart.js default color settings for dark theme
            Chart.defaults.color = '#cbd5e1';
            Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.1)';
            Chart.defaults.backgroundColor = 'rgba(255, 255, 255, 0.05)';

            // Mental Health Score Trend Chart
            const mentalHealthCtx = document.getElementById('mentalHealthTrendChart').getContext('2d');
            new Chart(mentalHealthCtx, {
                type: 'line',
                data: {
                    labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
                    datasets: [{
                        label: 'Mental Health Score',
                        data: [65, 68, 72, 75, 78, 82],
                        borderColor: '#34d399',
                        backgroundColor: 'rgba(52, 211, 153, 0.1)',
                        tension: 0.4,
                        fill: true,
                        pointBackgroundColor: '#34d399',
                        pointBorderColor: '#ffffff',
                        pointBorderWidth: 2,
                        pointRadius: 6,
                        pointHoverRadius: 8
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: 'rgba(15, 23, 42, 0.95)',
                            titleColor: '#ffffff',
                            bodyColor: '#cbd5e1',
                            borderColor: 'rgba(52, 211, 153, 0.3)',
                            borderWidth: 1,
                            cornerRadius: 8
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)',
                                borderColor: 'rgba(255, 255, 255, 0.2)'
                            },
                            ticks: {
                                color: '#cbd5e1'
                            }
                        },
                        y: {
                            beginAtZero: true,
                            max: 100,
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)',
                                borderColor: 'rgba(255, 255, 255, 0.2)'
                            },
                            ticks: {
                                color: '#cbd5e1',
                                callback: function(value) {
                                    return value + '%';
                                }
                            }
                        }
                    }
                }
            });

            // Risk Level Trends Chart
            const riskTrendCtx = document.getElementById('riskTrendChart').getContext('2d');
            new Chart(riskTrendCtx, {
                type: 'line',
                data: {
                    labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
                    datasets: [
                        {
                            label: 'Low Risk',
                            data: [45, 48, 52, 58, 62, 68],
                            borderColor: '#34d399',
                            backgroundColor: 'rgba(52, 211, 153, 0.2)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: 'Moderate Risk',
                            data: [25, 23, 21, 18, 16, 14],
                            borderColor: '#fbbf24',
                            backgroundColor: 'rgba(251, 191, 36, 0.2)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: 'High Risk',
                            data: [15, 12, 10, 8, 6, 4],
                            borderColor: '#f87171',
                            backgroundColor: 'rgba(248, 113, 113, 0.2)',
                            tension: 0.4,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        tooltip: {
                            backgroundColor: 'rgba(15, 23, 42, 0.95)',
                            titleColor: '#ffffff',
                            bodyColor: '#cbd5e1',
                            borderColor: 'rgba(52, 211, 153, 0.3)',
                            borderWidth: 1,
                            cornerRadius: 8
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: '#cbd5e1'
                            }
                        },
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: '#cbd5e1'
                            }
                        }
                    }
                }
            });

            // Sentiment Evolution Chart
            const sentimentCtx = document.getElementById('sentimentTrendChart').getContext('2d');
            new Chart(sentimentCtx, {
                type: 'line',
                data: {
                    labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6'],
                    datasets: [
                        {
                            label: 'Positive',
                            data: [45, 48, 52, 58, 62, 68],
                            borderColor: '#34d399',
                            backgroundColor: 'rgba(52, 211, 153, 0.3)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: 'Neutral',
                            data: [35, 34, 33, 30, 28, 25],
                            borderColor: '#64748b',
                            backgroundColor: 'rgba(100, 116, 139, 0.3)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: 'Negative',
                            data: [20, 18, 15, 12, 10, 7],
                            borderColor: '#f87171',
                            backgroundColor: 'rgba(248, 113, 113, 0.3)',
                            tension: 0.4,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        tooltip: {
                            backgroundColor: 'rgba(15, 23, 42, 0.95)',
                            titleColor: '#ffffff',
                            bodyColor: '#cbd5e1',
                            borderColor: 'rgba(52, 211, 153, 0.3)',
                            borderWidth: 1,
                            cornerRadius: 8
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: '#cbd5e1'
                            }
                        },
                        y: {
                            beginAtZero: true,
                            max: 100,
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: '#cbd5e1'
                            }
                        }
                    }
                }
            });

            // Intervention Effectiveness Chart
            const interventionCtx = document.getElementById('interventionEffectivenessChart').getContext('2d');
            new Chart(interventionCtx, {
                type: 'bar',
                data: {
                    labels: ['Pre-Intervention', 'Month 1', 'Month 2', 'Month 3', 'Current'],
                    datasets: [{
                        label: 'Mental Health Score',
                        data: [58, 65, 72, 78, 84],
                        backgroundColor: [
                            '#f87171', // Red for pre-intervention
                            '#fbbf24', // Yellow for month 1
                            '#22d3ee', // Cyan for month 2
                            '#34d399', // Green for month 3
                            '#60a5fa'  // Blue for current
                        ],
                        borderRadius: 8,
                        borderSkipped: false
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: 'rgba(15, 23, 42, 0.95)',
                            titleColor: '#ffffff',
                            bodyColor: '#cbd5e1',
                            borderColor: 'rgba(52, 211, 153, 0.3)',
                            borderWidth: 1,
                            cornerRadius: 8
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: '#cbd5e1'
                            }
                        },
                        y: {
                            beginAtZero: true,
                            max: 100,
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: '#cbd5e1',
                                callback: function(value) {
                                    return value + '%';
                                }
                            }
                        }
                    }
                }
            });
        }

        // Date range functions
        function setDateRange(days) {
            const toDate = new Date();
            const fromDate = new Date();
            fromDate.setDate(toDate.getDate() - days);

            document.getElementById('fromDate').value = fromDate.toISOString().split('T')[0];
            document.getElementById('toDate').value = toDate.toISOString().split('T')[0];
        }

        function applyDateRange() {
            const fromDate = document.getElementById('fromDate').value;
            const toDate = document.getElementById('toDate').value;

            if (!fromDate || !toDate) {
                Swal.fire({
                    title: 'Invalid Date Range',
                    text: 'Please select both from and to dates.',
                    icon: 'warning',
                    customClass: {
                        popup: 'swal-nexgen',
                        title: 'swal-title-nexgen'
                    }
                });
                return;
            }

            const url = '@Url.Action("AnalyzeTrends", new { id = ViewBag.QuestionnaireId })' +
                        `?fromDate=${fromDate}&toDate=${toDate}`;

            window.location.href = url;
        }

        // Export trends data
        function exportTrendsData() {
            Swal.fire({
                title: 'Export Trends Data',
                text: 'This will export mental health trends data in CSV format for further analysis.',
                icon: 'info',
                showCancelButton: true,
                confirmButtonText: 'Export CSV',
                cancelButtonText: 'Cancel',
                customClass: {
                    popup: 'swal-nexgen',
                    title: 'swal-title-nexgen'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = '@Url.Action("ExportAnalysis", new { id = ViewBag.QuestionnaireId })';
                }
            });
        }

        // Custom SweetAlert styling
        const swalStyle = document.createElement('style');
        swalStyle.textContent = `
            .swal-nexgen {
                background: rgba(15, 23, 42, 0.95) !important;
                backdrop-filter: blur(20px) !important;
                border: 1px solid rgba(52, 211, 153, 0.3) !important;
                border-radius: 1rem !important;
                color: #e2e8f0 !important;
            }
            .swal-title-nexgen {
                color: #34d399 !important;
                font-weight: 700 !important;
                letter-spacing: 0.05em !important;
            }
        `;
        document.head.appendChild(swalStyle);
    </script>
}