style: highlight delete actions and align event row buttons

Add btn-icon danger styling, strengthen btn-delete and photo delete, and fix events table action layout.

Co-authored-by: Cursor <cursoragent@cursor.com>

client/src/App.css

@@ -1180,12 +1180,29 @@ html.scheme-dark .themed-select-option.is-selected {
   color: var(--app-accent-light);
 }
 
-.btn-icon.logout:hover {
+.btn-icon.danger {
-  background: rgba(239, 68, 68, 0.1);
+  background: rgba(239, 68, 68, 0.18);
-  border-color: #ef4444;
+  border-color: rgba(239, 68, 68, 0.35);
   color: #f87171;
 }
 
+.btn-icon.danger:hover {
+  background: rgba(239, 68, 68, 0.3);
+  border-color: #ef4444;
+  color: #fca5a5;
+}
+
+.btn-icon.danger:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.btn-icon.logout:hover {
+  background: var(--app-accent-bg);
+  border-color: var(--app-accent);
+  color: var(--app-accent-light);
+}
+
 .dashboard-main {
   display: grid;
   grid-template-columns: 350px 1fr;
@@ -2181,12 +2198,12 @@ html.scheme-dark .themed-select-option.is-selected {
 }
 
 .btn-delete {
-  background: none;
+  background: rgba(239, 68, 68, 0.18);
-  border: none;
+  border: 1px solid rgba(239, 68, 68, 0.35);
-  color: #475569;
+  color: #f87171;
   cursor: pointer;
   padding: 6px;
-  border-radius: 6px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2202,8 +2219,9 @@ html.scheme-dark .themed-select-option.is-selected {
 }
 
 .btn-delete:hover {
-  color: #f43f5e;
+  color: #fca5a5;
-  background: rgba(244, 63, 94, 0.1);
+  background: rgba(239, 68, 68, 0.3);
+  border-color: #ef4444;
 }
 
 .btn-pdf {
@@ -2684,15 +2702,18 @@ html.scheme-dark .themed-select-option.is-selected {
 }
 
 .events-actions-td {
+  width: 1%;
+  min-width: 88px;
   white-space: nowrap;
+  vertical-align: middle;
 }
 
-.events-actions-td .btn-icon {
+.events-actions-cell {
-  margin-left: 4px;
+  display: inline-flex;
-}
+  align-items: center;
-
+  justify-content: flex-end;
-.events-actions-td .btn-icon:first-child {
+  gap: 8px;
-  margin-left: 0;
+  flex-wrap: nowrap;
 }
 
 .events-table tbody tr:hover {
@@ -3172,9 +3193,9 @@ html.theme-cupertino .events-scroll-container {
   position: absolute;
   top: 8px;
   right: 8px;
-  background: rgba(15, 23, 42, 0.7);
+  background: rgba(239, 68, 68, 0.22);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.4);
-  color: #f43f5e;
+  color: #fca5a5;
   border-radius: 50%;
   width: 32px;
   height: 32px;
@@ -3186,9 +3207,10 @@ html.theme-cupertino .events-scroll-container {
 }
 
 .photo-btn-delete:hover {
-  background: #f43f5e;
+  background: rgba(239, 68, 68, 0.45);
+  border-color: #ef4444;
   color: #ffffff;
-  transform: scale(1.1);
+  transform: scale(1.08);
 }
 
 .photo-caption-bar {
@@ -4083,15 +4105,23 @@ html.theme-cupertino .events-scroll-container {
   min-height: auto !important;
 }
 
+.btn-inline-icon {
+  width: auto !important;
+  display: inline-flex !important;
+  align-items: center;
+  gap: 6px;
+}
+
 .btn.danger {
-  background: rgba(239, 68, 68, 0.15) !important;
+  background: rgba(239, 68, 68, 0.2) !important;
   color: #fca5a5 !important;
-  border: 1px solid rgba(239, 68, 68, 0.3) !important;
+  border: 1px solid rgba(239, 68, 68, 0.38) !important;
 }
 
 .btn.danger:hover {
-  background: rgba(239, 68, 68, 0.25) !important;
+  background: rgba(239, 68, 68, 0.32) !important;
   border-color: #ef4444 !important;
+  color: #fecaca !important;
 }
 
 /* Crew Avatar Card Styling */

client/src/components/CrewForm.tsx

@@ -818,7 +818,7 @@ export default function CrewForm({
                       <button className="btn-icon" onClick={() => openEditMember(m)} title="Edit">
                         <Edit2 size={14} />
                       </button>
-                      <button className="btn-icon logout" onClick={() => handleDeleteMember(m.payloadId)} title="Delete">
+                      <button className="btn-icon danger" onClick={() => handleDeleteMember(m.payloadId)} title="Delete">
                         <Trash2 size={14} />
                       </button>
                     </div>

client/src/components/LogEntryEditor.tsx

@@ -1820,23 +1820,25 @@ export default function LogEntryEditor({
                       </td>
                       {!readOnly && (
                         <td className="events-actions-td">
-                          <button
+                          <div className="events-actions-cell">
-                            type="button"
+                            <button
-                            className="btn-icon"
+                              type="button"
-                            onClick={() => handleEditEvent(idx)}
+                              className="btn-icon"
-                            title={t('logs.edit_event')}
+                              onClick={() => handleEditEvent(idx)}
-                            disabled={editingEventIndex !== null && editingEventIndex !== idx}
+                              title={t('logs.edit_event')}
-                          >
+                              disabled={editingEventIndex !== null && editingEventIndex !== idx}
-                            <Pencil size={14} />
+                            >
-                          </button>
+                              <Pencil size={14} />
-                          <button
+                            </button>
-                            type="button"
+                            <button
-                            className="btn-icon logout"
+                              type="button"
-                            onClick={() => handleDeleteEvent(idx)}
+                              className="btn-icon danger"
-                            title={t('logs.delete_event')}
+                              onClick={() => handleDeleteEvent(idx)}
-                          >
+                              title={t('logs.delete_event')}
-                            <Trash2 size={14} />
+                            >
-                          </button>
+                              <Trash2 size={14} />
+                            </button>
+                          </div>
                         </td>
                       )}
                     </tr>
@@ -2260,9 +2262,8 @@ export default function LogEntryEditor({
                   {!readOnly && (
                     <button
                       type="button"
-                      className="btn secondary"
+                      className="btn danger btn-sm btn-inline-icon"
                       onClick={handleDeleteTrack}
-                      style={{ width: 'auto', padding: '6px 12px', fontSize: '13px', display: 'flex', alignItems: 'center', gap: '4px', background: 'rgba(239, 68, 68, 0.1)', color: '#ef4444', borderColor: 'rgba(239, 68, 68, 0.2)' }}
                       title={t('logs.gps_track_delete')}
                     >
                       <Trash2 size={14} />
@@ -2295,7 +2296,11 @@ export default function LogEntryEditor({
                   <button type="button" className="btn secondary" style={{ width: 'auto', padding: '4px 10px', fontSize: '13px' }} onClick={() => downloadNmeaArchive(nmeaArchive)}>
                     <Download size={14} />
                   </button>
-                  <button type="button" className="btn secondary" style={{ width: 'auto', padding: '4px 10px', fontSize: '13px' }} onClick={handleDeleteNmeaArchive}>
+                  <button
+                    type="button"
+                    className="btn danger btn-sm btn-inline-icon"
+                    onClick={handleDeleteNmeaArchive}
+                  >
                     <Trash2 size={14} />
                   </button>
                 </div>

client/src/components/PersonPoolForm.tsx

@@ -147,7 +147,7 @@ export default function PersonPoolForm() {
           </button>
           <button
             type="button"
-            className="btn-icon logout"
+            className="btn-icon danger"
             onClick={() => void handleDelete(person.payloadId)}
             title="Delete"
           >

client/src/components/SettingsForm.tsx

@@ -429,7 +429,7 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
                       <td>
                         <button
                           type="button"
-                          className="btn-icon logout"
+                          className="btn-icon danger"
                           onClick={() => handleRevoke(c.id, c.username)}
                           title="Revoke access"
                         >

client/src/components/VesselPoolForm.tsx

@@ -193,7 +193,7 @@ export default function VesselPoolForm() {
                   </button>
                   <button
                     type="button"
-                    className="btn-icon logout"
+                    className="btn-icon danger"
                     onClick={() => void handleDelete(v.payloadId)}
                   >
                     <Trash2 size={14} />