Update app.py

app.py

@@ -1659,226 +1659,492 @@ else:
         st.exception(e)  # optionally show full traceback during dev
 
 
-
 # =================== OBJECTIVE 6: Automated Insights & AI Recommendations =====================
-st.markdown('<div style="text-align: center; font-size: 1.5em; font-weight: bold; margin-bottom: 20px;">OBJECTIVE 6: Instant Insights & Recommendations</div>', unsafe_allow_html=True)
-
-# Membagi tampilan menjadi dua kolom
-col_insights, col_recs = st.columns(2)
+st.markdown(
+    '''
+    <div style="
+        text-align: center;
+        font-size: 1.5em;
+        font-weight: bold;
+        margin-bottom: 20px;
+        color: #2c3e50;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    ">
+        OBJECTIVE 6: Instant Insights & Recommendations
+    </div>
+    ''',
+    unsafe_allow_html=True
+)
 
-# Helper function for red % formatting
+# Helper: format % in red (hazard indicator)
 def format_red_pct(value):
     return f'<span style="color: #d32f2f; font-weight: bold;">{value:.1f}%</span>'
 
-# Kolom kiri: Insights by Advanced Analytics
+# Split layout
+col_insights, col_recs = st.columns(2)
+
+# ================= LEFT COLUMN: Insights =================
 with col_insights:
-    st.markdown('<div style="text-align: center; font-size: 1.3em; font-weight: bold; margin-bottom: 15px;">Insights by Advanced Analytics</div>', unsafe_allow_html=True)
+    st.markdown(
+        '''
+        <div style="
+            text-align: center;
+            font-size: 1.3em;
+            font-weight: bold;
+            margin-bottom: 15px;
+            color: #2c3e50;
+        ">Insights by Advanced Analytics</div>
+        ''',
+        unsafe_allow_html=True
+    )
 
-    # 1. Critical Hour Analysis (2-5 AM)
-    critical_hours = [2, 3, 4, 5]
+    # 1. Critical Hour Analysis (3–6 AM)
+    critical_hours = [3, 4, 5, 6]  # sesuai label "3-6 AM"
     critical_alerts = df[df['hour'].isin(critical_hours)]
     critical_pct = (len(critical_alerts) / len(df)) * 100 if len(df) > 0 else 0
 
-    st.markdown(f"**Critical Hour Risk (3-6 AM)**", unsafe_allow_html=True)
-    # Use conditional formatting for background color
+    st.markdown(f"**Critical Hour Risk (3–6 AM)**", unsafe_allow_html=True)
     bg_color = "#ffcccc" if critical_pct > 50 else "#ffebcc" if critical_pct > 25 else "#ffffcc" if critical_pct > 10 else "#e6ffe6"
     st.markdown(
-        f'<div style="background-color: {bg_color}; padding: 10px; border-radius: 5px; margin-bottom: 10px;">'
-        f'Critical Hour Alerts: <b>{len(critical_alerts)}</b> ({format_red_pct(critical_pct)} of total alerts)'
-        f'</div>', 
+        f'''
+        <div style="
+            background-color: {bg_color};
+            padding: 10px;
+            border-radius: 5px;
+            margin-bottom: 12px;
+            font-family: 'Segoe UI', sans-serif;
+        ">
+            Critical Hour Alerts: <b>{len(critical_alerts)}</b> ({format_red_pct(critical_pct)} of total alerts)
+        </div>
+        ''',
         unsafe_allow_html=True
     )
+
     if critical_pct > 10:
-        st.warning(f"High risk: {format_red_pct(critical_pct)} of fatigue alerts occur during critical hours (3-6 AM). This is a known circadian dip period.")
+        st.markdown(
+            f'''
+            <div style="
+                background-color: #fff8e1;
+                color: #5d4037;
+                padding: 10px;
+                border-radius: 5px;
+                border-left: 4px solid #ff9800;
+                margin-bottom: 15px;
+                font-family: 'Segoe UI', sans-serif;
+            ">
+                ⚠️ <strong>High risk:</strong> {format_red_pct(critical_pct)} of fatigue alerts occur during critical hours (3–6 AM). 
+                This is a known circadian dip period.
+            </div>
+            ''',
+            unsafe_allow_html=True
+        )
     else:
