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/pages/Admin/OidcConfigPage.tsx

@@ -5,6 +5,7 @@ import {
 import { useToast } from '@cameleer/design-system';
 import { adminFetch } from '../../api/queries/admin/admin-api';
 import styles from './OidcConfigPage.module.css';
+import sectionStyles from '../../styles/section-card.module.css';
 
 interface OidcFormData {
   enabled: boolean;
@@ -137,7 +138,7 @@ export default function OidcConfigPage() {
 
       {error && <div style={{ marginBottom: 16 }}><Alert variant="error">{error}</Alert></div>}
 
-      <section className={styles.section}>
+      <section className={sectionStyles.section}>
         <SectionHeader>Behavior</SectionHeader>
         <div className={styles.toggleRow}>
           <Toggle
@@ -156,7 +157,7 @@ export default function OidcConfigPage() {
         </div>
       </section>
 
-      <section className={styles.section}>
+      <section className={sectionStyles.section}>
         <SectionHeader>Provider Settings</SectionHeader>
         <FormField label="Issuer URI" htmlFor="issuer">
           <Input
@@ -200,7 +201,7 @@ export default function OidcConfigPage() {
         </FormField>
       </section>
 
-      <section className={styles.section}>
+      <section className={sectionStyles.section}>
         <SectionHeader>Claim Mapping</SectionHeader>
         <FormField label="Roles Claim" htmlFor="roles-claim" hint="JSON path to roles in the access token or ID token">
           <Input
@@ -225,7 +226,7 @@ export default function OidcConfigPage() {
         </FormField>
       </section>
 
-      <section className={styles.section}>
+      <section className={sectionStyles.section}>
         <SectionHeader>Default Roles</SectionHeader>
         <div className={styles.tagList}>
           {(form.defaultRoles || []).map((role) => (
@@ -249,7 +250,7 @@ export default function OidcConfigPage() {
         </div>
       </section>
 
-      <section className={styles.section}>
+      <section className={sectionStyles.section}>
         <SectionHeader>Danger Zone</SectionHeader>
         <Button size="sm" variant="danger" onClick={() => setDeleteOpen(true)}>
           Delete OIDC Configuration