/* ────────────────────────────────────────────────────────────────────────── Canonical design tokens (single source of truth). These are the DEFAULT brand values. At runtime BrandingCssBuilder injects a second :root block in (App.razor) that overrides any of these from the Admin → Branding settings — that block is later in source order so it wins. Keep this list in sync with ThemeSettings defaults in PlatformSettingsService. ────────────────────────────────────────────────────────────────────────── */ :root { /* Brand palette */ --primary-color: #e52329; --primary-light: #ff6b68; --primary-dark: #b91018; --accent-color: #2c8299; --accent-light: #47a6bd; --secondary-accent: #f6a7bd; --navy-color: #1e2562; --info-color: #34b6d4; /* Surfaces */ --background-dark: #e4e7eb; --background-medium: #f1f3f5; --background-light: #d9dee5; --surface-card: #ffffff; --surface-raised: #f1f3f5; --surface-overlay: rgba(245, 246, 248, 0.98); /* Text */ --text-primary: #151a22; --text-color: #151a22; --text-secondary: #3f4854; --text-muted: #56616d; --text-on-primary: #ffffff; --text-link: #2c8299; --text-link-hover: #1f6477; /* Semantic */ --success-color: #2f9e6d; --error-color: #d6202a; --warning-color: #f0a020; /* Borders / radius */ --border-color: #aeb7c2; --border-width: 1px; --border-style: solid; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* Glass / opacity */ --glass-blur: 16px; --glass-opacity: 0.85; --overlay-scrim: rgba(0, 0, 0, 0.5); /* Typography */ --font-family-base: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-family-heading: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-family-mono: 'Consolas', 'Monaco', monospace; --font-size-base: 1rem; --font-weight-normal: 400; --font-weight-bold: 600; /* Shadows */ --shadow-soft: 0 18px 45px rgba(32, 38, 48, 0.15); --shadow-card: 0 6px 18px rgba(32, 38, 48, 0.10); --shadow-elevated: 0 18px 45px rgba(32, 38, 48, 0.15); /* Buttons */ --btn-radius: 8px; --btn-font-weight: 600; --btn-bg: #e52329; --btn-bg-hover: #ff6b68; --btn-fg: #ffffff; --btn-border: #b91018; /* Radzen Blazor bridge — re-tinted at runtime by BrandingCssBuilder */ --rz-primary: #e52329; --rz-primary-light: #ff6b68; --rz-primary-lighter: rgba(229, 35, 41, 0.12); --rz-primary-dark: #b91018; --rz-primary-darker: #8a0c12; --rz-on-primary: #ffffff; } html, body { font-family: var(--font-family-base); font-size: var(--font-size-base); background-color: var(--background-dark); color: var(--text-primary); margin: 0; padding: 0; height: 100vh; overflow-x: hidden; overflow-y: auto; } a, .btn-link { color: var(--accent-color); } a:hover { color: var(--primary-light); } .btn-primary { color: var(--text-on-primary); background-color: var(--primary-color); border-color: var(--primary-dark); } .btn-primary:hover { background-color: var(--primary-light); border-color: var(--primary-color); } .btn-secondary { color: var(--text-primary); background-color: var(--background-light); border-color: var(--border-color); } .btn-secondary:hover { background-color: var(--background-medium); border-color: var(--primary-color); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--background-dark), 0 0 0 0.25rem var(--accent-color); } .form-control { background-color: var(--background-light); border-color: var(--border-color); color: var(--text-primary); } .form-control:focus { background-color: var(--background-medium); border-color: var(--accent-color); color: var(--text-primary); } .form-control::placeholder { color: var(--text-secondary); } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--success-color); } .invalid { outline: 1px solid var(--error-color); } .validation-message { color: var(--error-color); font-size: 0.85rem; margin-top: 0.25rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3LjgyOSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMrdIDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--error-color); padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .form-floating>.form-control-plaintext::placeholder, .form-floating>.form-control::placeholder { color: var(--text-secondary); text-align: end; } .form-floating>.form-control-plaintext:focus::placeholder, .form-floating>.form-control:focus::placeholder { text-align: start; } /* Override Bootstrap text-muted for dark theme */ .text-muted { color: var(--text-secondary) !important; } /* Form labels for dark theme */ .form-label { color: var(--text-primary); font-weight: 500; } /* Form check labels */ .form-check-label { color: var(--text-primary); } /* Small helper text */ small.text-muted, .form-text { color: var(--text-secondary) !important; } /* Code elements for readability */ code { color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 10%, transparent); padding: 1px 4px; border-radius: 3px; } /* Alert styles */ .alert { border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 1rem; } .alert-danger { background-color: color-mix(in srgb, var(--error-color) 15%, transparent); border: 1px solid var(--error-color); color: var(--error-color); } .alert-success { background-color: color-mix(in srgb, var(--success-color) 15%, transparent); border: 1px solid var(--success-color); color: var(--success-color); } /* Authentication Pages Styles */ .auth-container { display: flex; justify-content: center; align-items: flex-start; min-height: 100%; padding: 2rem; background: transparent; overflow-y: auto; position: relative; } .auth-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, var(--background-medium) 50%, rgba(0, 0, 0, 0.1) 100%); border: 1px solid var(--border-color); border-radius: 12px; padding: 2rem; width: 100%; max-width: 420px; box-shadow: var(--shadow-card); position: relative; z-index: 1; transition: all 0.3s ease; } .auth-card:hover { border-color: var(--accent-color); box-shadow: 0 6px 28px color-mix(in srgb, var(--accent-color) 15%, transparent); } .auth-card h2 { color: var(--accent-color); margin-bottom: 1.5rem; text-align: center; font-weight: 600; } .auth-card .subtitle { color: var(--text-secondary); text-align: center; margin-bottom: 1.5rem; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.5rem; color: var(--text-secondary); font-size: 0.9rem; } .btn-block { display: block; width: 100%; padding: 0.75rem; margin-top: 1.5rem; font-weight: 500; } .auth-links { margin-top: 1.5rem; text-align: center; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } .auth-links span { color: var(--text-secondary); font-size: 0.9rem; } .auth-links a { color: var(--accent-color); text-decoration: none; font-size: 0.9rem; } .auth-links a:hover { text-decoration: underline; } /* SSO Login Buttons */ .sso-divider { display: flex; align-items: center; margin: 1.5rem 0; gap: 1rem; } .sso-divider::before, .sso-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-color); } .sso-divider span { color: var(--text-secondary); font-size: 0.85rem; white-space: nowrap; } .sso-buttons { display: flex; flex-direction: column; gap: 0.75rem; } .sso-form { margin: 0; } .btn-sso { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 0.75rem 1rem; border-radius: 6px; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; border: 1px solid var(--border-color); background: var(--background-medium); color: var(--text-primary); } .btn-sso:hover { background: var(--background-light); border-color: var(--accent-color); transform: translateY(-1px); } .btn-sso:active { transform: translateY(0); } .sso-icon { width: 20px; height: 20px; flex-shrink: 0; } .btn-sso-microsoft { background: linear-gradient(135deg, rgba(0, 120, 212, 0.1) 0%, var(--background-medium) 100%); } .btn-sso-microsoft:hover { background: linear-gradient(135deg, rgba(0, 120, 212, 0.2) 0%, var(--background-light) 100%); border-color: #0078d4; } .btn-sso-google { background: linear-gradient(135deg, rgba(66, 133, 244, 0.1) 0%, var(--background-medium) 100%); } .btn-sso-google:hover { background: linear-gradient(135deg, rgba(66, 133, 244, 0.2) 0%, var(--background-light) 100%); border-color: #4285f4; } /* 2FA Setup Styles */ .twofa-card { max-width: 500px; } .twofa-setup p { color: var(--text-secondary); text-align: center; } .qr-code-container { display: flex; justify-content: center; margin: 1.5rem 0; } .qr-code { background: white; padding: 10px; border-radius: 8px; } .manual-key { text-align: center; margin: 1.5rem 0; } .auth-key { display: block; background-color: var(--background-medium); padding: 0.75rem 1rem; border-radius: 6px; font-family: monospace; font-size: 1rem; color: var(--accent-color); letter-spacing: 0.1em; margin-top: 0.5rem; } .skip-link { text-align: center; margin-top: 1rem; } .twofa-enabled { text-align: center; padding: 2rem 0; } .success-icon { width: 60px; height: 60px; background-color: var(--success-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 2rem; color: white; } .code-input { text-align: center; font-size: 1.5rem; letter-spacing: 0.5rem; font-family: monospace; } /* Workflow Designer Styles */ .workflow-page { display: flex; flex-direction: column; flex: 1; overflow: hidden; position: relative; } .workflow-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.5rem; background-color: var(--background-medium); border-bottom: 1px solid var(--border-color); flex-shrink: 0; z-index: 200; } .workflow-header h1 { margin: 0; font-size: 1.25rem; color: var(--accent-color); } .workflow-actions { display: flex; gap: 0.75rem; } .auto-start-label { display: flex; align-items: center; gap: 0.25rem; cursor: pointer; padding: 0.25rem 0.5rem; background: var(--background-light); border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.9rem; } .auto-start-label:hover { border-color: var(--accent-color); } .auto-start-label input[type="checkbox"] { margin: 0; } .workflow-container { display: flex; flex: 1; overflow: hidden; min-height: 0; align-items: stretch; } /* Node Palette */ .node-palette { width: 220px; background-color: var(--background-medium); border-right: 1px solid var(--border-color); padding: 1rem; overflow-y: auto; overflow-x: hidden; flex-shrink: 0; transition: width 0.3s ease, padding 0.3s ease; z-index: 100; align-self: stretch; } .node-palette.collapsed { width: 50px; padding: 0.5rem; } .palette-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .node-palette.collapsed .palette-header { justify-content: center; margin-bottom: 0; } .palette-header h3 { margin: 0; font-size: 1rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; transition: opacity 0.3s ease; } .palette-header h3.hidden { display: none; } .palette-toggle { background: var(--background-light); border: 1px solid var(--border-color); color: var(--text-primary); width: 28px; height: 28px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; transition: all 0.2s ease; } .palette-search { margin-bottom: 1rem; } .palette-search input { background-color: var(--background-dark); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 0.85rem; } .palette-search input:focus { border-color: var(--accent-color); box-shadow: none; } .palette-toggle:hover { background: var(--accent-color); border-color: var(--accent-color); } .palette-nodes { display: flex; flex-direction: column; gap: 0.25rem; transition: opacity 0.3s ease; } .palette-nodes.hidden { display: none; } .palette-node { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, var(--background-light) 15%, var(--background-light) 85%, rgba(0, 0, 0, 0.1) 100%); border: 1px solid var(--border-color); border-radius: 3px; cursor: grab; transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); user-select: none; -webkit-user-select: none; } .palette-node:hover { border-color: var(--accent-color); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 8%, transparent) 0%, var(--background-light) 50%); } .palette-node:active { cursor: grabbing; } .palette-node .node-icon { font-size: 1.25rem; filter: grayscale(100%) brightness(1.5); } .palette-node span { font-size: 0.9rem; color: var(--text-primary); } /* Palette node type borders removed for minimalistic look */ /* Bottom Node Toolbar */ .node-toolbar { position: fixed; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(10, 20, 25, 0.98), rgba(15, 30, 35, 0.95)); border-top: 1px solid var(--border-color); z-index: 200; transition: all 0.3s ease; } .node-toolbar.collapsed .toolbar-nodes { display: none; } .toolbar-header { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 10%, transparent); } .toolbar-search { flex-shrink: 0; } .toolbar-search input { background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); color: var(--text-primary); padding: 0.4rem 0.75rem; border-radius: 4px; font-size: 0.85rem; width: 180px; transition: all 0.2s ease; } .toolbar-search input:focus { outline: none; border-color: var(--accent-color); background: rgba(0, 0, 0, 0.4); } .toolbar-search input::placeholder { color: var(--text-secondary); } .toolbar-categories { display: flex; gap: 0.25rem; flex: 1; overflow-x: auto; } .toolbar-categories::-webkit-scrollbar { height: 3px; } .toolbar-categories::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } .category-tab { background: transparent; border: 1px solid transparent; color: var(--text-secondary); padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-size: 0.8rem; white-space: nowrap; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.4rem; } .category-tab:hover { color: var(--text-primary); background: color-mix(in srgb, var(--accent-color) 10%, transparent); } .category-tab.active { color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 15%, transparent); border-color: var(--accent-color); } .toolbar-toggle { background: color-mix(in srgb, var(--accent-color) 10%, transparent); border: 1px solid var(--border-color); color: var(--text-secondary); width: 32px; height: 32px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; transition: all 0.2s ease; flex-shrink: 0; } .toolbar-toggle:hover { background: var(--accent-color); color: white; border-color: var(--accent-color); } .toolbar-nodes { display: flex; gap: 0.75rem; padding: 0.75rem 1rem; overflow-x: auto; scrollbar-width: thin; } .toolbar-nodes::-webkit-scrollbar { height: 4px; } .toolbar-nodes::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } .toolbar-node { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.6rem 1rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); border-radius: 6px; cursor: grab; transition: all 0.2s ease; min-width: 70px; user-select: none; -webkit-user-select: none; } .toolbar-node:hover { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 10%, transparent); transform: translateY(-2px); } .toolbar-node:active { cursor: grabbing; transform: scale(0.95); } .toolbar-node .node-icon { font-size: 1.5rem; filter: grayscale(100%) brightness(1.3); transition: all 0.2s ease; } .toolbar-node:hover .node-icon { filter: grayscale(50%) brightness(1.5); } .toolbar-node span { font-size: 0.75rem; color: var(--text-secondary); text-align: center; } .toolbar-node:hover span { color: var(--text-primary); } /* Workflow Canvas */ .workflow-canvas-container { flex: 1; overflow: auto; position: relative; min-width: 0; min-height: 0; background-color: var(--background-dark); align-self: stretch; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .workflow-canvas { min-width: 100%; min-height: 100%; width: 5000px; height: 5000px; position: relative; background-image: radial-gradient(circle, var(--border-color) 1px, transparent 1px); background-size: 20px 20px; background-color: var(--background-dark); user-select: none; -webkit-user-select: none; } /* Canvas Nodes */ .canvas-node { position: absolute; /* Translucent "green-glass" themed node body — accent-tinted, lets the canvas grid show through. Keep all 3 duplicate .canvas-node body rules identical. */ background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 12%, transparent) 0%, color-mix(in srgb, var(--accent-color) 6%, transparent) 100%); border: 1px solid var(--border-color); cursor: move; z-index: 10; min-width: 40px; min-height: 40px; border-radius: 4px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 6px; overflow: visible; transition: border-color 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); user-select: none; -webkit-user-select: none; } /* Surface fields displayed on node */ .node-surface-fields { display: flex; flex-direction: column; gap: 2px; width: calc(100% - 8px); margin-top: 4px; margin-left: 8px; overflow: hidden; } .surface-field { font-size: 0.7rem; color: var(--text-secondary); background: rgba(0, 0, 0, 0.2); padding: 2px 6px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; border-left: 2px solid var(--accent-color); } .surface-field:hover { background: color-mix(in srgb, var(--accent-color) 15%, transparent); color: var(--text-primary); } /* Resize handle - bottom-right corner */ .resize-handle { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--border-color) 50%); border-bottom-right-radius: 4px; opacity: 0; transition: opacity 0.2s ease, background 0.2s ease; z-index: 20; } .canvas-node:hover .resize-handle { opacity: 1; } .resize-handle:hover { background: linear-gradient(135deg, transparent 50%, var(--accent-color) 50%); } .canvas-node:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .canvas-node.selected { border-color: var(--accent-color); outline: 2px solid color-mix(in srgb, var(--accent-color) 30%, transparent); outline-offset: 2px; } /* Node type borders removed for minimalistic look */ /* Running: the JS exec-trace halo (workflow-exec-trace.js) carries the motion in the execution's own color — the node itself gets a calm accent lift plus a slow breathe so state stays readable even if the overlay script is unavailable. */ .canvas-node.status-running { border-color: var(--accent-color); animation: node-running-breathe 2.6s ease-in-out infinite; } @keyframes node-running-breathe { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 28%, transparent), 0 3px 14px color-mix(in srgb, var(--accent-color) 14%, transparent); } 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 45%, transparent), 0 5px 22px color-mix(in srgb, var(--accent-color) 28%, transparent); } } @media (prefers-reduced-motion: reduce) { .canvas-node.status-running { animation: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 38%, transparent), 0 4px 18px color-mix(in srgb, var(--accent-color) 20%, transparent); } } /* Connection line pulse animation */ @keyframes connection-pulse { 0%, 100% { stroke-opacity: 0.6; stroke-width: 2; } 50% { stroke-opacity: 1; stroke-width: 3; } } .connection-active { animation: connection-pulse 1s ease-in-out infinite; } /* Connection handles - diamond shapes on node edges */ .connection-handle { position: absolute; width: 10px; height: 10px; background: var(--background-medium); border: 2px solid var(--border-color); transform: rotate(45deg); cursor: crosshair; transition: all 0.2s ease; z-index: 5; } .connection-handle:hover { background: var(--accent-color); border-color: var(--accent-color); transform: rotate(45deg) scale(1.2); } .connection-handle.handle-top { top: -7px; left: 50%; margin-left: -5px; } .connection-handle.handle-bottom { bottom: -7px; left: 50%; margin-left: -5px; } .connection-handle.handle-left { left: -7px; top: 50%; margin-top: -5px; } .connection-handle.handle-right { right: -7px; top: 50%; margin-top: -5px; } /* Node tags displayed below the node */ .node-tags { position: absolute; display: flex; gap: 4px; transform: translateX(-50%); flex-wrap: wrap; justify-content: center; max-width: 120px; z-index: 15; } .node-tag { background: var(--surface-raised); border: 1px solid var(--accent-color); border-radius: 8px; padding: 2px 8px; font-size: 0.65rem; color: var(--accent-color); white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* ============================================================ Canvas Text Annotations (notes) + floating format toolbar ============================================================ */ .canvas-annotation { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; padding: 12px 14px; border-radius: 10px; cursor: move; overflow: hidden; user-select: none; -webkit-user-select: none; transition: box-shadow 0.18s ease, border-color 0.18s ease, outline-color 0.12s ease; } .canvas-annotation.selected { outline: 2px solid var(--accent-color); outline-offset: 2px; } .canvas-annotation.editing { cursor: text; } .annotation-content { flex: 1 1 auto; width: 100%; min-height: 0; white-space: pre-wrap; word-break: break-word; overflow: hidden; line-height: 1.45; pointer-events: none; /* let the box receive drag/dblclick; text is shown read-only */ } .canvas-annotation.linked-node-note .annotation-content { overflow-y: auto; padding: 0 4px 22px 0; pointer-events: auto; scrollbar-width: thin; } .annotation-placeholder { color: var(--text-muted); font-style: italic; } .annotation-editor { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: none; outline: none; background: transparent; resize: none; padding: 0; margin: 0; line-height: 1.45; overflow: auto; cursor: text; } .annotation-accent-bar { display: none; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; pointer-events: none; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .annotation-delete { position: absolute; top: 4px; right: 6px; width: 18px; height: 18px; padding: 0; border: none; background: transparent; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; border-radius: 4px; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; } .canvas-annotation:hover .annotation-delete, .canvas-annotation.selected .annotation-delete { opacity: 1; } .annotation-delete:hover { background: color-mix(in srgb, var(--error-color) 12%, transparent); color: var(--error-color); } .annotation-resize-handle { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--border-color) 50%); border-bottom-right-radius: 10px; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease; } .canvas-annotation:hover .annotation-resize-handle, .canvas-annotation.selected .annotation-resize-handle { opacity: 1; } .annotation-resize-handle:hover { background: linear-gradient(135deg, transparent 50%, var(--accent-color) 50%); } /* --- Theme presets --- */ .annotation-theme-card { background: var(--surface-card); border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(18, 24, 31, 0.08); } .annotation-theme-card:hover { box-shadow: 0 6px 20px rgba(18, 24, 31, 0.14); } .annotation-theme-sticky { background: linear-gradient(180deg, #fff8d6 0%, #fdeeb0 100%); border: 1px solid #e9d68a; box-shadow: 0 4px 12px rgba(120, 99, 20, 0.18); } .annotation-theme-minimal { background: transparent; border: 1px dashed transparent; box-shadow: none; } .annotation-theme-minimal:hover { border-color: var(--border-color); } .annotation-theme-minimal.selected { border-style: solid; } .annotation-theme-info, .annotation-theme-success, .annotation-theme-warning, .annotation-theme-danger { padding-left: 18px; box-shadow: 0 2px 8px rgba(18, 24, 31, 0.08); } .annotation-theme-info { background: color-mix(in srgb, var(--accent-color) 10%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--accent-color) 35%, var(--surface-card)); } .annotation-theme-info .annotation-accent-bar { display: block; background: var(--accent-color); } .annotation-theme-success { background: color-mix(in srgb, var(--success-color) 10%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--success-color) 35%, var(--surface-card)); } .annotation-theme-success .annotation-accent-bar { display: block; background: var(--success-color); } .annotation-theme-warning { background: color-mix(in srgb, var(--warning-color) 12%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--warning-color) 40%, var(--surface-card)); } .annotation-theme-warning .annotation-accent-bar { display: block; background: var(--warning-color); } .annotation-theme-danger { background: color-mix(in srgb, var(--error-color) 10%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--error-color) 35%, var(--surface-card)); } .annotation-theme-danger .annotation-accent-bar { display: block; background: var(--error-color); } /* --- Floating format toolbar --- */ .annotation-toolbar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 5px; padding: 6px 8px; background: var(--surface-card); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 12px 30px rgba(18, 24, 31, 0.22); max-width: calc(100% - 24px); flex-wrap: wrap; row-gap: 5px; justify-content: center; } .annotation-toolbar .ann-tb-font { height: 30px; max-width: 130px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--surface-card); color: var(--text-primary); font-size: 0.82rem; padding: 0 6px; cursor: pointer; } .annotation-toolbar .ann-tb-size { display: flex; align-items: center; gap: 2px; } .annotation-toolbar .ann-tb-size select { height: 30px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--surface-card); color: var(--text-primary); font-size: 0.82rem; padding: 0 4px; cursor: pointer; } .annotation-toolbar .ann-tb-btn { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-primary); font-size: 0.9rem; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .annotation-toolbar .ann-tb-btn:hover { background: var(--background-dark); } .annotation-toolbar .ann-tb-btn.active { background: color-mix(in srgb, var(--info-color) 16%, transparent); border-color: var(--accent-color); color: var(--text-primary); } .annotation-toolbar .ann-tb-divider { width: 1px; height: 22px; background: var(--border-color); margin: 0 3px; } .annotation-toolbar .ann-tb-color { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; overflow: hidden; border: 1px solid var(--border-color); } .annotation-toolbar .ann-tb-color-glyph { font-weight: 700; font-size: 0.95rem; border-bottom: 3px solid currentColor; line-height: 1.05; pointer-events: none; } .annotation-toolbar .ann-tb-color input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; } .annotation-toolbar .ann-tb-themes { display: flex; align-items: center; gap: 4px; } .annotation-toolbar .ann-tb-swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(18, 24, 31, 0.18); cursor: pointer; padding: 0; transition: transform 0.1s ease, box-shadow 0.12s ease; } .annotation-toolbar .ann-tb-swatch:hover { transform: scale(1.12); } .annotation-toolbar .ann-tb-swatch.active { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--accent-color); } /* "Card" swatch is white – give it a slightly stronger ring so it reads as a chip */ .annotation-toolbar .ann-swatch-card { border-color: var(--border-color); } /* "Minimal" swatch = no background; show a diagonal slash to convey "transparent" */ .annotation-toolbar .ann-swatch-minimal { background: var(--surface-card) !important; background-image: linear-gradient(135deg, transparent 44%, var(--error-color) 44%, var(--error-color) 56%, transparent 56%) !important; } /* Fill color chip (square swatch) — shares .ann-tb-color sizing/behavior with the text-color chip */ .annotation-toolbar .ann-tb-fill-glyph { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(18, 24, 31, 0.28); pointer-events: none; } /* "Style" popover */ .annotation-toolbar .ann-tb-style-wrap { position: relative; display: inline-flex; } .annotation-toolbar .ann-tb-style-btn { white-space: nowrap; font-size: 0.82rem; gap: 3px; padding: 0 9px; } .ann-style-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 286px; background: var(--surface-card); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 16px 36px rgba(18, 24, 31, 0.22); padding: 11px 12px; display: flex; flex-direction: column; gap: 10px; cursor: default; } .ann-style-row { display: flex; align-items: center; gap: 8px; } .ann-style-label { flex: 0 0 56px; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); } .ann-seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: 7px; overflow: hidden; } .ann-seg button { border: none; border-right: 1px solid var(--border-color); background: var(--surface-card); color: var(--text-primary); font-size: 0.76rem; padding: 5px 10px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .ann-seg button:last-child { border-right: none; } .ann-seg button:hover { background: var(--background-dark); } .ann-seg button.active { background: var(--accent-color); color: var(--text-on-primary); } .ann-style-bordercolor { margin-left: auto; } .ann-style-opacity { flex: 1; accent-color: var(--accent-color); cursor: pointer; } .ann-style-opacity-val { width: 40px; text-align: right; font-size: 0.76rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; } /* --- Additional theme presets --- */ .annotation-theme-accent { background: color-mix(in srgb, var(--accent-light) 14%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--accent-light) 40%, var(--surface-card)); box-shadow: 0 2px 8px rgba(18, 24, 31, 0.08); } .annotation-theme-brand { background: color-mix(in srgb, var(--primary-color) 10%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--primary-color) 30%, var(--surface-card)); box-shadow: 0 2px 8px rgba(18, 24, 31, 0.08); } .annotation-theme-lavender { background: #f1ecfc; border: 1px solid #d9cdf3; box-shadow: 0 2px 8px rgba(18, 24, 31, 0.08); } .annotation-theme-slate { background: linear-gradient(180deg, #323c4d 0%, #2b3442 100%); border: 1px solid #3f4a5c; box-shadow: 0 8px 22px rgba(18, 24, 31, 0.30); color: #eef2f7; } .annotation-theme-slate .annotation-placeholder { color: #aeb8c6; } /* Minimap representation of annotations */ .minimap-annotation { position: absolute; background: color-mix(in srgb, var(--text-muted) 28%, transparent); border: 1px solid color-mix(in srgb, var(--text-muted) 45%, transparent); border-radius: 2px; } /* Run outcome: persistent, quiet color coding — tinted border plus a soft matching glow so success/failure reads at a glance without repainting the glass body. */ .canvas-node.status-success { border-color: var(--success-color); box-shadow: 0 0 0 1px color-mix(in srgb, var(--success-color) 28%, transparent), 0 2px 12px color-mix(in srgb, var(--success-color) 16%, transparent); } .canvas-node.status-failure { border-color: var(--error-color); box-shadow: 0 0 0 1px color-mix(in srgb, var(--error-color) 36%, transparent), 0 2px 14px color-mix(in srgb, var(--error-color) 24%, transparent); } /* A node's class is "canvas-node {type} status-{Status}". The bare generic .status-success / .status-failure / .status-* alert+badge rules (shared with .alert-success etc.) set a solid semantic-color background and, being later in the file, were repainting EXECUTED nodes' bodies (e.g. status-success → success-green) instead of the themed accent glass. Re-assert the node glass here at higher specificity ([class*="status-"] = 0,2,0 beats the 0,1,0 alert rules) so a node's run-status only tints its BORDER (above), never its fill. Covers every status value. */ .canvas-node[class*="status-"] { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 12%, transparent) 0%, color-mix(in srgb, var(--accent-color) 6%, transparent) 100%); } /* Trigger indicator on nodes */ .trigger-indicator { position: absolute; top: -12px; left: -14px; font-size: 1rem; z-index: 25; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* Scheduler countdown timer badge */ .scheduler-countdown { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); background: color-mix(in srgb, var(--accent-color) 90%, transparent); border: 1px solid var(--accent-light); border-radius: 6px; padding: 1px 6px; font-size: 0.6rem; font-weight: 600; color: white; white-space: nowrap; z-index: 20; font-family: 'Consolas', 'Monaco', monospace; letter-spacing: 0.5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); animation: countdown-pulse 1s ease-in-out infinite; } @keyframes countdown-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.3; } } .canvas-node.collapsed { width: 60px !important; height: 60px !important; padding: 0; justify-content: center; align-items: center; border-radius: 12px; } .canvas-node.collapsed .node-header { background: transparent; border: none; padding: 0; justify-content: center; width: 100%; } .canvas-node.collapsed .node-drag-handle, .canvas-node.collapsed .node-title, .canvas-node.collapsed .node-action, .canvas-node.collapsed .node-content, .canvas-node.collapsed .node-activity-logs, .canvas-node.collapsed .resize-handle, .canvas-node.collapsed .delete-node, .canvas-node.collapsed .node-name-label { display: none; } .canvas-node.collapsed .node-type-icon { font-size: 2rem; margin: 0; } .node-action:hover { opacity: 1; } .canvas-node .node-header { /* Translucent "green-glass" themed header — accent-tinted. Keep all 3 duplicate .canvas-node .node-header rules identical so dragged and loaded nodes match. */ background: linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 22%, transparent) 0%, color-mix(in srgb, var(--accent-color) 10%, transparent) 100%); border: none; border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent); padding: 4px 6px; display: flex; align-items: center; gap: 6px; width: 100%; border-radius: 3px 3px 0 0; margin: -6px -6px 4px -6px; padding-left: 12px; padding-right: 8px; } /* Node name label with truncation */ .node-name-label { flex: 1; font-size: 0.75rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; opacity: 0.9; letter-spacing: 0.3px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .canvas-node:hover .node-name-label { opacity: 1; color: var(--accent-light); } .canvas-node .node-drag-handle, .canvas-node .node-title, .canvas-node .node-action, .canvas-node .node-content, .canvas-node .node-activity-logs, .canvas-node .delete-node { display: none; } .canvas-node .node-type-icon { font-size: 1.1rem; margin: 0; display: flex; justify-content: center; align-items: center; filter: grayscale(100%) brightness(1.5); flex-shrink: 0; } .canvas-node:hover .delete-node { display: flex; position: absolute; top: -12px; right: -14px; background: var(--error-color); color: white; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; border: 2px solid var(--background-dark); z-index: 25; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .node-content { flex: 1; padding: 0.5rem 0.75rem; overflow: auto; } .node-property { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .node-property label { font-size: 0.75rem; color: var(--text-secondary); min-width: 45px; } .node-property input { flex: 1; padding: 0.25rem 0.5rem; font-size: 0.8rem; background-color: var(--background-dark); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); } .node-property input:focus { outline: none; border-color: var(--accent-color); } /* Ingress/Egress node editors: stack label -> control -> help vertically so inputs are full-width regardless of help-text length. The default .node-property is a flex row, where a long help competes with the input for width and squeezes it (most visibly the Ingress Address field). */ .ingress-egress-fields .node-property { flex-direction: column; align-items: stretch; gap: 0.25rem; margin-bottom: 0.85rem; } .ingress-egress-fields .node-property > label { min-width: 0; } .ingress-egress-fields .node-property input:not([type="checkbox"]), .ingress-egress-fields .node-property select, .ingress-egress-fields .node-property textarea { flex: none; width: 100%; box-sizing: border-box; } .ingress-egress-fields .node-property small { flex: none; line-height: 1.35; } /* Connection Ports */ .connection-port { position: absolute; width: 12px; height: 12px; background-color: var(--accent-color); border: 2px solid var(--background-dark); border-radius: 50%; cursor: crosshair; z-index: 10; } .connection-port.output { right: -6px; top: 50%; transform: translateY(-50%); } .connection-port.input { left: -6px; top: 50%; transform: translateY(-50%); } .connection-port:hover { background-color: var(--accent-color); transform: translateY(-50%) scale(1.2); } /* Resize Handle */ .resize-handle { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--border-color) 50%); border-bottom-right-radius: 6px; } .resize-handle:hover { background: linear-gradient(135deg, transparent 50%, var(--accent-color) 50%); } /* Delete Node Button */ .delete-node { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; padding: 0; border: none; background-color: transparent; color: var(--text-secondary); cursor: pointer; font-size: 1rem; line-height: 1; border-radius: 4px; opacity: 0; transition: all 0.2s ease; } .canvas-node:hover .delete-node { opacity: 1; } .delete-node:hover { background-color: var(--error-color); color: white; } /* Activity Logs */ .node-activity-logs { background-color: var(--background-dark); border-top: 1px solid var(--border-color); padding: 0.5rem; max-height: 150px; overflow-y: auto; font-family: monospace; font-size: 0.75rem; } .log-entry { margin-bottom: 2px; padding: 2px 4px; border-radius: 2px; } .log-entry.info { color: var(--text-secondary); } .log-entry.warning { color: var(--warning-color); } .log-entry.error { color: var(--error-color); background-color: color-mix(in srgb, var(--error-color) 10%, transparent); } .log-time { color: var(--text-secondary); margin-right: 5px; opacity: 0.7; } /* SVG Connections */ .connections-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; } /* Form Check */ .form-check { display: flex; align-items: center; gap: 0.5rem; } .form-check-input { width: 1.1rem; height: 1.1rem; background-color: var(--background-dark); border: 1px solid var(--border-color); border-radius: 4px; } .form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); } .form-check-label { color: var(--text-secondary); font-size: 0.9rem; } /* Responsive */ @media (max-width: 768px) { .node-palette { width: 60px; padding: 0.5rem; } .node-palette h3 { display: none; } .palette-node span { display: none; } .palette-node { justify-content: center; padding: 0.75rem; } } /* Property Modal Styles */ .property-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--overlay-scrim); display: flex; justify-content: center; align-items: center; z-index: 2000; backdrop-filter: blur(4px); } /* A running lesson can ask the learner to open a node editor and change a field. The tutorial dim sits at 9000, so at the default 2000 the editor would render darkened underneath it — tabs, scrolling and the close button all unreachable. Lift editor surfaces above the dim while a lesson is active; the spotlight ring (9200) and the lesson card (9300) still draw on top. */ body.tutorial-active .property-modal-overlay { z-index: 9100; } .property-modal { background-color: var(--background-medium); border: 1px solid var(--border-color); border-radius: 12px; width: 780px; height: 700px; max-width: 95vw; max-height: 95vh; min-width: 400px; min-height: 400px; display: flex; flex-direction: column; box-shadow: var(--shadow-elevated); animation: modal-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); resize: both; overflow: hidden; } @keyframes modal-pop { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .modal-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background-color: var(--background-light); border-top-left-radius: 12px; border-top-right-radius: 12px; } .modal-header h3 { margin: 0; font-size: 1.25rem; color: var(--accent-color); display: flex; align-items: center; gap: 0.75rem; } .modal-close { background: transparent; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; line-height: 1; } .modal-body { padding: 1.5rem; overflow-y: auto; flex: 1; } .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 1rem; } /* AI Assistant Panel */ .ai-assistant-panel { width: 350px; background-color: var(--background-medium); border-left: 1px solid var(--border-color); display: flex; flex-direction: column; transition: width 0.3s ease; z-index: 100; align-self: stretch; } .ai-assistant-panel.collapsed { width: 50px; } .ai-assistant-panel .panel-header { padding: 1rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); height: 50px; flex-shrink: 0; } .ai-assistant-panel .panel-toggle { background: none; border: none; color: var(--text-color); cursor: pointer; font-size: 1rem; padding: 0.5rem; display: flex; align-items: center; justify-content: center; } .ai-chat-container { flex: 1; display: flex; flex-direction: column; padding: 1rem; overflow: hidden; gap: 1rem; } .ai-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; padding-right: 0.5rem; } .ai-messages .message { padding: 0.75rem; border-radius: 8px; max-width: 90%; font-size: 0.9rem; line-height: 1.4; } .ai-messages .message.user { align-self: flex-end; background-color: var(--accent-color); color: white; } .ai-messages .message.assistant { align-self: flex-start; background-color: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); } .ai-input { display: flex; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color); flex-shrink: 0; } .ai-input textarea { flex: 1; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border-color); color: var(--text-color); padding: 0.5rem; border-radius: 4px; resize: none; font-family: inherit; font-size: 0.9rem; } .ai-input button { background: var(--accent-color); border: none; color: white; padding: 0 1rem; border-radius: 4px; cursor: pointer; } .ai-input button:disabled { opacity: 0.5; cursor: not-allowed; } .ai-messages .message.thinking { font-style: italic; color: var(--text-muted); } .hidden { display: none !important; } .palette-category { font-size: 0.75rem; font-weight: bold; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05rem; margin-top: 0.75rem; margin-bottom: 0.25rem; padding: 0.5rem 0.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; } .palette-category:hover { color: var(--accent-color); } .palette-category span { font-size: 0.6rem; opacity: 0.7; } .palette-category:first-of-type { margin-top: 0; } .category-nodes { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; padding-left: 0.25rem; } .openai { border-top: 4px solid #10a37f; } .deepseek { border-top: 4px solid #4d6df3; } .file-move, .file-copy { border-top: 4px solid var(--warning-color); } .write-to-file { border-top: 4px solid var(--error-color); } .data-transform { border-top: 4px solid var(--accent-color); } /* AppXite enterprise polish */ body { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-light) 8%, transparent), rgba(245, 248, 251, 0) 260px), var(--background-dark); } .btn-primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); border-color: var(--primary-color); box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-color) 18%, transparent); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); border-color: var(--primary-dark); } .auth-card { background: var(--surface-card); border-color: var(--border-color); box-shadow: var(--shadow-soft); } .auth-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border-top: 4px solid var(--primary-color); pointer-events: none; } .auth-card h2, .workflow-header h1, .modal-header h3 { color: var(--primary-color); } .form-control, .palette-search input, .toolbar-search input, .node-property input, .ai-input textarea { background: var(--surface-card); border-color: var(--border-color); color: var(--text-primary); } .form-control:focus, .palette-search input:focus, .toolbar-search input:focus, .node-property input:focus, .ai-input textarea:focus { border-color: var(--accent-color); box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--info-color) 16%, transparent); } .workflow-header, .node-palette, .node-toolbar, .ai-assistant-panel, .property-modal, .modal-header, .modal-footer { background: var(--surface-card); border-color: var(--border-color); color: var(--text-primary); } .workflow-canvas-container, .workflow-canvas { background-color: var(--background-dark); } .workflow-canvas { background-image: linear-gradient(color-mix(in srgb, var(--accent-light) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent-light) 10%, transparent) 1px, transparent 1px); background-size: 24px 24px; } .canvas-node, .palette-node, .toolbar-node { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 12%, transparent) 0%, color-mix(in srgb, var(--accent-color) 6%, transparent) 100%); border-color: var(--border-color); box-shadow: var(--shadow-card); } .canvas-node .node-header { background: linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 22%, transparent) 0%, color-mix(in srgb, var(--accent-color) 10%, transparent) 100%); border-bottom-color: color-mix(in srgb, var(--accent-color) 25%, transparent); } .canvas-node:hover, .palette-node:hover, .toolbar-node:hover { border-color: var(--primary-light); box-shadow: 0 14px 30px color-mix(in srgb, var(--primary-color) 12%, transparent); } .canvas-node.selected { border-color: var(--primary-color); outline-color: color-mix(in srgb, var(--primary-color) 24%, transparent); } .connection-handle, .connection-port { background: var(--surface-card); border-color: var(--primary-color); } .connection-handle:hover, .connection-port:hover { background: var(--primary-color); border-color: var(--primary-color); } .category-tab.active, .toolbar-toggle:hover, .palette-toggle:hover { background: color-mix(in srgb, var(--primary-color) 12%, transparent); border-color: var(--primary-color); color: var(--primary-color); } .category-tab:hover, .surface-field:hover { background: color-mix(in srgb, var(--accent-light) 14%, transparent); } .surface-field { background: color-mix(in srgb, var(--navy-color) 4%, transparent); border-left-color: var(--primary-color); } .node-tag { background: var(--surface-card); border-color: var(--primary-color); color: var(--primary-color); } .ai-messages .message.assistant { background: var(--surface-card); border-color: var(--border-color); } .ai-messages .message.user { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); } nav.nav-tabs-container > a.nav-brand { position: absolute !important; left: 2rem !important; display: inline-flex !important; align-items: center; gap: 0.6rem; color: var(--text-primary); text-decoration: none; font-size: 1.25rem; font-weight: 800; letter-spacing: 0; } nav.nav-tabs-container .brand-mark { width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } nav.nav-tabs-container .brand-mark svg { display: block; width: 100%; height: 100%; overflow: visible; } nav.nav-tabs-container .brand-mark-ring { fill: var(--primary-color); } nav.nav-tabs-container .brand-mark-wave { fill: none; stroke: var(--text-on-primary); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; } nav.nav-tabs-container .brand-mark-dot { fill: var(--text-on-primary); } nav.nav-tabs-container .brand-text { display: inline-flex; align-items: baseline; white-space: nowrap; } nav.nav-tabs-container .brand-text-app { color: var(--primary-color); } nav.nav-tabs-container .brand-text-xite { color: var(--primary-color); } nav.nav-tabs-container .brand-text-pulse { color: var(--primary-color); margin-left: 0.32rem; } @media (max-width: 1024px) { nav.nav-tabs-container > a.nav-brand { left: 1rem !important; font-size: 1.1rem; } } @media (max-width: 768px) { nav.nav-tabs-container > a.nav-brand { position: static !important; } } /* Admin and legal readability pass */ .admin-container, .legal-page, .legal-modal, .legal-acceptance-card { color: var(--text-primary) !important; } .admin-header h1 { background: none !important; -webkit-text-fill-color: var(--primary-color) !important; color: var(--primary-color) !important; } .admin-header .subtitle, .admin-container .subtitle, .admin-container .stat-label, .admin-container .limit-display, .admin-container .modal-subtitle, .admin-container small, .admin-container .text-muted { color: var(--text-secondary) !important; } .admin-tabs { border-bottom-color: var(--border-color) !important; } .admin-tab { background: var(--background-medium) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; } .admin-tab:hover, .admin-tab.active { background: var(--background-dark) !important; color: var(--primary-color) !important; } .admin-tab.active { border-color: color-mix(in srgb, var(--primary-color) 36%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 16%, transparent) !important; } .admin-section, .stat-card, .form-section, .category-item, .connector-card, .document-card, .note-card, .plan-card, .org-card, .organization-card, .node-card, .node-definition-card, .pricing-card, .quota-item, .member-limit, .org-quotas, .storage-options, .favicon-preview-section, .cap-card-row { background: var(--surface-raised) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-card) !important; } .admin-section h2, .admin-section h3, .admin-container h2, .admin-container h3, .modal-content h3, .preview-header h3, .notes-header h2, .documents-header h2, .section-header h2, .stat-value { color: var(--primary-color) !important; } .admin-container p, .admin-container li, .admin-container td, .admin-container label, .admin-container .feature-text, .admin-container .connector-description, .admin-container .doc-info, .admin-container .note-info, .admin-container .preview-content { color: var(--text-primary) !important; } .admin-container input, .admin-container select, .admin-container textarea, .admin-container .form-control, .admin-container .search-input, .admin-container .plan-select { background: var(--background-medium) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .admin-container input::placeholder, .admin-container textarea::placeholder { color: var(--text-muted) !important; } .users-table th, .admin-container table th { color: var(--text-secondary) !important; background: var(--background-dark) !important; border-bottom-color: var(--border-color) !important; } .users-table td, .admin-container table td { border-bottom-color: var(--border-color) !important; } .users-table tbody tr:hover, .admin-container table tbody tr:hover { background: var(--background-medium) !important; } .admin-container .modal-overlay, .legal-modal-backdrop, .newsletter-backdrop { background: var(--overlay-scrim) !important; } .admin-container .modal-content, .modal-content.editor-modal, .modal-content.preview-modal, .connectors-admin .modal-content, .plans-manager .modal-content, .legal-documents-section .modal-content, .dev-notes-section .modal-content, .legal-modal, .newsletter-modal { background: var(--surface-raised) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-elevated) !important; } .preview-header, .modal-actions, .legal-modal-header, .legal-modal-footer { border-color: var(--border-color) !important; } .preview-content, .legal-modal-content, .newsletter-content { color: var(--text-primary) !important; background: var(--surface-raised) !important; } .legal-content-container, .legal-acceptance-card { background: var(--surface-raised) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-elevated) !important; } .legal-scroll-box { background: var(--background-medium) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .legal-content-container h2, .legal-content-container h3, .legal-modal-header h2, .legal-modal-content h2, .legal-modal-content h3, .legal-step h3, .newsletter-modal h2, .newsletter-content h2, .newsletter-content h3 { color: var(--primary-color) !important; } .legal-content-container p, .legal-content-container ul, .legal-content-container li, .scroll-hint, .newsletter-content p, .newsletter-content li { color: var(--text-primary) !important; } .update-notice { background: var(--background-medium) !important; border-color: var(--border-color) !important; } /* AppXite gray-balance pass */ body { background: linear-gradient(180deg, rgba(55, 62, 72, 0.08), rgba(232, 235, 239, 0) 260px), var(--background-dark); } .nav-tabs-container, nav.nav-tabs-container { background: var(--surface-overlay) !important; border-bottom-color: var(--border-color) !important; box-shadow: var(--shadow-card) !important; } .nav-item .nav-link { color: var(--text-primary); } .nav-item .nav-link:hover { background: color-mix(in srgb, var(--primary-color) 10%, transparent); } .nav-item .nav-link.active { background: var(--border-color); border: 1px solid var(--border-color); color: var(--text-primary); } .auth-card { background: var(--surface-raised); border-color: var(--border-color); box-shadow: var(--shadow-elevated); } .form-control, .palette-search input, .toolbar-search input, .node-property input, .ai-input textarea { background: var(--background-medium); border-color: var(--border-color); } .workflow-header, .node-palette, .node-toolbar, .ai-assistant-panel, .property-modal, .modal-header, .modal-footer { background: var(--surface-raised); border-color: var(--border-color); } .workflow-header { box-shadow: 0 1px 0 rgba(18, 24, 31, 0.08), 0 8px 18px rgba(18, 24, 31, 0.06); } .workflow-canvas-container, .workflow-canvas { background-color: var(--background-dark); } .workflow-canvas { background-image: linear-gradient(color-mix(in srgb, var(--text-muted) 16%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text-muted) 16%, transparent) 1px, transparent 1px); } .canvas-node, .palette-node, .toolbar-node { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 12%, transparent) 0%, color-mix(in srgb, var(--accent-color) 6%, transparent) 100%); border-color: var(--border-color); box-shadow: var(--shadow-card); } .canvas-node .node-header { background: linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 22%, transparent) 0%, color-mix(in srgb, var(--accent-color) 10%, transparent) 100%); border-bottom-color: color-mix(in srgb, var(--accent-color) 25%, transparent); } .surface-field { background: var(--background-dark); border-left-color: var(--primary-color); color: var(--text-secondary); } .surface-field:hover { background: var(--background-light); } .node-tag, .ai-messages .message.assistant { background: var(--surface-raised); border-color: var(--border-color); } .canvas-node:hover, .palette-node:hover, .toolbar-node:hover { border-color: var(--primary-light); box-shadow: var(--shadow-elevated); } .canvas-node.selected { border-color: var(--primary-color); outline-color: color-mix(in srgb, var(--primary-color) 28%, transparent); } /* Enterprise readability sweep: neutral gray surfaces, dark text, brand accents. These token values were folded into the canonical :root at the top of this file. */ body, main, .content, .page, .logs-page, .settings-page, .connections-page, .organizations-page, .org-detail-page, .kb-page { color: var(--text-primary) !important; } a, .btn-link, .section-link, .workflow-name, .workflows-table .table td a, .kb-page .btn-link, .detail-content a, .rel-target { color: var(--accent-color) !important; } a:hover, .btn-link:hover, .section-link:hover, .workflows-table .table td a:hover, .kb-page .btn-link:hover { color: var(--primary-color) !important; } .text-muted, .small, small, .section-count, .section-description, .connector-description, .connection-meta, .key-meta, .org-description, .usage-label, .entity-date, .detail-date, .hint-text, .add-member-hint, .section-info, .no-connections p, .no-workflows p, .workflow-card-body, .running-workflows-count, .empty-state p, .loading-container, .detail-placeholder, .graph-placeholder { color: var(--text-muted) !important; } .logs-page h1, .logs-page h2, .logs-page h3, .settings-page h1, .settings-page h2, .settings-page h3, .connections-page h1, .connections-page h2, .connections-page h3, .organizations-page h1, .organizations-page h2, .organizations-page h3, .org-detail-page h1, .org-detail-page h2, .org-detail-page h3, .kb-page h1, .kb-page h2, .kb-page h3, .dashboard-section h2, .my-workflows-section h2, .section-title, .settings-header h1, .connections-header h1, .header-content h1, .page-header h2 { color: var(--primary-color) !important; } .dashboard-section, .my-workflows-section, .workflow-card, .logs-page .card, .filters-bar, .retention-settings, .settings-section, .connections-section, .connector-card, .connection-card, .connection-mini, .setup-instructions, .instruction-steps, .device-flow-content, .device-code-display, .new-key-banner, .key-card, .key-display, .code-example, .organizations-page .org-card, .organizations-page .empty-state, .org-detail-page .tab-content, .org-detail-page .member-card, .org-detail-page .danger-zone, .kb-panel, .kb-browser, .kb-detail, .kb-graph, .kb-no-connection, .graph-float, .modal-panel, .detail-modal, .confirm-modal, .modal-content:not(.auth-card), .empty-state:not(.auth-empty-state) { background: var(--surface-raised) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; box-shadow: var(--shadow-card) !important; } .dashboard-section:hover, .my-workflows-section:hover, .workflow-card:hover, .connector-card:hover, .organizations-page .org-card:hover, .key-card:hover { border-color: color-mix(in srgb, var(--primary-color) 34%, transparent) !important; box-shadow: var(--shadow-elevated) !important; } .workflow-card.running, .organizations-page .org-card.active, .connection-mini.designated { background: var(--background-medium) !important; border-color: var(--accent-light) !important; } .card-glow, .workflow-card:hover .card-glow, .workflow-card.running .card-glow { background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--primary-color) 8%, transparent), transparent 62%) !important; } .workflows-table .table, .logs-page .table, .logs-page .table-dark, .settings-page table, .connections-page table, .organizations-page table, .org-detail-page table { --bs-table-color: var(--text-primary) !important; --bs-table-bg: var(--surface-raised) !important; --bs-table-striped-color: var(--text-primary) !important; --bs-table-striped-bg: var(--background-light) !important; --bs-table-hover-color: var(--text-primary) !important; --bs-table-hover-bg: var(--background-light) !important; --bs-table-border-color: var(--border-color) !important; background: var(--surface-raised) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } .workflows-table .table th, .logs-page .table th, .settings-page table th, .connections-page table th, .organizations-page table th, .org-detail-page table th { background: var(--background-light) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; font-weight: 700 !important; } .workflows-table .table td, .logs-page .table td, .settings-page table td, .connections-page table td, .organizations-page table td, .org-detail-page table td { background: transparent !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } .logs-page .table tbody tr.error, .logs-page .table tbody tr.error > * { background: color-mix(in srgb, var(--error-color) 12%, transparent) !important; } .logs-page .table tbody tr.warning, .logs-page .table tbody tr.warning > * { background: color-mix(in srgb, var(--warning-color) 18%, transparent) !important; } .logs-page .logs-table-container, .workflows-table { border-color: var(--border-color) !important; box-shadow: var(--shadow-card) !important; } .form-control, .form-select, .settings-page input, .settings-page select, .settings-page textarea, .connections-page input, .connections-page select, .connections-page textarea, .organizations-page input, .organizations-page select, .organizations-page textarea, .org-detail-page input, .org-detail-page select, .org-detail-page textarea, .logs-page input, .logs-page select, .logs-page textarea, .kb-page input, .kb-page select, .kb-page textarea, .secret-input-group input, .graph-depth-select { background: var(--background-medium) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .form-control:focus, .form-select:focus, .settings-page input:focus, .settings-page select:focus, .settings-page textarea:focus, .connections-page input:focus, .connections-page select:focus, .connections-page textarea:focus, .organizations-page input:focus, .organizations-page select:focus, .organizations-page textarea:focus, .org-detail-page input:focus, .org-detail-page select:focus, .org-detail-page textarea:focus, .logs-page input:focus, .logs-page select:focus, .logs-page textarea:focus, .kb-page input:focus, .kb-page select:focus, .kb-page textarea:focus { background: var(--surface-raised) !important; border-color: var(--accent-color) !important; color: var(--text-primary) !important; } .form-control::placeholder, .settings-page input::placeholder, .settings-page textarea::placeholder, .connections-page input::placeholder, .connections-page textarea::placeholder, .organizations-page input::placeholder, .organizations-page textarea::placeholder, .org-detail-page input::placeholder, .org-detail-page textarea::placeholder, .logs-page input::placeholder, .logs-page textarea::placeholder, .kb-page input::placeholder, .kb-page textarea::placeholder { color: var(--text-muted) !important; opacity: 1 !important; } .settings-page .tab-button, .org-detail-page .tab, .expiry-btn, .btn-outline, .btn-outline-secondary, .btn-outline-primary, .btn-secondary, .btn-toggle, .btn-icon, .btn-icon-sm, .modal-close, .search-clear { background: var(--background-dark) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .settings-page .tab-button:hover, .org-detail-page .tab:hover, .expiry-btn:hover, .btn-outline:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-secondary:hover, .btn-toggle:hover, .btn-icon:hover, .btn-icon-sm:hover, .modal-close:hover, .search-clear:hover { background: var(--background-light) !important; color: var(--primary-color) !important; } .settings-page .tab-button.active, .org-detail-page .tab.active, .expiry-btn.active, .type-item.active, .entity-item.selected, .tag-chip.active, .btn-graph-active { background: color-mix(in srgb, var(--primary-color) 10%, transparent) !important; border-color: color-mix(in srgb, var(--primary-color) 38%, transparent) !important; color: var(--primary-color) !important; } .btn-primary, .btn-danger, .btn-success, .kb-page .btn-primary, .kb-page .btn-danger { color: var(--text-on-primary) !important; } .btn-warning { color: var(--text-primary) !important; } .btn-primary, .kb-page .btn-primary { background: var(--primary-color) !important; border-color: var(--primary-dark) !important; } .btn-primary:hover, .kb-page .btn-primary:hover { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; } .badge.bg-info, .level-badge.info { background: var(--accent-color) !important; color: var(--text-on-primary) !important; } .badge.bg-warning, .status-badge.warning { background: var(--warning-color) !important; color: var(--text-primary) !important; } .badge.bg-danger, .status-badge.error { background: var(--error-color) !important; color: var(--text-on-primary) !important; } .status-badge.running, .role-badge.personal, .active-badge, .entity-type-pill, .tag-chip, .consent-type-badge, .type-count { background: color-mix(in srgb, var(--accent-color) 15%, transparent) !important; border-color: color-mix(in srgb, var(--accent-color) 40%, transparent) !important; color: var(--accent-color) !important; } .role-badge.founder, .role-badge.owner, .role-badge.contributor { background: var(--background-light) !important; color: var(--text-primary) !important; } .role-badge.disabled-badge, .revoked-badge, .expired-badge { background: color-mix(in srgb, var(--error-color) 18%, transparent) !important; color: var(--error-color) !important; } .settings-header, .connections-header, .page-header, .detail-header, .modal-header, .modal-footer, .kb-topbar, .browser-section, .graph-header, .graph-float-header, .add-member-form, .kb-secrets-section { border-color: var(--border-color) !important; } .kb-page { background: transparent !important; } .kb-topbar, .graph-float-header { background: var(--background-dark) !important; color: var(--text-primary) !important; } .kb-brand, .kb-title, .entity-item-title, .detail-title, .modal-header h3, .member-name, .key-name, .connection-name, .connector-name, .org-name, .workflow-card-header h4 { color: var(--text-primary) !important; } .type-item, .entity-item, .detail-content, .detail-content p, .detail-content li, .detail-content td, .prop-val, .relation-item, .entity-search-item, .form-check, .modal-body, .detail-modal .modal-body, .confirm-modal p, .settings-page p, .connections-page p, .organizations-page p, .org-detail-page p { color: var(--text-primary) !important; } .detail-content h1, .detail-content h2, .detail-content h3, .detail-content h4, .detail-content strong, .prop-key, .section-label, .rel-direction, .rel-type { color: var(--text-primary) !important; } .detail-content pre, .detail-pre, .code-example, .key-display, .entity-search-results { background: var(--background-dark) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .detail-content code, .detail-pre code, .code-example code, .key-display code, .settings-header code, .section-description code, .uri-code { background: var(--background-light) !important; color: var(--text-primary) !important; } .modal-overlay, .modal-backdrop { background: var(--overlay-scrim) !important; backdrop-filter: blur(3px) !important; } .danger-zone, .modal-content.danger-modal { background: color-mix(in srgb, var(--error-color) 12%, transparent) !important; border-color: color-mix(in srgb, var(--error-color) 45%, transparent) !important; } .warning-text, .upgrade-notice, .grace-countdown, .danger-zone h3 { color: var(--error-color) !important; } .status-success, .alert-success, .kb-status-banner.success { background: color-mix(in srgb, var(--success-color) 15%, transparent) !important; border-color: color-mix(in srgb, var(--success-color) 45%, transparent) !important; color: var(--success-color) !important; } .status-error, .alert-danger, .kb-status-banner.error, .modal-error, .delete-warning { background: color-mix(in srgb, var(--error-color) 14%, transparent) !important; border-color: color-mix(in srgb, var(--error-color) 45%, transparent) !important; color: var(--error-color) !important; } .settings-page [style*="color"], .connections-page [style*="color"], .organizations-page [style*="color"], .org-detail-page [style*="color"], .logs-page [style*="color"], .dashboard-section [style*="color"], .my-workflows-section [style*="color"] { color: var(--text-primary) !important; } .canvas-node, .palette-node, .toolbar-node, .node-palette, .node-toolbar, .ai-assistant-panel, .property-modal { color: var(--text-primary) !important; } .canvas-node .node-title, .canvas-node .node-header, .surface-field, .surface-field *, .palette-node *, .toolbar-node *, .node-property label, .node-property span, .ai-assistant-panel p, .ai-assistant-panel label { color: var(--text-primary) !important; } .canvas-node .node-icon, .palette-node .node-icon, .toolbar-node .node-icon { color: var(--primary-color) !important; } .node-activity-logs, .ai-messages .message, .property-modal .modal-body { background: var(--surface-raised) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } /* Radzen Blazor theming — the --rz-* primary palette is defined in the canonical :root at the top of this file and re-tinted at runtime by BrandingCssBuilder, so the HtmlEditor toolbar, focus rings, and other Radzen accents follow the brand color. The light variant of Radzen's CSS (material.css) is loaded in App.razor. */ /* HtmlEditor: keep the content surface flush with the rest of the light theme. */ .rz-html-editor { border-color: var(--border-color) !important; border-radius: 8px !important; background: var(--surface-card); } .rz-html-editor-content, .rz-html-editor-source.rz-textarea { background-color: var(--surface-card) !important; color: var(--text-primary) !important; min-height: 280px; } .rz-html-editor-toolbar { background-color: var(--background-medium) !important; border-bottom: 1px solid var(--border-color) !important; } .rz-html-editor-toolbar .rz-html-editor-button:hover, .rz-html-editor-toolbar .rz-html-editor-colorpicker:hover { background: color-mix(in srgb, var(--primary-color) 8%, transparent) !important; color: var(--primary-color) !important; } .rz-html-editor-toolbar .rz-html-editor-button.rz-state-active, .rz-html-editor-toolbar .rz-state-active { background: color-mix(in srgb, var(--primary-color) 12%, transparent) !important; color: var(--primary-color) !important; } /* ============================================================ Per-node custom shapes & colours (designer Style tab). - Box-model shapes (rectangle/rounded/pill/circle) keep the div + CSS border/border-radius; custom fill/border arrive as INLINE styles on the node (they beat the non-!important base .canvas-node rules). - Polygon shapes (diamond/hexagon) carry .node-shaped and are painted by an inline SVG layer (.node-shape-bg) so the border stays crisp; the div is a transparent positioning box. - Custom TEXT colour rides the --node-text-color custom property because the base text-colour rules are !important and a plain inline colour would lose. ============================================================ */ .canvas-node.shape-rounded { border-radius: 12px; } .canvas-node.shape-pill { border-radius: 999px; } .canvas-node.shape-circle { border-radius: 50%; } .canvas-node.node-shaped { background: transparent !important; border: none !important; box-shadow: none !important; } .canvas-node.node-shaped.selected { outline: none !important; } .canvas-node .node-shape-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; } /* Selection / run-status recolour the polygon stroke (the div's border/outline isn't drawn). */ .canvas-node.node-shaped.selected .node-shape-bg polygon { stroke: var(--accent-color) !important; stroke-width: 2.5 !important; } .canvas-node.node-shaped.status-success .node-shape-bg polygon { stroke: var(--success-color) !important; } .canvas-node.node-shaped.status-failure .node-shape-bg polygon { stroke: var(--error-color) !important; } .canvas-node.node-shaped.status-running .node-shape-bg polygon { stroke: var(--accent-color) !important; } /* Keep node content above the shape layer. */ .canvas-node > .node-header, .canvas-node > .node-surface-fields { position: relative; z-index: 1; } /* Constrained shapes (circle/diamond/hexagon): drop the header bar, centre the icon + label, and let the label WRAP inside the shape's inscribed area instead of single-line truncation. */ .canvas-node.node-constrained { align-items: center; justify-content: center; } .canvas-node.node-constrained .node-header { background: transparent; border: none; /* Nudge the name slightly above the geometric centre; surface fields flow below it. */ margin: 0 0 6px; padding: 0; width: 100%; /* Icon + name read horizontally (NOT stacked vertically). */ flex-direction: row; align-items: center; justify-content: center; gap: 5px; } .canvas-node.node-constrained .node-name-label { flex: 0 1 auto; white-space: normal; /* Wrap at word boundaries — never one character per line. */ overflow-wrap: break-word; word-break: normal; text-align: center; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .canvas-node.node-constrained .node-surface-fields { width: 100%; margin-left: 0; align-items: center; } .canvas-node.node-constrained .surface-field { white-space: normal; overflow-wrap: anywhere; text-align: center; max-width: 100%; } /* Per-shape inscribed insets are applied inline in px (proportional to the node's own size) by GetNodeStyle — NOT as percentage padding here, which would resolve against the canvas and balloon the node. */ /* Custom text colour beats the base !important text rules via higher specificity. */ .canvas-node[style*="--node-text-color"] .node-name-label, .canvas-node[style*="--node-text-color"] .node-header, .canvas-node[style*="--node-text-color"] .surface-field, .canvas-node[style*="--node-text-color"] .surface-field * { color: var(--node-text-color) !important; }