Style typeahead, calendar picker, footer motto, and fix main container width

Add theme-aware dark mode support for typeahead hint inputs and
calendar date picker. Add footer motto and replace Bootstrap .container
extend with explicit max-width for better layout control.

resources/css/dark-fixes.css

@@ -381,3 +381,85 @@
 #cboxMiddleLeft, #cboxMiddleRight {
     display: none !important;
 }
+
+/* ---------- Typeahead hint input: fix background ---------- */
+
+.tt-hint {
+    background: var(--color-bg-primary, #f8f6f1) !important;
+}
+
+:root[data-theme=dark] .tt-hint {
+    background: var(--color-surface, #1a1a1a) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme=light]) .tt-hint {
+        background: var(--color-surface, #1a1a1a) !important;
+    }
+}
+
+/* ---------- Calendar date picker ---------- */
+
+/* Calendar day cells: small radius instead of circle */
+div[id^="caldiv"] table table tr:not(:first-child) td {
+    border-radius: 4px !important;
+}
+
+/* Theme-aware calendar overrides */
+div[id^="caldiv"] {
+    background-color: var(--color-surface, #efecea) !important;
+    border-color: var(--color-border, #ddd) !important;
+}
+
+div[id^="caldiv"] table {
+    border-color: var(--color-border, #ddd) !important;
+}
+
+div[id^="caldiv"] td {
+    background-color: var(--color-surface, #efecea) !important;
+    border-color: var(--color-border, #ddd) !important;
+    color: var(--color-text-primary, #2a2a2a);
+}
+
+div[id^="caldiv"] td[style*="background-color:#EAEAEA"] {
+    background-color: var(--color-bg-tertiary, #e8e5e1) !important;
+}
+
+/* Header row day names */
+div[id^="caldiv"] table table tr:first-child .descriptionbox {
+    background-color: var(--color-bg-tertiary, #e8e5e1) !important;
+    color: var(--color-text-primary, #2a2a2a) !important;
+}
+
+/* Highlighted/today day cell */
+div[id^="caldiv"] table table tr:not(:first-child) td.descriptionbox {
+    background-color: var(--color-primary, #5E81AC) !important;
+    color: white !important;
+}
+
+div[id^="caldiv"] table table tr:not(:first-child) td.descriptionbox a {
+    color: white !important;
+}
+
+div[id^="caldiv"] .optionbox {
+    background-color: var(--color-surface, #efecea) !important;
+    color: var(--color-text-primary, #2a2a2a) !important;
+}
+
+div[id^="caldiv"] a {
+    color: var(--color-link, #5E81AC) !important;
+}
+
+div[id^="caldiv"] .form-select,
+div[id^="caldiv"] .form-control {
+    background-color: var(--color-bg-tertiary, #e8e5e1) !important;
+    color: var(--color-text-primary, #2a2a2a) !important;
+    border-color: var(--color-border, #ddd) !important;
+}
+
+/* ---------- Empty spacer label: match page background ---------- */
+
+.wt-page-options-label:not(:has(*)) {
+    background-color: var(--color-bg-primary, #f8f6f1) !important;
+}
+

src/scss/theme.scss

@@ -215,6 +215,13 @@ p {
 
 .wt-footers {
   text-align: center;
+  padding-block: 1rem;
+
+  &::after {
+    content: "Ad maiorem Dei gloriam";
+    color: var(--color-text-tertiary);
+    font-size: $font-size-sm;
+  }
 }
 
 @media (min-width: 1200px) {
@@ -1177,7 +1184,10 @@ a:hover,
 // ============================================================================
 
 .wt-main-container {
-  @extend .container;
+  max-width: 1320px;
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: 0.75rem !important;
   margin-top: 2rem;
 }