Update app.py

app.py

@@ -571,7 +571,7 @@ def get_share_links(app_url="https://howmuchfeed.com"):
 
 
 # ============================================================
-# FEED CALCULATION - MOBILE-FRIENDLY
+# FEED CALCULATION - MOBILE-FRIENDLY WITH FIXED COLORS
 # ============================================================
 
 def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_code, breed, request: gr.Request):
@@ -645,7 +645,7 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
     # Generate share links
     share_links = get_share_links()
 
-    # Output HTML - MOBILE-FRIENDLY
+    # Output HTML - COMPLETELY REWRITTEN FOR MOBILE
     starter_bags_display = f"{starter_bags:.1f}"
     finisher_bags_display = f"{finisher_bags:.1f}"
 
@@ -654,93 +654,339 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
         age_text += f" + {days} day{'s' if days != 1 else ''}"
 
     html = f"""
-    <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.5; color: #1a1a1a; background: white; border-radius: 12px; padding: 16px;">
-
-    <!-- Quick Answer -->
-    <div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px;">
-        <div style="font-size: 12px; font-weight: 700; color: #16a34a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Here Is Your Result</div>
-        <div style="font-size: 16px; font-weight: 700; color: #166534;">
-            You need <span style="background: #166534; color: white; border-radius: 6px; padding: 2px 12px; font-size: 20px;">{total_bags:.1f}</span> bags of {bag_size} kg poultry feed<br>
-            to raise <strong>{birds:,}</strong> {breed} broilers from day-old to <strong>{age_text} ({total_days} days)</strong>
+    <div style="
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 15px;
+        line-height: 1.5;
+        color: #1a1a1a;
+        background: #ffffff;
+        border-radius: 12px;
+        padding: 12px 14px;
+        border: 1px solid #e5e7eb;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+        margin: 0;
+        width: 100%;
+        box-sizing: border-box;
+    ">
+
+    <!-- Quick Answer Box -->
+    <div style="
+        background: #f0fdf4;
+        border: 2px solid #22c55e;
+        border-radius: 10px;
+        padding: 14px 16px;
+        margin-bottom: 14px;
+        background-color: #f0fdf4 !important;
+    ">
+        <div style="
+            font-size: 12px;
+            font-weight: 700;
+            color: #16a34a;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 4px;
+            background: transparent;
+        ">Here Is Your Result</div>
+        
+        <div style="
+            font-size: 16px;
+            font-weight: 700;
+            color: #166534;
+            background: transparent;
+        ">
+            You need
+            <span style="
+                display: inline-block;
+                background: #166534;
+                color: #ffffff;
+                border-radius: 6px;
+                padding: 2px 12px;
+                font-size: 20px;
+                font-weight: 800;
+                background-color: #166534 !important;
+            ">{total_bags:.1f}</span>
+            bags of {bag_size} kg poultry feed to raise <strong>{birds:,}</strong> {breed} broilers from day-old to <strong>{age_text} ({total_days} days)</strong>
         </div>
-        <div style="margin-top: 6px; font-size: 16px; font-weight: 700; color: #1e40af;">
-            Buy <span style="background: #1e40af; color: white; border-radius: 6px; padding: 2px 12px; font-size: 18px;">{rounded_bags}</span> bags to make sure you have enough feed.
+        
+        <div style="
+            margin-top: 6px;
+            font-size: 16px;
+            font-weight: 700;
+            color: #1e40af;
+            background: transparent;
+        ">
+            Buy
+            <span style="
+                display: inline-block;
+                background: #1e40af;
+                color: #ffffff;
+                border-radius: 6px;
+                padding: 2px 12px;
+                font-size: 18px;
+                font-weight: 800;
+                background-color: #1e40af !important;
+            ">{rounded_bags}</span>
+            bags to make sure you have enough feed.
         </div>
-        <div style="margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: #4b5563;">
+        
+        <div style="
+            margin-top: 6px;
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+            font-size: 13px;
+            color: #4b5563;
+            background: transparent;
+        ">
             <span>🐔 <strong>{birds:,}</strong></span>
             <span>📅 <strong>{age_text}</strong></span>
             <span>🏷️ <strong>{breed}</strong></span>
         </div>
-        <div style="margin-top: 6px; display: flex; gap: 6px; font-size: 12px;">
-            <span style="background: {breed_color}; color: white; padding: 2px 10px; border-radius: 10px; font-weight: 600;">{breed}</span>
-            <span style="background: #6b7280; color: white; padding: 2px 10px; border-radius: 10px; font-weight: 600;">{country_name}</span>
+        
+        <div style="
+            margin-top: 6px;
+            display: flex;
+            gap: 6px;
+            font-size: 12px;
+            background: transparent;
+        ">
+            <span style="
+                background: {breed_color};
+                color: #ffffff;
+                padding: 2px 10px;
+                border-radius: 10px;
+                font-weight: 600;
+                background-color: {breed_color} !important;
+            ">{breed}</span>
+            <span style="
+                background: #6b7280;
+                color: #ffffff;
+                padding: 2px 10px;
+                border-radius: 10px;
+                font-weight: 600;
+                background-color: #6b7280 !important;
+            ">{country_name}</span>
         </div>
     </div>
 
-    <!-- Feed Breakdown -->
-    <div style="margin-bottom: 14px;">
-        <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;">Feed Breakdown</div>
-        <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
-            <tr style="border-bottom: 1px solid #e5e7eb;">
-                <td style="padding: 6px 4px;"><strong>Starter</strong></td>
-                <td style="padding: 6px 4px; text-align: right;">{starter_kg:,.1f} kg</td>
-                <td style="padding: 6px 4px; text-align: right; font-weight: 700; color: #1e293b;">{starter_bags_display} bags</td>
-            </tr>
-            <tr style="border-bottom: 1px solid #e5e7eb;">
-                <td style="padding: 6px 4px;"><strong>Finisher</strong></td>
-                <td style="padding: 6px 4px; text-align: right;">{finisher_kg:,.1f} kg</td>
-                <td style="padding: 6px 4px; text-align: right; font-weight: 700; color: #1e293b;">{finisher_bags_display} bags</td>
-            </tr>
-            <tr>
-                <td style="padding: 6px 4px; font-weight: 700;">TOTAL</td>
-                <td style="padding: 6px 4px; text-align: right; font-weight: 700;">{total_feed_kg:,.1f} kg</td>
-                <td style="padding: 6px 4px; text-align: right; font-weight: 700; font-size: 16px; color: #166534;">{total_bags:.1f} bags</td>
-            </tr>
+    <!-- Feed Breakdown Table -->
+    <div style="margin-bottom: 12px; background: transparent;">
+        <div style="
+            font-size: 12px;
+            font-weight: 700;
+            color: #6b7280;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 6px;
+            background: transparent;
+        ">Feed Breakdown</div>
+        
+        <table style="
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 14px;
+            background: #ffffff;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            overflow: hidden;
+        ">
+            <thead>
+                <tr style="background: #f8fafc; border-bottom: 2px solid #e5e7eb;">
+                    <th style="padding: 8px 10px; text-align: left; font-weight: 600; color: #1a1a1a; background: #f8fafc;">Stage</th>
+                    <th style="padding: 8px 10px; text-align: right; font-weight: 600; color: #1a1a1a; background: #f8fafc;">Feed (kg)</th>
+                    <th style="padding: 8px 10px; text-align: right; font-weight: 600; color: #1a1a1a; background: #f8fafc;">Bags (25 kg)</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr style="border-bottom: 1px solid #e5e7eb;">
+                    <td style="padding: 8px 10px; color: #1a1a1a; background: #ffffff;"><strong>Starter</strong></td>
+                    <td style="padding: 8px 10px; text-align: right; color: #1a1a1a; background: #ffffff;">{starter_kg:,.1f}</td>
+                    <td style="padding: 8px 10px; text-align: right; font-weight: 700; color: #1e293b; background: #ffffff;">{starter_bags_display}</td>
+                </tr>
+                <tr style="border-bottom: 1px solid #e5e7eb;">
+                    <td style="padding: 8px 10px; color: #1a1a1a; background: #ffffff;"><strong>Finisher</strong></td>
+                    <td style="padding: 8px 10px; text-align: right; color: #1a1a1a; background: #ffffff;">{finisher_kg:,.1f}</td>
+                    <td style="padding: 8px 10px; text-align: right; font-weight: 700; color: #1e293b; background: #ffffff;">{finisher_bags_display}</td>
+                </tr>
+                <tr style="background: #f8fafc; font-weight: 700;">
+                    <td style="padding: 8px 10px; color: #1a1a1a; background: #f8fafc;">TOTAL</td>
+                    <td style="padding: 8px 10px; text-align: right; color: #1a1a1a; background: #f8fafc;">{total_feed_kg:,.1f}</td>
+                    <td style="padding: 8px 10px; text-align: right; font-weight: 800; font-size: 16px; color: #166534; background: #f8fafc;">{total_bags:.1f}</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 
-    <!-- Feed Cost -->
-    <div style="background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 12px 16px; margin-bottom: 14px;">
-        <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">Feed Cost Estimate</div>
-        <div style="display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 14px;">
-            <span style="color: #4b5563;">Approx</span>
-            <span style="background: #1e40af; color: white; border-radius: 6px; padding: 2px 12px; font-size: 18px; font-weight: 700;">{rounded_bags} bags</span>
-            <span style="color: #4b5563;">× {currency_symbol}{price_per_bag:,.0f}</span>
+    <!-- Feed Cost Box -->
+    <div style="
+        background: #eff6ff;
+        border: 2px solid #3b82f6;
+        border-radius: 10px;
+        padding: 12px 16px;
+        margin-bottom: 12px;
+        background-color: #eff6ff !important;
+    ">
+        <div style="
+            font-size: 12px;
+            font-weight: 700;
+            color: #6b7280;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 2px;
+            background: transparent;
+        ">Feed Cost Estimate</div>
+        
+        <div style="
+            display: flex;
+            align-items: baseline;
+            gap: 6px;
+            flex-wrap: wrap;
+            font-size: 14px;
+            background: transparent;
+        ">
+            <span style="color: #4b5563; background: transparent;">Approx</span>
+            <span style="
+                display: inline-block;
+                background: #1e40af;
+                color: #ffffff;
+                border-radius: 6px;
+                padding: 2px 12px;
+                font-size: 18px;
+                font-weight: 700;
+                background-color: #1e40af !important;
+            ">{rounded_bags}</span>
+            <span style="color: #4b5563; background: transparent;">bags × {currency_symbol}{price_per_bag:,.0f}</span>
         </div>
-        <div style="font-size: 24px; font-weight: 800; color: #1e40af; margin-top: 2px;">
+        
+        <div style="
+            font-size: 24px;
+            font-weight: 800;
+            color: #1e40af;
+            margin-top: 2px;
+            background: transparent;
+        ">
             {currency_symbol}{total_cost:,.0f}
         </div>
     </div>
 
     <!-- Expected Performance -->
-    <div style="border-top: 1px solid #e5e7eb; padding-top: 12px; margin-bottom: 14px;">
-        <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Expected Performance</div>
-        <div style="display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px;">
-            <div>Body weight: <span style="font-weight: 700;">{expected_weight:.3f} kg</span></div>
-            <div>Flock weight: <span style="font-weight: 700;">{flock_weight:,.1f} kg</span></div>
+    <div style="
+        border-top: 1px solid #e5e7eb;
+        padding-top: 10px;
+        margin-bottom: 12px;
+        background: transparent;
+    ">
+        <div style="
+            font-size: 12px;
+            font-weight: 700;
+            color: #6b7280;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 4px;
+            background: transparent;
+        ">Expected Performance</div>
+        
+        <div style="
+            display: flex;
+            gap: 16px;
+            flex-wrap: wrap;
+            font-size: 14px;
+            background: transparent;
+        ">
+            <div style="background: transparent;">
+                Body weight: <span style="font-weight: 700; color: #1a1a1a;">{expected_weight:.3f} kg</span>
+            </div>
+            <div style="background: transparent;">
+                Flock weight: <span style="font-weight: 700; color: #1a1a1a;">{flock_weight:,.1f} kg</span>
+            </div>
         </div>
     </div>
 
-    <!-- Share Results -->
-    <div style="border-top: 1px solid #e5e7eb; padding-top: 12px;">
-        <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;">Share Results</div>
-        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+    <!-- Share Buttons -->
+    <div style="
+        border-top: 1px solid #e5e7eb;
+        padding-top: 12px;
+        background: transparent;
+    ">
+        <div style="
+            font-size: 12px;
+            font-weight: 700;
+            color: #6b7280;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 6px;
+            background: transparent;
+        ">Share Results</div>
+        
+        <div style="
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+            background: transparent;
+        ">
             <a href="{share_links['whatsapp']}" target="_blank" style="text-decoration: none;">
-                <button style="background: #25D366; color: white; padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;">WhatsApp</button>
+                <span style="
+                    display: inline-block;
+                    background: #25D366;
+                    color: #ffffff;
+                    padding: 6px 14px;
+                    border-radius: 6px;
+                    font-size: 13px;
+                    font-weight: 600;
+                    cursor: pointer;
+                    background-color: #25D366 !important;
+                ">WhatsApp</span>
             </a>
             <a href="{share_links['email']}" target="_blank" style="text-decoration: none;">
-                <button style="background: #ea4335; color: white; padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;">Email</button>
+                <span style="
+                    display: inline-block;
+                    background: #ea4335;
+                    color: #ffffff;
+                    padding: 6px 14px;
+                    border-radius: 6px;
+                    font-size: 13px;
+                    font-weight: 600;
+                    cursor: pointer;
+                    background-color: #ea4335 !important;
+                ">Email</span>
             </a>
             <a href="{share_links['facebook']}" target="_blank" style="text-decoration: none;">
-                <button style="background: #1877f2; color: white; padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;">Facebook</button>
+                <span style="
+                    display: inline-block;
+                    background: #1877f2;
+                    color: #ffffff;
+                    padding: 6px 14px;
+                    border-radius: 6px;
+                    font-size: 13px;
+                    font-weight: 600;
+                    cursor: pointer;
+                    background-color: #1877f2 !important;
+                ">Facebook</span>
             </a>
             <a href="{share_links['twitter']}" target="_blank" style="text-decoration: none;">
-                <button style="background: #000000; color: white; padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;">Twitter/X</button>
+                <span style="
+                    display: inline-block;
+                    background: #000000;
+                    color: #ffffff;
+                    padding: 6px 14px;
+                    border-radius: 6px;
+                    font-size: 13px;
+                    font-weight: 600;
+                    cursor: pointer;
+                    background-color: #000000 !important;
+                ">Twitter/X</span>
             </a>
         </div>
     </div>
 
-    <div style="margin-top: 12px; font-size: 11px; color: #9ca3af; border-top: 1px solid #f3f4f6; padding-top: 8px;">
+    <div style="
+        margin-top: 10px;
+        font-size: 11px;
+        color: #9ca3af;
+        border-top: 1px solid #f3f4f6;
+        padding-top: 8px;
+        background: transparent;
+    ">
         Estimate based on {breed} benchmark. Actual results may vary.
     </div>
     </div>
@@ -960,47 +1206,46 @@ def export_calculations_wrapper():
 
 
 # ============================================================
-# MOBILE-FRIENDLY CSS
+# CSS - FORCE LIGHT THEME
 # ============================================================
 
 CSS = """
