Update app.py

app.py

@@ -571,7 +571,7 @@ def get_share_links(app_url="https://howmuchfeed.com"):
 
 
 # ============================================================
-# FEED CALCULATION - CLEAN INTERFACE
+# FEED CALCULATION - MOBILE-FRIENDLY
 # ============================================================
 
 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 - CLEAN INTERFACE
+    # Output HTML - MOBILE-FRIENDLY
     starter_bags_display = f"{starter_bags:.1f}"
     finisher_bags_display = f"{finisher_bags:.1f}"
 
@@ -654,93 +654,93 @@ 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: 16px; line-height: 1.6; color: #1a1a1a;">
+    <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: 12px; padding: 20px 24px; margin-bottom: 20px;">
-        <div style="font-size: 13px; font-weight: 700; color: #16a34a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;">Here Is Your Result</div>
-        <div style="font-size: 20px; font-weight: 700; color: #166534;">
-            You need <span style="background: #166534; color: white; border-radius: 8px; padding: 2px 14px; font-size: 24px;">{total_bags:.1f}</span> bags of {bag_size} kg poultry feed<br>
+    <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>
-        <div style="margin-top: 8px; font-size: 18px; font-weight: 700; color: #1e40af;">
-            Buy <span style="background: #1e40af; color: white; border-radius: 8px; padding: 2px 14px; font-size: 22px;">{rounded_bags}</span> bags to make sure you have enough feed.
+        <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>
-        <div style="margin-top: 8px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: #4b5563;">
-            <span>🐔 Birds: <strong>{birds:,} broilers</strong></span>
-            <span>📅 Age: <strong>{age_text} ({total_days} days)</strong></span>
-            <span>🏷️ Breed: <strong>{breed}</strong></span>
+        <div style="margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: #4b5563;">
+            <span>🐔 <strong>{birds:,}</strong></span>
+            <span>📅 <strong>{age_text}</strong></span>
+            <span>🏷️ <strong>{breed}</strong></span>
         </div>
-        <div style="margin-top: 8px; display: flex; gap: 8px; font-size: 13px;">
-            <span style="background: {breed_color}; color: white; padding: 2px 12px; border-radius: 12px; font-weight: 600;">{breed}</span>
-            <span style="background: #6b7280; color: white; padding: 2px 12px; border-radius: 12px; font-weight: 600;">{country_name}</span>
+        <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>
     </div>
 
     <!-- Feed Breakdown -->
-    <div style="margin-bottom: 16px;">
-        <div style="font-size: 14px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Feed Breakdown</div>
-        <table style="width: 100%; border-collapse: collapse; font-size: 15px;">
+    <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: 8px 4px;"><strong>Starter (0 – 4 weeks)</strong></td>
-                <td style="padding: 8px 4px; text-align: right;">{starter_kg:,.1f} kg</td>
-                <td style="padding: 8px 4px; text-align: right; font-weight: 700; color: #1e293b;">{starter_bags_display} bags</td>
+                <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: 8px 4px;"><strong>Finisher (4 – 8 weeks)</strong></td>
-                <td style="padding: 8px 4px; text-align: right;">{finisher_kg:,.1f} kg</td>
-                <td style="padding: 8px 4px; text-align: right; font-weight: 700; color: #1e293b;">{finisher_bags_display} bags</td>
+                <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: 8px 4px; font-weight: 700;">TOTAL</td>
-                <td style="padding: 8px 4px; text-align: right; font-weight: 700;">{total_feed_kg:,.1f} kg</td>
-                <td style="padding: 8px 4px; text-align: right; font-weight: 700; font-size: 18px; color: #166534;">{total_bags:.1f} bags</td>
+                <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>
         </table>
     </div>
 
     <!-- Feed Cost -->
-    <div style="background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 16px 20px; margin-bottom: 16px;">
-        <div style="font-size: 14px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">Feed Cost Estimate</div>
-        <div style="display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;">
-            <span style="font-size: 16px; color: #4b5563;">Approximately</span>
-            <span style="background: #1e40af; color: white; border-radius: 8px; padding: 2px 16px; font-size: 20px; font-weight: 700;">{rounded_bags} bags</span>
-            <span style="font-size: 16px; color: #4b5563;">× {currency_symbol}{price_per_bag:,.0f} per bag</span>
+    <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>
         </div>
