Add sticky tables context controls

src/RolemasterDb.App/wwwroot/app.css

@@ -1357,6 +1357,72 @@ pre,
     margin-bottom: 1rem;
 }
 
+.tables-context-bar {
+    position: sticky;
+    top: calc(var(--shell-header-height) + 1rem);
+    z-index: 4;
+    padding-bottom: 1rem;
+    margin-bottom: 1rem;
+    background: linear-gradient(180deg, rgba(255, 251, 245, 0.96), rgba(255, 251, 245, 0.92));
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(127, 96, 55, 0.14);
+}
+
+.theme-dark .tables-context-bar {
+    background: linear-gradient(180deg, rgba(28, 31, 33, 0.96), rgba(28, 31, 33, 0.92));
+}
+
+.tables-context-primary,
+.tables-context-controls {
+    display: grid;
+    gap: 0.85rem;
+}
+
+.tables-context-controls {
+    margin-top: 0.85rem;
+}
+
+.tables-context-mode-tabs {
+    width: fit-content;
+}
+
+.tables-context-fields {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+}
+
+.tables-context-field {
+    display: grid;
+    gap: 0.35rem;
+    min-width: min(100%, 11rem);
+    color: var(--ink-soft);
+    font-size: 0.82rem;
+}
+
+.tables-context-filter-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.tables-context-filter-chip {
+    border: 1px solid rgba(127, 96, 55, 0.2);
+    border-radius: 999px;
+    background: rgba(255, 246, 233, 0.88);
+    color: var(--ink);
+    padding: 0.35rem 0.75rem;
+    font-size: 0.82rem;
+    transition: border-color 0.16s ease, background-color 0.16s ease;
+}
+
+.tables-context-filter-chip:hover,
+.tables-context-filter-chip:focus-visible {
+    border-color: rgba(184, 121, 59, 0.34);
+    background: rgba(255, 239, 214, 0.96);
+    outline: none;
+}
+
 .table-browser-reading-hint {
     margin-top: 0.2rem;
 }
@@ -1497,6 +1563,13 @@ pre,
     justify-content: center;
 }
 
+.tables-filtered-cell {
+    color: var(--ink-faint);
+    font-size: 0.8rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
 .empty-cell {
     color: #a08464;
     font-style: italic;
@@ -2175,6 +2248,14 @@ pre,
         white-space: normal;
     }
 
+    .tables-context-fields {
+        flex-direction: column;
+    }
+
+    .tables-context-field {
+        min-width: 0;
+    }
+
     .critical-editor-header,
     .critical-editor-footer {
         flex-direction: column;