/* ============================================================ MIX Console — clinical operations console Light/dark theme via data-theme attribute on . Default: light. Toggle saved in mix_theme cookie. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); :root { /* Surface */ --bg-body: #f4f6f9; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-card-alt: #f8f9fb; --bg-input: #ffffff; --bg-hover: #f0f2f5; --bg-selected: #e8f0fe; /* Borders */ --border: #dce1e8; --border-light: #e8ecf1; /* Text */ --text-primary: #1a1d23; --text-secondary:#4a5568; --text-muted: #718096; --text-bright: #0f1419; /* Accent */ --accent: #2563eb; --accent-dim: #1d4ed8; --accent-bg: rgba(37,99,235,0.08); --accent-hover: #1d4ed8; /* Status */ --green: #16a34a; --green-bg: rgba(22,163,74,0.08); --green-text: #15803d; --green-glow: rgba(22,163,74,0.30); --red: #dc2626; --red-bg: rgba(220,38,38,0.08); --red-text: #b91c1c; --amber: #d97706; --amber-bg: rgba(217,119,6,0.08); --amber-text: #92400e; --amber-glow: rgba(217,119,6,0.30); --cyan: #0891b2; --cyan-bg: rgba(8,145,178,0.08); --cyan-text: #0e7490; --purple: #7c3aed; --purple-bg: rgba(124,58,237,0.08); /* Misc */ --inactive-bg: rgba(113,128,150,0.12); --focus-ring: rgba(37,99,235,0.20); --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); /* Layout */ --sidebar-w: 220px; --topbar-h: 40px; --radius: 6px; --radius-sm: 4px; /* Type */ --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; /* Syntax tokens (HL7/ASTM viewer). Light defaults; dark themes override. */ --tok-segment: #2563eb; --tok-sep-field: #94a3b8; --tok-sep-sub: #cbd5e1; --tok-num: #c2410c; --tok-time: #0f766e; --tok-encode: #7c3aed; } body[data-theme="dark"] { --bg-body: #0e1117; --bg-sidebar: #131720; --bg-card: #181d27; --bg-card-alt: #1c2233; --bg-input: #141822; --bg-hover: #1e2536; --bg-selected: #1a2744; --border: #252d3d; --border-light: #1e2636; --text-primary: #e1e4ea; --text-secondary:#8891a4; --text-muted: #5c6478; --text-bright: #f4f5f7; --accent: #3b82f6; --accent-dim: #2563eb; --accent-bg: rgba(59,130,246,0.12); --accent-hover: #60a5fa; --green: #22c55e; --green-bg: rgba(34,197,94,0.12); --green-text: #4ade80; --green-glow: rgba(34,197,94,0.40); --red: #ef4444; --red-bg: rgba(239,68,68,0.10); --red-text: #f87171; --amber: #f59e0b; --amber-bg: rgba(245,158,11,0.12); --amber-text: #fbbf24; --amber-glow: rgba(245,158,11,0.40); --cyan: #06b6d4; --cyan-bg: rgba(6,182,212,0.10); --cyan-text: #22d3ee; --purple: #a855f7; --purple-bg: rgba(168,85,247,0.10); --inactive-bg: rgba(92,100,120,0.20); --focus-ring: rgba(59,130,246,0.15); --shadow-card: 0 1px 3px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.15); } /* ----- Predefined themes (CSS-vars only — layout untouched) ----- */ /* Midnight: deep blue/purple dark */ body[data-theme="midnight"] { --bg-body:#0a0b1e; --bg-sidebar:#10122b; --bg-card:#161938; --bg-card-alt:#1c2046; --bg-input:#11142d; --bg-hover:#1f2350; --bg-selected:#2a2f6b; --border:#2a2f5c; --border-light:#1d2147; --text-primary:#e6e8ff; --text-secondary:#9398cc; --text-muted:#6b6f9c; --text-bright:#ffffff; --accent:#8b5cf6; --accent-dim:#7c3aed; --accent-bg:rgba(139,92,246,0.14); --accent-hover:#a78bfa; --green:#34d399; --green-bg:rgba(52,211,153,0.12); --green-text:#6ee7b7; --green-glow:rgba(52,211,153,0.40); --red:#f87171; --red-bg:rgba(248,113,113,0.12); --red-text:#fca5a5; --amber:#fbbf24; --amber-bg:rgba(251,191,36,0.12); --amber-text:#fcd34d; --amber-glow:rgba(251,191,36,0.40); --cyan:#22d3ee; --cyan-bg:rgba(34,211,238,0.12); --cyan-text:#67e8f9; --purple:#c084fc; --purple-bg:rgba(192,132,252,0.12); --inactive-bg:rgba(120,127,180,0.20); --focus-ring:rgba(139,92,246,0.25); --shadow-card:0 2px 8px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20); --radius:8px; --radius-sm:5px; } /* Forest: green dark */ body[data-theme="forest"] { --bg-body:#0d1411; --bg-sidebar:#121a16; --bg-card:#16201b; --bg-card-alt:#1b271f; --bg-input:#131c17; --bg-hover:#1d2a22; --bg-selected:#1e3a2a; --border:#243329; --border-light:#1b271f; --text-primary:#dde7df; --text-secondary:#8da594; --text-muted:#5e7368; --text-bright:#f0f7f1; --accent:#10b981; --accent-dim:#059669; --accent-bg:rgba(16,185,129,0.12); --accent-hover:#34d399; --green:#22c55e; --green-bg:rgba(34,197,94,0.12); --green-text:#4ade80; --green-glow:rgba(34,197,94,0.40); --red:#ef4444; --red-bg:rgba(239,68,68,0.10); --red-text:#f87171; --amber:#eab308; --amber-bg:rgba(234,179,8,0.12); --amber-text:#facc15; --amber-glow:rgba(234,179,8,0.40); --cyan:#14b8a6; --cyan-bg:rgba(20,184,166,0.10); --cyan-text:#5eead4; --purple:#a855f7; --purple-bg:rgba(168,85,247,0.10); --inactive-bg:rgba(94,115,104,0.20); --focus-ring:rgba(16,185,129,0.20); --shadow-card:0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15); --radius:4px; --radius-sm:3px; } /* Sunset: warm light */ body[data-theme="sunset"] { --bg-body:#fff5ed; --bg-sidebar:#ffffff; --bg-card:#ffffff; --bg-card-alt:#fff1e2; --bg-input:#ffffff; --bg-hover:#ffe7d0; --bg-selected:#ffd8b0; --border:#f0d4b8; --border-light:#f7e3cf; --text-primary:#3a1f0f; --text-secondary:#6b4327; --text-muted:#9a7556; --text-bright:#1f0f05; --accent:#ea580c; --accent-dim:#c2410c; --accent-bg:rgba(234,88,12,0.10); --accent-hover:#c2410c; --green:#16a34a; --green-bg:rgba(22,163,74,0.10); --green-text:#15803d; --green-glow:rgba(22,163,74,0.30); --red:#dc2626; --red-bg:rgba(220,38,38,0.10); --red-text:#b91c1c; --amber:#d97706; --amber-bg:rgba(217,119,6,0.10); --amber-text:#92400e; --amber-glow:rgba(217,119,6,0.30); --cyan:#0891b2; --cyan-bg:rgba(8,145,178,0.10); --cyan-text:#0e7490; --purple:#9333ea; --purple-bg:rgba(147,51,234,0.10); --inactive-bg:rgba(154,117,86,0.14); --focus-ring:rgba(234,88,12,0.22); --shadow-card:0 1px 3px rgba(180,80,20,0.10), 0 1px 2px rgba(180,80,20,0.06); --radius:10px; --radius-sm:6px; } /* Rose: pink/burgundy light */ body[data-theme="rose"] { --bg-body:#fdf2f4; --bg-sidebar:#ffffff; --bg-card:#ffffff; --bg-card-alt:#fce7eb; --bg-input:#ffffff; --bg-hover:#fad4dc; --bg-selected:#f9c5d1; --border:#f0c2cc; --border-light:#f7d8df; --text-primary:#3f1322; --text-secondary:#6b3144; --text-muted:#955f72; --text-bright:#220611; --accent:#e11d48; --accent-dim:#be123c; --accent-bg:rgba(225,29,72,0.10); --accent-hover:#be123c; --green:#16a34a; --green-bg:rgba(22,163,74,0.10); --green-text:#15803d; --green-glow:rgba(22,163,74,0.30); --red:#dc2626; --red-bg:rgba(220,38,38,0.10); --red-text:#b91c1c; --amber:#d97706; --amber-bg:rgba(217,119,6,0.10); --amber-text:#92400e; --amber-glow:rgba(217,119,6,0.30); --cyan:#0891b2; --cyan-bg:rgba(8,145,178,0.10); --cyan-text:#0e7490; --purple:#9333ea; --purple-bg:rgba(147,51,234,0.10); --inactive-bg:rgba(149,95,114,0.14); --focus-ring:rgba(225,29,72,0.20); --shadow-card:0 1px 3px rgba(120,20,40,0.08), 0 1px 2px rgba(120,20,40,0.05); --radius:8px; --radius-sm:5px; } /* Ocean: teal/blue light */ body[data-theme="ocean"] { --bg-body:#eff8fb; --bg-sidebar:#ffffff; --bg-card:#ffffff; --bg-card-alt:#e0f1f6; --bg-input:#ffffff; --bg-hover:#cee7ee; --bg-selected:#b8dde6; --border:#bbd5dc; --border-light:#d3e6eb; --text-primary:#0d2530; --text-secondary:#345565; --text-muted:#5d7e8c; --text-bright:#06151c; --accent:#0e7490; --accent-dim:#155e75; --accent-bg:rgba(14,116,144,0.10); --accent-hover:#155e75; --green:#16a34a; --green-bg:rgba(22,163,74,0.10); --green-text:#15803d; --green-glow:rgba(22,163,74,0.30); --red:#dc2626; --red-bg:rgba(220,38,38,0.10); --red-text:#b91c1c; --amber:#d97706; --amber-bg:rgba(217,119,6,0.10); --amber-text:#92400e; --amber-glow:rgba(217,119,6,0.30); --cyan:#0891b2; --cyan-bg:rgba(8,145,178,0.10); --cyan-text:#0e7490; --purple:#7c3aed; --purple-bg:rgba(124,58,237,0.10); --inactive-bg:rgba(93,126,140,0.14); --focus-ring:rgba(14,116,144,0.20); --shadow-card:0 1px 3px rgba(10,80,100,0.08), 0 1px 2px rgba(10,80,100,0.05); --radius:6px; --radius-sm:4px; } /* Slate: cool neutral light */ body[data-theme="slate"] { --bg-body:#f1f5f9; --bg-sidebar:#ffffff; --bg-card:#ffffff; --bg-card-alt:#e2e8f0; --bg-input:#ffffff; --bg-hover:#dbe3ec; --bg-selected:#cbd5e1; --border:#cbd5e1; --border-light:#e2e8f0; --text-primary:#0f172a; --text-secondary:#334155; --text-muted:#64748b; --text-bright:#020617; --accent:#475569; --accent-dim:#334155; --accent-bg:rgba(71,85,105,0.10); --accent-hover:#334155; --green:#16a34a; --green-bg:rgba(22,163,74,0.10); --green-text:#15803d; --green-glow:rgba(22,163,74,0.30); --red:#dc2626; --red-bg:rgba(220,38,38,0.10); --red-text:#b91c1c; --amber:#d97706; --amber-bg:rgba(217,119,6,0.10); --amber-text:#92400e; --amber-glow:rgba(217,119,6,0.30); --cyan:#0891b2; --cyan-bg:rgba(8,145,178,0.10); --cyan-text:#0e7490; --purple:#7c3aed; --purple-bg:rgba(124,58,237,0.10); --inactive-bg:rgba(100,116,139,0.14); --focus-ring:rgba(71,85,105,0.22); --shadow-card:0 1px 2px rgba(15,23,42,0.06); --radius:2px; --radius-sm:2px; } /* Amber: warm gold dark */ body[data-theme="amber"] { --bg-body:#1a1408; --bg-sidebar:#231a0d; --bg-card:#2a2010; --bg-card-alt:#322615; --bg-input:#1f1709; --bg-hover:#3a2c18; --bg-selected:#4a3820; --border:#3a2c18; --border-light:#2d2212; --text-primary:#f5e6c8; --text-secondary:#c4a673; --text-muted:#8a7449; --text-bright:#fff8e7; --accent:#f59e0b; --accent-dim:#d97706; --accent-bg:rgba(245,158,11,0.14); --accent-hover:#fbbf24; --green:#84cc16; --green-bg:rgba(132,204,22,0.12); --green-text:#a3e635; --green-glow:rgba(132,204,22,0.40); --red:#f87171; --red-bg:rgba(248,113,113,0.12); --red-text:#fca5a5; --amber:#fbbf24; --amber-bg:rgba(251,191,36,0.14); --amber-text:#fcd34d; --amber-glow:rgba(251,191,36,0.40); --cyan:#22d3ee; --cyan-bg:rgba(34,211,238,0.10); --cyan-text:#67e8f9; --purple:#c084fc; --purple-bg:rgba(192,132,252,0.10); --inactive-bg:rgba(138,116,73,0.20); --focus-ring:rgba(245,158,11,0.25); --shadow-card:0 2px 6px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.20); --radius:6px; --radius-sm:4px; } /* Violet: purple light */ body[data-theme="violet"] { --bg-body:#f5f3ff; --bg-sidebar:#ffffff; --bg-card:#ffffff; --bg-card-alt:#ede9fe; --bg-input:#ffffff; --bg-hover:#ddd6fe; --bg-selected:#c4b5fd; --border:#c4b5fd; --border-light:#ddd6fe; --text-primary:#1e1b4b; --text-secondary:#3730a3; --text-muted:#6b6293; --text-bright:#0f0a3e; --accent:#7c3aed; --accent-dim:#6d28d9; --accent-bg:rgba(124,58,237,0.10); --accent-hover:#6d28d9; --green:#16a34a; --green-bg:rgba(22,163,74,0.10); --green-text:#15803d; --green-glow:rgba(22,163,74,0.30); --red:#dc2626; --red-bg:rgba(220,38,38,0.10); --red-text:#b91c1c; --amber:#d97706; --amber-bg:rgba(217,119,6,0.10); --amber-text:#92400e; --amber-glow:rgba(217,119,6,0.30); --cyan:#0891b2; --cyan-bg:rgba(8,145,178,0.10); --cyan-text:#0e7490; --purple:#7c3aed; --purple-bg:rgba(124,58,237,0.10); --inactive-bg:rgba(107,98,147,0.14); --focus-ring:rgba(124,58,237,0.22); --shadow-card:0 2px 8px rgba(80,40,180,0.10), 0 1px 2px rgba(80,40,180,0.06); --radius:12px; --radius-sm:8px; } /* Mono: pure neutral grayscale light */ body[data-theme="mono"] { --bg-body:#fafafa; --bg-sidebar:#ffffff; --bg-card:#ffffff; --bg-card-alt:#f4f4f5; --bg-input:#ffffff; --bg-hover:#e4e4e7; --bg-selected:#d4d4d8; --border:#d4d4d8; --border-light:#e4e4e7; --text-primary:#09090b; --text-secondary:#3f3f46; --text-muted:#71717a; --text-bright:#000000; --accent:#18181b; --accent-dim:#09090b; --accent-bg:rgba(24,24,27,0.08); --accent-hover:#000000; --green:#3f6212; --green-bg:rgba(63,98,18,0.10); --green-text:#365314; --green-glow:rgba(63,98,18,0.20); --red:#991b1b; --red-bg:rgba(153,27,27,0.10); --red-text:#7f1d1d; --amber:#854d0e; --amber-bg:rgba(133,77,14,0.10); --amber-text:#713f12; --amber-glow:rgba(133,77,14,0.20); --cyan:#155e75; --cyan-bg:rgba(21,94,117,0.10); --cyan-text:#164e63; --purple:#581c87; --purple-bg:rgba(88,28,135,0.10); --inactive-bg:rgba(113,113,122,0.14); --focus-ring:rgba(24,24,27,0.18); --shadow-card:0 1px 2px rgba(0,0,0,0.06); --radius:0px; --radius-sm:0px; } /* Nord: cool nordic blue-gray light */ body[data-theme="nord"] { --bg-body:#eceff4; --bg-sidebar:#ffffff; --bg-card:#ffffff; --bg-card-alt:#e5e9f0; --bg-input:#ffffff; --bg-hover:#d8dee9; --bg-selected:#c5d0e0; --border:#c9d1de; --border-light:#d8dee9; --text-primary:#2e3440; --text-secondary:#434c5e; --text-muted:#5e6779; --text-bright:#1c2128; --accent:#5e81ac; --accent-dim:#4c6a8e; --accent-bg:rgba(94,129,172,0.10); --accent-hover:#4c6a8e; --green:#a3be8c; --green-bg:rgba(163,190,140,0.14); --green-text:#5d7445; --green-glow:rgba(163,190,140,0.30); --red:#bf616a; --red-bg:rgba(191,97,106,0.10); --red-text:#9b3d46; --amber:#d08770; --amber-bg:rgba(208,135,112,0.12); --amber-text:#a05a44; --amber-glow:rgba(208,135,112,0.30); --cyan:#88c0d0; --cyan-bg:rgba(136,192,208,0.14); --cyan-text:#5b8c9e; --purple:#b48ead; --purple-bg:rgba(180,142,173,0.12); --inactive-bg:rgba(94,103,121,0.14); --focus-ring:rgba(94,129,172,0.20); --shadow-card:0 1px 2px rgba(46,52,64,0.06); --radius:4px; --radius-sm:3px; } /* Mocha: warm brown coffee dark */ body[data-theme="mocha"] { --bg-body:#1a120c; --bg-sidebar:#221710; --bg-card:#2a1d14; --bg-card-alt:#322318; --bg-input:#1f160f; --bg-hover:#3a2a1e; --bg-selected:#4a3424; --border:#3a2a1e; --border-light:#2d2016; --text-primary:#e8d8c8; --text-secondary:#b59a82; --text-muted:#7d6a58; --text-bright:#f4e8d8; --accent:#d2691e; --accent-dim:#a0501a; --accent-bg:rgba(210,105,30,0.14); --accent-hover:#e07b30; --green:#a3a847; --green-bg:rgba(163,168,71,0.12); --green-text:#bcc262; --green-glow:rgba(163,168,71,0.40); --red:#c94a4a; --red-bg:rgba(201,74,74,0.12); --red-text:#dc6868; --amber:#daa520; --amber-bg:rgba(218,165,32,0.14); --amber-text:#e8b837; --amber-glow:rgba(218,165,32,0.40); --cyan:#5fa8ad; --cyan-bg:rgba(95,168,173,0.10); --cyan-text:#7cc0c5; --purple:#a87bc8; --purple-bg:rgba(168,123,200,0.10); --inactive-bg:rgba(125,106,88,0.20); --focus-ring:rgba(210,105,30,0.25); --shadow-card:0 2px 6px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.20); --radius:6px; --radius-sm:4px; } /* Solar: high-contrast yellow accent dark */ body[data-theme="solar"] { --bg-body:#0d0e10; --bg-sidebar:#131418; --bg-card:#1a1c20; --bg-card-alt:#1f2127; --bg-input:#15161a; --bg-hover:#23262d; --bg-selected:#2c303a; --border:#262a32; --border-light:#1c1f25; --text-primary:#e6e6e6; --text-secondary:#a0a0a8; --text-muted:#6e7280; --text-bright:#fafafa; --accent:#facc15; --accent-dim:#eab308; --accent-bg:rgba(250,204,21,0.12); --accent-hover:#fde047; --green:#4ade80; --green-bg:rgba(74,222,128,0.12); --green-text:#86efac; --green-glow:rgba(74,222,128,0.40); --red:#f87171; --red-bg:rgba(248,113,113,0.12); --red-text:#fca5a5; --amber:#fb923c; --amber-bg:rgba(251,146,60,0.12); --amber-text:#fdba74; --amber-glow:rgba(251,146,60,0.40); --cyan:#22d3ee; --cyan-bg:rgba(34,211,238,0.10); --cyan-text:#67e8f9; --purple:#c084fc; --purple-bg:rgba(192,132,252,0.10); --inactive-bg:rgba(110,114,128,0.20); --focus-ring:rgba(250,204,21,0.25); --shadow-card:0 2px 8px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.20); --radius:2px; --radius-sm:2px; } /* Terminal: phosphor green dark */ body[data-theme="terminal"] { --bg-body:#000000; --bg-sidebar:#050a05; --bg-card:#0a120a; --bg-card-alt:#0d180d; --bg-input:#020602; --bg-hover:#122012; --bg-selected:#1a2e1a; --border:#1a2e1a; --border-light:#0d180d; --text-primary:#a3e635; --text-secondary:#65a30d; --text-muted:#3f6212; --text-bright:#d9f99d; --accent:#22c55e; --accent-dim:#16a34a; --accent-bg:rgba(34,197,94,0.14); --accent-hover:#4ade80; --green:#4ade80; --green-bg:rgba(74,222,128,0.12); --green-text:#86efac; --green-glow:rgba(74,222,128,0.50); --red:#f87171; --red-bg:rgba(248,113,113,0.12); --red-text:#fca5a5; --amber:#facc15; --amber-bg:rgba(250,204,21,0.12); --amber-text:#fde047; --amber-glow:rgba(250,204,21,0.40); --cyan:#22d3ee; --cyan-bg:rgba(34,211,238,0.10); --cyan-text:#67e8f9; --purple:#c084fc; --purple-bg:rgba(192,132,252,0.10); --inactive-bg:rgba(63,98,18,0.25); --focus-ring:rgba(34,197,94,0.30); --shadow-card:0 0 12px rgba(34,197,94,0.10); --radius:0px; --radius-sm:0px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 13px; zoom: 1.1; } /* ----- Layout modes (density / zoom) ----- */ /* Defaults match `comfortable` (above). Each mode tweaks zoom, font-size, sidebar width and topbar height. Component padding scales naturally because everything is rem-based or proportional to font-size. */ html[data-layout="compact"] { font-size: 12px; zoom: 1.00; } html[data-layout="comfortable"]{ font-size: 13px; zoom: 1.10; } html[data-layout="spacious"] { font-size: 14px; zoom: 1.18; } html[data-layout="cinema"] { font-size: 15px; zoom: 1.30; } html[data-layout="compact"] body { --sidebar-w: 184px; --topbar-h: 34px; --ds-pad-content: 14px; --ds-pad-card: 12px; --ds-gap: 12px; --ds-nav-pad-y: 6px; --ds-nav-pad-x: 12px; --ds-rail-w: 188px; --ds-topbar-pad-y: 8px; --ds-topbar-pad-x: 16px; --ds-content-max: 1100px; } html[data-layout="comfortable"] body { --sidebar-w: 220px; --topbar-h: 40px; --ds-pad-content: 24px; --ds-pad-card: 16px; --ds-gap: 18px; --ds-nav-pad-y: 10px; --ds-nav-pad-x: 16px; --ds-rail-w: 220px; --ds-topbar-pad-y: 12px; --ds-topbar-pad-x: 24px; --ds-content-max: 1240px; } html[data-layout="spacious"] body { --sidebar-w: 244px; --topbar-h: 48px; --ds-pad-content: 32px; --ds-pad-card: 20px; --ds-gap: 22px; --ds-nav-pad-y: 12px; --ds-nav-pad-x: 18px; --ds-rail-w: 244px; --ds-topbar-pad-y: 14px; --ds-topbar-pad-x: 28px; --ds-content-max: 1320px; } html[data-layout="cinema"] body { --sidebar-w: 268px; --topbar-h: 56px; --ds-pad-content: 44px; --ds-pad-card: 24px; --ds-gap: 28px; --ds-nav-pad-y: 14px; --ds-nav-pad-x: 22px; --ds-rail-w: 268px; --ds-topbar-pad-y: 18px; --ds-topbar-pad-x: 36px; --ds-content-max: 1480px; } body { font-family: var(--font-sans); background: var(--bg-body); color: var(--text-primary); line-height: 1.5; min-height: 100vh; display: flex; overflow-x: hidden; } body.login-body { margin: 0; display: block; background: radial-gradient(circle at top, color-mix(in srgb, var(--accent-bg) 70%, transparent) 0%, transparent 45%), var(--bg-body); } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } /* ---- Sidebar ---- */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 100; } .sidebar-brand { padding: 16px 16px 12px; border-bottom: 1px solid var(--border); } .sidebar-brand h1 { font-size: 14px; font-weight: 700; color: var(--text-bright); letter-spacing: -0.02em; line-height: 1.2; } .sidebar-brand .subtitle { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; } .sidebar-nav { flex: 1; padding: 8px 8px; display: flex; flex-direction: column; gap: 2px; } .sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); color: var(--text-secondary); font-size: 13px; font-weight: 500; transition: all 120ms ease; } .sidebar-nav a:hover { background: var(--bg-hover); color: var(--text-primary); } .sidebar-nav a.active { background: var(--accent-bg); color: var(--accent); } .sidebar-nav .nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .sidebar-nav a.active .nav-icon { opacity: 1; } .sidebar-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); padding: 16px 10px 4px; } .sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); } /* ---- Main content ---- */ .main { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; display: flex; flex-direction: column; } .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-panel { width: min(420px, 100%); background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); padding: 24px; } .login-brand { margin-bottom: 18px; } .login-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .login-brand h1 { font-size: 22px; line-height: 1.1; color: var(--text-bright); margin-bottom: 8px; } .login-brand p { font-size: 13px; color: var(--text-secondary); } .login-form { display: flex; flex-direction: column; gap: 12px; } .login-submit { width: 100%; justify-content: center; } .login-footer { margin-top: 16px; font-size: 12px; color: var(--text-muted); } .handler-form .detail-grid dd input, .handler-form .detail-grid dd select, .handler-form .detail-grid dd textarea { width: 100%; box-sizing: border-box; } .handler-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; } .handler-save-status { font-size: 12px; color: var(--text-muted); } .handler-save-status.ok { color: var(--green); } .handler-save-status.error { color: var(--red, #d33); } .settings-card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .settings-copy { margin: 0; } /* Top status bar */ .topbar { height: var(--topbar-h); background: var(--bg-sidebar); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; gap: 16px; font-size: 11px; color: var(--text-muted); flex-shrink: 0; } .topbar-mobile-shell, .mobile-console-brand { display: none; } .topbar-status { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1; flex-wrap: wrap; } .topbar .indicator { display: inline-flex; align-items: center; gap: 6px; } .topbar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green-glow); } .topbar .dot.inactive { background: var(--text-muted); box-shadow: none; } .topbar .dot.warning { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); } .topbar-sep { width: 1px; height: 16px; background: var(--border); } .topbar-spacer { flex: 1 1 auto; min-width: 0; } .topbar-icon-btn { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--text-muted); border: 1px solid transparent; background: transparent; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .topbar-icon-btn:hover { color: var(--text); background: var(--bg-card); border-color: var(--border); } .topbar-icon-btn.active { color: var(--text); background: var(--bg-card); border-color: var(--border); } .theme-switcher { display: inline-flex; align-items: center; gap: 4px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); } .theme-btn { border: 0; background: transparent; color: var(--text-secondary); padding: 3px 10px; border-radius: 999px; font-size: 11px; font-family: var(--font-sans); cursor: pointer; } .theme-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .theme-btn.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; } /* ---- Page content ---- */ .content { flex: 1; padding: 20px; max-width: 1400px; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .page-header h2 { font-size: 16px; font-weight: 700; color: var(--text-bright); } .page-header .count { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: 8px; } /* ---- Cards ---- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; box-shadow: var(--shadow-card); } .card-header { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; } .card-body { padding: 14px; } .card-body.flush { padding: 0; } /* ---- Stat boxes ---- */ .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-card); } .stat-card .stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 4px; } .stat-card .stat-value { font-size: 24px; font-weight: 700; color: var(--text-bright); font-family: var(--font-mono); line-height: 1.1; } .stat-card .stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* ---- Tables ---- */ .data-table { width: 100%; border-collapse: collapse; font-size: 12px; } .data-table th { text-align: left; padding: 8px 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); background: var(--bg-card-alt); border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; } .data-table td { padding: 7px 12px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); vertical-align: middle; } .data-table tr:hover td { background: var(--bg-hover); } .data-table tr:last-child td { border-bottom: none; } .data-table .mono { font-family: var(--font-mono); font-size: 11px; } .data-table .truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Badges ---- */ .badge { display: inline-block; padding: 2px 7px; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .badge-protocol { background: var(--cyan-bg); color: var(--cyan-text); } .badge-astm { background: var(--purple-bg); color: var(--purple); } .badge-hl7 { background: var(--cyan-bg); color: var(--cyan-text); } .badge-dicom { background: var(--amber-bg); color: var(--amber-text); } .badge-active { background: var(--green-bg); color: var(--green-text); } .badge-received { background: var(--accent-bg); color: var(--accent); } .badge-error { background: var(--red-bg); color: var(--red-text); } .badge-invalid { background: var(--amber-bg); color: var(--amber-text); border: 1px dashed color-mix(in srgb, var(--amber) 55%, transparent); } .badge-invalid[title] { cursor: help; } .badge-denied { background: var(--red-bg); color: var(--red-text); border: 1px dashed color-mix(in srgb, var(--red, #dc2626) 55%, transparent); letter-spacing: 0.04em; } .badge-result { background: var(--green-bg); color: var(--green-text); } .badge-observation_request { background: var(--amber-bg); color: var(--amber-text); } .badge-unknown { background: var(--inactive-bg); color: var(--text-muted); } .badge-inactive { background: var(--inactive-bg); color: var(--text-muted); } .badge-pending { background: var(--amber-bg); color: var(--amber-text); } /* Presence badges (new + backward-compatible aliases) */ .badge-active, .badge-online { background: var(--green-bg); color: var(--green-text); } .badge-awaiting, .badge-stale { background: color-mix(in srgb, var(--amber-bg) 70%, var(--amber) 30%); color: var(--amber-text); } .badge-inactive, .badge-offline { background: var(--inactive-bg); color: var(--text-muted); } /* Presence dot indicator (small inline circle) */ .presence-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: middle; } .badge[data-presence] { vertical-align: middle; } /* Presence dots (new + backward-compatible aliases) */ .presence-dot.active, .presence-dot.online { background: var(--green); box-shadow: 0 0 4px var(--green-glow); } .presence-dot.awaiting, .presence-dot.stale { background: var(--amber); box-shadow: 0 0 4px var(--amber-glow); } .presence-dot.inactive, .presence-dot.offline { background: var(--text-muted); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 120ms ease; font-family: var(--font-sans); } .btn:hover { background: var(--bg-hover); border-color: var(--text-muted); } .btn-primary { background: var(--accent); border-color: var(--accent); color: white; } .btn-primary:hover { background: var(--accent-dim); } .btn-sm { padding: 4px 10px; font-size: 11px; } /* ---- Forms ---- */ input, select, textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-primary); font-family: var(--font-sans); font-size: 12px; transition: border-color 120ms ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); } textarea { font-family: var(--font-mono); font-size: 12px; resize: vertical; min-height: 160px; } .payload-editor { display: grid; grid-template-columns: 46px 1fr; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); overflow: hidden; min-height: 216px; } .payload-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); } .payload-gutter { padding: 9px 8px; border-right: 1px solid var(--border-light); background: var(--bg-card-alt); color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; line-height: 18px; text-align: right; white-space: pre; overflow: hidden; user-select: none; } .payload-code-wrap { position: relative; min-width: 0; } .payload-highlight, .payload-code-wrap textarea { margin: 0; padding: 9px 10px; border: 0; border-radius: 0; background: transparent; font-family: var(--font-mono); font-size: 12px; line-height: 18px; min-height: 216px; white-space: pre; tab-size: 4; } .payload-highlight { position: absolute; inset: 0; color: var(--text-primary); overflow: hidden; pointer-events: none; } .payload-code-wrap textarea { position: relative; display: block; width: 100%; resize: vertical; color: transparent; caret-color: var(--text-bright); overflow: auto; } .payload-code-wrap textarea::placeholder { color: var(--text-muted); } .payload-code-wrap textarea:focus { box-shadow: none; border-color: transparent; } label.field-label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-group { margin-bottom: 12px; } .checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; } .checkbox-label input[type="checkbox"] { width: auto; } /* ---- Pre / Code blocks ---- */ pre, code.block { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--text-primary); overflow-x: auto; line-height: 1.6; white-space: pre-wrap; word-break: break-all; } /* ---- Detail key-value pairs ---- */ .detail-grid { display: grid; grid-template-columns: 140px 1fr; gap: 0; font-size: 12px; } .detail-grid dt { padding: 6px 12px; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border-light); } .detail-grid dd { padding: 6px 12px; color: var(--text-primary); border-bottom: 1px solid var(--border-light); font-family: var(--font-mono); font-size: 11px; } /* ---- Empty state ---- */ .empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 13px; } .empty-state svg { margin-bottom: 12px; opacity: 0.3; } /* ---- Status line / result box ---- */ .result-box { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 12px; margin-bottom: 12px; } .result-box.success { background: var(--green-bg); color: var(--green-text); } .result-box.error { background: var(--red-bg); color: var(--red-text); } .result-box.info { background: var(--accent-bg); color: var(--accent); } /* ---- Collapsible details ---- */ details { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 12px; } details summary { padding: 8px 12px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-secondary); background: var(--bg-card-alt); border-radius: var(--radius-sm); } details[open] summary { border-bottom: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } details pre { border: none; border-radius: 0; margin: 0; } /* ---- Modal ---- */ .mix-modal[hidden] { display: none; } .mix-modal { position: fixed; inset: 0; z-index: 1000; } .mix-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.62); } .mix-modal-panel { position: relative; width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: 16px auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; } .mix-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .mix-modal-title { font-size: 14px; font-weight: 700; color: var(--text-bright); } .mix-modal-subtitle { margin-top: 2px; font-size: 11px; color: var(--text-muted); } .mix-modal-body { padding: 14px; overflow: auto; } .mix-modal-body:has(.vp-host) { padding: 0 8px 8px; overflow: hidden; } .mix-modal-panel:has(.vp-host) { width: min(1200px, calc(100vw - 32px)); } .mix-modal-body pre { margin: 0; min-height: 320px; } /* ---- Syntax tokens: dark-theme overrides ---- */ body[data-theme="dark"], body[data-theme="midnight"], body[data-theme="forest"], body[data-theme="amber"], body[data-theme="mocha"], body[data-theme="solar"], body[data-theme="terminal"] { --tok-segment: #82aaff; --tok-sep-field: #5c6478; --tok-sep-sub: #485168; --tok-num: #f78c6c; --tok-time: #89ddff; --tok-encode: #c792ea; } /* ---- Virtualized preview viewer (preview_viewer.js) ---- */ .vp-host { display: flex; flex-direction: column; min-height: 0; height: 70vh; } .vp-host-inline { /* height is sized at mount time from maxLines (see preview_viewer.js). */ border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-top: 6px; } .vp-host-inline .vp-toolbar { padding: 6px 8px; } .vp-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .vp-find { flex: 0 0 220px; padding: 4px 8px; font-size: 12px; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: 4px; } .vp-find-count, .vp-stats { font-size: 11px; color: var(--text-muted); } .vp-trunc { font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--red-bg, rgba(255, 100, 100, 0.15)); color: var(--red-text, #ff8a8a); } .vp-spacer { flex: 1; } .vp-scroll { position: relative; flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; background: var(--bg-card-alt); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 18px; outline: none; } .vp-canvas { position: relative; width: 100%; } .vp-rows { position: absolute; top: 0; left: 0; right: 0; } .vp-row { position: absolute; left: 0; right: 0; height: 18px; display: flex; white-space: pre; } .vp-num { flex: 0 0 auto; padding: 0 10px 0 8px; color: var(--text-muted); user-select: none; text-align: right; border-right: 1px solid var(--border-light); background: var(--bg-body); } .vp-line { flex: 1; padding: 0 8px; overflow: visible; color: var(--text-primary); } .vp-row.vp-match { background: rgba(255, 220, 100, 0.10); } .vp-row.vp-match-focus { background: rgba(255, 220, 100, 0.22); } /* HL7 / ASTM token coloring — vars cascade through global theme. */ .vp-tok-segment { color: var(--tok-segment); font-weight: 600; } .vp-tok-sep-field { color: var(--tok-sep-field); } .vp-tok-sep-sub { color: var(--tok-sep-sub); } .vp-tok-num { color: var(--tok-num); } .vp-tok-time { color: var(--tok-time); } .vp-tok-encode { color: var(--tok-encode); } /* IP whitelist editor tokens */ .ipw-editor { min-height: 144px; } .ipw-editor .payload-highlight, .ipw-editor .payload-code-wrap textarea { min-height: 144px; } .ipw-tok-ok { color: var(--accent); font-weight: 600; } .ipw-tok-bad { color: var(--red-text); text-decoration: underline wavy var(--red); text-underline-offset: 3px; } .ipw-tok-sep { color: var(--text-muted); } .ipw-tok-comment { color: var(--text-muted); font-style: italic; } /* ---- Connector topology ---- */ .topology { display: flex; align-items: flex-start; gap: 0; padding: 20px 14px; overflow-x: auto; } .topo-column { display: flex; flex-direction: column; gap: 8px; min-width: 140px; } .topo-node { background: var(--bg-card-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font-size: 11px; position: relative; } .topo-node .topo-label { font-weight: 600; color: var(--text-bright); margin-bottom: 2px; } .topo-node .topo-sub { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); } .topo-node.listener { border-left: 3px solid var(--cyan); } .topo-node.pipeline { border-left: 3px solid var(--accent); } .topo-node.service { border-left: 3px solid var(--green); } .topo-node.device { border-left: 3px solid var(--amber); } .topo-node.inactive { opacity: 0.5; border-left-color: var(--text-muted); } .topo-arrows { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 48px; gap: 8px; padding-top: 10px; } .topo-arrow { color: var(--text-muted); font-size: 18px; line-height: 1; } /* ---- Back link ---- */ .back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); margin-top: 12px; } .back-link:hover { color: var(--accent); } /* ---- Scrollable table wrapper ---- */ .table-wrap { overflow-x: auto; overflow-y: auto; max-height: 600px; -webkit-overflow-scrolling: touch; /* Scroll shadow hint when table overflows right */ background: linear-gradient(to right, var(--bg-card), var(--bg-card)) local, linear-gradient(to right, var(--bg-card), transparent) local, linear-gradient(to left, var(--bg-card), var(--bg-card)) local, linear-gradient(to left, rgba(0,0,0,0.08), transparent) scroll; background-size: 20px 100%, 20px 100%, 20px 100%, 20px 100%; background-position: left, left, right, right; background-repeat: no-repeat; } /* ---- Section headers inside cards ---- */ .section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 10px 14px 6px; border-bottom: 1px solid var(--border-light); } /* ---- Hamburger menu button (mobile) ---- */ .hamburger-btn { display: none; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text-primary); cursor: pointer; padding: 0 10px; min-height: 32px; line-height: 1; flex-shrink: 0; justify-content: center; box-shadow: var(--shadow-card); transition: border-color 120ms ease, color 120ms ease, background 120ms ease; } .hamburger-btn:hover { border-color: var(--text-muted); background: var(--bg-hover); } .hamburger-btn-label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: currentColor; } body.sidebar-open .hamburger-btn { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); } /* Sidebar overlay backdrop (mobile). Sits below the nav drawer so the drawer remains tappable; clicking the dimmed area closes the drawer. */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.58); backdrop-filter: blur(2px); z-index: 99; } @media (max-width: 860px) { body.sidebar-open .sidebar-backdrop { display: block; } } /* ---- Utility grid classes (replace inline styles) ---- */ .grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .grid-filter-3col { display: grid; grid-template-columns: 160px 1fr 1fr; gap: 10px; align-items: end; } /* ---- Responsive — tablet / small desktop (<= 768px) ---- */ @media (max-width: 768px) { /* Base font bump for readability */ html { font-size: 14px; } body.sidebar-open { overflow: hidden; } /* Sidebar: hidden by default, shown via .sidebar-open on body */ .sidebar { width: min(280px, 86vw); transform: translateX(-100%); transition: transform 200ms ease; box-shadow: 18px 0 40px rgba(0, 0, 0, 0.18); } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .sidebar-backdrop { display: block; } .main { margin-left: 0; min-width: 0; } .topbar { height: auto; min-height: 56px; display: grid; grid-template-columns: 1fr; padding: 10px 12px; gap: 10px; position: sticky; top: 0; z-index: 90; } .topbar-mobile-shell { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .mobile-console-brand { display: flex; flex-direction: column; min-width: 0; gap: 1px; text-align: right; } .mobile-console-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .mobile-console-title { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-status { gap: 6px; } .topbar-sep { display: none; } .topbar .indicator, .sse-status { padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); font-size: 10px; white-space: nowrap; } .theme-switcher { margin-left: auto; padding: 1px; } .hamburger-btn { display: inline-flex; min-height: 30px; padding: 0 9px; } /* Sidebar nav: bigger touch targets */ .sidebar-nav a { padding: 12px 14px; font-size: 14px; min-height: 44px; } /* Theme switcher: compact but touch-safe */ .theme-btn { padding: 3px 8px; font-size: 10px; min-height: 24px; } /* Content area: tighter padding */ .content { padding: 12px; } /* Page header: allow wrapping */ .page-header { flex-wrap: wrap; gap: 8px; align-items: flex-start; } .filter-clear-btn { width: 100%; justify-content: center; } /* Stat cards: 2 columns */ .stats-row { grid-template-columns: 1fr 1fr; } /* Topology diagram: vertical flow */ .topology { flex-direction: column; align-items: center; } .topo-arrows { flex-direction: row; min-width: auto; padding-top: 0; } .topo-arrow { transform: rotate(90deg); } /* Utility grids: collapse to single column */ .grid-2col { grid-template-columns: 1fr; } .grid-3col { grid-template-columns: 1fr; } .grid-filter-3col { grid-template-columns: 1fr; } /* Detail grid: stack key/value */ .detail-grid { grid-template-columns: 1fr; } .detail-grid dt { border-bottom: none; padding-bottom: 0; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; } .detail-grid dd { padding-top: 0; margin-bottom: 4px; } /* Form rows: stack */ .form-row { grid-template-columns: 1fr; } /* Card header with buttons: allow wrapping */ .card-header { display: flex; flex-wrap: wrap; gap: 8px; } /* Filter bar: collapsible mobile panel with grouped fields */ .mobile-filter-card { overflow: hidden; } .filter-mobile-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 0; background: var(--bg-card); color: var(--text-primary); font: inherit; cursor: pointer; text-align: left; } .filter-mobile-toggle-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .filter-mobile-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); } .filter-mobile-summary { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .filter-mobile-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 160ms ease; } .mobile-filter-card:not(.is-open) .filter-bar { display: none; } .mobile-filter-card.is-open .filter-mobile-chevron { transform: rotate(180deg); } .filter-bar { flex-direction: column; align-items: stretch; padding: 0 12px 12px; gap: 10px; border-top: 1px solid var(--border-light); background: var(--bg-card-alt); } .filter-field { min-width: 100%; padding: 10px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--bg-card); } .filter-field-search { min-width: 100%; } /* iOS zoom prevention: inputs must be >= 16px */ input, select, textarea { font-size: 16px; } .filter-input, .filter-select { font-size: 16px; padding: 10px 12px; min-height: 42px; } /* Buttons: keep compact console rhythm on mobile */ .btn { min-height: 38px; padding: 7px 12px; } .btn-sm { padding: 6px 10px; min-height: 34px; font-size: 11px; } /* Pagination: stack with compact buttons */ .pagination { flex-direction: column; align-items: flex-start; } .pagination-info { white-space: normal; } .pagination-controls { gap: 6px; } .pagination-btn { min-width: 34px; min-height: 34px; padding: 6px 9px; } /* SSE banner close: touch-safe without oversized chrome */ .sse-banner-close { min-width: 36px; min-height: 36px; font-size: 18px; } /* Back link: touch-safe inline control */ .back-link { font-size: 14px; padding: 6px 0; min-height: 38px; display: inline-flex; align-items: center; } /* Toggle switch: bigger for touch */ .toggle-switch { width: 44px; height: 24px; } .toggle-slider::before { width: 18px; height: 18px; left: 3px; bottom: 3px; } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); } /* Truncated text: narrower on mobile */ .data-table .truncate { max-width: 100px; } /* UUID and mono text overflow */ .mono { word-break: break-all; } /* Tables: hide low-priority columns on mobile */ .data-table .col-hide-mobile { display: none; } /* Delivery step header: allow wrapping */ .delivery-step-header { flex-wrap: wrap; gap: 6px; } } /* ---- Responsive — small phone (<= 480px) ---- */ @media (max-width: 480px) { .topbar { padding: 8px 10px; gap: 8px; } .hamburger-btn { padding: 0 8px; } .hamburger-btn-label { font-size: 9px; } .mobile-console-title { font-size: 10px; } .content { padding: 8px; } .stats-row { grid-template-columns: 1fr; gap: 8px; } .stat-card { padding: 10px 12px; } .stat-card .stat-value { font-size: 20px; } .topbar-status { gap: 5px; } .topbar .indicator, .sse-status { padding: 4px 7px; font-size: 10px; } .card-body { padding: 10px; } .data-table th, .data-table td { padding: 5px 6px; font-size: 11px; } .page-header h2 { font-size: 14px; } /* Even tighter pagination */ .pagination-btn { min-width: 32px; min-height: 36px; padding: 6px 8px; font-size: 11px; } /* Stack filter bar controls compactly */ .filter-mobile-toggle { padding: 9px 10px; } .filter-bar { padding: 0 10px 10px; gap: 8px; } } /* ---- Toggle Switch ---- */ .toggle-switch { position: relative; display: inline-block; width: 34px; height: 18px; cursor: pointer; } .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--border); border-radius: 18px; transition: background 200ms ease; } .toggle-slider::before { content: ""; position: absolute; width: 14px; height: 14px; left: 2px; bottom: 2px; background: var(--text-muted); border-radius: 50%; transition: transform 200ms ease, background 200ms ease; } .toggle-switch input:checked + .toggle-slider { background: var(--green-bg); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); background: var(--green); } /* ---- Delivery status badges ---- */ .badge-delivery-success { background: var(--green-bg); color: var(--green-text); } .badge-delivery-pending { background: var(--amber-bg); color: var(--amber-text); } .badge-delivery-retrying { background: var(--cyan-bg); color: var(--cyan-text); } .badge-delivery-failed { background: var(--red-bg); color: var(--red-text); } .badge-machine-ack { background: var(--accent-bg); color: var(--accent); } .badge-machine-response { background: var(--purple-bg); color: var(--purple); } .message-outbound-summary { display: flex; flex-direction: column; gap: 4px; min-width: 108px; } .message-outbound-count { font-size: 11px; color: var(--text-secondary); white-space: nowrap; } .message-outbound-badges { display: flex; flex-wrap: wrap; gap: 4px; } /* ---- Delivery Chain (message detail) ---- */ .delivery-chain { display: flex; flex-direction: column; gap: 0; padding: 8px 0; } .delivery-step { display: flex; align-items: flex-start; gap: 12px; position: relative; padding-bottom: 16px; } .delivery-step:last-of-type { padding-bottom: 0; } .delivery-step::after { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--border); } .delivery-step:last-of-type::after { display: none; } .delivery-step-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--border); } .delivery-icon-success { border-color: var(--green); color: var(--green-text); background: var(--green-bg); } .delivery-icon-failed { border-color: var(--red); color: var(--red-text); background: var(--red-bg); } .delivery-icon-retrying { border-color: var(--cyan); color: var(--cyan-text); background: var(--cyan-bg); } .delivery-icon-pending { border-color: var(--amber); color: var(--amber-text); background: var(--amber-bg); } .delivery-step-body { flex: 1; min-width: 0; } .delivery-step-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .delivery-service-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-bright); } .delivery-step-meta { font-size: 11px; color: var(--text-muted); } .delivery-step-error { font-size: 11px; color: var(--red-text); margin-top: 2px; font-family: var(--font-mono); } .delivery-step-retry { font-size: 11px; color: var(--cyan-text); margin-top: 2px; } .delivery-connector { display: none; } /* ---- SSE live-update flash ---- */ @keyframes sse-flash { 0% { background: var(--accent-bg); } 100% { background: transparent; } } tr.sse-new { animation: sse-flash 1.5s ease-out; } /* SSE connection indicator in topbar */ .sse-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); } .sse-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); } .sse-status.connected .dot { background: var(--green); box-shadow: 0 0 4px var(--green-glow); } .sse-status.disconnected .dot { background: var(--red-text); } /* ---- Filter bar ---- */ .filter-card { margin-bottom: 12px; } @media (min-width: 769px) { .filter-mobile-toggle { display: none; } } .filter-bar { display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px; flex-wrap: wrap; } .filter-field { display: flex; flex-direction: column; gap: 3px; min-width: 120px; } .filter-field-search { flex: 1; min-width: 200px; } @media (max-width: 768px) { .filter-mobile-toggle { display: flex; } .mobile-filter-card:not(.is-open) .filter-bar { display: none; } .mobile-filter-card.is-open .filter-mobile-chevron { transform: rotate(180deg); } .filter-bar { flex-direction: column; align-items: stretch; padding: 0 12px 12px; gap: 10px; border-top: 1px solid var(--border-light); background: var(--bg-card-alt); } .filter-field { min-width: 100%; padding: 10px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--bg-card); } .filter-field-search { min-width: 100%; } } .filter-field .field-label { margin-bottom: 0; } .filter-input, .filter-select { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-primary); font-family: var(--font-sans); font-size: 12px; transition: border-color 120ms ease; } .filter-input:focus, .filter-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); } .filter-input::placeholder { color: var(--text-muted); opacity: 0.7; } /* ---- Pagination ---- */ .pagination { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; gap: 12px; flex-wrap: wrap; } .pagination-info { color: var(--text-muted); font-size: 11px; white-space: nowrap; } .pagination-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .pagination-btn { min-width: 32px; text-align: center; justify-content: center; } .pagination-btn.pagination-active { background: var(--accent); border-color: var(--accent); color: white; font-weight: 600; } .pagination-btn.pagination-active:hover { background: var(--accent-dim); } .pagination-ellipsis { color: var(--text-muted); padding: 0 4px; font-size: 12px; } /* ---- SSE new-data banner ---- */ .sse-banner { display: flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 12px; background: var(--accent-bg); border: 1px solid var(--accent); border-radius: var(--radius); font-size: 12px; color: var(--accent); animation: sse-banner-in 300ms ease; } .sse-banner[hidden] { display: none; } .sse-banner svg { flex-shrink: 0; opacity: 0.8; } .sse-banner span { flex: 1; } .sse-banner a { font-weight: 600; white-space: nowrap; } .sse-banner-close { border: none; background: none; color: var(--accent); font-size: 18px; cursor: pointer; padding: 6px; min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; line-height: 1; opacity: 0.6; flex-shrink: 0; } .sse-banner-close:hover { opacity: 1; } @keyframes sse-banner-in { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } } /* ---- Utility: small/secondary text (scales up on mobile) ---- */ .text-xs { font-size: 11px; } .text-xxs { font-size: 10px; } .text-sm { font-size: 12px; } .text-muted { color: var(--text-muted); } .text-red { color: var(--red-text); } /* ---- Topology section label ---- */ .topo-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 4px; } /* ---- Page subtitle (next to h2 titles) ---- */ .page-subtitle { font-size: 11px; color: var(--text-muted); } /* ---- Small inline buttons (Retry, etc.) — adequate touch target ---- */ .btn-xs { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; min-height: 28px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); font-size: 11px; font-weight: 500; cursor: pointer; transition: all 120ms ease; font-family: var(--font-sans); } .btn-xs:hover { background: var(--bg-hover); border-color: var(--text-muted); } /* ---- Inline detail summary (collapsible) ---- */ .inline-details summary { font-size: 11px; color: var(--text-muted); cursor: pointer; padding: 6px 10px; min-height: 32px; display: flex; align-items: center; } .inline-details pre { font-size: 11px; margin-top: 4px; max-height: 200px; overflow: auto; } /* ---- Flex row with wrapping (buttons, controls) ---- */ .flex-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .flex-row-tight { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* ---- Error text with responsive max-width ---- */ .error-truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--red-text); } /* Service chain item (tester page) */ .svc-chain-item { padding: 8px 10px; margin-bottom: 4px; background: var(--bg-card-alt); border-radius: 4px; font-size: 12px; } /* ---- Responsive overrides for utility classes ---- */ @media (max-width: 768px) { /* Bump small text up for mobile readability */ .text-xs { font-size: 12px; } .text-xxs { font-size: 11px; } .topo-section-label { font-size: 11px; } .page-subtitle { font-size: 12px; } /* Ensure retry/action buttons are adequately sized */ .btn-xs { padding: 6px 12px; min-height: 36px; font-size: 12px; } /* Inline details: bigger tap targets */ .inline-details summary { font-size: 12px; padding: 8px 10px; min-height: 40px; } .inline-details pre { font-size: 12px; } /* Error column: use full width on mobile */ .error-truncate { max-width: none; white-space: normal; } } @media (max-width: 480px) { .btn-xs { padding: 8px 14px; min-height: 40px; font-size: 12px; } } /* ---- AJAX loading state ---- */ .card.loading { opacity: 0.55; pointer-events: none; transition: opacity 150ms ease; } /* ---- Lifetime stats (animated counters + glow) ---- */ .lifetime-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; } .lifetime-card { position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 85%, transparent), var(--bg-card)); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-card); transition: transform 180ms ease, box-shadow 180ms ease; } .lifetime-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); } .lifetime-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--hot-x, 85%) var(--hot-y, 15%), var(--accent-glow, rgba(56, 189, 248, 0.14)), transparent 55%); opacity: 0.85; pointer-events: none; } .lifetime-card > * { position: relative; z-index: 1; } .lifetime-card .lifetime-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .lifetime-card .lifetime-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #38bdf8); box-shadow: 0 0 8px var(--accent, #38bdf8); animation: lifetime-pulse 2.2s ease-in-out infinite; } @keyframes lifetime-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } } .lifetime-card .lifetime-value { font-size: 30px; font-weight: 700; color: var(--text-bright); font-family: var(--font-mono); line-height: 1.05; letter-spacing: -0.01em; } .lifetime-card .lifetime-sub { margin-top: 6px; font-size: 11px; color: var(--text-muted); } .lifetime-card.accent-green { --accent: #10b981; --accent-glow: rgba(16, 185, 129, 0.16); } .lifetime-card.accent-purple { --accent: #a78bfa; --accent-glow: rgba(167, 139, 250, 0.16); } .lifetime-card.accent-amber { --accent: #f59e0b; --accent-glow: rgba(245, 158, 11, 0.16); } .lifetime-card.accent-red { --accent: #ef4444; --accent-glow: rgba(239, 68, 68, 0.16); } .lifetime-card.accent-cyan { --accent: #38bdf8; --accent-glow: rgba(56, 189, 248, 0.16); } /* Counter flash when value changes. */ .lifetime-value.flash { animation: lifetime-flash 900ms ease-out; } @keyframes lifetime-flash { 0% { color: var(--accent, #38bdf8); transform: scale(1.06); } 100% { color: var(--text-bright); transform: scale(1); } } /* ---- Device profile breakdown ---- */ .card-header-sub { margin-left: auto; font-size: 11px; color: var(--text-muted); font-weight: 400; letter-spacing: 0; text-transform: none; } .profile-list { display: flex; flex-direction: column; } .profile-row { padding: 14px 16px; border-top: 1px solid var(--border); transition: background 150ms ease; } .profile-row:first-child { border-top: 0; } .profile-row:hover { background: color-mix(in srgb, var(--bg-card-alt) 60%, transparent); } .profile-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .profile-row-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .profile-row-label { font-size: 14px; font-weight: 600; color: var(--text-bright); letter-spacing: -0.01em; } .profile-row-version { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); padding: 2px 6px; border-radius: 4px; background: var(--bg-card-alt); border: 1px solid var(--border); } .profile-row-count { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; } .profile-row-count strong { font-family: var(--font-mono); font-size: 20px; color: var(--text-bright); line-height: 1; } .profile-row-count span { font-size: 11px; color: var(--text-muted); } .profile-row-bar { position: relative; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--border) 50%, transparent); overflow: hidden; margin-bottom: 10px; } .profile-row-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #38bdf8, #a78bfa); border-radius: 2px; transition: width 650ms cubic-bezier(0.22, 1, 0.36, 1); } .profile-row-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .profile-row-samples { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .profile-row-conf { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; } .device-pill { display: inline-block; padding: 2px 8px; font-size: 11px; font-family: var(--font-mono); border-radius: 999px; background: var(--bg-card-alt); border: 1px solid var(--border); color: var(--text-bright); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .device-pill-more { color: var(--text-muted); background: transparent; border-style: dashed; } .device-pill-empty { color: var(--text-muted); font-style: italic; border-style: dashed; } .badge-profile { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-family: var(--font-mono); background: color-mix(in srgb, var(--cyan-bg, rgba(56, 189, 248, 0.16)) 80%, transparent); color: var(--cyan-text, #0891b2); border: 1px solid color-mix(in srgb, var(--cyan-text, #0891b2) 35%, transparent); } /* ── Configurable service handlers: collapsed-row list ─────────────── */ .handler-list { display: flex; flex-direction: column; } .handler-row { display: flex; flex-direction: column; border-top: 1px solid var(--border); } .handler-row:first-child { border-top: none; } .handler-row-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; user-select: none; } .handler-row-head:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } .handler-row.expanded > .handler-row-head { background: color-mix(in srgb, var(--accent) 8%, transparent); } .handler-row-name { font-weight: 600; font-size: 13px; min-width: 190px; } .handler-row-endpoint { flex: 1; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .handler-row-endpoint.empty { font-style: italic; } .handler-row-actions { display: flex; align-items: center; gap: 10px; } .handler-chevron { font-size: 10px; color: var(--text-muted); transition: transform 120ms ease; display: inline-block; } .handler-row.expanded .handler-chevron { transform: rotate(90deg); } .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); opacity: 0.45; } .status-dot.ok { background: var(--green); opacity: 1; } .handler-editor { display: none; padding: 12px 14px 16px 14px; border-top: 1px dashed var(--border); background: color-mix(in srgb, var(--accent) 3%, transparent); } .handler-row.expanded .handler-editor { display: block; } .handler-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 10px; } .handler-editor-grid .span-2 { grid-column: 1 / -1; } .handler-editor-grid label { display: block; font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; } .handler-editor-grid input, .handler-editor-grid select, .handler-editor-grid textarea { width: 100%; box-sizing: border-box; } .handler-regex-row { display: flex; gap: 8px; align-items: flex-start; } .handler-regex-row input { flex: 1; } .handler-regex-sample { display: none; margin-top: 8px; } .handler-regex-sample.open { display: block; } .handler-editor-footer { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-top: 14px; flex-wrap: wrap; } .handler-editor-footer .spacer { flex: 1; } .handler-test-result { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-family: var(--font-mono); background: var(--inactive-bg); color: var(--text-muted); border: 1px solid transparent; min-height: 22px; } .handler-test-result.ok { background: var(--green-bg); color: var(--green-text); border-color: color-mix(in srgb, var(--green) 30%, transparent); } .handler-test-result.warn { background: var(--amber-bg); color: var(--amber-text); border-color: color-mix(in srgb, var(--amber-text) 30%, transparent); } .handler-test-result.error { background: var(--red-bg); color: var(--red-text); border-color: color-mix(in srgb, var(--red, #d33) 30%, transparent); } @media (max-width: 640px) { .handler-editor-grid { grid-template-columns: 1fr; } .handler-row-endpoint { display: none; } } /* ----- Theme picker (clinical dropdown) ----- */ .theme-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; } .theme-row { display: flex; align-items: center; gap: 12px; } .theme-row-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-muted); font-weight: 600; min-width: 52px; flex-shrink: 0; } .theme-picker { position: relative; flex: 1 1 auto; } .theme-trigger { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px 7px 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-sans); font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; } .theme-trigger:hover { border-color: var(--text-muted); } .theme-picker.is-open .theme-trigger { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); } .theme-trigger-label { flex: 1; text-align: left; text-transform: lowercase; font-variant-caps: all-small-caps; letter-spacing: 0.04em; } .theme-chevron { color: var(--text-muted); transition: transform 0.15s; } .theme-picker.is-open .theme-chevron { transform: rotate(180deg); } .theme-pips { display: inline-grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; width: 22px; height: 22px; border-radius: 3px; overflow: hidden; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--border-light); } .theme-pips .pip { display: block; width: 100%; height: 100%; background: var(--border); } .theme-pips-random { background: repeating-linear-gradient( 45deg, var(--accent-bg) 0 4px, transparent 4px 8px ); box-shadow: inset 0 0 0 1px var(--border); } .theme-pips-random .pip { background: transparent; } .theme-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 360px; overflow-y: auto; padding: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10); z-index: 200; } .theme-option { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); font-size: 12px; transition: background 0.08s; } .theme-option:hover, .theme-option:focus-visible { background: var(--bg-hover); outline: none; } .theme-option.is-active { color: var(--text-primary); background: var(--accent-bg); } .theme-option-label { flex: 1; text-transform: lowercase; font-variant-caps: all-small-caps; letter-spacing: 0.04em; font-weight: 500; } .theme-option-meta { color: var(--text-muted); font-size: 13px; } .theme-check { color: var(--accent); opacity: 0; } .theme-option.is-active .theme-check { opacity: 1; } .theme-actions { display: flex; gap: 8px; width: 100%; } .theme-action { flex: 1 1 0; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--radius-sm); cursor: pointer; transition: border-color 0.12s, background 0.12s, opacity 0.12s; } .theme-action-random { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); } .theme-action-random:hover { border-color: var(--accent); } .theme-action-random .theme-pips { width: 18px; height: 18px; } .theme-action-save:disabled { opacity: 0.40; cursor: not-allowed; } .theme-status { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); min-height: 1em; transition: color 0.12s; text-align: right; } /* Layout-mode glyph — 3 stacked bars whose spacing reflects density. */ .layout-glyph { display: inline-flex; flex-direction: column; justify-content: space-between; width: 22px; height: 22px; padding: 4px 3px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--border-light); flex-shrink: 0; } .layout-glyph i { display: block; height: 1.5px; background: var(--text-muted); border-radius: 1px; } .layout-glyph i:nth-child(1) { width: 70%; } .layout-glyph i:nth-child(2) { width: 100%; } .layout-glyph i:nth-child(3) { width: 50%; } /* Density variations — vertical gap between bars. */ .layout-glyph-compact { padding: 3px; gap: 3px; } .layout-glyph-comfortable { padding: 4px 3px; gap: 4px; } .layout-glyph-spacious { padding: 5px 3px; gap: 5px; } .layout-glyph-cinema { padding: 6px 3px; gap: 6px; } .theme-option.is-active .layout-glyph i { background: var(--accent); } .theme-status[data-kind="ok"] { color: var(--green-text); } .theme-status[data-kind="error"] { color: var(--red-text); } .theme-status[data-kind="info"] { color: var(--text-secondary); } /* ============================================================ DESIGN SYSTEM PICKER (settings page) Glyph swatches give each option an at-a-glance silhouette. ============================================================ */ .theme-menu.theme-menu-wide { min-width: 320px; } .ds-option { align-items: flex-start; padding: 10px 12px; } .ds-option-text { display: flex; flex-direction: column; gap: 2px; flex: 1; } .ds-option-blurb { font-size: 11px; color: var(--text-muted); line-height: 1.35; white-space: normal; } .ds-glyph { flex-shrink: 0; width: 28px; height: 22px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--border-light); background: linear-gradient(var(--accent), var(--accent)) left/6px 100% no-repeat, var(--bg-card-alt); } .ds-glyph-classic { background: linear-gradient(var(--accent),var(--accent)) left/6px 100% no-repeat, var(--bg-card-alt); } .ds-glyph-non_profit { background: linear-gradient(var(--accent),var(--accent)) top/100% 5px no-repeat, var(--bg-card-alt); border-radius: 8px; } .ds-glyph-governmental { background: linear-gradient(var(--accent),var(--accent)) top/100% 4px no-repeat, repeating-linear-gradient(var(--bg-card-alt) 0 4px, var(--border-light) 4px 5px); } .ds-glyph-private_sector { background: linear-gradient(var(--accent),var(--accent)) left/4px 100% no-repeat, var(--bg-card-alt); border-radius: 4px; } .theme-option.is-active .ds-glyph { box-shadow: inset 0 0 0 1px var(--accent); } /* ============================================================ DESIGN SYSTEM: NON PROFIT Top hero nav, friendly rounded shapes, generous whitespace. Cards-first feel; tables soften into rows with breathing room. ============================================================ */ html[data-design-system="non_profit"] .sidebar, html[data-design-system="non_profit"] .topbar, html[data-design-system="non_profit"] .main { display: none; } html[data-design-system="non_profit"] body.np-body { display: block; } .np-body { background: var(--bg-body); color: var(--text-primary); } .np-hero { background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-body) 100%); border-bottom: 1px solid var(--border-light); padding: var(--ds-pad-card) 0 0; } .np-hero-inner { max-width: var(--ds-content-max); margin: 0 auto; padding: 0 var(--ds-pad-content) var(--ds-pad-card); display: flex; align-items: center; gap: var(--ds-gap); } .np-brand { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text-primary); } .np-brand-mark { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.5px; color: var(--accent); } .np-brand-tag { font-size: 11px; color: var(--text-muted); letter-spacing: 0.6px; text-transform: uppercase; } .np-nav { flex: 1; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; align-items: center; flex-direction: row; } .np-nav-link { padding: var(--ds-nav-pad-y) var(--ds-nav-pad-x); border-radius: 999px; font-size: 13px; color: var(--text-secondary); text-decoration: none; transition: background 120ms, color 120ms; } .np-nav-link:hover { background: var(--bg-hover); color: var(--text-primary); } .np-nav-link.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; } .np-settings-btn { width: 38px; height: 38px; border-radius: 999px; background: var(--bg-card-alt); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .np-settings-btn.active, .np-settings-btn:hover { background: var(--accent-bg); color: var(--accent); } .np-hero-toggle { display: none; } .np-hero-status { max-width: var(--ds-content-max); margin: 0 auto; padding: calc(var(--ds-pad-card) * 0.5) var(--ds-pad-content); display: flex; flex-wrap: wrap; gap: var(--ds-gap); align-items: center; border-top: 1px solid var(--border-light); font-size: 12px; color: var(--text-muted); } .np-main { max-width: var(--ds-content-max); margin: 0 auto; padding: var(--ds-pad-content); min-height: calc(100vh - 200px); } .np-content { display: flex; flex-direction: column; gap: var(--ds-gap); } .np-footer { max-width: var(--ds-content-max); margin: var(--ds-pad-content) auto 0; padding: var(--ds-pad-card) var(--ds-pad-content); display: flex; gap: var(--ds-gap); flex-wrap: wrap; border-top: 1px solid var(--border-light); color: var(--text-muted); font-size: 12px; } /* Soften cards/tables inside non_profit. */ html[data-design-system="non_profit"] .card { border-radius: 14px; box-shadow: 0 4px 24px -16px rgba(0,0,0,0.18); } html[data-design-system="non_profit"] .card-header { padding: 18px 22px; font-weight: 600; letter-spacing: 0.2px; } html[data-design-system="non_profit"] .card-body { padding: 22px; } html[data-design-system="non_profit"] .data-table { font-size: 13px; } html[data-design-system="non_profit"] .data-table th { background: transparent; border-bottom: 1px solid var(--border-light); font-weight: 500; text-transform: none; letter-spacing: 0; padding: 14px 16px; } html[data-design-system="non_profit"] .data-table td { padding: 16px; border-bottom: 1px solid var(--border-light); } html[data-design-system="non_profit"] .btn { border-radius: 999px; padding: 8px 18px; } html[data-design-system="non_profit"] .page-header h2 { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; font-size: 22px; } @media (max-width: 860px) { .np-hero-inner { flex-wrap: wrap; gap: 12px; padding: 0 18px 12px; } .np-brand { flex: 1; min-width: 0; } .np-hero-toggle { display: inline-flex; order: 2; } .np-settings-btn { order: 3; } .np-nav { position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 86vw); flex-direction: column; align-items: stretch; gap: 4px; background: var(--bg-card); padding: 22px 14px; border-right: 1px solid var(--border); box-shadow: 18px 0 40px rgba(0, 0, 0, 0.18); transform: translateX(-100%); transition: transform 200ms ease; z-index: 100; overflow-y: auto; display: flex; } body.sidebar-open .np-nav { transform: translateX(0); } .np-nav-link { text-align: left; padding: 12px 14px; font-size: 14px; border-radius: 10px; } .np-hero-status { padding: 8px 18px; } .np-main { padding: 18px; } .np-footer { padding: 16px 18px; flex-direction: column; gap: 6px; } } /* ============================================================ DESIGN SYSTEM: GOVERNMENTAL Banner + masthead + breadcrumbs + striped wide tables. Formal serif headings; high contrast. ============================================================ */ html[data-design-system="governmental"] .sidebar, html[data-design-system="governmental"] .topbar, html[data-design-system="governmental"] .main { display: none; } .gov-body { background: var(--bg-body); color: var(--text-primary); display: block; } .gov-banner { background: var(--accent); color: #fff; font-size: 12px; } .gov-banner-inner { max-width: var(--ds-content-max); margin: 0 auto; padding: calc(var(--ds-pad-card) * 0.4) var(--ds-pad-content); display: flex; align-items: center; gap: 10px; } .gov-banner-flag { width: 14px; height: 10px; background: linear-gradient(180deg, #fff 0 33%, #e5e7eb 33% 66%, #fff 66%); border: 1px solid rgba(255,255,255,0.5); } .gov-masthead { background: var(--bg-card); border-bottom: 4px solid var(--accent); } .gov-masthead-inner { max-width: var(--ds-content-max); margin: 0 auto; padding: var(--ds-pad-card) var(--ds-pad-content); display: flex; align-items: center; justify-content: space-between; } .gov-seal { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text-primary); } .gov-seal-emblem { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: 1px; border: 2px solid var(--accent); font-size: 12px; } .gov-seal-text { display: flex; flex-direction: column; } .gov-seal-line1 { font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } .gov-seal-line2 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; } .gov-settings-link { font-size: 13px; text-decoration: none; color: var(--accent); border-bottom: 1px solid transparent; } .gov-settings-link.active, .gov-settings-link:hover { border-bottom-color: var(--accent); } .gov-primary-nav { background: var(--accent-dim); color: #fff; } .gov-primary-nav-inner { max-width: var(--ds-content-max); margin: 0 auto; padding: 0 var(--ds-pad-content); display: flex; align-items: center; } .gov-nav-toggle { display: none; } .gov-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .gov-nav-list li a { display: inline-block; padding: var(--ds-nav-pad-y) var(--ds-nav-pad-x); color: rgba(255,255,255,0.92); text-decoration: none; font-size: 13px; border-bottom: 3px solid transparent; } .gov-nav-list li a:hover { background: rgba(0,0,0,0.15); } .gov-nav-list li a.active { background: var(--bg-body); color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .gov-breadcrumbs { background: var(--bg-card-alt); border-bottom: 1px solid var(--border-light); } .gov-breadcrumbs-inner { max-width: var(--ds-content-max); margin: 0 auto; padding: calc(var(--ds-pad-card) * 0.5) var(--ds-pad-content); font-size: 12px; color: var(--text-muted); display: flex; gap: 8px; align-items: center; } .gov-breadcrumbs-inner a { color: var(--accent); text-decoration: none; } .gov-crumb-sep { color: var(--text-muted); } .gov-crumb-current { color: var(--text-primary); font-weight: 600; } .gov-statusbar { background: var(--bg-card); border-bottom: 1px solid var(--border-light); } .gov-statusbar-inner { max-width: var(--ds-content-max); margin: 0 auto; padding: calc(var(--ds-pad-card) * 0.5) var(--ds-pad-content); display: flex; gap: var(--ds-gap); flex-wrap: wrap; align-items: center; font-size: 12px; } .gov-main { background: var(--bg-body); } .gov-content { max-width: var(--ds-content-max); margin: 0 auto; padding: var(--ds-pad-content); min-height: calc(100vh - 280px); display: flex; flex-direction: column; gap: var(--ds-gap); } .gov-footer { background: var(--bg-card); border-top: 1px solid var(--border-light); } .gov-footer-inner { max-width: var(--ds-content-max); margin: 0 auto; padding: var(--ds-pad-card) var(--ds-pad-content); display: flex; gap: var(--ds-gap); flex-wrap: wrap; color: var(--text-muted); font-size: 11px; } html[data-design-system="governmental"] .page-header h2, html[data-design-system="governmental"] .card-header { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; } html[data-design-system="governmental"] .card { border-radius: 2px; border: 1px solid var(--border); box-shadow: none; } html[data-design-system="governmental"] .data-table { border: 1px solid var(--border); } html[data-design-system="governmental"] .data-table th { background: var(--accent-bg); color: var(--accent); text-transform: uppercase; font-size: 11px; letter-spacing: 1px; border-bottom: 2px solid var(--accent); } html[data-design-system="governmental"] .data-table tr:nth-child(even) td { background: var(--bg-card-alt); } html[data-design-system="governmental"] .btn { border-radius: 2px; } @media (max-width: 860px) { .gov-nav-toggle { display: inline-flex; margin: 8px 0; } .gov-nav-list { position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 86vw); flex-direction: column; gap: 0; background: var(--accent-dim); padding: 22px 0; margin: 0; transform: translateX(-100%); transition: transform 200ms ease; z-index: 100; overflow-y: auto; box-shadow: 18px 0 40px rgba(0, 0, 0, 0.25); display: flex; } .gov-nav-list li { width: 100%; } .gov-nav-list li a { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-bottom: none; } body.sidebar-open .gov-nav-list { transform: translateX(0); } } /* ============================================================ DESIGN SYSTEM: PRIVATE SECTOR — SMALL Polished icon rail (collapsed by default, expand on hover). Compact tables; clear visual hierarchy. ============================================================ */ html[data-design-system="private_sector"] .sidebar, html[data-design-system="private_sector"] .topbar, html[data-design-system="private_sector"] .main { display: none; } .ps-body { background: var(--bg-body); color: var(--text-primary); display: block; } .ps-rail { position: fixed; top: 0; left: 0; bottom: 0; width: var(--ds-rail-w); background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; padding: var(--ds-pad-card) calc(var(--ds-pad-card) * 0.7); transition: width 180ms ease, padding 180ms ease, transform 180ms ease; overflow: hidden; z-index: 100; } .ps-rail-brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 12px; color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border-light); margin-bottom: 8px; } .ps-rail-mark { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; } .ps-rail-name { font-weight: 600; white-space: nowrap; } .ps-rail-section { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); padding: 10px 12px 4px; } .ps-rail-link { display: flex; align-items: center; gap: 12px; padding: calc(var(--ds-nav-pad-y) * 0.85) var(--ds-nav-pad-x); border-radius: 8px; color: var(--text-secondary); text-decoration: none; font-size: 13px; white-space: nowrap; } .ps-rail-link:hover { background: var(--bg-hover); color: var(--text-primary); } .ps-rail-link.active { background: var(--accent-bg); color: var(--accent); } .ps-rail-glyph { width: 28px; height: 28px; border-radius: 6px; background: var(--bg-card-alt); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; font-size: 13px; } .ps-rail-link.active .ps-rail-glyph { background: var(--accent); color: #fff; } .ps-rail-label { white-space: nowrap; } .ps-rail-settings { margin-top: auto; } .ps-shell { margin-left: var(--ds-rail-w); min-height: 100vh; display: flex; flex-direction: column; } .ps-topbar { display: flex; align-items: center; gap: 16px; padding: var(--ds-topbar-pad-y) var(--ds-topbar-pad-x); background: var(--bg-card); border-bottom: 1px solid var(--border-light); position: sticky; top: 0; z-index: 20; } .ps-mobile-toggle { display: none; } .ps-page-title { font-size: 18px; font-weight: 600; margin: 0; flex: 1; } .ps-topbar-status { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; justify-content: flex-end; } .ps-content { padding: var(--ds-pad-content); flex: 1; display: flex; flex-direction: column; gap: var(--ds-gap); } html[data-design-system="private_sector"] .data-table { font-size: 12.5px; } html[data-design-system="private_sector"] .data-table th { padding: 8px 10px; font-size: 10.5px; } html[data-design-system="private_sector"] .data-table td { padding: 8px 10px; } html[data-design-system="private_sector"] .card { border-radius: 8px; } @media (max-width: 860px) { .ps-rail { transform: translateX(-100%); transition: transform 180ms ease; } body.sidebar-open .ps-rail { transform: translateX(0); } .ps-shell { margin-left: 0; } .ps-mobile-toggle { display: inline-flex; } } /* ============================================================ Phosphor icon sizing helpers used across design systems. ============================================================ */ .np-nav-link i.ph, .gov-nav-list a i.ph, .np-settings-btn i.ph { font-size: 16px; line-height: 1; margin-right: 6px; vertical-align: middle; } .np-nav-link i.ph + span { vertical-align: middle; } .np-settings-btn i.ph { font-size: 18px; margin-right: 0; } .gov-nav-list i.ph { font-size: 14px; opacity: 0.85; } .gov-nav-list a.active i.ph { opacity: 1; } .gov-nav-list a { display: inline-flex; align-items: center; gap: 6px; } .ps-rail-glyph i.ph { font-size: 18px; line-height: 1; } .topbar-icon-btn i.ph { font-size: 16px; line-height: 1; } /* ============================================================ Mobile-only nav drawer entries (e.g. Settings). Desktop has dedicated topbar gears for these routes; in the drawer they let users reach Settings without closing the menu. Each shell flips to its drawer at a different breakpoint — classic at 768px, non_profit + governmental at 860px. ============================================================ */ .mobile-only-link { display: none; } @media (max-width: 768px) { html[data-design-system="classic"] .mobile-only-link { display: flex; } } @media (max-width: 860px) { html[data-design-system="non_profit"] .mobile-only-link, html[data-design-system="governmental"] .mobile-only-link { display: flex; } html[data-design-system="governmental"] li.mobile-only-link { display: list-item; } }