diff --git a/templates/time_attendance_record_detail.html b/templates/time_attendance_record_detail.html
index 74090cf..738b6bb 100644
--- a/templates/time_attendance_record_detail.html
+++ b/templates/time_attendance_record_detail.html
@@ -21,10 +21,10 @@
     <div class="header-content">
       <h1>
         <i class="fas fa-file-alt"></i>
-        Record Details
+        Time Attendance Record Details
       </h1>
       <p class="header-description">
-        Detailed information for attendance record #{{ record.id }}
+        Detailed information for {{ record.employee_name }}
       </p>
     </div>
     
@@ -44,33 +44,8 @@
 
   <!-- Record Details -->
   <div class="record-detail-container">
-    <!-- Employee Information -->
-    <div class="detail-section">
-      <div class="section-header">
-        <h2>
-          <i class="fas fa-user"></i>
-          Employee Information
-        </h2>
-      </div>
-      <div class="section-body">
-        <div class="employee-profile">
-          <div class="employee-avatar large">
-            {{ record.employee_name[0].upper() if record.employee_name else record.employee_id[0].upper() }}
-          </div>
-          <div class="employee-details">
-            <h3>{{ record.employee_name }}</h3>
-            <div class="employee-meta">
-              <div class="meta-item">
-                <i class="fas fa-id-card"></i>
-                <span>Employee ID: {{ record.employee_id }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Attendance Information -->
+    
+    <!-- Attendance Information Section - Matching Excel Column Order -->
     <div class="detail-section">
       <div class="section-header">
         <h2>
@@ -79,31 +54,78 @@
         </h2>
       </div>
       <div class="section-body">
-        <div class="info-grid">
+        <div class="detail-info-grid">
+          <!-- 1. ID (Employee ID) -->
+          <div class="info-item">
+            <div class="info-label">
+              <i class="fas fa-id-card"></i>
+              ID
+            </div>
+            <div class="info-value">
+              {{ record.employee_id }}
+            </div>
+          </div>
+          
+          <!-- 2. Name -->
+          <div class="info-item">
+            <div class="info-label">
+              <i class="fas fa-user"></i>
+              Name
+            </div>
+            <div class="info-value">
+              {{ record.employee_name }}
+            </div>
+          </div>
+          
+          <!-- 3. Platform -->
+          <div class="info-item">
+            <div class="info-label">
+              <i class="fas fa-mobile-alt"></i>
+              Platform
+            </div>
+            <div class="info-value platform">
+              {{ record.platform if record.platform else 'Not specified' }}
+            </div>
+          </div>
+          
+          <!-- 4. Date -->
           <div class="info-item">
             <div class="info-label">
               <i class="fas fa-calendar"></i>
               Date
             </div>
             <div class="info-value">
-              {{ record.attendance_date.strftime('%A, %B %d, %Y') }}
+              {{ record.attendance_date.strftime('%Y-%m-%d') }}
             </div>
           </div>
           
+          <!-- 5. Time -->
           <div class="info-item">
             <div class="info-label">
               <i class="fas fa-clock"></i>
               Time
             </div>
             <div class="info-value time-display">
-              {{ record.attendance_time.strftime('%I:%M:%S %p') }}
+              {{ record.attendance_time.strftime('%H:%M:%S') }}
             </div>
           </div>
           
+          <!-- 6. Location Name -->
           <div class="info-item">
             <div class="info-label">
-              <i class="fas fa-tag"></i>
-              Action
+              <i class="fas fa-map-marker-alt"></i>
+              Location Name
+            </div>
+            <div class="info-value">
+              {{ record.location_name }}
+            </div>
+          </div>
+          
+          <!-- 7. Action Description -->
+          <div class="info-item">
+            <div class="info-label">
+              <i class="fas fa-tasks"></i>
+              Action Description
             </div>
             <div class="info-value">
               <span class="action-badge {{ record.action_description.lower().replace(' ', '-') }}">
@@ -119,41 +141,9 @@
             </div>
           </div>
           
-          <div class="info-item">
-            <div class="info-label">
-              <i class="fas fa-calendar-plus"></i>
-              Full Date & Time
-            </div>
-            <div class="info-value">
-              {{ record.formatted_datetime }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Location Information -->
-    <div class="detail-section">
-      <div class="section-header">
-        <h2>
-          <i class="fas fa-map-marker-alt"></i>
-          Location Information
-        </h2>
-      </div>
-      <div class="section-body">
-        <div class="info-grid">
-          <div class="info-item full-width">
-            <div class="info-label">
-              <i class="fas fa-building"></i>
-              Location Name
-            </div>
-            <div class="info-value">
-              {{ record.location_name }}
-            </div>
-          </div>
-          
+          <!-- 8. Event Description -->
           {% if record.event_description %}
-          <div class="info-item full-width">
+          <div class="info-item">
             <div class="info-label">
               <i class="fas fa-info-circle"></i>
               Event Description
@@ -164,45 +154,23 @@
           </div>
           {% endif %}
           
-          {% if record.recorded_address %}
+          <!-- 9. Recorded Address -->
           <div class="info-item full-width">
             <div class="info-label">
-              <i class="fas fa-map-pin"></i>
+              <i class="fas fa-location-arrow"></i>
               Recorded Address
             </div>
             <div class="info-value address">
+              {% if record.recorded_address %}
               {{ record.recorded_address }}
-            </div>
-          </div>
-          {% endif %}
-        </div>
-      </div>
-    </div>
-
-    <!-- Device Information -->
-    {% if record.platform %}
-    <div class="detail-section">
-      <div class="section-header">
-        <h2>
-          <i class="fas fa-mobile-alt"></i>
-          Device Information
-        </h2>
-      </div>
-      <div class="section-body">
-        <div class="info-grid">
-          <div class="info-item full-width">
-            <div class="info-label">
-              <i class="fas fa-desktop"></i>
-              Platform
-            </div>
-            <div class="info-value platform">
-              {{ record.platform }}
+              {% else %}
+              <span class="text-muted">No address recorded</span>
+              {% endif %}
             </div>
           </div>
         </div>
       </div>
     </div>
-    {% endif %}
 
     <!-- Import Information -->
     <div class="detail-section">
@@ -213,7 +181,7 @@
         </h2>
       </div>
       <div class="section-body">
-        <div class="info-grid">
+        <div class="detail-info-grid">
           {% if record.import_batch_id %}
           <div class="info-item">
             <div class="info-label">
@@ -261,7 +229,7 @@
       </div>
     </div>
 
-    <!-- Related Records -->
+    <!-- Quick Actions -->
     <div class="detail-section">
       <div class="section-header">
         <h2>
@@ -294,28 +262,17 @@
           </a>
           
           {% if record.import_batch_id %}
-          <a href="{{ url_for('time_attendance_records', import_batch=record.import_batch_id) }}" 
+          <a href="{{ url_for('view_import_batch', batch_id=record.import_batch_id) }}" 
              class="action-card">
             <div class="action-icon">
               <i class="fas fa-file-import"></i>
             </div>
             <div class="action-content">
-              <h4>View Batch Records</h4>
+              <h4>View Import Batch</h4>
               <p>See all records from this import batch</p>
             </div>
           </a>
           {% endif %}
-          
-          <a href="{{ url_for('time_attendance_records', start_date=record.attendance_date, end_date=record.attendance_date) }}" 
-             class="action-card">
-            <div class="action-icon">
-              <i class="fas fa-calendar-day"></i>
-            </div>
-            <div class="action-content">
-              <h4>View Daily Records</h4>
-              <p>See all records for {{ record.attendance_date.strftime('%Y-%m-%d') }}</p>
-            </div>
-          </a>
         </div>
       </div>
     </div>
@@ -323,32 +280,33 @@
 </div>
 
 <!-- Delete Confirmation Modal -->
-<div id="deleteModal" class="modal" style="display: none;">
+{% if session.role == 'admin' %}
+<div class="modal" id="deleteModal">
   <div class="modal-content">
     <div class="modal-header">
       <h3>
-        <i class="fas fa-exclamation-triangle text-danger"></i>
-        Confirm Deletion
+        <i class="fas fa-exclamation-triangle"></i>
+        Confirm Delete
       </h3>
-      <button class="modal-close" onclick="closeDeleteModal()">
-        <i class="fas fa-times"></i>
-      </button>
     </div>
     <div class="modal-body">
       <p>Are you sure you want to delete this attendance record?</p>
       <div class="record-summary">
-        <div><strong>Employee:</strong> {{ record.employee_name }}</div>
-        <div><strong>Date:</strong> {{ record.attendance_date.strftime('%Y-%m-%d') }}</div>
-        <div><strong>Time:</strong> {{ record.attendance_time.strftime('%H:%M:%S') }}</div>
-        <div><strong>Action:</strong> {{ record.action_description }}</div>
+        <p><strong>Employee:</strong> {{ record.employee_name }} ({{ record.employee_id }})</p>
+        <p><strong>Date:</strong> {{ record.attendance_date.strftime('%Y-%m-%d') }}</p>
+        <p><strong>Time:</strong> {{ record.attendance_time.strftime('%H:%M:%S') }}</p>
+        <p><strong>Location:</strong> {{ record.location_name }}</p>
       </div>
       <p class="warning-text">
-        <i class="fas fa-exclamation-triangle"></i>
-        This action cannot be undone.
+        <i class="fas fa-exclamation-circle"></i>
+        This action cannot be undone!
       </p>
     </div>
     <div class="modal-footer">
-      <button class="btn btn-outline" onclick="closeDeleteModal()">Cancel</button>
+      <button class="btn btn-secondary" onclick="closeDeleteModal()">
+        <i class="fas fa-times"></i>
+        Cancel
+      </button>
       <form method="POST" action="{{ url_for('delete_time_attendance_record', record_id=record.id) }}" style="display: inline;">
         <button type="submit" class="btn btn-danger">
           <i class="fas fa-trash"></i>
@@ -358,17 +316,21 @@
     </div>
   </div>
 </div>
+{% endif %}
 
 <style>
+/* Override and fix layout for record detail page */
 .record-detail-container {
-  display: grid;
-  gap: 2rem;
+  display: block;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 .detail-section {
   background: #ffffff;
-  border-radius: 0.75rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  margin-bottom: 2rem;
   overflow: hidden;
 }
 
@@ -376,17 +338,6 @@
   background: #f8fafc;
   padding: 1.5rem;
   border-bottom: 1px solid #e2e8f0;
-  position: relative;
-}
-
-.section-header::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: linear-gradient(90deg, #8b5cf6, #7c3aed);
 }
 
 .section-header h2 {
@@ -407,70 +358,26 @@
   padding: 2rem;
 }
 
-.employee-profile {
-  display: flex;
-  align-items: center;
-  gap: 1.5rem;
-}
-
-.employee-avatar.large {
-  width: 80px;
-  height: 80px;
-  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #ffffff;
-  font-size: 2rem;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.employee-details h3 {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #0f172a;
-  margin-bottom: 0.5rem;
-}
-
-.employee-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.meta-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: #64748b;
-  font-size: 0.875rem;
-}
-
-.meta-item i {
-  width: 16px;
-  text-align: center;
-  color: #8b5cf6;
-}
-
-.info-grid {
+/* Custom grid for detail info */
+.detail-info-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
 }
 
+.detail-info-grid .info-item {
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+.detail-info-grid .info-item:hover {
+  background: transparent;
+  border: none;
+}
+
 .info-item {
-  padding: 1.5rem;
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
-  border-radius: 0.5rem;
-  transition: all 0.2s ease-in-out;
-}
-
-.info-item:hover {
-  background: #f1f5f9;
-  border-color: #cbd5e1;
+  display: block;
 }
 
 .info-item.full-width {
@@ -482,51 +389,85 @@
   align-items: center;
   gap: 0.5rem;
   font-weight: 600;
-  color: #374151;
+  color: #64748b;
   font-size: 0.875rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
 }
 
 .info-label i {
   color: #8b5cf6;
   width: 16px;
   text-align: center;
+  font-size: 0.875rem;
 }
 
 .info-value {
   color: #0f172a;
   font-size: 1rem;
   font-weight: 500;
+  padding-left: 1.5rem;
+}
+
+.info-value.platform {
+  font-family: 'Courier New', monospace;
+  color: #64748b;
+  font-size: 0.875rem;
 }
 
 .info-value.time-display {
-  font-family: monospace;
-  font-size: 1.125rem;
-  font-weight: 600;
+  font-family: 'Courier New', monospace;
+  font-size: 1rem;
+  font-weight: 700;
   color: #1e40af;
 }
 
 .info-value.address {
-  line-height: 1.5;
+  line-height: 1.6;
   color: #475569;
 }
 
-.info-value.platform {
-  font-family: monospace;
-  color: #475569;
+.action-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  font-weight: 600;
   font-size: 0.875rem;
+  border: none;
+}
+
+.action-badge.check-in {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.action-badge.check-out {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.action-badge i {
+  font-size: 0.875rem;
+}
+
+.text-muted {
+  color: #94a3b8;
+  font-style: italic;
 }
 
 .batch-id {
   background: #f1f5f9;
   padding: 0.5rem 0.75rem;
-  border-radius: 0.375rem;
-  font-family: monospace;
+  border-radius: 6px;
+  font-family: 'Courier New', monospace;
   font-size: 0.875rem;
   color: #475569;
   border: 1px solid #cbd5e1;
+  display: inline-block;
 }
 
+/* Action Grid */
 .action-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -540,17 +481,17 @@
   padding: 1.5rem;
   background: #f8fafc;
   border: 1px solid #e2e8f0;
-  border-radius: 0.75rem;
+  border-radius: 12px;
   text-decoration: none;
   color: inherit;
-  transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease;
 }
 
 .action-card:hover {
   background: #ffffff;
   border-color: #8b5cf6;
   transform: translateY(-2px);
-  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   text-decoration: none;
   color: inherit;
 }
@@ -559,7 +500,7 @@
   width: 50px;
   height: 50px;
   background: linear-gradient(135deg, #8b5cf6, #7c3aed);
-  border-radius: 0.5rem;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -572,162 +513,100 @@
   font-size: 1rem;
   font-weight: 600;
   color: #0f172a;
-  margin-bottom: 0.25rem;
+  margin: 0 0 0.25rem 0;
 }
 
 .action-content p {
+  font-size: 0.875rem;
   color: #64748b;
-  font-size: 0.875rem;
   margin: 0;
 }
 
-.record-summary {
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin: 1rem 0;
-}
-
-.record-summary div {
-  margin-bottom: 0.5rem;
-}
-
-.record-summary div:last-child {
-  margin-bottom: 0;
-}
-
-.warning-text {
-  color: #dc2626;
-  font-size: 0.875rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 1rem;
-  margin-bottom: 0;
-}
-
-.text-danger {
-  color: #dc2626;
-}
-
 /* Modal Styles */
 .modal {
+  display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
-  display: flex;
+  z-index: 1000;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
 }
 
 .modal-content {
-  background: #ffffff;
-  border-radius: 0.75rem;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  background: white;
+  border-radius: 12px;
   max-width: 500px;
   width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
+  margin: 2rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
 }
 
 .modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   padding: 1.5rem;
   border-bottom: 1px solid #e2e8f0;
 }
 
 .modal-header h3 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
   margin: 0;
-  font-size: 1.125rem;
+  font-size: 1.25rem;
   font-weight: 600;
   color: #0f172a;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
 }
 
-.modal-close {
-  background: none;
-  border: none;
-  color: #64748b;
-  cursor: pointer;
-  font-size: 1.25rem;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-  transition: color 0.2s ease-in-out;
-}
-
-.modal-close:hover {
-  color: #0f172a;
+.modal-header h3 i {
+  color: #ef4444;
 }
 
 .modal-body {
   padding: 1.5rem;
+  color: #475569;
+  line-height: 1.6;
+}
+
+.modal-body p {
+  margin: 0.5rem 0;
+}
+
+.record-summary {
+  background: #f8fafc;
+  padding: 1.5rem;
+  border-radius: 8px;
+  margin: 1rem 0;
+  border: 1px solid #e2e8f0;
+}
+
+.record-summary p {
+  margin: 0.5rem 0;
+  color: #475569;
+}
+
+.warning-text {
+  color: #dc2626;
+  font-weight: 600;
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .modal-footer {
+  padding: 1.5rem;
+  border-top: 1px solid #e2e8f0;
   display: flex;
   gap: 1rem;
   justify-content: flex-end;
-  padding: 1.5rem;
-  border-top: 1px solid #e2e8f0;
-}
-
-/* Print Styles */
-@media print {
-  .time-attendance-header .header-actions,
-  .modal {
-    display: none !important;
-  }
-  
-  .detail-section {
-    page-break-inside: avoid;
-    box-shadow: none;
-    border: 1px solid #e2e8f0;
-  }
-  
-  .record-detail-container {
-    gap: 1rem;
-  }
 }
 
 /* Responsive Design */
 @media (max-width: 768px) {
-  .time-attendance-header {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 1rem;
-    text-align: center;
-  }
-  
-  .header-navigation {
-    text-align: left;
-    margin-bottom: 0.5rem;
-  }
-  
-  .header-actions {
-    justify-content: center;
-  }
-  
-  .employee-profile {
-    flex-direction: column;
-    text-align: center;
-  }
-  
-  .employee-avatar.large {
-    width: 60px;
-    height: 60px;
-    font-size: 1.5rem;
-  }
-  
-  .info-grid {
+  .detail-info-grid {
     grid-template-columns: 1fr;
   }
   
@@ -735,15 +614,6 @@
     grid-template-columns: 1fr;
   }
   
-  .action-card {
-    flex-direction: column;
-    text-align: center;
-  }
-  
-  .section-body {
-    padding: 1rem;
-  }
-  
   .modal-content {
     margin: 1rem;
     width: calc(100% - 2rem);
@@ -752,31 +622,160 @@
   .modal-footer {
     flex-direction: column;
   }
+  
+  .modal-footer .btn,
+  .modal-footer form {
+    width: 100%;
+  }
+  
+  .modal-footer .btn {
+    justify-content: center;
+  }
 }
 
-@media (max-width: 480px) {
+/* Print Styles */
+@media print {
+  /* Hide elements not needed in print */
+  .header-navigation,
+  .header-actions,
+  .action-grid,
+  .modal,
+  .back-button,
+  .btn,
+  .detail-section:last-child {
+    display: none !important;
+  }
+  
+  /* Reset page layout for print */
+  body {
+    background: white !important;
+  }
+  
   .time-attendance-page {
-    padding: 1rem;
+    padding: 0 !important;
+    margin: 0 !important;
+    max-width: 100% !important;
+    background: white !important;
   }
   
   .time-attendance-header {
-    padding: 1rem;
+    box-shadow: none !important;
+    border: 1px solid #ddd !important;
+    page-break-after: avoid;
+  }
+  
+  .time-attendance-header::before {
+    display: none !important;
   }
   
   .header-content h1 {
-    font-size: 1.5rem;
+    font-size: 1.5rem !important;
+    color: #000 !important;
   }
   
-  .info-item {
-    padding: 1rem;
+  .header-description {
+    color: #333 !important;
+  }
+  
+  /* Record detail container */
+  .record-detail-container {
+    max-width: 100% !important;
+  }
+  
+  /* Detail sections */
+  .detail-section {
+    box-shadow: none !important;
+    border: 1px solid #ddd !important;
+    page-break-inside: avoid;
+    margin-bottom: 1rem !important;
   }
   
   .section-header {
-    padding: 1rem;
+    background: #f8f8f8 !important;
+    border-bottom: 1px solid #ddd !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
   }
   
-  .action-card {
-    padding: 1rem;
+  .section-header::before {
+    display: none !important;
+  }
+  
+  .section-header h2 {
+    color: #000 !important;
+  }
+  
+  .section-header h2 i {
+    color: #666 !important;
+  }
+  
+  .section-body {
+    padding: 1.5rem !important;
+  }
+  
+  /* Info grid - maintain 2 column layout in print */
+  .detail-info-grid {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 1rem !important;
+  }
+  
+  .info-item {
+    page-break-inside: avoid;
+  }
+  
+  .info-item.full-width {
+    grid-column: 1 / -1 !important;
+  }
+  
+  .info-label {
+    color: #333 !important;
+    font-size: 0.8rem !important;
+  }
+  
+  .info-label i {
+    color: #666 !important;
+  }
+  
+  .info-value {
+    color: #000 !important;
+    font-size: 0.9rem !important;
+  }
+  
+  /* Action badges */
+  .action-badge {
+    border: 1px solid #ddd !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  
+  .action-badge.check-in {
+    background: #e8f5e9 !important;
+    color: #2e7d32 !important;
+  }
+  
+  .action-badge.check-out {
+    background: #fff3e0 !important;
+    color: #e65100 !important;
+  }
+  
+  /* Batch ID */
+  .batch-id {
+    border: 1px solid #ddd !important;
+    background: #f8f8f8 !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  
+  /* Force page breaks */
+  .detail-section:last-child {
+    page-break-after: avoid;
+  }
+  
+  /* Ensure colors print */
+  * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
   }
 }
 </style>
@@ -792,11 +791,14 @@ function closeDeleteModal() {
 }
 
 // Close modal when clicking outside
-document.getElementById('deleteModal').addEventListener('click', function(e) {
-  if (e.target === this) {
-    closeDeleteModal();
-  }
-});
+const modal = document.getElementById('deleteModal');
+if (modal) {
+  modal.addEventListener('click', function(e) {
+    if (e.target === this) {
+      closeDeleteModal();
+    }
+  });
+}
 
 // Escape key to close modal
 document.addEventListener('keydown', function(e) {
@@ -804,10 +806,5 @@ document.addEventListener('keydown', function(e) {
     closeDeleteModal();
   }
 });
-
-// Print functionality
-function printRecord() {
-  window.print();
-}
 </script>
 {% endblock %}
\ No newline at end of file