Update src/app.py

src/app.py

@@ -313,92 +313,182 @@ _PLOT_LAYOUT = dict(
 
 
 def render_login():
-    """Full-screen SPJIMR branded login - fixed left brand panel, Streamlit form on right."""
+    """SPJIMR login — fully responsive across desktop, tablet, mobile."""
 
     st.markdown("""
     <style>
     @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=DM+Sans:wght@300;400;500&display=swap');
 
-    [data-testid="stSidebar"]    { display: none !important; }
-    [data-testid="stSidebarNav"] { display: none !important; }
-    .stDeployButton              { display: none !important; }
-    #MainMenu                    { visibility: hidden; }
-    footer                       { visibility: hidden; }
-    header                       { visibility: hidden; }
-
-    html, body { height: 100%; background: #120018 !important; }
+    [data-testid="stSidebar"], [data-testid="stSidebarNav"] { display: none !important; }
+    .stDeployButton { display: none !important; }
+    #MainMenu, footer, header { visibility: hidden; }
+    html, body, [data-testid="stAppViewContainer"] { background: #120018 !important; }
 
+    /* Strip Streamlit padding everywhere */
+    [data-testid="stAppViewContainer"] > section.main,
+    [data-testid="stAppViewContainer"] > section.main > div,
     .main .block-container {
         padding: 0 !important;
         margin: 0 !important;
         max-width: 100% !important;
-        padding-left: 54% !important;
-        padding-right: 3rem !important;
-        padding-top: 0 !important;
-        padding-bottom: 0 !important;
-        min-height: 100vh;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        background: #120018;
-        box-sizing: border-box;
+        background: transparent !important;
     }
 
-    .spjimr-brand-panel {
-        position: fixed;
-        top: 0; left: 0;
-        width: 52%;
-        height: 100vh;
-        background: linear-gradient(160deg, #1C0029 0%, #0D0014 55%, #150008 100%);
-        border-right: 1px solid rgba(80,0,115,0.4);
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        padding: 3.5rem 3rem;
-        overflow: hidden;
-        z-index: 999;
-        box-sizing: border-box;
+    /* ── DESKTOP ≥ 900px: fixed side-by-side split ── */
+    @media (min-width: 900px) {
+        .spjimr-brand-panel {
+            position: fixed !important;
+            top: 0; left: 0;
+            width: 48%;
+            height: 100vh;
+            background: linear-gradient(160deg, #1C0029 0%, #0D0014 55%, #150008 100%);
+            border-right: 1px solid rgba(80,0,115,0.35);
+            display: flex !important;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: clamp(2rem, 3.5vw, 3.5rem) clamp(1.5rem, 2.5vw, 3rem);
+            overflow: hidden;
+            z-index: 100;
+            box-sizing: border-box;
+        }
+        .spjimr-form-bg {
+            position: fixed !important;
+            top: 0; left: 48%;
+            width: 52%;
+            height: 100vh;
+            background: #120018;
+            z-index: 100;
+            pointer-events: none;
+        }
+        .main .block-container {
+            position: relative;
+            z-index: 300 !important;
+            padding-left: calc(48% + 3rem) !important;
+            padding-right: 3rem !important;
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+            width: 100% !important;
+            min-height: 100vh;
+            display: flex !important;
+            flex-direction: column !important;
+            justify-content: center !important;
+            box-sizing: border-box !important;
+        }
+        .main .block-container > div:first-child {
+            max-width: 420px !important;
+        }
+        .brand-tagline, .brand-desc, .brand-stats { display: block !important; }
     }
 
-    div[data-testid="stForm"] {
-        background: transparent !important;
-        border: none !important;
-        padding: 0 !important;
+    /* ── TABLET 600–899px: top logo bar, form below ── */
+    @media (min-width: 600px) and (max-width: 899px) {
+        .spjimr-brand-panel {
+            position: relative !important;
+            width: 100% !important;
+            height: auto !important;
+            background: linear-gradient(160deg, #1C0029 0%, #0D0014 100%);
+            border-bottom: 1px solid rgba(80,0,115,0.35);
+            display: flex !important;
+            flex-direction: row;
+            align-items: center;
+            padding: 1.2rem 2rem !important;
+            gap: 1.2rem;
+            box-sizing: border-box;
+            z-index: 10;
+        }
+        .spjimr-form-bg { display: none !important; }
+        .brand-tagline, .brand-desc, .brand-stats { display: none !important; }
+        .main .block-container {
+            position: relative !important;
+            z-index: 10 !important;
+            padding: 2.5rem 3rem !important;
+            max-width: 560px !important;
+            margin: 0 auto !important;
+            width: 100% !important;
+            box-sizing: border-box !important;
+        }
+        .main .block-container > div:first-child { max-width: 100% !important; }
+    }
+
+    /* ── MOBILE < 600px: compact logo strip, full-width form ── */
+    @media (max-width: 599px) {
+        .spjimr-brand-panel {
+            position: relative !important;
+            width: 100% !important;
+            height: auto !important;
+            background: linear-gradient(160deg, #1C0029 0%, #0D0014 100%);
+            border-bottom: 1px solid rgba(80,0,115,0.35);
+            display: flex !important;
+            flex-direction: row;
+            align-items: center;
+            padding: 0.9rem 1.2rem !important;
+            gap: 0.9rem;
+            box-sizing: border-box;
+            z-index: 10;
+        }
+        .spjimr-form-bg { display: none !important; }
+        .brand-tagline, .brand-desc, .brand-stats { display: none !important; }
+        .main .block-container {
+            position: relative !important;
+            z-index: 10 !important;
+            padding: 1.5rem 1.2rem 2rem !important;
+            max-width: 100% !important;
+            width: 100% !important;
+            box-sizing: border-box !important;
+        }
+        .main .block-container > div:first-child { max-width: 100% !important; }
     }
-    div[data-testid="stForm"] .stTextInput input {
+
+    /* ── Form inputs (all breakpoints) ── */
+    .stTextInput > div > div > input {
         height: 48px !important;
         border-radius: 10px !important;
-        border: 1.5px solid rgba(80,0,115,0.5) !important;
+        border: 1.5px solid rgba(80,0,115,0.55) !important;
         background: rgba(255,255,255,0.05) !important;
         color: #FDF5FF !important;
+        font-family: 'DM Sans', sans-serif !important;
         font-size: 14px !important;
+        padding: 0 16px !important;
+        width: 100% !important;
+        box-sizing: border-box !important;
     }
-    div[data-testid="stForm"] .stTextInput input:focus {
+    .stTextInput > div > div > input:focus {
         border-color: #F67D31 !important;
         box-shadow: 0 0 0 3px rgba(246,125,49,0.12) !important;
+        outline: none !important;
     }
-    div[data-testid="stForm"] .stTextInput label {
+    .stTextInput > label p, .stTextInput label {
         font-size: 11px !important;
         font-weight: 500 !important;
         letter-spacing: 0.05em !important;
         text-transform: uppercase !important;
         color: #FDF5FF !important;
+        font-family: 'DM Sans', sans-serif !important;
     }
-    div[data-testid="stForm"] .stFormSubmitButton button {
+    div[data-testid="stForm"] {
+        background: transparent !important;
+        border: none !important;
+        padding: 0 !important;
+        width: 100% !important;
+    }
+    div[data-testid="stForm"] .stFormSubmitButton > button,
+    div[data-testid="stFormSubmitButton"] > button {
         width: 100% !important;
         height: 52px !important;
         background: #500073 !important;
-        color: white !important;
+        color: #fff !important;
         border: none !important;
         border-radius: 10px !important;
+        font-family: 'DM Sans', sans-serif !important;
         font-size: 15px !important;
         font-weight: 500 !important;
         letter-spacing: 0.03em !important;
         margin-top: 0.5rem !important;
+        cursor: pointer !important;
     }
-    div[data-testid="stForm"] .stFormSubmitButton button:hover {
+    div[data-testid="stForm"] .stFormSubmitButton > button:hover,
+    div[data-testid="stFormSubmitButton"] > button:hover {
         background: #6b009a !important;
-        box-shadow: 0 0 18px rgba(246,125,49,0.2) !important;
     }
     .stButton > button {
         width: 100% !important;
@@ -407,31 +497,43 @@ def render_login():
         color: #FDF5FF !important;
         border: 1.5px solid rgba(80,0,115,0.5) !important;
         border-radius: 10px !important;
+        font-family: 'DM Sans', sans-serif !important;
         font-size: 14px !important;
         font-weight: 400 !important;
     }
     .stButton > button:hover {
         border-color: #F67D31 !important;
-        background: rgba(246,125,49,0.06) !important;
-        box-shadow: none !important;
+        background: rgba(246,125,49,0.07) !important;
         color: #FDF5FF !important;
+        box-shadow: none !important;
+    }
+    .stCheckbox label p {
+        color: #C4A4D4 !important;
+        font-size: 13px !important;
+        font-family: 'DM Sans', sans-serif !important;
     }
+    .stCheckbox input[type="checkbox"] { accent-color: #F67D31 !important; }
+    .stAlert { border-radius: 8px !important; }
     </style>
 
+    <!-- Brand panel: full on desktop, compact header on tablet/mobile -->
     <div class="spjimr-brand-panel">
-      <svg style="position:absolute;bottom:-40px;left:-10px;width:320px;height:500px;opacity:0.07;pointer-events:none;"
-           viewBox="0 0 320 500" fill="none">
+      <!-- Decorative SVG flames (desktop only, hidden via CSS on small screens) -->
+      <svg style="position:absolute;bottom:-40px;left:-10px;width:320px;height:500px;
+                  opacity:0.07;pointer-events:none;" viewBox="0 0 320 500" fill="none">
         <path d="M10 500 Q50 290 90 70"   stroke="#F67D31" stroke-width="28" stroke-linecap="round"/>
         <path d="M65 500 Q115 290 155 50"  stroke="#F67D31" stroke-width="22" stroke-linecap="round"/>
         <path d="M125 500 Q185 300 225 40" stroke="#F67D31" stroke-width="16" stroke-linecap="round"/>
         <path d="M190 500 Q248 320 292 70" stroke="#F67D31" stroke-width="10" stroke-linecap="round"/>
       </svg>
       <div style="position:absolute;bottom:0;left:0;width:400px;height:400px;
-                  background:radial-gradient(ellipse at 20% 100%,rgba(246,125,49,0.14) 0%,transparent 60%);
+                  background:radial-gradient(ellipse at 20% 100%,rgba(246,125,49,0.13) 0%,transparent 60%);
                   pointer-events:none;"></div>
+
+      <!-- Logo: always visible -->
       <div style="position:relative;z-index:2;">
-        <div style="display:flex;align-items:flex-end;gap:16px;margin-bottom:2.4rem;">
-          <svg width="44" height="52" viewBox="0 0 46 54" fill="none">
+        <div style="display:flex;align-items:center;gap:14px;flex-shrink:0;">
+          <svg width="clamp(28px,3vw,40px)" height="clamp(34px,3.5vw,48px)" viewBox="0 0 46 54" fill="none">
             <path d="M5 54 Q10 35 18 15 Q22 4 28 0 Q23 15 30 23 Q32 11 40 3 Q38 19 42 27 Q46 36 42 46 Q38 54 30 54"
                   fill="none" stroke="#F67D31" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
             <path d="M9 54 Q14 37 22 22 Q26 11 32 5 Q28 19 34 27 Q36 17 42 9"
@@ -440,93 +542,123 @@ def render_login():
                   fill="none" stroke="#F67D31" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
           </svg>
           <div>
-            <div style="font-family:'DM Sans',sans-serif;font-size:12px;font-weight:300;
-                        letter-spacing:0.05em;color:rgba(255,255,255,0.6);margin-bottom:3px;">
+            <div style="font-family:'DM Sans',sans-serif;font-size:clamp(10px,1vw,12px);
+                        font-weight:300;letter-spacing:0.05em;color:rgba(255,255,255,0.6);margin-bottom:2px;">
               Bharatiya Vidya Bhavan's
             </div>
-            <div style="font-family:'DM Sans',sans-serif;font-size:32px;font-weight:500;line-height:1;">
-              <span style="color:#F67D31;">SP</span><span style="color:white;">JIMR</span>
+            <div style="font-family:'DM Sans',sans-serif;font-size:clamp(20px,2.5vw,30px);
+                        font-weight:500;line-height:1;">
+              <span style="color:#F67D31;">SP</span><span style="color:#fff;">JIMR</span>
             </div>
           </div>
         </div>
-        <div style="font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,2.8vw,3rem);
-                    font-weight:300;line-height:1.12;color:white;margin-bottom:1.2rem;">
-          Where <em style="font-style:italic;color:#FFA066;">purpose</em><br>
-          meets<br>management.
+
+        <!-- Headline: desktop only -->
+        <div class="brand-tagline" style="margin-top:2.5rem;">
+          <div style="font-family:'Cormorant Garamond',serif;
+                      font-size:clamp(1.6rem,2.5vw,2.8rem);
+                      font-weight:300;line-height:1.12;color:white;margin-bottom:1rem;">
+            Where <em style="font-style:italic;color:#FFA066;">purpose</em><br>
+            meets<br>management.
+          </div>
+          <p class="brand-desc" style="font-family:'DM Sans',sans-serif;
+                    font-size:clamp(12px,1.1vw,14px);font-weight:300;
+                    line-height:1.75;color:rgba(255,255,255,0.48);max-width:320px;margin:0;">
+            S.P. Jain Institute of Management and Research — shaping responsible
+            leaders for a complex world.
+          </p>
         </div>
-        <p style="font-family:'DM Sans',sans-serif;font-size:14px;font-weight:300;
-                  line-height:1.75;color:rgba(255,255,255,0.5);max-width:340px;">
-          S.P. Jain Institute of Management and Research — shaping responsible leaders
-          for a complex world.
-        </p>
       </div>
-      <div style="position:relative;z-index:2;display:flex;gap:2.5rem;
+
+      <!-- Stats: desktop only -->
+      <div class="brand-stats" style="position:relative;z-index:2;display:flex;gap:2rem;
                   padding-top:1.8rem;border-top:1px solid rgba(255,255,255,0.1);">
         <div>
-          <div style="font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:600;color:#F67D31;line-height:1;">62+</div>
-          <div style="font-family:'DM Sans',sans-serif;font-size:10px;color:rgba(255,255,255,0.4);
-                      letter-spacing:0.06em;text-transform:uppercase;margin-top:3px;">Years of excellence</div>
+          <div style="font-family:'Cormorant Garamond',serif;font-size:clamp(1.3rem,1.8vw,1.9rem);
+                      font-weight:600;color:#F67D31;line-height:1;">62+</div>
+          <div style="font-family:'DM Sans',sans-serif;font-size:10px;color:rgba(255,255,255,0.38);
+                      letter-spacing:0.06em;text-transform:uppercase;margin-top:3px;">Years</div>
         </div>
         <div>
-          <div style="font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:600;color:#F67D31;line-height:1;">10K+</div>
-          <div style="font-family:'DM Sans',sans-serif;font-size:10px;color:rgba(255,255,255,0.4);
-                      letter-spacing:0.06em;text-transform:uppercase;margin-top:3px;">Alumni worldwide</div>
+          <div style="font-family:'Cormorant Garamond',serif;font-size:clamp(1.3rem,1.8vw,1.9rem);
+                      font-weight:600;color:#F67D31;line-height:1;">10K+</div>
+          <div style="font-family:'DM Sans',sans-serif;font-size:10px;color:rgba(255,255,255,0.38);
+                      letter-spacing:0.06em;text-transform:uppercase;margin-top:3px;">Alumni</div>
         </div>
         <div>
-          <div style="font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:600;color:#F67D31;line-height:1;">#1</div>
-          <div style="font-family:'DM Sans',sans-serif;font-size:10px;color:rgba(255,255,255,0.4);
+          <div style="font-family:'Cormorant Garamond',serif;font-size:clamp(1.3rem,1.8vw,1.9rem);
+                      font-weight:600;color:#F67D31;line-height:1;">#1</div>
+          <div style="font-family:'DM Sans',sans-serif;font-size:10px;color:rgba(255,255,255,0.38);
                       letter-spacing:0.06em;text-transform:uppercase;margin-top:3px;">Social impact</div>
         </div>
       </div>
     </div>
+
+    <!-- Right panel bg: desktop only -->
+    <div class="spjimr-form-bg"></div>
     """, unsafe_allow_html=True)
 
-    # Right side form
+    # ── Form heading ──────────────────────────────────────────────────────────
     st.markdown("""
-    <div style="display:inline-flex;align-items:center;gap:6px;
-                background:rgba(246,125,49,0.12);color:#F67D31;
-                font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;
-                letter-spacing:0.05em;text-transform:uppercase;
-                padding:5px 14px;border-radius:100px;margin-bottom:0.8rem;">
-      <span style="width:6px;height:6px;border-radius:50%;background:#F67D31;display:inline-block;flex-shrink:0;"></span>
-      ESG Sustainability Platform
-    </div>
-    <div style="font-family:'Cormorant Garamond',serif;font-size:2rem;
-                font-weight:400;color:white;line-height:1.15;margin-bottom:0.3rem;">
-      Welcome back
-    </div>
-    <div style="font-family:'DM Sans',sans-serif;font-size:13px;
-                color:rgba(196,164,212,0.8);font-weight:300;line-height:1.6;margin-bottom:1.5rem;">
-      Sign in with your SPJIMR email to continue.
+    <div style="margin-bottom:1.4rem;">
+      <div style="display:inline-flex;align-items:center;gap:6px;
+                  background:rgba(246,125,49,0.12);color:#F67D31;
+                  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;
+                  letter-spacing:0.05em;text-transform:uppercase;
+                  padding:5px 14px;border-radius:100px;margin-bottom:0.9rem;">
+        <span style="width:6px;height:6px;border-radius:50%;background:#F67D31;
+                     display:inline-block;flex-shrink:0;"></span>
+        ESG Sustainability Platform
+      </div>
+      <div style="font-family:'Cormorant Garamond',serif;
+                  font-size:clamp(1.5rem,3vw,1.9rem);
+                  font-weight:400;color:#fff;line-height:1.15;margin-bottom:0.3rem;">
+        Welcome back
+      </div>
+      <div style="font-family:'DM Sans',sans-serif;font-size:clamp(12px,1.5vw,13px);
+                  color:rgba(196,164,212,0.85);font-weight:300;line-height:1.6;">
+        Sign in with your SPJIMR email to continue.
+      </div>
     </div>
     """, unsafe_allow_html=True)
 
     err_slot = st.empty()
 
     with st.form("login_form", clear_on_submit=False):
-        email_val = st.text_input("Email address", placeholder="yourname@spjimr.org",
-                                  key="login_email_input")
-        pass_val  = st.text_input("Password", type="password",
-                                  placeholder="Enter your password",
-                                  key="login_pass_input")
-        rc, fc = st.columns([1, 1])
-        with rc:
+        email_val = st.text_input(
+            "Email address",
+            placeholder="yourname@spjimr.org",
+            key="login_email_input",
+        )
+        pass_val = st.text_input(
+            "Password",
+            type="password",
+            placeholder="Enter your password",
+            key="login_pass_input",
+        )
+        col_r, col_f = st.columns([1, 1])
+        with col_r:
             st.checkbox("Remember me", key="login_remember")
-        with fc:
+        with col_f:
             st.markdown(
                 '<div style="text-align:right;padding-top:6px;">'
-                '<a href="#" style="font-size:12px;color:#F67D31;text-decoration:none;font-weight:500;">'
-                'Forgot password?</a></div>',
+                '<a href="#" style="font-size:12px;color:#F67D31;'
+                'text-decoration:none;font-weight:500;">Forgot password?</a></div>',
                 unsafe_allow_html=True,
             )
-        submitted = st.form_submit_button("Sign in →")
+        submitted = st.form_submit_button("Sign in \u2192")
 
     if submitted:
         _app_password = os.getenv("APP_PASSWORD")
         if not _app_password:
-            err_slot.error("⚙️ APP_PASSWORD secret is not configured. Add it in HuggingFace Space settings.")
+            err_slot.error(
+                "\u2699\ufe0f APP_PASSWORD secret is not set. "
+                "Add it in HuggingFace Space settings."
+            )
         elif not email_val or not email_val.lower().endswith("@spjimr.org"):
-            err_slot.error("Access restricted to SPJIMR email addresses (@spjimr.org).")
+            err_slot.error(
+                "Access restricted to SPJIMR email addresses (@spjimr.org)."
+            )
         elif pass_val != _app_password:
             err_slot.error("Incorrect password. Please try again.")
         else:
@@ -537,19 +669,24 @@ def render_login():
     st.markdown("""
     <div style="display:flex;align-items:center;gap:12px;margin:1.2rem 0;">
       <div style="flex:1;height:1px;background:rgba(80,0,115,0.4);"></div>
-      <span style="font-family:'DM Sans',sans-serif;font-size:12px;color:rgba(196,164,212,0.5);">or continue with</span>
+      <span style="font-family:'DM Sans',sans-serif;font-size:12px;
+                   color:rgba(196,164,212,0.45);">or continue with</span>
       <div style="flex:1;height:1px;background:rgba(80,0,115,0.4);"></div>
     </div>
     """, unsafe_allow_html=True)
 
-    if st.button("🔐  SPJIMR Single Sign-On (SSO)", use_container_width=True, key="sso_btn"):
+    if st.button(
+        "\U0001f510  SPJIMR Single Sign-On (SSO)",
+        use_container_width=True,
+        key="sso_btn",
+    ):
         st.session_state["logged_in"]  = True
         st.session_state["login_user"] = "sso_user@spjimr.org"
         st.rerun()
 
     st.markdown("""
-    <div style="margin-top:1.5rem;text-align:center;font-family:'DM Sans',sans-serif;
-                font-size:12px;color:rgba(196,164,212,0.5);line-height:1.9;">
+    <div style="margin-top:1.4rem;text-align:center;font-family:'DM Sans',sans-serif;
+                font-size:12px;color:rgba(196,164,212,0.45);line-height:1.9;">
       New to the platform?
       <a href="#" style="color:#F67D31;text-decoration:none;font-weight:500;">Request access</a><br>
       Having trouble?
@@ -558,9 +695,6 @@ def render_login():
     """, unsafe_allow_html=True)
 
 
-# ═══════════════════════════════════════════════════════════════════════════════
-# Sidebar — shown only when logged in
-# ═══════════════════════════════════════════════════════════════════════════════
 
 def render_sidebar() -> str:
     with st.sidebar: