Add map/table toggle view for current reports

✨ New Features:
- Toggle between map and table view for current reports
- Table view shows location, details, reported time, and time remaining
- Color-coded time remaining: urgent (red), warning (orange), normal (green)
- Responsive design with mobile-optimized table layout
- Real-time updates work in both map and table views
- Sorted by most recent reports first

🎨 UI Improvements:
- Professional toggle buttons with active state
- Clean table design with hover effects
- Accessibility-friendly with proper titles and tooltips
- Mobile-responsive layout adjustments

🚀 Better UX:
- Easy switching between visual map and detailed table
- Time remaining countdown helps prioritize urgent reports
- Searchable and scannable table format for quick review
- Maintains all existing functionality while adding new view

public/style.css

@@ -131,7 +131,185 @@ footer {
     clear: both;
 }
 
-disclaimer {
+.disclaimer {
     font-size: 0.8em;
     color: #777;
 }
+
+/* Reports header and toggle */
+.reports-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.view-toggle {
+    display: flex;
+    gap: 10px;
+}
+
+.toggle-btn {
+    background-color: #f8f9fa;
+    border: 2px solid #dee2e6;
+    color: #495057;
+    padding: 8px 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.toggle-btn:hover {
+    background-color: #e9ecef;
+    border-color: #adb5bd;
+}
+
+.toggle-btn.active {
+    background-color: #007bff;
+    border-color: #007bff;
+    color: white;
+}
+
+.toggle-btn.active:hover {
+    background-color: #0056b3;
+    border-color: #0056b3;
+}
+
+/* View containers */
+.view-container {
+    width: 100%;
+}
+
+/* Table view styles */
+.table-container {
+    overflow-x: auto;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.reports-table {
+    width: 100%;
+    border-collapse: collapse;
+    background: white;
+    font-size: 14px;
+}
+
+.reports-table th {
+    background-color: #f8f9fa;
+    color: #495057;
+    font-weight: 600;
+    padding: 12px;
+    text-align: left;
+    border-bottom: 2px solid #dee2e6;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.reports-table td {
+    padding: 12px;
+    border-bottom: 1px solid #dee2e6;
+    vertical-align: top;
+}
+
+.reports-table tr:hover {
+    background-color: #f8f9fa;
+}
+
+.reports-table tr:last-child td {
+    border-bottom: none;
+}
+
+.table-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.table-info {
+    color: #666;
+    font-size: 14px;
+}
+
+/* Table cell specific styles */
+.location-cell {
+    font-weight: 500;
+    color: #495057;
+    max-width: 250px;
+}
+
+.details-cell {
+    color: #6c757d;
+    font-style: italic;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.time-cell {
+    font-size: 12px;
+    color: #868e96;
+}
+
+.remaining-cell {
+    font-weight: 500;
+    font-size: 12px;
+}
+
+.remaining-cell.urgent {
+    color: #dc3545;
+    font-weight: 600;
+}
+
+.remaining-cell.warning {
+    color: #fd7e14;
+    font-weight: 600;
+}
+
+.remaining-cell.normal {
+    color: #28a745;
+}
+
+.loading {
+    text-align: center;
+    color: #6c757d;
+    font-style: italic;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .reports-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 15px;
+    }
+    
+    .view-toggle {
+        justify-content: center;
+    }
+    
+    .toggle-btn {
+        flex: 1;
+    }
+    
+    .reports-table {
+        font-size: 12px;
+    }
+    
+    .reports-table th,
+    .reports-table td {
+        padding: 8px;
+    }
+    
+    .location-cell {
+        max-width: 150px;
+    }
+    
+    .details-cell {
+        max-width: 120px;
+    }
+}