-        st.info(f"{format_red_pct(critical_pct)} of alerts occur during critical hours. This is within acceptable range.")
+        st.markdown(
+            f'''
+            <div style="
+                background-color: #e8f5e8;
+                color: #2e7d32;
+                padding: 10px;
+                border-radius: 5px;
+                border-left: 4px solid #4caf50;
+                margin-bottom: 15px;
+                font-family: 'Segoe UI', sans-serif;
+            ">
+                ✓ <strong>Acceptable:</strong> {format_red_pct(critical_pct)} of alerts occur during critical hours. 
+                This is within acceptable range.
+            </div>
+            ''',
+            unsafe_allow_html=True
+        )
 
-    # 2. High-Speed Fatigue Analysis (Environmental Risk)
-    if col_speed and col_speed in df.columns:
-        high_speed_threshold = df[col_speed].quantile(0.75) if not df[col_speed].dropna().empty else 0
-        high_speed_fatigue = df[df[col_speed] >= high_speed_threshold] if high_speed_threshold > 0 else pd.DataFrame()
+    # 2. High-Speed Fatigue Analysis
+    if col_speed and col_speed in df.columns and not df[col_speed].dropna().empty:
+        high_speed_threshold = df[col_speed].quantile(0.75)
+        high_speed_fatigue = df[df[col_speed] >= high_speed_threshold]
         high_speed_pct = (len(high_speed_fatigue) / len(df)) * 100 if len(df) > 0 else 0
 
         st.markdown(f"**High-Speed Fatigue Risk (Speed > {high_speed_threshold:.0f} km/h)**", unsafe_allow_html=True)
         st.markdown(
-            f'<div style="background-color: #f8f9fa; padding: 10px; border-radius: 5px; border: 1px solid #dee2e6; margin-bottom: 10px;">'
-            f'<b>High-Speed Fatigue Events:</b> <span style="color: #1a73e8; font-weight: bold;">{len(high_speed_fatigue)}</span>'
-            f' ({format_red_pct(high_speed_pct)} of total alerts)'
-            f'</div>',
+            f'''
+            <div style="
+                background-color: #f9f9f9;
+                padding: 10px;
+                border-radius: 5px;
+                border: 1px solid #e0e0e0;
+                margin-bottom: 12px;
+                font-family: 'Segoe UI', sans-serif;
+            ">
+                High-Speed Fatigue Events: <span style="color: #1a73e8; font-weight: bold;">{len(high_speed_fatigue)}</span> 
+                ({format_red_pct(high_speed_pct)} of total alerts)
+            </div>
+            ''',
             unsafe_allow_html=True
         )
+
         if high_speed_pct > 20:
-            st.warning(f"High risk: {format_red_pct(high_speed_pct)} of fatigue alerts occur at high speeds. This increases accident severity potential.")
+            st.markdown(
+                f'''
+                <div style="
+                    background-color: #fff8e1;
+                    color: #5d4037;
+                    padding: 10px;
+                    border-radius: 5px;
+                    border-left: 4px solid #ff9800;
+                    margin-bottom: 15px;
+                    font-family: 'Segoe UI', sans-serif;
+                ">
+                    ⚠️ <strong>High risk:</strong> {format_red_pct(high_speed_pct)} of fatigue alerts occur at high speeds. 
+                    This increases accident severity potential.
+                </div>
+                ''',
+                unsafe_allow_html=True
+            )
         else:
-            st.info(f"{format_red_pct(high_speed_pct)} of alerts occur at high speeds. This is within acceptable range.")
+            st.markdown(
+                f'''
+                <div style="
+                    background-color: #e8f5e8;
+                    color: #2e7d32;
+                    padding: 10px;
+                    border-radius: 5px;
+                    border-left: 4px solid #4caf50;
+                    margin-bottom: 15px;
+                    font-family: 'Segoe UI', sans-serif;
+                ">
+                    ✓ <strong>Acceptable:</strong> {format_red_pct(high_speed_pct)} of alerts occur at high speeds. 
+                    This is within acceptable range.
+                </div>
+                ''',
+                unsafe_allow_html=True
+            )
     else:
