synch correction and db update

public/styles.css

@@ -55,6 +55,29 @@ body {
 
 /* ── Toast notification ─────────────────────────────────────────────────── */
 
+/* ── Desktop floating save bar (user task detail view, ≥md only) ─────────── */
+
+.desktop-save-bar {
+  display: none; /* hidden until JS adds .is-visible */
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 200;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.desktop-save-bar.is-visible {
+  display: flex;
+}
+
+/* Never show the floating bar on mobile — mobile uses sidebar save buttons */
+@media (max-width: 767.98px) {
+  .desktop-save-bar.is-visible {
+    display: none !important;
+  }
+}
+
 .admin-toast {
   position: fixed;
   top: 20px;
@@ -145,7 +168,7 @@ body {
 .task-record-sort {
   font-weight: 700;
   font-size: 0.9rem;
-  color: var(--bs-primary);
+  color: #fff;
 }
 
 .task-record-desc {
@@ -320,6 +343,60 @@ body {
   transform: rotate(90deg);
 }
 
+/* ── Category tabs (horizontal scroll / swipe on mobile) ───────────────── */
+
+.tabs-scroll-wrapper {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
+/* Arrow buttons — hidden by default, shown only when there is overflow */
+.tabs-scroll-arrow {
+  display: none;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  background: #fff;
+  border: 1px solid #dee2e6;
+  border-bottom: none;
+  cursor: pointer;
+  z-index: 2;
+  color: #495057;
+  padding: 0;
+  transition: background 0.15s;
+}
+
+.tabs-scroll-arrow:hover {
+  background: #f8f9fa;
+}
+
+.tabs-scroll-arrow--left  { border-radius: 4px 0 0 0; }
+.tabs-scroll-arrow--right { border-radius: 0 4px 0 0; }
+
+/* Show arrows only when the list overflows */
+.tabs-scroll-wrapper.has-overflow .tabs-scroll-arrow {
+  display: flex;
+}
+
+/* Hide the arrow when already at that end */
+.tabs-scroll-wrapper.at-start .tabs-scroll-arrow--left  { opacity: 0.3; pointer-events: none; }
+.tabs-scroll-wrapper.at-end   .tabs-scroll-arrow--right { opacity: 0.3; pointer-events: none; }
+
+#recordCategoryTabs {
+  flex: 1;
+  min-width: 0;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+#recordCategoryTabs::-webkit-scrollbar {
+  display: none;
+}
+
 /* ── Mobile hamburger button (hidden on desktop) ───────────────────────── */
 
 .mobile-menu-btn {
@@ -386,4 +463,43 @@ body {
   .mobile-menu-btn {
     display: flex !important;
   }
+}
+
+/* ── Mobile task list cards ─────────────────────────────────────────────── */
+
+.task-list-card {
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(0,0,0,0.08);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.task-list-card:last-child {
+  border-bottom: none;
+}
+
+.task-list-card-fields {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+  align-items: center;
+}
+
+.task-list-field {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
+.task-list-field small {
+  font-size: 0.7rem;
+  color: #6c757d;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.task-list-field strong {
+  font-size: 0.88rem;
 }