diff --git a/.env.example b/.env.example
deleted file mode 100644
index 5690d66..0000000
--- a/.env.example
+++ /dev/null
@@ -1,28 +0,0 @@
-# Server
-PORT=3005
-NODE_ENV=development
-
-# Redis/Valkey
-REDIS_HOST=localhost
-REDIS_PORT=6379
-REDIS_PASSWORD=
-
-# PocketBase
-POCKETBASE_URL=https://pocketbase.ccllc.pro
-POCKETBASE_ADMIN_EMAIL=
-POCKETBASE_ADMIN_PASSWORD=
-
-# Microsoft OAuth
-MICROSOFT_CLIENT_ID=
-MICROSOFT_CLIENT_SECRET=
-MICROSOFT_TENANT=common
-MICROSOFT_REDIRECT_URI=http://localhost:3005/api/auth/callback
-
-# Logging
-LOG_LEVEL=info
-LOG_FILE=logs/app.log
-ERROR_LOG_FILE=logs/error.log
-
-# Token Settings
-TOKEN_REFRESH_INTERVAL_MS=1800000
-TOKEN_EXPIRY_BUFFER_MS=900000
diff --git a/CHANGELOG_SESSION.md b/CHANGELOG_SESSION.md
deleted file mode 100644
index 1b16517..0000000
--- a/CHANGELOG_SESSION.md
+++ /dev/null
@@ -1,76 +0,0 @@
-# Session Changelog - January 1, 2026
-
-## Production Setup Session
-
-### What Was Done
-
-1. **Backend Setup**
-   - Copied working `server.ts` from Job-Info-Test
-   - Added `redis-cache.ts` for Valkey/Redis caching
-   - Fixed static file path to serve from `frontend/public`
-   - Fast job loading: returns first 40 jobs instantly, then full list on poll
-
-2. **Frontend Setup**
-   - Copied working frontend from Job-Info-Test to `frontend/public/`
-   - Simplified token validation at startup:
-     - Check PocketBase session valid
-     - Check Graph token in localStorage
-     - If either missing → redirect to signin
-   - Removed redundant token refresh loops
-   - Added localStorage storage for Graph token in signin.html
-
-3. **Authentication Flow**
-   - PocketBase OAuth with Microsoft provider
-   - Graph token stored in localStorage after signin
-   - Both tokens checked once at page load
-   - No repeated token validation during app usage
-
-4. **Systemd Service**
-   - Created `/etc/systemd/system/job-info-prod.service`
-   - Runs on port 3005
-   - Auto-restarts on failure
-
-5. **Git Repository**
-   - Initialized and pushed to: https://gitea.ccllc.pro/Cardoza_Construction/Job-Info-Prod.git
-   - Branch: main
-
-### Key Files
-
-| File | Purpose |
-|------|---------|
-| `backend/src/index.ts` | Main Hono server with all endpoints |
-| `backend/src/redis-cache.ts` | Redis/Valkey cache helpers |
-| `frontend/public/index.html` | Main app UI |
-| `frontend/public/signin.html` | OAuth signin page (purple styling) |
-| `frontend/public/auth.js` | PocketBase auth bootstrap |
-
-### Endpoints
-
-- `GET /` - Serve frontend
-- `GET /version` - App version
-- `GET /api/health` - Health check
-- `GET /api/jobs-all` - All jobs (first 40 fast, then full)
-- `GET /api/jobs` - Paginated jobs
-- `GET /api/job-files` - SharePoint files via Graph API
-- `GET /api/job-file-content` - File content/download
-- `GET /api/job-file-pdf` - PDF proxy
-- `POST /log-change` - Log changes
-
-### Configuration
-
-- Port: 3005
-- PocketBase: https://pocketbase.ccllc.pro
-- Collection: pbc_1407612689
-- Redis/Valkey: localhost:6379
-
-### Known Limitations
-
-- Graph tokens expire after ~60 minutes (Microsoft limitation)
-- No automatic Graph token refresh (would require direct OAuth flow)
-- User must re-signin when Graph token expires
-
-### Next Steps
-
-- Consider implementing direct Microsoft OAuth for refresh token support
-- Add error boundaries for better UX on token expiry
-- Performance monitoring
diff --git a/README.md b/README.md
deleted file mode 100644
index 4645a14..0000000
--- a/README.md
+++ /dev/null
@@ -1,106 +0,0 @@
-# Job-Info-Prod
-
-Production-ready job information management system for field workers.
-
-## Features
-
-- **Dual-Token Authentication**: PocketBase + Microsoft Graph tokens
-- **Always-Warm Cache**: Background refresh loop keeps tokens fresh
-- **Offline-First**: Works without internet using cached data
-- **Zero Re-Auth**: Users never need to login again after initial auth
-
-## Tech Stack
-
-- **Runtime**: Bun
-- **Backend**: Hono
-- **Auth**: PocketBase + Microsoft OAuth
-- **Cache**: Redis/Valkey via ioredis
-- **Frontend**: TypeScript + Tailwind CSS
-
-## Quick Start
-
-```bash
-# Install dependencies
-bun install
-
-# Copy environment file
-cp .env.example .env
-
-# Edit .env with your configuration
-nano .env
-
-# Start development server
-bun run dev
-```
-
-## Environment Variables
-
-See `.env.example` for all required variables:
-
-- `PORT` - Server port (default: 3000)
-- `POCKETBASE_URL` - PocketBase instance URL
-- `MS_CLIENT_ID` - Microsoft OAuth client ID
-- `MS_CLIENT_SECRET` - Microsoft OAuth client secret
-- `MS_TENANT_ID` - Microsoft tenant ID
-- `REDIS_HOST` - Redis/Valkey host
-- `REDIS_PORT` - Redis/Valkey port
-
-## Architecture
-
-```
-┌─────────────────┐     ┌──────────────────┐
-│   Frontend      │────▶│   Hono Backend   │
-│  (TypeScript)   │◀────│                  │
-└─────────────────┘     └────────┬─────────┘
-                                 │
-        ┌────────────────────────┼────────────────────────┐
-        ▼                        ▼                        ▼
-┌───────────────┐      ┌─────────────────┐      ┌─────────────────┐
-│   PocketBase  │      │  Redis/Valkey   │      │ Microsoft Graph │
-│   (Auth+Data) │      │  (Token Cache)  │      │   (SharePoint)  │
-└───────────────┘      └─────────────────┘      └─────────────────┘
-```
-
-## Token Refresh Flow
-
-1. User completes OAuth flow → tokens stored in localStorage + cache
-2. Backend starts 30-min refresh loop per user
-3. Frontend checks backend for fresh tokens every 25 min
-4. If backend unreachable, frontend uses localStorage cache
-5. Stale tokens returned as fallback (field workers can't wait)
-
-## Scripts
-
-- `bun run dev` - Start development server with watch
-- `bun run start` - Start production server
-- `bun run build:css` - Build Tailwind CSS
-- `bun run typecheck` - Run TypeScript type checking
-- `bun run test` - Run tests
-
-## Folder Structure
-
-```
-Job-Info-Prod/
-├── backend/
-│   └── src/
-│       ├── config/       # Environment and constants
-│       ├── middleware/   # Auth, logging, error handling
-│       ├── routes/       # API route handlers
-│       ├── services/     # Business logic
-│       └── index.ts      # Server entry point
-├── frontend/
-│   ├── public/           # Static HTML files
-│   └── src/
-│       ├── auth/         # Auth client
-│       ├── components/   # UI components
-│       ├── services/     # API clients
-│       ├── styles/       # Tailwind CSS
-│       └── app.ts        # Main app entry
-└── shared/
-    ├── constants/        # Shared constants
-    └── types/            # TypeScript types
-```
-
-## License
-
-MIT
diff --git a/backend/src/config/constants.ts b/backend/src/config/constants.ts
deleted file mode 100644
index 4ca8909..0000000
--- a/backend/src/config/constants.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Application Constants
- */
-
-export const APP_NAME = 'Job Info';
-export const APP_VERSION = '2.0.0';
-
-/** HTTP Status codes */
-export const HTTP_STATUS = {
-  OK: 200,
-  CREATED: 201,
-  NO_CONTENT: 204,
-  BAD_REQUEST: 400,
-  UNAUTHORIZED: 401,
-  FORBIDDEN: 403,
-  NOT_FOUND: 404,
-  INTERNAL_SERVER_ERROR: 500,
-  SERVICE_UNAVAILABLE: 503,
-} as const;
-
-/** Error messages */
-export const ERROR_MESSAGES = {
-  UNAUTHORIZED: 'Authentication required',
-  TOKEN_EXPIRED: 'Token has expired',
-  TOKEN_INVALID: 'Invalid token',
-  TOKEN_REFRESH_FAILED: 'Failed to refresh token',
-  USER_NOT_FOUND: 'User not found',
-  JOB_NOT_FOUND: 'Job not found',
-  CACHE_ERROR: 'Cache operation failed',
-  POCKETBASE_ERROR: 'PocketBase operation failed',
-  GRAPH_API_ERROR: 'Microsoft Graph API error',
-  INTERNAL_ERROR: 'Internal server error',
-} as const;
-
-/** Success messages */
-export const SUCCESS_MESSAGES = {
-  LOGIN_SUCCESS: 'Login successful',
-  LOGOUT_SUCCESS: 'Logout successful',
-  TOKEN_REFRESHED: 'Token refreshed successfully',
-} as const;
diff --git a/backend/src/config/env.ts b/backend/src/config/env.ts
deleted file mode 100644
index c4c956e..0000000
--- a/backend/src/config/env.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * Environment Configuration
- */
-
-import { config } from 'dotenv';
-
-// Load .env file
-config();
-
-interface EnvConfig {
-  PORT: number;
-  NODE_ENV: 'development' | 'production' | 'test';
-  ALLOWED_ORIGINS: string[];
-  
-  // Redis/Valkey
-  REDIS_HOST: string;
-  REDIS_PORT: number;
-  REDIS_PASSWORD: string;
-  
-  // PocketBase
-  POCKETBASE_URL: string;
-  PB_COLLECTION: string;
-  PB_AUTH_COLLECTION: string;
-  POCKETBASE_ADMIN_EMAIL: string;
-  POCKETBASE_ADMIN_PASSWORD: string;
-  
-  // Microsoft OAuth
-  MICROSOFT_CLIENT_ID: string;
-  MICROSOFT_CLIENT_SECRET: string;
-  MICROSOFT_TENANT: string;
-  MICROSOFT_REDIRECT_URI: string;
-  MS_GRAPH_TOKEN: string;
-  
-  // Microsoft Graph / SharePoint
-  DRIVE_ID: string;
-  ITEM_ID: string;
-  EXCEL_TABLE_NAME: string;
-  
-  // Logging
-  LOG_LEVEL: 'debug' | 'info' | 'warn' | 'error';
-  LOG_FILE: string;
-  ERROR_LOG_FILE: string;
-  
-  // Token settings
-  TOKEN_REFRESH_INTERVAL_MS: number;
-  TOKEN_EXPIRY_BUFFER_MS: number;
-}
-
-function getEnv<T extends string | number>(key: string, defaultValue: T): T {
-  const value = process.env[key];
-  if (value === undefined) return defaultValue;
-  
-  if (typeof defaultValue === 'number') {
-    return parseInt(value, 10) as T;
-  }
-  return value as T;
-}
-
-function getEnvArray(key: string, defaultValue: string[]): string[] {
-  const value = process.env[key];
-  if (!value) return defaultValue;
-  return value.split(',').map(s => s.trim());
-}
-
-export const env: EnvConfig = {
-  PORT: getEnv('PORT', 3005),
-  NODE_ENV: getEnv('NODE_ENV', 'development') as EnvConfig['NODE_ENV'],
-  ALLOWED_ORIGINS: getEnvArray('ALLOWED_ORIGINS', ['http://localhost:3005', 'http://localhost:5173']),
-  
-  REDIS_HOST: getEnv('REDIS_HOST', 'localhost'),
-  REDIS_PORT: getEnv('REDIS_PORT', 6379),
-  REDIS_PASSWORD: getEnv('REDIS_PASSWORD', ''),
-  
-  POCKETBASE_URL: getEnv('POCKETBASE_URL', 'https://pocketbase.ccllc.pro'),
-  PB_COLLECTION: getEnv('PB_COLLECTION', 'Job_Info_Prod'),
-  PB_AUTH_COLLECTION: getEnv('PB_AUTH_COLLECTION', 'Users'),
-  POCKETBASE_ADMIN_EMAIL: getEnv('POCKETBASE_ADMIN_EMAIL', ''),
-  POCKETBASE_ADMIN_PASSWORD: getEnv('POCKETBASE_ADMIN_PASSWORD', ''),
-  
-  MICROSOFT_CLIENT_ID: getEnv('MICROSOFT_CLIENT_ID', ''),
-  MICROSOFT_CLIENT_SECRET: getEnv('MICROSOFT_CLIENT_SECRET', ''),
-  MICROSOFT_TENANT: getEnv('MICROSOFT_TENANT', '3fd97ea7-b124-41f1-855f-52d8ac3b16c7'),
-  MICROSOFT_REDIRECT_URI: getEnv('MICROSOFT_REDIRECT_URI', 'https://pocketbase.ccllc.pro/api/oauth2-redirect'),
-  MS_GRAPH_TOKEN: getEnv('MS_GRAPH_TOKEN', ''),
-  
-  DRIVE_ID: getEnv('DRIVE_ID', ''),
-  ITEM_ID: getEnv('ITEM_ID', ''),
-  EXCEL_TABLE_NAME: getEnv('EXCEL_TABLE_NAME', 'Job_List'),
-  
-  LOG_LEVEL: getEnv('LOG_LEVEL', 'info') as EnvConfig['LOG_LEVEL'],
-  LOG_FILE: getEnv('LOG_FILE', 'logs/app.log'),
-  ERROR_LOG_FILE: getEnv('ERROR_LOG_FILE', 'logs/error.log'),
-  
-  TOKEN_REFRESH_INTERVAL_MS: getEnv('TOKEN_REFRESH_INTERVAL_MS', 1800000),
-  TOKEN_EXPIRY_BUFFER_MS: getEnv('TOKEN_EXPIRY_BUFFER_MS', 900000),
-};
-
-export function validateEnv(): void {
-  const required = [
-    'POCKETBASE_URL',
-    'MICROSOFT_CLIENT_ID',
-    'MICROSOFT_CLIENT_SECRET',
-    'MICROSOFT_TENANT',
-  ];
-  
-  const missing = required.filter(key => !process.env[key]);
-  
-  if (missing.length > 0) {
-    console.warn(`Warning: Missing environment variables: ${missing.join(', ')}`);
-  }
-}
diff --git a/backend/src/index.ts b/backend/src/index.ts
deleted file mode 100644
index 037c6ef..0000000
--- a/backend/src/index.ts
+++ /dev/null
@@ -1,905 +0,0 @@
-import { Hono } from 'hono';
-import { serveStatic } from 'hono/bun';
-import fs from 'fs';
-// @ts-ignore Bun project may not have dotenv types configured
-import { config } from 'dotenv';
-import { getCache, setCache, isRedisConnected } from './redis-cache';
-
-config();
-
-const app = new Hono();
-
-// Service Principal token cache
-let appOnlyToken: string | null = null;
-let appOnlyTokenExpiry: number = 0;
-
-// Get app-only token using client credentials flow
-async function getAppOnlyToken(): Promise<string | null> {
-  try {
-    // Check if we have a valid cached token
-    if (appOnlyToken && appOnlyTokenExpiry > Date.now()) {
-      return appOnlyToken;
-    }
-
-    const clientId = process.env.MICROSOFT_CLIENT_ID;
-    const clientSecret = process.env.MICROSOFT_CLIENT_SECRET;
-    const tenant = process.env.MICROSOFT_TENANT || 'common';
-
-    if (!clientId || !clientSecret) {
-      return null; // Service principal not configured
-    }
-
-    const tokenUrl = `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/token`;
-    
-    const params = new URLSearchParams({
-      client_id: clientId,
-      client_secret: clientSecret,
-      scope: 'https://graph.microsoft.com/.default',
-      grant_type: 'client_credentials'
-    });
-
-    const response = await fetch(tokenUrl, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-      body: params.toString()
-    });
-
-    if (!response.ok) {
-      const error = await response.text();
-      logLine('logs/error.log', `Failed to get app-only token: ${error}`);
-      return null;
-    }
-
-    const data = await response.json() as any;
-    appOnlyToken = data.access_token;
-    // Set expiry to 55 minutes (token is valid for 60 minutes)
-    appOnlyTokenExpiry = Date.now() + (55 * 60 * 1000);
-    
-    logLine('logs/server.log', `✓ Got app-only token (expires in 55 minutes)`);
-    return appOnlyToken;
-  } catch (err) {
-    logLine('logs/error.log', `getAppOnlyToken error: ${(err as Error)?.message || String(err)}`);
-    return null;
-  }
-}
-
-// Minimal log helpers
-const logLine = (path: string, line: string) => {
-  try {
-    fs.appendFileSync(path, `${new Date().toISOString()} ${line}\n`);
-  } catch (err) {
-    console.error('Failed to write log:', err);
-  }
-};
-
-// Version endpoint sourced from package.json
-app.get('/version', (c) => {
-  try {
-    const pkgRaw = fs.readFileSync('./package.json', 'utf-8');
-    const pkg = JSON.parse(pkgRaw);
-    return c.json({ version: pkg.version || '0.0.0' });
-  } catch (err) {
-    logLine('logs/error.log', `version endpoint error: ${(err as Error)?.message || String(err)}`);
-    return c.json({ version: '0.0.0' }, 200);
-  }
-});
-
-// Jobs endpoint with Redis caching
-app.get('/api/jobs', async (c) => {
-  const page = parseInt(c.req.query('page') || '1');
-  const perPage = parseInt(c.req.query('perPage') || '50');
-  const sort = c.req.query('sort') || '-Job_Number';
-  
-  const cacheKey = `jobs:page:${page}:perPage:${perPage}:sort:${sort}`;
-  const ttl = 300; // 5 minutes cache
-  
-  try {
-    // Try to get from cache first
-    if (isRedisConnected()) {
-      const cached = await getCache(cacheKey);
-      if (cached) {
-        logLine('logs/server.log', `Cache HIT for ${cacheKey}`);
-        return c.json(cached);
-      }
-      logLine('logs/server.log', `Cache MISS for ${cacheKey}`);
-    }
-    
-    // Fetch from PocketBase
-    const pbUrl = `https://pocketbase.ccllc.pro/api/collections/pbc_1407612689/records?page=${page}&perPage=${perPage}&sort=${sort}`;
-    const authHeader = c.req.header('Authorization') || '';
-    
-    const response = await fetch(pbUrl, {
-      headers: authHeader ? { Authorization: authHeader } : {}
-    });
-    
-    if (!response.ok) {
-      throw new Error(`PocketBase returned ${response.status}`);
-    }
-    
-    const data = await response.json();
-    
-    // Cache the result
-    if (isRedisConnected()) {
-      await setCache(cacheKey, data, ttl);
-      logLine('logs/server.log', `Cached ${cacheKey} for ${ttl}s`);
-    }
-    
-    return c.json(data);
-    
-  } catch (err) {
-    logLine('logs/error.log', `jobs endpoint error: ${(err as Error)?.message || String(err)}`);
-    return c.json({ error: 'Failed to fetch jobs' }, 500);
-  }
-});
-
-// Fast endpoint: returns all jobs in a single cached request
-app.get('/api/jobs-all', async (c) => {
-  const cacheKey = 'jobs:all';
-  const ttl = 1800; // 30 minutes cache
-  try {
-    // Try cache first for instant response
-    if (isRedisConnected()) {
-      const cached = await getCache(cacheKey);
-      if (cached) {
-        // Return first 100 jobs immediately for instant display, rest loads in background
-        const fastBatch = Array.isArray(cached.items) ? cached.items.slice(0, 100) : [];
-        const hasMore = cached.items && cached.items.length > 100;
-        
-        logLine('logs/server.log', `Cache HIT for ${cacheKey} - sending ${fastBatch.length} jobs (${hasMore ? 'partial' : 'complete'})`);
-        
-        // Refresh cache in background
-        setImmediate(async () => {
-          try {
-            await refreshJobsCache(cacheKey, ttl, c.req.header('Authorization') || '');
-          } catch (err) {}
-        });
-        
-        return c.json({ 
-          page: 1, 
-          perPage: fastBatch.length, 
-          totalItems: cached.totalItems || fastBatch.length,
-          totalPages: 1,
-          items: fastBatch, 
-          partial: hasMore 
-        });
-      } else {
-        // No cache: return empty array instantly, trigger background fetch
-        setImmediate(async () => {
-          try {
-            const result = await fetchAllJobsFromPocketBase(c.req.header('Authorization') || '');
-            if (isRedisConnected()) {
-              await setCache(cacheKey, result, ttl);
-              logLine('logs/server.log', `Cached ${cacheKey} with ${result.items.length} jobs for ${ttl}s`);
-            }
-          } catch (err) {
-            logLine('logs/error.log', `jobs-all background fetch error: ${(err as Error)?.message || String(err)}`);
-          }
-        });
-        return c.json({ items: [], partial: true });
-      }
-    }
-    // Redis not connected: fallback to direct fetch (blocking)
-    const result = await fetchAllJobsFromPocketBase(c.req.header('Authorization') || '');
-    return c.json(result);
-  } catch (err) {
-    logLine('logs/error.log', `jobs-all endpoint error: ${(err as Error)?.message || String(err)}`);
-    return c.json({ error: 'Failed to fetch jobs' }, 500);
-  }
-});
-
-// Get remaining jobs after initial batch
-app.get('/api/jobs-remaining', async (c) => {
-  const cacheKey = 'jobs:all';
-  try {
-    if (isRedisConnected()) {
-      const cached = await getCache(cacheKey);
-      if (cached && cached.items && cached.items.length > 100) {
-        const remaining = cached.items.slice(100);
-        return c.json({ 
-          items: remaining,
-          totalItems: cached.totalItems || cached.items.length
-        });
-      }
-    }
-    return c.json({ items: [] });
-  } catch (err) {
-    logLine('logs/error.log', `jobs-remaining error: ${(err as Error)?.message || String(err)}`);
-    return c.json({ error: 'Failed to fetch remaining jobs' }, 500);
-  }
-});
-
-// Helper function to fetch all jobs from PocketBase
-async function fetchAllJobsFromPocketBase(authHeader: string): Promise<any> {
-  const allItems: any[] = [];
-  let page = 1;
-  const perPage = 500;
-  
-  while (true) {
-    const pbUrl = `https://pocketbase.ccllc.pro/api/collections/pbc_1407612689/records?page=${page}&perPage=${perPage}&sort=-Job_Number`;
-    const response = await fetch(pbUrl, {
-      headers: authHeader ? { Authorization: authHeader } : {}
-    });
-    
-    if (!response.ok) {
-      throw new Error(`PocketBase returned ${response.status}`);
-    }
-    
-    const data = await response.json();
-    const items = data.items || [];
-    
-    if (items.length === 0) break;
-    allItems.push(...items);
-    
-    if (allItems.length >= (data.totalItems || 0)) break;
-    page++;
-  }
-  
-  return {
-    page: 1,
-    perPage: allItems.length,
-    totalItems: allItems.length,
-    totalPages: 1,
-    items: allItems
-  };
-}
-
-// Helper function to refresh jobs cache in background
-async function refreshJobsCache(cacheKey: string, ttl: number, authHeader: string): Promise<void> {
-  try {
-    const result = await fetchAllJobsFromPocketBase(authHeader);
-    await setCache(cacheKey, result, ttl);
-    logLine('logs/server.log', `Background refresh: cached ${cacheKey} with ${result.items.length} jobs`);
-  } catch (err) {
-    logLine('logs/error.log', `Background refresh error: ${(err as Error)?.message || String(err)}`);
-  }
-}
-
-
-// --- Microsoft Graph helpers ---
-const getGraphToken = (c?: any) => {
-  const headerToken = c?.req?.header ? c.req.header('x-graph-token') : '';
-  const envToken = process.env.GRAPH_TOKEN || process.env.MS_GRAPH_TOKEN || '';
-  const token = headerToken || envToken;
-  console.log('[getGraphToken] Header token:', headerToken ? headerToken.substring(0, 20) + '...' : 'NONE');
-  console.log('[getGraphToken] Env token:', envToken ? 'SET' : 'NOT SET');
-  console.log('[getGraphToken] Using:', token ? token.substring(0, 20) + '...' : 'NONE');
-  return token;
-};
-
-const b64Url = (input: string) =>
-  Buffer.from(input).toString('base64').replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '');
-
-type DriveItem = {
-  id: string;
-  name: string;
-  webUrl?: string;
-  size?: number;
-  lastModifiedDateTime?: string;
-  file?: { mimeType?: string };
-  folder?: { childCount?: number };
-  parentReference?: { path?: string; driveId?: string };
-};
-
-const fetchJson = async (url: string, token: string) => {
-  const res = await fetch(url, {
-    headers: {
-      Authorization: `Bearer ${token}`,
-      Accept: 'application/json',
-    },
-  });
-  if (!res.ok) {
-    const text = await res.text();
-    const err: any = new Error(`Graph ${res.status}: ${text}`);
-    err.status = res.status;
-    throw err;
-  }
-  return res.json();
-};
-
-const resolveShareLink = async (link: string, token: string) => {
-  // Decode the link in case it comes pre-encoded from the database
-  const decodedLink = decodeURIComponent(link);
-  console.log('[resolveShareLink] Decoded link:', decodedLink);
-  
-  // Check if this is a short sharing link (/:f:/ or /:b:/) or a direct document library URL
-  if (decodedLink.includes('/:f:/') || decodedLink.includes('/:b:/')) {
-    // Short sharing link - use shares API
-    const encoded = `u!${b64Url(decodedLink)}`;
-    console.log('[resolveShareLink] Using shares API, encoded:', encoded);
-    const data = await fetchJson(`https://graph.microsoft.com/v1.0/shares/${encoded}/driveItem`, token);
-    return { driveId: data.parentReference?.driveId as string, itemId: data.id as string };
-  } else {
-    // Direct document library URL - parse it and use drive API
-    // Example: https://czflex.sharepoint.com/sites/Team/Shared Documents/Forms/AllItems.aspx?RootFolder=/sites/Team/Shared Documents/General/...
-    const url = new URL(decodedLink);
-    const pathMatch = url.hostname.match(/^([^.]+)\.sharepoint\.com$/);
-    if (!pathMatch) throw new Error('Invalid SharePoint URL');
-    
-    const hostname = pathMatch[1]; // e.g., 'czflex'
-    const sitePath = url.pathname.split('/Shared')[0]; // e.g., /sites/Team
-    const rootFolderParam = url.searchParams.get('RootFolder');
-    if (!rootFolderParam) throw new Error('RootFolder parameter missing');
-    
-    // Extract the folder path relative to the document library
-    // RootFolder format: /sites/Team/Shared Documents/General/Operations [Server]/...
-    // We need: General/Operations [Server]/...
-    const folderPath = rootFolderParam.split('/Shared Documents/')[1];
-    if (!folderPath) throw new Error('Could not parse folder path');
-    
-    console.log('[resolveShareLink] Hostname:', hostname);
-    console.log('[resolveShareLink] Site path:', sitePath);
-    console.log('[resolveShareLink] Folder path:', folderPath);
-    
-    // Get the site ID first using hostname:sitePath format
-    const siteData = await fetchJson(`https://graph.microsoft.com/v1.0/sites/${hostname}.sharepoint.com:${sitePath}`, token);
-    const siteId = siteData.id;
-    
-    // Get the default document library drive
-    const driveData = await fetchJson(`https://graph.microsoft.com/v1.0/sites/${siteId}/drive`, token);
-    const driveId = driveData.id;
-    
-    // Get the folder item by path
-    const itemData = await fetchJson(
-      `https://graph.microsoft.com/v1.0/drives/${driveId}/root:/${folderPath}`,
-      token
-    );
-    
-    console.log('[resolveShareLink] Resolved to driveId:', driveId, 'itemId:', itemData.id);
-    return { driveId, itemId: itemData.id };
-  }
-};
-
-const listChildrenRecursive = async (
-  driveId: string,
-  itemId: string,
-  depth = 0,
-  maxDepth = 5,
-  token: string,
-): Promise<DriveItem[]> => {
-  const out: DriveItem[] = [];
-  const data = await fetchJson(`https://graph.microsoft.com/v1.0/drives/${driveId}/items/${itemId}/children`, token);
-  for (const child of data.value || []) {
-    out.push(child as DriveItem);
-    if (child.folder && depth < maxDepth) {
-      const nested = await listChildrenRecursive(driveId, child.id, depth + 1, maxDepth, token);
-      out.push(...nested);
-    }
-  }
-  return out;
-};
-
-const searchWithinFolder = async (driveId: string, itemId: string, query: string, token: string): Promise<DriveItem[]> => {
-  const data = await fetchJson(
-    `https://graph.microsoft.com/v1.0/drives/${driveId}/items/${itemId}/search(q='${encodeURIComponent(query)}')`,
-    token,
-  );
-  return (data.value || []) as DriveItem[];
-};
-
-const filterByCategory = (items: DriveItem[], category?: string, pdfOnly: boolean = true) => {
-  // First filter: show PDF files and Word documents (which will be converted to PDF)
-  let filtered = items;
-  if (pdfOnly) {
-    filtered = items.filter((i) => {
-      if (i.folder) return false;
-      const name = i.name.toLowerCase();
-      const mimeType = i.file?.mimeType?.toLowerCase() || '';
-      // Include PDFs, Word documents, and images
-      return name.endsWith('.pdf') || mimeType.includes('pdf') ||
-             name.endsWith('.doc') || name.endsWith('.docx') || mimeType.includes('word') ||
-             name.endsWith('.jpg') || name.endsWith('.jpeg') || name.endsWith('.png') || 
-             name.endsWith('.gif') || name.endsWith('.bmp') || name.endsWith('.tiff') || 
-             name.endsWith('.webp') || mimeType.includes('image');
-    });
-  }
-  
-  // Second filter: category filtering (if specified)
-  if (!category) return filtered;
-  const nameHas = (name: string, words: string[]) => words.some((w) => name.includes(w));
-  const lc = (s: string) => (s || '').toLowerCase();
-  const contractWords = ['contract', 'estimate', 'proposal', 'bid', 'award', 'agreement', 'sow'];
-  const planWords = ['plan', 'drawing', 'dwg', 'pdf', 'sheet', 'layout'];
-  return filtered.filter((i) => {
-    const n = lc(i.name);
-    if (category === 'contracts') return nameHas(n, contractWords);
-    if (category === 'plans') return nameHas(n, planWords);
-    return true;
-  });
-};
-
-// List/search job files via Graph using a shared folder link
-app.get('/api/job-files', async (c) => {
-  try {
-    console.log('[job-files] Request received');
-    const link = c.req.query('link');
-    if (!link) return c.json({ error: 'link required' }, 400);
-    console.log('[job-files] Link:', link);
-    
-    const q = c.req.query('q') || '';
-    const category = c.req.query('category') || '';
-    
-    // Check cache first (only for non-search, non-category requests)
-    if (!q && !category && isRedisConnected()) {
-      const cacheKey = `job-files:${link}`;
-      const cached = await getCache(cacheKey);
-      if (cached) {
-        console.log('[job-files] Cache HIT for', link);
-        // Apply filtering if requested
-        const pdfOnly = c.req.query('pdfOnly') !== 'false';
-        const items = cached.items || [];
-        const filtered = pdfOnly 
-          ? items.filter((i: any) => {
-              if (i.isFolder) return false;
-              const name = (i.name || '').toLowerCase();
-              const mimeType = (i.mimeType || '').toLowerCase();
-              return name.endsWith('.pdf') || mimeType.includes('pdf') ||
-                     name.endsWith('.doc') || name.endsWith('.docx') || mimeType.includes('word') ||
-                     name.endsWith('.jpg') || name.endsWith('.jpeg') || name.endsWith('.png') || 
-                     name.endsWith('.gif') || name.endsWith('.bmp') || name.endsWith('.tiff') || 
-                     name.endsWith('.webp') || mimeType.includes('image');
-            })
-          : items;
-        
-        const mapped = filtered.map((i: any) => ({
-          id: i.id,
-          name: i.name,
-          url: i.webUrl,
-          driveId: i.driveId,
-          size: i.size,
-          modified: i.lastModifiedDateTime,
-          contentType: i.mimeType,
-          isFolder: i.isFolder,
-          path: i.parentPath || '',
-        }));
-        
-        return c.json({ items: mapped, total: mapped.length, source: 'cache', driveId: cached.driveId });
-      }
-      console.log('[job-files] Cache MISS for', link);
-    }
-    
-    // Not in cache or search/category request - fetch from Graph API
-    const token = getGraphToken(c);
-    if (!token) {
-      console.log('[job-files] No token found');
-      return c.json({ error: 'GRAPH_TOKEN missing' }, 500);
-    }
-    console.log('[job-files] Token found:', token.substring(0, 20) + '...');
-
-    const { driveId, itemId } = await resolveShareLink(link, token);
-
-    let items: DriveItem[] = [];
-    if (q) {
-      items = await searchWithinFolder(driveId, itemId, q, token);
-    } else {
-      // Walk subfolders up to depth 5
-      items = await listChildrenRecursive(driveId, itemId, 0, 5, token);
-    }
-
-    // Filter to show only PDFs by default (can be disabled with pdfOnly=false query param)
-    const pdfOnly = c.req.query('pdfOnly') !== 'false';
-    const filtered = filterByCategory(items, category, pdfOnly);
-    console.log(`[job-files] Found ${items.length} total items, ${filtered.length} after filtering`);
-
-    const mapped = filtered.map((i) => ({
-      id: i.id,
-      name: i.name,
-      url: i.webUrl,
-      driveId: i.parentReference?.driveId || driveId,
-      size: i.size,
-      modified: i.lastModifiedDateTime,
-      contentType: i.file?.mimeType,
-      isFolder: Boolean(i.folder),
-      path: i.parentReference?.path || '',
-    }));
-
-    return c.json({ items: mapped, total: mapped.length, source: q ? 'search' : 'walk', driveId });
-  } catch (err) {
-    const message = (err as Error)?.message || String(err);
-    const status = (err as any)?.status || 500;
-    console.error('[job-files] ERROR:', message);
-    logLine('logs/error.log', `/api/job-files error: ${message}`);
-    return c.json({ error: message }, status);
-  }
-});
-
-// Stream file content via Graph to avoid CSP issues for inline preview
-app.get('/api/job-file-content', async (c) => {
-  try {
-    const token = getGraphToken(c);
-    if (!token) return c.json({ error: 'GRAPH_TOKEN missing' }, 500);
-    const driveId = c.req.query('driveId');
-    const itemId = c.req.query('itemId');
-    if (!driveId || !itemId) return c.json({ error: 'driveId and itemId required' }, 400);
-
-    const res = await fetch(`https://graph.microsoft.com/v1.0/drives/${driveId}/items/${itemId}/content`, {
-      headers: { Authorization: `Bearer ${token}` },
-    });
-    if (!res.ok) {
-      const text = await res.text();
-      logLine('logs/error.log', `/api/job-file-content failed: ${res.status} - ${text}`);
-      return c.json({ error: `Graph ${res.status}: ${text}` }, 502);
-    }
-    const headers: Record<string, string> = {};
-    const ct = res.headers.get('content-type');
-    const cd = res.headers.get('content-disposition');
-    if (ct) headers['Content-Type'] = ct;
-    if (cd) headers['Content-Disposition'] = cd;
-    return new Response(res.body, { status: 200, headers });
-  } catch (err) {
-    const message = (err as Error)?.message || String(err);
-    const status = (err as any)?.status || 500;
-    logLine('logs/error.log', `/api/job-file-content error: ${message}`);
-    return c.json({ error: message }, status);
-  }
-});
-
-// Convert Word documents to PDF for display
-app.get('/api/job-file-pdf', async (c) => {
-  try {
-    const token = getGraphToken(c);
-    if (!token) return c.json({ error: 'GRAPH_TOKEN missing' }, 500);
-    const driveId = c.req.query('driveId');
-    const itemId = c.req.query('itemId');
-    if (!driveId || !itemId) return c.json({ error: 'driveId and itemId required' }, 400);
-
-    // Check cache first
-    const cacheKey = `job-file-pdf:${driveId}:${itemId}`;
-    if (isRedisConnected()) {
-      const cached = await getCache(cacheKey);
-      if (cached && cached.data) {
-        logLine('logs/server.log', `PDF cache HIT: ${driveId}:${itemId}`);
-        const buffer = Buffer.from(cached.data, 'base64');
-        const headers: Record<string, string> = {
-          'Content-Type': 'application/pdf',
-        };
-        if (cached.filename) {
-          headers['Content-Disposition'] = `inline; filename="${cached.filename}"`;
-        }
-        return new Response(buffer, { status: 200, headers });
-      } else {
-        logLine('logs/server.log', `PDF cache MISS: ${driveId}:${itemId}`);
-      }
-    }
-
-    // Use Graph API to convert to PDF format
-    const res = await fetch(`https://graph.microsoft.com/v1.0/drives/${driveId}/items/${itemId}/content?format=pdf`, {
-      headers: { Authorization: `Bearer ${token}` },
-    });
-    if (!res.ok) {
-      const text = await res.text();
-      logLine('logs/error.log', `/api/job-file-pdf conversion failed: ${res.status} - ${text}`);
-      return c.json({ error: `PDF conversion failed: ${res.status}` }, 502);
-    }
-    
-    const pdfBuffer = Buffer.from(await res.arrayBuffer());
-    const headers: Record<string, string> = {
-      'Content-Type': 'application/pdf',
-    };
-    const cd = res.headers.get('content-disposition');
-    let filename = 'document.pdf';
-    if (cd) {
-      // Replace .docx/.doc extension with .pdf in filename
-      headers['Content-Disposition'] = cd.replace(/\.(docx?)/gi, '.pdf');
-      const match = cd.match(/filename="?([^"]+)"?/);
-      if (match) filename = match[1].replace(/\.(docx?)/gi, '.pdf');
-    }
-    
-    // Cache the converted PDF for 30 minutes
-    if (isRedisConnected()) {
-      await setCache(cacheKey, {
-        data: pdfBuffer.toString('base64'),
-        filename
-      }, 1800);
-    }
-    
-    logLine('logs/server.log', `Successfully converted document to PDF: driveId=${driveId}, itemId=${itemId}`);
-    return new Response(pdfBuffer, { status: 200, headers });
-  } catch (err) {
-    const message = (err as Error)?.message || String(err);
-    const status = (err as any)?.status || 500;
-    logLine('logs/error.log', `/api/job-file-pdf error: ${message}`);
-    return c.json({ error: message }, status);
-  }
-});
-
-// Mutation logging endpoint
-app.post('/log-change', async (c) => {
-  try {
-    const body = await c.req.json();
-    const { action = 'unknown', user = 'unknown', target = '', detail = '' } = body || {};
-    const payload = JSON.stringify({ action, user, target, detail });
-    logLine('logs/changes.log', payload);
-    return c.json({ status: 'ok' });
-  } catch (err) {
-    logLine('logs/error.log', `log-change error: ${(err as Error)?.message || String(err)}`);
-    return c.text('Bad Request', 400);
-  }
-});
-
-// Serve static files from the frontend directory (must come after API routes)
-// Add cache headers for static assets
-app.use('/assets/*', async (c, next) => {
-  await next();
-  // Cache assets for 1 year
-  c.header('Cache-Control', 'public, max-age=31536000, immutable');
-});
-app.use('/*', serveStatic({ root: './frontend/public' }));
-
-// Error handler
-app.onError((err, c) => {
-  logLine('logs/error.log', `Unhandled error: ${err?.message || err}`);
-  return c.text('Internal Server Error', 500);
-});
-
-// Default to 3005 for test instance; can be overridden by Environment=PORT
-const PORT = Number(process.env.PORT || 3005);
-
-logLine('logs/server.log', `Starting frontend server (Redis version) on port ${PORT}`);
-
-// Warm up cache on startup - wait for Redis to be ready
-(async () => {
-  // Wait for Redis to be ready (max 10 seconds)
-  let retries = 0;
-  while (!isRedisConnected() && retries < 20) {
-    await new Promise(resolve => setTimeout(resolve, 500));
-    retries++;
-  }
-  
-  if (!isRedisConnected()) {
-    logLine('logs/error.log', 'Redis not connected after 10 seconds, skipping cache warmup');
-    return;
-  }
-  
-  try {
-    logLine('logs/server.log', 'Warming up jobs cache...');
-    const result = await fetchAllJobsFromPocketBase('');
-    await setCache('jobs:all', result, 1800);
-    logLine('logs/server.log', `✓ Cache warmed with ${result.items.length} total jobs`);
-    
-    // Try to start file caching if service principal is configured
-    const token = await getAppOnlyToken();
-    if (token) {
-      logLine('logs/server.log', 'Service principal authenticated, starting background file caching...');
-      // Cache files for ALL jobs with folder links
-      startFileCaching(result.items, token);
-    } else {
-      logLine('logs/server.log', 'Service principal not configured, file caching will occur on-demand');
-    }
-  } catch (err) {
-    logLine('logs/error.log', `Cache warmup failed: ${(err as Error)?.message || String(err)}`);
-  }
-})();
-
-// Background file caching state
-let fileCachingActive = false;
-let fileCachingIndex = 0;
-let fileCachingJobs: any[] = [];
-let fileCachingToken: string = '';
-let fileCachingTimer: NodeJS.Timeout | null = null;
-
-async function startFileCaching(jobs: any[], token: string) {
-  if (fileCachingActive) return;
-  
-  fileCachingJobs = jobs;
-  if (fileCachingJobs.length === 0) {
-    logLine('logs/server.log', 'No jobs to cache');
-    return;
-  }
-  
-  fileCachingActive = true;
-  fileCachingIndex = 0;
-  fileCachingToken = token;
-  
-  logLine('logs/server.log', `Starting background file caching for ${fileCachingJobs.length} jobs...`);
-  cacheNextFileBatch();
-}
-
-async function cacheNextFileBatch() {
-  if (!fileCachingActive || !isRedisConnected()) return;
-  
-  const batchSize = 10; // Cache 10 jobs at a time for faster initial coverage
-  const maxJobs = fileCachingJobs.length;
-  
-  if (fileCachingIndex >= maxJobs) {
-    // Completed initial full cache of all jobs
-    console.log(`✓ Completed caching all ${maxJobs} jobs. Scheduling refresh in 10 minutes...`);
-    logLine('logs/server.log', `✓ Completed caching all ${maxJobs} jobs. Scheduling refresh in 10 minutes...`);
-    fileCachingIndex = 0;
-    
-    // After completing all jobs, wait 10 minutes before refreshing
-    fileCachingTimer = setTimeout(async () => {
-      try {
-        // Refresh the jobs cache first
-        await refreshJobsCache('jobs:all', 1800, '');
-        
-        // Get updated job list from cache
-        const cached = await getCache('jobs:all');
-        if (cached && cached.items) {
-          fileCachingJobs = cached.items;
-          console.log(`Starting refresh cycle: ${fileCachingJobs.length} jobs to update`);
-          logLine('logs/server.log', `Starting refresh cycle: ${fileCachingJobs.length} jobs to update`);
-        }
-        
-        // Refresh token if needed
-        const newToken = await getAppOnlyToken();
-        if (newToken) {
-          fileCachingToken = newToken;
-          cacheNextFileBatch();
-        } else {
-          console.error('Failed to refresh app-only token, stopping file caching');
-          logLine('logs/error.log', 'Failed to refresh app-only token, stopping file caching');
-          fileCachingActive = false;
-        }
-      } catch (err) {
-        console.error(`File cache cycle restart error: ${(err as Error)?.message}`);
-        logLine('logs/error.log', `File cache cycle restart error: ${(err as Error)?.message}`);
-      }
-    }, 10 * 60 * 1000);
-    return;
-  }
-  
-  // Get next batch of jobs to cache
-  const batch = fileCachingJobs.slice(fileCachingIndex, fileCachingIndex + batchSize);
-  const jobNumbers = batch.map(j => j.Job_Number).join(', ');
-  const batchMsg = `[Cache Batch] Processing jobs: ${jobNumbers} (${fileCachingIndex}/${maxJobs})`;
-  console.log(batchMsg);
-  logLine('logs/server.log', batchMsg);
-  
-  for (const job of batch) {
-    try {
-      await cacheJobFiles(job, fileCachingToken);
-    } catch (err) {
-      // Silently continue on errors
-      logLine('logs/error.log', `File cache error for job ${job.Job_Number}: ${(err as Error)?.message}`);
-    }
-  }
-  
-  fileCachingIndex += batchSize;
-  
-  // Continue with next batch after a short delay (1 second between batches for faster throughput)
-  fileCachingTimer = setTimeout(() => cacheNextFileBatch(), 1000);
-}
-
-async function cacheJobFiles(job: any, token: string) {
-  const link = job.Job_Folder_Link;
-  if (!link) {
-    // Job has no folder link, just mark it as cached
-    const cacheKey = `job-files:${job.Job_Number}`;
-    await setCache(cacheKey, { items: [] }, 1800);
-    console.log(`✓ No folder for job ${job.Job_Number}`);
-    logLine('logs/server.log', `✓ No folder for job ${job.Job_Number}`);
-    return;
-  }
-  
-  const cacheKey = `job-files:${link}`;
-  const ttl = 1800; // 30 minutes
-  
-  try {
-    const { driveId, itemId } = await resolveShareLink(link, token);
-    const items = await listChildrenRecursive(driveId, itemId, 0, 5, token);
-    
-    const data = {
-      driveId,
-      items: items.map(item => ({
-        id: item.id,
-        name: item.name,
-        webUrl: item.webUrl,
-        size: item.size,
-        lastModifiedDateTime: item.lastModifiedDateTime,
-        mimeType: item.file?.mimeType,
-        isFolder: !!item.folder,
-        parentPath: item.parentReference?.path,
-        driveId: item.parentReference?.driveId || driveId
-      })),
-      cachedAt: Date.now()
-    };
-    
-    await setCache(cacheKey, data, ttl);
-    
-    // Pre-cache PDF conversions for Word/Excel documents AND native PDF files
-    const officeFiles = items.filter(item => {
-      const name = (item.name || '').toLowerCase();
-      return name.endsWith('.docx') || name.endsWith('.doc') || name.endsWith('.xlsx') || name.endsWith('.xls');
-    });
-    
-    const pdfFiles = items.filter(item => {
-      const name = (item.name || '').toLowerCase();
-      return name.endsWith('.pdf');
-    });
-    
-    let pdfsCached = 0;
-    
-    // Cache converted Office documents
-    for (const file of officeFiles) {
-      try {
-        const fileDriveId = file.parentReference?.driveId || driveId;
-        const pdfCacheKey = `job-file-pdf:${fileDriveId}:${file.id}`;
-        
-        // Check if already cached
-        const existing = await getCache(pdfCacheKey);
-        if (existing) {
-          pdfsCached++;
-          continue;
-        }
-        
-        // Convert and cache
-        const res = await fetch(`https://graph.microsoft.com/v1.0/drives/${fileDriveId}/items/${file.id}/content?format=pdf`, {
-          headers: { Authorization: `Bearer ${token}` },
-        });
-        
-        if (res.ok) {
-          const pdfBuffer = Buffer.from(await res.arrayBuffer());
-          const cd = res.headers.get('content-disposition');
-          let filename = file.name.replace(/\.(docx?|xlsx?)$/gi, '.pdf');
-          if (cd) {
-            const match = cd.match(/filename="?([^"]+)"?/);
-            if (match) filename = match[1].replace(/\.(docx?|xlsx?)$/gi, '.pdf');
-          }
-          
-          await setCache(pdfCacheKey, {
-            data: pdfBuffer.toString('base64'),
-            filename
-          }, ttl);
-          pdfsCached++;
-        }
-      } catch (err) {
-        // Silently skip PDF caching errors
-      }
-    }
-    
-    // Cache native PDF files
-    for (const file of pdfFiles) {
-      try {
-        const fileDriveId = file.parentReference?.driveId || driveId;
-        const pdfCacheKey = `job-file-pdf:${fileDriveId}:${file.id}`;
-        
-        // Check if already cached
-        const existing = await getCache(pdfCacheKey);
-        if (existing) {
-          pdfsCached++;
-          continue;
-        }
-        
-        // Fetch and cache native PDF
-        const res = await fetch(`https://graph.microsoft.com/v1.0/drives/${fileDriveId}/items/${file.id}/content`, {
-          headers: { Authorization: `Bearer ${token}` },
-        });
-        
-        if (res.ok) {
-          const pdfBuffer = Buffer.from(await res.arrayBuffer());
-          await setCache(pdfCacheKey, {
-            data: pdfBuffer.toString('base64'),
-            filename: file.name
-          }, ttl);
-          pdfsCached++;
-        }
-      } catch (err) {
-        // Silently skip PDF caching errors
-      }
-    }
-    
-    const totalPDFs = officeFiles.length + pdfFiles.length;
-    const msg = `✓ Cached ${items.length} files${totalPDFs > 0 ? ` + ${pdfsCached}/${totalPDFs} PDFs` : ''} for job ${job.Job_Number}`;
-    console.log(msg);
-    logLine('logs/server.log', msg);
-  } catch (err: any) {
-    // Only log if not a token expiration issue
-    if (!err.message?.includes('401') && !err.message?.includes('token')) {
-      logLine('logs/error.log', `File cache skip for job ${job.Job_Number}: ${err.message}`);
-    }
-  }
-}
-
-// Graceful shutdown logging
-const shutdown = (signal: string) => {
-  logLine('logs/server.log', `Shutting down due to ${signal}`);
-  if (fileCachingTimer) clearTimeout(fileCachingTimer);
-  process.exit(0);
-};
-process.on('SIGINT', () => shutdown('SIGINT'));
-process.on('SIGTERM', () => shutdown('SIGTERM'));
-
-export default {
-  port: PORT,
-  fetch: app.fetch,
-};
diff --git a/backend/src/middleware/auth.ts b/backend/src/middleware/auth.ts
deleted file mode 100644
index f0d18f2..0000000
--- a/backend/src/middleware/auth.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Auth Middleware - Token validation
- */
-
-import type { Context, Next } from 'hono';
-import { pocketbaseService } from '../services/pocketbaseService';
-import { HTTP_STATUS, ERROR_MESSAGES } from '../config/constants';
-
-/**
- * Validate auth token and attach user to context
- */
-export async function authMiddleware(c: Context, next: Next): Promise<Response | void> {
-  const authHeader = c.req.header('Authorization');
-
-  if (!authHeader || !authHeader.startsWith('Bearer ')) {
-    return c.json(
-      { error: ERROR_MESSAGES.UNAUTHORIZED },
-      HTTP_STATUS.UNAUTHORIZED
-    );
-  }
-
-  const token = authHeader.slice(7); // Remove 'Bearer '
-
-  try {
-    // Validate token with PocketBase
-    const user = await pocketbaseService.authenticateWithToken(token);
-
-    if (!user) {
-      return c.json(
-        { error: ERROR_MESSAGES.TOKEN_INVALID },
-        HTTP_STATUS.UNAUTHORIZED
-      );
-    }
-
-    // Attach user info to context
-    c.set('userId', user.id);
-    c.set('user', user);
-    c.set('token', token);
-
-    await next();
-  } catch (err) {
-    console.error('[AuthMiddleware] Token validation failed:', err);
-    return c.json(
-      { error: ERROR_MESSAGES.TOKEN_INVALID },
-      HTTP_STATUS.UNAUTHORIZED
-    );
-  }
-}
-
-/**
- * Optional auth - doesn't fail if no token, but attaches user if present
- */
-export async function optionalAuthMiddleware(c: Context, next: Next): Promise<Response | void> {
-  const authHeader = c.req.header('Authorization');
-
-  if (authHeader && authHeader.startsWith('Bearer ')) {
-    const token = authHeader.slice(7);
-
-    try {
-      const user = await pocketbaseService.authenticateWithToken(token);
-      if (user) {
-        c.set('userId', user.id);
-        c.set('user', user);
-        c.set('token', token);
-      }
-    } catch {
-      // Silently continue without auth
-    }
-  }
-
-  await next();
-}
-
-/**
- * Get user ID from context (for use after auth middleware)
- */
-export function getUserId(c: Context): string {
-  const userId = c.get('userId');
-  if (!userId) {
-    throw new Error('User ID not found in context - auth middleware not applied?');
-  }
-  return userId as string;
-}
-
-/**
- * Get user from context
- */
-export function getUser(c: Context): unknown {
-  return c.get('user');
-}
diff --git a/backend/src/middleware/errorHandler.ts b/backend/src/middleware/errorHandler.ts
deleted file mode 100644
index 31869b5..0000000
--- a/backend/src/middleware/errorHandler.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Error Handler Middleware
- */
-
-import type { Context } from 'hono';
-import { HTTP_STATUS, ERROR_MESSAGES } from '../config/constants';
-import { env } from '../config/env';
-
-/** Custom application error */
-export class AppError extends Error {
-  constructor(
-    public statusCode: number,
-    message: string,
-    public code?: string
-  ) {
-    super(message);
-    this.name = 'AppError';
-  }
-}
-
-/** Not found error */
-export class NotFoundError extends AppError {
-  constructor(resource: string = 'Resource') {
-    super(HTTP_STATUS.NOT_FOUND, `${resource} not found`, 'NOT_FOUND');
-  }
-}
-
-/** Unauthorized error */
-export class UnauthorizedError extends AppError {
-  constructor(message: string = ERROR_MESSAGES.UNAUTHORIZED) {
-    super(HTTP_STATUS.UNAUTHORIZED, message, 'UNAUTHORIZED');
-  }
-}
-
-/** Bad request error */
-export class BadRequestError extends AppError {
-  constructor(message: string) {
-    super(HTTP_STATUS.BAD_REQUEST, message, 'BAD_REQUEST');
-  }
-}
-
-/**
- * Global error handler for Hono onError
- */
-export function errorHandler(err: Error, c: Context): Response {
-  console.error('[ErrorHandler]', err);
-
-  // Handle known app errors
-  if (err instanceof AppError) {
-    return c.json(
-      {
-        error: err.message,
-        code: err.code,
-      },
-      err.statusCode as 400 | 401 | 403 | 404 | 500
-    );
-  }
-
-  // Handle unknown errors
-  const message = env.NODE_ENV === 'production'
-    ? ERROR_MESSAGES.INTERNAL_ERROR
-    : err.message;
-
-  return c.json(
-    {
-      error: message,
-      code: 'INTERNAL_ERROR',
-    },
-    HTTP_STATUS.INTERNAL_SERVER_ERROR
-  );
-}
-
-/**
- * Not found handler (for unmatched routes)
- */
-export function notFoundHandler(c: Context): Response {
-  return c.json(
-    {
-      error: 'Endpoint not found',
-      code: 'NOT_FOUND',
-    },
-    HTTP_STATUS.NOT_FOUND
-  );
-}
diff --git a/backend/src/middleware/logger.ts b/backend/src/middleware/logger.ts
deleted file mode 100644
index c0618d0..0000000
--- a/backend/src/middleware/logger.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * Logger Middleware - Request logging
- */
-
-import type { Context, Next } from 'hono';
-import { env } from '../config/env';
-
-type LogLevel = 'debug' | 'info' | 'warn' | 'error';
-
-const LOG_LEVELS: Record<LogLevel, number> = {
-  debug: 0,
-  info: 1,
-  warn: 2,
-  error: 3,
-};
-
-/**
- * Get current log level from env
- */
-function shouldLog(level: LogLevel): boolean {
-  return LOG_LEVELS[level] >= LOG_LEVELS[env.LOG_LEVEL];
-}
-
-/**
- * Format log message
- */
-function formatLog(level: LogLevel, message: string, meta?: Record<string, unknown>): string {
-  const timestamp = new Date().toISOString();
-  const metaStr = meta ? ` ${JSON.stringify(meta)}` : '';
-  return `[${timestamp}] [${level.toUpperCase()}] ${message}${metaStr}`;
-}
-
-/**
- * Logger utility
- */
-export const logger = {
-  debug(message: string, meta?: Record<string, unknown>): void {
-    if (shouldLog('debug')) {
-      console.log(formatLog('debug', message, meta));
-    }
-  },
-
-  info(message: string, meta?: Record<string, unknown>): void {
-    if (shouldLog('info')) {
-      console.log(formatLog('info', message, meta));
-    }
-  },
-
-  warn(message: string, meta?: Record<string, unknown>): void {
-    if (shouldLog('warn')) {
-      console.warn(formatLog('warn', message, meta));
-    }
-  },
-
-  error(message: string, meta?: Record<string, unknown>): void {
-    if (shouldLog('error')) {
-      console.error(formatLog('error', message, meta));
-    }
-  },
-};
-
-/**
- * Request logging middleware
- */
-export async function loggerMiddleware(c: Context, next: Next): Promise<void> {
-  const method = c.req.method;
-  const path = c.req.path;
-  
-  // Skip logging for health check endpoints (UptimeKuma polling)
-  const skipLogging = path === '/version' || path === '/api/health';
-  
-  const start = Date.now();
-  const requestId = crypto.randomUUID().slice(0, 8);
-
-  // Attach request ID to context
-  c.set('requestId', requestId);
-
-  if (!skipLogging) {
-    logger.info(`→ ${method} ${path}`, { requestId });
-  }
-
-  await next();
-
-  if (!skipLogging) {
-    const duration = Date.now() - start;
-    const status = c.res.status;
-
-    const logFn = status >= 500 ? logger.error : status >= 400 ? logger.warn : logger.info;
-    logFn(`← ${method} ${path} ${status} ${duration}ms`, { requestId });
-  }
-}
diff --git a/backend/src/redis-cache.ts b/backend/src/redis-cache.ts
deleted file mode 100644
index f6463a2..0000000
--- a/backend/src/redis-cache.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import Redis from 'ioredis';
-
-// Create Redis client
-const redis = new Redis({
-  host: process.env.REDIS_HOST || 'localhost',
-  port: Number(process.env.REDIS_PORT || 6379),
-  password: process.env.REDIS_PASSWORD,
-  retryStrategy(times) {
-    const delay = Math.min(times * 50, 2000);
-    return delay;
-  },
-  maxRetriesPerRequest: 3,
-  lazyConnect: true,
-});
-
-// Handle connection events
-redis.on('connect', () => {
-  console.log('✓ Redis connected');
-});
-
-redis.on('error', (err) => {
-  console.error('Redis error:', err.message);
-});
-
-redis.on('close', () => {
-  console.log('Redis connection closed');
-});
-
-// Connect to Redis
-(async () => {
-  try {
-    await redis.connect();
-  } catch (err) {
-    console.error('Failed to connect to Redis:', err);
-  }
-})();
-
-/**
- * Get a value from cache
- */
-export async function getCache(key: string): Promise<any | null> {
-  try {
-    const value = await redis.get(key);
-    if (!value) return null;
-    return JSON.parse(value);
-  } catch (err) {
-    console.error(`Cache get error for key "${key}":`, err);
-    return null;
-  }
-}
-
-/**
- * Set a value in cache with TTL in seconds
- */
-export async function setCache(key: string, value: any, ttl: number = 300): Promise<boolean> {
-  try {
-    const serialized = JSON.stringify(value);
-    await redis.setex(key, ttl, serialized);
-    return true;
-  } catch (err) {
-    console.error(`Cache set error for key "${key}":`, err);
-    return false;
-  }
-}
-
-/**
- * Delete a key from cache
- */
-export async function deleteCache(key: string): Promise<boolean> {
-  try {
-    await redis.del(key);
-    return true;
-  } catch (err) {
-    console.error(`Cache delete error for key "${key}":`, err);
-    return false;
-  }
-}
-
-/**
- * Clear all cache keys matching a pattern
- */
-export async function clearCachePattern(pattern: string): Promise<number> {
-  try {
-    const keys = await redis.keys(pattern);
-    if (keys.length === 0) return 0;
-    await redis.del(...keys);
-    return keys.length;
-  } catch (err) {
-    console.error(`Cache clear error for pattern "${pattern}":`, err);
-    return 0;
-  }
-}
-
-/**
- * Check if Redis is connected
- */
-export function isRedisConnected(): boolean {
-  return redis.status === 'ready';
-}
-
-export default redis;
diff --git a/backend/src/routes/auth.ts b/backend/src/routes/auth.ts
deleted file mode 100644
index b32120a..0000000
--- a/backend/src/routes/auth.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Auth Routes - Login, logout, token refresh
- */
-
-import { Hono } from 'hono';
-import { tokenService } from '../services/tokenService';
-import { authMiddleware, getUserId } from '../middleware/auth';
-import { BadRequestError } from '../middleware/errorHandler';
-import type { LoginCallbackRequest, TokenType } from '@shared/types/auth';
-import { HTTP_STATUS } from '../config/constants';
-
-const auth = new Hono();
-
-/**
- * POST /api/auth/login-callback
- * Called after OAuth flow to store tokens in cache
- */
-auth.post('/login-callback', async (c) => {
-  const body = await c.req.json<LoginCallbackRequest>();
-
-  if (!body.pbToken || !body.graphToken || !body.user) {
-    throw new BadRequestError('Missing required token data');
-  }
-
-  // Store tokens in cache
-  await tokenService.storeTokens(
-    body.user.id,
-    body.pbToken,
-    body.graphToken,
-    body.refreshTokenPb ?? '',
-    body.refreshTokenGraph ?? ''
-  );
-
-  // Start background refresh loop
-  tokenService.startRefreshLoop(body.user.id);
-
-  const expiresAt = Date.now() + 3600 * 1000; // 1 hour
-
-  return c.json({
-    success: true,
-    user: body.user,
-    expiresAt_pb: expiresAt,
-    expiresAt_graph: expiresAt,
-  });
-});
-
-/**
- * POST /api/auth/logout
- * Clear tokens and stop refresh loop
- */
-auth.post('/logout', authMiddleware, async (c) => {
-  const userId = getUserId(c);
-
-  await tokenService.clearUserTokens(userId);
-
-  return c.json({ success: true });
-});
-
-/**
- * GET /api/refresh-token
- * Get fresh token from cache or refresh
- */
-auth.get('/refresh-token', authMiddleware, async (c) => {
-  const userId = getUserId(c);
-  const type = c.req.query('type') as TokenType | undefined;
-
-  if (!type || !['pb', 'graph'].includes(type)) {
-    throw new BadRequestError('Invalid token type. Must be "pb" or "graph"');
-  }
-
-  const result = await tokenService.getToken(userId, type);
-
-  if (!result) {
-    return c.json(
-      { error: 'Token not available' },
-      HTTP_STATUS.UNAUTHORIZED
-    );
-  }
-
-  return c.json(result);
-});
-
-/**
- * POST /api/refresh-token
- * Alternative POST endpoint for token refresh
- */
-auth.post('/refresh-token', authMiddleware, async (c) => {
-  const userId = getUserId(c);
-  const body = await c.req.json<{ type: TokenType }>();
-
-  if (!body.type || !['pb', 'graph'].includes(body.type)) {
-    throw new BadRequestError('Invalid token type. Must be "pb" or "graph"');
-  }
-
-  const result = await tokenService.getToken(userId, body.type);
-
-  if (!result) {
-    return c.json(
-      { error: 'Token not available' },
-      HTTP_STATUS.UNAUTHORIZED
-    );
-  }
-
-  return c.json(result);
-});
-
-export default auth;
diff --git a/backend/src/routes/files.ts b/backend/src/routes/files.ts
deleted file mode 100644
index cc77b07..0000000
--- a/backend/src/routes/files.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * Files Routes - SharePoint file operations
- * 
- * Note: Most file operations go through /api/jobs/:id/files
- * This route provides additional file utilities
- */
-
-import { Hono } from 'hono';
-import { graphService } from '../services/graphService';
-import { tokenService } from '../services/tokenService';
-import { pocketbaseService } from '../services/pocketbaseService';
-import { authMiddleware, getUserId } from '../middleware/auth';
-import { BadRequestError, NotFoundError } from '../middleware/errorHandler';
-
-const files = new Hono();
-
-// All file routes require authentication
-files.use('/*', authMiddleware);
-
-/**
- * GET /api/files
- * List files in a job's folder - requires jobId query param
- */
-files.get('/', async (c) => {
-  const userId = getUserId(c);
-  const jobId = c.req.query('jobId');
-
-  if (!jobId) {
-    throw new BadRequestError('jobId query parameter required');
-  }
-
-  // Get job to find site/drive info
-  const job = await pocketbaseService.getJob(jobId);
-  if (!job) {
-    throw new NotFoundError('Job not found');
-  }
-
-  if (!job.site_id || !job.drive_id) {
-    return c.json({ files: [] });
-  }
-
-  const tokenResult = await tokenService.getToken(userId, 'graph');
-  if (!tokenResult) {
-    throw new BadRequestError('Graph token not available');
-  }
-
-  const result = await graphService.getFiles(
-    tokenResult.token, 
-    job.site_id, 
-    job.drive_id, 
-    job.folder_path
-  );
-
-  return c.json({ files: result.files });
-});
-
-/**
- * GET /api/files/download-url
- * Get download URL for a file - requires jobId and fileId
- */
-files.get('/download-url', async (c) => {
-  const userId = getUserId(c);
-  const jobId = c.req.query('jobId');
-  const fileId = c.req.query('fileId');
-
-  if (!jobId || !fileId) {
-    throw new BadRequestError('jobId and fileId query parameters required');
-  }
-
-  // Get job to find site/drive info
-  const job = await pocketbaseService.getJob(jobId);
-  if (!job || !job.site_id || !job.drive_id) {
-    throw new NotFoundError('Job not found or not configured for files');
-  }
-
-  const tokenResult = await tokenService.getToken(userId, 'graph');
-  if (!tokenResult) {
-    throw new BadRequestError('Graph token not available');
-  }
-
-  const url = await graphService.getFileDownloadUrl(
-    tokenResult.token, 
-    job.site_id, 
-    job.drive_id, 
-    fileId
-  );
-
-  if (!url) {
-    throw new NotFoundError('File not found');
-  }
-
-  return c.json({ url });
-});
-
-/**
- * GET /api/files/search
- * Search files in a job's SharePoint site
- */
-files.get('/search', async (c) => {
-  const userId = getUserId(c);
-  const jobId = c.req.query('jobId');
-  const query = c.req.query('q');
-
-  if (!jobId || !query) {
-    throw new BadRequestError('jobId and q query parameters required');
-  }
-
-  // Get job to find site info
-  const job = await pocketbaseService.getJob(jobId);
-  if (!job || !job.site_id) {
-    throw new NotFoundError('Job not found or not configured for files');
-  }
-
-  const tokenResult = await tokenService.getToken(userId, 'graph');
-  if (!tokenResult) {
-    throw new BadRequestError('Graph token not available');
-  }
-
-  const results = await graphService.searchFiles(tokenResult.token, job.site_id, query);
-
-  return c.json({ files: results });
-});
-
-export default files;
diff --git a/backend/src/routes/health.ts b/backend/src/routes/health.ts
deleted file mode 100644
index fbee8b9..0000000
--- a/backend/src/routes/health.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Health Routes - Server health check
- */
-
-import { Hono } from 'hono';
-import { cacheService } from '../services/cacheService';
-
-const health = new Hono();
-
-/**
- * GET /api/health
- * Basic health check
- */
-health.get('/', (c) => {
-  return c.json({
-    status: 'ok',
-    timestamp: new Date().toISOString(),
-    uptime: process.uptime(),
-  });
-});
-
-/**
- * GET /api/health/ready
- * Readiness check (includes cache connection)
- */
-health.get('/ready', async (c) => {
-  const checks: Record<string, boolean> = {
-    server: true,
-    cache: false,
-  };
-
-  // Check cache connection
-  try {
-    await cacheService.get('health-check');
-    checks.cache = true;
-  } catch {
-    checks.cache = false;
-  }
-
-  const allHealthy = Object.values(checks).every(Boolean);
-
-  return c.json(
-    {
-      status: allHealthy ? 'ready' : 'degraded',
-      checks,
-      timestamp: new Date().toISOString(),
-    },
-    allHealthy ? 200 : 503
-  );
-});
-
-/**
- * GET /api/health/live
- * Liveness check (just confirms server is running)
- */
-health.get('/live', (c) => {
-  return c.json({
-    status: 'alive',
-    timestamp: new Date().toISOString(),
-  });
-});
-
-export default health;
diff --git a/backend/src/routes/index.ts b/backend/src/routes/index.ts
deleted file mode 100644
index 34bb6a6..0000000
--- a/backend/src/routes/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Routes Index - Register all routes
- */
-
-import { Hono } from 'hono';
-import auth from './auth';
-import jobs from './jobs';
-import files from './files';
-import health from './health';
-
-export function registerRoutes(app: Hono): void {
-  // Health routes (no /api prefix for k8s probes)
-  app.route('/health', health);
-  app.route('/api/health', health);
-
-  // API routes
-  app.route('/api/auth', auth);
-  app.route('/api/jobs', jobs);
-  app.route('/api/files', files);
-}
diff --git a/backend/src/routes/jobs.ts b/backend/src/routes/jobs.ts
deleted file mode 100644
index 15d71f1..0000000
--- a/backend/src/routes/jobs.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * Jobs Routes - Job listing and details
- */
-
-import { Hono } from 'hono';
-import { jobsService } from '../services/jobsService';
-import { authMiddleware, getUserId } from '../middleware/auth';
-import { BadRequestError, NotFoundError } from '../middleware/errorHandler';
-
-const jobs = new Hono();
-
-// All job routes require authentication
-jobs.use('/*', authMiddleware);
-
-/**
- * GET /api/jobs
- * List all jobs for the user
- */
-jobs.get('/', async (c) => {
-  const page = parseInt(c.req.query('page') || '1');
-  const limit = parseInt(c.req.query('limit') || '50');
-
-  const result = await jobsService.getJobs({ page, perPage: limit });
-
-  return c.json(result);
-});
-
-/**
- * GET /api/jobs/search
- * Search jobs by query
- */
-jobs.get('/search', async (c) => {
-  const query = c.req.query('q');
-
-  if (!query) {
-    throw new BadRequestError('Search query required');
-  }
-
-  const jobs = await jobsService.searchJobs(query);
-
-  return c.json({ jobs, page: 1, perPage: jobs.length, totalItems: jobs.length, totalPages: 1 });
-});
-
-/**
- * GET /api/jobs/:id
- * Get single job with all details
- */
-jobs.get('/:id', async (c) => {
-  const userId = getUserId(c);
-  const jobId = c.req.param('id');
-
-  const result = await jobsService.getJobDetail(jobId, userId);
-
-  if (!result) {
-    throw new NotFoundError('Job not found');
-  }
-
-  return c.json(result);
-});
-
-/**
- * GET /api/jobs/:id/files
- * Get files for a job from SharePoint
- */
-jobs.get('/:id/files', async (c) => {
-  const userId = getUserId(c);
-  const jobId = c.req.param('id');
-
-  const result = await jobsService.getJobFiles(jobId, userId);
-
-  return c.json({ files: result?.files ?? [] });
-});
-
-/**
- * POST /api/jobs/:id/notes
- * Create a sticky note on a job
- */
-jobs.post('/:id/notes', async (c) => {
-  const userId = getUserId(c);
-  const jobId = c.req.param('id');
-  const body = await c.req.json<{ content: string; color?: string }>();
-
-  if (!body.content) {
-    throw new BadRequestError('Note content required');
-  }
-
-  const note = await jobsService.createNote(
-    jobId, 
-    body.content, 
-    userId, 
-    { color: body.color as 'yellow' | 'blue' | 'green' | 'pink' | 'purple' | undefined }
-  );
-
-  return c.json({ note });
-});
-
-/**
- * PUT /api/jobs/:id/notes/:noteId
- * Update a sticky note
- */
-jobs.put('/:id/notes/:noteId', async (c) => {
-  const noteId = c.req.param('noteId');
-  const body = await c.req.json<{ content?: string; color?: 'yellow' | 'blue' | 'green' | 'pink' | 'purple' }>();
-
-  const note = await jobsService.updateNote(noteId, body);
-
-  return c.json({ note });
-});
-
-/**
- * DELETE /api/jobs/:id/notes/:noteId
- * Delete a sticky note
- */
-jobs.delete('/:id/notes/:noteId', async (c) => {
-  const noteId = c.req.param('noteId');
-
-  await jobsService.deleteNote(noteId);
-
-  return c.json({ success: true });
-});
-
-export default jobs;
diff --git a/backend/src/services/cacheService.ts b/backend/src/services/cacheService.ts
deleted file mode 100644
index 7817f6f..0000000
--- a/backend/src/services/cacheService.ts
+++ /dev/null
@@ -1,181 +0,0 @@
-/**
- * Cache Service - Valkey/Redis operations
- */
-
-import Redis from 'ioredis';
-import { env } from '../config/env';
-
-class CacheService {
-  private client: Redis | null = null;
-  private isConnected = false;
-
-  /**
-   * Initialize Redis connection
-   */
-  async connect(): Promise<void> {
-    if (this.client && this.isConnected) return;
-
-    this.client = new Redis({
-      host: env.REDIS_HOST,
-      port: env.REDIS_PORT,
-      password: env.REDIS_PASSWORD || undefined,
-      retryStrategy: (times) => {
-        if (times > 3) {
-          console.error('[Cache] Max retry attempts reached');
-          return null;
-        }
-        return Math.min(times * 200, 2000);
-      },
-      maxRetriesPerRequest: 3,
-    });
-
-    this.client.on('connect', () => {
-      this.isConnected = true;
-      console.log('[Cache] Connected to Redis/Valkey');
-    });
-
-    this.client.on('error', (err) => {
-      console.error('[Cache] Redis error:', err.message);
-      this.isConnected = false;
-    });
-
-    this.client.on('close', () => {
-      this.isConnected = false;
-      console.log('[Cache] Redis connection closed');
-    });
-  }
-
-  /**
-   * Get value from cache
-   */
-  async get<T>(key: string): Promise<T | null> {
-    if (!this.client) {
-      console.warn('[Cache] Not connected, returning null');
-      return null;
-    }
-
-    try {
-      const value = await this.client.get(key);
-      if (!value) return null;
-      return JSON.parse(value) as T;
-    } catch (err) {
-      console.error(`[Cache] Get error for key ${key}:`, err);
-      return null;
-    }
-  }
-
-  /**
-   * Set value in cache with optional TTL
-   */
-  async set<T>(key: string, value: T, ttlSeconds?: number): Promise<boolean> {
-    if (!this.client) {
-      console.warn('[Cache] Not connected, skipping set');
-      return false;
-    }
-
-    try {
-      const serialized = JSON.stringify(value);
-      if (ttlSeconds) {
-        await this.client.setex(key, ttlSeconds, serialized);
-      } else {
-        await this.client.set(key, serialized);
-      }
-      return true;
-    } catch (err) {
-      console.error(`[Cache] Set error for key ${key}:`, err);
-      return false;
-    }
-  }
-
-  /**
-   * Delete key from cache
-   */
-  async del(key: string): Promise<boolean> {
-    if (!this.client) return false;
-
-    try {
-      await this.client.del(key);
-      return true;
-    } catch (err) {
-      console.error(`[Cache] Delete error for key ${key}:`, err);
-      return false;
-    }
-  }
-
-  /**
-   * Delete keys matching pattern
-   */
-  async delPattern(pattern: string): Promise<number> {
-    if (!this.client) return 0;
-
-    try {
-      const keys = await this.client.keys(pattern);
-      if (keys.length === 0) return 0;
-      return await this.client.del(...keys);
-    } catch (err) {
-      console.error(`[Cache] Delete pattern error for ${pattern}:`, err);
-      return 0;
-    }
-  }
-
-  /**
-   * Check if connected
-   */
-  get connected(): boolean {
-    return this.isConnected;
-  }
-
-  /**
-   * Add to set
-   */
-  async sadd(key: string, member: string): Promise<boolean> {
-    if (!this.client) return false;
-    try {
-      await this.client.sadd(key, member);
-      return true;
-    } catch (err) {
-      console.error(`[Cache] SADD error for key ${key}:`, err);
-      return false;
-    }
-  }
-
-  /**
-   * Remove from set
-   */
-  async srem(key: string, member: string): Promise<boolean> {
-    if (!this.client) return false;
-    try {
-      await this.client.srem(key, member);
-      return true;
-    } catch (err) {
-      console.error(`[Cache] SREM error for key ${key}:`, err);
-      return false;
-    }
-  }
-
-  /**
-   * Get all members of set
-   */
-  async smembers(key: string): Promise<string[]> {
-    if (!this.client) return [];
-    try {
-      return await this.client.smembers(key);
-    } catch (err) {
-      console.error(`[Cache] SMEMBERS error for key ${key}:`, err);
-      return [];
-    }
-  }
-
-  /**
-   * Disconnect from Redis
-   */
-  async disconnect(): Promise<void> {
-    if (this.client) {
-      await this.client.quit();
-      this.client = null;
-      this.isConnected = false;
-    }
-  }
-}
-
-export const cacheService = new CacheService();
diff --git a/backend/src/services/graphService.ts b/backend/src/services/graphService.ts
deleted file mode 100644
index 0d87004..0000000
--- a/backend/src/services/graphService.ts
+++ /dev/null
@@ -1,226 +0,0 @@
-/**
- * Graph Service - Microsoft Graph API integration
- */
-
-import { env } from '../config/env';
-import type { JobFile } from '@shared/types/job';
-
-interface GraphTokenResponse {
-  access_token: string;
-  refresh_token: string;
-  expires_in: number;
-  token_type: string;
-}
-
-interface GraphDriveItem {
-  id: string;
-  name: string;
-  size: number;
-  file?: {
-    mimeType: string;
-  };
-  webUrl: string;
-  '@microsoft.graph.downloadUrl'?: string;
-  createdDateTime: string;
-  lastModifiedDateTime: string;
-  createdBy?: {
-    user: {
-      displayName: string;
-      email: string;
-    };
-  };
-  lastModifiedBy?: {
-    user: {
-      displayName: string;
-      email: string;
-    };
-  };
-}
-
-interface GraphListResponse {
-  value: GraphDriveItem[];
-  '@odata.nextLink'?: string;
-}
-
-class GraphService {
-  private readonly tokenEndpoint: string;
-  private readonly graphBaseUrl = 'https://graph.microsoft.com/v1.0';
-
-  constructor() {
-    this.tokenEndpoint = `https://login.microsoftonline.com/${env.MICROSOFT_TENANT}/oauth2/v2.0/token`;
-  }
-
-  /**
-   * Refresh access token using refresh token
-   */
-  async refreshToken(refreshToken: string): Promise<{ accessToken: string; refreshToken: string }> {
-    const params = new URLSearchParams({
-      client_id: env.MICROSOFT_CLIENT_ID,
-      client_secret: env.MICROSOFT_CLIENT_SECRET,
-      refresh_token: refreshToken,
-      grant_type: 'refresh_token',
-      scope: 'offline_access Files.Read Sites.Read.All User.Read',
-    });
-
-    const response = await fetch(this.tokenEndpoint, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-      },
-      body: params.toString(),
-    });
-
-    if (!response.ok) {
-      const error = await response.text();
-      console.error('[Graph] Token refresh failed:', error);
-      throw new Error(`Token refresh failed: ${response.status}`);
-    }
-
-    const data: GraphTokenResponse = await response.json();
-    
-    return {
-      accessToken: data.access_token,
-      refreshToken: data.refresh_token,
-    };
-  }
-
-  /**
-   * Get files from a SharePoint drive folder
-   */
-  async getFiles(
-    accessToken: string,
-    siteId: string,
-    driveId: string,
-    folderPath?: string
-  ): Promise<{ files: JobFile[]; nextLink?: string }> {
-    let endpoint: string;
-    
-    if (folderPath) {
-      endpoint = `${this.graphBaseUrl}/sites/${siteId}/drives/${driveId}/root:/${folderPath}:/children`;
-    } else {
-      endpoint = `${this.graphBaseUrl}/sites/${siteId}/drives/${driveId}/root/children`;
-    }
-
-    const response = await fetch(endpoint, {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-        'Content-Type': 'application/json',
-      },
-    });
-
-    if (!response.ok) {
-      const error = await response.text();
-      console.error('[Graph] Get files failed:', error);
-      throw new Error(`Get files failed: ${response.status}`);
-    }
-
-    const data: GraphListResponse = await response.json();
-
-    const files: JobFile[] = data.value
-      .filter(item => item.file) // Only files, not folders
-      .map(item => ({
-        id: item.id,
-        name: item.name,
-        size: item.size,
-        mimeType: item.file?.mimeType ?? 'application/octet-stream',
-        webUrl: item.webUrl,
-        downloadUrl: item['@microsoft.graph.downloadUrl'],
-        createdDateTime: item.createdDateTime,
-        lastModifiedDateTime: item.lastModifiedDateTime,
-        createdBy: item.createdBy,
-        lastModifiedBy: item.lastModifiedBy,
-      }));
-
-    return {
-      files,
-      nextLink: data['@odata.nextLink'],
-    };
-  }
-
-  /**
-   * Get file content/download URL
-   */
-  async getFileDownloadUrl(
-    accessToken: string,
-    siteId: string,
-    driveId: string,
-    itemId: string
-  ): Promise<string | null> {
-    const endpoint = `${this.graphBaseUrl}/sites/${siteId}/drives/${driveId}/items/${itemId}`;
-
-    const response = await fetch(endpoint, {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-    });
-
-    if (!response.ok) {
-      console.error('[Graph] Get download URL failed:', response.status);
-      return null;
-    }
-
-    const data: GraphDriveItem = await response.json();
-    return data['@microsoft.graph.downloadUrl'] ?? null;
-  }
-
-  /**
-   * Get user profile
-   */
-  async getUserProfile(accessToken: string): Promise<{ displayName: string; mail: string } | null> {
-    const endpoint = `${this.graphBaseUrl}/me`;
-
-    const response = await fetch(endpoint, {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-    });
-
-    if (!response.ok) {
-      console.error('[Graph] Get user profile failed:', response.status);
-      return null;
-    }
-
-    return response.json();
-  }
-
-  /**
-   * Search for files in SharePoint
-   */
-  async searchFiles(
-    accessToken: string,
-    siteId: string,
-    query: string
-  ): Promise<JobFile[]> {
-    const endpoint = `${this.graphBaseUrl}/sites/${siteId}/drive/root/search(q='${encodeURIComponent(query)}')`;
-
-    const response = await fetch(endpoint, {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-    });
-
-    if (!response.ok) {
-      console.error('[Graph] Search files failed:', response.status);
-      return [];
-    }
-
-    const data: GraphListResponse = await response.json();
-
-    return data.value
-      .filter(item => item.file)
-      .map(item => ({
-        id: item.id,
-        name: item.name,
-        size: item.size,
-        mimeType: item.file?.mimeType ?? 'application/octet-stream',
-        webUrl: item.webUrl,
-        downloadUrl: item['@microsoft.graph.downloadUrl'],
-        createdDateTime: item.createdDateTime,
-        lastModifiedDateTime: item.lastModifiedDateTime,
-        createdBy: item.createdBy,
-        lastModifiedBy: item.lastModifiedBy,
-      }));
-  }
-}
-
-export const graphService = new GraphService();
diff --git a/backend/src/services/jobsService.ts b/backend/src/services/jobsService.ts
deleted file mode 100644
index f906989..0000000
--- a/backend/src/services/jobsService.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * Jobs Service - Business logic for jobs
- */
-
-import { pocketbaseService } from './pocketbaseService';
-import { graphService } from './graphService';
-import { cacheService } from './cacheService';
-import { tokenService } from './tokenService';
-import { CACHE_KEYS } from '@shared/constants';
-import type { Job, JobFile, StickyNote, JobListResponse, JobDetailResponse, JobFilesResponse } from '@shared/types/job';
-
-/** Cache TTL for job files (5 minutes) */
-const FILES_CACHE_TTL = 300;
-
-class JobsService {
-  /**
-   * Get list of all jobs
-   */
-  async getJobs(options?: {
-    page?: number;
-    perPage?: number;
-    filter?: string;
-    sort?: string;
-  }): Promise<JobListResponse> {
-    const result = await pocketbaseService.getJobs(options);
-
-    return {
-      jobs: result.items,
-      page: options?.page ?? 1,
-      perPage: options?.perPage ?? 50,
-      totalItems: result.totalItems,
-      totalPages: result.totalPages,
-    };
-  }
-
-  /**
-   * Get job detail with files and notes
-   */
-  async getJobDetail(jobId: string, userId: string): Promise<JobDetailResponse | null> {
-    // Get job from PocketBase
-    const job = await pocketbaseService.getJob(jobId);
-    if (!job) return null;
-
-    // Get notes from PocketBase
-    const notes = await pocketbaseService.getJobNotes(jobId);
-
-    // Get files from SharePoint (if job has site/drive configured)
-    let files: JobFile[] = [];
-    if (job.site_id && job.drive_id) {
-      const filesResult = await this.getJobFiles(jobId, userId);
-      files = filesResult?.files ?? [];
-    }
-
-    return { job, files, notes };
-  }
-
-  /**
-   * Get files for a job from SharePoint
-   */
-  async getJobFiles(jobId: string, userId: string): Promise<JobFilesResponse | null> {
-    // Try cache first
-    const cached = await cacheService.get<JobFilesResponse>(CACHE_KEYS.JOB_FILES(jobId));
-    if (cached) {
-      return { ...cached, cached: true };
-    }
-
-    // Get job to find site/drive info
-    const job = await pocketbaseService.getJob(jobId);
-    if (!job || !job.site_id || !job.drive_id) {
-      return { jobId, files: [], cached: false };
-    }
-
-    // Get Graph token for user
-    const tokenResult = await tokenService.getToken(userId, 'graph');
-    if (!tokenResult) {
-      console.error('[JobsService] No Graph token available for user', userId);
-      return { jobId, files: [], cached: false };
-    }
-
-    try {
-      // Fetch files from SharePoint
-      const result = await graphService.getFiles(
-        tokenResult.token,
-        job.site_id,
-        job.drive_id,
-        job.folder_path
-      );
-
-      const response: JobFilesResponse = {
-        jobId,
-        files: result.files,
-        nextLink: result.nextLink,
-        cached: false,
-      };
-
-      // Cache the result
-      await cacheService.set(CACHE_KEYS.JOB_FILES(jobId), response, FILES_CACHE_TTL);
-
-      return response;
-    } catch (err) {
-      console.error('[JobsService] Failed to get files for job', jobId, err);
-      return { jobId, files: [], cached: false };
-    }
-  }
-
-  /**
-   * Search jobs by name or number
-   */
-  async searchJobs(query: string): Promise<Job[]> {
-    const result = await pocketbaseService.getJobs({
-      filter: `job_name ~ "${query}" || job_number ~ "${query}"`,
-      perPage: 20,
-    });
-    return result.items;
-  }
-
-  /**
-   * Get job notes
-   */
-  async getJobNotes(jobId: string): Promise<StickyNote[]> {
-    return pocketbaseService.getJobNotes(jobId);
-  }
-
-  /**
-   * Create a note for a job
-   */
-  async createNote(
-    jobId: string,
-    content: string,
-    userId: string,
-    options?: { color?: StickyNote['color']; position_x?: number; position_y?: number }
-  ): Promise<StickyNote | null> {
-    return pocketbaseService.createNote({
-      job_id: jobId,
-      content,
-      color: options?.color ?? 'yellow',
-      position_x: options?.position_x ?? 0,
-      position_y: options?.position_y ?? 0,
-      created_by: userId,
-    });
-  }
-
-  /**
-   * Update a note
-   */
-  async updateNote(noteId: string, data: Partial<StickyNote>): Promise<StickyNote | null> {
-    return pocketbaseService.updateNote(noteId, data);
-  }
-
-  /**
-   * Delete a note
-   */
-  async deleteNote(noteId: string): Promise<boolean> {
-    return pocketbaseService.deleteNote(noteId);
-  }
-
-  /**
-   * Invalidate file cache for a job
-   */
-  async invalidateFileCache(jobId: string): Promise<void> {
-    await cacheService.del(CACHE_KEYS.JOB_FILES(jobId));
-  }
-}
-
-export const jobsService = new JobsService();
diff --git a/backend/src/services/pocketbaseService.ts b/backend/src/services/pocketbaseService.ts
deleted file mode 100644
index 9ee9e82..0000000
--- a/backend/src/services/pocketbaseService.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-/**
- * PocketBase Service - PocketBase integration
- */
-
-import PocketBase from 'pocketbase';
-import { env } from '../config/env';
-import type { PocketBaseUser } from '@shared/types/auth';
-import type { Job, StickyNote } from '@shared/types/job';
-
-class PocketBaseService {
-  private client: PocketBase;
-
-  constructor() {
-    this.client = new PocketBase(env.POCKETBASE_URL);
-  }
-
-  /**
-   * Get PocketBase client instance
-   */
-  get pb(): PocketBase {
-    return this.client;
-  }
-
-  /**
-   * Authenticate with token
-   */
-  async authenticateWithToken(token: string): Promise<PocketBaseUser | null> {
-    try {
-      this.client.authStore.save(token, null);
-      const authData = await this.client.collection('users').authRefresh();
-      return authData.record as unknown as PocketBaseUser;
-    } catch (err) {
-      console.error('[PocketBase] Auth with token failed:', err);
-      return null;
-    }
-  }
-
-  /**
-   * Refresh token using refresh token
-   */
-  async refreshToken(refreshToken: string): Promise<{ token: string; refreshToken: string }> {
-    try {
-      // PocketBase SDK handles refresh internally
-      // We need to set the token first and then refresh
-      this.client.authStore.save(refreshToken, null);
-      const authData = await this.client.collection('users').authRefresh();
-      
-      return {
-        token: authData.token,
-        refreshToken: authData.token, // PocketBase uses same token for refresh
-      };
-    } catch (err) {
-      console.error('[PocketBase] Token refresh failed:', err);
-      throw err;
-    }
-  }
-
-  /**
-   * Get user by ID
-   */
-  async getUser(userId: string): Promise<PocketBaseUser | null> {
-    try {
-      const record = await this.client.collection('users').getOne(userId);
-      return record as unknown as PocketBaseUser;
-    } catch (err) {
-      console.error('[PocketBase] Get user failed:', err);
-      return null;
-    }
-  }
-
-  /**
-   * Get all jobs (with optional filters)
-   */
-  async getJobs(options?: {
-    page?: number;
-    perPage?: number;
-    filter?: string;
-    sort?: string;
-  }): Promise<{ items: Job[]; totalItems: number; totalPages: number }> {
-    try {
-      const result = await this.client.collection('jobs').getList(
-        options?.page ?? 1,
-        options?.perPage ?? 50,
-        {
-          filter: options?.filter,
-          sort: options?.sort ?? '-created',
-        }
-      );
-      
-      return {
-        items: result.items as unknown as Job[],
-        totalItems: result.totalItems,
-        totalPages: result.totalPages,
-      };
-    } catch (err) {
-      console.error('[PocketBase] Get jobs failed:', err);
-      throw err;
-    }
-  }
-
-  /**
-   * Get single job by ID
-   */
-  async getJob(jobId: string): Promise<Job | null> {
-    try {
-      const record = await this.client.collection('jobs').getOne(jobId);
-      return record as unknown as Job;
-    } catch (err) {
-      console.error('[PocketBase] Get job failed:', err);
-      return null;
-    }
-  }
-
-  /**
-   * Get notes for a job
-   */
-  async getJobNotes(jobId: string): Promise<StickyNote[]> {
-    try {
-      const result = await this.client.collection('sticky_notes').getFullList({
-        filter: `job_id = "${jobId}"`,
-        sort: '-created',
-      });
-      return result as unknown as StickyNote[];
-    } catch (err) {
-      console.error('[PocketBase] Get job notes failed:', err);
-      return [];
-    }
-  }
-
-  /**
-   * Create a sticky note
-   */
-  async createNote(note: Omit<StickyNote, 'id' | 'created' | 'updated'>): Promise<StickyNote | null> {
-    try {
-      const record = await this.client.collection('sticky_notes').create(note);
-      return record as unknown as StickyNote;
-    } catch (err) {
-      console.error('[PocketBase] Create note failed:', err);
-      return null;
-    }
-  }
-
-  /**
-   * Update a sticky note
-   */
-  async updateNote(noteId: string, data: Partial<StickyNote>): Promise<StickyNote | null> {
-    try {
-      const record = await this.client.collection('sticky_notes').update(noteId, data);
-      return record as unknown as StickyNote;
-    } catch (err) {
-      console.error('[PocketBase] Update note failed:', err);
-      return null;
-    }
-  }
-
-  /**
-   * Delete a sticky note
-   */
-  async deleteNote(noteId: string): Promise<boolean> {
-    try {
-      await this.client.collection('sticky_notes').delete(noteId);
-      return true;
-    } catch (err) {
-      console.error('[PocketBase] Delete note failed:', err);
-      return false;
-    }
-  }
-
-  /**
-   * Clear auth state
-   */
-  clearAuth(): void {
-    this.client.authStore.clear();
-  }
-}
-
-export const pocketbaseService = new PocketBaseService();
diff --git a/backend/src/services/tokenService.ts b/backend/src/services/tokenService.ts
deleted file mode 100644
index 7ca82f9..0000000
--- a/backend/src/services/tokenService.ts
+++ /dev/null
@@ -1,271 +0,0 @@
-/**
- * Token Service - Token refresh and management
- */
-
-import { cacheService } from './cacheService';
-import { pocketbaseService } from './pocketbaseService';
-import { graphService } from './graphService';
-import { CACHE_KEYS, TOKEN_TTL_SECONDS, REFRESH_TOKEN_TTL_SECONDS, TOKEN_REFRESH_INTERVAL_MS } from '@shared/constants';
-import type { CachedToken, TokenType, TokenRefreshResponse } from '@shared/types/auth';
-import { env } from '../config/env';
-
-class TokenService {
-  private refreshLoops = new Map<string, Timer>();
-  private activeUsers = new Set<string>();
-
-  /**
-   * Check if token is expiring soon (within buffer)
-   */
-  isExpiring(expiresAt: number): boolean {
-    return expiresAt - Date.now() < env.TOKEN_EXPIRY_BUFFER_MS;
-  }
-
-  /**
-   * Store tokens in cache after login
-   */
-  async storeTokens(
-    userId: string,
-    pbToken: string,
-    graphToken: string,
-    refreshPb: string,
-    refreshGraph: string
-  ): Promise<void> {
-    const expiresAt = Date.now() + TOKEN_TTL_SECONDS * 1000;
-
-    // Store PocketBase token
-    await cacheService.set<CachedToken>(
-      CACHE_KEYS.TOKEN_PB(userId),
-      {
-        token: pbToken,
-        refresh_token: refreshPb,
-        expiresAt: expiresAt,
-        userId: userId,
-      },
-      TOKEN_TTL_SECONDS
-    );
-
-    // Store Graph token
-    await cacheService.set<CachedToken>(
-      CACHE_KEYS.TOKEN_GRAPH(userId),
-      {
-        token: graphToken,
-        refresh_token: refreshGraph,
-        expiresAt: expiresAt,
-        userId: userId,
-      },
-      TOKEN_TTL_SECONDS
-    );
-
-    // Store refresh tokens with longer TTL
-    await cacheService.set(
-      CACHE_KEYS.REFRESH_PB(userId),
-      refreshPb,
-      REFRESH_TOKEN_TTL_SECONDS
-    );
-
-    await cacheService.set(
-      CACHE_KEYS.REFRESH_GRAPH(userId),
-      refreshGraph,
-      REFRESH_TOKEN_TTL_SECONDS
-    );
-
-    // Track active user
-    this.activeUsers.add(userId);
-    await cacheService.sadd(CACHE_KEYS.ACTIVE_USERS, userId);
-
-    console.log(`[TokenService] Tokens stored for user ${userId}`);
-  }
-
-  /**
-   * Get fresh token for user (from cache or refresh)
-   */
-  async getToken(userId: string, type: TokenType): Promise<TokenRefreshResponse | null> {
-    const cacheKey = type === 'pb' 
-      ? CACHE_KEYS.TOKEN_PB(userId)
-      : CACHE_KEYS.TOKEN_GRAPH(userId);
-
-    // Try to get from cache
-    const cached = await cacheService.get<CachedToken>(cacheKey);
-
-    if (cached && !this.isExpiring(cached.expiresAt)) {
-      return {
-        token: cached.token,
-        expiresAt: cached.expiresAt,
-        source: 'cache',
-        type,
-      };
-    }
-
-    // Need to refresh
-    const refreshed = await this.refreshToken(userId, type);
-    if (refreshed) {
-      return {
-        token: refreshed.token,
-        expiresAt: refreshed.expiresAt,
-        source: 'refreshed',
-        type,
-      };
-    }
-
-    // Return stale token if available (better than nothing for field workers)
-    if (cached) {
-      console.warn(`[TokenService] Returning stale ${type} token for user ${userId}`);
-      return {
-        token: cached.token,
-        expiresAt: cached.expiresAt,
-        source: 'cache',
-        type,
-      };
-    }
-
-    return null;
-  }
-
-  /**
-   * Refresh a specific token type
-   */
-  async refreshToken(userId: string, type: TokenType): Promise<CachedToken | null> {
-    const refreshKey = type === 'pb'
-      ? CACHE_KEYS.REFRESH_PB(userId)
-      : CACHE_KEYS.REFRESH_GRAPH(userId);
-
-    const refreshToken = await cacheService.get<string>(refreshKey);
-    if (!refreshToken) {
-      console.error(`[TokenService] No refresh token for ${type} user ${userId}`);
-      return null;
-    }
-
-    try {
-      let newToken: string;
-      let newRefreshToken: string;
-
-      if (type === 'pb') {
-        const result = await pocketbaseService.refreshToken(refreshToken);
-        newToken = result.token;
-        newRefreshToken = result.refreshToken;
-      } else {
-        const result = await graphService.refreshToken(refreshToken);
-        newToken = result.accessToken;
-        newRefreshToken = result.refreshToken;
-      }
-
-      const expiresAt = Date.now() + TOKEN_TTL_SECONDS * 1000;
-      const cachedToken: CachedToken = {
-        token: newToken,
-        refresh_token: newRefreshToken,
-        expiresAt: expiresAt,
-        userId: userId,
-      };
-
-      // Update cache
-      const cacheKey = type === 'pb'
-        ? CACHE_KEYS.TOKEN_PB(userId)
-        : CACHE_KEYS.TOKEN_GRAPH(userId);
-
-      await cacheService.set(cacheKey, cachedToken, TOKEN_TTL_SECONDS);
-      await cacheService.set(refreshKey, newRefreshToken, REFRESH_TOKEN_TTL_SECONDS);
-
-      console.log(`[TokenService] Refreshed ${type} token for user ${userId}`);
-      return cachedToken;
-    } catch (err) {
-      console.error(`[TokenService] Failed to refresh ${type} token for user ${userId}:`, err);
-      return null;
-    }
-  }
-
-  /**
-   * Start background refresh loop for a user
-   */
-  startRefreshLoop(userId: string): void {
-    if (this.refreshLoops.has(userId)) {
-      console.log(`[TokenService] Refresh loop already running for ${userId}`);
-      return;
-    }
-
-    const loop = setInterval(async () => {
-      await this.refreshUserTokens(userId);
-    }, TOKEN_REFRESH_INTERVAL_MS);
-
-    this.refreshLoops.set(userId, loop);
-    this.activeUsers.add(userId);
-    console.log(`[TokenService] Started refresh loop for user ${userId}`);
-  }
-
-  /**
-   * Stop background refresh loop for a user
-   */
-  stopRefreshLoop(userId: string): void {
-    const loop = this.refreshLoops.get(userId);
-    if (loop) {
-      clearInterval(loop);
-      this.refreshLoops.delete(userId);
-      this.activeUsers.delete(userId);
-      console.log(`[TokenService] Stopped refresh loop for user ${userId}`);
-    }
-  }
-
-  /**
-   * Refresh all tokens for a user (called by background loop)
-   */
-  private async refreshUserTokens(userId: string): Promise<void> {
-    console.log(`[TokenService] Background refresh for user ${userId}`);
-
-    // Check PocketBase token
-    const pbToken = await cacheService.get<CachedToken>(CACHE_KEYS.TOKEN_PB(userId));
-    if (pbToken && this.isExpiring(pbToken.expiresAt)) {
-      await this.refreshToken(userId, 'pb');
-    }
-
-    // Check Graph token
-    const graphToken = await cacheService.get<CachedToken>(CACHE_KEYS.TOKEN_GRAPH(userId));
-    if (graphToken && this.isExpiring(graphToken.expiresAt)) {
-      await this.refreshToken(userId, 'graph');
-    }
-  }
-
-  /**
-   * Clear all tokens for a user (logout)
-   */
-  async clearUserTokens(userId: string): Promise<void> {
-    this.stopRefreshLoop(userId);
-
-    await Promise.all([
-      cacheService.del(CACHE_KEYS.TOKEN_PB(userId)),
-      cacheService.del(CACHE_KEYS.TOKEN_GRAPH(userId)),
-      cacheService.del(CACHE_KEYS.REFRESH_PB(userId)),
-      cacheService.del(CACHE_KEYS.REFRESH_GRAPH(userId)),
-    ]);
-
-    await cacheService.srem(CACHE_KEYS.ACTIVE_USERS, userId);
-    console.log(`[TokenService] Cleared all tokens for user ${userId}`);
-  }
-
-  /**
-   * Restore refresh loops for active users (on server restart)
-   */
-  async restoreRefreshLoops(): Promise<void> {
-    const activeUsers = await cacheService.smembers(CACHE_KEYS.ACTIVE_USERS);
-    
-    for (const userId of activeUsers) {
-      // Check if user still has valid tokens
-      const pbToken = await cacheService.get<CachedToken>(CACHE_KEYS.TOKEN_PB(userId));
-      if (pbToken) {
-        this.startRefreshLoop(userId);
-      } else {
-        // Remove stale user
-        await cacheService.srem(CACHE_KEYS.ACTIVE_USERS, userId);
-      }
-    }
-
-    console.log(`[TokenService] Restored ${this.refreshLoops.size} refresh loops`);
-  }
-
-  /**
-   * Get active user count
-   */
-  get activeUserCount(): number {
-    return this.activeUsers.size;
-  }
-}
-
-export const tokenService = new TokenService();
diff --git a/bun.lock b/bun.lock
deleted file mode 100644
index 7d09b06..0000000
--- a/bun.lock
+++ /dev/null
@@ -1,70 +0,0 @@
-{
-  "lockfileVersion": 1,
-  "configVersion": 1,
-  "workspaces": {
-    "": {
-      "name": "job-info-prod",
-      "dependencies": {
-        "dotenv": "^17.2.3",
-        "hono": "^4.10.8",
-        "ioredis": "^5.3.2",
-        "pocketbase": "^0.26.5",
-      },
-      "devDependencies": {
-        "@types/bun": "latest",
-        "postcss": "^8.4.32",
-        "tailwindcss": "^4.1.18",
-        "typescript": "^5.3.3",
-      },
-    },
-  },
-  "packages": {
-    "@ioredis/commands": ["@ioredis/commands@1.4.0", "", {}, "sha512-aFT2yemJJo+TZCmieA7qnYGQooOS7QfNmYrzGtsYd3g9j5iDP8AimYYAesf79ohjbLG12XxC4nG5DyEnC88AsQ=="],
-
-    "@types/bun": ["@types/bun@1.3.5", "", { "dependencies": { "bun-types": "1.3.5" } }, "sha512-RnygCqNrd3srIPEWBd5LFeUYG7plCoH2Yw9WaZGyNmdTEei+gWaHqydbaIRkIkcbXwhBT94q78QljxN0Sk838w=="],
-
-    "@types/node": ["@types/node@25.0.3", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA=="],
-
-    "bun-types": ["bun-types@1.3.5", "", { "dependencies": { "@types/node": "*" } }, "sha512-inmAYe2PFLs0SUbFOWSVD24sg1jFlMPxOjOSSCYqUgn4Hsc3rDc7dFvfVYjFPNHtov6kgUeulV4SxbuIV/stPw=="],
-
-    "cluster-key-slot": ["cluster-key-slot@1.1.2", "", {}, "sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA=="],
-
-    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
-
-    "denque": ["denque@2.1.0", "", {}, "sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw=="],
-
-    "dotenv": ["dotenv@17.2.3", "", {}, "sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w=="],
-
-    "hono": ["hono@4.11.3", "", {}, "sha512-PmQi306+M/ct/m5s66Hrg+adPnkD5jiO6IjA7WhWw0gSBSo1EcRegwuI1deZ+wd5pzCGynCcn2DprnE4/yEV4w=="],
-
-    "ioredis": ["ioredis@5.8.2", "", { "dependencies": { "@ioredis/commands": "1.4.0", "cluster-key-slot": "^1.1.0", "debug": "^4.3.4", "denque": "^2.1.0", "lodash.defaults": "^4.2.0", "lodash.isarguments": "^3.1.0", "redis-errors": "^1.2.0", "redis-parser": "^3.0.0", "standard-as-callback": "^2.1.0" } }, "sha512-C6uC+kleiIMmjViJINWk80sOQw5lEzse1ZmvD+S/s8p8CWapftSaC+kocGTx6xrbrJ4WmYQGC08ffHLr6ToR6Q=="],
-
-    "lodash.defaults": ["lodash.defaults@4.2.0", "", {}, "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ=="],
-
-    "lodash.isarguments": ["lodash.isarguments@3.1.0", "", {}, "sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg=="],
-
-    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
-
-    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
-
-    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
-
-    "pocketbase": ["pocketbase@0.26.5", "", {}, "sha512-SXcq+sRvVpNxfLxPB1C+8eRatL7ZY4o3EVl/0OdE3MeR9fhPyZt0nmmxLqYmkLvXCN9qp3lXWV/0EUYb3MmMXQ=="],
-
-    "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
-
-    "redis-errors": ["redis-errors@1.2.0", "", {}, "sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w=="],
-
-    "redis-parser": ["redis-parser@3.0.0", "", { "dependencies": { "redis-errors": "^1.0.0" } }, "sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A=="],
-
-    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
-
-    "standard-as-callback": ["standard-as-callback@2.1.0", "", {}, "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A=="],
-
-    "tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],
-
-    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
-
-    "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
-  }
-}
diff --git a/frontend/assets/CCwhiteApp.png b/frontend/assets/CCwhiteApp.png
deleted file mode 100644
index e4ef4f1..0000000
Binary files a/frontend/assets/CCwhiteApp.png and /dev/null differ
diff --git a/frontend/assets/DailyCheck.png b/frontend/assets/DailyCheck.png
deleted file mode 100644
index 200eba4..0000000
Binary files a/frontend/assets/DailyCheck.png and /dev/null differ
diff --git a/frontend/assets/PalmIsland.png b/frontend/assets/PalmIsland.png
deleted file mode 100644
index e31ab51..0000000
Binary files a/frontend/assets/PalmIsland.png and /dev/null differ
diff --git a/frontend/assets/lightbulb.jpg b/frontend/assets/lightbulb.jpg
deleted file mode 100644
index f75425e..0000000
Binary files a/frontend/assets/lightbulb.jpg and /dev/null differ
diff --git a/frontend/auth.js b/frontend/auth.js
deleted file mode 100644
index 323c570..0000000
--- a/frontend/auth.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// PocketBase auth bootstrap shared by pages
-(function (global) {
-  const pb = new PocketBase('https://pocketbase.ccllc.pro');
-
-  function authHeaders() {
-    if (pb.authStore.isValid && pb.authStore.token) {
-      return { Authorization: `Bearer ${pb.authStore.token}` };
-    }
-    return {};
-  }
-
-  function getDisplayName() {
-    const model = pb.authStore.model || {};
-    return (
-      model.display_name ||
-      model.name ||
-      model.email ||
-      model.username ||
-      'Unknown'
-    );
-  }
-
-  function getEmail() {
-    const model = pb.authStore.model || {};
-    // Prefer email, but fall back to username if email missing
-    return model.email || model.username || null;
-  }
-
-  async function ensureAuth() {
-    if (pb.authStore.isValid) return true;
-    const path = new URL(window.location.href).pathname;
-    if (!path.endsWith('signin.html')) {
-      window.location.href = 'signin.html';
-    }
-    return false;
-  }
-
-  global.Auth = { pb, authHeaders, ensureAuth, getDisplayName, getEmail };
-})(window);
diff --git a/frontend/index.html b/frontend/index.html
deleted file mode 100644
index 2b0e3ed..0000000
--- a/frontend/index.html
+++ /dev/null
@@ -1,2965 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
-<title>Job Info — Vanilla JS</title>
-<!-- Preload critical images for instant display -->
-<link rel="preload" href="assets/CCwhiteApp.png" as="image">
-<link rel="preload" href="assets/lightbulb.jpg" as="image">
-<link rel="preload" href="assets/PalmIsland.png" as="image">
-<link rel="preload" href="assets/DailyCheck.png" as="image">
-<style>
-  html, body {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-  }
-</style>
-<script src="https://cdn.tailwindcss.com"></script>  <!-- Suppress Tailwind CDN warning for now -->
-  <script>
-    if (window.tailwind) window.tailwind.config = { corePlugins: { preflight: true } }
-  </script><script src="https://cdn.jsdelivr.net/npm/pocketbase@0.26.5/dist/pocketbase.umd.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
-<script src="auth.js"></script>
-<script>
-  // Live reload for development
-  (function() {
-    let lastCheck = Date.now();
-    setInterval(async () => {
-      try {
-        const res = await fetch('/version?t=' + Date.now(), { cache: 'no-store' });
-        if (res.ok) {
-          const data = await res.json();
-          const currentVersion = sessionStorage.getItem('appVersion');
-          if (currentVersion && data.version && currentVersion !== data.version) {
-            console.log('Changes detected, reloading...');
-            window.location.reload();
-          }
-          sessionStorage.setItem('appVersion', data.version || '');
-        }
-      } catch (e) {
-        console.log('Live reload check failed:', e);
-      }
-    }, 1000);
-  })();
-</script>
-</head>
-<body class="font-sans bg-gray-100 m-0 text-gray-900 overflow-hidden touch-pan-y h-screen flex flex-col">
-  <div class="max-w-full md:max-w-2xl mx-auto p-4 sm:p-3 text-[17px] flex flex-col flex-1 overflow-hidden">
-  <div class="w-full bg-gray-400 border border-gray-300 rounded-lg px-0.5 py-0.5 mb-3 shadow-sm flex items-center justify-between">
-    <div class="flex items-center gap-2">
-      <div class="h-6 w-[186px] rounded-lg bg-black flex items-center justify-center overflow-hidden">
-        <img src="assets/CCwhiteApp.png" alt="CC" class="h-6 w-auto object-cover scale-80" loading="lazy">
-      </div>
-    </div>
-    <div class="flex items-center gap-0">
-      <a id="ideaLink" href="https://idea-form.ccllc.pro" target="_blank" rel="noopener" class="h-6 w-12 rounded-3xl overflow-hidden flex items-center justify-center bg-transparent hover:bg-gray-50/20" title="Submit an idea">
-        <img src="assets/lightbulb.jpg" alt="Idea" class="h-full w-auto object-cover" loading="lazy">
-      </a>
-      <a id="assetInventoryLink" href="https://czflex.sharepoint.com/:x:/r/sites/Team/Shared%20Documents/General/ALFONSO/Comprehensive%20Asset%20Inventory.xlsx?d=w9005440917e945d680e9885f33ccf2ba&csf=1&web=1&e=rifTzf" target="_blank" rel="noopener" class="h-6 w-12 rounded-3xl overflow-hidden flex items-center justify-center bg-transparent hover:bg-gray-50/20" title="Open Asset Inventory">
-        <img src="assets/PalmIsland.png" alt="Palm Island" class="h-full w-auto object-cover" loading="lazy">
-      </a>
-      <a id="operationsLink" href="https://czflex.sharepoint.com/:x:/r/sites/Team/Shared%20Documents/General/ALFONSO/GM%20Rollup.xlsx?d=w3e59f37ee1c04cb798e14f86bd87c968&csf=1&web=1&e=vCnfbR" target="_blank" rel="noopener" class="h-6 w-12 rounded-3xl overflow-hidden flex items-center justify-center bg-transparent hover:bg-gray-50/20" title="Open Operations Dashboard">
-        <img src="assets/DailyCheck.png" alt="Operations Dashboard" class="h-full w-auto object-cover" loading="lazy">
-      </a>
-    </div>
-  </div>
-  <h1 class="m-0 mb-3 text-center text-blue-600 text-[33px] font-bold">Job Info</h1>
-
-  <div class="relative mb-2">
-    <input id="searchBox" placeholder="Search jobs (just start typing or use voice)" class="w-full p-2.5 pr-12 rounded-lg border border-gray-300 text-lg placeholder:text-gray-400">
-    <button id="voiceSearchBtn" class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100 transition-colors" title="Voice search">
-      <svg id="micIcon" class="w-5 h-5 text-gray-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path>
-      </svg>
-      <svg id="micRecordingIcon" class="hidden w-5 h-5 text-red-600 animate-pulse" fill="currentColor" viewBox="0 0 24 24">
-        <circle cx="12" cy="12" r="8"></circle>
-      </svg>
-    </button>
-  </div>
-
-  <button id="filterToggle" class="bg-blue-600 text-white py-2 px-2.5 rounded-lg border-none cursor-pointer mb-2 inline-block min-w-[140px]">Show Filters</button>
-
-  <div id="filtersPanel" class="hidden bg-white border border-gray-200 rounded-lg p-2.5 mb-2.5">
-    <div class="mb-2 text-sm">
-      <strong>Division</strong><br/>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-division" value="C#"> Commercial</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-division" value="R#"> Residential</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-division" value="S#"> Small Jobs</label>
-    </div>
-
-    <div class="mb-2 text-sm">
-      <strong>Active</strong><br/>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-active" value="Yes"> Yes</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-active" value="No"> No</label>
-    </div>
-
-    <div class="mb-2 text-sm">
-      <strong>Estimator</strong><br/>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-estimator" value="Steve Brewer"> Steve</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-estimator" value="Beth Cardoza"> Beth</label>
-    </div>
-
-    <div class="mb-2 text-sm">
-      <strong>Status</strong><br/>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-status" value="Estimating"> Estimating</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-status" value="In Progress"> In Progress</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-status" value="Awarded"> Awarded</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-status" value="Billed (In Progress)"> Billed (In Progress)</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-status" value="Not Bidding"> Not Bidding</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-status" value="Est Sent"> Est Sent</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-status" value="Not Awarded"> Not Awarded</label>
-    </div>
-    <button id="clearFilters" class="bg-gray-500 text-white py-2 px-2 rounded-lg border-none">Clear Filters</button>
-  </div>
-
-  <div id="results" aria-live="polite" class="flex flex-col gap-3 flex-1 overflow-auto p-0"></div>
-  <div class="text-xs text-gray-500 mt-5 pt-3 border-t border-gray-200 flex items-center justify-between">
-    <span id="userEmail" class="truncate"></span>
-    <div class="flex items-center gap-2">
-      <button id="signOutBtn" class="px-2 py-1 text-[11px] bg-gray-200 hover:bg-gray-300 rounded border border-gray-300 text-gray-700">Sign out</button>
-      <span id="versionLabel">v1.0.0-beta2</span>
-    </div>
-  </div>
-</div>
-
-<!-- Detail Modal -->
-<div id="detailModal" role="dialog" aria-modal="true" class="hidden flex fixed inset-0 bg-black/45 items-start justify-center pt-[2vh] z-[999]">
-  <div id="detailBox" class="m-0 bg-white rounded-lg max-w-[380px] w-[92%] h-[calc(90vh-30px)] max-h-[926px] overflow-hidden flex flex-col">
-    <!-- INFO Tab Content -->
-    <div id="infoContent" class="flex-1 overflow-hidden flex flex-col min-h-0">
-      <div id="infoHeading" class="bg-blue-600 text-white text-center py-2 text-sm font-semibold rounded-t-lg flex-shrink-0">INFO</div>
-      <div class="px-3 pt-2 pb-1 flex-1 overflow-auto">
-        <div class="mt-0 w-full mb-1 space-y-2" id="detailTable"></div>
-        <button id="jobFolderBtn" disabled class="w-full py-2.5 px-3 rounded-lg border-none text-white cursor-pointer text-[17px] font-bold mb-2.5 transition-colors duration-200 bg-gray-600 cursor-not-allowed opacity-70">No Folder Available</button>
-      </div>
-    </div>
-
-    <!-- NOTES Tab Content -->
-    <div id="notesContent" class="hidden flex-1 overflow-hidden flex flex-col min-h-0">
-      <div id="notesHeading" class="bg-orange-600 text-white text-center py-2 text-sm font-semibold rounded-t-lg flex-shrink-0">NOTES</div>
-      <div class="px-3 pt-2 pb-1 flex-1 overflow-auto">
-        <div id="jobNotes" class="min-h-[120px] max-h-[200px] overflow-auto p-1 border border-gray-600 rounded text-[11px] bg-transparent whitespace-pre-wrap break-words text-gray-600"></div>
-
-        <div class="flex flex-wrap mb-0.5 mt-1.5" id="toolbar">
-          <button data-cmd="bold" id="tbBold" class="h-7 w-8 text-xs py-0 px-1 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center m-[1px]"><strong>B</strong></button>
-          <button data-cmd="italic" id="tbItalic" class="h-7 w-8 text-xs py-0 px-1 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center m-[1px]"><em>I</em></button>
-          <button data-cmd="underline" id="tbUnderline" class="h-7 w-8 text-xs py-0 px-1 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center m-[1px]"><u>U</u></button>
-          <button data-cmd="foreColor" data-val="#ff0000" id="tbRed" class="h-7 w-8 text-xs py-0 px-1 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center m-[1px] text-red-500">A</button>
-          <button data-cmd="foreColor" data-val="#0000ff" id="tbBlue" class="h-7 w-8 text-xs py-0 px-1 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center m-[1px] text-blue-600">A</button>
-          <button data-cmd="foreColor" data-val="#000000" id="tbBlack" class="h-7 w-8 text-xs py-0 px-1 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center m-[1px] text-black">A</button>
-          <button data-cmd="removeFormat" id="tbClear" class="h-7 w-auto py-1 px-2 text-xs rounded border border-gray-400 bg-gray-400 text-white cursor-pointer flex items-center justify-center m-[1px]">Reset</button>
-        </div>
-
-        <div id="newNote" contenteditable="true" aria-label="New note" class="min-h-14 max-h-[120px] overflow-auto p-2 border border-gray-600 rounded-lg text-base bg-transparent mt-1.5"></div>
-
-        <div class="flex gap-2 mt-1.5 mb-4">
-          <button class="py-2 px-2.5 rounded-lg border-none text-white cursor-pointer bg-green-600" id="btnSubmit">Submit</button>
-          <button class="py-2 px-2.5 rounded-lg border-none text-white cursor-pointer bg-gray-500" id="btnClearNote">Clear</button>
-          <button class="py-2 px-2.5 rounded-lg border-none text-white cursor-pointer bg-red-600" id="btnClose">Close</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- MANAGER INFO Tab Content -->
-    <div id="managerInfoContent" class="hidden flex-1 overflow-hidden flex flex-col min-h-0">
-      <div id="managerInfoHeading" class="bg-green-600 text-white text-center py-2 text-sm font-semibold rounded-t-lg flex-shrink-0">MANAGER INFO</div>
-      <div class="px-3 pt-2 pb-1 flex-1 overflow-auto">
-        <div id="managerInfoTable" class="w-full space-y-3"></div>
-      </div>
-    </div>
-
-    <!-- Tab Bar at Bottom -->
-    <div class="flex items-center border-t border-gray-200 pt-2 px-3 pb-2 flex-shrink-0 bg-white rounded-b-lg">
-      <button id="backBtn" class="mr-6 pr-6 border-r border-gray-200 px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-800 flex items-center">
-        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-        </svg>
-        Back
-      </button>
-      <button id="infoTab" class="px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600 -mb-px">INFO</button>
-      <button id="notesTab" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">NOTES</button>
-      <button id="managerInfoTab" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">MANAGER INFO</button>
-    </div>
-  </div>
-</div>
-
-<!-- Iframe Viewer Modal -->
-<div id="iframeViewerModal" class="hidden fixed inset-0 bg-black z-[1000] flex flex-col">
-  <div class="bg-gray-900 text-white px-3 py-3 flex items-center gap-3 flex-shrink-0 shadow-lg">
-    <button id="iframeBackBtn" aria-label="Back to jobs" class="flex items-center justify-center w-10 h-10 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors shrink-0">
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-      </svg>
-    </button>
-    <div class="flex-1 min-w-0 text-center">
-      <div id="iframeTitle" class="text-sm font-medium truncate px-2">Loading...</div>
-    </div>
-    <button id="iframeCloseBtn" aria-label="Close" class="flex items-center justify-center w-10 h-10 bg-red-600 hover:bg-red-700 rounded-lg transition-colors shrink-0">
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-      </svg>
-    </button>
-  </div>
-  <div class="flex-1 relative bg-white flex flex-col overflow-hidden">
-    <div id="fileListContainer" class="hidden flex-1 flex flex-col p-0 bg-white overflow-hidden"></div>
-    <div id="pdfViewer" class="hidden flex-1 flex flex-col bg-gray-50">
-      <div id="pdfControls" class="flex items-center gap-2 px-3 py-2 border-b border-gray-200 bg-white shadow-sm flex-shrink-0">
-        <div class="flex items-center gap-1">
-          <button id="pdfZoomOut" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">−</button>
-          <button id="pdfZoomReset" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">45%</button>
-          <button id="pdfZoomIn" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">+</button>
-          <span id="pdfZoomLabel" class="text-sm text-gray-700 ml-1">45%</span>
-        </div>
-        <div class="flex items-center gap-2 ml-4">
-          <button id="pdfPrev" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">◀</button>
-          <button id="pdfNext" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">▶</button>
-          <span class="text-sm text-gray-700">Page <span id="pdfPageNum">1</span> / <span id="pdfPageCount">1</span></span>
-        </div>
-        <span class="flex-1"></span>
-        <div class="flex items-center gap-2 ml-auto">
-          <button id="pdfCloseAll" aria-label="Close preview" class="flex items-center justify-center w-9 h-9 bg-red-500 hover:bg-red-600 rounded text-white">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div id="pdfViewport" class="flex-1 overflow-auto bg-gray-100 flex items-start justify-start">
-        <canvas id="pdfCanvas" class="bg-white shadow-sm mt-3 mb-6 cursor-grab touch-none"></canvas>
-      </div>
-    </div>
-    <iframe id="iframeViewer" class="w-full h-full border-none" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-downloads allow-modals"></iframe>
-    <div id="iframeLoader" class="absolute inset-0 bg-white flex items-center justify-center">
-      <div class="text-center">
-        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
-        <div class="text-gray-600 text-lg">Loading content...</div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<script>
-(async function() {
-  const { pb, authHeaders, getDisplayName, getEmail, ensureAuth, getGraphToken: getGraphTokenFromBackend } = window.Auth;
-  
-  // ========================================
-  // TOKEN VALIDATION - CHECK BOTH AT STARTUP
-  // ========================================
-  const GRAPH_TOKEN_KEY = 'graphAccessToken';
-  
-  // Use shared auth helper to validate PB and refresh tokens if possible
-  const isAuthed = await ensureAuth();
-  if (!isAuthed) {
-    // ensureAuth will redirect to signin when needed
-    return;
-  }
-  
-  // Try to get Graph token (localStorage first, then backend refresh)
-  let APP_GRAPH_TOKEN = await getGraphTokenFromBackend();
-  if (!APP_GRAPH_TOKEN) {
-    console.log('[Init] No Graph token after backend refresh - redirecting to signin');
-    window.location.href = 'signin.html?reauth=1';
-    return;
-  }
-  
-  // Both tokens present - proceed
-  console.log('[Init] Both tokens valid - starting app');
-  
-  // Simple getter - returns the token, no checking
-  const getGraphToken = () => APP_GRAPH_TOKEN;
-
-  // --- Utility ---
-  const fetchNoCache = (url, options={}) => {
-    const headers = { ...(options.headers||{}), ...authHeaders() };
-    const separator = url.includes('?') ? '&' : '?';
-    return fetch(url + `${separator}_ts=${Date.now()}`, { ...options, headers });
-  };
-
-  const PB_COLLECTION_URL = "https://pocketbase.ccllc.pro/api/collections/pbc_1407612689/records";
-  const NOTES_COLLECTION_URL = "https://pocketbase.ccllc.pro/api/collections/notes/records";
-  const PREFS_COLLECTION_URL = "https://pocketbase.ccllc.pro/api/collections/user_preferences/records";
-  const perPage = 50;
-
-  let jobsCache = [], visibleJobs = [], currentJob = null;
-
-  function clearJobsCache(message='Cache cleared. Reloading…'){
-    jobsCache = [];
-    visibleJobs = [];
-    currentJob = null;
-    resultsEl.innerHTML = `<div class="p-2 text-slate-600 bg-white rounded-lg border border-blue-100">${message}</div>`;
-  }
-  window.clearJobsCache = clearJobsCache;
-
-  const searchBox = document.getElementById('searchBox');
-  const resultsEl = document.getElementById('results');
-  const filtersPanel = document.getElementById('filtersPanel');
-  const filterToggle = document.getElementById('filterToggle');
-  const userEmailEl = document.getElementById('userEmail');
-  const signOutBtn = document.getElementById('signOutBtn');
-
-  const detailModal = document.getElementById('detailModal');
-  const detailTable = document.getElementById('detailTable');
-  const jobFolderBtn = document.getElementById('jobFolderBtn');
-  const jobNotes = document.getElementById('jobNotes');
-  const newNote = document.getElementById('newNote');
-  const versionLabel = document.getElementById('versionLabel');
-
-  const toolbar = document.getElementById('toolbar');
-  const tbButtons = Array.from(toolbar.querySelectorAll('button'));
-
-  const safeLower = v => (v||'').toString().trim().toLowerCase();
-  const toBool = (v) => {
-    if (typeof v === 'boolean') return v;
-    const s = String(v||'').trim().toLowerCase();
-    if (s === 'true' || s === 'yes' || s === 'y' || s === '1') return true;
-    if (s === 'false' || s === 'no' || s === 'n' || s === '0') return false;
-    return null;
-  };
-
-  const currentUserEmail = getEmail();
-  if(userEmailEl && currentUserEmail) userEmailEl.textContent = currentUserEmail;
-
-  if (signOutBtn) {
-    signOutBtn.addEventListener('click', () => {
-      try { pb?.authStore?.clear?.(); } catch {}
-      try { localStorage.removeItem(GRAPH_TOKEN_KEY); } catch {}
-      try { localStorage.removeItem('pocketbase_auth'); } catch {}
-      try { sessionStorage.clear(); } catch {}
-      location.reload();
-    });
-  }
-
-  // Load version
-  async function loadVersion(){
-    if(!versionLabel) return;
-    try{
-      const res = await fetch('/version');
-      if(!res.ok) return;
-      const data = await res.json().catch(()=>null);
-      if(data?.version) versionLabel.textContent = `v${data.version}`;
-    }catch(err){ console.debug('Version load failed:', err.message); }
-  }
-  loadVersion();
-
-  // --- Fetch all jobs ---
-  async function fetchAllJobs(){
-    const startTime = performance.now();
-    let pollCount = 0;
-    
-    async function pollJobs(){
-      try{
-        const url = `/api/jobs-all`;
-        const res = await fetchNoCache(url);
-        if(!res.ok) throw new Error(`Fetch failed: ${res.status}`);
-        const data = await res.json();
-        const items = data.items || [];
-        
-        if (pollCount === 0 || jobsCache.length === 0) {
-          jobsCache.length = 0;
-          jobsCache.push(...items);
-          // Render immediately as soon as we have first batch
-          applyFiltersAndRender();
-          const loadTime = Math.round(performance.now() - startTime);
-          console.log(`✓ Displayed ${items.length} jobs in ${loadTime}ms`);
-        }
-        
-        if (data.partial) {
-          // Load remaining jobs in background
-          pollCount++;
-          if (pollCount === 1) {
-            // After first batch, get remaining jobs
-            setTimeout(async () => {
-              try {
-                const remainingRes = await fetchNoCache('/api/jobs-remaining');
-                if (remainingRes.ok) {
-                  const remainingData = await remainingRes.json();
-                  const remainingItems = remainingData.items || [];
-                  if (remainingItems.length > 0) {
-                    jobsCache.push(...remainingItems);
-                    console.log(`✓ Loaded ${remainingItems.length} additional jobs in background`);
-                    // Re-render if no filters are active to show all jobs
-                    if (!searchBox.value && document.querySelectorAll('.filter-division:checked, .filter-active:checked, .filter-status:checked, .filter-estimator:checked').length === 0) {
-                      applyFiltersAndRender();
-                    }
-                  }
-                }
-              } catch (err) {
-                console.error('Failed to load remaining jobs:', err);
-              }
-            }, 100);
-          }
-        }
-      }catch(err){ 
-        resultsEl.innerHTML = '<div class="p-4 text-center text-red-600">Failed to load jobs. Please refresh the page.</div>';
-        console.error(err); 
-      }
-    }
-    pollJobs();
-  }
-  
-  function renderInitialBatch(jobs){
-    resultsEl.innerHTML='';
-    for(const job of jobs){
-      const card=document.createElement('div'); card.className='bg-white rounded-lg p-2.5 border border-blue-100 shadow-sm cursor-pointer relative flex flex-col justify-center gap-1';
-      card.innerHTML=`
-        <div class="flex items-center gap-2 text-lg leading-tight mb-0.5"><div class="font-bold text-gray-700 min-w-[72px] whitespace-nowrap">Job#</div><div class="text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap flex-1">${escapeHtml(job.Job_Number||'')}</div></div>
-        <div class="flex items-center gap-2 text-lg leading-tight mb-0.5"><div class="font-bold text-gray-700 min-w-[72px] whitespace-nowrap">Job Name:</div><div class="text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap flex-1">${escapeHtml(job.Job_Full_Name||'')}</div></div>
-        <div class="flex items-center gap-2 text-lg leading-tight mb-0.5"><div class="font-bold text-gray-700 min-w-[72px] whitespace-nowrap">Contact:</div><div class="text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap flex-1">${escapeHtml(job.Contact_Person||'')}</div></div>
-      `;
-      const dot=document.createElement('div'); dot.className='absolute top-2.5 right-2.5 w-3.5 h-3.5 rounded-full border-2 border-white shadow-sm';
-      {
-        const b = toBool(job.Active);
-        dot.style.background = b===true ? 'green' : (b===false ? 'red' : '#cbd5e1');
-      }
-      card.appendChild(dot);
-      card.addEventListener('click',()=>openDetail(job));
-      resultsEl.appendChild(card);
-    }
-  }
-
-  function jobNumberValue(job){
-    const raw = String(job.Job_Number||'');
-    const match = raw.match(/[0-9]+\.?[0-9]*/);
-    if(!match) return null;
-    const num = parseFloat(match[0]);
-    return isNaN(num) ? null : num;
-  }
-
-  function sortJobsDescending(jobs){
-    return jobs.sort((a,b)=>{
-      const na = jobNumberValue(a);
-      const nb = jobNumberValue(b);
-      if(nb!==null && na!==null){ return nb - na; }
-      if(nb!==null) return 1;
-      if(na!==null) return -1;
-      return String(b.Job_Number||'').localeCompare(String(a.Job_Number||''));
-    });
-  }
-
-  function applyFiltersAndRender(){
-    let q = safeLower(searchBox.value||'');
-    
-    // Check for recency keywords
-    const recencyKeywords = ['most recent', 'newest', 'latest', 'current', 'recent'];
-    let sortByRecent = false;
-    
-    // Check if query contains any recency keywords (check longer phrases first)
-    for (const keyword of recencyKeywords) {
-      if (q.includes(keyword)) {
-        sortByRecent = true;
-        // Remove the keyword from search query (use global replace)
-        const regex = new RegExp(keyword, 'gi');
-        q = q.replace(regex, ' ');
-      }
-    }
-    
-    // Clean up multiple spaces and trim
-    q = q.replace(/\s+/g, ' ').trim();
-    
-    // Update the display to show cleaned query
-    if (sortByRecent && searchBox.value !== q) {
-      searchBox.value = q.split(' ').map(word => 
-        word.charAt(0).toUpperCase() + word.slice(1)
-      ).join(' ');
-    }
-    
-    const divisionVals = Array.from(document.querySelectorAll('.filter-division:checked')).map(i=>i.value);
-    const activeVals = Array.from(document.querySelectorAll('.filter-active:checked')).map(i=>i.value);
-    const activeWanted = activeVals.map(v=>toBool(v)).filter(v=>v!==null);
-    const statusVals = Array.from(document.querySelectorAll('.filter-status:checked')).map(i=>i.value);
-    const estimatorVals = Array.from(document.querySelectorAll('.filter-estimator:checked')).map(i=>i.value);
-    const estimatorValsLower = estimatorVals.map(s=>safeLower(s));
-
-    visibleJobs = jobsCache.filter(job=>{
-      const searchable = [job.Job_Number, job.Job_Full_Name, job.Job_Address, job.Contact_Person, job.Company_Client, job.Notes].join(' ').toLowerCase();
-      if(q && !searchable.includes(q)) return false;
-      if(divisionVals.length && !divisionVals.includes(job.Job_Division)) return false;
-      if(activeWanted.length){
-        const b = toBool(job.Active);
-        if(b===null || !activeWanted.includes(b)) return false;
-      }
-      if(statusVals.length && !statusVals.includes(job.Job_Status||'')) return false;
-      if(estimatorVals.length){
-        const je = safeLower(job.Estimator||'');
-        const ok = estimatorValsLower.some(v=>je.includes(v) || v.includes(je));
-        if(!ok) return false;
-      }
-      return true;
-    });
-
-    // If recency keyword used, show only THE most recent match
-    if(sortByRecent && visibleJobs.length > 0){
-      console.log('Before sorting, visibleJobs count:', visibleJobs.length);
-      
-      // Sort by Job_Number (higher number = newer job)
-      visibleJobs.sort((a, b) => {
-        const numA = jobNumberValue(a) || 0;
-        const numB = jobNumberValue(b) || 0;
-        return numB - numA; // Higher job number first (newest)
-      });
-      
-      console.log('After sorting, newest job:', visibleJobs[0]?.Job_Number);
-      // Keep only the most recent
-      visibleJobs = visibleJobs.slice(0, 1);
-      console.log('✓ Showing only the most recent match');
-    } else if(q || divisionVals.length || activeVals.length || statusVals.length || estimatorVals.length){
-      sortJobsDescending(visibleJobs);
-    }
-    
-    console.log('Filter summary', { 
-      originalSearch: searchBox.value, 
-      cleanedQ: q, 
-      sortByRecent, 
-      resultsCount: visibleJobs.length 
-    });
-    
-    // Reset virtual scroll state for new filter results
-    virtualScrollData.visibleStartIndex = 0;
-    virtualScrollData.visibleCount = 30;
-    
-    renderCards(visibleJobs);
-  }
-
-  // Virtual scroll state
-  let virtualScrollData = {
-    allJobs: [],
-    visibleStartIndex: 0,
-    visibleCount: 30,
-    itemHeight: 100, // Approximate card height
-    scrolling: false
-  };
-
-  function renderCards(list){
-    virtualScrollData.allJobs = list;
-    
-    if(!list.length){ 
-      resultsEl.innerHTML = `<div class="p-2 text-slate-600 bg-white rounded-lg border border-blue-100">No results</div>`; 
-      return; 
-    }
-
-    // Render only visible cards using virtual scrolling
-    renderVirtualCards();
-  }
-
-  function renderVirtualCards() {
-    const { allJobs, visibleStartIndex, visibleCount } = virtualScrollData;
-    const endIndex = Math.min(visibleStartIndex + visibleCount, allJobs.length);
-    const visibleJobs = allJobs.slice(visibleStartIndex, endIndex);
-    
-    // Clear and render visible cards only
-    resultsEl.innerHTML = '';
-    
-    for(const job of visibleJobs){
-      const card=document.createElement('div'); 
-      card.className='bg-white rounded-lg p-2.5 border border-blue-100 shadow-sm cursor-pointer relative flex flex-col justify-center gap-1';
-      card.innerHTML=`
-        <div class="flex items-center gap-2 text-lg leading-tight mb-0.5"><div class="font-bold text-gray-700 min-w-[72px] whitespace-nowrap">Job#</div><div class="text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap flex-1">${escapeHtml(job.Job_Number||'')}</div></div>
-        <div class="flex items-center gap-2 text-lg leading-tight mb-0.5"><div class="font-bold text-gray-700 min-w-[72px] whitespace-nowrap">Job Name:</div><div class="text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap flex-1">${escapeHtml(job.Job_Full_Name||'')}</div></div>
-        <div class="flex items-center gap-2 text-lg leading-tight mb-0.5"><div class="font-bold text-gray-700 min-w-[72px] whitespace-nowrap">Contact:</div><div class="text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap flex-1">${escapeHtml(job.Contact_Person||'')}</div></div>
-      `;
-      const dot=document.createElement('div'); 
-      dot.className='absolute top-2.5 right-2.5 w-3.5 h-3.5 rounded-full border-2 border-white shadow-sm';
-      {
-        const b = toBool(job.Active);
-        dot.style.background = b===true ? 'green' : (b===false ? 'red' : '#cbd5e1');
-      }
-      card.appendChild(dot);
-      card.addEventListener('click',()=>openDetail(job));
-      resultsEl.appendChild(card);
-    }
-    
-    // Add "Load More" button if there are more results
-    if (endIndex < allJobs.length) {
-      const loadMoreBtn = document.createElement('button');
-      loadMoreBtn.className = 'w-full py-3 mt-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium';
-      loadMoreBtn.textContent = `Load More (${allJobs.length - endIndex} remaining)`;
-      loadMoreBtn.onclick = () => {
-        virtualScrollData.visibleCount += 30;
-        renderVirtualCards();
-      };
-      resultsEl.appendChild(loadMoreBtn);
-    }
-  }
-  function escapeHtml(str){ return String(str).replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;'); }
-
-  // --- Voice Search ---
-  const voiceSearchBtn = document.getElementById('voiceSearchBtn');
-  const micIcon = document.getElementById('micIcon');
-  const micRecordingIcon = document.getElementById('micRecordingIcon');
-  let recognition = null;
-  let isListening = false;
-  let hasPermission = false;
-
-  // Check if we're on HTTPS or localhost (required for mic access)
-  const isSecureContext = window.isSecureContext || location.protocol === 'https:' || location.hostname === 'localhost';
-  if (!isSecureContext) {
-    console.warn('⚠️ Voice search requires HTTPS or localhost');
-    voiceSearchBtn.style.display = 'none';
-  }
-
-  // Request microphone permission explicitly
-  async function requestMicPermission() {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      // Stop the stream immediately, we just wanted to request permission
-      stream.getTracks().forEach(track => track.stop());
-      hasPermission = true;
-      console.log('✅ Microphone permission granted');
-      return true;
-    } catch (err) {
-      console.error('❌ Microphone permission denied:', err);
-      alert('🎤 Please allow microphone access to use voice search.\n\nClick the microphone icon in your browser\'s address bar to enable it.');
-      return false;
-    }
-  }
-
-  // Check if browser supports speech recognition
-  if (isSecureContext && ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window)) {
-    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-    recognition = new SpeechRecognition();
-    recognition.continuous = true; // Changed to true to keep listening
-    recognition.interimResults = true;
-    recognition.lang = 'en-US';
-    recognition.maxAlternatives = 1;
-
-    let autoStopTimer = null;
-    let silenceTimer = null;
-    let lastResultIndex = 0;
-    let baseSearchText = '';
-
-    recognition.onstart = () => {
-      isListening = true;
-      lastResultIndex = 0;
-      baseSearchText = searchBox.value.trim();
-      
-      // Change mic icon to filled maroon/red
-      micIcon.style.fill = '#991b1b'; // Tailwind red-800
-      micIcon.style.stroke = '#991b1b';
-      
-      // Auto-stop after 10 seconds as a safety measure
-      autoStopTimer = setTimeout(() => {
-        if (isListening) {
-          recognition.stop();
-        }
-      }, 10000);
-    };
-
-    recognition.onresult = (event) => {
-      // Clear any existing silence timer
-      if (silenceTimer) {
-        clearTimeout(silenceTimer);
-        silenceTimer = null;
-      }
-      
-      // Process only new final results
-      for (let i = lastResultIndex; i < event.results.length; i++) {
-        if (event.results[i].isFinal) {
-          let transcript = event.results[i][0].transcript.trim();
-          
-          // Remove trailing punctuation (period, comma, etc.)
-          transcript = transcript.replace(/[.,!?;:]+$/, '');
-          
-          // Remove trailing "job" if present
-          transcript = transcript.replace(/\s+job$/i, '');
-          
-          // Replace "new" with "latest"
-          transcript = transcript.replace(/\bnew\b/gi, 'latest');
-          
-          // Capitalize each word (title case)
-          transcript = transcript.split(' ').map(word => 
-            word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
-          ).join(' ');
-          
-          if (transcript) {
-            // Add space if base text exists and doesn't end with space
-            if (baseSearchText && !baseSearchText.endsWith(' ')) {
-              baseSearchText += ' ';
-            }
-            baseSearchText += transcript;
-          }
-          
-          lastResultIndex = i + 1;
-        }
-      }
-      
-      // Update search box with accumulated text
-      searchBox.value = baseSearchText;
-      
-      // Trigger search with results
-      applyFiltersAndRender();
-      
-      // If exactly 1 result, automatically open Manager Info
-      if (visibleJobs.length === 1) {
-        const job = visibleJobs[0];
-        currentJob = job;
-        detailModal.classList.remove('hidden');
-        document.getElementById('detailBox').scrollTop = 0;
-        switchTab('managerInfo');
-        populateManagerInfo(job);
-      }
-      
-      // Check if all results are final, if so prepare to stop
-      const allFinal = Array.from(event.results).every(r => r.isFinal);
-      if (allFinal && event.results.length > 0) {
-        silenceTimer = setTimeout(() => {
-          recognition.stop();
-        }, 1500);
-      }
-    };
-
-    recognition.onspeechstart = () => {};
-    recognition.onspeechend = () => {};
-    recognition.onaudiostart = () => {};
-    recognition.onaudioend = () => {};
-    recognition.onsoundstart = () => {};
-    recognition.onsoundend = () => {};
-
-    recognition.onerror = (event) => {
-      // Clear timers
-      if (autoStopTimer) clearTimeout(autoStopTimer);
-      if (silenceTimer) clearTimeout(silenceTimer);
-      
-      isListening = false;
-      
-      if (event.error === 'not-allowed' || event.error === 'permission-denied') {
-        alert('🎤 Microphone access denied.\n\nPlease:\n1. Click the microphone icon in your browser\'s address bar\n2. Allow microphone access\n3. Refresh the page');
-        hasPermission = false;
-      } else if (event.error === 'audio-capture') {
-        alert('🎤 Microphone error. Please check:\n1. Your microphone is connected\n2. It\'s not being used by another app\n3. Browser has microphone access');
-      }
-    };
-
-    recognition.onend = () => {
-      // Clear timers
-      if (autoStopTimer) clearTimeout(autoStopTimer);
-      if (silenceTimer) clearTimeout(silenceTimer);
-      
-      // Reset mic icon to normal
-      micIcon.style.fill = 'none';
-      micIcon.style.stroke = '';
-      
-      isListening = false;
-    };
-
-    voiceSearchBtn.addEventListener('click', async () => {
-      if (isListening) {
-        recognition.stop();
-        return;
-      }
-
-      // Check if text is highlighted and clear it if so
-      if (searchBox.selectionStart === 0 && searchBox.selectionEnd === searchBox.value.length && searchBox.value.length > 0) {
-        searchBox.value = '';
-        baseSearchText = '';
-      }
-
-      // Request permission first time
-      if (!hasPermission) {
-        const granted = await requestMicPermission();
-        if (!granted) {
-          return;
-        }
-      }
-      
-      // Reset state
-      isListening = false;
-      
-      try {
-        recognition.start();
-      } catch (err) {
-        if (err.message && (err.message.includes('already started') || err.name === 'InvalidStateError')) {
-          recognition.stop();
-          setTimeout(() => {
-            try {
-              recognition.start();
-            } catch (e) {
-              alert('Voice recognition error. Please refresh the page and try again.');
-            }
-          }, 300);
-        } else {
-          alert('Could not start voice recognition: ' + err.message);
-        }
-      }
-    });
-  } else {
-    // Hide voice button if not supported
-    if (voiceSearchBtn) voiceSearchBtn.style.display = 'none';
-    console.warn('⚠️ Speech recognition not supported in this browser');
-  }
-
-  // --- Filters ---
-  filterToggle.addEventListener('click',()=>{ filtersPanel.classList.toggle('hidden'); filterToggle.textContent = filtersPanel.classList.contains('hidden')?'Show Filters':'Hide Filters'; });
-  
-  // Select all text on first click, normal behavior on second click
-  let searchBoxSelected = false;
-  searchBox.addEventListener('focus', () => {
-    if (!searchBoxSelected) {
-      searchBox.select();
-      searchBoxSelected = true;
-    }
-  });
-  searchBox.addEventListener('mousedown', () => {
-    if (searchBoxSelected) {
-      searchBoxSelected = false;
-    }
-  });
-  searchBox.addEventListener('blur', () => {
-    searchBoxSelected = false;
-  });
-  
-  searchBox.addEventListener('input',()=>{
-    // Remove periods added by voice dictation
-    searchBox.value = searchBox.value.replace(/\./g, '');
-    applyFiltersAndRender();
-  });
-  document.querySelectorAll('.filter-division').forEach(cb=>cb.addEventListener('change',()=>applyFiltersAndRender()));
-  document.querySelectorAll('.filter-active').forEach(cb=>{ cb.addEventListener('change',()=>{
-    if(cb.checked) document.querySelectorAll('.filter-active').forEach(o=>{if(o!==cb)o.checked=false;}); applyFiltersAndRender();
-  });});
-  document.querySelectorAll('.filter-estimator').forEach(cb=>{ cb.addEventListener('change',()=>{
-    if(cb.checked) document.querySelectorAll('.filter-estimator').forEach(o=>{if(o!==cb)o.checked=false;}); applyFiltersAndRender();
-  });});
-  document.querySelectorAll('.filter-status').forEach(cb=>cb.addEventListener('change',()=>applyFiltersAndRender()));
-  document.getElementById('clearFilters').addEventListener('click',()=>{
-    document.querySelectorAll('.filter-division, .filter-active, .filter-status, .filter-estimator').forEach(cb=>cb.checked=false);
-    applyFiltersAndRender();
-  });
-
-  // --- Preferences ---
-  async function loadUserPreferences(){
-    console.log('loadUserPreferences: email=', currentUserEmail);
-    if(!currentUserEmail) return null;
-    try{
-      const list = await pb.collection('user_preferences').getList(1,1,{
-        filter: `user_email="${currentUserEmail}"`
-      });
-      const record = list?.items?.[0];
-      const prefs = record?.job_info_prefs || record?.prefs || null;
-      console.log('loadUserPreferences: fetched prefs=', prefs);
-      if(!prefs && currentUserEmail.toLowerCase()==='rcardoza@cardoza.construction'){
-        console.log('loadUserPreferences: using fallback for rcardoza');
-        return { filters: { active:true, estimator:'Steve Brewer', job_division:'C#' } };
-      }
-      return prefs;
-    }catch(err){
-      console.warn('loadUserPreferences: error=', err);
-      const isTarget = currentUserEmail && currentUserEmail.toLowerCase()==='rcardoza@cardoza.construction';
-      if(isTarget){
-        console.log('loadUserPreferences: using error fallback for rcardoza');
-        return { filters: { active:true, estimator:'Steve Brewer', job_division:'C#' } };
-      }
-      return null;
-    }
-  }
-
-  function applyPrefsToFilters(prefs){
-    console.log('applyPrefsToFilters: received prefs=', prefs);
-    // Handle both direct filters and nested prefs.filters
-    const filters = prefs?.filters || prefs?.prefs?.filters;
-    if(!filters) {
-      console.log('applyPrefsToFilters: no filters found, returning');
-      return;
-    }
-    const { active, estimator, job_division, status } = filters;
-    console.log('applyPrefsToFilters: applying filters', filters);
-
-    // reset all filters first
-    document.querySelectorAll('.filter-division, .filter-active, .filter-status, .filter-estimator').forEach(cb=>cb.checked=false);
-
-    if(typeof active === 'boolean'){
-      document.querySelectorAll('.filter-active').forEach(cb=>{
-        const v = cb.value.trim().toLowerCase();
-        if((active && v==='yes') || (!active && v==='no')) cb.checked=true;
-      });
-    }
-
-    if(estimator){
-      const estLower = String(estimator||'').trim().toLowerCase();
-      document.querySelectorAll('.filter-estimator').forEach(cb=>{
-        const cbVal = cb.value.trim().toLowerCase();
-        if(cbVal === estLower || cbVal.includes(estLower) || estLower.includes(cbVal)) cb.checked=true;
-      });
-      // If no estimator got checked, try a direct match to 'steve brewer'
-      const anyChecked = Array.from(document.querySelectorAll('.filter-estimator')).some(cb=>cb.checked);
-      if(!anyChecked && estLower.startsWith('steve')){
-        document.querySelectorAll('.filter-estimator').forEach(cb=>{
-          if(cb.value.trim().toLowerCase().includes('steve')) cb.checked=true;
-        });
-      }
-    }
-
-    if(job_division){
-      const jd = String(job_division||'').trim().toLowerCase();
-      let code=null;
-      if(jd.includes('c#') || jd.includes('commercial')) code='C#';
-      else if(jd.includes('r#') || jd.includes('residential')) code='R#';
-      else if(jd.includes('s#') || jd.includes('small')) code='S#';
-      if(code){
-        document.querySelectorAll('.filter-division').forEach(cb=>{ if(cb.value===code) cb.checked=true; });
-      }
-    }
-
-    if(status){
-      const arr = Array.isArray(status) ? status : [status];
-      const lowerStatuses = arr.map(s=>String(s||'').trim().toLowerCase());
-      document.querySelectorAll('.filter-status').forEach(cb=>{
-        if(lowerStatuses.includes(cb.value.trim().toLowerCase())) cb.checked=true;
-      });
-    }
-
-    applyFiltersAndRender();
-  }
-
-  // --- Modal & Notes ---
-  function openDetail(job){
-    currentJob = job;
-    
-    // Show modal immediately
-    detailModal.classList.remove('hidden');
-    document.getElementById('detailBox').scrollTop = 0;
-    switchTab('info');
-    
-    // Show loading state
-    detailTable.innerHTML = '<div class="text-gray-500 text-sm">Loading...</div>';
-    
-    // Preload files in background
-    if (job.Job_Folder_Link) {
-      preloadJobFiles(job).catch(err => console.log('Background preload error:', err));
-    }
-    
-    // Populate details asynchronously
-    setTimeout(() => populateDetailContent(job), 0);
-  }
-  
-  function populateDetailContent(job){
-    detailTable.innerHTML = '';
-    const fields = ["Job_Full_Name","Job_Number","Company_Client","Manager","Contact_Person","Phone_Number","Job_Address","Start_Date","Tax_Exempt","Job_Status","Job_Type"];
-    let i = 0;
-    while(i < fields.length){
-      const f = fields[i];
-      
-      // Handle paired fields
-      if(f === 'Job_Number'){
-        const row = document.createElement('div'); row.className='pb-2 border-b border-gray-100 flex gap-4';
-        
-        // Job Number
-        const col1 = document.createElement('div'); col1.className='flex-1';
-        const label1 = document.createElement('div'); label1.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label1.textContent='Job Number';
-        const val1 = document.createElement('div'); val1.className='text-sm text-gray-900'; val1.textContent = job['Job_Number'] || '—';
-        col1.appendChild(label1); col1.appendChild(val1);
-        
-        // Company Client
-        const col2 = document.createElement('div'); col2.className='flex-1';
-        const label2 = document.createElement('div'); label2.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label2.textContent='Company Client';
-        const val2 = document.createElement('div'); val2.className='text-sm text-gray-900'; val2.textContent = job['Company_Client'] || '—';
-        col2.appendChild(label2); col2.appendChild(val2);
-        
-        row.appendChild(col1); row.appendChild(col2); detailTable.appendChild(row);
-        i += 2; // Skip Company_Client in next iteration
-        continue;
-      }
-      
-      if(f === 'Contact_Person'){
-        const row = document.createElement('div'); row.className='pb-2 border-b border-gray-100 flex gap-4';
-        
-        // Contact Person
-        const col1 = document.createElement('div'); col1.className='flex-1';
-        const label1 = document.createElement('div'); label1.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label1.textContent='Contact Person';
-        const val1 = document.createElement('div'); val1.className='text-sm text-gray-900'; val1.textContent = job['Contact_Person'] || '—';
-        col1.appendChild(label1); col1.appendChild(val1);
-        
-        // Phone Number
-        const col2 = document.createElement('div'); col2.className='flex-1';
-        const label2 = document.createElement('div'); label2.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label2.textContent='Phone Number';
-        const val2 = document.createElement('div'); val2.className='text-sm';
-        if(job['Phone_Number'] && job['Phone_Number'].trim() !== ''){
-          const phoneLink = document.createElement('a');
-          const phoneNumber = job['Phone_Number'].replace(/\D/g, ''); // Remove non-digits
-          phoneLink.href = `tel:${phoneNumber}`;
-          phoneLink.className = 'text-blue-600 hover:text-blue-800 underline';
-          phoneLink.textContent = job['Phone_Number'];
-          val2.appendChild(phoneLink);
-        } else {
-          val2.className = 'text-sm text-gray-900';
-          val2.textContent = '—';
-        }
-        col2.appendChild(label2); col2.appendChild(val2);
-        
-        row.appendChild(col1); row.appendChild(col2); detailTable.appendChild(row);
-        i += 2; // Skip Phone_Number in next iteration
-        continue;
-      }
-
-      if(f === 'Job_Status'){
-        const row = document.createElement('div'); row.className='pb-2 border-b border-gray-100 flex gap-4';
-
-        // Job Status
-        const col1 = document.createElement('div'); col1.className='flex-1';
-        const label1 = document.createElement('div'); label1.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label1.textContent='Job Status';
-        const val1 = document.createElement('div'); val1.className='text-sm text-gray-900'; val1.textContent = job['Job_Status'] || '—';
-        col1.appendChild(label1); col1.appendChild(val1);
-
-        // Job Type
-        const col2 = document.createElement('div'); col2.className='flex-1';
-        const label2 = document.createElement('div'); label2.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label2.textContent='Job Type';
-        const val2 = document.createElement('div'); val2.className='text-sm text-gray-900'; val2.textContent = job['Job_Type'] || '—';
-        col2.appendChild(label2); col2.appendChild(val2);
-
-        row.appendChild(col1); row.appendChild(col2); detailTable.appendChild(row);
-        i += 2; // Skip Job_Type in next iteration
-        continue;
-      }
-
-      if(f === 'Manager'){
-        const row = document.createElement('div'); row.className='pb-2 border-b border-gray-100 flex gap-4';
-
-        const col1 = document.createElement('div'); col1.className='flex-1';
-        const label1 = document.createElement('div'); label1.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label1.textContent='Manager';
-        const val1 = document.createElement('div'); val1.className='text-sm text-gray-900'; val1.textContent = job['Project_Manager'] || '—';
-        col1.appendChild(label1); col1.appendChild(val1);
-
-        const col2 = document.createElement('div'); col2.className='flex-1';
-        const label2 = document.createElement('div'); label2.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label2.textContent='Job Division';
-        const val2 = document.createElement('div'); val2.className='text-sm text-gray-900'; val2.textContent = job['Job_Division'] || '—';
-        col2.appendChild(label2); col2.appendChild(val2);
-
-        row.appendChild(col1); row.appendChild(col2); detailTable.appendChild(row);
-        i += 1; // Manager handled with Job_Division
-        continue;
-      }
-      
-      // Regular single field
-      const value = job[f] || '';
-      if(!value && f === 'Tax_Exempt') {
-        i++;
-        continue; // Skip empty Tax Exempt
-      }
-      
-      const row = document.createElement('div'); row.className='pb-2 border-b border-gray-100 last:border-0';
-      const label = document.createElement('div'); label.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label.textContent=f.replace(/_/g,' ');
-      const val = document.createElement('div'); val.className='text-sm text-gray-900 font-medium'; 
-      
-      // Format date if it's Start_Date
-      if(f === 'Start_Date' && value){
-        try {
-          const date = new Date(value);
-          val.textContent = date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
-        } catch(e) {
-          val.textContent = value;
-        }
-      } else if(f === 'Job_Address' && value && value.trim() !== ''){
-        // Create address container with text and map icons
-        val.className = 'text-sm flex items-center gap-2 flex-wrap';
-        
-        // Address text
-        const addressText = document.createElement('span');
-        addressText.className = 'text-gray-900 flex-1 min-w-0';
-        addressText.textContent = value;
-        val.appendChild(addressText);
-        
-        // Icon container
-        const iconContainer = document.createElement('div');
-        iconContainer.className = 'flex items-center gap-2';
-        
-        // Apple Maps link
-        const appleLink = document.createElement('a');
-        const encodedAddress = encodeURIComponent(value);
-        appleLink.href = `https://maps.apple.com/?q=${encodedAddress}`;
-        appleLink.target = '_blank';
-        appleLink.className = 'inline-flex items-center justify-center w-6 h-6 hover:opacity-80 transition-opacity';
-        appleLink.title = 'Open in Apple Maps';
-        appleLink.innerHTML = '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" style="fill: #000000;"><title>Apple</title><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>';
-        iconContainer.appendChild(appleLink);
-        
-        // Google Maps link
-        const googleLink = document.createElement('a');
-        googleLink.href = `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
-        googleLink.target = '_blank';
-        googleLink.className = 'inline-flex items-center justify-center w-6 h-6 hover:opacity-80 transition-opacity';
-        googleLink.title = 'Open in Google Maps';
-        googleLink.innerHTML = '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" style="fill: #4285F4;"><title>Google</title><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/></svg>';
-        iconContainer.appendChild(googleLink);
-        
-        val.appendChild(iconContainer);
-      } else {
-        val.textContent = value || '—';
-      }
-      
-      row.appendChild(label); row.appendChild(val); detailTable.appendChild(row);
-      i++;
-    }
-
-    // Job folder button
-    if(job.Job_Folder_Link && String(job.Job_Folder_Link).trim()!==''){
-      try{ 
-        const url=new URL(job.Job_Folder_Link); 
-        jobFolderBtn.textContent='Show Job Folder';
-        jobFolderBtn.disabled=false;
-        jobFolderBtn.className='w-full py-2.5 px-3 rounded-lg border-none text-white cursor-pointer text-[17px] font-bold mb-2.5 transition-colors duration-200 bg-blue-600 hover:bg-blue-700';
-        jobFolderBtn.onclick=()=>openJobFiles(job);
-      }catch(e){ 
-        jobFolderBtn.textContent='No Folder Available'; 
-        jobFolderBtn.disabled=true; 
-        jobFolderBtn.className='w-full py-2.5 px-3 rounded-lg border-none text-white cursor-pointer text-[17px] font-bold mb-2.5 transition-colors duration-200 bg-gray-600 cursor-not-allowed opacity-70'; 
-        jobFolderBtn.onclick=null;
-      }
-    } else { 
-      jobFolderBtn.textContent='No Folder Available'; 
-      jobFolderBtn.disabled=true; 
-      jobFolderBtn.className='w-full py-2.5 px-3 rounded-lg border-none text-white cursor-pointer text-[17px] font-bold mb-2.5 transition-colors duration-200 bg-gray-600 cursor-not-allowed opacity-70'; 
-      jobFolderBtn.onclick=null;
-    }
-
-    jobNotes.innerHTML = job.Notes || '';
-    newNote.innerHTML = '';
-    tbButtons.forEach(b=>b.classList.remove('bg-blue-100', 'text-gray-900', 'border-blue-600'));
-  }
-
-  async function populateManagerInfo(job) {
-    const managerInfoTable = document.getElementById('managerInfoTable');
-    managerInfoTable.innerHTML = '';
-
-    // Row 1: Job Full Name (spans 2 cols), Manager, Job Status
-    const row1 = document.createElement('div');
-    row1.className = 'grid grid-cols-4 gap-4 pb-3 border-b border-gray-200';
-    
-    const jobFullNameDiv = document.createElement('div');
-    jobFullNameDiv.className = 'col-span-2';
-    jobFullNameDiv.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Job Full Name</div><div class="text-gray-900 truncate" style="font-size: 10px;" title="${job.Job_Full_Name || '—'}">${job.Job_Full_Name || '—'}</div>`;
-    
-    const managerDiv = document.createElement('div');
-    managerDiv.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Manager</div><div class="text-gray-900" style="font-size: 10px;">${job.Project_Manager || '—'}</div>`;
-    
-    const jobStatusDiv = document.createElement('div');
-    jobStatusDiv.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Job Status</div><div class="text-gray-900" style="font-size: 10px;">${job.Job_Status || '—'}</div>`;
-    
-    row1.appendChild(jobFullNameDiv);
-    row1.appendChild(managerDiv);
-    row1.appendChild(jobStatusDiv);
-    managerInfoTable.appendChild(row1);
-
-    // Row 2: Job Number, Job Division, Job Type, Scope
-    const row2 = document.createElement('div');
-    row2.className = 'grid grid-cols-4 gap-4 pb-3 border-b border-gray-200';
-    
-    const jobNum = document.createElement('div');
-    jobNum.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Job Number</div><div class="text-gray-900 text-center" style="font-size: 10px;">${job.Job_Number || '—'}</div>`;
-    
-    const jobDivision = document.createElement('div');
-    jobDivision.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Job Division</div><div class="text-gray-900 text-center" style="font-size: 10px;">${job.Job_Division || '—'}</div>`;
-    
-    const jobType = document.createElement('div');
-    jobType.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Job Type</div><div class="text-gray-900 text-center" style="font-size: 10px;">${job.Job_Type || '—'}</div>`;
-    
-    const scopeDiv = document.createElement('div');
-    scopeDiv.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Scope</div><div class="text-gray-900 text-center" style="font-size: 10px;">${job.Scope || '—'}</div>`;
-    
-    row2.appendChild(jobNum);
-    row2.appendChild(jobDivision);
-    row2.appendChild(jobType);
-    row2.appendChild(scopeDiv);
-    managerInfoTable.appendChild(row2);
-
-    // Row 3: Company/Client, Contact Person, Contact Number, EXT.
-    const row3 = document.createElement('div');
-    row3.className = 'grid grid-cols-4 gap-4 pb-3 border-b border-gray-200';
-    
-    const companyClient = document.createElement('div');
-    companyClient.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Company/Client</div><div class="text-gray-900 text-center" style="font-size: 10px;">${job.Company_Client || '—'}</div>`;
-    
-    const contactPerson = document.createElement('div');
-    contactPerson.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Contact Person</div><div class="text-gray-900 text-center" style="font-size: 10px;">${job.Contact_Person || '—'}</div>`;
-    
-    const contactNumber = document.createElement('div');
-    contactNumber.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Contact Number</div>`;
-    const phoneDiv = document.createElement('div');
-    phoneDiv.className = 'text-center';
-    phoneDiv.style.fontSize = '10px';
-    if(job.Phone_Number && job.Phone_Number.trim() !== ''){
-      const phoneLink = document.createElement('a');
-      const phoneNumber = job.Phone_Number.replace(/\D/g, '');
-      phoneLink.href = `tel:${phoneNumber}`;
-      phoneLink.className = 'text-blue-600 hover:text-blue-800 underline';
-      phoneLink.textContent = job.Phone_Number;
-      phoneDiv.appendChild(phoneLink);
-    } else {
-      phoneDiv.className = 'text-gray-900 text-center';
-      phoneDiv.textContent = '—';
-    }
-    contactNumber.appendChild(phoneDiv);
-    
-    const extn = document.createElement('div');
-    extn.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">EXT.</div><div class="text-gray-900 text-center" style="font-size: 10px;">${job.EXT || '—'}</div>`;
-    
-    row3.appendChild(companyClient);
-    row3.appendChild(contactPerson);
-    row3.appendChild(contactNumber);
-    row3.appendChild(extn);
-    managerInfoTable.appendChild(row3);
-
-    // Row 4: Job Address (spans 2 cols), Map Icons (3rd col), EST Cost (4th col)
-    const row4 = document.createElement('div');
-    row4.className = 'grid grid-cols-4 gap-4 pb-3 border-b border-gray-200';
-    
-    // Job Address spanning 2 columns
-    const addressContainer = document.createElement('div');
-    addressContainer.className = 'col-span-2';
-    addressContainer.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Job Address</div>`;
-    const addressVal = document.createElement('div');
-    addressVal.style.fontSize = '10px';
-    addressVal.className = 'text-gray-900';
-    addressVal.textContent = job.Job_Address || '—';
-    addressContainer.appendChild(addressVal);
-    
-    // Map Icons in 3rd column
-    const mapIconsContainer = document.createElement('div');
-    mapIconsContainer.className = 'flex items-end gap-2';
-    
-    if(job.Job_Address && job.Job_Address.trim() !== ''){
-      const appleLink = document.createElement('a');
-      const encodedAddress = encodeURIComponent(job.Job_Address);
-      appleLink.href = `https://maps.apple.com/?q=${encodedAddress}`;
-      appleLink.target = '_blank';
-      appleLink.className = 'inline-flex items-center justify-center w-5 h-5 hover:opacity-80 transition-opacity';
-      appleLink.title = 'Open in Apple Maps';
-      appleLink.innerHTML = '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" style="fill: #000000;"><title>Apple</title><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>';
-      mapIconsContainer.appendChild(appleLink);
-      
-      const googleLink = document.createElement('a');
-      googleLink.href = `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
-      googleLink.target = '_blank';
-      googleLink.className = 'inline-flex items-center justify-center w-5 h-5 hover:opacity-80 transition-opacity';
-      googleLink.title = 'Open in Google Maps';
-      googleLink.innerHTML = '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" style="fill: #4285F4;"><title>Google</title><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/></svg>';
-      mapIconsContainer.appendChild(googleLink);
-    }
-    
-    // EST Cost in 4th column (centered)
-    const estimatedCostContainer = document.createElement('div');
-    let costFormatted = '—';
-    if(job.Estimated_Cost !== null && job.Estimated_Cost !== undefined && job.Estimated_Cost !== '') {
-      const costNum = parseFloat(job.Estimated_Cost);
-      if(!isNaN(costNum)) {
-        costFormatted = '$' + costNum.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-      }
-    }
-    estimatedCostContainer.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">EST Cost</div><div class="text-gray-900 text-center" style="font-size: 10px;">${costFormatted}</div>`;
-    
-    row4.appendChild(addressContainer);
-    row4.appendChild(mapIconsContainer);
-    row4.appendChild(estimatedCostContainer);
-    managerInfoTable.appendChild(row4);
-
-    // Row 5: EST Start Date, Actual Start Date, EST End Date
-    const row5 = document.createElement('div');
-    row5.className = 'grid grid-cols-3 gap-4 pb-3 border-b border-gray-200';
-    
-    // Format the start date for both estimated and actual (short format)
-    let startDateFormatted = '—';
-    if(job.Start_Date){
-      try {
-        const date = new Date(job.Start_Date);
-        startDateFormatted = date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
-      } catch(e) {
-        startDateFormatted = job.Start_Date;
-      }
-    }
-    
-    const estimatedStartDate = document.createElement('div');
-    estimatedStartDate.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">EST Start Date</div><div class="text-gray-900 text-center" style="font-size: 10px;">${startDateFormatted}</div>`;
-    
-    let actualStartDateFormatted = '—';
-    if(job.Start_Date_Actual){
-      try {
-        const date = new Date(job.Start_Date_Actual);
-        actualStartDateFormatted = date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
-      } catch(e) {
-        actualStartDateFormatted = job.Start_Date_Actual;
-      }
-    }
-    const actualStartDate = document.createElement('div');
-    actualStartDate.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Actual Start Date</div><div class="text-gray-900 text-center" style="font-size: 10px;">${actualStartDateFormatted}</div>`;
-    
-    let estimatedEndDateFormatted = '—';
-    if(job.Estimated_End_Date){
-      try {
-        const date = new Date(job.Estimated_End_Date);
-        estimatedEndDateFormatted = date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
-      } catch(e) {
-        estimatedEndDateFormatted = job.Estimated_End_Date;
-      }
-    }
-    const estimatedEndDate = document.createElement('div');
-    estimatedEndDate.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">EST End Date</div><div class="text-gray-900 text-center" style="font-size: 10px;">${estimatedEndDateFormatted}</div>`;
-    
-    row5.appendChild(estimatedStartDate);
-    row5.appendChild(actualStartDate);
-    row5.appendChild(estimatedEndDate);
-    managerInfoTable.appendChild(row5);
-
-    // Notes Section with Tabs
-    const notesSection = document.createElement('div');
-    notesSection.className = 'mt-4';
-    
-    // Tab buttons
-    const notesTabs = document.createElement('div');
-    notesTabs.className = 'flex gap-2 mb-2';
-    
-    const jobNotesTabBtn = document.createElement('button');
-    jobNotesTabBtn.id = 'jobNotesTab';
-    jobNotesTabBtn.className = 'px-3 py-1 font-bold uppercase bg-orange-600 text-white rounded cursor-pointer';
-    jobNotesTabBtn.style.fontSize = '8px';
-    jobNotesTabBtn.textContent = 'Notes';
-    
-    const managerNotesTabBtn = document.createElement('button');
-    managerNotesTabBtn.id = 'managerNotesTab';
-    managerNotesTabBtn.className = 'px-3 py-1 font-bold uppercase bg-gray-300 text-gray-700 rounded hover:bg-gray-400 cursor-pointer';
-    managerNotesTabBtn.style.fontSize = '8px';
-    managerNotesTabBtn.textContent = 'Manager Notes';
-    
-    notesTabs.appendChild(jobNotesTabBtn);
-    notesTabs.appendChild(managerNotesTabBtn);
-    notesSection.appendChild(notesTabs);
-    
-    // Job Notes Content
-    const jobNotesContent = document.createElement('div');
-    jobNotesContent.id = 'jobNotesContent';
-    jobNotesContent.className = 'notes-tab-content';
-    
-    // Container for display with expand button
-    const jobNotesDisplayContainer = document.createElement('div');
-    jobNotesDisplayContainer.className = 'relative mb-3';
-    
-    // Display notes first
-    const jobNotesDisplay = document.createElement('div');
-    jobNotesDisplay.id = 'jobNotesDisplay';
-    jobNotesDisplay.className = 'text-gray-600 whitespace-pre-wrap break-words p-2 border border-gray-300 rounded bg-gray-50 overflow-y-auto';
-    jobNotesDisplay.style.fontSize = '10px';
-    jobNotesDisplay.style.height = '120px';
-    jobNotesDisplay.style.maxHeight = '120px';
-    jobNotesDisplay.innerHTML = job.Notes || '<span class="text-gray-400 italic">No notes available</span>';
-    jobNotesDisplayContainer.appendChild(jobNotesDisplay);
-    
-    jobNotesContent.appendChild(jobNotesDisplayContainer);
-    
-    // Add Note button below notes display
-    const addNoteBtn = document.createElement('button');
-    addNoteBtn.className = 'mb-2 px-3 py-1 bg-green-600 text-white rounded font-bold hover:bg-green-700 cursor-pointer';
-    addNoteBtn.style.fontSize = '8px';
-    addNoteBtn.textContent = 'Add A Note';
-    jobNotesContent.appendChild(addNoteBtn);
-    
-    // Note editor (collapsed by default)
-    const noteEditor = document.createElement('div');
-    noteEditor.id = 'jobNoteEditor';
-    noteEditor.className = 'hidden mb-3 p-2 border border-gray-300 rounded bg-gray-50';
-    noteEditor.innerHTML = `
-      <div class="flex flex-wrap gap-1 mb-2">
-        <button data-cmd="bold" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center" style="font-size: 8px;"><strong>B</strong></button>
-        <button data-cmd="italic" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center" style="font-size: 8px;"><em>I</em></button>
-        <button data-cmd="underline" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center" style="font-size: 8px;"><u>U</u></button>
-        <button data-cmd="foreColor" data-val="#ff0000" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center text-red-500" style="font-size: 8px;">A</button>
-        <button data-cmd="foreColor" data-val="#0000ff" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center text-blue-600" style="font-size: 8px;">A</button>
-        <button data-cmd="foreColor" data-val="#000000" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center text-black" style="font-size: 8px;">A</button>
-        <button data-cmd="removeFormat" class="h-6 px-2 rounded border border-gray-400 bg-gray-400 text-white cursor-pointer flex items-center justify-center" style="font-size: 8px;">Reset</button>
-        <button id="jobNoteMic" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 cursor-pointer flex items-center justify-center" title="Voice to text">
-          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="#4B5563">
-            <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
-            <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
-          </svg>
-        </button>
-      </div>
-      <div id="jobNewNote" contenteditable="true" class="min-h-14 max-h-[120px] overflow-auto p-2 border border-gray-600 rounded text-sm bg-white mb-2"></div>
-      <div class="flex gap-2">
-        <button id="jobNoteSubmit" class="px-3 py-1 rounded text-white bg-green-600 hover:bg-green-700 font-bold cursor-pointer" style="font-size: 8px;">Submit</button>
-        <button id="jobNoteClear" class="px-3 py-1 rounded text-white bg-gray-500 hover:bg-gray-600 font-bold cursor-pointer" style="font-size: 8px;">Clear</button>
-        <button id="jobNoteCollapse" class="px-3 py-1 rounded text-white bg-red-600 hover:bg-red-700 font-bold cursor-pointer" style="font-size: 8px;">Close</button>
-      </div>
-    `;
-    jobNotesContent.appendChild(noteEditor);
-    
-    // File columns - always create them
-    const fileColumns = document.createElement('div');
-    fileColumns.id = 'jobNotesFileColumns';
-    fileColumns.className = 'grid grid-cols-3 gap-4 mt-3';
-    
-    // Initialize with empty state
-    fileColumns.innerHTML = `
-      <div>
-        <div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Plans</div>
-        <div class="text-gray-400 italic" style="font-size: 10px;">Loading...</div>
-      </div>
-      <div>
-        <div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Estimates</div>
-        <div class="text-gray-400 italic" style="font-size: 10px;">Loading...</div>
-      </div>
-      <div>
-        <div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Other Files</div>
-        <div class="text-gray-400 italic" style="font-size: 10px;">Loading...</div>
-      </div>
-    `;
-    jobNotesContent.appendChild(fileColumns);
-    
-    // Manager Notes Content
-    const managerNotesContent = document.createElement('div');
-    managerNotesContent.id = 'managerNotesContent';
-    managerNotesContent.className = 'notes-tab-content hidden';
-    
-    // Container for display with expand button
-    const managerNotesDisplayContainer = document.createElement('div');
-    managerNotesDisplayContainer.className = 'relative mb-3';
-    
-    // Display manager notes first
-    const managerNotesDisplay = document.createElement('div');
-    managerNotesDisplay.id = 'managerNotesDisplay';
-    managerNotesDisplay.className = 'text-gray-600 whitespace-pre-wrap break-words p-2 border border-gray-300 rounded bg-gray-50 overflow-y-auto';
-    managerNotesDisplay.style.fontSize = '10px';
-    managerNotesDisplay.style.height = '120px';
-    managerNotesDisplay.style.maxHeight = '120px';
-    managerNotesDisplay.innerHTML = '<span class="text-gray-400 italic">No manager notes available</span>';
-    managerNotesDisplayContainer.appendChild(managerNotesDisplay);
-    
-    managerNotesContent.appendChild(managerNotesDisplayContainer);
-    
-    // Add Note button for manager below notes display
-    const addManagerNoteBtn = document.createElement('button');
-    addManagerNoteBtn.className = 'mb-2 px-3 py-1 bg-green-600 text-white rounded font-bold hover:bg-green-700 cursor-pointer';
-    addManagerNoteBtn.style.fontSize = '8px';
-    addManagerNoteBtn.textContent = 'Add A Note';
-    managerNotesContent.appendChild(addManagerNoteBtn);
-    
-    // Manager note editor (collapsed by default)
-    const managerNoteEditor = document.createElement('div');
-    managerNoteEditor.id = 'managerNoteEditor';
-    managerNoteEditor.className = 'hidden mb-3 p-2 border border-gray-300 rounded bg-gray-50';
-    managerNoteEditor.innerHTML = `
-      <div class="flex flex-wrap gap-1 mb-2">
-        <button data-cmd="bold" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center" style="font-size: 8px;"><strong>B</strong></button>
-        <button data-cmd="italic" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center" style="font-size: 8px;"><em>I</em></button>
-        <button data-cmd="underline" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center" style="font-size: 8px;"><u>U</u></button>
-        <button data-cmd="foreColor" data-val="#ff0000" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center text-red-500" style="font-size: 8px;">A</button>
-        <button data-cmd="foreColor" data-val="#0000ff" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center text-blue-600" style="font-size: 8px;">A</button>
-        <button data-cmd="foreColor" data-val="#000000" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center text-black" style="font-size: 8px;">A</button>
-        <button data-cmd="removeFormat" class="h-6 px-2 rounded border border-gray-400 bg-gray-400 text-white cursor-pointer flex items-center justify-center" style="font-size: 8px;">Reset</button>
-        <button id="managerNoteMic" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 cursor-pointer flex items-center justify-center" title="Voice to text">
-          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="#4B5563">
-            <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
-            <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
-          </svg>
-        </button>
-      </div>
-      <div id="managerNewNote" contenteditable="true" class="min-h-14 max-h-[120px] overflow-auto p-2 border border-gray-600 rounded text-sm bg-white mb-2"></div>
-      <div class="flex gap-2">
-        <button id="managerNoteSubmit" class="px-3 py-1 rounded text-white bg-green-600 hover:bg-green-700 font-bold cursor-pointer" style="font-size: 8px;">Submit</button>
-        <button id="managerNoteClear" class="px-3 py-1 rounded text-white bg-gray-500 hover:bg-gray-600 font-bold cursor-pointer" style="font-size: 8px;">Clear</button>
-        <button id="managerNoteCollapse" class="px-3 py-1 rounded text-white bg-red-600 hover:bg-red-700 font-bold cursor-pointer" style="font-size: 8px;">Close</button>
-      </div>
-    `;
-    managerNotesContent.appendChild(managerNoteEditor);
-    
-    // File columns for manager notes - always create them
-    const managerFileColumns = document.createElement('div');
-    managerFileColumns.id = 'managerNotesFileColumns';
-    managerFileColumns.className = 'grid grid-cols-3 gap-4 mt-3';
-    
-    // Initialize with empty state
-    managerFileColumns.innerHTML = `
-      <div>
-        <div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Plans</div>
-        <div class="text-gray-400 italic" style="font-size: 10px;">Loading...</div>
-      </div>
-      <div>
-        <div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Estimates</div>
-        <div class="text-gray-400 italic" style="font-size: 10px;">Loading...</div>
-      </div>
-      <div>
-        <div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Other Files</div>
-        <div class="text-gray-400 italic" style="font-size: 10px;">Loading...</div>
-      </div>
-    `;
-    managerNotesContent.appendChild(managerFileColumns);
-    
-    notesSection.appendChild(jobNotesContent);
-    notesSection.appendChild(managerNotesContent);
-    managerInfoTable.appendChild(notesSection);
-    
-    // Tab switching event listeners
-    jobNotesTabBtn.addEventListener('click', (e) => {
-      console.log('Notes tab clicked');
-      e.preventDefault();
-      e.stopPropagation();
-      jobNotesTabBtn.className = 'px-3 py-1 text-xs font-bold uppercase bg-orange-600 text-white rounded cursor-pointer';
-      managerNotesTabBtn.className = 'px-3 py-1 text-xs font-bold uppercase bg-gray-300 text-gray-700 rounded hover:bg-gray-400 cursor-pointer';
-      jobNotesContent.classList.remove('hidden');
-      managerNotesContent.classList.add('hidden');
-    });
-    
-    managerNotesTabBtn.addEventListener('click', (e) => {
-      console.log('Manager Notes tab clicked');
-      e.preventDefault();
-      e.stopPropagation();
-      managerNotesTabBtn.className = 'px-3 py-1 text-xs font-bold uppercase bg-orange-600 text-white rounded cursor-pointer';
-      jobNotesTabBtn.className = 'px-3 py-1 text-xs font-bold uppercase bg-gray-300 text-gray-700 rounded hover:bg-gray-400 cursor-pointer';
-      managerNotesContent.classList.remove('hidden');
-      jobNotesContent.classList.add('hidden');
-    });
-    
-    // Note editor controls
-    addNoteBtn.addEventListener('click', (e) => {
-      console.log('Add Note clicked');
-      e.preventDefault();
-      addNoteBtn.classList.add('hidden');
-      noteEditor.classList.remove('hidden');
-    });
-    
-    addManagerNoteBtn.addEventListener('click', (e) => {
-      console.log('Add Manager Note clicked');
-      e.preventDefault();
-      addManagerNoteBtn.classList.add('hidden');
-      managerNoteEditor.classList.remove('hidden');
-    });
-    
-    // Populate file columns
-    if(job.Job_Folder_Link && String(job.Job_Folder_Link).trim() !== ''){
-      console.log('Fetching files for notes sections...');
-      loadFilesForNotes(job.Job_Folder_Link).then(files => {
-        console.log('Files fetched, populating columns:', files.length);
-        populateNotesFileColumns(files, 'jobNotesFileColumns');
-        populateNotesFileColumns(files, 'managerNotesFileColumns');
-      }).catch(err => {
-        console.log('Error loading files for notes:', err);
-        // Show empty state on error
-        populateNotesFileColumns([], 'jobNotesFileColumns');
-        populateNotesFileColumns([], 'managerNotesFileColumns');
-      });
-    } else {
-      console.log('No Job_Folder_Link, showing empty state');
-      // Show empty state when no folder link
-      populateNotesFileColumns([], 'jobNotesFileColumns');
-      populateNotesFileColumns([], 'managerNotesFileColumns');
-    }
-    
-    // Load and display notes filtered by type
-    loadAndDisplayNotes(job);
-    
-    // Setup toolbar functionality for job notes editor
-    setupNoteEditorToolbar('jobNewNote', 'jobNoteEditor');
-    
-    // Setup toolbar functionality for manager notes editor
-    setupNoteEditorToolbar('managerNewNote', 'managerNoteEditor');
-    
-    // Setup voice-to-text for job notes
-    setupVoiceToText('jobNoteMic', 'jobNewNote');
-    
-    // Setup voice-to-text for manager notes
-    setupVoiceToText('managerNoteMic', 'managerNewNote');
-    
-    // Setup close functionality
-    document.getElementById('jobNoteCollapse').addEventListener('click', (e) => {
-      console.log('Close job note editor');
-      e.preventDefault();
-      noteEditor.classList.add('hidden');
-      addNoteBtn.classList.remove('hidden');
-    });
-    
-    document.getElementById('managerNoteCollapse').addEventListener('click', (e) => {
-      console.log('Close manager note editor');
-      e.preventDefault();
-      managerNoteEditor.classList.add('hidden');
-      addManagerNoteBtn.classList.remove('hidden');
-    });
-    
-    // Setup submit functionality
-    document.getElementById('jobNoteSubmit').addEventListener('click', async(e) => {
-      e.preventDefault();
-      await submitNote('jobNewNote', job, false);
-      noteEditor.classList.add('hidden');
-      addNoteBtn.classList.remove('hidden');
-    });
-    
-    document.getElementById('jobNoteClear').addEventListener('click', (e) => {
-      e.preventDefault();
-      document.getElementById('jobNewNote').innerHTML = '';
-    });
-    
-    document.getElementById('managerNoteSubmit').addEventListener('click', async(e) => {
-      e.preventDefault();
-      await submitNote('managerNewNote', job, true);
-      managerNoteEditor.classList.add('hidden');
-      addManagerNoteBtn.classList.remove('hidden');
-    });
-    
-    document.getElementById('managerNoteClear').addEventListener('click', (e) => {
-      e.preventDefault();
-      document.getElementById('managerNewNote').innerHTML = '';
-    });
-  }
-  
-  // Load files for notes sections
-  async function loadFilesForNotes(folderLink) {
-    console.log('loadFilesForNotes called with:', folderLink);
-    
-    const graphToken = await getGraphToken();
-    const headers = graphToken ? { 'x-graph-token': graphToken } : {};
-    
-    try {
-      const resp = await fetch(`/api/job-files?link=${encodeURIComponent(folderLink)}`, { headers });
-      
-      if(!resp.ok) {
-        console.error('Failed to fetch files:', resp.status, resp.statusText);
-        return [];
-      }
-      
-      const data = await resp.json();
-      console.log('Files loaded:', data.items?.length || 0);
-      return data.items || [];
-    } catch(err) {
-      console.error('Error in loadFilesForNotes:', err);
-      return [];
-    }
-  }
-  
-  // Setup voice-to-text functionality
-  function setupVoiceToText(micButtonId, editorId) {
-    const micBtn = document.getElementById(micButtonId);
-    const editor = document.getElementById(editorId);
-    
-    if(!micBtn || !editor) {
-      console.log('Mic button or editor not found:', micButtonId, editorId);
-      return;
-    }
-    
-    // Check for browser support
-    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-    if(!SpeechRecognition) {
-      micBtn.disabled = true;
-      micBtn.title = 'Speech recognition not supported';
-      micBtn.style.opacity = '0.5';
-      return;
-    }
-    
-    const recognition = new SpeechRecognition();
-    recognition.continuous = true;
-    recognition.interimResults = true;
-    recognition.lang = 'en-US';
-    
-    let isListening = false;
-    const micIcon = micBtn.querySelector('svg');
-    
-    micBtn.addEventListener('click', (e) => {
-      e.preventDefault();
-      
-      if(isListening) {
-        recognition.stop();
-        isListening = false;
-        micIcon.setAttribute('fill', '#4B5563'); // Gray (inactive)
-        micBtn.style.backgroundColor = '';
-      } else {
-        try {
-          recognition.start();
-          isListening = true;
-          micIcon.setAttribute('fill', '#EF4444'); // Red (recording)
-          micBtn.style.backgroundColor = '#FEE2E2'; // Light red background
-        } catch(err) {
-          console.error('Recognition start error:', err);
-        }
-      }
-    });
-    
-    recognition.onresult = (event) => {
-      let interimTranscript = '';
-      let finalTranscript = '';
-      
-      for(let i = event.resultIndex; i < event.results.length; i++) {
-        const transcript = event.results[i][0].transcript;
-        if(event.results[i].isFinal) {
-          finalTranscript += transcript + ' ';
-        } else {
-          interimTranscript += transcript;
-        }
-      }
-      
-      if(finalTranscript) {
-        // Insert final transcript at cursor position
-        editor.focus();
-        const selection = window.getSelection();
-        if(selection.rangeCount > 0) {
-          const range = selection.getRangeAt(0);
-          range.deleteContents();
-          range.insertNode(document.createTextNode(finalTranscript));
-          range.collapse(false);
-          selection.removeAllRanges();
-          selection.addRange(range);
-        } else {
-          // Fallback: append to end
-          editor.innerHTML += finalTranscript;
-        }
-      }
-    };
-    
-    recognition.onerror = (event) => {
-      console.error('Speech recognition error:', event.error);
-      isListening = false;
-      micIcon.setAttribute('fill', '#4B5563');
-      micBtn.style.backgroundColor = '';
-      
-      if(event.error === 'not-allowed') {
-        alert('Microphone access denied. Please allow microphone access in your browser settings.');
-      }
-    };
-    
-    recognition.onend = () => {
-      isListening = false;
-      micIcon.setAttribute('fill', '#4B5563');
-      micBtn.style.backgroundColor = '';
-    };
-  }
-  
-  // Setup toolbar for note editors
-  function setupNoteEditorToolbar(editorId, containerId) {
-    const editor = document.getElementById(editorId);
-    const container = document.getElementById(containerId);
-    if(!editor || !container) return;
-    
-    let savedSelection = null;
-    function saveSelection() {
-      const sel = window.getSelection();
-      if(sel.rangeCount > 0) savedSelection = sel.getRangeAt(0);
-    }
-    function restoreSelection() {
-      const sel = window.getSelection();
-      if(savedSelection) {
-        sel.removeAllRanges();
-        sel.addRange(savedSelection);
-      }
-    }
-    
-    editor.addEventListener('mouseup', saveSelection);
-    editor.addEventListener('keyup', saveSelection);
-    editor.addEventListener('focus', saveSelection);
-    
-    const buttons = container.querySelectorAll('[data-cmd]');
-    buttons.forEach(btn => {
-      btn.addEventListener('mousedown', e => {
-        e.preventDefault();
-        restoreSelection();
-        const cmd = btn.dataset.cmd;
-        if(!cmd) return;
-        
-        if(cmd === 'foreColor') {
-          const val = btn.dataset.val;
-          document.execCommand(cmd, false, val);
-          buttons.forEach(b => {
-            if(b.dataset.cmd === 'foreColor' && b !== btn) {
-              b.classList.remove('bg-blue-100', 'text-gray-900', 'border-blue-600');
-            }
-          });
-          btn.classList.toggle('bg-blue-100');
-          btn.classList.toggle('text-gray-900');
-          btn.classList.toggle('border-blue-600');
-        } else if(cmd === 'removeFormat') {
-          restoreSelection();
-          const sel = window.getSelection();
-          if(sel.rangeCount > 0) {
-            const range = sel.getRangeAt(0);
-            let content = range.toString();
-            range.deleteContents();
-            range.insertNode(document.createTextNode(content));
-            range.setStartAfter(range.startContainer);
-            range.collapse(true);
-            sel.removeAllRanges();
-            sel.addRange(range);
-          }
-          buttons.forEach(b => b.classList.remove('bg-blue-100', 'text-gray-900', 'border-blue-600'));
-        } else {
-          document.execCommand(cmd, false, null);
-          btn.classList.toggle('bg-blue-100');
-          btn.classList.toggle('text-gray-900');
-          btn.classList.toggle('border-blue-600');
-        }
-        
-        editor.focus();
-        saveSelection();
-      });
-    });
-  }
-  
-  // Submit note function
-  async function submitNote(editorId, job, isManagerNote) {
-    const editor = document.getElementById(editorId);
-    const html = editor.innerHTML.trim();
-    if(!html) {
-      alert('Enter note text');
-      return;
-    }
-    
-    const now = new Date();
-    const timestamp = now.toLocaleString('en-US', { 
-      year: 'numeric', 
-      month: '2-digit', 
-      day: '2-digit', 
-      hour: '2-digit', 
-      minute: '2-digit', 
-      hour12: true 
-    });
-    const currentUserName = getDisplayName();
-    const noteType = isManagerNote ? 'manager' : 'job';
-    const typeLabel = isManagerNote ? '[MANAGER]' : '';
-    const formatted = `${typeLabel}[${currentUserName} - ${timestamp}] ${html}`;
-    
-    try {
-      // If it's a job note, first update Job_Info_Prod.Notes field
-      let jobRecordId = job?.id || '';
-      
-      if(!isManagerNote) {
-        // Fetch the latest notes from PocketBase to ensure we have the full chain
-        const fetchLatest = await fetch(`${PB_COLLECTION_URL}/${job.id}`, {
-          headers: authHeaders()
-        });
-        
-        if(fetchLatest.ok) {
-          const latestJob = await fetchLatest.json();
-          const currentNotes = latestJob.Notes || '';
-          const updatedNotes = formatted + '\n\n' + currentNotes;
-          
-          const resJob = await fetch(`${PB_COLLECTION_URL}/${job.id}`, {
-            method: 'PATCH',
-            headers: {'Content-Type': 'application/json', ...authHeaders()},
-            body: JSON.stringify({Notes: updatedNotes})
-          });
-          
-          if(!resJob.ok) {
-            console.error('Job_Info update failed:', resJob.status);
-            throw new Error('Failed to update Job_Info: ' + resJob.status);
-          }
-          
-          const updated = await resJob.json();
-          jobRecordId = updated.id || job.id;
-          
-          // Update both current job object and the passed job parameter
-          currentJob.Notes = updatedNotes;
-          job.Notes = updatedNotes;
-          console.log('Updated Job_Info_Prod.Notes for job:', jobRecordId);
-        } else {
-          throw new Error('Failed to fetch latest job data: ' + fetchLatest.status);
-        }
-      }
-      
-      // Create payload - only include job_info_id, not Job_Number_Id array
-      const payloadNote = {
-        Note: formatted.trim(),
-        Job_Number: job?.Job_Number || '',
-        job_info_id: jobRecordId,
-        type: noteType
-      };
-      
-      console.log('Submitting note payload:', payloadNote);
-      
-      // Create note in notes collection with type
-      const resNote = await fetch(`${NOTES_COLLECTION_URL}`, {
-        method: 'POST',
-        headers: {'Content-Type': 'application/json', ...authHeaders()},
-        body: JSON.stringify(payloadNote)
-      });
-      
-      if(!resNote.ok) {
-        const errText = await resNote.text().catch(() => '');
-        console.error('Note creation failed:', resNote.status, errText);
-        // Don't throw if Notes collection fails but Job_Info succeeded
-        if(!isManagerNote) {
-          console.warn('Note saved to Job_Info but failed to save to Notes collection');
-        } else {
-          throw new Error('Failed to save note: ' + resNote.status);
-        }
-      } else {
-        const savedNote = await resNote.json();
-        console.log('Note created successfully in Notes collection:', savedNote);
-      }
-      
-      // Clear editor
-      editor.innerHTML = '';
-      alert('Note saved successfully!');
-      
-      // Refresh the display
-      if(currentJob) {
-        await loadAndDisplayNotes(currentJob);
-      }
-    } catch(err) {
-      console.error('Error saving note:', err);
-      alert('Failed to save note: ' + err.message);
-    }
-  }
-  
-  // Load and display notes filtered by type
-  async function loadAndDisplayNotes(job) {
-    if(!job?.id) return;
-    
-    try {
-      // Fetch all notes for this job using job_info_id
-      const filter = `job_info_id="${job.id}"`;
-      const resp = await fetch(`${NOTES_COLLECTION_URL}?filter=${encodeURIComponent(filter)}&sort=-created`, {
-        headers: authHeaders()
-      });
-      
-      if(!resp.ok) {
-        console.error('Failed to fetch notes:', resp.status);
-        return;
-      }
-      
-      const data = await resp.json();
-      const allNotes = data.items || [];
-      
-      // Filter notes by type
-      const jobNotes = allNotes.filter(n => !n.type || n.type === 'job');
-      const managerNotes = allNotes.filter(n => n.type === 'manager');
-      
-      // Update job notes display using ID selector
-      const jobNotesDisplay = document.getElementById('jobNotesDisplay');
-      if(jobNotesDisplay) {
-        if(jobNotes.length > 0) {
-          jobNotesDisplay.innerHTML = jobNotes.map(n => n.Note).join('\n\n');
-        } else {
-          jobNotesDisplay.innerHTML = '<span class="text-gray-400 italic">No notes available</span>';
-        }
-      }
-      
-      // Update manager notes display using ID selector
-      const managerNotesDisplay = document.getElementById('managerNotesDisplay');
-      if(managerNotesDisplay) {
-        if(managerNotes.length > 0) {
-          managerNotesDisplay.innerHTML = managerNotes.map(n => n.Note).join('\n\n');
-        } else {
-          managerNotesDisplay.innerHTML = '<span class="text-gray-400 italic">No manager notes available</span>';
-        }
-      }
-      
-      console.log('Loaded notes - Job:', jobNotes.length, 'Manager:', managerNotes.length);
-    } catch(err) {
-      console.error('Error loading notes:', err);
-    }
-  }
-  
-  // Function to populate file columns in notes section
-  function populateNotesFileColumns(files, containerId) {
-    const container = document.getElementById(containerId);
-    if(!container) {
-      console.log('Container not found:', containerId);
-      return;
-    }
-    
-    console.log('Populating', containerId, 'with', files.length, 'files');
-    container.innerHTML = '';
-    
-    // Categorize files
-    const plans = [];
-    const estimates = [];
-    const otherFiles = [];
-    
-    if(files && files.length > 0) {
-      files.forEach(file => {
-        const name = file.name.toLowerCase();
-        if(name.includes('plan') || name.includes('drawing') || name.includes('dwg')) {
-          plans.push(file);
-        } else if(name.includes('estimate') || name.includes('est')) {
-          estimates.push(file);
-        } else {
-          otherFiles.push(file);
-        }
-      });
-      console.log('Categorized - Plans:', plans.length, 'Estimates:', estimates.length, 'Other:', otherFiles.length);
-    }
-    
-    // Plans column
-    const plansCol = document.createElement('div');
-    plansCol.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Plans</div>`;
-    const plansList = document.createElement('div');
-    plansList.className = 'space-y-1';
-    if(plans.length > 0) {
-      plans.forEach(file => {
-        const fileItem = document.createElement('div');
-        fileItem.className = 'flex items-center gap-1 text-blue-600 hover:text-blue-800 cursor-pointer';
-        fileItem.style.fontSize = '10px';
-        
-        // File icon using getFileIcon
-        const iconWrapper = document.createElement('span');
-        iconWrapper.className = 'flex-shrink-0';
-        iconWrapper.innerHTML = getFileIcon(file.name, file.contentType);
-        fileItem.appendChild(iconWrapper);
-        
-        const fileName = document.createElement('span');
-        fileName.textContent = file.name;
-        fileName.className = 'truncate';
-        fileItem.appendChild(fileName);
-        
-        fileItem.onclick = () => openFilePreview(file.driveId || '', file.id || '', file.name, file.contentType || '', file.url);
-        plansList.appendChild(fileItem);
-      });
-    } else {
-      plansList.innerHTML = `<div class="text-gray-400 italic" style="font-size: 10px;">No plans</div>`;
-    }
-    plansCol.appendChild(plansList);
-    
-    // Estimates column
-    const estimatesCol = document.createElement('div');
-    estimatesCol.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Estimates</div>`;
-    const estimatesList = document.createElement('div');
-    estimatesList.className = 'space-y-1';
-    if(estimates.length > 0) {
-      estimates.forEach(file => {
-        const fileItem = document.createElement('div');
-        fileItem.className = 'flex items-center gap-1 text-blue-600 hover:text-blue-800 cursor-pointer';
-        fileItem.style.fontSize = '10px';
-        
-        // File icon using getFileIcon
-        const iconWrapper = document.createElement('span');
-        iconWrapper.className = 'flex-shrink-0';
-        iconWrapper.innerHTML = getFileIcon(file.name, file.contentType);
-        fileItem.appendChild(iconWrapper);
-        
-        const fileName = document.createElement('span');
-        fileName.textContent = file.name;
-        fileName.className = 'truncate';
-        fileItem.appendChild(fileName);
-        
-        fileItem.onclick = () => openFilePreview(file.driveId || '', file.id || '', file.name, file.contentType || '', file.url);
-        estimatesList.appendChild(fileItem);
-      });
-    } else {
-      estimatesList.innerHTML = `<div class="text-gray-400 italic" style="font-size: 10px;">No estimates</div>`;
-    }
-    estimatesCol.appendChild(estimatesList);
-    
-    // Other Files column
-    const otherCol = document.createElement('div');
-    otherCol.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Other Files</div>`;
-    const otherList = document.createElement('div');
-    otherList.className = 'space-y-1';
-    if(otherFiles.length > 0) {
-      otherFiles.forEach(file => {
-        const fileItem = document.createElement('div');
-        fileItem.className = 'flex items-center gap-1 text-blue-600 hover:text-blue-800 cursor-pointer';
-        fileItem.style.fontSize = '10px';
-        
-        // File icon using getFileIcon
-        const iconWrapper = document.createElement('span');
-        iconWrapper.className = 'flex-shrink-0';
-        iconWrapper.innerHTML = getFileIcon(file.name, file.contentType);
-        fileItem.appendChild(iconWrapper);
-        
-        const fileName = document.createElement('span');
-        fileName.textContent = file.name;
-        fileName.className = 'truncate';
-        fileItem.appendChild(fileName);
-        
-        fileItem.onclick = () => openFilePreview(file.driveId || '', file.id || '', file.name, file.contentType || '', file.url);
-        otherList.appendChild(fileItem);
-      });
-    } else {
-      otherList.innerHTML = `<div class="text-gray-400 italic" style="font-size: 10px;">No other files</div>`;
-    }
-    otherCol.appendChild(otherList);
-    
-    container.appendChild(plansCol);
-    container.appendChild(estimatesCol);
-    container.appendChild(otherCol);
-  }
-
-  const closeModal = ()=>{ detailModal.classList.add('hidden'); renderCards(visibleJobs); };
-  document.getElementById('btnClose').addEventListener('click',closeModal);
-  document.getElementById('backBtn').addEventListener('click',closeModal);
-
-  // Tab switching
-  function switchTab(tab){
-    const infoTab = document.getElementById('infoTab');
-    const notesTab = document.getElementById('notesTab');
-    const managerInfoTab = document.getElementById('managerInfoTab');
-    const infoContent = document.getElementById('infoContent');
-    const notesContent = document.getElementById('notesContent');
-    const managerInfoContent = document.getElementById('managerInfoContent');
-    const infoHeading = document.getElementById('infoHeading');
-    const notesHeading = document.getElementById('notesHeading');
-    const managerInfoHeading = document.getElementById('managerInfoHeading');
-    
-    if(tab === 'info'){
-      infoTab.className = 'px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600 -mb-px';
-      notesTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
-      managerInfoTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
-      infoContent.classList.remove('hidden');
-      notesContent.classList.add('hidden');
-      managerInfoContent.classList.add('hidden');
-      if(infoHeading) infoHeading.classList.remove('hidden');
-      if(notesHeading) notesHeading.classList.add('hidden');
-      if(managerInfoHeading) managerInfoHeading.classList.add('hidden');
-    } else if(tab === 'notes') {
-      infoTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
-      notesTab.className = 'px-4 py-2 text-sm font-medium text-orange-600 border-b-2 border-orange-600 -mb-px';
-      managerInfoTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
-      infoContent.classList.add('hidden');
-      notesContent.classList.remove('hidden');
-      managerInfoContent.classList.add('hidden');
-      if(infoHeading) infoHeading.classList.add('hidden');
-      if(notesHeading) notesHeading.classList.remove('hidden');
-      if(managerInfoHeading) managerInfoHeading.classList.add('hidden');
-    } else if(tab === 'managerInfo') {
-      infoTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
-      notesTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
-      managerInfoTab.className = 'px-4 py-2 text-sm font-medium text-green-600 border-b-2 border-green-600 -mb-px';
-      infoContent.classList.add('hidden');
-      notesContent.classList.add('hidden');
-      managerInfoContent.classList.remove('hidden');
-      if(infoHeading) infoHeading.classList.add('hidden');
-      if(notesHeading) notesHeading.classList.add('hidden');
-      if(managerInfoHeading) managerInfoHeading.classList.remove('hidden');
-    }
-  }
-  
-  document.getElementById('infoTab').addEventListener('click',()=>switchTab('info'));
-  document.getElementById('notesTab').addEventListener('click',()=>switchTab('notes'));
-  document.getElementById('managerInfoTab').addEventListener('click',()=>{
-    switchTab('managerInfo');
-    populateManagerInfo(currentJob);
-  });
-
-  // --- Toolbar ---
-  let savedSelection = null;
-  function saveSelection(){ const sel=window.getSelection(); if(sel.rangeCount>0)savedSelection=sel.getRangeAt(0);}
-  function restoreSelection(){ const sel=window.getSelection(); if(savedSelection){ sel.removeAllRanges(); sel.addRange(savedSelection);}}
-  newNote.addEventListener('mouseup',saveSelection); newNote.addEventListener('keyup',saveSelection); newNote.addEventListener('focus',saveSelection);
-  tbButtons.forEach(btn=>{
-    btn.addEventListener('mousedown', e=>{
-      e.preventDefault();
-      restoreSelection();
-      const cmd = btn.dataset.cmd;
-      if(!cmd) return;
-      if(cmd==='foreColor'){ const val=btn.dataset.val; document.execCommand(cmd,false,val); tbButtons.forEach(b=>{if(b.dataset.cmd==='foreColor'&&b!==btn)b.classList.remove('bg-blue-100', 'text-gray-900', 'border-blue-600');}); btn.classList.toggle('bg-blue-100'); btn.classList.toggle('text-gray-900'); btn.classList.toggle('border-blue-600'); }
-      else if(cmd==='removeFormat'){ restoreSelection(); const sel=window.getSelection(); if(sel.rangeCount>0){ const range=sel.getRangeAt(0); let content=range.toString(); range.deleteContents(); range.insertNode(document.createTextNode(content)); range.setStartAfter(range.startContainer); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } tbButtons.forEach(b=>b.classList.remove('bg-blue-100', 'text-gray-900', 'border-blue-600')); }
-      else{ document.execCommand(cmd,false,null); btn.classList.toggle('bg-blue-100'); btn.classList.toggle('text-gray-900'); btn.classList.toggle('border-blue-600'); }
-      newNote.focus(); saveSelection();
-    });
-  });
-
-  // --- Submit Note ---
-  document.getElementById('btnSubmit').addEventListener('click', async()=>{
-    const html=newNote.innerHTML.trim(); if(!html){alert('Enter note text'); return;}
-    const now = new Date();
-    const timestamp = now.toLocaleString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: true });
-    const currentUserName = getDisplayName();
-    const formatted=`[${currentUserName} - ${timestamp}] [Job #${currentJob?.Job_Number||'N/A'}] ${html}\n\n`;
-    const updatedNotes = formatted + (currentJob.Notes||'');
-    try{
-      const payloadNote = {
-        Note: formatted.trim(),
-        Job_Number: currentJob?.Job_Number || '',
-        // Job_Number_Id is a multiple relation field, so send as array
-        Job_Number_Id: currentJob?.id ? [currentJob.id] : []
-      };
-
-      // First: Update job record in prod
-      const resJob = await fetch(`${PB_COLLECTION_URL}/${currentJob.id}`,{
-        method:'PATCH',
-        headers:{'Content-Type':'application/json', ...authHeaders()},
-        body:JSON.stringify({Notes:updatedNotes})
-      });
-
-      if(!resJob.ok) throw new Error('Job_Info update failed: '+resJob.status);
-      const updated=await resJob.json();
-      const jobIdToLink = updated.id || currentJob.id;
-
-      // Second: Create note in notes collection with the confirmed job ID
-      payloadNote.Job_Number_Id = [jobIdToLink];
-      console.log('Submitting note payload:', payloadNote);
-      const resNote = await fetch(`${NOTES_COLLECTION_URL}`,{
-        method:'POST',
-        headers:{'Content-Type':'application/json', ...authHeaders()},
-        body:JSON.stringify(payloadNote)
-      });
-      // If note creation failed, try fallback by appending job info into the note text
-      if(!resNote.ok){
-        const errText = await resNote.text().catch(()=> '');
-        console.warn('Note creation failed with status', resNote.status, ':', errText);
-        console.log('Payload that failed:', JSON.stringify(payloadNote, null, 2));
-        // Retry with fallback if it's a 400 validation error (likely field mismatch)
-        const shouldFallback = resNote.status === 400;
-        if(shouldFallback){
-          const fallbackPayload = {
-            Note: `${formatted.trim()}\n(Relation fallback: Job #${currentJob?.Job_Number||'N/A'} | ID ${currentJob?.id||'unknown'})`,
-            Job_Number: currentJob?.Job_Number || ''
-          };
-          try{
-            const retry = await fetch(`${NOTES_COLLECTION_URL}`,{
-              method:'POST',
-              headers:{'Content-Type':'application/json', ...authHeaders()},
-              body:JSON.stringify(fallbackPayload)
-            });
-            if(!retry.ok){
-              const retryText = await retry.text().catch(()=> '');
-              console.warn('Fallback retry failed:', retry.status, retryText);
-            }else{
-              console.log('Fallback retry succeeded');
-            }
-          }catch(e){ console.warn('Notes create retry error:', e?.message||e); }
-        }else{
-          console.warn('Notes create failed (non-fallback scenario):', resNote.status, errText);
-        }
-      }
-
-      const idx=jobsCache.findIndex(j=>j.id===currentJob.id); if(idx>=0) jobsCache[idx].Notes=updated.Notes; currentJob.Notes=updated.Notes;
-      jobNotes.innerHTML=updated.Notes; newNote.innerHTML='';
-    }catch(err){alert('Error saving note: '+err.message); console.error(err);}
-  });
-  document.getElementById('btnClearNote').addEventListener('click',()=>newNote.innerHTML='');
-
-  // --- Iframe Viewer Controls ---
-  const iframeViewerModal = document.getElementById('iframeViewerModal');
-  const iframeViewer = document.getElementById('iframeViewer');
-  const iframeLoader = document.getElementById('iframeLoader');
-  const iframeTitle = document.getElementById('iframeTitle');
-  const iframeBackBtn = document.getElementById('iframeBackBtn');
-  const iframeCloseBtn = document.getElementById('iframeCloseBtn');
-  const fileListContainer = document.getElementById('fileListContainer');
-
-  const categoryKeywords = {
-    managerInfo: ['manager info', 'manager_info', 'managerinfo'],
-    contracts: ['contract', 'estimate', 'proposal', 'bid', 'award', 'agreement', 'sow'],
-    plans: ['plan', 'drawing', 'dwg', 'pdf', 'sheet', 'layout'],
-    submittals: ['submittal', 'submittals', 'submit'],
-  };
-
-  const DEFAULT_PDF_SCALE = 1.4;
-  const MIN_PDF_SCALE = 0.3;
-  const MAX_PDF_SCALE = 5.0;
-  const fileListState = { items: [], filter: '', jobNumber: '', jobName: '' };
-  let currentPreviewUrl = null;
-  let currentPdf = { doc: null, page: 1, pages: 1, scale: DEFAULT_PDF_SCALE };
-  let pdfPan = { x: 0, y: 0, dragging: false, startX: 0, startY: 0, baseX: 0, baseY: 0 };
-  const pdfViewer = document.getElementById('pdfViewer');
-  const pdfCanvas = document.getElementById('pdfCanvas');
-  const pdfViewport = document.getElementById('pdfViewport');
-  const pdfControls = document.getElementById('pdfControls');
-  const pdfPageNum = document.getElementById('pdfPageNum');
-  const pdfPageCount = document.getElementById('pdfPageCount');
-  const pdfPrev = document.getElementById('pdfPrev');
-  const pdfNext = document.getElementById('pdfNext');
-  const pdfZoomIn = document.getElementById('pdfZoomIn');
-  const pdfZoomOut = document.getElementById('pdfZoomOut');
-  const pdfZoomReset = document.getElementById('pdfZoomReset');
-  const pdfZoomLabel = document.getElementById('pdfZoomLabel');
-  const pdfCloseAll = document.getElementById('pdfCloseAll');
-
-  const categorize = (name = '') => {
-    const n = name.toLowerCase();
-    if (categoryKeywords.managerInfo.some((w) => n.includes(w))) return 'managerInfo';
-    if (categoryKeywords.contracts.some((w) => n.includes(w))) return 'contracts';
-    if (categoryKeywords.submittals.some((w) => n.includes(w))) return 'submittals';
-    if (categoryKeywords.plans.some((w) => n.includes(w))) return 'plans';
-    return 'other';
-  };
-
-  // File cache for client-side only (server handles pre-caching)
-  const fileCache = new Map();
-
-  async function preloadJobFiles(job) {
-    const link = job.Job_Folder_Link;
-    if (!link) return;
-    
-    // Simple client-side cache check
-    if (fileCache.has(link)) return;
-    
-    try {
-      const graphToken = await getGraphToken();
-      const headers = graphToken ? { 'x-graph-token': graphToken } : {};
-
-      const controller = new AbortController();
-      const timeout = setTimeout(() => controller.abort(), 15000);
-      let resp = await fetch(`/api/job-files?link=${encodeURIComponent(link)}`, { headers, signal: controller.signal });
-      clearTimeout(timeout);
-
-
-      if (resp.ok) {
-        const data = await resp.json();
-        const rootDriveId = data.driveId || '';
-        const items = (data.items || []).map(f => ({
-          ...f,
-          driveId: f.driveId || rootDriveId
-        }));
-        fileCache.set(link, { items, driveId: rootDriveId, cachedAt: Date.now() });
-        console.log(`✓ Cached ${items.length} files for job ${job.Job_Number}`);
-      }
-    } catch (err) {
-      // Silently fail for background caching
-      if (err.name !== 'AbortError') {
-        console.debug(`Cache skip for job ${job.Job_Number}:`, err.message);
-      }
-    }
-  }
-
-  const formatSize = (bytes) => {
-    if (!bytes && bytes !== 0) return '';
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
-    return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
-  };
-
-  const getFileIcon = (name, contentType) => {
-    const ext = (name || '').toLowerCase().split('.').pop();
-    const type = (contentType || '').toLowerCase();
-    
-    if (ext === 'pdf' || type.includes('pdf')) 
-      return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none"><rect fill="#D32F2F" width="24" height="24" rx="2"/><text x="12" y="16" font-size="10" font-weight="bold" fill="white" text-anchor="middle">PDF</text></svg>';
-    
-    // Show Word icon with PDF badge to indicate it will be converted
-    if (['doc', 'docx'].includes(ext) || type.includes('word')) 
-      return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none"><rect fill="#2B579A" width="24" height="24" rx="2"/><text x="12" y="16" font-size="10" font-weight="bold" fill="white" text-anchor="middle">W</text></svg>';
-    
-    if (['xls', 'xlsx'].includes(ext) || type.includes('excel') || type.includes('spreadsheet')) 
-      return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none"><rect fill="#217346" width="24" height="24" rx="2"/><text x="12" y="16" font-size="10" font-weight="bold" fill="white" text-anchor="middle">X</text></svg>';
-    
-    if (['ppt', 'pptx'].includes(ext) || type.includes('powerpoint') || type.includes('presentation')) 
-      return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none"><rect fill="#D35230" width="24" height="24" rx="2"/><text x="12" y="16" font-size="10" font-weight="bold" fill="white" text-anchor="middle">P</text></svg>';
-    
-    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'].includes(ext) || type.includes('image')) 
-      return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2"/><circle cx="8" cy="8" r="2"/><path d="M21 15l-5-5L5 21"/></svg>';
-    
-    if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext) || type.includes('zip') || type.includes('compressed')) 
-      return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5-9h-3v4h3v-4zm0-3h-3v2h3V7z"/></svg>';
-    
-    if (['txt', 'csv', 'log'].includes(ext) || type.includes('text')) 
-      return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/><path d="M16 13H8M16 17H8M10 9H8"/></svg>';
-    
-    return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/></svg>';
-  };
-
-  const canPreviewInline = (name, contentType) => {
-    const ext = (name || '').toLowerCase().split('.').pop();
-    const type = (contentType || '').toLowerCase();
-    // Allow Word docs to be previewed (will be converted to PDF)
-    return ext === 'pdf' || type.includes('pdf') || 
-           ['doc', 'docx'].includes(ext) || type.includes('word') ||
-           ['jpg', 'jpeg', 'png', 'gif', 'svg', 'bmp'].includes(ext) || type.includes('image');
-  };
-
-  function openFileInViewer(url, name) {
-    const jobPrefix = fileListState.jobNumber ? `Job# ${fileListState.jobNumber}${fileListState.jobName ? ' - ' + fileListState.jobName : ''} - ` : '';
-    iframeViewerModal.classList.remove('hidden');
-    iframeTitle.textContent = `${jobPrefix}${name || 'File Preview'}`;
-    fileListContainer.classList.add('hidden');
-    pdfViewer.classList.add('hidden');
-    iframeViewer.classList.remove('hidden');
-    iframeLoader.classList.remove('hidden');
-    iframeLoader.innerHTML = `
-      <div class="text-center">
-        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
-        <div class="text-gray-600 text-lg">Loading preview...</div>
-      </div>
-    `;
-    iframeViewer.src = 'about:blank';
-    setTimeout(() => {
-      iframeViewer.src = url;
-    }, 50);
-  }
-  window.openFileInViewer = openFileInViewer;
-
-  async function renderPdfPage() {
-    const { doc, page, scale, isImage } = currentPdf;
-    if (isImage) {
-      renderImageOnCanvas();
-      return;
-    }
-    if (!doc) return;
-    const pageObj = await doc.getPage(page);
-    const viewport = pageObj.getViewport({ scale });
-    const canvas = pdfCanvas;
-    const context = canvas.getContext('2d');
-    canvas.height = viewport.height;
-    canvas.width = viewport.width;
-    const renderContext = { canvasContext: context, viewport };
-    await pageObj.render(renderContext).promise;
-    pdfPageNum.textContent = page.toString();
-    pdfPageCount.textContent = doc.numPages.toString();
-    // re-apply pan transform after render
-    pdfCanvas.style.transform = `translate(${pdfPan.x}px, ${pdfPan.y}px)`;
-    pdfZoomLabel.textContent = `${Math.round(currentPdf.scale * 100)}%`;
-    pdfZoomReset.textContent = `${Math.round(currentPdf.scale * 100)}%`;
-  }
-
-  function renderImageOnCanvas() {
-    const { scale, imageElement, imageWidth, imageHeight } = currentPdf;
-    if (!imageElement) return;
-    const canvas = pdfCanvas;
-    const context = canvas.getContext('2d');
-    const scaledWidth = imageWidth * scale;
-    const scaledHeight = imageHeight * scale;
-    canvas.width = scaledWidth;
-    canvas.height = scaledHeight;
-    context.clearRect(0, 0, canvas.width, canvas.height);
-    context.drawImage(imageElement, 0, 0, scaledWidth, scaledHeight);
-    // re-apply pan transform after render
-    pdfCanvas.style.transform = `translate(${pdfPan.x}px, ${pdfPan.y}px)`;
-    pdfZoomLabel.textContent = `${Math.round(scale * 100)}%`;
-    pdfZoomReset.textContent = `${Math.round(scale * 100)}%`;
-  }
-
-  function showPdfViewer() {
-    iframeViewer.classList.add('hidden');
-    pdfViewer.classList.remove('hidden');
-    iframeLoader.classList.add('hidden');
-    // Ensure PDF controls are visible (might be hidden for images)
-    pdfControls.style.display = '';
-    // Show page navigation for PDFs
-    pdfPrev.parentElement.style.display = '';
-    pdfNext.parentElement.style.display = '';
-    pdfPageNum.parentElement.style.display = '';
-  }
-
-  pdfPrev.addEventListener('click', async () => {
-    if (!currentPdf.doc) return;
-    if (currentPdf.page <= 1) return;
-    currentPdf.page -= 1;
-    await renderPdfPage();
-  });
-  pdfNext.addEventListener('click', async () => {
-    if (!currentPdf.doc) return;
-    if (currentPdf.page >= currentPdf.pages) return;
-    currentPdf.page += 1;
-    await renderPdfPage();
-  });
-  pdfZoomIn.addEventListener('click', async () => {
-    if (!currentPdf.doc && !currentPdf.isImage) return;
-    currentPdf.scale = Math.min(currentPdf.scale + 0.1, MAX_PDF_SCALE);
-    await renderPdfPage();
-  });
-  pdfZoomOut.addEventListener('click', async () => {
-    if (!currentPdf.doc && !currentPdf.isImage) return;
-    currentPdf.scale = Math.max(currentPdf.scale - 0.1, MIN_PDF_SCALE);
-    await renderPdfPage();
-  });
-  pdfZoomReset.addEventListener('click', async () => {
-    if (!currentPdf.doc && !currentPdf.isImage) return;
-    currentPdf.scale = currentPdf.isImage ? 1 : DEFAULT_PDF_SCALE;
-    pdfPan = { x: 0, y: 0, dragging: false, startX: 0, startY: 0, baseX: 0, baseY: 0 };
-    pdfCanvas.style.transform = 'translate(0px, 0px)';
-    await renderPdfPage();
-  });
-
-  // Drag-to-pan on PDF canvas + pinch-to-zoom
-  pdfCanvas.style.touchAction = 'none';
-  pdfCanvas.style.transformOrigin = '0 0';
-  const applyPan = () => {
-    pdfCanvas.style.transform = `translate(${pdfPan.x}px, ${pdfPan.y}px)`;
-  };
-  const activePointers = new Map();
-  let pinchStartDistance = null;
-  let pinchStartScale = null;
-  const distanceBetween = () => {
-    if (activePointers.size < 2) return null;
-    const pts = Array.from(activePointers.values());
-    const a = pts[0];
-    const b = pts[1];
-    const dx = a.x - b.x;
-    const dy = a.y - b.y;
-    return Math.hypot(dx, dy);
-  };
-
-  pdfCanvas.addEventListener('wheel', async (e) => {
-    if (!currentPdf.doc && !currentPdf.isImage) return;
-    e.preventDefault();
-    const delta = e.deltaY;
-    const step = 0.1;
-    if (delta < 0) {
-      currentPdf.scale = Math.min(currentPdf.scale + step, MAX_PDF_SCALE);
-    } else {
-      currentPdf.scale = Math.max(currentPdf.scale - step, MIN_PDF_SCALE);
-    }
-    await renderPdfPage();
-  }, { passive: false });
-
-  // Toolbar close (X) goes back to file list
-  pdfCloseAll.addEventListener('click', () => {
-    pdfViewer.classList.add('hidden');
-    iframeLoader.classList.add('hidden');
-    iframeViewer.classList.add('hidden');
-    fileListContainer.classList.remove('hidden');
-  });
-  pdfCanvas.addEventListener('pointerdown', (e) => {
-    if (!currentPdf.doc && !currentPdf.isImage) return;
-    activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
-
-    if (activePointers.size === 2) {
-      pinchStartDistance = distanceBetween();
-      pinchStartScale = currentPdf.scale;
-      pdfPan.dragging = false;
-    } else if (activePointers.size === 1) {
-      pdfPan.dragging = true;
-      pdfPan.startX = e.clientX;
-      pdfPan.startY = e.clientY;
-      pdfPan.baseX = pdfPan.x;
-      pdfPan.baseY = pdfPan.y;
-      pdfCanvas.style.cursor = 'grabbing';
-    }
-
-    pdfCanvas.setPointerCapture(e.pointerId);
-  });
-
-  pdfCanvas.addEventListener('pointermove', (e) => {
-    if (!currentPdf.doc && !currentPdf.isImage) return;
-
-    if (activePointers.has(e.pointerId)) {
-      activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
-    }
-
-    if (activePointers.size >= 2 && pinchStartDistance) {
-      const dist = distanceBetween();
-      if (dist) {
-        const scale = pinchStartScale * (dist / pinchStartDistance);
-        currentPdf.scale = Math.min(Math.max(scale, MIN_PDF_SCALE), MAX_PDF_SCALE);
-        // Don't render during move, only update the scale value
-      }
-      return;
-    }
-
-    if (!pdfPan.dragging) return;
-    const dx = e.clientX - pdfPan.startX;
-    const dy = e.clientY - pdfPan.startY;
-    pdfPan.x = pdfPan.baseX + dx;
-    pdfPan.y = pdfPan.baseY + dy;
-    applyPan();
-  });
-
-  const endPan = (e) => {
-    if (activePointers.has(e.pointerId)) {
-      activePointers.delete(e.pointerId);
-    }
-
-    if (activePointers.size < 2) {
-      if (pinchStartDistance) {
-        // Render once after pinch ends
-        renderPdfPage();
-      }
-      pinchStartDistance = null;
-      pinchStartScale = null;
-    }
-
-    if (activePointers.size === 0) {
-      pdfPan.dragging = false;
-      pdfCanvas.style.cursor = 'grab';
-    }
-
-    if (e && e.pointerId) {
-      try { pdfCanvas.releasePointerCapture(e.pointerId); } catch {}
-    }
-  };
-  pdfCanvas.addEventListener('pointerup', endPan);
-  pdfCanvas.addEventListener('pointercancel', endPan);
-
-  async function openFilePreview(driveId, itemId, name, contentType, fallbackUrl) {
-    // If no drive/item info, just open the URL directly
-    if (!driveId || !itemId) {
-      openFileInViewer(fallbackUrl, name);
-      return;
-    }
-
-    const graphToken = await getGraphToken();
-    if (!graphToken) {
-      console.warn('Graph token missing; using fallback URL');
-      openFileInViewer(fallbackUrl, name);
-      return;
-    }
-
-    iframeViewerModal.classList.remove('hidden');
-    const jobPrefix = fileListState.jobNumber ? `Job# ${fileListState.jobNumber}${fileListState.jobName ? ' - ' + fileListState.jobName : ''} - ` : '';
-    iframeTitle.textContent = `${jobPrefix}${name || 'File Preview'}`;
-    fileListContainer.classList.add('hidden');
-    iframeViewer.classList.add('hidden');
-    pdfViewer.classList.add('hidden');
-    iframeLoader.classList.remove('hidden');
-
-    // Detect if this is a Word document
-    const ext = (name || '').toLowerCase().split('.').pop();
-    const isWordDoc = ['doc', 'docx'].includes(ext) || (contentType || '').toLowerCase().includes('word');
-
-    iframeLoader.innerHTML = `
-      <div class="text-center">
-        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
-        <div class="text-gray-600 text-lg">${isWordDoc ? 'Converting to PDF...' : 'Loading preview...'}</div>
-      </div>
-    `;
-
-    // Clear prior blob URL if any
-    if (currentPreviewUrl) {
-      URL.revokeObjectURL(currentPreviewUrl);
-      currentPreviewUrl = null;
-    }
-
-    try {
-      // Use PDF conversion endpoint for Word documents
-      const endpoint = isWordDoc 
-        ? `/api/job-file-pdf?driveId=${encodeURIComponent(driveId)}&itemId=${encodeURIComponent(itemId)}`
-        : `/api/job-file-content?driveId=${encodeURIComponent(driveId)}&itemId=${encodeURIComponent(itemId)}`;
-      
-      const res = await fetch(endpoint, {
-        headers: { 'x-graph-token': graphToken }
-      });
-      if (!res.ok) throw new Error(`Preview fetch failed: ${res.status}`);
-      const blob = await res.blob();
-      currentPreviewUrl = URL.createObjectURL(blob);
-
-      // Word docs are converted to PDF, so treat them as PDFs
-      const isPdf = isWordDoc || (contentType || '').toLowerCase().includes('pdf') || (name || '').toLowerCase().endsWith('.pdf');
-      const isImage = (contentType || '').toLowerCase().includes('image') || 
-                      /\.(jpg|jpeg|png|gif|bmp|tiff|webp)$/i.test(name || '');
-      
-      if (isPdf && window['pdfjsLib']) {
-        const data = await blob.arrayBuffer();
-        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
-        const doc = await pdfjsLib.getDocument({ data }).promise;
-        const targetScale = DEFAULT_PDF_SCALE;
-        // Start at 100% to ensure proper positioning
-        currentPdf = { doc, page: 1, pages: doc.numPages, scale: 1.0 };
-        pdfPan = { x: 0, y: 0, dragging: false, startX: 0, startY: 0, baseX: 0, baseY: 0 };
-        pdfCanvas.style.transform = 'translate(0px, 0px)';
-        showPdfViewer();
-        await renderPdfPage();
-        // Set scroll with small offset (48px right, 36px down)
-        if (pdfViewport) {
-          pdfViewport.scrollLeft = 48;
-          pdfViewport.scrollTop = 36;
-        }
-        // Now scale to target zoom if different
-        if (targetScale !== 1.0) {
-          currentPdf.scale = targetScale;
-          await renderPdfPage();
-        }
-      } else if (isImage) {
-        // Show images in the PDF viewer area for consistency
-        pdfViewer.classList.remove('hidden');
-        iframeViewer.classList.add('hidden');
-        iframeLoader.classList.add('hidden');
-        
-        // Store original image for re-rendering at different scales
-        const img = new Image();
-        img.onload = () => {
-          currentPdf = { 
-            doc: null, 
-            page: 1, 
-            pages: 1, 
-            scale: 1,
-            isImage: true,
-            imageElement: img,
-            imageWidth: img.width,
-            imageHeight: img.height
-          };
-          pdfPan = { x: 0, y: 0, dragging: false, startX: 0, startY: 0, baseX: 0, baseY: 0 };
-          pdfCanvas.style.transform = 'translate(0px, 0px)';
-          renderImageOnCanvas();
-          
-          // Show PDF controls (zoom works for images too)
-          pdfControls.style.display = '';
-          // Hide page navigation for images
-          pdfPrev.parentElement.style.display = 'none';
-          pdfNext.parentElement.style.display = 'none';
-          pdfPageNum.parentElement.style.display = 'none';
-        };
-        img.src = currentPreviewUrl;
-      } else {
-        // fallback to iframe blob view
-        iframeViewer.src = 'about:blank';
-        setTimeout(() => {
-          iframeViewer.src = currentPreviewUrl;
-          iframeViewer.classList.remove('hidden');
-          iframeLoader.classList.add('hidden');
-        }, 10);
-      }
-    } catch (err) {
-      console.error('Preview load error', err);
-      // Fallback to direct open
-      openFileInViewer(fallbackUrl, name);
-    }
-  }
-  window.openFilePreview = openFilePreview;
-
-  function renderFileGroups(folderLink) {
-    const term = (fileListState.filter || '').toLowerCase().trim();
-    const filtered = fileListState.items
-      .filter((f) => {
-        // Show PDF files, Word documents (which will be converted to PDF), and images
-        if (f.isFolder) return false;
-        const name = f.name.toLowerCase();
-        const contentType = (f.contentType || '').toLowerCase();
-        const isPdfOrWord = name.endsWith('.pdf') || contentType.includes('pdf') ||
-                           name.endsWith('.doc') || name.endsWith('.docx') || contentType.includes('word');
-        const isImage = name.endsWith('.jpg') || name.endsWith('.jpeg') || name.endsWith('.png') || 
-                       name.endsWith('.gif') || name.endsWith('.bmp') || name.endsWith('.tiff') || 
-                       name.endsWith('.webp') || contentType.includes('image');
-        if (!isPdfOrWord && !isImage) return false;
-        // Apply search term filter if present
-        return name.includes(term);
-      });
-    const groups = { managerInfo: [], contracts: [], submittals: [], plans: [], other: [] };
-    filtered.forEach((f) => groups[categorize(f.name)].push(f));
-
-    const renderGroup = (title, list) => {
-      if (!list.length) return '';
-      const rows = list
-        .map(
-          (f) => {
-            const icon = getFileIcon(f.name, f.contentType);
-            const canPreview = canPreviewInline(f.name, f.contentType);
-            const openBtn = canPreview
-              ? `<button class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm" onclick="openFilePreview('${f.driveId||''}', '${f.id||''}', '${f.name.replace(/'/g, "\\'")}', '${f.contentType||''}', '${f.url}')">Preview</button>`
-              : `<a class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm" href="${f.url}" target="_blank" rel="noopener">Open</a>`;
-            return `
-          <div class="flex items-center justify-between py-2 border-b border-gray-100">
-            <div class="flex items-center min-w-0 gap-2">
-              <span class="text-gray-600 flex-shrink-0">${icon}</span>
-              <div class="min-w-0">
-                <div class="font-medium text-gray-800 truncate" title="${f.name}">${f.name}</div>
-                <div class="text-xs text-gray-500">
-                  ${formatSize(f.size) || '—'} · ${f.modified ? new Date(f.modified).toLocaleDateString() : ''}
-                </div>
-              </div>
-            </div>
-            <div class="flex items-center gap-2 flex-shrink-0">
-              ${openBtn}
-            </div>
-          </div>
-        `;
-          }
-        )
-        .join('');
-      return `
-        <div class="mb-5">
-          <div class="text-sm font-semibold text-gray-700 mb-2">${title} (${list.length})</div>
-          <div class="divide-y divide-gray-100 border border-gray-100 rounded-lg bg-white shadow-sm">${rows}</div>
-        </div>`;
-    };
-    const groupsMarkup = `
-      ${renderGroup('Manager Info', groups.managerInfo)}
-      ${renderGroup('Contracts / Estimates', groups.contracts)}
-      ${renderGroup('Submittals', groups.submittals)}
-      ${renderGroup('Plans', groups.plans)}
-      ${renderGroup('Other', groups.other)}
-      ${!filtered.length ? '<div class="text-gray-500 text-sm">No files found.</div>' : ''}
-    `;
-
-    let groupsHost = fileListContainer.querySelector('.file-groups');
-    if (!groupsHost) {
-      fileListContainer.innerHTML = `
-        <div class="flex items-center gap-2 mb-3 file-search-row px-4 pt-4 flex-shrink-0">
-          <input id="fileSearchInput" type="search" placeholder="Search files" value="${fileListState.filter}" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg" />
-          <a data-folder-link href="${folderLink}" target="_blank" rel="noopener" class="px-3 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-sm text-gray-800">Open folder</a>
-        </div>
-        <div class="file-groups flex-1 overflow-auto px-4 pb-4"></div>
-      `;
-      groupsHost = fileListContainer.querySelector('.file-groups');
-      const searchInput = document.getElementById('fileSearchInput');
-      if (searchInput) {
-        searchInput.addEventListener('input', (e) => {
-          fileListState.filter = e.target.value || '';
-          renderFileGroups(folderLink);
-        });
-      }
-    } else {
-      const searchInput = document.getElementById('fileSearchInput');
-      if (searchInput && searchInput.value !== fileListState.filter) {
-        const wasFocused = document.activeElement === searchInput;
-        const caret = searchInput.selectionStart || 0;
-        searchInput.value = fileListState.filter;
-        if (wasFocused) searchInput.setSelectionRange(caret, caret);
-      }
-      const folderAnchor = fileListContainer.querySelector('[data-folder-link]');
-      if (folderAnchor) folderAnchor.href = folderLink;
-    }
-
-    if (groupsHost) groupsHost.innerHTML = groupsMarkup;
-  }
-
-  async function openJobFiles(job) {
-    const link = job.Job_Folder_Link;
-    if (!link) {
-      alert('No folder link available for this job.');
-      return;
-    }
-
-    fileListState.filter = '';
-    fileListState.jobNumber = job.Job_Number || '';
-    fileListState.jobName = job.Job_Full_Name || '';
-
-    // Show modal in list mode
-    iframeViewerModal.classList.remove('hidden');
-    iframeTitle.textContent = job.Job_Number ? `Job# ${job.Job_Number}${job.Job_Full_Name ? ' - ' + job.Job_Full_Name : ''}` : 'Job Files';
-    fileListContainer.classList.remove('hidden');
-    iframeViewer.classList.add('hidden');
-    pdfViewer.classList.add('hidden');
-
-    // Check if we have cached files
-    const cached = fileCache.get(link);
-    if (cached) {
-      console.log('Using cached files for job', job.Job_Number);
-      fileListState.items = cached.items;
-      iframeLoader.classList.add('hidden');
-      renderFileGroups(link);
-      return;
-    }
-
-    // If not cached, show loading and fetch
-    iframeLoader.classList.remove('hidden');
-    iframeLoader.innerHTML = `
-      <div class="text-center">
-        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
-        <div class="text-gray-600 text-lg">Loading files...</div>
-      </div>
-    `;
-
-    const graphToken = getGraphToken();
-    const headers = graphToken ? { 'x-graph-token': graphToken } : {};
-
-    try {
-      const controller = new AbortController();
-      const timeout = setTimeout(() => controller.abort(), 30000);
-      let resp = await fetch(`/api/job-files?link=${encodeURIComponent(link)}`, { headers, signal: controller.signal });
-      clearTimeout(timeout);
-
-      if (resp.status === 401) throw new Error('AUTH_EXPIRED');
-      if (resp.status === 500) throw new Error('GRAPH_TOKEN missing or expired');
-      if (!resp.ok) throw new Error(`File list failed: ${resp.status}`);
-      const data = await resp.json();
-      const rootDriveId = data.driveId || '';
-      const items = (data.items || []).map(f => ({
-        ...f,
-        driveId: f.driveId || rootDriveId
-      }));
-      
-      fileCache.set(link, { items, driveId: rootDriveId });
-      fileListState.items = items;
-      
-      console.log(`✓ Loaded ${items.length} files for job ${job.Job_Number}`);
-      iframeLoader.classList.add('hidden');
-      renderFileGroups(link);
-    } catch (err) {
-      console.error('❌ job-files error for', job.Job_Number, err);
-      iframeLoader.classList.add('hidden');
-      fileListContainer.classList.remove('hidden');
-      fileListContainer.innerHTML = `
-        <div class="text-center max-w-md mx-auto px-4 space-y-3 mt-8">
-          <div class="text-red-600 text-lg font-semibold">Unable to load files</div>
-          <div class="text-gray-600 text-sm">Click "Open folder" to view files in SharePoint.</div>
-          <div class="flex items-center justify-center gap-2 flex-wrap">
-            <a href="${link}" target="_blank" rel="noopener" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 inline-block">Open folder</a>
-          </div>
-        </div>
-      `;
-    }
-  }
-
-  function openIframeViewer(url, title) {
-    // Detect SharePoint URLs and skip iframe attempt
-    const isSharePoint = url.includes('sharepoint.com') || url.includes('.sharepoint.');
-    
-    // If it's SharePoint, skip iframe entirely and open in new tab
-    if (isSharePoint) {
-      window.open(url, '_blank');
-      return;
-    }
-
-    iframeTitle.textContent = title;
-    iframeLoader.classList.remove('hidden');
-    iframeLoader.innerHTML = `
-      <div class="text-center">
-        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
-        <div class="text-gray-600 text-lg">Loading content...</div>
-      </div>
-    `;
-    iframeViewer.src = '';
-    iframeViewerModal.classList.remove('hidden');
-
-    // Small delay to ensure modal is visible before loading
-    setTimeout(() => {
-      iframeViewer.src = url;
-    }, 50);
-  }
-
-  function closeIframeViewer() {
-    iframeViewerModal.classList.add('hidden');
-    fileListContainer.classList.add('hidden');
-    iframeViewer.classList.remove('hidden');
-    iframeLoader.classList.add('hidden');
-    pdfViewer.classList.add('hidden');
-    currentPdf = { doc: null, page: 1, pages: 1, scale: DEFAULT_PDF_SCALE };
-    if (currentPreviewUrl) {
-      URL.revokeObjectURL(currentPreviewUrl);
-      currentPreviewUrl = null;
-    }
-    // Clear file cache when closing to ensure fresh data on next open
-    fileCache.clear();
-    // Clear iframe src to stop any loading/video/audio and prevent stacking
-    setTimeout(() => {
-      iframeViewer.src = 'about:blank';
-    }, 300);
-  }
-
-  // Hide loader when iframe loads
-  iframeViewer.addEventListener('load', () => {
-    // Check if iframe actually loaded content or is blocked
-    try {
-      const iframeDoc = iframeViewer.contentDocument || iframeViewer.contentWindow.document;
-      const currentSrc = iframeViewer.src;
-      
-      // If iframe loaded but is empty or blocked, show fallback
-      if (currentSrc && currentSrc !== 'about:blank') {
-        iframeLoader.classList.add('hidden');
-        
-        // Try to get title from iframe (will only work for same-origin)
-        if (iframeDoc && iframeDoc.title) {
-          iframeTitle.textContent = iframeDoc.title;
-        }
-      }
-    } catch(e) {
-      // Cross-origin or blocked - if we have a src, it might still work
-      if (iframeViewer.src && iframeViewer.src !== 'about:blank') {
-        iframeLoader.classList.add('hidden');
-      }
-    }
-  });
-
-  // Show loader if iframe errors
-  iframeViewer.addEventListener('error', () => {
-    const target = iframeViewer.src;
-    closeIframeViewer();
-    if (target && target !== 'about:blank') window.open(target, '_blank');
-  });
-  
-  // Listen for CSP violations (fallback to new tab)
-  document.addEventListener('securitypolicyviolation', (e) => {
-    if (e.violatedDirective.includes('frame-ancestors') && !iframeViewerModal.classList.contains('hidden')) {
-      const target = iframeViewer.src;
-      closeIframeViewer();
-      if (target && target !== 'about:blank') window.open(target, '_blank');
-    }
-  });
-
-  iframeBackBtn.addEventListener('click', closeIframeViewer);
-  iframeCloseBtn.addEventListener('click', () => { closeIframeViewer(); if (typeof closeModal === 'function') closeModal(); });
-
-  // Close on Escape key
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && !iframeViewerModal.classList.contains('hidden')) {
-      closeIframeViewer();
-    }
-  });
-
-  // --- Init ---
-  const prefs = await loadUserPreferences();
-  console.log('Init: loaded prefs=', prefs);
-  applyPrefsToFilters(prefs);
-  
-  console.log('Init: about to fetch jobs');
-  fetchAllJobs();
-})();
-</script>
-</body>
-</html>
diff --git a/frontend/output.css b/frontend/output.css
deleted file mode 100644
index 971f4ad..0000000
--- a/frontend/output.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* Generated Tailwind CSS - Basic version */
-/* This will be updated by tailwind CLI on dev */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/frontend/public/assets/CCwhiteApp.png b/frontend/public/assets/CCwhiteApp.png
deleted file mode 100644
index e4ef4f1..0000000
Binary files a/frontend/public/assets/CCwhiteApp.png and /dev/null differ
diff --git a/frontend/public/assets/DailyCheck.png b/frontend/public/assets/DailyCheck.png
deleted file mode 100644
index 200eba4..0000000
Binary files a/frontend/public/assets/DailyCheck.png and /dev/null differ
diff --git a/frontend/public/assets/PalmIsland.png b/frontend/public/assets/PalmIsland.png
deleted file mode 100644
index e31ab51..0000000
Binary files a/frontend/public/assets/PalmIsland.png and /dev/null differ
diff --git a/frontend/public/assets/lightbulb.jpg b/frontend/public/assets/lightbulb.jpg
deleted file mode 100644
index f75425e..0000000
Binary files a/frontend/public/assets/lightbulb.jpg and /dev/null differ
diff --git a/frontend/public/auth.js b/frontend/public/auth.js
deleted file mode 100644
index 7967cb8..0000000
--- a/frontend/public/auth.js
+++ /dev/null
@@ -1,181 +0,0 @@
-// PocketBase auth bootstrap shared by pages
-(function (global) {
-  const pb = new PocketBase('https://pocketbase.ccllc.pro');
-  const GRAPH_TOKEN_KEY = 'graphAccessToken';
-  const USER_ID_KEY = 'userId';
-
-  function authHeaders() {
-    if (pb.authStore.isValid && pb.authStore.token) {
-      return { Authorization: `Bearer ${pb.authStore.token}` };
-    }
-    return {};
-  }
-
-  function getDisplayName() {
-    const model = pb.authStore.model || {};
-    return (
-      model.display_name ||
-      model.name ||
-      model.email ||
-      model.username ||
-      'Unknown'
-    );
-  }
-
-  function getEmail() {
-    const model = pb.authStore.model || {};
-    return model.email || model.username || null;
-  }
-
-  function getUserId() {
-    return pb.authStore.model?.id || localStorage.getItem(USER_ID_KEY) || null;
-  }
-
-  // Get Graph token - first from localStorage, then try to refresh from backend
-  async function getGraphToken() {
-    // First check localStorage
-    let token = localStorage.getItem(GRAPH_TOKEN_KEY);
-    
-    // If we have a valid PB session but no graph token, try to get from backend
-    if (!token && pb.authStore.isValid) {
-      try {
-        const response = await fetch('/api/auth/refresh-token?type=graph', {
-          headers: authHeaders()
-        });
-        if (response.ok) {
-          const data = await response.json();
-          if (data.token) {
-            token = data.token;
-            localStorage.setItem(GRAPH_TOKEN_KEY, token);
-            console.log('[Auth] Got Graph token from backend cache');
-          }
-        }
-      } catch (err) {
-        console.warn('[Auth] Could not get Graph token from backend:', err);
-      }
-    }
-    
-    return token;
-  }
-
-  // Synchronous version for backwards compatibility
-  function getGraphTokenSync() {
-    return localStorage.getItem(GRAPH_TOKEN_KEY);
-  }
-
-  async function ensureAuth() {
-    if (pb.authStore.isValid) {
-      // Try to refresh tokens from backend on page load
-      try {
-        await refreshTokensFromBackend();
-      } catch (err) {
-        console.warn('[Auth] Token refresh failed:', err);
-      }
-      return true;
-    }
-    const path = new URL(window.location.href).pathname;
-    if (!path.endsWith('signin.html')) {
-      window.location.href = 'signin.html';
-    }
-    return false;
-  }
-
-  // Refresh tokens from backend cache
-  async function refreshTokensFromBackend() {
-    if (!pb.authStore.isValid) return;
-
-    const userId = getUserId();
-    if (!userId) return;
-
-    try {
-      // Get fresh Graph token from backend
-      const response = await fetch('/api/auth/refresh-token?type=graph', {
-        headers: authHeaders()
-      });
-      
-      if (response.ok) {
-        const data = await response.json();
-        if (data.token) {
-          localStorage.setItem(GRAPH_TOKEN_KEY, data.token);
-          console.log('[Auth] Refreshed Graph token from backend, source:', data.source);
-        }
-      } else if (response.status === 401) {
-        // Token expired or invalid in backend, but we might still have a valid PB session
-        // Try to re-store our current tokens
-        console.log('[Auth] Backend token expired, attempting to re-store');
-        await restoreTokensToBackend();
-      }
-    } catch (err) {
-      console.warn('[Auth] Token refresh error:', err);
-    }
-  }
-
-  // Re-store tokens to backend (in case backend cache was cleared)
-  async function restoreTokensToBackend() {
-    if (!pb.authStore.isValid) return;
-
-    try {
-      // Refresh PocketBase auth to potentially get a new Graph token
-      const authData = await pb.collection('users').authRefresh();
-      
-      const graphToken = extractGraphToken(authData) || localStorage.getItem(GRAPH_TOKEN_KEY);
-      
-      if (graphToken) {
-        const response = await fetch('/api/auth/login-callback', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            ...authHeaders()
-          },
-          body: JSON.stringify({
-            pbToken: pb.authStore.token,
-            graphToken: graphToken,
-            refreshTokenPb: '',
-            refreshTokenGraph: authData?.meta?.refreshToken || '',
-            user: {
-              id: pb.authStore.model?.id,
-              email: pb.authStore.model?.email,
-              name: pb.authStore.model?.name || pb.authStore.model?.display_name
-            }
-          })
-        });
-
-        if (response.ok) {
-          console.log('[Auth] Re-stored tokens in backend');
-        }
-      }
-    } catch (err) {
-      console.warn('[Auth] Failed to re-store tokens:', err);
-    }
-  }
-
-  function extractGraphToken(authData) {
-    return (
-      authData?.meta?.graphAccessToken ||
-      authData?.meta?.graph_token ||
-      authData?.meta?.graphToken ||
-      authData?.meta?.accessToken ||
-      authData?.meta?.access_token ||
-      authData?.meta?.token ||
-      authData?.meta?.rawToken ||
-      authData?.meta?.authData?.access_token ||
-      ''
-    );
-  }
-
-  global.Auth = { 
-    pb, 
-    authHeaders, 
-    ensureAuth, 
-    getDisplayName, 
-    getEmail, 
-    getUserId,
-    getGraphToken,
-    getGraphTokenSync,
-    refreshTokensFromBackend,
-    restoreTokensToBackend,
-    extractGraphToken,
-    GRAPH_TOKEN_KEY,
-    USER_ID_KEY
-  };
-})(window);
diff --git a/frontend/public/index.html b/frontend/public/index.html
deleted file mode 100644
index bb8f1d0..0000000
--- a/frontend/public/index.html
+++ /dev/null
@@ -1,2969 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width,initial-scale=1" maximum-scale="1" />
-<title>Job Info — Vanilla JS</title>
-<!-- Preload critical images for instant display -->
-<link rel="preload" href="assets/CCwhiteApp.png" as="image">
-<link rel="preload" href="assets/lightbulb.jpg" as="image">
-<link rel="preload" href="assets/PalmIsland.png" as="image">
-<link rel="preload" href="assets/DailyCheck.png" as="image">
-<script src="https://cdn.tailwindcss.com"></script>  <!-- Suppress Tailwind CDN warning for now -->
-  <script>
-    if (window.tailwind) window.tailwind.config = { corePlugins: { preflight: true } }
-  </script><script src="https://cdn.jsdelivr.net/npm/pocketbase@0.26.5/dist/pocketbase.umd.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
-<script src="auth.js"></script>
-<script>
-  // Live reload for development
-  (function() {
-    let lastCheck = Date.now();
-    setInterval(async () => {
-      try {
-        const res = await fetch('/version?t=' + Date.now(), { cache: 'no-store' });
-        if (res.ok) {
-          const data = await res.json();
-          const currentVersion = sessionStorage.getItem('appVersion');
-          if (currentVersion && data.version && currentVersion !== data.version) {
-            console.log('Changes detected, reloading...');
-            window.location.reload();
-          }
-          sessionStorage.setItem('appVersion', data.version || '');
-        }
-      } catch (e) {
-        console.log('Live reload check failed:', e);
-      }
-    }, 1000);
-  })();
-</script>
-</head>
-<body class="font-sans bg-gray-100 m-0 text-gray-900 overflow-hidden touch-pan-y h-screen flex flex-col">
-  <div class="max-w-full md:max-w-2xl mx-auto p-4 sm:p-3 text-[17px] flex flex-col flex-1 overflow-hidden">
-  <div class="w-full bg-gray-400 border border-gray-300 rounded-lg px-0.5 py-0.5 mb-3 shadow-sm flex items-center justify-between">
-    <div class="flex items-center gap-2">
-      <div class="h-6 w-[186px] rounded-lg bg-black flex items-center justify-center overflow-hidden">
-        <img src="assets/CCwhiteApp.png" alt="CC" class="h-6 w-auto object-cover scale-80" loading="lazy">
-      </div>
-    </div>
-    <div class="flex items-center gap-0">
-      <a id="ideaLink" href="https://idea-form.ccllc.pro" target="_blank" rel="noopener" class="h-6 w-12 rounded-3xl overflow-hidden flex items-center justify-center bg-transparent hover:bg-gray-50/20" title="Submit an idea">
-        <img src="assets/lightbulb.jpg" alt="Idea" class="h-full w-auto object-cover" loading="lazy">
-      </a>
-      <a id="assetInventoryLink" href="https://czflex.sharepoint.com/:x:/r/sites/Team/Shared%20Documents/General/ALFONSO/Comprehensive%20Asset%20Inventory.xlsx?d=w9005440917e945d680e9885f33ccf2ba&csf=1&web=1&e=rifTzf" target="_blank" rel="noopener" class="h-6 w-12 rounded-3xl overflow-hidden flex items-center justify-center bg-transparent hover:bg-gray-50/20" title="Open Asset Inventory">
-        <img src="assets/PalmIsland.png" alt="Palm Island" class="h-full w-auto object-cover" loading="lazy">
-      </a>
-      <a id="operationsLink" href="https://czflex.sharepoint.com/:x:/r/sites/Team/Shared%20Documents/General/ALFONSO/GM%20Rollup.xlsx?d=w3e59f37ee1c04cb798e14f86bd87c968&csf=1&web=1&e=vCnfbR" target="_blank" rel="noopener" class="h-6 w-12 rounded-3xl overflow-hidden flex items-center justify-center bg-transparent hover:bg-gray-50/20" title="Open Operations Dashboard">
-        <img src="assets/DailyCheck.png" alt="Operations Dashboard" class="h-full w-auto object-cover" loading="lazy">
-      </a>
-    </div>
-  </div>
-  <h1 class="m-0 mb-3 text-center text-blue-600 text-[33px] font-bold">Job Info</h1>
-
-  <div class="relative mb-2">
-    <input id="searchBox" placeholder="Search jobs (just start typing or use voice)" class="w-full p-2.5 pr-12 rounded-lg border border-gray-300 text-lg placeholder:text-gray-400">
-    <button id="voiceSearchBtn" class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100 transition-colors" title="Voice search">
-      <svg id="micIcon" class="w-5 h-5 text-gray-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path>
-      </svg>
-      <svg id="micRecordingIcon" class="hidden w-5 h-5 text-red-600 animate-pulse" fill="currentColor" viewBox="0 0 24 24">
-        <circle cx="12" cy="12" r="8"></circle>
-      </svg>
-    </button>
-  </div>
-
-  <button id="filterToggle" class="bg-blue-600 text-white py-2 px-2.5 rounded-lg border-none cursor-pointer mb-2 inline-block min-w-[140px]">Show Filters</button>
-
-  <div id="filtersPanel" class="hidden bg-white border border-gray-200 rounded-lg p-2.5 mb-2.5">
-    <div class="mb-2 text-sm">
-      <strong>Division</strong><br/>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-division" value="C#"> Commercial</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-division" value="R#"> Residential</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-division" value="S#"> Small Jobs</label>
-    </div>
-
-    <div class="mb-2 text-sm">
-      <strong>Active</strong><br/>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-active" value="Yes"> Yes</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-active" value="No"> No</label>
-    </div>
-
-    <div class="mb-2 text-sm">
-      <strong>Estimator</strong><br/>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-estimator" value="Steve Brewer"> Steve</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-estimator" value="Beth Cardoza"> Beth</label>
-    </div>
-
-    <div class="mb-2 text-sm">
-      <strong>Status</strong><br/>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-status" value="Estimating"> Estimating</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-status" value="In Progress"> In Progress</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-status" value="Awarded"> Awarded</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-status" value="Billed (In Progress)"> Billed (In Progress)</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-status" value="Not Bidding"> Not Bidding</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-status" value="Est Sent"> Est Sent</label>
-      <label class="mr-2 cursor-pointer text-gray-500"><input type="checkbox" class="filter-status" value="Not Awarded"> Not Awarded</label>
-    </div>
-    <button id="clearFilters" class="bg-gray-500 text-white py-2 px-2 rounded-lg border-none">Clear Filters</button>
-  </div>
-
-  <div id="results" aria-live="polite" class="flex flex-col gap-3 flex-1 overflow-auto p-0"></div>
-  <div class="text-xs text-gray-500 mt-5 pt-3 border-t border-gray-200 flex items-center justify-between">
-    <span id="userEmail" class="truncate"></span>
-    <div class="flex items-center gap-2">
-      <button id="signOutBtn" class="px-2 py-1 text-[11px] bg-gray-200 hover:bg-gray-300 rounded border border-gray-300 text-gray-700">Sign out</button>
-      <span id="versionLabel">v1.0.0-beta2</span>
-    </div>
-  </div>
-</div>
-
-<!-- Detail Modal -->
-<div id="detailModal" role="dialog" aria-modal="true" class="hidden flex fixed inset-0 bg-black/45 items-start justify-center pt-[2vh] z-[999]">
-  <div id="detailBox" class="m-0 bg-white rounded-lg max-w-[380px] w-[92%] h-[calc(90vh-30px)] max-h-[926px] overflow-hidden flex flex-col">
-    <!-- INFO Tab Content -->
-    <div id="infoContent" class="flex-1 overflow-hidden flex flex-col min-h-0">
-      <div id="infoHeading" class="bg-blue-600 text-white text-center py-2 text-sm font-semibold rounded-t-lg flex-shrink-0">INFO</div>
-      <div class="px-3 pt-2 pb-1 flex-1 overflow-auto">
-        <div class="mt-0 w-full mb-1 space-y-2" id="detailTable"></div>
-        <button id="jobFolderBtn" disabled class="w-full py-2.5 px-3 rounded-lg border-none text-white cursor-pointer text-[17px] font-bold mb-2.5 transition-colors duration-200 bg-gray-600 cursor-not-allowed opacity-70">No Folder Available</button>
-      </div>
-    </div>
-
-    <!-- NOTES Tab Content -->
-    <div id="notesContent" class="hidden flex-1 overflow-hidden flex flex-col min-h-0">
-      <div id="notesHeading" class="bg-orange-600 text-white text-center py-2 text-sm font-semibold rounded-t-lg flex-shrink-0">NOTES</div>
-      <div class="px-3 pt-2 pb-1 flex-1 overflow-auto">
-        <div id="jobNotes" class="min-h-[120px] max-h-[200px] overflow-auto p-1 border border-gray-600 rounded text-[11px] bg-transparent whitespace-pre-wrap break-words text-gray-600"></div>
-
-        <div class="flex flex-wrap mb-0.5 mt-1.5" id="toolbar">
-          <button data-cmd="bold" id="tbBold" class="h-7 w-8 text-xs py-0 px-1 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center m-[1px]"><strong>B</strong></button>
-          <button data-cmd="italic" id="tbItalic" class="h-7 w-8 text-xs py-0 px-1 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center m-[1px]"><em>I</em></button>
-          <button data-cmd="underline" id="tbUnderline" class="h-7 w-8 text-xs py-0 px-1 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center m-[1px]"><u>U</u></button>
-          <button data-cmd="foreColor" data-val="#ff0000" id="tbRed" class="h-7 w-8 text-xs py-0 px-1 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center m-[1px] text-red-500">A</button>
-          <button data-cmd="foreColor" data-val="#0000ff" id="tbBlue" class="h-7 w-8 text-xs py-0 px-1 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center m-[1px] text-blue-600">A</button>
-          <button data-cmd="foreColor" data-val="#000000" id="tbBlack" class="h-7 w-8 text-xs py-0 px-1 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center m-[1px] text-black">A</button>
-          <button data-cmd="removeFormat" id="tbClear" class="h-7 w-auto py-1 px-2 text-xs rounded border border-gray-400 bg-gray-400 text-white cursor-pointer flex items-center justify-center m-[1px]">Reset</button>
-        </div>
-
-        <div id="newNote" contenteditable="true" aria-label="New note" class="min-h-14 max-h-[120px] overflow-auto p-2 border border-gray-600 rounded-lg text-base bg-transparent mt-1.5"></div>
-
-        <div class="flex gap-2 mt-1.5 mb-4">
-          <button class="py-2 px-2.5 rounded-lg border-none text-white cursor-pointer bg-green-600" id="btnSubmit">Submit</button>
-          <button class="py-2 px-2.5 rounded-lg border-none text-white cursor-pointer bg-gray-500" id="btnClearNote">Clear</button>
-          <button class="py-2 px-2.5 rounded-lg border-none text-white cursor-pointer bg-red-600" id="btnClose">Close</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- MANAGER INFO Tab Content -->
-    <div id="managerInfoContent" class="hidden flex-1 overflow-hidden flex flex-col min-h-0">
-      <div id="managerInfoHeading" class="bg-green-600 text-white text-center py-2 text-sm font-semibold rounded-t-lg flex-shrink-0">MANAGER INFO</div>
-      <div class="px-3 pt-2 pb-1 flex-1 overflow-auto">
-        <div id="managerInfoTable" class="w-full space-y-3"></div>
-      </div>
-    </div>
-
-    <!-- Tab Bar at Bottom -->
-    <div class="flex items-center border-t border-gray-200 pt-2 px-3 pb-2 flex-shrink-0 bg-white rounded-b-lg">
-      <button id="backBtn" class="mr-6 pr-6 border-r border-gray-200 px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-800 flex items-center">
-        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-        </svg>
-        Back
-      </button>
-      <button id="infoTab" class="px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600 -mb-px">INFO</button>
-      <button id="notesTab" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">NOTES</button>
-      <button id="managerInfoTab" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">MANAGER INFO</button>
-    </div>
-  </div>
-</div>
-
-<!-- Iframe Viewer Modal -->
-<div id="iframeViewerModal" class="hidden fixed inset-0 bg-black z-[1000] flex flex-col">
-  <div class="bg-gray-900 text-white px-3 py-3 flex items-center gap-3 flex-shrink-0 shadow-lg">
-    <button id="iframeBackBtn" aria-label="Back to jobs" class="flex items-center justify-center w-10 h-10 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors shrink-0">
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-      </svg>
-    </button>
-    <div class="flex-1 min-w-0 text-center">
-      <div id="iframeTitle" class="text-sm font-medium truncate px-2">Loading...</div>
-    </div>
-    <button id="iframeCloseBtn" aria-label="Close" class="flex items-center justify-center w-10 h-10 bg-red-600 hover:bg-red-700 rounded-lg transition-colors shrink-0">
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-      </svg>
-    </button>
-  </div>
-  <div class="flex-1 relative bg-white flex flex-col overflow-hidden">
-    <div id="fileListContainer" class="hidden flex-1 flex flex-col p-0 bg-white overflow-hidden"></div>
-    <div id="pdfViewer" class="hidden flex-1 flex flex-col bg-gray-50">
-      <div id="pdfControls" class="flex items-center gap-2 px-3 py-2 border-b border-gray-200 bg-white shadow-sm flex-shrink-0">
-        <div class="flex items-center gap-1">
-          <button id="pdfZoomOut" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">−</button>
-          <button id="pdfZoomReset" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">45%</button>
-          <button id="pdfZoomIn" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">+</button>
-          <span id="pdfZoomLabel" class="text-sm text-gray-700 ml-1">45%</span>
-        </div>
-        <div class="flex items-center gap-2 ml-4">
-          <button id="pdfPrev" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">◀</button>
-          <button id="pdfNext" class="px-2 py-1 bg-gray-200 hover:bg-gray-300 rounded">▶</button>
-          <span class="text-sm text-gray-700">Page <span id="pdfPageNum">1</span> / <span id="pdfPageCount">1</span></span>
-        </div>
-        <span class="flex-1"></span>
-        <div class="flex items-center gap-2 ml-auto">
-          <button id="pdfCloseAll" aria-label="Close preview" class="flex items-center justify-center w-9 h-9 bg-red-500 hover:bg-red-600 rounded text-white">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div id="pdfViewport" class="flex-1 overflow-auto bg-gray-100 flex items-start justify-start">
-        <canvas id="pdfCanvas" class="bg-white shadow-sm mt-3 mb-6 cursor-grab touch-none"></canvas>
-      </div>
-    </div>
-    <iframe id="iframeViewer" class="w-full h-full border-none" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-downloads allow-modals"></iframe>
-    <div id="iframeLoader" class="absolute inset-0 bg-white flex items-center justify-center">
-      <div class="text-center">
-        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
-        <div class="text-gray-600 text-lg">Loading content...</div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<script>
-(async function() {
-  const { pb, authHeaders, getDisplayName, getEmail, ensureAuth, getGraphToken: getGraphTokenFromBackend } = window.Auth;
-  
-  // ========================================
-  // TOKEN VALIDATION - CHECK BOTH AT STARTUP
-  // ========================================
-  const GRAPH_TOKEN_KEY = 'graphAccessToken';
-  
-  // Use shared auth helper to validate PB and refresh tokens if possible
-  const isAuthed = await ensureAuth();
-  if (!isAuthed) {
-    // ensureAuth will redirect to signin when needed
-    return;
-  }
-  
-  // Try to get Graph token (localStorage first, then backend refresh)
-  let APP_GRAPH_TOKEN = await getGraphTokenFromBackend();
-  if (!APP_GRAPH_TOKEN) {
-    console.log('[Init] No Graph token after backend refresh - redirecting to signin');
-    window.location.href = 'signin.html?reauth=1';
-    return;
-  }
-  
-  // Both tokens present - proceed
-  console.log('[Init] Both tokens valid - starting app');
-  
-  // Simple getter - returns the token, no checking
-  const getGraphToken = () => APP_GRAPH_TOKEN;
-
-  // --- Utility ---
-  const fetchNoCache = (url, options={}) => {
-    const headers = { ...(options.headers||{}), ...authHeaders() };
-    const separator = url.includes('?') ? '&' : '?';
-    return fetch(url + `${separator}_ts=${Date.now()}`, { ...options, headers });
-  };
-
-  const PB_COLLECTION_URL = "https://pocketbase.ccllc.pro/api/collections/pbc_1407612689/records";
-  const NOTES_COLLECTION_URL = "https://pocketbase.ccllc.pro/api/collections/notes/records";
-  const PREFS_COLLECTION_URL = "https://pocketbase.ccllc.pro/api/collections/user_preferences/records";
-  const perPage = 50;
-
-  let jobsCache = [], visibleJobs = [], currentJob = null;
-
-  function clearJobsCache(message='Cache cleared. Reloading…'){
-    jobsCache = [];
-    visibleJobs = [];
-    currentJob = null;
-    resultsEl.innerHTML = `<div class="p-2 text-slate-600 bg-white rounded-lg border border-blue-100">${message}</div>`;
-  }
-  window.clearJobsCache = clearJobsCache;
-
-  const searchBox = document.getElementById('searchBox');
-  const resultsEl = document.getElementById('results');
-  const filtersPanel = document.getElementById('filtersPanel');
-  const filterToggle = document.getElementById('filterToggle');
-  const userEmailEl = document.getElementById('userEmail');
-  const signOutBtn = document.getElementById('signOutBtn');
-
-  const detailModal = document.getElementById('detailModal');
-  const detailTable = document.getElementById('detailTable');
-  const jobFolderBtn = document.getElementById('jobFolderBtn');
-  const jobNotes = document.getElementById('jobNotes');
-  const newNote = document.getElementById('newNote');
-  const versionLabel = document.getElementById('versionLabel');
-
-  const toolbar = document.getElementById('toolbar');
-  const tbButtons = Array.from(toolbar.querySelectorAll('button'));
-
-  const safeLower = v => (v||'').toString().trim().toLowerCase();
-  const toBool = (v) => {
-    if (typeof v === 'boolean') return v;
-    const s = String(v||'').trim().toLowerCase();
-    if (s === 'true' || s === 'yes' || s === 'y' || s === '1') return true;
-    if (s === 'false' || s === 'no' || s === 'n' || s === '0') return false;
-    return null;
-  };
-
-  const currentUserEmail = getEmail();
-  if(userEmailEl && currentUserEmail) userEmailEl.textContent = currentUserEmail;
-
-  if (signOutBtn) {
-    signOutBtn.addEventListener('click', () => {
-      try { pb?.authStore?.clear?.(); } catch {}
-      try { localStorage.removeItem(GRAPH_TOKEN_KEY); } catch {}
-      try { localStorage.removeItem('pocketbase_auth'); } catch {}
-      try { sessionStorage.clear(); } catch {}
-      location.reload();
-    });
-  }
-
-  // Load version
-  async function loadVersion(){
-    if(!versionLabel) return;
-    try{
-      const res = await fetch('/version');
-      if(!res.ok) return;
-      const data = await res.json().catch(()=>null);
-      if(data?.version) versionLabel.textContent = `v${data.version}`;
-    }catch(err){ console.debug('Version load failed:', err.message); }
-  }
-  loadVersion();
-
-  // --- Fetch all jobs ---
-  async function fetchAllJobs(){
-    const startTime = performance.now();
-    let pollCount = 0;
-    
-    async function pollJobs(){
-      try{
-        const url = `/api/jobs-all`;
-        const res = await fetchNoCache(url);
-        if(!res.ok) throw new Error(`Fetch failed: ${res.status}`);
-        const data = await res.json();
-        const items = data.items || [];
-        
-        if (pollCount === 0 || jobsCache.length === 0) {
-          jobsCache.length = 0;
-          jobsCache.push(...items);
-          // Render immediately as soon as we have first batch
-          applyFiltersAndRender();
-          const loadTime = Math.round(performance.now() - startTime);
-          console.log(`✓ Displayed ${items.length} jobs in ${loadTime}ms`);
-        }
-        
-        if (data.partial) {
-          // Load remaining jobs in background
-          pollCount++;
-          if (pollCount === 1) {
-            // After first batch, get remaining jobs
-            setTimeout(async () => {
-              try {
-                const remainingRes = await fetchNoCache('/api/jobs-remaining');
-                if (remainingRes.ok) {
-                  const remainingData = await remainingRes.json();
-                  const remainingItems = remainingData.items || [];
-                  if (remainingItems.length > 0) {
-                    jobsCache.push(...remainingItems);
-                    console.log(`✓ Loaded ${remainingItems.length} additional jobs in background`);
-                    // Re-render if no filters are active to show all jobs
-                    if (!searchBox.value && document.querySelectorAll('.filter-division:checked, .filter-active:checked, .filter-status:checked, .filter-estimator:checked').length === 0) {
-                      applyFiltersAndRender();
-                    }
-                  }
-                }
-              } catch (err) {
-                console.error('Failed to load remaining jobs:', err);
-              }
-            }, 100);
-          }
-        }
-      }catch(err){ 
-        resultsEl.innerHTML = '<div class="p-4 text-center text-red-600">Failed to load jobs. Please refresh the page.</div>';
-        console.error(err); 
-      }
-    }
-    pollJobs();
-  }
-  
-  function renderInitialBatch(jobs){
-    resultsEl.innerHTML='';
-    for(const job of jobs){
-      const card=document.createElement('div'); card.className='bg-white rounded-lg p-2.5 border border-blue-100 shadow-sm cursor-pointer relative flex flex-col justify-center gap-1';
-      card.innerHTML=`
-        <div class="flex items-center gap-2 text-lg leading-tight mb-0.5"><div class="font-bold text-gray-700 min-w-[72px] whitespace-nowrap">Job#</div><div class="text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap flex-1">${escapeHtml(job.Job_Number||'')}</div></div>
-        <div class="flex items-center gap-2 text-lg leading-tight mb-0.5"><div class="font-bold text-gray-700 min-w-[72px] whitespace-nowrap">Job Name:</div><div class="text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap flex-1">${escapeHtml(job.Job_Full_Name||'')}</div></div>
-        <div class="flex items-center gap-2 text-lg leading-tight mb-0.5"><div class="font-bold text-gray-700 min-w-[72px] whitespace-nowrap">Contact:</div><div class="text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap flex-1">${escapeHtml(job.Contact_Person||'')}</div></div>
-      `;
-      const dot=document.createElement('div'); dot.className='absolute top-2.5 right-2.5 w-3.5 h-3.5 rounded-full border-2 border-white shadow-sm';
-      {
-        const b = toBool(job.Active);
-        dot.style.background = b===true ? 'green' : (b===false ? 'red' : '#cbd5e1');
-      }
-      card.appendChild(dot);
-      card.addEventListener('click',()=>openDetail(job));
-      resultsEl.appendChild(card);
-    }
-  }
-
-  function jobNumberValue(job){
-    const raw = String(job.Job_Number||'');
-    const match = raw.match(/[0-9]+\.?[0-9]*/);
-    if(!match) return null;
-    const num = parseFloat(match[0]);
-    return isNaN(num) ? null : num;
-  }
-
-  function sortJobsDescending(jobs){
-    return jobs.sort((a,b)=>{
-      const na = jobNumberValue(a);
-      const nb = jobNumberValue(b);
-      if(nb!==null && na!==null){ return nb - na; }
-      if(nb!==null) return 1;
-      if(na!==null) return -1;
-      return String(b.Job_Number||'').localeCompare(String(a.Job_Number||''));
-    });
-  }
-
-  function applyFiltersAndRender(){
-    let q = safeLower(searchBox.value||'');
-    
-    // Check for recency keywords
-    const recencyKeywords = ['most recent', 'newest', 'latest', 'current', 'recent'];
-    let sortByRecent = false;
-    
-    // Check if query contains any recency keywords (check longer phrases first)
-    for (const keyword of recencyKeywords) {
-      if (q.includes(keyword)) {
-        sortByRecent = true;
-        // Remove the keyword from search query (use global replace)
-        const regex = new RegExp(keyword, 'gi');
-        q = q.replace(regex, ' ');
-      }
-    }
-    
-    // Clean up multiple spaces and trim
-    q = q.replace(/\s+/g, ' ').trim();
-    
-    // Update the display to show cleaned query
-    if (sortByRecent && searchBox.value !== q) {
-      searchBox.value = q.split(' ').map(word => 
-        word.charAt(0).toUpperCase() + word.slice(1)
-      ).join(' ');
-    }
-    
-    const divisionVals = Array.from(document.querySelectorAll('.filter-division:checked')).map(i=>i.value);
-    const activeVals = Array.from(document.querySelectorAll('.filter-active:checked')).map(i=>i.value);
-    const activeWanted = activeVals.map(v=>toBool(v)).filter(v=>v!==null);
-    const statusVals = Array.from(document.querySelectorAll('.filter-status:checked')).map(i=>i.value);
-    const estimatorVals = Array.from(document.querySelectorAll('.filter-estimator:checked')).map(i=>i.value);
-    const estimatorValsLower = estimatorVals.map(s=>safeLower(s));
-
-    visibleJobs = jobsCache.filter(job=>{
-      const searchable = [job.Job_Number, job.Job_Full_Name, job.Job_Address, job.Contact_Person, job.Company_Client, job.Notes].join(' ').toLowerCase();
-      if(q && !searchable.includes(q)) return false;
-      if(divisionVals.length && !divisionVals.includes(job.Job_Division)) return false;
-      if(activeWanted.length){
-        const b = toBool(job.Active);
-        if(b===null || !activeWanted.includes(b)) return false;
-      }
-      if(statusVals.length && !statusVals.includes(job.Job_Status||'')) return false;
-      if(estimatorVals.length){
-        const je = safeLower(job.Estimator||'');
-        const ok = estimatorValsLower.some(v=>je.includes(v) || v.includes(je));
-        if(!ok) return false;
-      }
-      return true;
-    });
-
-    // If recency keyword used, show only THE most recent match
-    if(sortByRecent && visibleJobs.length > 0){
-      console.log('Before sorting, visibleJobs count:', visibleJobs.length);
-      
-      // Sort by Job_Number (higher number = newer job)
-      visibleJobs.sort((a, b) => {
-        const numA = jobNumberValue(a) || 0;
-        const numB = jobNumberValue(b) || 0;
-        return numB - numA; // Higher job number first (newest)
-      });
-      
-      console.log('After sorting, newest job:', visibleJobs[0]?.Job_Number);
-      // Keep only the most recent
-      visibleJobs = visibleJobs.slice(0, 1);
-      console.log('✓ Showing only the most recent match');
-    } else if(q || divisionVals.length || activeVals.length || statusVals.length || estimatorVals.length){
-      sortJobsDescending(visibleJobs);
-    }
-    
-    console.log('Filter summary', { 
-      originalSearch: searchBox.value, 
-      cleanedQ: q, 
-      sortByRecent, 
-      resultsCount: visibleJobs.length 
-    });
-    
-    // Reset virtual scroll state for new filter results
-    virtualScrollData.visibleStartIndex = 0;
-    virtualScrollData.visibleCount = 30;
-    
-    renderCards(visibleJobs);
-  }
-
-  // Virtual scroll state
-  let virtualScrollData = {
-    allJobs: [],
-    visibleStartIndex: 0,
-    visibleCount: 30,
-    itemHeight: 100, // Approximate card height
-    scrolling: false
-  };
-
-  function renderCards(list){
-    virtualScrollData.allJobs = list;
-    
-    if(!list.length){ 
-      resultsEl.innerHTML = `<div class="p-2 text-slate-600 bg-white rounded-lg border border-blue-100">No results</div>`; 
-      return; 
-    }
-
-    // Render only visible cards using virtual scrolling
-    renderVirtualCards();
-  }
-
-  function renderVirtualCards() {
-    const { allJobs, visibleStartIndex, visibleCount } = virtualScrollData;
-    const endIndex = Math.min(visibleStartIndex + visibleCount, allJobs.length);
-    const visibleJobs = allJobs.slice(visibleStartIndex, endIndex);
-    
-    // Clear and render visible cards only
-    resultsEl.innerHTML = '';
-    
-    for(const job of visibleJobs){
-      const card=document.createElement('div'); 
-      card.className='bg-white rounded-lg p-2.5 border border-blue-100 shadow-sm cursor-pointer relative flex flex-col justify-center gap-1';
-      card.innerHTML=`
-        <div class="flex items-center gap-2 text-lg leading-tight mb-0.5"><div class="font-bold text-gray-700 min-w-[72px] whitespace-nowrap">Job#</div><div class="text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap flex-1">${escapeHtml(job.Job_Number||'')}</div></div>
-        <div class="flex items-center gap-2 text-lg leading-tight mb-0.5"><div class="font-bold text-gray-700 min-w-[72px] whitespace-nowrap">Job Name:</div><div class="text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap flex-1">${escapeHtml(job.Job_Full_Name||'')}</div></div>
-        <div class="flex items-center gap-2 text-lg leading-tight mb-0.5"><div class="font-bold text-gray-700 min-w-[72px] whitespace-nowrap">Contact:</div><div class="text-gray-900 overflow-hidden text-ellipsis whitespace-nowrap flex-1">${escapeHtml(job.Contact_Person||'')}</div></div>
-      `;
-      const dot=document.createElement('div'); 
-      dot.className='absolute top-2.5 right-2.5 w-3.5 h-3.5 rounded-full border-2 border-white shadow-sm';
-      {
-        const b = toBool(job.Active);
-        dot.style.background = b===true ? 'green' : (b===false ? 'red' : '#cbd5e1');
-      }
-      card.appendChild(dot);
-      card.addEventListener('click',()=>openDetail(job));
-      resultsEl.appendChild(card);
-    }
-    
-    // Add "Load More" button if there are more results
-    if (endIndex < allJobs.length) {
-      const loadMoreBtn = document.createElement('button');
-      loadMoreBtn.className = 'w-full py-3 mt-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium';
-      loadMoreBtn.textContent = `Load More (${allJobs.length - endIndex} remaining)`;
-      loadMoreBtn.onclick = () => {
-        virtualScrollData.visibleCount += 30;
-        renderVirtualCards();
-      };
-      resultsEl.appendChild(loadMoreBtn);
-    }
-  }
-  function escapeHtml(str){ return String(str).replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;'); }
-
-  // --- Voice Search ---
-  const voiceSearchBtn = document.getElementById('voiceSearchBtn');
-  const micIcon = document.getElementById('micIcon');
-  const micRecordingIcon = document.getElementById('micRecordingIcon');
-  let recognition = null;
-  let isListening = false;
-  let hasPermission = false;
-
-  // Check if we're on HTTPS or localhost (required for mic access)
-  const isSecureContext = window.isSecureContext || location.protocol === 'https:' || location.hostname === 'localhost';
-  if (!isSecureContext) {
-    console.warn('⚠️ Voice search requires HTTPS or localhost');
-    voiceSearchBtn.style.display = 'none';
-  }
-
-  // Request microphone permission explicitly
-  async function requestMicPermission() {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      // Stop the stream immediately, we just wanted to request permission
-      stream.getTracks().forEach(track => track.stop());
-      hasPermission = true;
-      console.log('✅ Microphone permission granted');
-      return true;
-    } catch (err) {
-      console.error('❌ Microphone permission denied:', err);
-      alert('🎤 Please allow microphone access to use voice search.\n\nClick the microphone icon in your browser\'s address bar to enable it.');
-      return false;
-    }
-  }
-
-  // Check if browser supports speech recognition
-  if (isSecureContext && ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window)) {
-    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-    recognition = new SpeechRecognition();
-    recognition.continuous = true; // Changed to true to keep listening
-    recognition.interimResults = true;
-    recognition.lang = 'en-US';
-    recognition.maxAlternatives = 1;
-
-    let autoStopTimer = null;
-    let silenceTimer = null;
-    let lastResultIndex = 0;
-    let baseSearchText = '';
-
-    recognition.onstart = () => {
-      isListening = true;
-      lastResultIndex = 0;
-      baseSearchText = searchBox.value.trim();
-      
-      // Change mic icon to filled maroon/red
-      micIcon.style.fill = '#991b1b'; // Tailwind red-800
-      micIcon.style.stroke = '#991b1b';
-      
-      // Auto-stop after 10 seconds as a safety measure
-      autoStopTimer = setTimeout(() => {
-        if (isListening) {
-          recognition.stop();
-        }
-      }, 10000);
-    };
-
-    recognition.onresult = (event) => {
-      // Clear any existing silence timer
-      if (silenceTimer) {
-        clearTimeout(silenceTimer);
-        silenceTimer = null;
-      }
-      
-      // Process only new final results
-      for (let i = lastResultIndex; i < event.results.length; i++) {
-        if (event.results[i].isFinal) {
-          let transcript = event.results[i][0].transcript.trim();
-          
-          // Remove trailing punctuation (period, comma, etc.)
-          transcript = transcript.replace(/[.,!?;:]+$/, '');
-          
-          // Remove trailing "job" if present
-          transcript = transcript.replace(/\s+job$/i, '');
-          
-          // Replace "new" with "latest"
-          transcript = transcript.replace(/\bnew\b/gi, 'latest');
-          
-          // Capitalize each word (title case)
-          transcript = transcript.split(' ').map(word => 
-            word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
-          ).join(' ');
-          
-          if (transcript) {
-            // Add space if base text exists and doesn't end with space
-            if (baseSearchText && !baseSearchText.endsWith(' ')) {
-              baseSearchText += ' ';
-            }
-            baseSearchText += transcript;
-          }
-          
-          lastResultIndex = i + 1;
-        }
-      }
-      
-      // Update search box with accumulated text
-      searchBox.value = baseSearchText;
-      
-      // Trigger search with results
-      applyFiltersAndRender();
-      
-      // If exactly 1 result, automatically open Manager Info
-      if (visibleJobs.length === 1) {
-        const job = visibleJobs[0];
-        currentJob = job;
-        detailModal.classList.remove('hidden');
-        document.getElementById('detailBox').scrollTop = 0;
-        switchTab('managerInfo');
-        populateManagerInfo(job);
-      }
-      
-      // Check if all results are final, if so prepare to stop
-      const allFinal = Array.from(event.results).every(r => r.isFinal);
-      if (allFinal && event.results.length > 0) {
-        silenceTimer = setTimeout(() => {
-          recognition.stop();
-        }, 1500);
-      }
-    };
-
-    recognition.onspeechstart = () => {};
-    recognition.onspeechend = () => {};
-    recognition.onaudiostart = () => {};
-    recognition.onaudioend = () => {};
-    recognition.onsoundstart = () => {};
-    recognition.onsoundend = () => {};
-
-    recognition.onerror = (event) => {
-      // Clear timers
-      if (autoStopTimer) clearTimeout(autoStopTimer);
-      if (silenceTimer) clearTimeout(silenceTimer);
-      
-      isListening = false;
-      
-      if (event.error === 'not-allowed' || event.error === 'permission-denied') {
-        alert('🎤 Microphone access denied.\n\nPlease:\n1. Click the microphone icon in your browser\'s address bar\n2. Allow microphone access\n3. Refresh the page');
-        hasPermission = false;
-      } else if (event.error === 'audio-capture') {
-        alert('🎤 Microphone error. Please check:\n1. Your microphone is connected\n2. It\'s not being used by another app\n3. Browser has microphone access');
-      }
-    };
-
-    recognition.onend = () => {
-      // Clear timers
-      if (autoStopTimer) clearTimeout(autoStopTimer);
-      if (silenceTimer) clearTimeout(silenceTimer);
-      
-      // Reset mic icon to normal
-      micIcon.style.fill = 'none';
-      micIcon.style.stroke = '';
-      
-      isListening = false;
-    };
-
-    voiceSearchBtn.addEventListener('click', async () => {
-      if (isListening) {
-        recognition.stop();
-        return;
-      }
-
-      // Check if text is highlighted and clear it if so
-      if (searchBox.selectionStart === 0 && searchBox.selectionEnd === searchBox.value.length && searchBox.value.length > 0) {
-        searchBox.value = '';
-        baseSearchText = '';
-      }
-
-      // Request permission first time
-      if (!hasPermission) {
-        const granted = await requestMicPermission();
-        if (!granted) {
-          return;
-        }
-      }
-      
-      // Reset state
-      isListening = false;
-      
-      try {
-        recognition.start();
-      } catch (err) {
-        if (err.message && (err.message.includes('already started') || err.name === 'InvalidStateError')) {
-          recognition.stop();
-          setTimeout(() => {
-            try {
-              recognition.start();
-            } catch (e) {
-              alert('Voice recognition error. Please refresh the page and try again.');
-            }
-          }, 300);
-        } else {
-          alert('Could not start voice recognition: ' + err.message);
-        }
-      }
-    });
-  } else {
-    // Hide voice button if not supported
-    if (voiceSearchBtn) voiceSearchBtn.style.display = 'none';
-    console.warn('⚠️ Speech recognition not supported in this browser');
-  }
-
-  // --- Filters ---
-  filterToggle.addEventListener('click',()=>{ filtersPanel.classList.toggle('hidden'); filterToggle.textContent = filtersPanel.classList.contains('hidden')?'Show Filters':'Hide Filters'; });
-  
-  // Select all text on first click, normal behavior on second click
-  let searchBoxSelected = false;
-  searchBox.addEventListener('focus', () => {
-    if (!searchBoxSelected) {
-      searchBox.select();
-      searchBoxSelected = true;
-    }
-  });
-  searchBox.addEventListener('mousedown', () => {
-    if (searchBoxSelected) {
-      searchBoxSelected = false;
-    }
-  });
-  searchBox.addEventListener('blur', () => {
-    searchBoxSelected = false;
-  });
-  
-  searchBox.addEventListener('input',()=>{
-    // Remove periods added by voice dictation
-    searchBox.value = searchBox.value.replace(/\./g, '');
-    applyFiltersAndRender();
-  });
-  document.querySelectorAll('.filter-division').forEach(cb=>cb.addEventListener('change',()=>applyFiltersAndRender()));
-  document.querySelectorAll('.filter-active').forEach(cb=>{ cb.addEventListener('change',()=>{
-    if(cb.checked) document.querySelectorAll('.filter-active').forEach(o=>{if(o!==cb)o.checked=false;}); applyFiltersAndRender();
-  });});
-  document.querySelectorAll('.filter-estimator').forEach(cb=>{ cb.addEventListener('change',()=>{
-    if(cb.checked) document.querySelectorAll('.filter-estimator').forEach(o=>{if(o!==cb)o.checked=false;}); applyFiltersAndRender();
-  });});
-  document.querySelectorAll('.filter-status').forEach(cb=>cb.addEventListener('change',()=>applyFiltersAndRender()));
-  document.getElementById('clearFilters').addEventListener('click',()=>{
-    document.querySelectorAll('.filter-division, .filter-active, .filter-status, .filter-estimator').forEach(cb=>cb.checked=false);
-    applyFiltersAndRender();
-  });
-
-  // --- Preferences ---
-  async function loadUserPreferences(){
-    console.log('loadUserPreferences: email=', currentUserEmail);
-    if(!currentUserEmail) return null;
-    try{
-      const list = await pb.collection('user_preferences').getList(1,1,{
-        filter: `user_email="${currentUserEmail}"`
-      });
-      const record = list?.items?.[0];
-      const prefs = record?.job_info_prefs || record?.prefs || null;
-      console.log('loadUserPreferences: fetched prefs=', prefs);
-      if(!prefs && currentUserEmail.toLowerCase()==='rcardoza@cardoza.construction'){
-        console.log('loadUserPreferences: using fallback for rcardoza');
-        return { filters: { active:true, estimator:'Steve Brewer', job_division:'C#' } };
-      }
-      return prefs;
-    }catch(err){
-      console.warn('loadUserPreferences: error=', err);
-      const isTarget = currentUserEmail && currentUserEmail.toLowerCase()==='rcardoza@cardoza.construction';
-      if(isTarget){
-        console.log('loadUserPreferences: using error fallback for rcardoza');
-        return { filters: { active:true, estimator:'Steve Brewer', job_division:'C#' } };
-      }
-      return null;
-    }
-  }
-
-  function applyPrefsToFilters(prefs){
-    console.log('applyPrefsToFilters: received prefs=', prefs);
-    // Handle both direct filters and nested prefs.filters
-    const filters = prefs?.filters || prefs?.prefs?.filters;
-    if(!filters) {
-      console.log('applyPrefsToFilters: no filters found, returning');
-      return;
-    }
-    const { active, estimator, job_division, status } = filters;
-    console.log('applyPrefsToFilters: applying filters', filters);
-
-    // reset all filters first
-    document.querySelectorAll('.filter-division, .filter-active, .filter-status, .filter-estimator').forEach(cb=>cb.checked=false);
-
-    if(typeof active === 'boolean'){
-      document.querySelectorAll('.filter-active').forEach(cb=>{
-        const v = cb.value.trim().toLowerCase();
-        if((active && v==='yes') || (!active && v==='no')) cb.checked=true;
-      });
-    }
-
-    if(estimator){
-      const estLower = String(estimator||'').trim().toLowerCase();
-      document.querySelectorAll('.filter-estimator').forEach(cb=>{
-        const cbVal = cb.value.trim().toLowerCase();
-        if(cbVal === estLower || cbVal.includes(estLower) || estLower.includes(cbVal)) cb.checked=true;
-      });
-      // If no estimator got checked, try a direct match to 'steve brewer'
-      const anyChecked = Array.from(document.querySelectorAll('.filter-estimator')).some(cb=>cb.checked);
-      if(!anyChecked && estLower.startsWith('steve')){
-        document.querySelectorAll('.filter-estimator').forEach(cb=>{
-          if(cb.value.trim().toLowerCase().includes('steve')) cb.checked=true;
-        });
-      }
-    }
-
-    if(job_division){
-      const jd = String(job_division||'').trim().toLowerCase();
-      let code=null;
-      if(jd.includes('c#') || jd.includes('commercial')) code='C#';
-      else if(jd.includes('r#') || jd.includes('residential')) code='R#';
-      else if(jd.includes('s#') || jd.includes('small')) code='S#';
-      if(code){
-        document.querySelectorAll('.filter-division').forEach(cb=>{ if(cb.value===code) cb.checked=true; });
-      }
-    }
-
-    if(status){
-      const arr = Array.isArray(status) ? status : [status];
-      const lowerStatuses = arr.map(s=>String(s||'').trim().toLowerCase());
-      document.querySelectorAll('.filter-status').forEach(cb=>{
-        if(lowerStatuses.includes(cb.value.trim().toLowerCase())) cb.checked=true;
-      });
-    }
-
-    applyFiltersAndRender();
-  }
-
-  // --- Modal & Notes ---
-  function openDetail(job){
-    currentJob = job;
-    
-    // Show modal immediately
-    detailModal.classList.remove('hidden');
-    document.getElementById('detailBox').scrollTop = 0;
-    switchTab('info');
-    
-    // Show loading state
-    detailTable.innerHTML = '<div class="text-gray-500 text-sm">Loading...</div>';
-    
-    // Preload files in background
-    if (job.Job_Folder_Link) {
-      preloadJobFiles(job).catch(err => console.log('Background preload error:', err));
-    }
-    
-    // Populate details asynchronously
-    setTimeout(() => populateDetailContent(job), 0);
-  }
-  
-  function populateDetailContent(job){
-    detailTable.innerHTML = '';
-    const fields = ["Job_Full_Name","Job_Number","Company_Client","Manager","Contact_Person","Phone_Number","Job_Address","Start_Date","Tax_Exempt","Job_Status","Job_Type"];
-    let i = 0;
-    while(i < fields.length){
-      const f = fields[i];
-      
-      // Handle paired fields
-      if(f === 'Job_Number'){
-        const row = document.createElement('div'); row.className='pb-2 border-b border-gray-100 flex gap-4';
-        
-        // Job Number
-        const col1 = document.createElement('div'); col1.className='flex-1';
-        const label1 = document.createElement('div'); label1.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label1.textContent='Job Number';
-        const val1 = document.createElement('div'); val1.className='text-sm text-gray-900'; val1.textContent = job['Job_Number'] || '—';
-        col1.appendChild(label1); col1.appendChild(val1);
-        
-        // Company Client
-        const col2 = document.createElement('div'); col2.className='flex-1';
-        const label2 = document.createElement('div'); label2.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label2.textContent='Company Client';
-        const val2 = document.createElement('div'); val2.className='text-sm text-gray-900'; val2.textContent = job['Company_Client'] || '—';
-        col2.appendChild(label2); col2.appendChild(val2);
-        
-        row.appendChild(col1); row.appendChild(col2); detailTable.appendChild(row);
-        i += 2; // Skip Company_Client in next iteration
-        continue;
-      }
-      
-      if(f === 'Contact_Person'){
-        const row = document.createElement('div'); row.className='pb-2 border-b border-gray-100 flex gap-4';
-        
-        // Contact Person
-        const col1 = document.createElement('div'); col1.className='flex-1';
-        const label1 = document.createElement('div'); label1.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label1.textContent='Contact Person';
-        const val1 = document.createElement('div'); val1.className='text-sm text-gray-900'; val1.textContent = job['Contact_Person'] || '—';
-        col1.appendChild(label1); col1.appendChild(val1);
-        
-        // Phone Number
-        const col2 = document.createElement('div'); col2.className='flex-1';
-        const label2 = document.createElement('div'); label2.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label2.textContent='Phone Number';
-        const val2 = document.createElement('div'); val2.className='text-sm';
-        if(job['Phone_Number'] && job['Phone_Number'].trim() !== ''){
-          const phoneLink = document.createElement('a');
-          const phoneNumber = job['Phone_Number'].replace(/\D/g, ''); // Remove non-digits
-          phoneLink.href = `tel:${phoneNumber}`;
-          phoneLink.className = 'text-blue-600 hover:text-blue-800 underline';
-          phoneLink.textContent = job['Phone_Number'];
-          val2.appendChild(phoneLink);
-        } else {
-          val2.className = 'text-sm text-gray-900';
-          val2.textContent = '—';
-        }
-        col2.appendChild(label2); col2.appendChild(val2);
-        
-        row.appendChild(col1); row.appendChild(col2); detailTable.appendChild(row);
-        i += 2; // Skip Phone_Number in next iteration
-        continue;
-      }
-
-      if(f === 'Job_Status'){
-        const row = document.createElement('div'); row.className='pb-2 border-b border-gray-100 flex gap-4';
-
-        // Job Status
-        const col1 = document.createElement('div'); col1.className='flex-1';
-        const label1 = document.createElement('div'); label1.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label1.textContent='Job Status';
-        const val1 = document.createElement('div'); val1.className='text-sm text-gray-900'; val1.textContent = job['Job_Status'] || '—';
-        col1.appendChild(label1); col1.appendChild(val1);
-
-        // Job Type
-        const col2 = document.createElement('div'); col2.className='flex-1';
-        const label2 = document.createElement('div'); label2.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label2.textContent='Job Type';
-        const val2 = document.createElement('div'); val2.className='text-sm text-gray-900'; val2.textContent = job['Job_Type'] || '—';
-        col2.appendChild(label2); col2.appendChild(val2);
-
-        row.appendChild(col1); row.appendChild(col2); detailTable.appendChild(row);
-        i += 2; // Skip Job_Type in next iteration
-        continue;
-      }
-
-      if(f === 'Manager'){
-        const row = document.createElement('div'); row.className='pb-2 border-b border-gray-100 flex gap-4';
-
-        const col1 = document.createElement('div'); col1.className='flex-1';
-        const label1 = document.createElement('div'); label1.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label1.textContent='Manager';
-        const val1 = document.createElement('div'); val1.className='text-sm text-gray-900'; val1.textContent = job['Project_Manager'] || '—';
-        col1.appendChild(label1); col1.appendChild(val1);
-
-        const col2 = document.createElement('div'); col2.className='flex-1';
-        const label2 = document.createElement('div'); label2.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label2.textContent='Job Division';
-        const val2 = document.createElement('div'); val2.className='text-sm text-gray-900'; val2.textContent = job['Job_Division'] || '—';
-        col2.appendChild(label2); col2.appendChild(val2);
-
-        row.appendChild(col1); row.appendChild(col2); detailTable.appendChild(row);
-        i += 1; // Manager handled with Job_Division
-        continue;
-      }
-      
-      // Regular single field
-      const value = job[f] || '';
-      if(!value && f === 'Tax_Exempt') {
-        i++;
-        continue; // Skip empty Tax Exempt
-      }
-      
-      const row = document.createElement('div'); row.className='pb-2 border-b border-gray-100 last:border-0';
-      const label = document.createElement('div'); label.className='text-xs font-bold text-gray-700 uppercase tracking-wide mb-1'; label.textContent=f.replace(/_/g,' ');
-      const val = document.createElement('div'); val.className='text-sm text-gray-900 font-medium'; 
-      
-      // Format date if it's Start_Date
-      if(f === 'Start_Date' && value){
-        try {
-          const date = new Date(value);
-          val.textContent = date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
-        } catch(e) {
-          val.textContent = value;
-        }
-      } else if(f === 'Job_Address' && value && value.trim() !== ''){
-        // Create address container with text and map icons
-        val.className = 'text-sm flex items-center gap-2 flex-wrap';
-        
-        // Address text
-        const addressText = document.createElement('span');
-        addressText.className = 'text-gray-900 flex-1 min-w-0';
-        addressText.textContent = value;
-        val.appendChild(addressText);
-        
-        // Icon container
-        const iconContainer = document.createElement('div');
-        iconContainer.className = 'flex items-center gap-2';
-        
-        // Apple Maps link
-        const appleLink = document.createElement('a');
-        const encodedAddress = encodeURIComponent(value);
-        appleLink.href = `https://maps.apple.com/?q=${encodedAddress}`;
-        appleLink.target = '_blank';
-        appleLink.className = 'inline-flex items-center justify-center w-6 h-6 hover:opacity-80 transition-opacity';
-        appleLink.title = 'Open in Apple Maps';
-        appleLink.innerHTML = '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" style="fill: #000000;"><title>Apple</title><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>';
-        iconContainer.appendChild(appleLink);
-        
-        // Google Maps link
-        const googleLink = document.createElement('a');
-        googleLink.href = `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
-        googleLink.target = '_blank';
-        googleLink.className = 'inline-flex items-center justify-center w-6 h-6 hover:opacity-80 transition-opacity';
-        googleLink.title = 'Open in Google Maps';
-        googleLink.innerHTML = '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" style="fill: #4285F4;"><title>Google</title><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/></svg>';
-        iconContainer.appendChild(googleLink);
-        
-        val.appendChild(iconContainer);
-      } else {
-        val.textContent = value || '—';
-      }
-      
-      row.appendChild(label); row.appendChild(val); detailTable.appendChild(row);
-      i++;
-    }
-
-    // Job folder button
-    if(job.Job_Folder_Link && String(job.Job_Folder_Link).trim()!==''){
-      try{ 
-        const url=new URL(job.Job_Folder_Link); 
-        jobFolderBtn.textContent='Show Job Folder';
-        jobFolderBtn.disabled=false;
-        jobFolderBtn.className='w-full py-2.5 px-3 rounded-lg border-none text-white cursor-pointer text-[17px] font-bold mb-2.5 transition-colors duration-200 bg-blue-600 hover:bg-blue-700';
-        jobFolderBtn.onclick=()=>openJobFiles(job);
-      }catch(e){ 
-        jobFolderBtn.textContent='No Folder Available'; 
-        jobFolderBtn.disabled=true; 
-        jobFolderBtn.className='w-full py-2.5 px-3 rounded-lg border-none text-white cursor-pointer text-[17px] font-bold mb-2.5 transition-colors duration-200 bg-gray-600 cursor-not-allowed opacity-70'; 
-        jobFolderBtn.onclick=null;
-      }
-    } else { 
-      jobFolderBtn.textContent='No Folder Available'; 
-      jobFolderBtn.disabled=true; 
-      jobFolderBtn.className='w-full py-2.5 px-3 rounded-lg border-none text-white cursor-pointer text-[17px] font-bold mb-2.5 transition-colors duration-200 bg-gray-600 cursor-not-allowed opacity-70'; 
-      jobFolderBtn.onclick=null;
-    }
-
-    jobNotes.innerHTML = job.Notes || '';
-    newNote.innerHTML = '';
-    tbButtons.forEach(b=>b.classList.remove('bg-blue-100', 'text-gray-900', 'border-blue-600'));
-  }
-
-  async function populateManagerInfo(job) {
-    const managerInfoTable = document.getElementById('managerInfoTable');
-    managerInfoTable.innerHTML = '';
-
-    // Row 1: Job Full Name (spans 2 cols), Manager, Job Status
-    const row1 = document.createElement('div');
-    row1.className = 'grid grid-cols-4 gap-4 pb-3 border-b border-gray-200';
-    
-    const jobFullNameDiv = document.createElement('div');
-    jobFullNameDiv.className = 'col-span-2';
-    jobFullNameDiv.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Job Full Name</div><div class="text-gray-900 truncate" style="font-size: 10px;" title="${job.Job_Full_Name || '—'}">${job.Job_Full_Name || '—'}</div>`;
-    
-    const managerDiv = document.createElement('div');
-    managerDiv.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Manager</div><div class="text-gray-900" style="font-size: 10px;">${job.Project_Manager || '—'}</div>`;
-    
-    const jobStatusDiv = document.createElement('div');
-    jobStatusDiv.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Job Status</div><div class="text-gray-900" style="font-size: 10px;">${job.Job_Status || '—'}</div>`;
-    
-    row1.appendChild(jobFullNameDiv);
-    row1.appendChild(managerDiv);
-    row1.appendChild(jobStatusDiv);
-    managerInfoTable.appendChild(row1);
-
-    // Row 2: Job Number, Job Division, Job Type, Scope
-    const row2 = document.createElement('div');
-    row2.className = 'grid grid-cols-4 gap-4 pb-3 border-b border-gray-200';
-    
-    const jobNum = document.createElement('div');
-    jobNum.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Job Number</div><div class="text-gray-900 text-center" style="font-size: 10px;">${job.Job_Number || '—'}</div>`;
-    
-    const jobDivision = document.createElement('div');
-    jobDivision.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Job Division</div><div class="text-gray-900 text-center" style="font-size: 10px;">${job.Job_Division || '—'}</div>`;
-    
-    const jobType = document.createElement('div');
-    jobType.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Job Type</div><div class="text-gray-900 text-center" style="font-size: 10px;">${job.Job_Type || '—'}</div>`;
-    
-    const scopeDiv = document.createElement('div');
-    scopeDiv.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Scope</div><div class="text-gray-900 text-center" style="font-size: 10px;">${job.Scope || '—'}</div>`;
-    
-    row2.appendChild(jobNum);
-    row2.appendChild(jobDivision);
-    row2.appendChild(jobType);
-    row2.appendChild(scopeDiv);
-    managerInfoTable.appendChild(row2);
-
-    // Row 3: Company/Client, Contact Person, Contact Number, EXT.
-    const row3 = document.createElement('div');
-    row3.className = 'grid grid-cols-4 gap-4 pb-3 border-b border-gray-200';
-    
-    const companyClient = document.createElement('div');
-    companyClient.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Company/Client</div><div class="text-gray-900 text-center" style="font-size: 10px;">${job.Company_Client || '—'}</div>`;
-    
-    const contactPerson = document.createElement('div');
-    contactPerson.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Contact Person</div><div class="text-gray-900 text-center" style="font-size: 10px;">${job.Contact_Person || '—'}</div>`;
-    
-    const contactNumber = document.createElement('div');
-    contactNumber.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Contact Number</div>`;
-    const phoneDiv = document.createElement('div');
-    phoneDiv.className = 'text-center';
-    phoneDiv.style.fontSize = '10px';
-    if(job.Phone_Number && job.Phone_Number.trim() !== ''){
-      const phoneLink = document.createElement('a');
-      const phoneNumber = job.Phone_Number.replace(/\D/g, '');
-      phoneLink.href = `tel:${phoneNumber}`;
-      phoneLink.className = 'text-blue-600 hover:text-blue-800 underline';
-      phoneLink.textContent = job.Phone_Number;
-      phoneDiv.appendChild(phoneLink);
-    } else {
-      phoneDiv.className = 'text-gray-900 text-center';
-      phoneDiv.textContent = '—';
-    }
-    contactNumber.appendChild(phoneDiv);
-    
-    const extn = document.createElement('div');
-    extn.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">EXT.</div><div class="text-gray-900 text-center" style="font-size: 10px;">${job.EXT || '—'}</div>`;
-    
-    row3.appendChild(companyClient);
-    row3.appendChild(contactPerson);
-    row3.appendChild(contactNumber);
-    row3.appendChild(extn);
-    managerInfoTable.appendChild(row3);
-
-    // Row 4: Job Address (spans 2 cols), Map Icons (3rd col), EST Cost (4th col)
-    const row4 = document.createElement('div');
-    row4.className = 'grid grid-cols-4 gap-4 pb-3 border-b border-gray-200';
-    
-    // Job Address spanning 2 columns
-    const addressContainer = document.createElement('div');
-    addressContainer.className = 'col-span-2';
-    addressContainer.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Job Address</div>`;
-    const addressVal = document.createElement('div');
-    addressVal.style.fontSize = '10px';
-    addressVal.className = 'text-gray-900';
-    addressVal.textContent = job.Job_Address || '—';
-    addressContainer.appendChild(addressVal);
-    
-    // Map Icons in 3rd column
-    const mapIconsContainer = document.createElement('div');
-    mapIconsContainer.className = 'flex items-end gap-2';
-    
-    if(job.Job_Address && job.Job_Address.trim() !== ''){
-      const appleLink = document.createElement('a');
-      const encodedAddress = encodeURIComponent(job.Job_Address);
-      appleLink.href = `https://maps.apple.com/?q=${encodedAddress}`;
-      appleLink.target = '_blank';
-      appleLink.className = 'inline-flex items-center justify-center w-5 h-5 hover:opacity-80 transition-opacity';
-      appleLink.title = 'Open in Apple Maps';
-      appleLink.innerHTML = '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" style="fill: #000000;"><title>Apple</title><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>';
-      mapIconsContainer.appendChild(appleLink);
-      
-      const googleLink = document.createElement('a');
-      googleLink.href = `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
-      googleLink.target = '_blank';
-      googleLink.className = 'inline-flex items-center justify-center w-5 h-5 hover:opacity-80 transition-opacity';
-      googleLink.title = 'Open in Google Maps';
-      googleLink.innerHTML = '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" style="fill: #4285F4;"><title>Google</title><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/></svg>';
-      mapIconsContainer.appendChild(googleLink);
-    }
-    
-    // EST Cost in 4th column (centered)
-    const estimatedCostContainer = document.createElement('div');
-    let costFormatted = '—';
-    if(job.Estimated_Cost !== null && job.Estimated_Cost !== undefined && job.Estimated_Cost !== '') {
-      const costNum = parseFloat(job.Estimated_Cost);
-      if(!isNaN(costNum)) {
-        costFormatted = '$' + costNum.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-      }
-    }
-    estimatedCostContainer.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">EST Cost</div><div class="text-gray-900 text-center" style="font-size: 10px;">${costFormatted}</div>`;
-    
-    row4.appendChild(addressContainer);
-    row4.appendChild(mapIconsContainer);
-    row4.appendChild(estimatedCostContainer);
-    managerInfoTable.appendChild(row4);
-
-    // Row 5: EST Start Date, Actual Start Date, EST End Date
-    const row5 = document.createElement('div');
-    row5.className = 'grid grid-cols-3 gap-4 pb-3 border-b border-gray-200';
-    
-    // Format the start date for both estimated and actual (short format)
-    let startDateFormatted = '—';
-    if(job.Start_Date){
-      try {
-        const date = new Date(job.Start_Date);
-        startDateFormatted = date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
-      } catch(e) {
-        startDateFormatted = job.Start_Date;
-      }
-    }
-    
-    const estimatedStartDate = document.createElement('div');
-    estimatedStartDate.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">EST Start Date</div><div class="text-gray-900 text-center" style="font-size: 10px;">${startDateFormatted}</div>`;
-    
-    let actualStartDateFormatted = '—';
-    if(job.Start_Date_Actual){
-      try {
-        const date = new Date(job.Start_Date_Actual);
-        actualStartDateFormatted = date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
-      } catch(e) {
-        actualStartDateFormatted = job.Start_Date_Actual;
-      }
-    }
-    const actualStartDate = document.createElement('div');
-    actualStartDate.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">Actual Start Date</div><div class="text-gray-900 text-center" style="font-size: 10px;">${actualStartDateFormatted}</div>`;
-    
-    let estimatedEndDateFormatted = '—';
-    if(job.Estimated_End_Date){
-      try {
-        const date = new Date(job.Estimated_End_Date);
-        estimatedEndDateFormatted = date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });
-      } catch(e) {
-        estimatedEndDateFormatted = job.Estimated_End_Date;
-      }
-    }
-    const estimatedEndDate = document.createElement('div');
-    estimatedEndDate.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1 text-center" style="font-size: 8px;">EST End Date</div><div class="text-gray-900 text-center" style="font-size: 10px;">${estimatedEndDateFormatted}</div>`;
-    
-    row5.appendChild(estimatedStartDate);
-    row5.appendChild(actualStartDate);
-    row5.appendChild(estimatedEndDate);
-    managerInfoTable.appendChild(row5);
-
-    // Notes Section with Tabs
-    const notesSection = document.createElement('div');
-    notesSection.className = 'mt-4';
-    
-    // Tab buttons
-    const notesTabs = document.createElement('div');
-    notesTabs.className = 'flex gap-2 mb-2';
-    
-    const jobNotesTabBtn = document.createElement('button');
-    jobNotesTabBtn.id = 'jobNotesTab';
-    jobNotesTabBtn.className = 'px-3 py-1 font-bold uppercase bg-orange-600 text-white rounded cursor-pointer';
-    jobNotesTabBtn.style.fontSize = '8px';
-    jobNotesTabBtn.textContent = 'Notes';
-    
-    const managerNotesTabBtn = document.createElement('button');
-    managerNotesTabBtn.id = 'managerNotesTab';
-    managerNotesTabBtn.className = 'px-3 py-1 font-bold uppercase bg-gray-300 text-gray-700 rounded hover:bg-gray-400 cursor-pointer';
-    managerNotesTabBtn.style.fontSize = '8px';
-    managerNotesTabBtn.textContent = 'Manager Notes';
-    
-    notesTabs.appendChild(jobNotesTabBtn);
-    notesTabs.appendChild(managerNotesTabBtn);
-    notesSection.appendChild(notesTabs);
-    
-    // Job Notes Content
-    const jobNotesContent = document.createElement('div');
-    jobNotesContent.id = 'jobNotesContent';
-    jobNotesContent.className = 'notes-tab-content';
-    
-    // Container for display with expand button
-    const jobNotesDisplayContainer = document.createElement('div');
-    jobNotesDisplayContainer.className = 'relative mb-3';
-    
-    // Display notes first
-    const jobNotesDisplay = document.createElement('div');
-    jobNotesDisplay.id = 'jobNotesDisplay';
-    jobNotesDisplay.className = 'text-gray-600 whitespace-pre-wrap break-words p-2 border border-gray-300 rounded bg-gray-50 overflow-y-auto';
-    jobNotesDisplay.style.fontSize = '10px';
-    jobNotesDisplay.style.height = '120px';
-    jobNotesDisplay.style.maxHeight = '120px';
-    jobNotesDisplay.innerHTML = job.Notes || '<span class="text-gray-400 italic">No notes available</span>';
-    jobNotesDisplayContainer.appendChild(jobNotesDisplay);
-    
-    jobNotesContent.appendChild(jobNotesDisplayContainer);
-    
-    // Add Note button below notes display
-    const addNoteBtn = document.createElement('button');
-    addNoteBtn.className = 'mb-2 px-3 py-1 bg-green-600 text-white rounded font-bold hover:bg-green-700 cursor-pointer';
-    addNoteBtn.style.fontSize = '8px';
-    addNoteBtn.textContent = 'Add A Note';
-    jobNotesContent.appendChild(addNoteBtn);
-    
-    // Note editor (collapsed by default)
-    const noteEditor = document.createElement('div');
-    noteEditor.id = 'jobNoteEditor';
-    noteEditor.className = 'hidden mb-3 p-2 border border-gray-300 rounded bg-gray-50';
-    noteEditor.innerHTML = `
-      <div class="flex flex-wrap gap-1 mb-2">
-        <button data-cmd="bold" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center" style="font-size: 8px;"><strong>B</strong></button>
-        <button data-cmd="italic" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center" style="font-size: 8px;"><em>I</em></button>
-        <button data-cmd="underline" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center" style="font-size: 8px;"><u>U</u></button>
-        <button data-cmd="foreColor" data-val="#ff0000" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center text-red-500" style="font-size: 8px;">A</button>
-        <button data-cmd="foreColor" data-val="#0000ff" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center text-blue-600" style="font-size: 8px;">A</button>
-        <button data-cmd="foreColor" data-val="#000000" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center text-black" style="font-size: 8px;">A</button>
-        <button data-cmd="removeFormat" class="h-6 px-2 rounded border border-gray-400 bg-gray-400 text-white cursor-pointer flex items-center justify-center" style="font-size: 8px;">Reset</button>
-        <button id="jobNoteMic" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 cursor-pointer flex items-center justify-center" title="Voice to text">
-          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="#4B5563">
-            <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
-            <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
-          </svg>
-        </button>
-      </div>
-      <div id="jobNewNote" contenteditable="true" class="min-h-14 max-h-[120px] overflow-auto p-2 border border-gray-600 rounded text-sm bg-white mb-2"></div>
-      <div class="flex gap-2">
-        <button id="jobNoteSubmit" class="px-3 py-1 rounded text-white bg-green-600 hover:bg-green-700 font-bold cursor-pointer" style="font-size: 8px;">Submit</button>
-        <button id="jobNoteClear" class="px-3 py-1 rounded text-white bg-gray-500 hover:bg-gray-600 font-bold cursor-pointer" style="font-size: 8px;">Clear</button>
-        <button id="jobNoteCollapse" class="px-3 py-1 rounded text-white bg-red-600 hover:bg-red-700 font-bold cursor-pointer" style="font-size: 8px;">Close</button>
-      </div>
-    `;
-    jobNotesContent.appendChild(noteEditor);
-    
-    // File columns - always create them
-    const fileColumns = document.createElement('div');
-    fileColumns.id = 'jobNotesFileColumns';
-    fileColumns.className = 'grid grid-cols-3 gap-4 mt-3';
-    
-    // Initialize with empty state
-    fileColumns.innerHTML = `
-      <div>
-        <div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Plans</div>
-        <div class="text-gray-400 italic" style="font-size: 10px;">Loading...</div>
-      </div>
-      <div>
-        <div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Estimates</div>
-        <div class="text-gray-400 italic" style="font-size: 10px;">Loading...</div>
-      </div>
-      <div>
-        <div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Other Files</div>
-        <div class="text-gray-400 italic" style="font-size: 10px;">Loading...</div>
-      </div>
-    `;
-    jobNotesContent.appendChild(fileColumns);
-    
-    // Manager Notes Content
-    const managerNotesContent = document.createElement('div');
-    managerNotesContent.id = 'managerNotesContent';
-    managerNotesContent.className = 'notes-tab-content hidden';
-    
-    // Container for display with expand button
-    const managerNotesDisplayContainer = document.createElement('div');
-    managerNotesDisplayContainer.className = 'relative mb-3';
-    
-    // Display manager notes first
-    const managerNotesDisplay = document.createElement('div');
-    managerNotesDisplay.id = 'managerNotesDisplay';
-    managerNotesDisplay.className = 'text-gray-600 whitespace-pre-wrap break-words p-2 border border-gray-300 rounded bg-gray-50 overflow-y-auto';
-    managerNotesDisplay.style.fontSize = '10px';
-    managerNotesDisplay.style.height = '120px';
-    managerNotesDisplay.style.maxHeight = '120px';
-    managerNotesDisplay.innerHTML = '<span class="text-gray-400 italic">No manager notes available</span>';
-    managerNotesDisplayContainer.appendChild(managerNotesDisplay);
-    
-    managerNotesContent.appendChild(managerNotesDisplayContainer);
-    
-    // Add Note button for manager below notes display
-    const addManagerNoteBtn = document.createElement('button');
-    addManagerNoteBtn.className = 'mb-2 px-3 py-1 bg-green-600 text-white rounded font-bold hover:bg-green-700 cursor-pointer';
-    addManagerNoteBtn.style.fontSize = '8px';
-    addManagerNoteBtn.textContent = 'Add A Note';
-    managerNotesContent.appendChild(addManagerNoteBtn);
-    
-    // Manager note editor (collapsed by default)
-    const managerNoteEditor = document.createElement('div');
-    managerNoteEditor.id = 'managerNoteEditor';
-    managerNoteEditor.className = 'hidden mb-3 p-2 border border-gray-300 rounded bg-gray-50';
-    managerNoteEditor.innerHTML = `
-      <div class="flex flex-wrap gap-1 mb-2">
-        <button data-cmd="bold" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center" style="font-size: 8px;"><strong>B</strong></button>
-        <button data-cmd="italic" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center" style="font-size: 8px;"><em>I</em></button>
-        <button data-cmd="underline" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center" style="font-size: 8px;"><u>U</u></button>
-        <button data-cmd="foreColor" data-val="#ff0000" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center text-red-500" style="font-size: 8px;">A</button>
-        <button data-cmd="foreColor" data-val="#0000ff" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center text-blue-600" style="font-size: 8px;">A</button>
-        <button data-cmd="foreColor" data-val="#000000" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 text-gray-900 cursor-pointer flex items-center justify-center text-black" style="font-size: 8px;">A</button>
-        <button data-cmd="removeFormat" class="h-6 px-2 rounded border border-gray-400 bg-gray-400 text-white cursor-pointer flex items-center justify-center" style="font-size: 8px;">Reset</button>
-        <button id="managerNoteMic" class="h-6 w-8 rounded border border-gray-400 bg-gray-400 cursor-pointer flex items-center justify-center" title="Voice to text">
-          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="#4B5563">
-            <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
-            <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
-          </svg>
-        </button>
-      </div>
-      <div id="managerNewNote" contenteditable="true" class="min-h-14 max-h-[120px] overflow-auto p-2 border border-gray-600 rounded text-sm bg-white mb-2"></div>
-      <div class="flex gap-2">
-        <button id="managerNoteSubmit" class="px-3 py-1 rounded text-white bg-green-600 hover:bg-green-700 font-bold cursor-pointer" style="font-size: 8px;">Submit</button>
-        <button id="managerNoteClear" class="px-3 py-1 rounded text-white bg-gray-500 hover:bg-gray-600 font-bold cursor-pointer" style="font-size: 8px;">Clear</button>
-        <button id="managerNoteCollapse" class="px-3 py-1 rounded text-white bg-red-600 hover:bg-red-700 font-bold cursor-pointer" style="font-size: 8px;">Close</button>
-      </div>
-    `;
-    managerNotesContent.appendChild(managerNoteEditor);
-    
-    // File columns for manager notes - always create them
-    const managerFileColumns = document.createElement('div');
-    managerFileColumns.id = 'managerNotesFileColumns';
-    managerFileColumns.className = 'grid grid-cols-3 gap-4 mt-3';
-    
-    // Initialize with empty state
-    managerFileColumns.innerHTML = `
-      <div>
-        <div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Plans</div>
-        <div class="text-gray-400 italic" style="font-size: 10px;">Loading...</div>
-      </div>
-      <div>
-        <div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Estimates</div>
-        <div class="text-gray-400 italic" style="font-size: 10px;">Loading...</div>
-      </div>
-      <div>
-        <div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Other Files</div>
-        <div class="text-gray-400 italic" style="font-size: 10px;">Loading...</div>
-      </div>
-    `;
-    managerNotesContent.appendChild(managerFileColumns);
-    
-    notesSection.appendChild(jobNotesContent);
-    notesSection.appendChild(managerNotesContent);
-    managerInfoTable.appendChild(notesSection);
-    
-    // Tab switching event listeners
-    jobNotesTabBtn.addEventListener('click', (e) => {
-      console.log('Notes tab clicked');
-      e.preventDefault();
-      e.stopPropagation();
-      jobNotesTabBtn.className = 'px-3 py-1 text-xs font-bold uppercase bg-orange-600 text-white rounded cursor-pointer';
-      managerNotesTabBtn.className = 'px-3 py-1 text-xs font-bold uppercase bg-gray-300 text-gray-700 rounded hover:bg-gray-400 cursor-pointer';
-      jobNotesContent.classList.remove('hidden');
-      managerNotesContent.classList.add('hidden');
-    });
-    
-    managerNotesTabBtn.addEventListener('click', (e) => {
-      console.log('Manager Notes tab clicked');
-      e.preventDefault();
-      e.stopPropagation();
-      managerNotesTabBtn.className = 'px-3 py-1 text-xs font-bold uppercase bg-orange-600 text-white rounded cursor-pointer';
-      jobNotesTabBtn.className = 'px-3 py-1 text-xs font-bold uppercase bg-gray-300 text-gray-700 rounded hover:bg-gray-400 cursor-pointer';
-      managerNotesContent.classList.remove('hidden');
-      jobNotesContent.classList.add('hidden');
-    });
-    
-    // Note editor controls
-    addNoteBtn.addEventListener('click', (e) => {
-      console.log('Add Note clicked');
-      e.preventDefault();
-      addNoteBtn.classList.add('hidden');
-      noteEditor.classList.remove('hidden');
-    });
-    
-    addManagerNoteBtn.addEventListener('click', (e) => {
-      console.log('Add Manager Note clicked');
-      e.preventDefault();
-      addManagerNoteBtn.classList.add('hidden');
-      managerNoteEditor.classList.remove('hidden');
-    });
-    
-    // Populate file columns
-    if(job.Job_Folder_Link && String(job.Job_Folder_Link).trim() !== ''){
-      console.log('Fetching files for notes sections...');
-      loadFilesForNotes(job.Job_Folder_Link).then(files => {
-        console.log('Files fetched, populating columns:', files.length);
-        populateNotesFileColumns(files, 'jobNotesFileColumns');
-        populateNotesFileColumns(files, 'managerNotesFileColumns');
-      }).catch(err => {
-        console.log('Error loading files for notes:', err);
-        // Show empty state on error
-        populateNotesFileColumns([], 'jobNotesFileColumns');
-        populateNotesFileColumns([], 'managerNotesFileColumns');
-      });
-    } else {
-      console.log('No Job_Folder_Link, showing empty state');
-      // Show empty state when no folder link
-      populateNotesFileColumns([], 'jobNotesFileColumns');
-      populateNotesFileColumns([], 'managerNotesFileColumns');
-    }
-    
-    // Load and display notes filtered by type
-    loadAndDisplayNotes(job);
-    
-    // Setup toolbar functionality for job notes editor
-    setupNoteEditorToolbar('jobNewNote', 'jobNoteEditor');
-    
-    // Setup toolbar functionality for manager notes editor
-    setupNoteEditorToolbar('managerNewNote', 'managerNoteEditor');
-    
-    // Setup voice-to-text for job notes
-    setupVoiceToText('jobNoteMic', 'jobNewNote');
-    
-    // Setup voice-to-text for manager notes
-    setupVoiceToText('managerNoteMic', 'managerNewNote');
-    
-    // Setup close functionality
-    document.getElementById('jobNoteCollapse').addEventListener('click', (e) => {
-      console.log('Close job note editor');
-      e.preventDefault();
-      noteEditor.classList.add('hidden');
-      addNoteBtn.classList.remove('hidden');
-    });
-    
-    document.getElementById('managerNoteCollapse').addEventListener('click', (e) => {
-      console.log('Close manager note editor');
-      e.preventDefault();
-      managerNoteEditor.classList.add('hidden');
-      addManagerNoteBtn.classList.remove('hidden');
-    });
-    
-    // Setup submit functionality
-    document.getElementById('jobNoteSubmit').addEventListener('click', async(e) => {
-      e.preventDefault();
-      await submitNote('jobNewNote', job, false);
-      noteEditor.classList.add('hidden');
-      addNoteBtn.classList.remove('hidden');
-    });
-    
-    document.getElementById('jobNoteClear').addEventListener('click', (e) => {
-      e.preventDefault();
-      document.getElementById('jobNewNote').innerHTML = '';
-    });
-    
-    document.getElementById('managerNoteSubmit').addEventListener('click', async(e) => {
-      e.preventDefault();
-      await submitNote('managerNewNote', job, true);
-      managerNoteEditor.classList.add('hidden');
-      addManagerNoteBtn.classList.remove('hidden');
-    });
-    
-    document.getElementById('managerNoteClear').addEventListener('click', (e) => {
-      e.preventDefault();
-      document.getElementById('managerNewNote').innerHTML = '';
-    });
-  }
-  
-  // Load files for notes sections
-  async function loadFilesForNotes(folderLink) {
-    console.log('loadFilesForNotes called with:', folderLink);
-    
-    const graphToken = await getGraphToken();
-    const headers = graphToken ? { 'x-graph-token': graphToken } : {};
-    
-    try {
-      const resp = await fetch(`/api/job-files?link=${encodeURIComponent(folderLink)}`, { headers });
-      
-      if(!resp.ok) {
-        console.error('Failed to fetch files:', resp.status, resp.statusText);
-        return [];
-      }
-      
-      const data = await resp.json();
-      console.log('Files loaded:', data.items?.length || 0);
-      return data.items || [];
-    } catch(err) {
-      console.error('Error in loadFilesForNotes:', err);
-      return [];
-    }
-  }
-  
-  // Setup voice-to-text functionality
-  function setupVoiceToText(micButtonId, editorId) {
-    const micBtn = document.getElementById(micButtonId);
-    const editor = document.getElementById(editorId);
-    
-    if(!micBtn || !editor) {
-      console.log('Mic button or editor not found:', micButtonId, editorId);
-      return;
-    }
-    
-    // Check for browser support
-    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-    if(!SpeechRecognition) {
-      micBtn.disabled = true;
-      micBtn.title = 'Speech recognition not supported';
-      micBtn.style.opacity = '0.5';
-      return;
-    }
-    
-    const recognition = new SpeechRecognition();
-    recognition.continuous = true;
-    recognition.interimResults = true;
-    recognition.lang = 'en-US';
-    
-    let isListening = false;
-    const micIcon = micBtn.querySelector('svg');
-    
-    micBtn.addEventListener('click', (e) => {
-      e.preventDefault();
-      
-      if(isListening) {
-        recognition.stop();
-        isListening = false;
-        micIcon.setAttribute('fill', '#4B5563'); // Gray (inactive)
-        micBtn.style.backgroundColor = '';
-      } else {
-        try {
-          recognition.start();
-          isListening = true;
-          micIcon.setAttribute('fill', '#EF4444'); // Red (recording)
-          micBtn.style.backgroundColor = '#FEE2E2'; // Light red background
-        } catch(err) {
-          console.error('Recognition start error:', err);
-        }
-      }
-    });
-    
-    recognition.onresult = (event) => {
-      let interimTranscript = '';
-      let finalTranscript = '';
-      
-      for(let i = event.resultIndex; i < event.results.length; i++) {
-        const transcript = event.results[i][0].transcript;
-        if(event.results[i].isFinal) {
-          finalTranscript += transcript + ' ';
-        } else {
-          interimTranscript += transcript;
-        }
-      }
-      
-      if(finalTranscript) {
-        // Insert final transcript at cursor position
-        editor.focus();
-        const selection = window.getSelection();
-        if(selection.rangeCount > 0) {
-          const range = selection.getRangeAt(0);
-          range.deleteContents();
-          range.insertNode(document.createTextNode(finalTranscript));
-          range.collapse(false);
-          selection.removeAllRanges();
-          selection.addRange(range);
-        } else {
-          // Fallback: append to end
-          editor.innerHTML += finalTranscript;
-        }
-      }
-    };
-    
-    recognition.onerror = (event) => {
-      console.error('Speech recognition error:', event.error);
-      isListening = false;
-      micIcon.setAttribute('fill', '#4B5563');
-      micBtn.style.backgroundColor = '';
-      
-      if(event.error === 'not-allowed') {
-        alert('Microphone access denied. Please allow microphone access in your browser settings.');
-      }
-    };
-    
-    recognition.onend = () => {
-      isListening = false;
-      micIcon.setAttribute('fill', '#4B5563');
-      micBtn.style.backgroundColor = '';
-    };
-  }
-  
-  // Setup toolbar for note editors
-  function setupNoteEditorToolbar(editorId, containerId) {
-    const editor = document.getElementById(editorId);
-    const container = document.getElementById(containerId);
-    if(!editor || !container) return;
-    
-    let savedSelection = null;
-    function saveSelection() {
-      const sel = window.getSelection();
-      if(sel.rangeCount > 0) savedSelection = sel.getRangeAt(0);
-    }
-    function restoreSelection() {
-      const sel = window.getSelection();
-      if(savedSelection) {
-        sel.removeAllRanges();
-        sel.addRange(savedSelection);
-      }
-    }
-    
-    editor.addEventListener('mouseup', saveSelection);
-    editor.addEventListener('keyup', saveSelection);
-    editor.addEventListener('focus', saveSelection);
-    
-    const buttons = container.querySelectorAll('[data-cmd]');
-    buttons.forEach(btn => {
-      btn.addEventListener('mousedown', e => {
-        e.preventDefault();
-        restoreSelection();
-        const cmd = btn.dataset.cmd;
-        if(!cmd) return;
-        
-        if(cmd === 'foreColor') {
-          const val = btn.dataset.val;
-          document.execCommand(cmd, false, val);
-          buttons.forEach(b => {
-            if(b.dataset.cmd === 'foreColor' && b !== btn) {
-              b.classList.remove('bg-blue-100', 'text-gray-900', 'border-blue-600');
-            }
-          });
-          btn.classList.toggle('bg-blue-100');
-          btn.classList.toggle('text-gray-900');
-          btn.classList.toggle('border-blue-600');
-        } else if(cmd === 'removeFormat') {
-          restoreSelection();
-          const sel = window.getSelection();
-          if(sel.rangeCount > 0) {
-            const range = sel.getRangeAt(0);
-            let content = range.toString();
-            range.deleteContents();
-            range.insertNode(document.createTextNode(content));
-            range.setStartAfter(range.startContainer);
-            range.collapse(true);
-            sel.removeAllRanges();
-            sel.addRange(range);
-          }
-          buttons.forEach(b => b.classList.remove('bg-blue-100', 'text-gray-900', 'border-blue-600'));
-        } else {
-          document.execCommand(cmd, false, null);
-          btn.classList.toggle('bg-blue-100');
-          btn.classList.toggle('text-gray-900');
-          btn.classList.toggle('border-blue-600');
-        }
-        
-        editor.focus();
-        saveSelection();
-      });
-    });
-  }
-  
-  // Submit note function
-  async function submitNote(editorId, job, isManagerNote) {
-    const editor = document.getElementById(editorId);
-    const html = editor.innerHTML.trim();
-    if(!html) {
-      alert('Enter note text');
-      return;
-    }
-    
-    const now = new Date();
-    const timestamp = now.toLocaleString('en-US', { 
-      year: 'numeric', 
-      month: '2-digit', 
-      day: '2-digit', 
-      hour: '2-digit', 
-      minute: '2-digit', 
-      hour12: true 
-    });
-    const currentUserName = getDisplayName();
-    const noteType = isManagerNote ? 'manager' : 'job';
-    const typeLabel = isManagerNote ? '[MANAGER]' : '';
-    const formatted = `${typeLabel}[${currentUserName} - ${timestamp}] ${html}`;
-    
-    try {
-      // If it's a job note, first update Job_Info_Prod.Notes field
-      let jobRecordId = job?.id || '';
-      
-      if(!isManagerNote) {
-        // Fetch the latest notes from PocketBase to ensure we have the full chain
-        const fetchLatest = await fetch(`${PB_COLLECTION_URL}/${job.id}`, {
-          headers: authHeaders()
-        });
-        
-        if(fetchLatest.ok) {
-          const latestJob = await fetchLatest.json();
-          const currentNotes = latestJob.Notes || '';
-          const updatedNotes = formatted + '\n\n' + currentNotes;
-          
-          const resJob = await fetch(`${PB_COLLECTION_URL}/${job.id}`, {
-            method: 'PATCH',
-            headers: {'Content-Type': 'application/json', ...authHeaders()},
-            body: JSON.stringify({Notes: updatedNotes})
-          });
-          
-          if(!resJob.ok) {
-            console.error('Job_Info update failed:', resJob.status);
-            throw new Error('Failed to update Job_Info: ' + resJob.status);
-          }
-          
-          const updated = await resJob.json();
-          jobRecordId = updated.id || job.id;
-          
-          // Update both current job object and the passed job parameter
-          currentJob.Notes = updatedNotes;
-          job.Notes = updatedNotes;
-          console.log('Updated Job_Info_Prod.Notes for job:', jobRecordId);
-        } else {
-          throw new Error('Failed to fetch latest job data: ' + fetchLatest.status);
-        }
-      }
-      
-      // Create payload - only include job_info_id, not Job_Number_Id array
-      const payloadNote = {
-        Note: formatted.trim(),
-        Job_Number: job?.Job_Number || '',
-        job_info_id: jobRecordId,
-        type: noteType
-      };
-      
-      console.log('Submitting note payload:', payloadNote);
-      
-      // Create note in notes collection with type
-      const resNote = await fetch(`${NOTES_COLLECTION_URL}`, {
-        method: 'POST',
-        headers: {'Content-Type': 'application/json', ...authHeaders()},
-        body: JSON.stringify(payloadNote)
-      });
-      
-      if(!resNote.ok) {
-        const errText = await resNote.text().catch(() => '');
-        console.error('Note creation failed:', resNote.status, errText);
-        // Don't throw if Notes collection fails but Job_Info succeeded
-        if(!isManagerNote) {
-          console.warn('Note saved to Job_Info but failed to save to Notes collection');
-        } else {
-          throw new Error('Failed to save note: ' + resNote.status);
-        }
-      } else {
-        const savedNote = await resNote.json();
-        console.log('Note created successfully in Notes collection:', savedNote);
-      }
-      
-      // Clear editor
-      editor.innerHTML = '';
-      alert('Note saved successfully!');
-      
-      // Refresh the display
-      if(currentJob) {
-        await loadAndDisplayNotes(currentJob);
-      }
-    } catch(err) {
-      console.error('Error saving note:', err);
-      alert('Failed to save note: ' + err.message);
-    }
-  }
-  
-  // Load and display notes filtered by type
-  async function loadAndDisplayNotes(job) {
-    if(!job?.id) return;
-    
-    try {
-      // Fetch all notes for this job using job_info_id
-      const filter = `job_info_id="${job.id}"`;
-      const resp = await fetch(`${NOTES_COLLECTION_URL}?filter=${encodeURIComponent(filter)}&sort=-created`, {
-        headers: authHeaders()
-      });
-      
-      if(!resp.ok) {
-        console.error('Failed to fetch notes:', resp.status);
-        return;
-      }
-      
-      const data = await resp.json();
-      const allNotes = data.items || [];
-      
-      // Filter notes by type
-      const jobNotes = allNotes.filter(n => !n.type || n.type === 'job');
-      const managerNotes = allNotes.filter(n => n.type === 'manager');
-      
-      // Update job notes display using ID selector
-      const jobNotesDisplay = document.getElementById('jobNotesDisplay');
-      if(jobNotesDisplay) {
-        if(jobNotes.length > 0) {
-          jobNotesDisplay.innerHTML = jobNotes.map(n => n.Note).join('\n\n');
-        } else {
-          jobNotesDisplay.innerHTML = '<span class="text-gray-400 italic">No notes available</span>';
-        }
-      }
-      
-      // Update manager notes display using ID selector
-      const managerNotesDisplay = document.getElementById('managerNotesDisplay');
-      if(managerNotesDisplay) {
-        if(managerNotes.length > 0) {
-          managerNotesDisplay.innerHTML = managerNotes.map(n => n.Note).join('\n\n');
-        } else {
-          managerNotesDisplay.innerHTML = '<span class="text-gray-400 italic">No manager notes available</span>';
-        }
-      }
-      
-      console.log('Loaded notes - Job:', jobNotes.length, 'Manager:', managerNotes.length);
-    } catch(err) {
-      console.error('Error loading notes:', err);
-    }
-  }
-  
-  // Function to populate file columns in notes section
-  function populateNotesFileColumns(files, containerId) {
-    const container = document.getElementById(containerId);
-    if(!container) {
-      console.log('Container not found:', containerId);
-      return;
-    }
-    
-    console.log('Populating', containerId, 'with', files.length, 'files');
-    container.innerHTML = '';
-    
-    // Categorize files
-    const plans = [];
-    const estimates = [];
-    const otherFiles = [];
-    
-    if(files && files.length > 0) {
-      files.forEach(file => {
-        const name = file.name.toLowerCase();
-        if(name.includes('plan') || name.includes('drawing') || name.includes('dwg')) {
-          plans.push(file);
-        } else if(name.includes('estimate') || name.includes('est')) {
-          estimates.push(file);
-        } else {
-          otherFiles.push(file);
-        }
-      });
-      console.log('Categorized - Plans:', plans.length, 'Estimates:', estimates.length, 'Other:', otherFiles.length);
-    }
-    
-    // Plans column
-    const plansCol = document.createElement('div');
-    plansCol.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Plans</div>`;
-    const plansList = document.createElement('div');
-    plansList.className = 'space-y-1';
-    if(plans.length > 0) {
-      plans.forEach(file => {
-        const fileItem = document.createElement('div');
-        fileItem.className = 'flex items-center gap-1 text-blue-600 hover:text-blue-800 cursor-pointer';
-        fileItem.style.fontSize = '10px';
-        
-        // File icon using getFileIcon
-        const iconWrapper = document.createElement('span');
-        iconWrapper.className = 'flex-shrink-0';
-        iconWrapper.innerHTML = getFileIcon(file.name, file.contentType);
-        fileItem.appendChild(iconWrapper);
-        
-        const fileName = document.createElement('span');
-        fileName.textContent = file.name;
-        fileName.className = 'truncate';
-        fileItem.appendChild(fileName);
-        
-        fileItem.onclick = () => openFilePreview(file.driveId || '', file.id || '', file.name, file.contentType || '', file.url);
-        plansList.appendChild(fileItem);
-      });
-    } else {
-      plansList.innerHTML = `<div class="text-gray-400 italic" style="font-size: 10px;">No plans</div>`;
-    }
-    plansCol.appendChild(plansList);
-    
-    // Estimates column
-    const estimatesCol = document.createElement('div');
-    estimatesCol.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Estimates</div>`;
-    const estimatesList = document.createElement('div');
-    estimatesList.className = 'space-y-1';
-    if(estimates.length > 0) {
-      estimates.forEach(file => {
-        const fileItem = document.createElement('div');
-        fileItem.className = 'flex items-center gap-1 text-blue-600 hover:text-blue-800 cursor-pointer';
-        fileItem.style.fontSize = '10px';
-        
-        // File icon using getFileIcon
-        const iconWrapper = document.createElement('span');
-        iconWrapper.className = 'flex-shrink-0';
-        iconWrapper.innerHTML = getFileIcon(file.name, file.contentType);
-        fileItem.appendChild(iconWrapper);
-        
-        const fileName = document.createElement('span');
-        fileName.textContent = file.name;
-        fileName.className = 'truncate';
-        fileItem.appendChild(fileName);
-        
-        fileItem.onclick = () => openFilePreview(file.driveId || '', file.id || '', file.name, file.contentType || '', file.url);
-        estimatesList.appendChild(fileItem);
-      });
-    } else {
-      estimatesList.innerHTML = `<div class="text-gray-400 italic" style="font-size: 10px;">No estimates</div>`;
-    }
-    estimatesCol.appendChild(estimatesList);
-    
-    // Other Files column
-    const otherCol = document.createElement('div');
-    otherCol.innerHTML = `<div class="font-bold text-gray-700 uppercase tracking-wide mb-1" style="font-size: 8px;">Other Files</div>`;
-    const otherList = document.createElement('div');
-    otherList.className = 'space-y-1';
-    if(otherFiles.length > 0) {
-      otherFiles.forEach(file => {
-        const fileItem = document.createElement('div');
-        fileItem.className = 'flex items-center gap-1 text-blue-600 hover:text-blue-800 cursor-pointer';
-        fileItem.style.fontSize = '10px';
-        
-        // File icon using getFileIcon
-        const iconWrapper = document.createElement('span');
-        iconWrapper.className = 'flex-shrink-0';
-        iconWrapper.innerHTML = getFileIcon(file.name, file.contentType);
-        fileItem.appendChild(iconWrapper);
-        
-        const fileName = document.createElement('span');
-        fileName.textContent = file.name;
-        fileName.className = 'truncate';
-        fileItem.appendChild(fileName);
-        
-        fileItem.onclick = () => openFilePreview(file.driveId || '', file.id || '', file.name, file.contentType || '', file.url);
-        otherList.appendChild(fileItem);
-      });
-    } else {
-      otherList.innerHTML = `<div class="text-gray-400 italic" style="font-size: 10px;">No other files</div>`;
-    }
-    otherCol.appendChild(otherList);
-    
-    container.appendChild(plansCol);
-    container.appendChild(estimatesCol);
-    container.appendChild(otherCol);
-  }
-
-  const closeModal = ()=>{ detailModal.classList.add('hidden'); renderCards(visibleJobs); };
-  document.getElementById('btnClose').addEventListener('click',closeModal);
-  document.getElementById('backBtn').addEventListener('click',closeModal);
-
-  // Tab switching
-  function switchTab(tab){
-    const infoTab = document.getElementById('infoTab');
-    const notesTab = document.getElementById('notesTab');
-    const managerInfoTab = document.getElementById('managerInfoTab');
-    const infoContent = document.getElementById('infoContent');
-    const notesContent = document.getElementById('notesContent');
-    const managerInfoContent = document.getElementById('managerInfoContent');
-    const infoHeading = document.getElementById('infoHeading');
-    const notesHeading = document.getElementById('notesHeading');
-    const managerInfoHeading = document.getElementById('managerInfoHeading');
-    
-    if(tab === 'info'){
-      infoTab.className = 'px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600 -mb-px';
-      notesTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
-      managerInfoTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
-      infoContent.classList.remove('hidden');
-      notesContent.classList.add('hidden');
-      managerInfoContent.classList.add('hidden');
-      if(infoHeading) infoHeading.classList.remove('hidden');
-      if(notesHeading) notesHeading.classList.add('hidden');
-      if(managerInfoHeading) managerInfoHeading.classList.add('hidden');
-    } else if(tab === 'notes') {
-      infoTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
-      notesTab.className = 'px-4 py-2 text-sm font-medium text-orange-600 border-b-2 border-orange-600 -mb-px';
-      managerInfoTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
-      infoContent.classList.add('hidden');
-      notesContent.classList.remove('hidden');
-      managerInfoContent.classList.add('hidden');
-      if(infoHeading) infoHeading.classList.add('hidden');
-      if(notesHeading) notesHeading.classList.remove('hidden');
-      if(managerInfoHeading) managerInfoHeading.classList.add('hidden');
-    } else if(tab === 'managerInfo') {
-      infoTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
-      notesTab.className = 'px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700';
-      managerInfoTab.className = 'px-4 py-2 text-sm font-medium text-green-600 border-b-2 border-green-600 -mb-px';
-      infoContent.classList.add('hidden');
-      notesContent.classList.add('hidden');
-      managerInfoContent.classList.remove('hidden');
-      if(infoHeading) infoHeading.classList.add('hidden');
-      if(notesHeading) notesHeading.classList.add('hidden');
-      if(managerInfoHeading) managerInfoHeading.classList.remove('hidden');
-    }
-  }
-  
-  document.getElementById('infoTab').addEventListener('click',()=>switchTab('info'));
-  document.getElementById('notesTab').addEventListener('click',()=>switchTab('notes'));
-  document.getElementById('managerInfoTab').addEventListener('click',()=>{
-    switchTab('managerInfo');
-    populateManagerInfo(currentJob);
-  });
-
-  // --- Toolbar ---
-  let savedSelection = null;
-  function saveSelection(){ const sel=window.getSelection(); if(sel.rangeCount>0)savedSelection=sel.getRangeAt(0);}
-  function restoreSelection(){ const sel=window.getSelection(); if(savedSelection){ sel.removeAllRanges(); sel.addRange(savedSelection);}}
-  newNote.addEventListener('mouseup',saveSelection); newNote.addEventListener('keyup',saveSelection); newNote.addEventListener('focus',saveSelection);
-  tbButtons.forEach(btn=>{
-    btn.addEventListener('mousedown', e=>{
-      e.preventDefault();
-      restoreSelection();
-      const cmd = btn.dataset.cmd;
-      if(!cmd) return;
-      if(cmd==='foreColor'){ const val=btn.dataset.val; document.execCommand(cmd,false,val); tbButtons.forEach(b=>{if(b.dataset.cmd==='foreColor'&&b!==btn)b.classList.remove('bg-blue-100', 'text-gray-900', 'border-blue-600');}); btn.classList.toggle('bg-blue-100'); btn.classList.toggle('text-gray-900'); btn.classList.toggle('border-blue-600'); }
-      else if(cmd==='removeFormat'){ restoreSelection(); const sel=window.getSelection(); if(sel.rangeCount>0){ const range=sel.getRangeAt(0); let content=range.toString(); range.deleteContents(); range.insertNode(document.createTextNode(content)); range.setStartAfter(range.startContainer); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } tbButtons.forEach(b=>b.classList.remove('bg-blue-100', 'text-gray-900', 'border-blue-600')); }
-      else{ document.execCommand(cmd,false,null); btn.classList.toggle('bg-blue-100'); btn.classList.toggle('text-gray-900'); btn.classList.toggle('border-blue-600'); }
-      newNote.focus(); saveSelection();
-    });
-  });
-
-  // --- Submit Note ---
-  document.getElementById('btnSubmit').addEventListener('click', async()=>{
-    const html=newNote.innerHTML.trim(); if(!html){alert('Enter note text'); return;}
-    const now = new Date();
-    const timestamp = now.toLocaleString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: true });
-    const currentUserName = getDisplayName();
-    const formatted=`[${currentUserName} - ${timestamp}] [Job #${currentJob?.Job_Number||'N/A'}] ${html}\n\n`;
-    const updatedNotes = formatted + (currentJob.Notes||'');
-    try{
-      const payloadNote = {
-        Note: formatted.trim(),
-        Job_Number: currentJob?.Job_Number || '',
-        // Job_Number_Id is a multiple relation field, so send as array
-        Job_Number_Id: currentJob?.id ? [currentJob.id] : []
-      };
-
-      // First: Update job record in prod
-      const resJob = await fetch(`${PB_COLLECTION_URL}/${currentJob.id}`,{
-        method:'PATCH',
-        headers:{'Content-Type':'application/json', ...authHeaders()},
-        body:JSON.stringify({Notes:updatedNotes})
-      });
-
-      if(!resJob.ok) throw new Error('Job_Info update failed: '+resJob.status);
-      const updated=await resJob.json();
-      const jobIdToLink = updated.id || currentJob.id;
-
-      // Second: Create note in notes collection with the confirmed job ID
-      payloadNote.Job_Number_Id = [jobIdToLink];
-      console.log('Submitting note payload:', payloadNote);
-      const resNote = await fetch(`${NOTES_COLLECTION_URL}`,{
-        method:'POST',
-        headers:{'Content-Type':'application/json', ...authHeaders()},
-        body:JSON.stringify(payloadNote)
-      });
-      // If note creation failed, try fallback by appending job info into the note text
-      if(!resNote.ok){
-        const errText = await resNote.text().catch(()=> '');
-        console.warn('Note creation failed with status', resNote.status, ':', errText);
-        console.log('Payload that failed:', JSON.stringify(payloadNote, null, 2));
-        // Retry with fallback if it's a 400 validation error (likely field mismatch)
-        const shouldFallback = resNote.status === 400;
-        if(shouldFallback){
-          const fallbackPayload = {
-            Note: `${formatted.trim()}\n(Relation fallback: Job #${currentJob?.Job_Number||'N/A'} | ID ${currentJob?.id||'unknown'})`,
-            Job_Number: currentJob?.Job_Number || ''
-          };
-          try{
-            const retry = await fetch(`${NOTES_COLLECTION_URL}`,{
-              method:'POST',
-              headers:{'Content-Type':'application/json', ...authHeaders()},
-              body:JSON.stringify(fallbackPayload)
-            });
-            if(!retry.ok){
-              const retryText = await retry.text().catch(()=> '');
-              console.warn('Fallback retry failed:', retry.status, retryText);
-            }else{
-              console.log('Fallback retry succeeded');
-            }
-          }catch(e){ console.warn('Notes create retry error:', e?.message||e); }
-        }else{
-          console.warn('Notes create failed (non-fallback scenario):', resNote.status, errText);
-        }
-      }
-
-      const idx=jobsCache.findIndex(j=>j.id===currentJob.id); if(idx>=0) jobsCache[idx].Notes=updated.Notes; currentJob.Notes=updated.Notes;
-      jobNotes.innerHTML=updated.Notes; newNote.innerHTML='';
-    }catch(err){alert('Error saving note: '+err.message); console.error(err);}
-  });
-  document.getElementById('btnClearNote').addEventListener('click',()=>newNote.innerHTML='');
-
-  // --- Iframe Viewer Controls ---
-  const iframeViewerModal = document.getElementById('iframeViewerModal');
-  const iframeViewer = document.getElementById('iframeViewer');
-  const iframeLoader = document.getElementById('iframeLoader');
-  const iframeTitle = document.getElementById('iframeTitle');
-  const iframeBackBtn = document.getElementById('iframeBackBtn');
-  const iframeCloseBtn = document.getElementById('iframeCloseBtn');
-  const fileListContainer = document.getElementById('fileListContainer');
-
-  const categoryKeywords = {
-    managerInfo: ['manager info', 'manager_info', 'managerinfo'],
-    contracts: ['contract', 'estimate', 'proposal', 'bid', 'award', 'agreement', 'sow'],
-    plans: ['plan', 'drawing', 'dwg', 'pdf', 'sheet', 'layout'],
-    submittals: ['submittal', 'submittals', 'submit'],
-  };
-
-  const DEFAULT_PDF_SCALE = 1.4;
-  const MIN_PDF_SCALE = 0.3;
-  const MAX_PDF_SCALE = 3.0;
-  const fileListState = { items: [], filter: '', jobNumber: '', jobName: '' };
-  let currentPreviewUrl = null;
-  let currentPdf = { doc: null, page: 1, pages: 1, scale: DEFAULT_PDF_SCALE };
-  let pdfPan = { x: 0, y: 0, dragging: false, startX: 0, startY: 0, baseX: 0, baseY: 0 };
-  const pdfViewer = document.getElementById('pdfViewer');
-  const pdfCanvas = document.getElementById('pdfCanvas');
-  const pdfViewport = document.getElementById('pdfViewport');
-  const pdfControls = document.getElementById('pdfControls');
-  const pdfPageNum = document.getElementById('pdfPageNum');
-  const pdfPageCount = document.getElementById('pdfPageCount');
-  const pdfPrev = document.getElementById('pdfPrev');
-  const pdfNext = document.getElementById('pdfNext');
-  const pdfZoomIn = document.getElementById('pdfZoomIn');
-  const pdfZoomOut = document.getElementById('pdfZoomOut');
-  const pdfZoomReset = document.getElementById('pdfZoomReset');
-  const pdfZoomLabel = document.getElementById('pdfZoomLabel');
-  const pdfCloseAll = document.getElementById('pdfCloseAll');
-
-  const categorize = (name = '') => {
-    const n = name.toLowerCase();
-    if (categoryKeywords.managerInfo.some((w) => n.includes(w))) return 'managerInfo';
-    if (categoryKeywords.contracts.some((w) => n.includes(w))) return 'contracts';
-    if (categoryKeywords.submittals.some((w) => n.includes(w))) return 'submittals';
-    if (categoryKeywords.plans.some((w) => n.includes(w))) return 'plans';
-    return 'other';
-  };
-
-  // File cache for client-side only (server handles pre-caching)
-  const fileCache = new Map();
-
-  async function preloadJobFiles(job) {
-    const link = job.Job_Folder_Link;
-    if (!link) return;
-    
-    // Simple client-side cache check
-    if (fileCache.has(link)) return;
-    
-    try {
-      const graphToken = await getGraphToken();
-      const headers = graphToken ? { 'x-graph-token': graphToken } : {};
-
-      const controller = new AbortController();
-      const timeout = setTimeout(() => controller.abort(), 15000);
-      let resp = await fetch(`/api/job-files?link=${encodeURIComponent(link)}`, { headers, signal: controller.signal });
-      clearTimeout(timeout);
-
-
-      if (resp.ok) {
-        const data = await resp.json();
-        const rootDriveId = data.driveId || '';
-        const items = (data.items || []).map(f => ({
-          ...f,
-          driveId: f.driveId || rootDriveId
-        }));
-        fileCache.set(link, { items, driveId: rootDriveId, cachedAt: Date.now() });
-        console.log(`✓ Cached ${items.length} files for job ${job.Job_Number}`);
-      }
-    } catch (err) {
-      // Silently fail for background caching
-      if (err.name !== 'AbortError') {
-        console.debug(`Cache skip for job ${job.Job_Number}:`, err.message);
-      }
-    }
-  }
-
-  const formatSize = (bytes) => {
-    if (!bytes && bytes !== 0) return '';
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
-    return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
-  };
-
-  const getFileIcon = (name, contentType) => {
-    const ext = (name || '').toLowerCase().split('.').pop();
-    const type = (contentType || '').toLowerCase();
-    
-    if (ext === 'pdf' || type.includes('pdf')) 
-      return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none"><rect fill="#D32F2F" width="24" height="24" rx="2"/><text x="12" y="16" font-size="10" font-weight="bold" fill="white" text-anchor="middle">PDF</text></svg>';
-    
-    // Show Word icon with PDF badge to indicate it will be converted
-    if (['doc', 'docx'].includes(ext) || type.includes('word')) 
-      return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none"><rect fill="#2B579A" width="24" height="24" rx="2"/><text x="12" y="16" font-size="10" font-weight="bold" fill="white" text-anchor="middle">W</text></svg>';
-    
-    if (['xls', 'xlsx'].includes(ext) || type.includes('excel') || type.includes('spreadsheet')) 
-      return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none"><rect fill="#217346" width="24" height="24" rx="2"/><text x="12" y="16" font-size="10" font-weight="bold" fill="white" text-anchor="middle">X</text></svg>';
-    
-    if (['ppt', 'pptx'].includes(ext) || type.includes('powerpoint') || type.includes('presentation')) 
-      return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none"><rect fill="#D35230" width="24" height="24" rx="2"/><text x="12" y="16" font-size="10" font-weight="bold" fill="white" text-anchor="middle">P</text></svg>';
-    
-    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'].includes(ext) || type.includes('image')) 
-      return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="2"/><circle cx="8" cy="8" r="2"/><path d="M21 15l-5-5L5 21"/></svg>';
-    
-    if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext) || type.includes('zip') || type.includes('compressed')) 
-      return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5-9h-3v4h3v-4zm0-3h-3v2h3V7z"/></svg>';
-    
-    if (['txt', 'csv', 'log'].includes(ext) || type.includes('text')) 
-      return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/><path d="M16 13H8M16 17H8M10 9H8"/></svg>';
-    
-    return '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/></svg>';
-  };
-
-  const canPreviewInline = (name, contentType) => {
-    const ext = (name || '').toLowerCase().split('.').pop();
-    const type = (contentType || '').toLowerCase();
-    // Allow Word docs to be previewed (will be converted to PDF)
-    return ext === 'pdf' || type.includes('pdf') || 
-           ['doc', 'docx'].includes(ext) || type.includes('word') ||
-           ['jpg', 'jpeg', 'png', 'gif', 'svg', 'bmp'].includes(ext) || type.includes('image');
-  };
-
-  function openFileInViewer(url, name) {
-    const jobPrefix = fileListState.jobNumber ? `Job# ${fileListState.jobNumber}${fileListState.jobName ? ' - ' + fileListState.jobName : ''} - ` : '';
-    iframeViewerModal.classList.remove('hidden');
-    iframeTitle.textContent = `${jobPrefix}${name || 'File Preview'}`;
-    fileListContainer.classList.add('hidden');
-    pdfViewer.classList.add('hidden');
-    iframeViewer.classList.remove('hidden');
-    iframeLoader.classList.remove('hidden');
-    iframeLoader.innerHTML = `
-      <div class="text-center">
-        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
-        <div class="text-gray-600 text-lg">Loading preview...</div>
-      </div>
-    `;
-    iframeViewer.src = 'about:blank';
-    setTimeout(() => {
-      iframeViewer.src = url;
-    }, 50);
-  }
-  window.openFileInViewer = openFileInViewer;
-
-  async function renderPdfPage() {
-    const { doc, page, scale, isImage } = currentPdf;
-    if (isImage) {
-      renderImageOnCanvas();
-      return;
-    }
-    if (!doc) return;
-    const pageObj = await doc.getPage(page);
-    const viewport = pageObj.getViewport({ scale });
-    const canvas = pdfCanvas;
-    const context = canvas.getContext('2d');
-    canvas.height = viewport.height;
-    canvas.width = viewport.width;
-    const renderContext = { canvasContext: context, viewport };
-    await pageObj.render(renderContext).promise;
-    pdfPageNum.textContent = page.toString();
-    pdfPageCount.textContent = doc.numPages.toString();
-    // re-apply pan transform after render
-    pdfCanvas.style.transform = `translate(${pdfPan.x}px, ${pdfPan.y}px)`;
-    pdfZoomLabel.textContent = `${Math.round(currentPdf.scale * 100)}%`;
-    pdfZoomReset.textContent = `${Math.round(currentPdf.scale * 100)}%`;
-  }
-
-  function renderImageOnCanvas() {
-    const { scale, imageElement, imageWidth, imageHeight } = currentPdf;
-    if (!imageElement) return;
-    const canvas = pdfCanvas;
-    const context = canvas.getContext('2d');
-    const scaledWidth = imageWidth * scale;
-    const scaledHeight = imageHeight * scale;
-    canvas.width = scaledWidth;
-    canvas.height = scaledHeight;
-    context.clearRect(0, 0, canvas.width, canvas.height);
-    context.drawImage(imageElement, 0, 0, scaledWidth, scaledHeight);
-    // re-apply pan transform after render
-    pdfCanvas.style.transform = `translate(${pdfPan.x}px, ${pdfPan.y}px)`;
-    pdfZoomLabel.textContent = `${Math.round(scale * 100)}%`;
-    pdfZoomReset.textContent = `${Math.round(scale * 100)}%`;
-  }
-
-  function showPdfViewer() {
-    iframeViewer.classList.add('hidden');
-    pdfViewer.classList.remove('hidden');
-    iframeLoader.classList.add('hidden');
-    // Ensure PDF controls are visible (might be hidden for images)
-    pdfControls.style.display = '';
-    // Show page navigation for PDFs
-    pdfPrev.parentElement.style.display = '';
-    pdfNext.parentElement.style.display = '';
-    pdfPageNum.parentElement.style.display = '';
-  }
-
-  pdfPrev.addEventListener('click', async () => {
-    if (!currentPdf.doc) return;
-    if (currentPdf.page <= 1) return;
-    currentPdf.page -= 1;
-    await renderPdfPage();
-  });
-  pdfNext.addEventListener('click', async () => {
-    if (!currentPdf.doc) return;
-    if (currentPdf.page >= currentPdf.pages) return;
-    currentPdf.page += 1;
-    await renderPdfPage();
-  });
-  pdfZoomIn.addEventListener('click', async () => {
-    if (!currentPdf.doc && !currentPdf.isImage) return;
-    currentPdf.scale = Math.min(currentPdf.scale + 0.1, MAX_PDF_SCALE);
-    await renderPdfPage();
-  });
-  pdfZoomOut.addEventListener('click', async () => {
-    if (!currentPdf.doc && !currentPdf.isImage) return;
-    currentPdf.scale = Math.max(currentPdf.scale - 0.1, MIN_PDF_SCALE);
-    await renderPdfPage();
-  });
-  pdfZoomReset.addEventListener('click', async () => {
-    if (!currentPdf.doc && !currentPdf.isImage) return;
-    currentPdf.scale = currentPdf.isImage ? 1 : DEFAULT_PDF_SCALE;
-    pdfPan = { x: 0, y: 0, dragging: false, startX: 0, startY: 0, baseX: 0, baseY: 0 };
-    pdfCanvas.style.transform = 'translate(0px, 0px)';
-    await renderPdfPage();
-  });
-
-  // Drag-to-pan on PDF canvas + pinch-to-zoom
-  pdfCanvas.style.touchAction = 'none';
-  const applyPan = () => {
-    pdfCanvas.style.transform = `translate(${pdfPan.x}px, ${pdfPan.y}px)`;
-  };
-  const activePointers = new Map();
-  let pinchStartDistance = null;
-  let pinchStartScale = null;
-  const distanceBetween = () => {
-    if (activePointers.size < 2) return null;
-    const pts = Array.from(activePointers.values());
-    const a = pts[0];
-    const b = pts[1];
-    const dx = a.x - b.x;
-    const dy = a.y - b.y;
-    return Math.hypot(dx, dy);
-  };
-
-  pdfCanvas.addEventListener('wheel', async (e) => {
-    if (!currentPdf.doc && !currentPdf.isImage) return;
-    e.preventDefault();
-    const delta = e.deltaY;
-    const step = 0.1;
-    if (delta < 0) {
-      currentPdf.scale = Math.min(currentPdf.scale + step, MAX_PDF_SCALE);
-    } else {
-      currentPdf.scale = Math.max(currentPdf.scale - step, MIN_PDF_SCALE);
-    }
-    await renderPdfPage();
-  }, { passive: false });
-
-  // Toolbar close (X) goes back to file list
-  pdfCloseAll.addEventListener('click', () => {
-    pdfViewer.classList.add('hidden');
-    iframeLoader.classList.add('hidden');
-    iframeViewer.classList.add('hidden');
-    fileListContainer.classList.remove('hidden');
-  });
-  pdfCanvas.addEventListener('pointerdown', (e) => {
-    if (!currentPdf.doc && !currentPdf.isImage) return;
-    activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
-
-    if (activePointers.size === 2) {
-      pinchStartDistance = distanceBetween();
-      pinchStartScale = currentPdf.scale;
-      pdfPan.dragging = false;
-    } else if (activePointers.size === 1) {
-      pdfPan.dragging = true;
-      pdfPan.startX = e.clientX;
-      pdfPan.startY = e.clientY;
-      pdfPan.baseX = pdfPan.x;
-      pdfPan.baseY = pdfPan.y;
-      pdfCanvas.style.cursor = 'grabbing';
-    }
-
-    pdfCanvas.setPointerCapture(e.pointerId);
-  });
-
-  pdfCanvas.addEventListener('pointermove', (e) => {
-    if (!currentPdf.doc && !currentPdf.isImage) return;
-
-    if (activePointers.has(e.pointerId)) {
-      activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
-    }
-
-    if (activePointers.size >= 2 && pinchStartDistance) {
-      const dist = distanceBetween();
-      if (dist) {
-        const scale = pinchStartScale * (dist / pinchStartDistance);
-        currentPdf.scale = Math.min(Math.max(scale, MIN_PDF_SCALE), MAX_PDF_SCALE);
-        renderPdfPage();
-      }
-      return;
-    }
-
-    if (!pdfPan.dragging) return;
-    const dx = e.clientX - pdfPan.startX;
-    const dy = e.clientY - pdfPan.startY;
-    pdfPan.x = pdfPan.baseX + dx;
-    pdfPan.y = pdfPan.baseY + dy;
-    applyPan();
-  });
-
-  const endPan = (e) => {
-    if (activePointers.has(e.pointerId)) {
-      activePointers.delete(e.pointerId);
-    }
-
-    if (activePointers.size < 2) {
-      pinchStartDistance = null;
-      pinchStartScale = null;
-    }
-
-    if (activePointers.size === 0) {
-      pdfPan.dragging = false;
-      pdfCanvas.style.cursor = 'grab';
-    }
-
-    if (e && e.pointerId) {
-      try { pdfCanvas.releasePointerCapture(e.pointerId); } catch {}
-    }
-  };
-  pdfCanvas.addEventListener('pointerup', endPan);
-  pdfCanvas.addEventListener('pointercancel', endPan);
-
-  async function openFilePreview(driveId, itemId, name, contentType, fallbackUrl) {
-    // If no drive/item info, just open the URL directly
-    if (!driveId || !itemId) {
-      openFileInViewer(fallbackUrl, name);
-      return;
-    }
-
-    const graphToken = await getGraphToken();
-    if (!graphToken) {
-      console.warn('Graph token missing; using fallback URL');
-      openFileInViewer(fallbackUrl, name);
-      return;
-    }
-
-    iframeViewerModal.classList.remove('hidden');
-    const jobPrefix = fileListState.jobNumber ? `Job# ${fileListState.jobNumber}${fileListState.jobName ? ' - ' + fileListState.jobName : ''} - ` : '';
-    iframeTitle.textContent = `${jobPrefix}${name || 'File Preview'}`;
-    fileListContainer.classList.add('hidden');
-    iframeViewer.classList.add('hidden');
-    pdfViewer.classList.add('hidden');
-    iframeLoader.classList.remove('hidden');
-
-    // Detect if this is a Word document
-    const ext = (name || '').toLowerCase().split('.').pop();
-    const isWordDoc = ['doc', 'docx'].includes(ext) || (contentType || '').toLowerCase().includes('word');
-
-    iframeLoader.innerHTML = `
-      <div class="text-center">
-        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
-        <div class="text-gray-600 text-lg">${isWordDoc ? 'Converting to PDF...' : 'Loading preview...'}</div>
-      </div>
-    `;
-
-    // Clear prior blob URL if any
-    if (currentPreviewUrl) {
-      URL.revokeObjectURL(currentPreviewUrl);
-      currentPreviewUrl = null;
-    }
-
-    try {
-      // Use PDF conversion endpoint for Word documents
-      const endpoint = isWordDoc 
-        ? `/api/job-file-pdf?driveId=${encodeURIComponent(driveId)}&itemId=${encodeURIComponent(itemId)}`
-        : `/api/job-file-content?driveId=${encodeURIComponent(driveId)}&itemId=${encodeURIComponent(itemId)}`;
-      
-      const res = await fetch(endpoint, {
-        headers: { 'x-graph-token': graphToken }
-      });
-      if (!res.ok) throw new Error(`Preview fetch failed: ${res.status}`);
-      const blob = await res.blob();
-      currentPreviewUrl = URL.createObjectURL(blob);
-
-      // Word docs are converted to PDF, so treat them as PDFs
-      const isPdf = isWordDoc || (contentType || '').toLowerCase().includes('pdf') || (name || '').toLowerCase().endsWith('.pdf');
-      const isImage = (contentType || '').toLowerCase().includes('image') || 
-                      /\.(jpg|jpeg|png|gif|bmp|tiff|webp)$/i.test(name || '');
-      
-      if (isPdf && window['pdfjsLib']) {
-        const data = await blob.arrayBuffer();
-        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
-        const doc = await pdfjsLib.getDocument({ data }).promise;
-        const targetScale = DEFAULT_PDF_SCALE;
-        // Start at 100% to ensure proper positioning
-        currentPdf = { doc, page: 1, pages: doc.numPages, scale: 1.0 };
-        pdfPan = { x: 0, y: 0, dragging: false, startX: 0, startY: 0, baseX: 0, baseY: 0 };
-        pdfCanvas.style.transform = 'translate(0px, 0px)';
-        showPdfViewer();
-        await renderPdfPage();
-        // Set scroll with small offset (48px right, 36px down)
-        if (pdfViewport) {
-          pdfViewport.scrollLeft = 48;
-          pdfViewport.scrollTop = 36;
-        }
-        // Now scale to target zoom if different
-        if (targetScale !== 1.0) {
-          currentPdf.scale = targetScale;
-          await renderPdfPage();
-        }
-      } else if (isImage) {
-        // Show images in the PDF viewer area for consistency
-        pdfViewer.classList.remove('hidden');
-        iframeViewer.classList.add('hidden');
-        iframeLoader.classList.add('hidden');
-        
-        // Store original image for re-rendering at different scales
-        const img = new Image();
-        img.onload = () => {
-          currentPdf = { 
-            doc: null, 
-            page: 1, 
-            pages: 1, 
-            scale: 1,
-            isImage: true,
-            imageElement: img,
-            imageWidth: img.width,
-            imageHeight: img.height
-          };
-          pdfPan = { x: 0, y: 0, dragging: false, startX: 0, startY: 0, baseX: 0, baseY: 0 };
-          pdfCanvas.style.transform = 'translate(0px, 0px)';
-          renderImageOnCanvas();
-          
-          // Show PDF controls (zoom works for images too)
-          pdfControls.style.display = '';
-          // Hide page navigation for images
-          pdfPrev.parentElement.style.display = 'none';
-          pdfNext.parentElement.style.display = 'none';
-          pdfPageNum.parentElement.style.display = 'none';
-        };
-        img.src = currentPreviewUrl;
-      } else {
-        // fallback to iframe blob view
-        iframeViewer.src = 'about:blank';
-        setTimeout(() => {
-          iframeViewer.src = currentPreviewUrl;
-          iframeViewer.classList.remove('hidden');
-          iframeLoader.classList.add('hidden');
-        }, 10);
-      }
-    } catch (err) {
-      console.error('Preview load error', err);
-      // Fallback to direct open
-      openFileInViewer(fallbackUrl, name);
-    }
-  }
-  window.openFilePreview = openFilePreview;
-
-  function renderFileGroups(folderLink) {
-    const term = (fileListState.filter || '').toLowerCase().trim();
-    const filtered = fileListState.items
-      .filter((f) => {
-        // Show PDF files, Word documents (which will be converted to PDF), and images
-        if (f.isFolder) return false;
-        const name = f.name.toLowerCase();
-        const contentType = (f.contentType || '').toLowerCase();
-        const isPdfOrWord = name.endsWith('.pdf') || contentType.includes('pdf') ||
-                           name.endsWith('.doc') || name.endsWith('.docx') || contentType.includes('word');
-        const isImage = name.endsWith('.jpg') || name.endsWith('.jpeg') || name.endsWith('.png') || 
-                       name.endsWith('.gif') || name.endsWith('.bmp') || name.endsWith('.tiff') || 
-                       name.endsWith('.webp') || contentType.includes('image');
-        if (!isPdfOrWord && !isImage) return false;
-        // Apply search term filter if present
-        return name.includes(term);
-      });
-    const groups = { managerInfo: [], contracts: [], submittals: [], plans: [], other: [] };
-    filtered.forEach((f) => groups[categorize(f.name)].push(f));
-
-    const renderGroup = (title, list) => {
-      if (!list.length) return '';
-      const rows = list
-        .map(
-          (f) => {
-            const icon = getFileIcon(f.name, f.contentType);
-            const canPreview = canPreviewInline(f.name, f.contentType);
-            const openBtn = canPreview
-              ? `<button class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm" onclick="openFilePreview('${f.driveId||''}', '${f.id||''}', '${f.name.replace(/'/g, "\\'")}', '${f.contentType||''}', '${f.url}')">Preview</button>`
-              : `<a class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm" href="${f.url}" target="_blank" rel="noopener">Open</a>`;
-            return `
-          <div class="flex items-center justify-between py-2 border-b border-gray-100">
-            <div class="flex items-center min-w-0 gap-2">
-              <span class="text-gray-600 flex-shrink-0">${icon}</span>
-              <div class="min-w-0">
-                <div class="font-medium text-gray-800 truncate" title="${f.name}">${f.name}</div>
-                <div class="text-xs text-gray-500">
-                  ${formatSize(f.size) || '—'} · ${f.modified ? new Date(f.modified).toLocaleDateString() : ''}
-                </div>
-              </div>
-            </div>
-            <div class="flex items-center gap-2 flex-shrink-0">
-              ${openBtn}
-            </div>
-          </div>
-        `;
-          }
-        )
-        .join('');
-      return `
-        <div class="mb-5">
-          <div class="text-sm font-semibold text-gray-700 mb-2">${title} (${list.length})</div>
-          <div class="divide-y divide-gray-100 border border-gray-100 rounded-lg bg-white shadow-sm">${rows}</div>
-        </div>`;
-    };
-    const groupsMarkup = `
-      ${renderGroup('Manager Info', groups.managerInfo)}
-      ${renderGroup('Contracts / Estimates', groups.contracts)}
-      ${renderGroup('Submittals', groups.submittals)}
-      ${renderGroup('Plans', groups.plans)}
-      ${renderGroup('Other', groups.other)}
-      ${!filtered.length ? '<div class="text-gray-500 text-sm">No files found.</div>' : ''}
-    `;
-
-    let groupsHost = fileListContainer.querySelector('.file-groups');
-    if (!groupsHost) {
-      fileListContainer.innerHTML = `
-        <div class="flex items-center gap-2 mb-3 file-search-row px-4 pt-4 flex-shrink-0">
-          <input id="fileSearchInput" type="search" placeholder="Search files" value="${fileListState.filter}" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg" />
-          <a data-folder-link href="${folderLink}" target="_blank" rel="noopener" class="px-3 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-sm text-gray-800">Open folder</a>
-        </div>
-        <div class="file-groups flex-1 overflow-auto px-4 pb-4"></div>
-      `;
-      groupsHost = fileListContainer.querySelector('.file-groups');
-      const searchInput = document.getElementById('fileSearchInput');
-      if (searchInput) {
-        searchInput.addEventListener('input', (e) => {
-          fileListState.filter = e.target.value || '';
-          renderFileGroups(folderLink);
-        });
-      }
-    } else {
-      const searchInput = document.getElementById('fileSearchInput');
-      if (searchInput && searchInput.value !== fileListState.filter) {
-        const wasFocused = document.activeElement === searchInput;
-        const caret = searchInput.selectionStart || 0;
-        searchInput.value = fileListState.filter;
-        if (wasFocused) searchInput.setSelectionRange(caret, caret);
-      }
-      const folderAnchor = fileListContainer.querySelector('[data-folder-link]');
-      if (folderAnchor) folderAnchor.href = folderLink;
-    }
-
-    if (groupsHost) groupsHost.innerHTML = groupsMarkup;
-  }
-
-  async function openJobFiles(job) {
-    const link = job.Job_Folder_Link;
-    if (!link) {
-      alert('No folder link available for this job.');
-      return;
-    }
-
-    fileListState.filter = '';
-    fileListState.jobNumber = job.Job_Number || '';
-    fileListState.jobName = job.Job_Full_Name || '';
-
-    // Show modal in list mode
-    iframeViewerModal.classList.remove('hidden');
-    iframeTitle.textContent = job.Job_Number ? `Job# ${job.Job_Number}${job.Job_Full_Name ? ' - ' + job.Job_Full_Name : ''}` : 'Job Files';
-    fileListContainer.classList.remove('hidden');
-    iframeViewer.classList.add('hidden');
-
-    // Check if we have cached files
-    const cached = fileCache.get(link);
-    if (cached) {
-      console.log('Using cached files for job', job.Job_Number);
-      fileListState.items = cached.items;
-      iframeLoader.classList.add('hidden');
-      renderFileGroups(link);
-      return;
-    }
-
-    // If not cached, show loading and fetch
-    iframeLoader.classList.remove('hidden');
-    iframeLoader.innerHTML = `
-      <div class="text-center">
-        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
-        <div class="text-gray-600 text-lg">Loading files...</div>
-      </div>
-    `;
-
-    const graphToken = await getGraphToken();
-    const headers = graphToken ? { 'x-graph-token': graphToken } : {};
-
-    try {
-      const controller = new AbortController();
-      const timeout = setTimeout(() => controller.abort(), 30000); // 30 seconds for large folders
-      let resp = await fetch(`/api/job-files?link=${encodeURIComponent(link)}`, { headers, signal: controller.signal });
-      clearTimeout(timeout);
-
-
-      if (resp.status === 401) throw new Error('AUTH_EXPIRED');
-      if (resp.status === 500) throw new Error('GRAPH_TOKEN missing or expired');
-      if (!resp.ok) throw new Error(`File list failed: ${resp.status}`);
-      const data = await resp.json();
-      const rootDriveId = data.driveId || '';
-      const items = (data.items || []).map(f => ({
-        ...f,
-        driveId: f.driveId || rootDriveId
-      }));
-      
-      // Cache the results
-      fileCache.set(link, { items, driveId: rootDriveId });
-      fileListState.items = items;
-      
-      console.log(`✓ Loaded ${items.length} files for job ${job.Job_Number}`);
-      iframeLoader.classList.add('hidden');
-      renderFileGroups(link);
-    } catch (err) {
-      console.error('❌ job-files error for', job.Job_Number, err);
-      const authExpired = err?.message === 'AUTH_EXPIRED' || String(err || '').includes('401');
-      const timedOut = err?.name === 'AbortError';
-      const friendly = authExpired
-        ? 'Your Microsoft Graph session expired. Click Re-authenticate to sign in again.'
-        : timedOut
-          ? 'Request timed out. If this keeps happening, re-authenticate and retry.'
-          : (err?.message || 'Unknown error');
-      iframeLoader.classList.remove('hidden');
-      iframeLoader.innerHTML = `
-        <div class="text-center max-w-md mx-auto px-4 space-y-3">
-          <div class="text-red-600 text-lg font-semibold">Unable to load files</div>
-          <div class="text-gray-600 text-sm">${friendly}</div>
-          <div class="flex items-center justify-center gap-2 flex-wrap">
-            <a href="${link}" target="_blank" rel="noopener" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 inline-block">Open folder instead</a>
-            <button id="reauthBtn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-sm text-gray-800">Re-authenticate</button>
-          </div>
-        </div>
-      `;
-      const reauthBtn = document.getElementById('reauthBtn');
-      if (reauthBtn) {
-        reauthBtn.addEventListener('click', () => {
-          try { pb?.authStore?.clear?.(); } catch {}
-          try { localStorage.removeItem(GRAPH_TOKEN_KEY); } catch {}
-          try { localStorage.removeItem('pocketbase_auth'); } catch {}
-          try { sessionStorage.clear(); } catch {}
-          window.location.href = 'signin.html';
-        });
-      }
-    }
-  }
-
-  function openIframeViewer(url, title) {
-    // Detect SharePoint URLs and skip iframe attempt
-    const isSharePoint = url.includes('sharepoint.com') || url.includes('.sharepoint.');
-    
-    // If it's SharePoint, skip iframe entirely and open in new tab
-    if (isSharePoint) {
-      window.open(url, '_blank');
-      return;
-    }
-
-    iframeTitle.textContent = title;
-    iframeLoader.classList.remove('hidden');
-    iframeLoader.innerHTML = `
-      <div class="text-center">
-        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
-        <div class="text-gray-600 text-lg">Loading content...</div>
-      </div>
-    `;
-    iframeViewer.src = '';
-    iframeViewerModal.classList.remove('hidden');
-
-    // Small delay to ensure modal is visible before loading
-    setTimeout(() => {
-      iframeViewer.src = url;
-    }, 50);
-  }
-
-  function closeIframeViewer() {
-    iframeViewerModal.classList.add('hidden');
-    fileListContainer.classList.add('hidden');
-    iframeViewer.classList.remove('hidden');
-    iframeLoader.classList.add('hidden');
-    pdfViewer.classList.add('hidden');
-    currentPdf = { doc: null, page: 1, pages: 1, scale: DEFAULT_PDF_SCALE };
-    if (currentPreviewUrl) {
-      URL.revokeObjectURL(currentPreviewUrl);
-      currentPreviewUrl = null;
-    }
-    // Clear file cache when closing to ensure fresh data on next open
-    fileCache.clear();
-    // Clear iframe src to stop any loading/video/audio and prevent stacking
-    setTimeout(() => {
-      iframeViewer.src = 'about:blank';
-    }, 300);
-  }
-
-  // Hide loader when iframe loads
-  iframeViewer.addEventListener('load', () => {
-    // Check if iframe actually loaded content or is blocked
-    try {
-      const iframeDoc = iframeViewer.contentDocument || iframeViewer.contentWindow.document;
-      const currentSrc = iframeViewer.src;
-      
-      // If iframe loaded but is empty or blocked, show fallback
-      if (currentSrc && currentSrc !== 'about:blank') {
-        iframeLoader.classList.add('hidden');
-        
-        // Try to get title from iframe (will only work for same-origin)
-        if (iframeDoc && iframeDoc.title) {
-          iframeTitle.textContent = iframeDoc.title;
-        }
-      }
-    } catch(e) {
-      // Cross-origin or blocked - if we have a src, it might still work
-      if (iframeViewer.src && iframeViewer.src !== 'about:blank') {
-        iframeLoader.classList.add('hidden');
-      }
-    }
-  });
-
-  // Show loader if iframe errors
-  iframeViewer.addEventListener('error', () => {
-    const target = iframeViewer.src;
-    closeIframeViewer();
-    if (target && target !== 'about:blank') window.open(target, '_blank');
-  });
-  
-  // Listen for CSP violations (fallback to new tab)
-  document.addEventListener('securitypolicyviolation', (e) => {
-    if (e.violatedDirective.includes('frame-ancestors') && !iframeViewerModal.classList.contains('hidden')) {
-      const target = iframeViewer.src;
-      closeIframeViewer();
-      if (target && target !== 'about:blank') window.open(target, '_blank');
-    }
-  });
-
-  iframeBackBtn.addEventListener('click', closeIframeViewer);
-  iframeCloseBtn.addEventListener('click', () => { closeIframeViewer(); if (typeof closeModal === 'function') closeModal(); });
-
-  // Close on Escape key
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && !iframeViewerModal.classList.contains('hidden')) {
-      closeIframeViewer();
-    }
-  });
-
-  // --- Init ---
-  const prefs = await loadUserPreferences();
-  console.log('Init: loaded prefs=', prefs);
-  applyPrefsToFilters(prefs);
-  
-  console.log('Init: about to fetch jobs');
-  fetchAllJobs();
-})();
-</script>
-</body>
-</html>
diff --git a/frontend/public/output.css b/frontend/public/output.css
deleted file mode 100644
index 971f4ad..0000000
--- a/frontend/public/output.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* Generated Tailwind CSS - Basic version */
-/* This will be updated by tailwind CLI on dev */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/frontend/public/signin.html b/frontend/public/signin.html
deleted file mode 100644
index 737ede9..0000000
--- a/frontend/public/signin.html
+++ /dev/null
@@ -1,176 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Sign In - Job Info</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://cdn.jsdelivr.net/npm/pocketbase@0.26.5/dist/pocketbase.umd.js"></script>
-</head>
-<body class="font-sans bg-gradient-to-br from-indigo-500 to-purple-600 min-h-screen flex items-center justify-center">
-  <div class="bg-white p-12 rounded-2xl shadow-2xl text-center max-w-md w-[90%]">
-    <h1 class="text-gray-800 mb-2 text-3xl font-bold">Job Info</h1>
-    <p class="text-gray-600 mb-8">Sign in with your Microsoft account</p>
-    
-    <button id="loginBtn" onclick="login()" 
-      class="bg-purple-600 text-white border-none py-3.5 px-8 text-base rounded-lg cursor-pointer transition-all duration-200 font-medium hover:bg-purple-700 hover:shadow-lg disabled:bg-gray-400 disabled:cursor-not-allowed w-full">
-      Sign in with Microsoft
-    </button>
-    
-    <div class="text-red-600 mt-4 hidden text-sm" id="error"></div>
-    
-    <div class="hidden mt-8 text-left bg-gray-50 p-6 rounded-lg" id="userInfo">
-      <h2 class="text-lg mb-4 text-gray-800 font-semibold">✓ Signed In</h2>
-      <p class="mb-3 text-gray-600"><strong class="text-gray-800">Name:</strong> <span id="displayName"></span></p>
-      <p class="mb-3 text-gray-600"><strong class="text-gray-800">Email:</strong> <span id="email"></span></p>
-      
-      <button onclick="goToApp()" 
-        class="mt-4 bg-purple-600 text-white border-none py-3 px-6 text-base rounded-lg cursor-pointer transition-all duration-200 font-medium hover:bg-purple-700 hover:shadow-lg w-full">
-        Continue to App →
-      </button>
-      
-      <button onclick="logout()" 
-        class="mt-3 bg-gray-200 text-gray-700 border-none py-2.5 px-6 text-sm rounded-lg cursor-pointer transition-all duration-200 hover:bg-gray-300 w-full">
-        Sign out
-      </button>
-    </div>
-  </div>
-
-  <script>
-    const pb = new PocketBase('https://pocketbase.ccllc.pro');
-    
-    const loginBtn = document.getElementById('loginBtn');
-    const errorEl = document.getElementById('error');
-    const userInfo = document.getElementById('userInfo');
-
-    function goToApp() {
-      window.location.href = 'index.html';
-    }
-
-    function showError(msg) {
-      errorEl.textContent = msg;
-      errorEl.classList.remove('hidden');
-    }
-
-    function hideError() {
-      errorEl.classList.add('hidden');
-    }
-
-    // Extract Graph token from OAuth response
-    function extractGraphToken(authData) {
-      return authData?.meta?.accessToken || 
-             authData?.meta?.access_token ||
-             authData?.meta?.graphAccessToken ||
-             authData?.meta?.token ||
-             '';
-    }
-
-    // Store tokens in backend Redis cache
-    async function storeTokensInBackend(authData, graphToken) {
-      const userId = pb.authStore.model?.id;
-      if (!userId) return false;
-
-      try {
-        const response = await fetch('/api/auth/login-callback', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${pb.authStore.token}`
-          },
-          body: JSON.stringify({
-            pbToken: pb.authStore.token,
-            graphToken: graphToken,
-            refreshTokenPb: '',
-            refreshTokenGraph: authData?.meta?.refreshToken || '',
-            user: {
-              id: userId,
-              email: pb.authStore.model?.email || '',
-              name: pb.authStore.model?.name || pb.authStore.model?.display_name || ''
-            }
-          })
-        });
-
-        if (response.ok) {
-          console.log('[Auth] Tokens stored in backend');
-          return true;
-        } else {
-          console.warn('[Auth] Backend storage failed:', response.status);
-          return false;
-        }
-      } catch (err) {
-        console.warn('[Auth] Backend error:', err);
-        return false;
-      }
-    }
-
-    function showAuthedUI() {
-      const model = pb.authStore.model;
-      loginBtn.classList.add('hidden');
-      userInfo.classList.remove('hidden');
-      document.getElementById('displayName').textContent = model?.name || model?.display_name || 'User';
-      document.getElementById('email').textContent = model?.email || '';
-    }
-
-    async function login() {
-      loginBtn.disabled = true;
-      loginBtn.textContent = 'Signing in...';
-      hideError();
-
-      try {
-        const authData = await pb.collection('users').authWithOAuth2({ provider: 'microsoft' });
-        const graphToken = extractGraphToken(authData);
-        
-        // Store in backend cache for persistence
-        // Store in localStorage for index.html to find
-        if (graphToken) localStorage.setItem('graphAccessToken', graphToken);
-        await storeTokensInBackend(authData, graphToken);
-        
-        showAuthedUI();
-      } catch (error) {
-        console.error('Login failed:', error);
-        showError(error.message || 'Authentication failed');
-        loginBtn.disabled = false;
-        loginBtn.textContent = 'Sign in with Microsoft';
-      }
-    }
-
-    async function logout() {
-      try {
-        await fetch('/api/auth/logout', {
-          method: 'POST',
-          headers: { 'Authorization': `Bearer ${pb.authStore.token}` }
-        });
-      } catch (err) {
-        console.warn('[Auth] Logout error:', err);
-      }
-      
-      pb.authStore.clear();
-      loginBtn.classList.remove('hidden');
-      loginBtn.disabled = false;
-      loginBtn.textContent = 'Sign in with Microsoft';
-      userInfo.classList.add('hidden');
-    }
-
-    // Check existing session on load
-    async function checkSession() {
-      if (!pb.authStore.isValid) return;
-
-      try {
-        await pb.collection('users').authRefresh();
-        showAuthedUI();
-        
-        // Check if coming from reauth flow
-        const params = new URLSearchParams(window.location.search);
-        if (params.get('reauth') === '1') {
-          goToApp();
-        }
-      } catch (err) {
-        console.warn('[Auth] Session expired');
-        pb.authStore.clear();
-      }
-    }
-
-    checkSession();
-  </script>
-</body>
-</html>
diff --git a/frontend/signin.html b/frontend/signin.html
deleted file mode 100644
index a0c3792..0000000
--- a/frontend/signin.html
+++ /dev/null
@@ -1,131 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Sign In</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://cdn.jsdelivr.net/npm/pocketbase@0.26.5/dist/pocketbase.umd.js"></script>
-  <script src="auth.js"></script>
-</head>
-<body class="font-sans bg-gradient-to-br from-indigo-500 to-purple-600 min-h-screen flex items-center justify-center">
-  <div class="bg-white p-12 rounded-2xl shadow-2xl text-center max-w-md w-[90%]">
-    <h1 class="text-gray-800 mb-2 text-3xl">Welcome</h1>
-    <p class="text-gray-600 mb-8">Sign in with your Microsoft account</p>
-    
-    <button id="loginBtn" onclick="login()" class="bg-blue-600 text-white border-none py-3.5 px-8 text-base rounded-md cursor-pointer transition-colors duration-200 font-medium hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed">Sign in with Microsoft</button>
-    
-    <div class="text-red-600 mt-4 hidden" id="error"></div>
-    
-    <div class="hidden mt-8 text-left bg-gray-50 p-6 rounded-lg" id="userInfo">
-      <h2 class="text-lg mb-4 text-gray-800">Signed in</h2>
-      <p class="mb-3 text-gray-600 break-all"><strong class="text-gray-800">Name:</strong> <span id="displayName"></span></p>
-      <p class="mb-3 text-gray-600 break-all"><strong class="text-gray-800">Email:</strong> <span id="email"></span></p>
-      
-      <button id="continueBtn" onclick="goToIndex()" class="hidden mt-4 bg-blue-600 text-white border-none py-3.5 px-8 text-base rounded-md cursor-pointer transition-colors duration-200 font-medium hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed w-full">Continue to Job Info</button>
-      <button onclick="logout()" class="bg-gray-600 text-white border-none py-3.5 px-8 text-base rounded-md cursor-pointer transition-colors duration-200 font-medium hover:bg-gray-700 mt-4">Sign out</button>
-    </div>
-  </div>
-
-  <script>
-    const { pb, getDisplayName } = window.Auth;
-
-    const GRAPH_TOKEN_KEY = 'graphAccessToken';
-    const extractGraphToken = (authData) => {
-      return (
-        authData?.meta?.graphAccessToken ||
-        authData?.meta?.graph_token ||
-        authData?.meta?.graphToken ||
-        authData?.meta?.accessToken ||
-        authData?.meta?.access_token ||
-        authData?.meta?.token ||
-        authData?.meta?.rawToken ||
-        authData?.meta?.authData?.access_token ||
-        ''
-      );
-    };
-
-    const loginBtn = document.getElementById('loginBtn');
-    const errorEl = document.getElementById('error');
-    const userInfo = document.getElementById('userInfo');
-    const continueBtn = document.getElementById('continueBtn');
-    const GRAPH_REAUTH_FLAG = 'graphReauthAttempted';
-
-    function goToIndex() {
-      window.location.href = 'index.html';
-    }
-
-    function showAuthedUI(displayName, email) {
-      loginBtn.classList.add('hidden');
-      loginBtn.disabled = false;
-      loginBtn.textContent = 'Sign in with Microsoft';
-      userInfo.classList.remove('hidden');
-      continueBtn.classList.remove('hidden');
-      document.getElementById('displayName').textContent = displayName || 'Unknown';
-      document.getElementById('email').textContent = email || 'Not available';
-    }
-
-    async function login() {
-      loginBtn.disabled = true;
-      loginBtn.textContent = 'Signing in...';
-      errorEl.classList.add('hidden');
-
-      try {
-        const authData = await pb.collection('users').authWithOAuth2({
-          provider: 'microsoft',
-        });
-        displayUserInfo(authData);
-      } catch (error) {
-        console.error('Login failed:', error);
-        errorEl.textContent = error.message || 'Authentication failed. Please try again.';
-        errorEl.classList.remove('hidden');
-        loginBtn.disabled = false;
-        loginBtn.textContent = 'Sign in with Microsoft';
-      }
-    }
-
-    function logout() {
-      pb.authStore.clear();
-      localStorage.removeItem(GRAPH_TOKEN_KEY);
-      loginBtn.classList.remove('hidden');
-      userInfo.classList.add('hidden');
-      continueBtn.classList.add('hidden');
-      loginBtn.disabled = false;
-      loginBtn.textContent = 'Sign in with Microsoft';
-    }
-
-    function displayUserInfo(authData) {
-      console.log('Auth response:', authData);
-      console.log('Auth meta:', authData?.meta);
-      const displayName = getDisplayName();
-      const email = authData?.meta?.rawUser?.email || authData?.record?.email || pb.authStore.model?.email || 'Not available';
-      const graphToken = extractGraphToken(authData);
-      console.log('Extracted Graph token:', graphToken ? graphToken.substring(0, 30) + '...' : 'NOT FOUND');
-      if (graphToken) {
-        localStorage.setItem(GRAPH_TOKEN_KEY, graphToken);
-        localStorage.removeItem(GRAPH_REAUTH_FLAG);
-      }
-      showAuthedUI(displayName, email);
-    }
-
-    (async () => {
-      const params = new URLSearchParams(window.location.search);
-      const reauth = params.get('reauth') === '1';
-      if (pb.authStore.isValid) {
-        try {
-          const authData = await pb.collection('users').authRefresh();
-          displayUserInfo(authData);
-          // If we came from a reauth flow and now have a token, go back automatically
-          const hasToken = localStorage.getItem(GRAPH_TOKEN_KEY);
-          if (reauth && hasToken) {
-            window.location.href = 'index.html';
-          }
-        } catch (err) {
-          pb.authStore.clear();
-          logout();
-        }
-      }
-    })();
-  </script>
-</body>
-</html>
diff --git a/images/apple.svg b/images/apple.svg
deleted file mode 100644
index de4b0d1..0000000
--- a/images/apple.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Apple</title><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>
\ No newline at end of file
diff --git a/images/google.svg b/images/google.svg
deleted file mode 100644
index 2eaf915..0000000
--- a/images/google.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Google</title><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/></svg>
\ No newline at end of file
diff --git a/package.json b/package.json
deleted file mode 100644
index aa1a96a..0000000
--- a/package.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "job-info-prod",
-  "version": "2.0.0",
-  "description": "Professional field management application with dual-token authentication",
-  "type": "module",
-  "scripts": {
-    "dev": "bun run --watch backend/src/index.ts",
-    "start": "bun run backend/src/index.ts",
-    "typecheck": "tsc --noEmit",
-    "test": "bun test"
-  },
-  "dependencies": {
-    "dotenv": "^17.2.3",
-    "hono": "^4.10.8",
-    "ioredis": "^5.3.2",
-    "pocketbase": "^0.26.5"
-  },
-  "devDependencies": {
-    "@types/bun": "latest",
-    "typescript": "^5.3.3"
-  }
-}
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index 2aa7205..0000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/shared/constants/index.ts b/shared/constants/index.ts
deleted file mode 100644
index bf63984..0000000
--- a/shared/constants/index.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Shared Constants
- */
-
-/** Token refresh interval in milliseconds (30 minutes) */
-export const TOKEN_REFRESH_INTERVAL_MS = 30 * 60 * 1000;
-
-/** Buffer before token expiry to trigger refresh (15 minutes) */
-export const TOKEN_EXPIRY_BUFFER_MS = 15 * 60 * 1000;
-
-/** Token TTL in cache (1 hour) */
-export const TOKEN_TTL_SECONDS = 3600;
-
-/** Refresh token TTL in cache (30 days) */
-export const REFRESH_TOKEN_TTL_SECONDS = 30 * 24 * 60 * 60;
-
-/** API request timeout in milliseconds */
-export const API_TIMEOUT_MS = 30000;
-
-/** Cache key prefixes */
-export const CACHE_KEYS = {
-  TOKEN_PB: (userId: string) => `tokens:${userId}:pb`,
-  TOKEN_GRAPH: (userId: string) => `tokens:${userId}:graph`,
-  REFRESH_PB: (userId: string) => `tokens:${userId}:refresh_pb`,
-  REFRESH_GRAPH: (userId: string) => `tokens:${userId}:refresh_graph`,
-  JOB_FILES: (jobId: string) => `jobs:${jobId}:files`,
-  ACTIVE_USERS: 'active_users',
-} as const;
-
-/** Local storage keys */
-export const STORAGE_KEYS = {
-  PB_TOKEN: 'job-info:pb_token',
-  GRAPH_TOKEN: 'job-info:graph_token',
-  USER: 'job-info:user',
-  EXPIRES_AT: 'job-info:expires_at',
-  LAST_SYNC: 'job-info:last_sync',
-  JOBS_CACHE: 'job-info:jobs',
-} as const;
-
-/** API endpoints */
-export const API_ENDPOINTS = {
-  LOGIN_CALLBACK: '/api/auth/login-callback',
-  LOGOUT: '/api/auth/logout',
-  REFRESH_TOKEN: '/api/auth/refresh-token',
-  JOBS: '/api/jobs',
-  FILES: '/api/files',
-  HEALTH: '/api/health',
-} as const;
diff --git a/shared/types/auth.ts b/shared/types/auth.ts
deleted file mode 100644
index 926e324..0000000
--- a/shared/types/auth.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- * Authentication Types - Shared between frontend and backend
- */
-
-/** Token types supported by the system */
-export type TokenType = 'pb' | 'graph';
-
-/** Stored token data in cache */
-export interface CachedToken {
-  token: string;
-  refresh_token?: string;
-  expiresAt: number;
-  userId: string;
-  source?: 'cache' | 'refreshed';
-}
-
-/** Token response from refresh endpoint */
-export interface TokenRefreshResponse {
-  token: string;
-  expiresAt: number;
-  source: 'cache' | 'refreshed';
-  type: TokenType;
-}
-
-/** User session data from PocketBase */
-export interface PocketBaseUser {
-  id: string;
-  email: string;
-  name: string;
-  avatar?: string;
-  verified: boolean;
-  created: string;
-  updated: string;
-}
-
-/** Alias for PocketBaseUser */
-export type User = PocketBaseUser;
-
-/** Authentication state for frontend */
-export interface AuthState {
-  isAuthenticated: boolean;
-  user?: PocketBaseUser | null;
-  pbToken?: string | null;
-  graphToken?: string | null;
-  expiresAt?: number;
-}
-
-/** Login callback request body */
-export interface LoginCallbackRequest {
-  pbToken: string;
-  graphToken: string;
-  refreshTokenPb?: string;
-  refreshTokenGraph?: string;
-  user: PocketBaseUser;
-}
-
-/** Login callback response */
-export interface LoginCallbackResponse {
-  success: boolean;
-  user: PocketBaseUser;
-  expiresAt_pb: number;
-  expiresAt_graph: number;
-}
-
-/** Logout response */
-export interface LogoutResponse {
-  success: boolean;
-}
-
-/** Token validation result */
-export interface TokenValidation {
-  valid: boolean;
-  expired: boolean;
-  expiresIn: number;
-  userId?: string;
-}
diff --git a/shared/types/job.ts b/shared/types/job.ts
deleted file mode 100644
index cb87b4e..0000000
--- a/shared/types/job.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Job Types - Shared between frontend and backend
- */
-
-/** Job status */
-export type JobStatus = 'active' | 'completed' | 'pending' | 'cancelled' | 'Active' | 'Completed' | 'Pending' | 'On Hold';
-
-/** Job record from PocketBase */
-export interface Job {
-  id: string;
-  job_number: string;
-  job_name: string;
-  client_name: string;
-  status: JobStatus;
-  site_id?: string;
-  drive_id?: string;
-  folder_path?: string;
-  created: string;
-  updated: string;
-  // Computed/alias properties for frontend convenience
-  jobNumber?: string;
-  customer?: string;
-  address?: string;
-  createdAt?: string;
-  updatedAt?: string;
-  notes?: StickyNote[];
-}
-
-/** Job file from SharePoint/Graph API */
-export interface JobFile {
-  id: string;
-  name: string;
-  size: number;
-  mimeType: string;
-  webUrl: string;
-  downloadUrl?: string;
-  createdDateTime: string;
-  lastModifiedDateTime: string;
-  createdBy?: {
-    user: {
-      displayName: string;
-      email: string;
-    };
-  };
-  lastModifiedBy?: {
-    user: {
-      displayName: string;
-      email: string;
-    };
-  };
-}
-
-/** Job files response */
-export interface JobFilesResponse {
-  jobId: string;
-  files: JobFile[];
-  nextLink?: string;
-  cached: boolean;
-}
-
-/** Sticky note for a job */
-export interface StickyNote {
-  id: string;
-  job_id: string;
-  content: string;
-  color?: 'yellow' | 'blue' | 'green' | 'pink' | 'purple';
-  position_x?: number;
-  position_y?: number;
-  created: string;
-  updated: string;
-  created_by: string;
-  // Alias for frontend
-  createdAt?: string;
-}
-
-/** Job list response */
-export interface JobListResponse {
-  jobs: Job[];
-  page: number;
-  perPage: number;
-  totalItems: number;
-  totalPages: number;
-}
-
-/** Job detail response */
-export interface JobDetailResponse {
-  job: Job;
-  files: JobFile[];
-  notes: StickyNote[];
-}
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 5d83d6e..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    './frontend/public/**/*.html',
-    './frontend/src/**/*.{js,ts}',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        // Brand colors
-        primary: {
-          50: '#eff6ff',
-          100: '#dbeafe',
-          200: '#bfdbfe',
-          300: '#93c5fd',
-          400: '#60a5fa',
-          500: '#3b82f6',
-          600: '#2563eb',
-          700: '#1d4ed8',
-          800: '#1e40af',
-          900: '#1e3a8a',
-        },
-      },
-      fontFamily: {
-        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
-      },
-    },
-  },
-  plugins: [],
-};
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index 3cab6ee..0000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "strict": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "outDir": "./dist",
-    "rootDir": ".",
-    "baseUrl": ".",
-    "paths": {
-      "@backend/*": ["./backend/src/*"],
-      "@frontend/*": ["./frontend/src/*"],
-      "@shared/*": ["./shared/*"]
-    },
-    "types": ["bun-types"]
-  },
-  "include": [
-    "backend/src/**/*.ts",
-    "frontend/src/**/*.ts",
-    "shared/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
-}