-        st.info("Speed data not available for High-Speed Fatigue Analysis.")
+        st.markdown(
+            '''
+            <div style="
+                background-color: #f1f3f4;
+                padding: 10px;
+                border-radius: 5px;
+                font-style: italic;
+                color: #607d8b;
+                margin-bottom: 15px;
+            ">Speed data not available for High-Speed Fatigue Analysis.</div>
+            ''',
+            unsafe_allow_html=True
+        )
 
     # 3. Shift Pattern Analysis
     if col_shift and col_shift in df.columns:
-        shift_counts = df[col_shift].value_counts()
+        shift_counts = df[col_shift].value_counts().sort_index()
         st.markdown(f"**Shift Pattern Risk**", unsafe_allow_html=True)
+
         for shift_val in shift_counts.index:
             count = shift_counts[shift_val]
             shift_pct = (count / len(df)) * 100
             st.markdown(
-                f'<div style="background-color: #f8f9fa; padding: 8px; border-radius: 5px; border: 1px solid #e9ecef; margin: 5px 0;">'
-                f'<b>Shift {shift_val} Alerts:</b> <span style="color: #1a73e8; font-weight: bold;">{count}</span>'
-                f' ({format_red_pct(shift_pct)} of total alerts)'
-                f'</div>',
+                f'''
+                <div style="
+                    background-color: #f9f9f9;
+                    padding: 8px;
+                    border-radius: 5px;
+                    border: 1px solid #e0e0e0;
+                    margin: 6px 0;
+                    font-family: 'Segoe UI', sans-serif;
+                ">
+                    Shift {shift_val} Alerts: <span style="color: #1a73e8; font-weight: bold;">{count}</span> 
+                    ({format_red_pct(shift_pct)} of total alerts)
+                </div>
+                ''',
                 unsafe_allow_html=True
             )
+
             if shift_pct > 50:
-                st.warning(f"Shift {shift_val} has disproportionately high alerts ({format_red_pct(shift_pct)}). Review shift scheduling and workload.")
+                st.markdown(
+                    f'''
+                    <div style="
+                        background-color: #fff8e1;
+                        color: #5d4037;
+                        padding: 8px;
+                        border-radius: 5px;
+                        border-left: 4px solid #ff9800;
+                        margin: 6px 0 12px 0;
+                        font-family: 'Segoe UI', sans-serif;
+                    ">
+                        ⚠️ <strong>Disproportionate risk:</strong> Shift {shift_val} has {format_red_pct(shift_pct)} alerts. 
+                        Review shift scheduling and workload.
+                    </div>
+                    ''',
+                    unsafe_allow_html=True
+                )
             else:
-                st.info(f"Shift {shift_val} alert distribution is acceptable ({format_red_pct(shift_pct)}).")
+                st.markdown(
+                    f'''
+                    <div style="
+                        background-color: #e8f5e8;
+                        color: #2e7d32;
+                        padding: 8px;
+                        border-radius: 5px;
+                        border-left: 4px solid #4caf50;
+                        margin: 6px 0 12px 0;
+                        font-family: 'Segoe UI', sans-serif;
+                    ">
+                        ✓ <strong>Acceptable:</strong> Shift {shift_val} alert distribution is acceptable ({format_red_pct(shift_pct)}).
+                    </div>
+                    ''',
+                    unsafe_allow_html=True
+                )
     else:
-        st.info("Shift data not available for Shift Pattern Analysis.")
+        st.markdown(
+            '''
+            <div style="
+                background-color: #f1f3f4;
+                padding: 10px;
+                border-radius: 5px;
+                font-style: italic;
+                color: #607d8b;
+                margin-bottom: 15px;
+            ">Shift data not available for Shift Pattern Analysis.</div>
+            ''',
+            unsafe_allow_html=True
+        )
 
-    # 4. Operator Risk Profiling
+    # 4. Operator Risk Profiling (anonymized)
     if col_operator and col_operator in df.columns:
         operator_alerts = df[col_operator].value_counts()
         top_risk_operators = operator_alerts.head(5)
