Fix missing card styling for reports section and add shared footer

- Add card styling to map-section with proper spacing and visual hierarchy
- Add reports-header with flexbox layout for title and view toggle buttons
- Add styling for view-toggle buttons, map-info, and table-controls
- Create shared footer component with consistent styling across pages
- Add footer to admin.html and privacy.html for consistency
- Add missing CSS variables for links, secondary text, and font-size-xs
- Ensure footer uses proper theme colors for light/dark modes
- Restore visual box around Current Reports section on main page

public/admin.html

@@ -12,7 +12,10 @@
     <div class="admin-container">
         <!-- Login Section -->
         <div id="login-section" class="login-section">
-            <h2>🔐 Admin Login</h2>
+            <div class="login-header">
+                <h2>🔐 Admin Login</h2>
+                <a href="/" class="header-btn btn-home">🏠 Back to Homepage</a>
+            </div>
             <form id="login-form">
                 <div class="form-group">
                     <label for="password">Admin Password:</label>
@@ -132,6 +135,14 @@
             </div>
         </div>
     </div>
+    
+    <footer>
+        <p><strong>Safety Notice:</strong> This is a community tool for awareness. Stay safe and <a href="https://www.aclu.org/know-your-rights/immigrants-rights" target="_blank" rel="noopener noreferrer">know your rights</a>.</p>
+        <div class="disclaimer">
+            <small>This website is for informational purposes only. Verify information independently. 
+            Reports are automatically deleted after 48 hours. • <a href="/privacy">Privacy Policy</a></small>
+        </div>
+    </footer>
 
     <script src="https://iceymi.b-cdn.net/admin.js"></script>
 </body>

public/privacy.html

@@ -173,6 +173,14 @@
         </div>
     </div>
     
+    <footer>
+        <p><strong>Safety Notice:</strong> This is a community tool for awareness. Stay safe and <a href="https://www.aclu.org/know-your-rights/immigrants-rights" target="_blank" rel="noopener noreferrer">know your rights</a>.</p>
+        <div class="disclaimer">
+            <small>This website is for informational purposes only. Verify information independently. 
+            Reports are automatically deleted after 48 hours. • <a href="/privacy">Privacy Policy</a></small>
+        </div>
+    </footer>
+    
     <script>
         // Theme toggle functionality (shared with main page)
         function initializeTheme() {

src/scss/_variables.scss

@@ -38,6 +38,7 @@ $shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
 
 // Typography
 $font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+$font-size-xs: 10px;
 $font-size-sm: 12px;
 $font-size-md: 14px;
 $font-size-lg: 16px;

src/scss/components/_footer.scss

@@ -0,0 +1,55 @@
+// Import variables and mixins
+@use '../variables' as *;
+@use '../mixins' as *;
+
+// Shared footer styles
+footer {
+  margin-top: $spacing-xl;
+  padding: $spacing-lg;
+  background-color: var(--bg-secondary);
+  border-top: 1px solid var(--border-color);
+  border-radius: $border-radius-md $border-radius-md 0 0;
+  
+  p {
+    margin: $spacing-sm 0;
+    color: var(--text-color);
+    text-align: center;
+    font-size: $font-size-sm;
+    line-height: 1.6;
+    
+    &:first-child {
+      margin-top: 0;
+    }
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  
+  a {
+    color: var(--link-color);
+    text-decoration: underline;
+    
+    &:hover {
+      color: var(--link-hover);
+    }
+  }
+  
+  .disclaimer {
+    margin-top: $spacing-md;
+    
+    small {
+      color: var(--text-secondary);
+      font-size: $font-size-xs;
+      line-height: 1.5;
+    }
+  }
+  
+  @include mobile {
+    padding: $spacing-md;
+    
+    p {
+      font-size: $font-size-xs;
+    }
+  }
+}

src/scss/main.scss

@@ -1,6 +1,7 @@
 // Import variables and mixins first
 @use 'variables' as *;
 @use 'mixins' as *;
+@use 'components/footer';
 @use 'pages/admin';
 @use 'pages/index';
 
@@ -33,6 +34,9 @@ $status-info: #3b82f6;
   --status-warning: #{$status-warning};
   --status-danger: #{$status-danger};
   --status-info: #{$status-info};
+  --link-color: #007bff;
+  --link-hover: #0056b3;
+  --text-secondary: #6c757d;
 }
 
 [data-theme="dark"] {
@@ -50,6 +54,9 @@ $status-info: #3b82f6;
   /* Dark theme additional variables */
   --bg-secondary: #{$dark-card-bg};
   --bg-hover: #4b5563;
+  --link-color: #60a5fa;
+  --link-hover: #93c5fd;
+  --text-secondary: #9ca3af;
 }
 
 * {

src/scss/pages/_admin.scss

@@ -13,6 +13,16 @@
   @include card($spacing-xl);
   max-width: 400px;
   margin: 50px auto;
+  
+  .login-header {
+    @include flex-between;
+    align-items: center;
+    margin-bottom: $spacing-lg;
+    
+    h2 {
+      margin: 0;
+    }
+  }
 }
 
 .admin-section {

src/scss/pages/_index.scss

@@ -63,6 +63,19 @@
   }
 }
 
+// Specific map element styling
+#map {
+  height: 500px;
+  width: 100%;
+  border-radius: $border-radius-md;
+  box-shadow: $shadow-md;
+  margin: $spacing-lg 0;
+  
+  @include mobile {
+    height: 400px;
+  }
+}
+
 // Reports table (main page)
 .reports-table {
   @include table-base;
@@ -183,6 +196,93 @@
   }
 }
 
+// Map section with card styling
+.map-section {
+  @include card;
+  margin-bottom: $spacing-lg;
+  
+  h2 {
+    margin-top: 0;
+    margin-bottom: $spacing-md;
+    color: var(--text-color);
+  }
+}
+
+// Reports header
+.reports-header {
+  @include flex-between;
+  align-items: center;
+  margin-bottom: $spacing-lg;
+  
+  h2 {
+    margin: 0;
+  }
+}
+
+// View toggle buttons
+.view-toggle {
+  display: flex;
+  gap: $spacing-xs;
+}
+
+.toggle-btn {
+  @include button($size: sm);
+  
+  &.active {
+    background-color: $primary-color;
+    color: white;
+  }
+  
+  &:not(.active) {
+    background-color: transparent;
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+  }
+}
+
+// View containers
+.view-container {
+  margin-top: $spacing-md;
+}
+
+// Map info styling
+.map-info {
+  margin-top: $spacing-md;
+  padding: $spacing-md;
+  background-color: var(--bg-secondary);
+  border-radius: $border-radius-sm;
+  border: 1px solid var(--border-color);
+  
+  p {
+    margin: $spacing-xs 0;
+    font-size: $font-size-sm;
+    color: var(--text-color);
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Table controls
+.table-controls {
+  margin-bottom: $spacing-md;
+}
+
+.table-info {
+  text-align: center;
+  
+  p {
+    margin: 0;
+    color: var(--text-color);
+    font-size: $font-size-md;
+  }
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
 // Add location form
 .add-location-form {
   display: grid;