first commit.

src/pages/FleetLogin.tsx

@@ -3,23 +3,20 @@ import { useNavigate, NavLink } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { 
   Truck, 
-  Zap, 
   ShieldCheck, 
   Lock, 
   User, 
   ArrowRight, 
   Cpu, 
-  Radio, 
-  Activity,
   KeyRound,
   ShieldAlert,
   Eye,
   EyeOff,
-  Crosshair,
-  Signal
+  MapPin,
+  Activity
 } from 'lucide-react';
 import { authApi } from '../api/auth';
-import './Login.css'; // Reuse core login styles but we'll override some for the tactical look
+import './Login.css';
 
 export const FleetLogin = () => {
   const [username, setUsername] = useState('fleet_operator');
@@ -28,7 +25,7 @@ export const FleetLogin = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [showError, setShowError] = useState('');
   const [mfaSessionToken, setMfaSessionToken] = useState('');
-  const [tempUser, setTempUser] = useState<any>(null);
+  const [tempUser, setTempUser] = useState<Record<string, unknown> | null>(null);
   const [loginStep, setLoginStep] = useState<'login' | 'mfa'>('login');
   const [showPassword, setShowPassword] = useState(false);
   
@@ -38,44 +35,76 @@ export const FleetLogin = () => {
     e.preventDefault();
     setIsLoading(true);
     setShowError('');
-    
-    // --- MOCK LOGIN FOR FLEET OPERATOR ---
-    if (username === 'fleet_operator' && password === 'Fleet@123') {
-      setTimeout(() => {
-        localStorage.setItem('teleems_auth', 'true');
-        localStorage.setItem('teleems_token', 'mock-fleet-token-2026');
-        localStorage.setItem('teleems_user', JSON.stringify({
-          id: 'fleet-op-001',
-          username: 'fleet_operator',
-          roles: ['FLEET_OPERATOR'],
-          metadata: {
-            organization: { company_name: 'TeleEMS Fleet Services' }
-          }
-        }));
-        setIsLoading(false);
-        navigate('/fleet-operator');
-      }, 1000);
-      return;
-    }
+
+    // Clear any leftover mock tokens to ensure a real network call
+    console.log('--- STARTING FLEET LOGIN ---');
+    console.log('Clearing local storage tokens...');
+    localStorage.removeItem('teleems_token');
+    localStorage.removeItem('teleems_auth');
+    localStorage.removeItem('teleems_user');
 
     try {
-      const response = await authApi.login(username, password);
-      
-      if (response.status === 201 || response.status === 200) {
-        if (response.data.mfa_required) {
-          setMfaSessionToken(response.data.mfa_session_token || '');
-          setTempUser(response.data.user || null);
+      console.log('[FleetLogin] Logging in as:', username);
+
+      // Clear old session first
+      localStorage.removeItem('teleems_token');
+      localStorage.removeItem('teleems_user');
+      localStorage.removeItem('teleems_auth');
+
+      // Step 1: Login — use raw fetch, NOT apiClient (bypass mock/401 interceptors)
+      const loginRes = await fetch('https://teleems-api-gateway.onrender.com/v1/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password }),
+      });
+      const loginJson = await loginRes.json();
+      console.log('[FleetLogin] Login response status:', loginRes.status, loginJson);
+
+      if (loginRes.status === 201 || loginRes.status === 200) {
+        if (loginJson.data?.mfa_required) {
+          setMfaSessionToken(loginJson.data.mfa_session_token || '');
+          setTempUser(loginJson.data.user || null);
           setLoginStep('mfa');
         } else {
+          const accessToken = loginJson.data?.access_token || '';
+          if (!accessToken) {
+            setShowError('Login failed: No access token received.');
+            return;
+          }
+
+          // Store token immediately
           localStorage.setItem('teleems_auth', 'true');
-          localStorage.setItem('teleems_token', response.data.access_token || '');
-          localStorage.setItem('teleems_user', JSON.stringify(response.data.user || {}));
-          navigate('/fleet-operator');
+          localStorage.setItem('teleems_token', accessToken);
+          console.log('[FleetLogin] Token stored. Fetching /auth/me...');
+
+          // Step 2: Fetch real profile from /auth/me
+          try {
+            const meRes = await fetch('https://teleems-api-gateway.onrender.com/v1/auth/me', {
+              method: 'GET',
+              headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${accessToken}`,
+              },
+            });
+            const meJson = await meRes.json();
+            console.log('[FleetLogin] /auth/me status:', meRes.status, meJson);
+
+            const profile = meJson?.data || loginJson.data?.user || {};
+            const roles: string[] = Array.isArray(profile.roles) ? [...profile.roles] : ['Fleet Operator'];
+            localStorage.setItem('teleems_user', JSON.stringify({ ...profile, roles }));
+          } catch (meErr) {
+            console.warn('[FleetLogin] /auth/me failed, using login user data:', meErr);
+            const fallback = loginJson.data?.user || {};
+            localStorage.setItem('teleems_user', JSON.stringify({ ...fallback, roles: ['Fleet Operator'] }));
+          }
+
+          navigate('/fleet-operator?tab=organization');
         }
       } else {
-        setShowError(response.message || 'Access Denied: Invalid Credentials');
+        setShowError(loginJson?.message || 'Access Denied: Invalid Credentials');
       }
-    } catch (err) {
+    } catch (err: unknown) {
+      console.error('[FleetLogin] Error:', err);
       setShowError('Tactical Network Unavailable: Check Connection');
     } finally {
       setIsLoading(false);
@@ -93,14 +122,17 @@ export const FleetLogin = () => {
       if (response.status === 201 || response.status === 200) {
         localStorage.setItem('teleems_auth', 'true');
         localStorage.setItem('teleems_token', response.data.access_token || '');
-        const userToStore = response.data.user || tempUser || {};
-        userToStore.mfa_enabled = true;
+        const baseUser: Record<string, unknown> = (response.data.user || tempUser || {}) as Record<string, unknown>;
+        const roles = Array.isArray(baseUser.roles) ? [...baseUser.roles] : [];
+        if (!roles.includes('FLEET_OPERATOR')) roles.push('FLEET_OPERATOR');
+        
+        const userToStore = { ...baseUser, roles, mfa_enabled: true };
         localStorage.setItem('teleems_user', JSON.stringify(userToStore));
-        navigate('/fleet-operator');
+        navigate('/fleet-operator?tab=organization');
       } else {
         setShowError('Invalid Security Token');
       }
-    } catch (err) {
+    } catch {
       setShowError('Token Verification Failed');
     } finally {
       setIsLoading(false);
@@ -108,189 +140,307 @@ export const FleetLogin = () => {
   };
 
   return (
-    <div className="login-page fleet-login-theme" style={{ background: '#020617' }}>
-      {/* Tactical Background Elements */}
-      <div className="login-grid-decor" style={{ opacity: 0.1, backgroundImage: 'linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
-      <div className="scanline" style={{ background: 'linear-gradient(to bottom, transparent 0%, rgba(59, 130, 246, 0.05) 50%, transparent 100%)' }} />
-      <div className="login-overlay" style={{ background: 'radial-gradient(circle at center, transparent 0%, rgba(2, 6, 23, 0.8) 100%)' }} />
+    <div className="fleet-login-container" style={{ display: 'flex', minHeight: '100vh', width: '100vw', backgroundColor: '#020617', fontFamily: "'Outfit', sans-serif", overflow: 'hidden' }}>
+      
+      {/* LEFT SIDE - IMAGE & TACTICAL HUD */}
+      <div className="fleet-login-left" style={{ 
+        flex: 1, 
+        position: 'relative', 
+        display: 'flex', 
+        flexDirection: 'column', 
+        justifyContent: 'space-between', 
+        padding: '60px',
+        borderRight: '1px solid rgba(34, 211, 238, 0.2)'
+      }}>
+        {/* Background Image */}
+        <div style={{ 
+          position: 'absolute', 
+          inset: 0, 
+          backgroundImage: 'url("https://images.unsplash.com/photo-1587582423116-ec07293f0395?q=80&w=2070&auto=format&fit=crop")',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          filter: 'grayscale(30%) contrast(120%)'
+        }} />
+        {/* Gradients to blend image with the tactical theme */}
+        <div style={{
+          position: 'absolute',
+          inset: 0,
+          background: 'linear-gradient(to right, rgba(2, 6, 23, 0.95) 0%, rgba(2, 6, 23, 0.6) 40%, rgba(2, 6, 23, 0.9) 100%)'
+        }} />
+        <div style={{
+          position: 'absolute',
+          inset: 0,
+          background: 'radial-gradient(circle at 30% 50%, transparent 0%, rgba(2, 6, 23, 0.8) 100%)'
+        }} />
 
-      {/* Decorative Radar/Circle */}
-      <motion.div 
-        animate={{ rotate: 360 }}
-        transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
-        style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: '600px', height: '600px', border: '1px solid rgba(59, 130, 246, 0.05)', borderRadius: '50%', pointerEvents: 'none' }}
-      >
-        <div style={{ position: 'absolute', top: '0', left: '50%', width: '2px', height: '100%', background: 'linear-gradient(to bottom, rgba(59, 130, 246, 0.2), transparent)' }} />
-      </motion.div>
-
-      <motion.div 
-        key={loginStep}
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0, y: -20 }}
-        transition={{ duration: 0.5, ease: "circOut" }}
-        className="login-card glass"
-        style={{ 
-          background: 'rgba(15, 23, 42, 0.8)', 
-          border: '1px solid rgba(59, 130, 246, 0.3)',
-          boxShadow: '0 0 50px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(59, 130, 246, 0.1)'
-        }}
-      >
-        <div className="login-header">
+        {/* Decorative Grid & Radar (HUD elements) */}
+        <div style={{ position: 'absolute', inset: 0, opacity: 0.15, backgroundImage: 'linear-gradient(rgba(34, 211, 238, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, 0.2) 1px, transparent 1px)', backgroundSize: '40px 40px', pointerEvents: 'none' }} />
+        
+        {/* Content Top */}
+        <div style={{ position: 'relative', zIndex: 10 }}>
           <motion.div 
-            initial={{ scale: 0.5, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            className="login-logo"
-            style={{ background: 'rgba(59, 130, 246, 0.1)', border: '1px solid var(--accent-cyan)' }}
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8 }}
+            style={{ display: 'flex', alignItems: 'center', gap: '16px' }}
           >
-            <Truck className="text-cyan-400" size={28} style={{ color: 'var(--accent-cyan)' }} />
+            <div style={{ padding: '12px', background: 'rgba(34, 211, 238, 0.1)', border: '1px solid #22d3ee', borderRadius: '12px', boxShadow: '0 0 20px rgba(34, 211, 238, 0.2)' }}>
+              <Truck size={32} color="#22d3ee" />
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <span style={{ fontSize: '28px', fontWeight: 900, color: '#fff', letterSpacing: '2px' }}>TELE_EMS</span>
+              <span style={{ fontSize: '12px', fontWeight: 700, color: '#22d3ee', letterSpacing: '4px' }}>FLEET_OPERATOR</span>
+            </div>
           </motion.div>
+        </div>
+
+        {/* Content Middle/Bottom */}
+        <div style={{ position: 'relative', zIndex: 10, maxWidth: '600px', marginBottom: '40px' }}>
+          <motion.h1 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            style={{ fontSize: '56px', fontWeight: 900, lineHeight: 1.1, color: '#fff', marginBottom: '24px', letterSpacing: '-1px' }}
+          >
+            Command The Fleet.<br/>
+            <span style={{ color: '#22d3ee', textShadow: '0 0 30px rgba(34, 211, 238, 0.4)' }}>Save Lives Faster.</span>
+          </motion.h1>
+          <motion.p 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+            style={{ fontSize: '18px', color: '#94a3b8', lineHeight: 1.6, fontWeight: 500 }}
+          >
+            Access real-time telemetry, manage dispatch routes, and monitor critical resources from a single, secure tactical terminal.
+          </motion.p>
           
-          <h1 className="login-title" style={{ letterSpacing: '0.1em', fontWeight: 900 }}>
-            {loginStep === 'login' ? 'FLEET TERMINAL' : 'SECURE TOKEN'}
-          </h1>
-          <p className="login-subtitle" style={{ color: 'var(--accent-cyan)', opacity: 0.8, fontSize: '0.7rem', fontWeight: 800, textTransform: 'uppercase' }}>
-            {loginStep === 'login' ? 'Sector: Dispatch • Active Node: CS-88' : 'Identity Verification Required'}
-          </p>
+          <motion.div 
+             initial={{ opacity: 0 }}
+             animate={{ opacity: 1 }}
+             transition={{ duration: 0.8, delay: 0.6 }}
+             style={{ display: 'flex', gap: '24px', marginTop: '40px' }}
+          >
+             <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#22d3ee', fontSize: '14px', fontWeight: 700 }}>
+                <Activity size={18} /> REAL-TIME SYNC
+             </div>
+             <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#22d3ee', fontSize: '14px', fontWeight: 700 }}>
+                <MapPin size={18} /> GPS TRACKING
+             </div>
+             <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#22d3ee', fontSize: '14px', fontWeight: 700 }}>
+                <ShieldCheck size={18} /> ENCRYPTED
+             </div>
+          </motion.div>
         </div>
+      </div>
 
-        {loginStep === 'login' ? (
-          <form onSubmit={handleLogin} className="login-form">
-            <div className="input-group">
-              <label className="input-label" style={{ color: 'var(--accent-cyan)', opacity: 0.6 }}>Operator ID</label>
-              <div className="input-wrapper" style={{ background: 'rgba(0, 0, 0, 0.3)', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
-                <User className="input-icon" size={18} style={{ color: 'var(--accent-cyan)' }} />
-                <input 
-                  type="text" 
-                  className="login-input mono" 
-                  placeholder="ID_ENTRY"
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                  style={{ color: '#fff' }}
-                  required
-                />
+      {/* RIGHT SIDE - LOGIN FORM */}
+      <div className="fleet-login-right" style={{ 
+        width: '550px', 
+        minWidth: '400px',
+        position: 'relative', 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center', 
+        padding: '40px',
+        background: '#0f172a',
+        boxShadow: '-20px 0 50px rgba(0,0,0,0.5)'
+      }}>
+        {/* Subtle background glow */}
+        <div style={{ position: 'absolute', top: '20%', right: '-10%', width: '300px', height: '300px', background: 'rgba(34, 211, 238, 0.05)', filter: 'blur(100px)', borderRadius: '50%', pointerEvents: 'none' }} />
+        
+        <motion.div 
+          key={loginStep}
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: -20 }}
+          transition={{ duration: 0.5, ease: "circOut" }}
+          style={{ width: '100%', maxWidth: '420px', display: 'flex', flexDirection: 'column', gap: '32px', zIndex: 10 }}
+        >
+          <div style={{ textAlign: 'center' }}>
+            <h2 style={{ fontSize: '28px', fontWeight: 800, color: '#fff', margin: '0 0 8px 0', letterSpacing: '1px' }}>
+              {loginStep === 'login' ? 'TERMINAL ACCESS' : 'MFA REQUIRED'}
+            </h2>
+            <p style={{ color: '#22d3ee', fontSize: '13px', fontWeight: 600, letterSpacing: '2px', textTransform: 'uppercase', margin: 0, opacity: 0.8 }}>
+              {loginStep === 'login' ? 'Sector: Dispatch • Active Node: CS-88' : 'Identity Verification'}
+            </p>
+          </div>
+
+          {loginStep === 'login' ? (
+            <form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ fontSize: '12px', fontWeight: 700, color: '#22d3ee', textTransform: 'uppercase', letterSpacing: '1px', opacity: 0.8 }}>Operator ID</label>
+                <div style={{ position: 'relative' }}>
+                  <User size={18} color="#22d3ee" style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)', opacity: 0.8 }} />
+                  <input 
+                    type="text" 
+                    placeholder="ID_ENTRY"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    required
+                    style={{ 
+                      width: '100%', padding: '16px 16px 16px 48px', 
+                      background: 'rgba(2, 6, 23, 0.6)', border: '1px solid rgba(34, 211, 238, 0.3)', 
+                      borderRadius: '12px', color: '#fff', fontSize: '15px', fontWeight: 500,
+                      outline: 'none', transition: 'all 0.3s', fontFamily: "'Outfit', sans-serif"
+                    }}
+                    onFocus={(e) => e.target.style.borderColor = '#22d3ee'}
+                    onBlur={(e) => e.target.style.borderColor = 'rgba(34, 211, 238, 0.3)'}
+                  />
+                </div>
               </div>
-            </div>
 
-            <div className="input-group">
-              <label className="input-label" style={{ color: 'var(--accent-cyan)', opacity: 0.6 }}>Command Key</label>
-              <div className="input-wrapper" style={{ background: 'rgba(0, 0, 0, 0.3)', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
-                <Lock className="input-icon" size={18} style={{ color: 'var(--accent-cyan)' }} />
-                <input 
-                  type={showPassword ? "text" : "password"} 
-                  className="login-input mono" 
-                  placeholder="KEY_REQUIRED"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  style={{ color: '#fff' }}
-                  required
-                />
-                <button type="button" onClick={() => setShowPassword(!showPassword)} style={{ background: 'none', border: 'none', color: 'var(--accent-cyan)', cursor: 'pointer', paddingRight: '12px' }}>
-                   {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
-                </button>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ fontSize: '12px', fontWeight: 700, color: '#22d3ee', textTransform: 'uppercase', letterSpacing: '1px', opacity: 0.8 }}>Command Key</label>
+                <div style={{ position: 'relative' }}>
+                  <Lock size={18} color="#22d3ee" style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)', opacity: 0.8 }} />
+                  <input 
+                    type={showPassword ? "text" : "password"} 
+                    placeholder="KEY_REQUIRED"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                    style={{ 
+                      width: '100%', padding: '16px 48px 16px 48px', 
+                      background: 'rgba(2, 6, 23, 0.6)', border: '1px solid rgba(34, 211, 238, 0.3)', 
+                      borderRadius: '12px', color: '#fff', fontSize: '15px', fontWeight: 500,
+                      outline: 'none', transition: 'all 0.3s', fontFamily: "'Outfit', sans-serif", letterSpacing: showPassword ? 'normal' : '3px'
+                    }}
+                    onFocus={(e) => e.target.style.borderColor = '#22d3ee'}
+                    onBlur={(e) => e.target.style.borderColor = 'rgba(34, 211, 238, 0.3)'}
+                  />
+                  <button type="button" onClick={() => setShowPassword(!showPassword)} style={{ position: 'absolute', right: '16px', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', color: '#22d3ee', padding: 0 }}>
+                     {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                  </button>
+                </div>
               </div>
-            </div>
 
-            <button 
-              id="fleet-login-submit"
-              type="submit" 
-              className="login-button" 
-              disabled={isLoading}
-              style={{ 
-                background: 'var(--accent-cyan)', 
-                color: '#000', 
-                fontWeight: 900,
-                boxShadow: '0 0 20px rgba(59, 130, 246, 0.4)'
-              }}
-            >
-              {isLoading ? (
-                <Cpu className="spin" size={20} />
-              ) : (
-                <>
-                  INITIALIZE SESSION
-                  <ArrowRight size={20} />
-                </>
-              )}
-            </button>
-          </form>
-        ) : (
-          <form onSubmit={handleMfaVerify} className="login-form">
-            <div className="input-group">
-              <label className="input-label" style={{ color: 'var(--accent-cyan)', opacity: 0.6 }}>TOTP Authorization</label>
-              <div className="input-wrapper" style={{ background: 'rgba(0, 0, 0, 0.3)', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
-                <KeyRound className="input-icon" size={18} style={{ color: 'var(--accent-cyan)' }} />
-                <input 
-                  type="text" 
-                  className="login-input mono" 
-                  placeholder="000 000"
-                  maxLength={6}
-                  value={mfaCode}
-                  onChange={(e) => setMfaCode(e.target.value.replace(/\D/g, ''))}
-                  style={{ color: '#fff' }}
-                  required
-                />
+              <button 
+                type="submit" 
+                disabled={isLoading}
+                style={{ 
+                  marginTop: '12px', padding: '16px', background: '#22d3ee', color: '#020617', 
+                  border: 'none', borderRadius: '12px', fontSize: '15px', fontWeight: 800, letterSpacing: '1px',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
+                  cursor: isLoading ? 'not-allowed' : 'pointer', transition: 'all 0.3s',
+                  boxShadow: '0 10px 25px rgba(34, 211, 238, 0.3)'
+                }}
+                onMouseOver={(e) => { if(!isLoading) { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 15px 35px rgba(34, 211, 238, 0.4)'; } }}
+                onMouseOut={(e) => { if(!isLoading) { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 10px 25px rgba(34, 211, 238, 0.3)'; } }}
+              >
+                {isLoading ? (
+                  <Cpu className="spin" size={20} />
+                ) : (
+                  <>
+                    Login
+                    <ArrowRight size={20} />
+                  </>
+                )}
+              </button>
+            </form>
+          ) : (
+            <form onSubmit={handleMfaVerify} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                <label style={{ fontSize: '12px', fontWeight: 700, color: '#22d3ee', textTransform: 'uppercase', letterSpacing: '1px', opacity: 0.8 }}>TOTP Authorization</label>
+                <div style={{ position: 'relative' }}>
+                  <KeyRound size={18} color="#22d3ee" style={{ position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)', opacity: 0.8 }} />
+                  <input 
+                    type="text" 
+                    placeholder="000 000"
+                    maxLength={6}
+                    value={mfaCode}
+                    onChange={(e) => setMfaCode(e.target.value.replace(/\D/g, ''))}
+                    required
+                    style={{ 
+                      width: '100%', padding: '16px 16px 16px 48px', 
+                      background: 'rgba(2, 6, 23, 0.6)', border: '1px solid rgba(34, 211, 238, 0.3)', 
+                      borderRadius: '12px', color: '#fff', fontSize: '20px', fontWeight: 600, letterSpacing: '4px', textAlign: 'center',
+                      outline: 'none', transition: 'all 0.3s', fontFamily: "'Outfit', sans-serif"
+                    }}
+                    onFocus={(e) => e.target.style.borderColor = '#22d3ee'}
+                    onBlur={(e) => e.target.style.borderColor = 'rgba(34, 211, 238, 0.3)'}
+                  />
+                </div>
               </div>
-            </div>
 
-            <button 
-              type="submit" 
-              className="login-button" 
-              disabled={isLoading}
-              style={{ background: 'var(--accent-cyan)', color: '#000', fontWeight: 900 }}
-            >
-              {isLoading ? (
-                <Cpu className="spin" size={20} />
-              ) : (
-                <>
-                  VERIFY IDENTITY
-                  <ShieldCheck size={20} />
-                </>
-              )}
-            </button>
-          </form>
-        )}
-
-        <AnimatePresence>
-          {showError && (
-            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="security-badge" style={{ color: '#ef4444', border: '1px solid rgba(239, 68, 68, 0.2)', background: 'rgba(239, 68, 68, 0.05)' }}>
-              <ShieldAlert size={14} />
-              <span>{showError}</span>
-            </motion.div>
+              <button 
+                type="submit" 
+                disabled={isLoading}
+                style={{ 
+                  marginTop: '12px', padding: '16px', background: '#22d3ee', color: '#020617', 
+                  border: 'none', borderRadius: '12px', fontSize: '15px', fontWeight: 800, letterSpacing: '1px',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px',
+                  cursor: isLoading ? 'not-allowed' : 'pointer', transition: 'all 0.3s',
+                  boxShadow: '0 10px 25px rgba(34, 211, 238, 0.3)'
+                }}
+              >
+                {isLoading ? (
+                  <Cpu className="spin" size={20} />
+                ) : (
+                  <>
+                    VERIFY IDENTITY
+                    <ShieldCheck size={20} />
+                  </>
+                )}
+              </button>
+            </form>
           )}
-        </AnimatePresence>
 
-        <div className="security-badge" style={{ borderColor: 'rgba(59, 130, 246, 0.2)', background: 'rgba(59, 130, 246, 0.05)' }}>
-          <Signal size={14} color="var(--accent-cyan)" />
-          <span style={{ color: 'var(--accent-cyan)', fontWeight: 700 }}>SECURE UPLINK ESTABLISHED</span>
-        </div>
+          <AnimatePresence>
+            {showError && (
+              <motion.div 
+                initial={{ opacity: 0, height: 0 }} 
+                animate={{ opacity: 1, height: 'auto' }} 
+                exit={{ opacity: 0, height: 0 }}
+                style={{ overflow: 'hidden' }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '14px', background: 'rgba(239, 68, 68, 0.1)', border: '1px solid rgba(239, 68, 68, 0.3)', borderRadius: '10px', color: '#ef4444', fontSize: '13px', fontWeight: 600, marginTop: '8px' }}>
+                  <ShieldAlert size={16} />
+                  <span>{showError}</span>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
 
-        <div className="login-footer" style={{ marginTop: '24px', borderTop: '1px solid rgba(59, 130, 246, 0.1)', paddingTop: '16px', textAlign: 'center' }}>
-          <NavLink to="/login" style={{ color: 'var(--accent-cyan)', textDecoration: 'none', fontSize: '0.8rem', fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', opacity: 0.7 }}>
-            <ArrowRight size={14} style={{ transform: 'rotate(180deg)' }} /> BACK TO STANDARD LOGIN
-          </NavLink>
-        </div>
-      </motion.div>
 
-      {/* Page-level status indicators */}
-      <div className="login-status-indicators" style={{ bottom: '40px', right: '40px' }}>
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '8px' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '12px', background: 'rgba(15, 23, 42, 0.8)', padding: '8px 16px', borderRadius: '8px', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
-            <span style={{ fontSize: '0.65rem', fontWeight: 800, color: 'var(--accent-cyan)' }}>COMMS_STRENGTH</span>
-            <div style={{ display: 'flex', gap: '2px' }}>
-              {[1, 2, 3, 4].map(i => <div key={i} style={{ width: '3px', height: i * 3, background: 'var(--accent-cyan)' }} />)}
-            </div>
+
+          <div style={{ marginTop: '20px', borderTop: '1px solid rgba(34, 211, 238, 0.1)', paddingTop: '24px', textAlign: 'center' }}>
+            <NavLink to="/login" style={{ color: '#94a3b8', textDecoration: 'none', fontSize: '13px', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: '8px', transition: 'color 0.2s' }} onMouseOver={(e) => e.currentTarget.style.color = '#22d3ee'} onMouseOut={(e) => e.currentTarget.style.color = '#94a3b8'}>
+              <ArrowRight size={14} style={{ transform: 'rotate(180deg)' }} /> RETURN TO STANDARD PORTAL
+            </NavLink>
           </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--accent-green)', fontSize: '0.7rem', fontWeight: 800 }}>
-             <Radio size={14} className="pulse" /> LIVE TELEMETRY SYNC
-          </div>
-        </div>
+        </motion.div>
       </div>
 
-      <div className="login-sys-log" style={{ bottom: '40px', left: '40px', opacity: 0.3 }}>
-        <p>TERMINAL_ID: DISPATCH-X7</p>
-        <p>PROTOCOL: CS-SECURE-v4</p>
-        <p>ENCRYPTION: QUANTUM-SAFE</p>
-      </div>
+      {/* Embedded Global Styles to avoid breaking any other page, since we are overriding locally */}
+      <style>{`
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+        .spin {
+          animation: spin 1s linear infinite;
+        }
+        input:-webkit-autofill,
+        input:-webkit-autofill:hover, 
+        input:-webkit-autofill:focus, 
+        input:-webkit-autofill:active{
+            -webkit-box-shadow: 0 0 0 30px #020617 inset !important;
+            -webkit-text-fill-color: white !important;
+            transition: background-color 5000s ease-in-out 0s;
+        }
+        @media (max-width: 900px) {
+          .fleet-login-container {
+             flex-direction: column !important;
+          }
+          .fleet-login-left {
+             display: none !important;
+          }
+          .fleet-login-right {
+             width: 100% !important;
+             min-width: 100% !important;
+          }
+        }
+      `}</style>
     </div>
   );
 };