-
         st.markdown(f"**High-Risk Operator Identification**", unsafe_allow_html=True)
+
         for op_name, count in top_risk_operators.items():
             op_pct = (count / len(df)) * 100
-            # Anonymize name: first part only
-            display_name = op_name.split()[0] if isinstance(op_name, str) else str(op_name)
+            display_name = str(op_name).split()[0] if pd.notna(op_name) else "Unknown"
             st.markdown(
-                f'<div style="background-color: #f8f9fa; padding: 8px; border-radius: 5px; border: 1px solid #e9ecef; margin: 5px 0;">'
-                f'<b>Operator: {display_name}</b> — <span style="color: #1a73e8; font-weight: bold;">{count}</span> alerts'
-                f' ({format_red_pct(op_pct)} of total alerts)'
-                f'</div>',
+                f'''
+                <div style="
+                    background-color: #f9f9f9;
+                    padding: 8px;
+                    border-radius: 5px;
+                    border: 1px solid #e0e0e0;
+                    margin: 6px 0;
+                    font-family: 'Segoe UI', sans-serif;
+                ">
+                    Operator: <b>{display_name}</b> — <span style="color: #1a73e8; font-weight: bold;">{count}</span> alerts 
+                    ({format_red_pct(op_pct)} of total alerts)
+                </div>
+                ''',
                 unsafe_allow_html=True
             )
+
             if op_pct > 5:
-                st.warning(f"Operator {display_name} has high fatigue risk ({format_red_pct(op_pct)} of alerts). Consider coaching or rest plan.")
+                st.markdown(
+                    f'''
+                    <div style="
+                        background-color: #fff8e1;
+                        color: #5d4037;
+                        padding: 8px;
+                        border-radius: 5px;
+                        border-left: 4px solid #ff9800;
+                        margin: 6px 0 12px 0;
+                        font-family: 'Segoe UI', sans-serif;
+                    ">
+                        ⚠️ <strong>High risk:</strong> Operator {display_name} has {format_red_pct(op_pct)} of alerts. 
+                        Consider coaching or rest plan.
+                    </div>
+                    ''',
+                    unsafe_allow_html=True
+                )
             else:
-                st.info(f"Operator {display_name} fatigue risk is within acceptable range ({format_red_pct(op_pct)}).")
+                st.markdown(
+                    f'''
+                    <div style="
+                        background-color: #e8f5e8;
+                        color: #2e7d32;
+                        padding: 8px;
+                        border-radius: 5px;
+                        border-left: 4px solid #4caf50;
+                        margin: 6px 0 12px 0;
+                        font-family: 'Segoe UI', sans-serif;
+                    ">
+                        ✓ <strong>Acceptable:</strong> Operator {display_name} fatigue risk is within acceptable range ({format_red_pct(op_pct)}).
+                    </div>
+                    ''',
+                    unsafe_allow_html=True
+                )
     else:
-        st.info("Operator data not available for Operator Risk Profiling.")
+        st.markdown(
+            '''
+            <div style="
+                background-color: #f1f3f4;
+                padding: 10px;
+                border-radius: 5px;
+                font-style: italic;
+                color: #607d8b;
+                margin-bottom: 15px;
+            ">Operator data not available for Operator Risk Profiling.</div>
+            ''',
+            unsafe_allow_html=True
+        )
 
 
-# Kolom kanan: AI Recommendations
+# ================= RIGHT COLUMN: AI Recommendations =================
 with col_recs:
-    st.markdown('<div style="text-align: center; font-size: 1.3em; font-weight: bold; margin-bottom: 15px;">Recommendations</div>', unsafe_allow_html=True)
-    ai_recs = []
-    insights_found = []
-
-    # Peak hour
-    if "hour" in df.columns and not df.empty:
-        peak_hour = df["hour"].value_counts().idxmax()
-        critical_hours = [2, 3, 4, 5]
-        if peak_hour in critical_hours:
-            insights_found.append(f"Most fatigue risk occurs at **{peak_hour}:00** — during critical circadian low period (3-6 AM). Consider enhanced monitoring.")
-        else:
-            insights_found.append(f"Most fatigue risk occurs at **{peak_hour}:00** — likely due to circadian drop.")
-
-    # Risk shift
-    if col_shift and not df.empty:
-        worst_shift = df[col_shift].value_counts().idxmax()
-        insights_found.append(f"Highest fatigue recorded in **Shift {worst_shift}** — review scheduling & workload.")
-
-    # Worst operator
-    if col_operator and not df.empty:
-        worst_operator = df[col_operator].value_counts().idxmax()
-        display_name = worst_operator.split()[0] if isinstance(worst_operator, str) else str(worst_operator)
-        insights_found.append(f"Operator at highest risk: **{display_name}** — suggested coaching or rest plan.")
+    st.markdown(
+        '''
+        <div style="
+            text-align: center;
+            font-size: 1.3em;
+            font-weight: bold;
+            margin-bottom: 15px;
+            color: #2c3e50;
+        ">Recommendations</div>
+        ''',
+        unsafe_allow_html=True
+    )
 
-    # Duration risk
-    if "duration_sec" in df.columns and not df.empty:
-        avg_duration = df["duration_sec"].mean()
-        if not pd.isna(avg_duration) and avg_duration > 10:
-            insights_found.append("Long fatigue event duration suggests slow response — improve alerting training.")
+    ai_recs = []
 
-    # High-speed insight (add conditionally)
-    if col_speed and col_speed in df.columns and high_speed_pct > 20:
-        insights_found.append("High-speed fatigue events exceed threshold — integrate with speed management.")
+    # 1. Critical Hour Insight → Recommendation
+    if critical_pct > 10:
+        ai_recs.append({
+            "title": "Enhance Monitoring During Circadian Low",
+            "action": "Deploy enhanced fatigue monitoring systems (e.g., EOR or real-time biometrics) specifically during 3–6 AM shifts.",
+            "data_point": f"Critical Hour Alerts: {len(critical_alerts)} ({format_red_pct(critical_pct)} of total alerts)",
+            "reason": "High alert concentration during the circadian trough (3–6 AM) significantly increases operational risk."
+        })
 
-    # Generate recommendations based on found insights
-    if insights_found:
-        if any("circadian low" in i.lower() for i in insights_found):
-            ai_recs.append({
-                "recommendation": "Deploy enhanced fatigue monitoring systems (e.g., EOR) specifically during 3-6 AM shifts.",
-                "data_point": f"Critical Hour Alerts: {len(critical_alerts)} ({format_red_pct(critical_pct)} of total alerts)",
-                "reason": "High percentage of alerts occurring during the known circadian low period (3-6 AM) indicates increased risk during these hours."
-            })
-        if any("shift" in i.lower() for i in insights_found):
-            shift_pct_val = (df[col_shift].value_counts()[worst_shift] / len(df)) * 100
-            ai_recs.append({
-                "recommendation": "Review shift rotation schedules to minimize consecutive high-risk shifts.",
-                "data_point": f"Shift {worst_shift} Alerts: {df[col_shift].value_counts()[worst_shift]} ({format_red_pct(shift_pct_val)} of total alerts)",
-                "reason": f"The identified high-risk shift ({worst_shift}) has the highest number of fatigue alerts, suggesting scheduling or workload issues."
-            })
-        if any("operator" in i.lower() for i in insights_found):
-            op_pct_val = (df[col_operator].value_counts()[worst_operator] / len(df)) * 100
+    # 2. High-Speed Insight → Recommendation
+    if col_speed in df.columns and not df[col_speed].empty:
+        high_speed_threshold = df[col_speed].quantile(0.75)
+        high_speed_fatigue = df[df[col_speed] >= high_speed_threshold]
+        high_speed_pct = (len(high_speed_fatigue) / len(df)) * 100 if len(df) > 0 else 0
+        if high_speed_pct > 20:
             ai_recs.append({
-                "recommendation": "Initiate individual coaching or mandatory rest periods for high-risk operators.",
-                "data_point": f"Operator {display_name} Alerts: {df[col_operator].value_counts()[worst_operator]} ({format_red_pct(op_pct_val)} of total alerts)",
-                "reason": f"The identified high-risk operator ({display_name}) has the highest number of fatigue alerts, indicating a need for targeted intervention."
+                "title": "Integrate Speed & Fatigue Controls",
+                "action": "Implement speed advisory or automatic speed reduction triggers when fatigue alerts occur at high speeds.",
+                "data_point": f"High-Speed Fatigue Events: {len(high_speed_fatigue)} ({format_red_pct(high_speed_pct)} of total alerts)",
+                "reason": "Fatigue at high speed multiplies collision severity; proactive speed management reduces fatality risk."
             })
-        if any("duration" in i.lower() for i in insights_found):
+
+    # 3. Shift Imbalance → Recommendation
+    if col_shift in df.columns:
+        shift_counts = df[col_shift].value_counts()
+        worst_shift = shift_counts.idxmax()
+        worst_pct = (shift_counts[worst_shift] / len(df)) * 100
+        if worst_pct > 50:
             ai_recs.append({
-                "recommendation": "Review and improve alert response protocols and training.",
-                "data_point": f"Average Fatigue Event Duration: {avg_duration:.2f} seconds",
-                "reason": "Long average duration suggests potential delays in response time or alert acknowledgment, requiring protocol review."
+                "title": "Rebalance Shift Workload",
+                "action": "Review shift rotation policies, rest intervals, and task allocation for Shift {worst_shift}.",
+                "data_point": f"Shift {worst_shift} Alerts: {shift_counts[worst_shift]} ({format_red_pct(worst_pct)} of total alerts)",
+                "reason": f"Overconcentration of fatigue events in one shift suggests systemic scheduling or ergonomic issues."
             })
-        if any("high-speed" in i.lower() for i in insights_found):
+
+    # 4. High-Risk Operator → Recommendation
+    if col_operator in df.columns:
+        operator_counts = df[col_operator].value_counts()
+        worst_op = operator_counts.idxmax()
+        worst_op_pct = (operator_counts[worst_op] / len(df)) * 100
+        display_name = str(worst_op).split()[0] if pd.notna(worst_op) else "Unknown"
+        if worst_op_pct > 5:
             ai_recs.append({
-                "recommendation": "Implement speed management strategies in conjunction with fatigue monitoring.",
-                "data_point": f"High-Speed Fatigue Events: {len(high_speed_fatigue)} ({format_red_pct(high_speed_pct)} of total alerts)",
-                "reason": "A significant percentage of alerts occur at high speeds, increasing accident severity risk. Speed control is crucial."
+                "title": "Individual Risk Intervention",
+                "action": "Initiate targeted coaching, health screening, or adjusted rest plan for Operator {display_name}.",
+                "data_point": f"Operator {display_name} Alerts: {operator_counts[worst_op]} ({format_red_pct(worst_op_pct)} of total alerts)",
+                "reason": "Persistent high alerts for one individual may indicate medical, behavioral, or training factors requiring support."
             })
-        if not ai_recs:
+
+    # 5. Long Duration → Recommendation
+    if "duration_sec" in df.columns and not df["duration_sec"].dropna().empty:
+        avg_duration = df["duration_sec"].mean()
+        if pd.notna(avg_duration) and avg_duration > 10:
             ai_recs.append({
-                "recommendation": "Data quality is sufficient. Focus on implementing recommendations from Objectives 1-5.",
-                "data_point": "General Data Quality Check",
-                "reason": "No specific high-impact insights were automatically identified from the aggregated data in this section."
+                "title": "Improve Alert Response Protocol",
+                "action": "Review and retrain on fatigue alert acknowledgment procedures; consider haptic or multi-sensory alerts.",
+                "data_point": f"Average Fatigue Event Duration: {avg_duration:.1f} seconds",
+                "reason": "Long event duration (>10s) suggests delayed recognition or response—increasing near-miss potential."
             })
 