-        <div style="font-size: 28px; font-weight: 800; color: #1e40af; margin-top: 4px;">
+        <div style="font-size: 24px; font-weight: 800; color: #1e40af; margin-top: 2px;">
             {currency_symbol}{total_cost:,.0f}
         </div>
     </div>
 
     <!-- Expected Performance -->
-    <div style="border-top: 1px solid #e5e7eb; padding-top: 14px; margin-bottom: 16px;">
-        <div style="font-size: 14px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;">Expected Performance</div>
-        <div style="display: flex; gap: 24px; flex-wrap: wrap; font-size: 15px;">
-            <div>Body weight per bird: <span style="font-weight: 700; font-size: 17px;">{expected_weight:.3f} kg</span></div>
-            <div>Flock live weight: <span style="font-weight: 700; font-size: 17px;">{flock_weight:,.1f} kg</span></div>
+    <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>
     </div>
 
     <!-- Share Results -->
-    <div style="border-top: 1px solid #e5e7eb; padding-top: 14px;">
-        <div style="font-size: 14px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">Share Results</div>
-        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+    <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;">
             <a href="{share_links['whatsapp']}" target="_blank" style="text-decoration: none;">
-                <button style="background: #25D366; color: white; padding: 8px 18px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">WhatsApp</button>
+                <button style="background: #25D366; color: white; padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;">WhatsApp</button>
             </a>
             <a href="{share_links['email']}" target="_blank" style="text-decoration: none;">
-                <button style="background: #ea4335; color: white; padding: 8px 18px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Email</button>
+                <button style="background: #ea4335; color: white; padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;">Email</button>
             </a>
             <a href="{share_links['facebook']}" target="_blank" style="text-decoration: none;">
-                <button style="background: #1877f2; color: white; padding: 8px 18px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Facebook</button>
+                <button style="background: #1877f2; color: white; padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;">Facebook</button>
             </a>
             <a href="{share_links['twitter']}" target="_blank" style="text-decoration: none;">
-                <button style="background: #000000; color: white; padding: 8px 18px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;">Twitter/X</button>
+                <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>
             </a>
         </div>
     </div>
 
-    <div style="margin-top: 14px; font-size: 12px; color: #9ca3af; border-top: 1px solid #f3f4f6; padding-top: 10px;">
+    <div style="margin-top: 12px; font-size: 11px; color: #9ca3af; border-top: 1px solid #f3f4f6; padding-top: 8px;">
         Estimate based on {breed} benchmark. Actual results may vary.
     </div>
     </div>
@@ -960,38 +960,99 @@ def export_calculations_wrapper():
 
 
 # ============================================================
