CRISIS FIX: login flow + mobile responsive + token expiry handling

ROOT CAUSE ISOLATED:
Backend POST /api/auth/login, GET/PUT /api/auth/me, POST avatar, POST /logout
all return 200 OK (verified curl). Damirov problem is browser-side:
stale localStorage tokens that don't match current backend → 401 cascade
→ avatar upload appears as 'failed: 401' → profile changes 'lost'.

FIXES:
1. apiAuth() in app.html now:
   - Pre-checks JWT exp claim before request
   - On 401 response: clears localStorage (pgz_access/refresh/user) +
     redirects to /login?reason=unauthorized
   - On JWT expired: redirects to /login?reason=expired

2. login.html displays toast for ?reason=expired/unauthorized

3. Mobile responsive CSS (max-width: 768px):
   - app.html: hamburger menu, sidebar slide-in, full-width drill-down panel
   - sport2.html: KPI grid 2-col, klubovi 1-col, tables horizontal scroll
   - Both: viewport meta + media queries + touch-friendly buttons

4. Mobile menu toggle button + backdrop overlay added

VERIFIED E2E (curl):
- POST /auth/login → 200 + JWT
- GET /auth/me → 200 + telefon persisted
- PUT /auth/me → 200, DB row updated
- POST /auth/me/avatar → 200, file saved + avatar_url returned
- POST /auth/logout → 200, token revoked (next /me returns 401)

static/login.html

@@ -560,5 +560,27 @@ $('#cookieMore').addEventListener('click', e => { e.preventDefault(); $('#privac
   $('#email').focus();
 })();
 </script>
+
+<script>
+// Auto-detect why user landed on login (session expired/unauthorized)
+(function(){
+  const params = new URLSearchParams(window.location.search);
+  const reason = params.get('reason');
+  if (reason === 'expired') setTimeout(() => {
+    const div = document.createElement('div');
+    div.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#c0392b;color:#fff;padding:12px 20px;border-radius:6px;z-index:9999;font-size:14px';
+    div.textContent = 'Sesija je istekla. Molim prijavi se ponovno.';
+    document.body.appendChild(div);
+    setTimeout(() => div.remove(), 5000);
+  }, 100);
+  if (reason === 'unauthorized') setTimeout(() => {
+    const div = document.createElement('div');
+    div.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#e67e22;color:#fff;padding:12px 20px;border-radius:6px;z-index:9999;font-size:14px';
+    div.textContent = 'Sesija je nevažeća. Prijavi se opet.';
+    document.body.appendChild(div);
+    setTimeout(() => div.remove(), 5000);
+  }, 100);
+})();
+</script>
 </body>
 </html>