-        # Display recommendations with consistent styling
-        for rec in ai_recs:
-            st.markdown(f"""
+    # Final fallback
+    if not ai_recs:
+        ai_recs.append({
+            "title": "Baseline Monitoring",
+            "action": "Continue routine monitoring and periodic review of fatigue trends.",
+            "data_point": "No high-risk patterns detected in current dataset.",
+            "reason": "Data indicates balanced risk distribution—maintain current controls and re-evaluate monthly."
+        })
+
+    # Render recommendations
+    for rec in ai_recs:
+        # Replace placeholder {worst_shift}/{display_name} if needed
+        action = rec["action"]
+        if "{worst_shift}" in action and col_shift in df.columns:
+            worst_shift = df[col_shift].value_counts().idxmax()
+            action = action.replace("{worst_shift}", str(worst_shift))
+        if "{display_name}" in action and col_operator in df.columns:
+            worst_op = df[col_operator].value_counts().idxmax()
+            display_name = str(worst_op).split()[0] if pd.notna(worst_op) else "Unknown"
+            action = action.replace("{display_name}", display_name)
+
+        st.markdown(
+            f'''
             <div style="
-                background: #f8f9fa;
-                border: 1px solid #dee2e6;
+                background: #ffffff;
+                border: 1px solid #e0e0e0;
                 border-radius: 8px;
-                padding: 15px;
-                margin: 10px 0;
+                padding: 16px;
+                margin: 12px 0;
                 color: #2c3e50;
                 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-                box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+                box-shadow: 0 2px 6px rgba(0,0,0,0.05);
             ">
                 <div style="
                     font-weight: bold;
-                    color: #2c3e50;
-                    margin-bottom: 8px;
-                    font-size: 14px;
-                    background: #e9ecef;
+                    color: #1a237e;
+                    font-size: 15px;
+                    margin-bottom: 10px;
+                    padding-bottom: 6px;
+                    border-bottom: 1px solid #e0e0e0;
+                ">📌 {rec['title']}</div>
+                
+                <div style="font-size: 14px; margin-bottom: 12px;">
+                    <strong>Action:</strong> {action}
+                </div>
+                
+                <div style="
+                    font-size: 12px;
+                    background: #f5f9ff;
                     padding: 8px;
                     border-radius: 5px;
-                    border-left: 4px solid #495057;
-                ">AI Recommendation</div>
-                <div style="padding-top: 8px; font-size: 14px; margin-bottom: 10px;">
-                    <strong>Action:</strong> {rec['recommendation']}
-                </div>
-                <div style="font-size: 12px; padding: 8px; background: #e9ecef; border-radius: 5px; margin-top: 5px;">
+                    margin-top: 8px;
+                ">
                     <strong>Data Point:</strong> {rec['data_point']}
                 </div>
-                <div style="font-size: 12px; padding: 8px; background: #f1f1f1; border-radius: 5px; margin-top: 5px;">
+                
+                <div style="
+                    font-size: 12px;
+                    background: #f8f9fa;
+                    padding: 8px;
+                    border-radius: 5px;
+                    margin-top: 6px;
+                ">
                     <strong>AI Reasoning:</strong> {rec['reason']}
                 </div>
             </div>
-            """, unsafe_allow_html=True)
-    else:
-        st.info("No specific data points available for AI recommendations. Ensure relevant columns (hour, shift, operator, duration, speed) are present and populated.")
+            ''',
+            unsafe_allow_html=True
+        )
 
 # ================= FOOTER ===========================
 st.markdown("---")
 st.markdown(
-    '<div style="text-align: center; color: #6c757d; font-size: 0.9em; margin-top: 20px;">'
-    'FatigueAnalyzer - Transforming Mining Safety with Intelligent Analytics | Contact: info@bukittechnology.com'
-    '</div>',
+    '''
+    <div style="
+        text-align: center;
+        color: #6c757d;
+        font-size: 0.9em;
+        font-family: 'Segoe UI', sans-serif;
+        margin-top: 20px;
+        padding: 10px;
+    ">
+        FatigueAnalyzer — Transforming Mining Safety with Intelligent Analytics | Contact: info@bukittechnology.com
+    </div>
+    ''',
     unsafe_allow_html=True
 )