Fix dark mode for calendar, family/individual list pages and refine search

- Add dark mode support for calendar page elements (options bar, month
  table, day cells)
- Add dark mode support for family/individual list pages (initials bar,
  surname table, DataTables numeric cells)
- Force transparent table cell backgrounds in dark mode with !important
  to override Bootstrap/DataTables defaults
- Refactor TreePage search to match homepage style (pill input, no
  button, Ionicon search icon, Enter to submit)
- Fix active nav icon color filters being overridden by dark mode mixin
- Fix mobile nav items not being perfectly round (gap: 0)

BockenTheme.php

@@ -235,9 +235,7 @@ class BockenTheme extends AbstractModule implements ModuleCustomInterface, Modul
                 searchDiv.innerHTML =
                     '<form method="post" action="' + searchAction + '" class="bocken-search-form" role="search">' +
                         '<input type="search" class="bocken-search-input" name="query" placeholder="Search names, places, sources..." autocomplete="off">' +
-                        '<button type="submit" class="bocken-search-btn" aria-label="Search">' +
+                        '<span class="bocken-search-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="m338.29 338.29 105.25 105.25"/></svg></span>' +
-                            '<i data-lucide="search"></i>' +
-                        '</button>' +
                         '<input type="hidden" name="_csrf" value="' + csrfValue + '">' +
                     '</form>';
 

src/scss/theme.scss

@@ -896,49 +896,75 @@ a:hover,
 }
 
 // Search form on the start page (injected via JS)
+// Matches homepage SearchInput.svelte: pill-shaped, nord0 bg, no button, submit via Enter
 .bocken-page-search {
-  max-width: 500px;
+  width: 500px;
-  margin: 0 auto 2rem;
+  max-width: 85vw;
+  margin: 2.5rem auto 1.2rem;
+  font-size: 1.6rem;
+  filter: drop-shadow(0.4em 0.5em 0.4em rgba(0,0,0,0.4));
+  transition: var(--transition-fast);
+
+  &:hover,
+  &:focus-within {
+    transform: scale(1.02);
+    filter: drop-shadow(0.4em 0.5em 1em rgba(0,0,0,0.6));
+  }
 
   .bocken-search-form {
+    position: relative;
     display: flex;
-    gap: 0;
+    align-items: center;
   }
 
   .bocken-search-input {
-    flex: 1;
+    all: unset;
-    padding: 0.6rem 1rem;
+    box-sizing: border-box;
-    border: 1px solid var(--color-border);
+    background: var(--nord0);
-    border-radius: 100px 0 0 100px;
+    color: #fff;
-    background: var(--color-surface);
+    padding: 0.7rem 2rem;
+    padding-right: 3rem;
+    border-radius: 100px;
+    width: 100%;
+    font-size: inherit;
+
+    &::placeholder {
+      color: var(--nord6);
+    }
+  }
+
+  .bocken-search-icon {
+    position: absolute;
+    right: 0.8em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--nord6);
+    pointer-events: none;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+}
+
+// Light mode: lighter search bar
+:root[data-theme="light"] .bocken-page-search .bocken-search-input {
+  background: var(--color-bg-elevated);
   color: var(--color-text-primary);
-    font-size: 0.95rem;
-    outline: none;
-    transition: border-color var(--transition-fast);
 
   &::placeholder {
     color: var(--color-text-muted);
   }
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]) .bocken-page-search .bocken-search-input {
+    background: var(--color-bg-elevated);
+    color: var(--color-text-primary);
 
-    &:focus {
+    &::placeholder {
-      border-color: var(--color-primary);
+      color: var(--color-text-muted);
-    }
-  }
-
-  .bocken-search-btn {
-    padding: 0.6rem 1.2rem;
-    border: 1px solid var(--color-border);
-    border-left: 0;
-    border-radius: 0 100px 100px 0;
-    background: var(--color-primary);
-    color: var(--color-text-on-primary);
-    cursor: pointer;
-    transition: background var(--transition-fast);
-    display: flex;
-    align-items: center;
-
-    &:hover {
-      background: var(--color-primary-hover);
     }
   }
 }
