refactor: UI consistency — shared CSS, design system colors, no inline styles

Phase 1: Extract 6 shared CSS modules (table-section, log-panel,
rate-colors, refresh-indicator, chart-card, section-card) eliminating
~135 duplicate class definitions across 11 files.

Phase 2: Replace all hardcoded hex colors in CSS modules with design
system variables. Strip ~55 hex fallbacks from var() patterns. Fix 4
undefined variable names (--accent, --bg-base, --surface, --bg-surface-raised).

Phase 3: Replace ~45 hardcoded hex values in ProcessDiagram SVG
components with var() CSS custom properties. Fix Dashboard.tsx color prop.

Phase 4: Create CSS modules for AdminLayout, DatabaseAdminPage,
OidcCallback (previously 100% inline). Extract shared PageLoader
component (replaces 3 copy-pasted spinner patterns). Move AppsTab
static inline styles to CSS classes. Extract LayoutShell StarredList styles.

58 files changed, net -219 lines.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/components/ExecutionDiagram/ExecutionDiagram.module.css

@@ -15,37 +15,37 @@
   align-items: center;
   gap: 12px;
   padding: 8px 14px;
-  background: var(--bg-surface, #FFFFFF);
-  border-bottom: 1px solid var(--border, #E4DFD8);
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
   font-size: 12px;
-  color: var(--text-secondary, #5C5347);
+  color: var(--text-secondary);
   flex-shrink: 0;
 }
 
 .exchangeLabel {
   font-weight: 600;
-  color: var(--text-primary, #1A1612);
+  color: var(--text-primary);
 }
 
 .exchangeId {
   font-size: 12px;
-  background: var(--bg-hover, #F5F0EA);
+  background: var(--bg-hover);
   padding: 2px 6px;
   border-radius: 3px;
-  color: var(--text-primary, #1A1612);
+  color: var(--text-primary);
 }
 
 .exchangeMeta {
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
 }
 
 .jumpToError {
   margin-left: auto;
   font-size: 12px;
   padding: 3px 10px;
-  border: 1px solid var(--error, #C0392B);
-  background: #FDF2F0;
-  color: var(--error, #C0392B);
+  border: 1px solid var(--error);
+  background: var(--error-bg);
+  color: var(--error);
   border-radius: 4px;
   cursor: pointer;
   font-weight: 500;
@@ -53,7 +53,7 @@
 }
 
 .jumpToError:hover {
-  background: #F9E0DC;
+  background: color-mix(in srgb, var(--error) 15%, var(--bg-surface));
 }
 
 .diagramArea {
@@ -67,12 +67,12 @@
   right: 8px;
   z-index: 10;
   font-size: 12px;
-  font-family: var(--font-mono, monospace);
+  font-family: var(--font-mono);
   padding: 3px 8px;
-  border: 1px solid var(--border, #E4DFD8);
+  border: 1px solid var(--border);
   border-radius: 4px;
-  background: var(--bg-surface, #FFFFFF);
-  color: var(--text-secondary, #5C5347);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
   cursor: pointer;
   opacity: 0.7;
   transition: opacity 0.15s, background 0.15s;
@@ -80,18 +80,18 @@
 
 .downloadBtn:hover {
   opacity: 1;
-  background: var(--bg-hover, #F5F0EA);
+  background: var(--bg-hover);
 }
 
 .splitter {
   height: 4px;
-  background: var(--border, #E4DFD8);
+  background: var(--border);
   cursor: row-resize;
   flex-shrink: 0;
 }
 
 .splitter:hover {
-  background: var(--amber, #C6820E);
+  background: var(--amber);
 }
 
 .detailArea {
@@ -106,7 +106,7 @@
   align-items: center;
   justify-content: center;
   flex: 1;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   font-size: 13px;
 }
 
@@ -115,13 +115,13 @@
   align-items: center;
   justify-content: center;
   flex: 1;
-  color: var(--error, #C0392B);
+  color: var(--error);
   font-size: 13px;
 }
 
 .statusRunning {
-  color: var(--amber, #C6820E);
-  background: #FFF8F0;
+  color: var(--amber);
+  background: var(--amber-bg);
 }
 
 /* ==========================================================================
@@ -131,8 +131,8 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: var(--bg-surface, #FFFFFF);
-  border-top: 1px solid var(--border, #E4DFD8);
+  background: var(--bg-surface);
+  border-top: 1px solid var(--border);
   flex: 1;
   min-height: 0;
 }
@@ -143,27 +143,27 @@
   align-items: center;
   gap: 10px;
   padding: 6px 14px;
-  border-bottom: 1px solid var(--border, #E4DFD8);
-  background: #FAFAF8;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-raised);
   min-height: 32px;
 }
 
 .processorName {
   font-size: 12px;
   font-weight: 600;
-  color: var(--text-primary, #1A1612);
+  color: var(--text-primary);
 }
 
 .processorId {
   font-size: 12px;
-  font-family: var(--font-mono, monospace);
-  color: var(--text-muted, #9C9184);
+  font-family: var(--font-mono);
+  color: var(--text-muted);
 }
 
 .processorDuration {
   font-size: 12px;
-  font-family: var(--font-mono, monospace);
-  color: var(--text-secondary, #5C5347);
+  font-family: var(--font-mono);
+  color: var(--text-secondary);
   margin-left: auto;
 }
 
@@ -180,13 +180,13 @@
 }
 
 .statusCompleted {
-  color: var(--success, #3D7C47);
-  background: #F0F9F1;
+  color: var(--success);
+  background: var(--success-bg);
 }
 
 .statusFailed {
-  color: var(--error, #C0392B);
-  background: #FDF2F0;
+  color: var(--error);
+  background: var(--error-bg);
 }
 
 /* ==========================================================================
@@ -195,18 +195,18 @@
 .tabBar {
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid var(--border, #E4DFD8);
+  border-bottom: 1px solid var(--border);
   padding: 0 14px;
-  background: #FAFAF8;
+  background: var(--bg-raised);
   gap: 0;
 }
 
 .tab {
   padding: 6px 12px;
   font-size: 12px;
-  font-family: var(--font-body, inherit);
+  font-family: var(--font-body);
   cursor: pointer;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   border: none;
   background: none;
   border-bottom: 2px solid transparent;
@@ -215,12 +215,12 @@
 }
 
 .tab:hover {
-  color: var(--text-secondary, #5C5347);
+  color: var(--text-secondary);
 }
 
 .tabActive {
-  color: var(--amber, #C6820E);
-  border-bottom: 2px solid var(--amber, #C6820E);
+  color: var(--amber);
+  border-bottom: 2px solid var(--amber);
   font-weight: 600;
 }
 
@@ -230,15 +230,15 @@
 }
 
 .tabDisabled:hover {
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
 }
 
 .tabError {
-  color: var(--error, #C0392B);
+  color: var(--error);
 }
 
 .tabError:hover {
-  color: var(--error, #C0392B);
+  color: var(--error);
 }
 
 /* ==========================================================================
@@ -262,7 +262,7 @@
 
 .fieldLabel {
   font-size: 12px;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 2px;
@@ -270,14 +270,14 @@
 
 .fieldValue {
   font-size: 12px;
-  color: var(--text-primary, #1A1612);
+  color: var(--text-primary);
   word-break: break-all;
 }
 
 .fieldValueMono {
   font-size: 12px;
-  color: var(--text-primary, #1A1612);
-  font-family: var(--font-mono, monospace);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
   word-break: break-all;
 }
 
@@ -287,12 +287,12 @@
 .attributesSection {
   margin-top: 14px;
   padding-top: 10px;
-  border-top: 1px solid var(--border, #E4DFD8);
+  border-top: 1px solid var(--border);
 }
 
 .attributesLabel {
   font-size: 12px;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 6px;
@@ -307,10 +307,10 @@
 .attributePill {
   font-size: 12px;
   padding: 2px 8px;
-  background: var(--bg-hover, #F5F0EA);
+  background: var(--bg-hover);
   border-radius: 10px;
-  color: var(--text-secondary, #5C5347);
-  font-family: var(--font-mono, monospace);
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
 }
 
 /* ==========================================================================
@@ -330,7 +330,7 @@
 }
 
 .headersColumn + .headersColumn {
-  border-left: 1px solid var(--border, #E4DFD8);
+  border-left: 1px solid var(--border);
   padding-left: 14px;
   margin-left: 14px;
 }
@@ -338,7 +338,7 @@
 .headersColumnLabel {
   font-size: 12px;
   font-weight: 600;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 6px;
@@ -352,7 +352,7 @@
 
 .headersTable td {
   padding: 3px 0;
-  border-bottom: 1px solid var(--border, #E4DFD8);
+  border-bottom: 1px solid var(--border);
   vertical-align: top;
 }
 
@@ -361,9 +361,9 @@
 }
 
 .headerKey {
-  font-family: var(--font-mono, monospace);
+  font-family: var(--font-mono);
   font-weight: 600;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   white-space: nowrap;
   padding-right: 12px;
   width: 140px;
@@ -373,8 +373,8 @@
 }
 
 .headerVal {
-  font-family: var(--font-mono, monospace);
-  color: var(--text-primary, #1A1612);
+  font-family: var(--font-mono);
+  color: var(--text-primary);
   word-break: break-all;
 }
 
@@ -391,39 +391,41 @@
 .codeFormat {
   font-size: 12px;
   font-weight: 600;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
 .codeSize {
   font-size: 12px;
-  color: var(--text-muted, #9C9184);
-  font-family: var(--font-mono, monospace);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
 }
 
 .codeCopyBtn {
   margin-left: auto;
   font-size: 12px;
-  font-family: var(--font-body, inherit);
+  font-family: var(--font-body);
   padding: 2px 8px;
-  border: 1px solid var(--border, #E4DFD8);
+  border: 1px solid var(--border);
   border-radius: 4px;
-  background: var(--bg-surface, #FFFFFF);
-  color: var(--text-secondary, #5C5347);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
   cursor: pointer;
 }
 
 .codeCopyBtn:hover {
-  background: var(--bg-hover, #F5F0EA);
+  background: var(--bg-hover);
 }
 
 .codeBlock {
-  background: #1A1612;
-  color: #E4DFD8;
+  --code-bg: var(--bg-inset);
+  --code-fg: var(--text-primary);
+  background: var(--code-bg);
+  color: var(--code-fg);
   padding: 12px;
   border-radius: 6px;
-  font-family: var(--font-mono, monospace);
+  font-family: var(--font-mono);
   font-size: 12px;
   line-height: 1.5;
   overflow-x: auto;
@@ -439,15 +441,15 @@
 .errorType {
   font-size: 13px;
   font-weight: 600;
-  color: var(--error, #C0392B);
+  color: var(--error);
   margin-bottom: 8px;
 }
 
 .errorMessage {
   font-size: 12px;
-  color: var(--text-primary, #1A1612);
-  background: #FDF2F0;
-  border: 1px solid #F5D5D0;
+  color: var(--text-primary);
+  background: var(--error-bg);
+  border: 1px solid var(--error-border);
   border-radius: 6px;
   padding: 10px 12px;
   margin-bottom: 12px;
@@ -456,11 +458,13 @@
 }
 
 .errorStackTrace {
-  background: #1A1612;
-  color: #E4DFD8;
+  --code-bg: var(--bg-inset);
+  --code-fg: var(--text-primary);
+  background: var(--code-bg);
+  color: var(--code-fg);
   padding: 12px;
   border-radius: 6px;
-  font-family: var(--font-mono, monospace);
+  font-family: var(--font-mono);
   font-size: 12px;
   line-height: 1.5;
   overflow-x: auto;
@@ -477,7 +481,7 @@
 .errorStackLabel {
   font-size: 12px;
   font-weight: 600;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 6px;
@@ -505,22 +509,22 @@
 }
 
 .ganttRow:hover {
-  background: var(--bg-hover, #F5F0EA);
+  background: var(--bg-hover);
 }
 
 .ganttSelected {
-  background: #FFF8F0;
+  background: var(--amber-bg);
 }
 
 .ganttSelected:hover {
-  background: #FFF8F0;
+  background: var(--amber-bg);
 }
 
 .ganttLabel {
   width: 100px;
   min-width: 100px;
   font-size: 12px;
-  color: var(--text-secondary, #5C5347);
+  color: var(--text-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -529,7 +533,7 @@
 .ganttBar {
   flex: 1;
   height: 16px;
-  background: var(--bg-hover, #F5F0EA);
+  background: var(--bg-hover);
   border-radius: 2px;
   position: relative;
   min-width: 0;
@@ -543,19 +547,19 @@
 }
 
 .ganttFillCompleted {
-  background: var(--success, #3D7C47);
+  background: var(--success);
 }
 
 .ganttFillFailed {
-  background: var(--error, #C0392B);
+  background: var(--error);
 }
 
 .ganttDuration {
   width: 50px;
   min-width: 50px;
   font-size: 12px;
-  font-family: var(--font-mono, monospace);
-  color: var(--text-muted, #9C9184);
+  font-family: var(--font-mono);
+  color: var(--text-muted);
   text-align: right;
 }
 
@@ -564,7 +568,7 @@
    ========================================================================== */
 .emptyState {
   text-align: center;
-  color: var(--text-muted, #9C9184);
+  color: var(--text-muted);
   font-size: 12px;
   padding: 20px;
 }