-# CSS
+# MOBILE-FRIENDLY CSS
 # ============================================================
 
 CSS = """
-body { background: #f6f8f4; }
-.gradio-container { max-width: 1200px !important; margin: auto !important; }
+/* Force light theme */
+.gradio-container {
+    max-width: 100% !important;
+    padding: 8px !important;
+}
+
+body {
+    background: #f6f8f4 !important;
+    color: #1a1a1a !important;
+}
 
-.main-title { text-align: center; padding: 15px 10px 5px 10px; }
-.main-title h1 { font-size: 34px; margin-bottom: 4px; }
-.main-title p { font-size: 17px; color: #555; }
+/* Fix dark mode issues */
+.dark .gradio-container {
+    background: #f6f8f4 !important;
+    color: #1a1a1a !important;
+}
+
+.main-title { 
+    text-align: center; 
+    padding: 10px 5px 5px 5px; 
+}
+.main-title h1 { 
+    font-size: 24px; 
+    margin-bottom: 2px; 
+}
+.main-title p { 
+    font-size: 14px; 
+    color: #555; 
+}
 
 .answer-box { 
-    background: white; 
-    border-radius: 16px; 
-    padding: 20px 24px; 
-    border: 1px solid #e5e7eb; 
-    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
+    background: white !important; 
+    border-radius: 12px !important; 
+    padding: 12px 14px !important; 
+    border: 1px solid #e5e7eb !important; 
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; 
+    min-height: 200px !important; 
 }
 
 .email-box { 
-    border: 2px solid #d9e7d2; 
-    border-radius: 12px; 
-    padding: 10px; 
-    background: #fbfdf9; 
+    border: 2px solid #d9e7d2 !important; 
+    border-radius: 10px !important; 
+    padding: 8px !important; 
+    background: #fbfdf9 !important; 
 }
 
-button { min-height: 48px !important; }
+button { min-height: 44px !important; }
+
 .admin-login { 
-    border: 2px solid #d97706; 
-    border-radius: 12px; 
-    padding: 15px; 
-    background: #fffbeb; 
+    border: 2px solid #d97706 !important; 
+    border-radius: 10px !important; 
+    padding: 12px !important; 
+    background: #fffbeb !important; 
+}
+
+/* Force all text to be readable */
+label, span, p, div, h1, h2, h3, h4 {
+    color: #1a1a1a !important;
+}
+
+/* Fix dropdown text */
+select, input, textarea {
+    color: #1a1a1a !important;
+    background: white !important;
+}
+
+/* Fix table text */
+table td, table th {
+    color: #1a1a1a !important;
+}
+
+/* Force white background on all containers */
+.gradio-container, .gradio-row, .gradio-column, .gradio-group {
+    background: transparent !important;
+}
+
+/* Mobile specific */
+@media screen and (max-width: 768px) {
+    .gradio-container {
+        padding: 4px !important;
+    }
+    
+    .main-title h1 {
+        font-size: 20px !important;
+    }
+    
+    .answer-box {
+        padding: 8px 10px !important;
+    }
 }
 """
 
@@ -999,7 +1060,7 @@ button { min-height: 48px !important; }
 # UI
 # ============================================================
 
-with gr.Blocks(title=APP_NAME) as demo:
+with gr.Blocks(title=APP_NAME, css=CSS) as demo:
 
     gr.HTML("""
     <div class="main-title">
@@ -1011,7 +1072,7 @@ with gr.Blocks(title=APP_NAME) as demo:
     with gr.Row(equal_height=True):
 
         # LEFT COLUMN: INPUTS
-        with gr.Column(scale=1, min_width=350):
+        with gr.Column(scale=1, min_width=300):
 
             with gr.Group():
                 gr.Markdown("## 🐔 Breed & Birds")
@@ -1030,7 +1091,7 @@ with gr.Blocks(title=APP_NAME) as demo:
                     allow_custom_value=True,
                 )
 
-                gr.Markdown("## 📅 Expected Age of Birds")
+                gr.Markdown("## 📅 Expected Age")
 
                 with gr.Row():
                     weeks = gr.Dropdown(
@@ -1058,7 +1119,7 @@ with gr.Blocks(title=APP_NAME) as demo:
                         minimum=0,
                     )
 
-                gr.Markdown("## 🌍 Country & Currency")
+                gr.Markdown("## 🌍 Country")
 
                 detected_country = detect_country_from_env() or "NG"
                 country_choices = ["Auto-Detect"] + [code for code, _ in COUNTRY_LIST]
@@ -1090,14 +1151,14 @@ with gr.Blocks(title=APP_NAME) as demo:
             save_status = gr.Markdown("")
 
         # RIGHT COLUMN: RESULTS
-        with gr.Column(scale=1, min_width=350):
+        with gr.Column(scale=1, min_width=300):
             gr.Markdown("## 🎯 Quick Answer")
             result = gr.HTML(
                 value="""
-                <div style="font-size: 16px; color: #9ca3af; text-align: center; padding: 40px 20px;">
-                    <div style="font-size: 48px; margin-bottom: 12px;">🐔</div>
+                <div style="font-size: 14px; color: #9ca3af; text-align: center; padding: 30px 10px; background: white; 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: 14px; margin-top: 8px;">Your feed estimate will appear here</div>
+                    <div style="font-size: 13px; margin-top: 6px;">Your feed estimate will appear here</div>
                 </div>
                 """,
                 elem_classes=["answer-box"],