@@ -1003,6 +1029,7 @@ a:hover,
   @include media-breakpoint-down(lg) {
     font-size: 0 !important;
     padding: 0.45rem !important;
+    gap: 0 !important;
 
     &::before {
       font-size: 0.85rem !important;
@@ -1145,6 +1172,73 @@ a:hover,
   color: var(--color-text-primary) !important;
 }
 
+// Calendar & page options
+.wt-page-options {
+  color: var(--color-text-primary);
+}
+
+.wt-page-options-label {
+  color: var(--color-text-primary);
+  border-color: var(--color-border);
+}
+
+.wt-page-options-value {
+  color: var(--color-text-primary);
+  border-color: var(--color-border);
+
+  a {
+    color: var(--color-link);
+  }
+}
+
+.wt-calendar-month {
+  color: var(--color-text-primary);
+  border-color: var(--color-border);
+
+  th, td {
+    border-color: var(--color-border);
+  }
+
+  .wt-calendar-today {
+    background-color: var(--color-bg-secondary);
+  }
+}
+
+.cal_day {
+  color: var(--color-text-primary);
+}
+
+// Family/Individual list — initials bar & content
+.wt-initials-list {
+  color: var(--color-text-primary);
+}
+
+.wt-initial {
+  color: var(--color-link);
+
+  &.active {
+    background-color: var(--color-primary);
+    color: var(--color-text-on-primary) !important;
+    border-radius: $border-radius;
+  }
+}
+
+.wt-page-content {
+  color: var(--color-text-primary);
+
+  a {
+    color: var(--color-link);
+  }
+
+  p {
+    color: var(--color-text-primary);
+  }
+}
+
+.wt-table-surname {
+  color: var(--color-text-primary);
+}
+
 // ============================================================================
 // FOOTER
 // ============================================================================
@@ -1593,10 +1687,30 @@ div[id^=caldiv] {
   }
 
   .table {
-    --bs-table-bg: transparent;
+    --bs-table-bg: transparent !important;
     --bs-table-color: var(--color-text-primary);
     --bs-table-border-color: var(--color-border);
     color: var(--color-text-primary);
+
+    th, td {
+      background-color: transparent !important;
+      color: var(--color-text-primary);
+      border-color: var(--color-border) !important;
+    }
+
+    thead th {
+      background-color: var(--color-bg-tertiary) !important;
+    }
+
+    // DataTables sorted column highlight
+    td.sorting_1 {
+      background-color: rgba(255, 255, 255, 0.02) !important;
+    }
+
+    // Ensure numeric cells get light text
+    .dt-type-numeric {
+      color: var(--color-text-primary) !important;
+    }
   }
 
   .table-bordered {
@@ -1664,8 +1778,8 @@ div[id^=caldiv] {
     border-bottom-color: var(--color-border);
   }
 
-  // Nav icon filters for dark mode
+  // Nav icon filters for dark mode (exclude active items which have their own colored filters)
-  .wt-header-content .nav > .nav-item > .nav-link::before {
+  .wt-header-content .nav > .nav-item:not(.bocken-nav-active) > .nav-link::before {
     filter: brightness(0) invert(0.7);
   }
 
@@ -1704,6 +1818,72 @@ div[id^=caldiv] {
     color: var(--color-text-primary);
   }
 
+  // Calendar page
+  .wt-page-options {
+    background-color: transparent;
+    color: var(--color-text-primary);
+  }
+
+  .wt-page-options-label {
+    background-color: var(--color-bg-secondary);
+    color: var(--color-text-primary);
+    border-color: var(--color-border);
+  }
+
+  .wt-page-options-value {
+    background-color: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    border-color: var(--color-border);
+  }
+
+  .wt-calendar-month {
+    background-color: transparent;
+    color: var(--color-text-primary);
+    border-color: var(--color-border);
+
+    th {
+      background-color: var(--color-bg-tertiary);
+      color: var(--color-text-primary);
+      border-color: var(--color-border);
+    }
+
+    td {
+      background-color: var(--color-bg-primary);
+      color: var(--color-text-primary);
+      border-color: var(--color-border);
+    }
+
+    .wt-calendar-today {
+      background-color: var(--color-bg-tertiary);
+    }
+  }
+
+  .cal_day {
+    color: var(--color-text-primary);
+  }
+
+  // Family/Individual list
+  .wt-initials-list {
+    color: var(--color-text-primary);
+  }
+
+  .wt-initial {
+    color: var(--color-link);
+
+    &.active {
+      background-color: var(--color-primary);
+      color: var(--color-text-on-primary) !important;
+    }
+  }
+
+  .wt-page-content {
+    color: var(--color-text-primary);
+
+    p {
+      color: var(--color-text-primary);
+    }
+  }
+
   img {
     opacity: 0.92;
   }