Add flock member notes and audit tabs

frontend/src/index.css

@@ -713,6 +713,11 @@ textarea {
   gap: 1.5rem;
 }
 
+.bird-detail-panel {
+  margin-right: 3rem;
+  position: relative;
+}
+
 .flock-detail-column {
   display: grid;
   gap: 1.5rem;
@@ -1196,6 +1201,35 @@ textarea {
   gap: 0.25rem;
 }
 
+.note-card,
+.audit-log-card {
+  align-items: start;
+}
+
+.note-card div,
+.audit-log-card div {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+  align-items: start;
+}
+
+.note-card span,
+.audit-log-card span,
+.audit-log-card small {
+  color: var(--muted);
+}
+
+.note-card p {
+  margin: 0.35rem 0 0;
+  white-space: pre-wrap;
+}
+
+.note-card .button-row {
+  justify-content: space-between;
+  align-items: center;
+}
+
 .legend-grid,
 .detail-grid,
 .summary-grid {
@@ -1207,17 +1241,22 @@ textarea {
   grid-template-columns: auto 1fr;
   gap: 1rem;
   align-items: center;
-  padding: 1rem;
+  padding: 1rem 6.4rem 1rem 1rem;
   border-radius: 24px;
   background: linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(240, 248, 244, 0.84));
   border: 1px solid rgba(39, 105, 179, 0.1);
   position: relative;
 }
 
-.qr-profile-button {
+.profile-actions {
   position: absolute;
   top: 0.85rem;
   right: 0.85rem;
+  display: flex;
+  gap: 0.45rem;
+}
+
+.profile-icon-button {
   display: grid;
   place-items: center;
   width: 42px;
@@ -1228,15 +1267,91 @@ textarea {
   box-shadow: 0 10px 20px rgba(86, 63, 34, 0.12);
 }
 
-.qr-profile-button:hover {
+.profile-icon-button:hover {
   transform: translateY(-1px);
   border-color: rgba(35, 138, 90, 0.34);
 }
 
-.qr-profile-button svg {
+.profile-icon-button svg {
   width: 24px;
   height: 24px;
+  fill: none;
+  stroke: var(--accent-blue);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.qr-profile-button svg {
   fill: var(--accent-blue);
+  stroke: none;
+}
+
+.bird-detail-tabs {
+  position: absolute;
+  top: 5rem;
+  right: -3rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+
+.bird-detail-tab {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 44px;
+  border: 1px solid rgba(39, 105, 179, 0.14);
+  border-left: 0;
+  border-radius: 0 14px 14px 0;
+  background: rgba(255, 254, 250, 0.92);
+  color: var(--muted);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
+}
+
+.bird-detail-tab svg {
+  width: 20px;
+  height: 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.bird-detail-tab .weight-tab-icon {
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
+  stroke: none;
+}
+
+.bird-detail-tab .info-tab-icon,
+.bird-detail-tab .note-tab-icon,
+.bird-detail-tab .audit-tab-icon,
+.bird-detail-tab .vet-tab-icon {
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
+  stroke: none;
+}
+
+.bird-detail-tab:hover {
+  border-color: rgba(35, 138, 90, 0.28);
+  color: var(--ink);
+  transform: translateY(-1px);
+}
+
+.bird-detail-tab.active {
+  border-color: rgba(35, 138, 90, 0.42);
+  background: rgba(240, 248, 244, 0.95);
+  color: var(--accent-green);
+  box-shadow: 10px 10px 20px rgba(39, 105, 179, 0.1);
+}
+
+.bird-detail-tab-panel {
+  display: grid;
+  gap: 1rem;
 }
 
 .profile-copy {
@@ -2008,6 +2123,29 @@ label {
     justify-content: start;
   }
 
+  .bird-detail-panel {
+    margin-right: 0;
+  }
+
+  .profile-hero {
+    padding: 1rem;
+  }
+
+  .bird-detail-tabs {
+    position: static;
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    transform: none;
+  }
+
+  .bird-detail-tab {
+    width: auto;
+    min-width: 0;
+    border-left: 1px solid rgba(39, 105, 179, 0.14);
+    border-radius: 14px;
+  }
+
   .side-rail {
     position: static;
     grid-template-columns: auto minmax(0, 1fr);