-/* Force light theme */
-.gradio-container {
-    max-width: 100% !important;
-    padding: 8px !important;
+/* Reset everything - force light theme */
+* {
+    color: #1a1a1a !important;
 }
 
-body {
-    background: #f6f8f4 !important;
+body, .gradio-container, .gradio-row, .gradio-column, .gradio-group {
+    background-color: #f6f8f4 !important;
     color: #1a1a1a !important;
 }
 
-/* Fix dark mode issues */
-.dark .gradio-container {
-    background: #f6f8f4 !important;
-    color: #1a1a1a !important;
+.gradio-container {
+    max-width: 100% !important;
+    padding: 6px 8px !important;
+    background-color: #f6f8f4 !important;
 }
 
 .main-title { 
     text-align: center; 
-    padding: 10px 5px 5px 5px; 
+    padding: 8px 4px 4px 4px; 
 }
 .main-title h1 { 
-    font-size: 24px; 
+    font-size: 22px; 
     margin-bottom: 2px; 
+    color: #1a1a1a !important;
 }
 .main-title p { 
     font-size: 14px; 
-    color: #555; 
+    color: #555 !important; 
 }
 
 .answer-box { 
-    background: white !important; 
+    background: #ffffff !important; 
     border-radius: 12px !important; 
-    padding: 12px 14px !important; 
+    padding: 8px 10px !important; 
     border: 1px solid #e5e7eb !important; 
     box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; 
-    min-height: 200px !important; 
 }
 
 .email-box { 
@@ -1019,19 +1264,22 @@ button { min-height: 44px !important; }
     background: #fffbeb !important; 
 }
 
-/* Force all text to be readable */
-label, span, p, div, h1, h2, h3, h4 {
+/* Fix all text inputs */
+input, select, textarea {
+    background: #ffffff !important;
     color: #1a1a1a !important;
+    border: 1px solid #d1d5db !important;
 }
 
-/* Fix dropdown text */
-select, input, textarea {
+/* Fix labels */
+label, span, p, div, h1, h2, h3, h4 {
     color: #1a1a1a !important;
-    background: white !important;
+    background: transparent !important;
 }
 
-/* Fix table text */
-table td, table th {
+/* Fix dropdowns */
+select option {
+    background: #ffffff !important;
     color: #1a1a1a !important;
 }
 
@@ -1051,16 +1299,22 @@ table td, table th {
     }
     
     .answer-box {
-        padding: 8px 10px !important;
+        padding: 6px 8px !important;
     }
 }
+
+/* Override dark mode completely */
+.dark, .dark * {
+    background-color: #f6f8f4 !important;
+    color: #1a1a1a !important;
+}
 """
 
 # ============================================================
 # UI
 # ============================================================
 
-with gr.Blocks(title=APP_NAME, css=CSS) as demo:
+with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
 
     gr.HTML("""
     <div class="main-title">
@@ -1155,7 +1409,7 @@ with gr.Blocks(title=APP_NAME, css=CSS) as demo:
             gr.Markdown("## 🎯 Quick Answer")
             result = gr.HTML(
                 value="""
-                <div style="font-size: 14px; color: #9ca3af; text-align: center; padding: 30px 10px; background: white; border-radius: 12px;">
+                <div style="font-size: 14px; color: #9ca3af; text-align: center; padding: 30px 10px; background: #ffffff; border-radius: 12px;">
                     <div style="font-size: 40px; margin-bottom: 10px;">🐔</div>
                     <div>Select your breed, enter details and click <strong>Calculate</strong></div>
                     <div style="font-size: 13px; margin-top: 6px;">Your feed estimate will appear here</div>