/* ncw.tokens.css — global design tokens */ :root { /* Layout */ --ncw-radius-sm: 8px; --ncw-radius-md: 12px; /* Neutral palette (light) */ --ncw-surface: #ffffff; --ncw-surface-2: #f8fafc; /* subtle gray */ --ncw-surface-3: #f3f4f6; /* slightly darker gray */ --ncw-border: #e5e7eb; --ncw-border-light: rgba(0, 0, 0, 0.05); --ncw-text: #0f172a; --ncw-text-secondary: #4b5563; --ncw-muted: #64748b; /* Accent */ --ncw-accent: #4f46e5; /* indigo */ --ncw-primary: #4f46e5; /* Chat-specific */ --ncw-chat-bot-bg: #f3f4f6; --ncw-chat-bot-color: #1f2937; --ncw-chat-user-bg: #4f46e5; --ncw-chat-user-color: #ffffff; --ncw-chat-input-bg: #ffffff; --ncw-chat-input-border: #d1d5db; /* Component backgrounds */ --ncw-header-bg: #fafafa; --ncw-topbar-bg: #ffffff; --ncw-card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* OA admin panel tokens */ --oa-bg: #ffffff; --oa-border: #e9eaee; --oa-text: #111827; --oa-muted: #6b7280; --oa-panel-bg: #ffffff; --oa-kv-value: #475569; --oa-nav-active-bg: #f4f5f7; --oa-filter-bg: #f8fafc; --oa-code-bg: #f1f5f9; --oa-code-color: #475569; --oa-modal-bg: #ffffff; --oa-tag-bg: #f3f4f6; --oa-tag-color: #475569; /* Shadows (keep light) */ --ncw-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --ncw-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08); /* Three-panel widths */ --ncw-left-width: 320px; --ncw-right-width: 360px; } /* Dark mode overrides: Bootstrap 5.3 applies data-bs-theme on . */ html[data-bs-theme="dark"] { /* --- Neutral surface hierarchy (3 levels) --- */ --ncw-surface: #111318; /* Base background */ --ncw-surface-2: #1a1d24; /* Cards, panels */ --ncw-surface-3: #22262e; /* Elevated: modals, dropdowns, hover states */ --ncw-surface-elevated: #282c35; /* Highest elevation: popovers, tooltips */ /* --- Borders --- */ --ncw-border: #2e3340; --ncw-border-light: rgba(255, 255, 255, 0.06); /* --- Text hierarchy --- */ --ncw-text: #e4e6ea; --ncw-text-secondary: #9ca3af; --ncw-muted: #6b7280; /* --- Sidebar: solid dark, no gradient --- */ --ncw-sidebar-bg: #0d0f14; --ncw-sidebar-section: rgba(255, 255, 255, 0.04); --ncw-sidebar-active: rgba(79, 108, 229, 0.12); --ncw-sidebar-text: #c9cdd4; --ncw-sidebar-text-active: #fff; /* --- Accent (muted blue-indigo, not saturated purple) --- */ --ncw-accent: #4f6ce5; --ncw-accent-hover: #6b82eb; --ncw-accent-subtle: rgba(79, 108, 229, 0.1); /* --- FAB (floating button — muted, not saturated) --- */ --ncw-fab-bg: #3b4f8a; --ncw-fab-hover-shadow: 0 6px 20px rgba(59, 79, 138, 0.3); /* --- Chat-specific dark --- */ --ncw-chat-bot-bg: #1a1d24; --ncw-chat-bot-color: #dee2e6; --ncw-chat-user-bg: #2d4175; --ncw-chat-user-color: #e4e6ea; --ncw-chat-input-bg: #1a1d24; --ncw-chat-input-border: #2e3340; /* --- Component backgrounds dark --- */ --ncw-header-bg: #111318; --ncw-topbar-bg: #111318; --ncw-card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); /* --- OA admin panel dark --- */ --oa-bg: #111318; --oa-border: #2e3340; --oa-text: #e4e6ea; --oa-muted: #6b7280; --oa-panel-bg: #1a1d24; --oa-kv-value: #9ca3af; --oa-nav-active-bg: #22262e; --oa-filter-bg: #1a1d24; --oa-code-bg: #1a1d24; --oa-code-color: #9ca3af; --oa-modal-bg: #1a1d24; --oa-tag-bg: #22262e; --oa-tag-color: #9ca3af; --ncw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --ncw-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); } /* --- Dark mode global overrides --- */ html[data-bs-theme="dark"] body { background-color: var(--ncw-surface) !important; color: var(--ncw-text) !important; } /* Cards: consistent surface-2 background with subtle border */ html[data-bs-theme="dark"] .card { background-color: var(--ncw-surface-2) !important; border-color: var(--ncw-border) !important; color: var(--ncw-text) !important; } html[data-bs-theme="dark"] .card-body { color: var(--ncw-text) !important; } /* Top bar: dark background matching sidebar */ html[data-bs-theme="dark"] .top-bar, html[data-bs-theme="dark"] .border-bottom { background-color: var(--ncw-topbar-bg) !important; border-color: var(--ncw-border) !important; } /* Forms: visible in dark mode */ html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select { background-color: var(--ncw-surface-3) !important; border-color: var(--ncw-border) !important; color: var(--ncw-text) !important; } html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .form-select:focus { border-color: var(--ncw-accent) !important; box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important; } /* Radio buttons and checkboxes: visible borders */ html[data-bs-theme="dark"] .form-check-input { background-color: var(--ncw-surface-3) !important; border-color: var(--ncw-border) !important; } html[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--ncw-accent) !important; border-color: var(--ncw-accent) !important; } /* List groups */ html[data-bs-theme="dark"] .list-group-item { background-color: var(--ncw-surface-2) !important; border-color: var(--ncw-border) !important; color: var(--ncw-text) !important; } /* Table headers */ html[data-bs-theme="dark"] th { color: var(--ncw-text-secondary) !important; } /* Text utilities */ html[data-bs-theme="dark"] .text-muted { color: var(--ncw-muted) !important; } html[data-bs-theme="dark"] .text-dark { color: var(--ncw-text) !important; } /* Shadow override — reduce intensity for dark mode */ html[data-bs-theme="dark"] .shadow-sm { box-shadow: var(--ncw-shadow-sm) !important; } /* Badges: slightly more contrast */ html[data-bs-theme="dark"] .badge { border: 1px solid rgba(255,255,255,0.08); } /* bg-white / bg-light overrides for dark */ html[data-bs-theme="dark"] .bg-white { background-color: var(--ncw-surface-2) !important; } html[data-bs-theme="dark"] .bg-light { background-color: var(--ncw-surface-2) !important; color: var(--ncw-text) !important; } /* badge.bg-light — used for focus area tags, misc labels */ html[data-bs-theme="dark"] .badge.bg-light { background-color: var(--ncw-surface-3) !important; color: var(--ncw-text-secondary) !important; border: 1px solid var(--ncw-border) !important; } html[data-bs-theme="dark"] .badge.bg-light.text-dark { color: var(--ncw-text) !important; } /* text-dark override in dark mode contexts */ html[data-bs-theme="dark"] .card .text-dark, html[data-bs-theme="dark"] .badge .text-dark, html[data-bs-theme="dark"] .alert .text-dark { color: var(--ncw-text) !important; } /* btn-outline-* transparent bg in dark mode */ html[data-bs-theme="dark"] .btn-outline-primary { background-color: transparent !important; color: var(--ncw-accent) !important; border-color: var(--ncw-accent) !important; } html[data-bs-theme="dark"] .btn-outline-primary:hover { background-color: var(--ncw-accent) !important; color: #fff !important; } html[data-bs-theme="dark"] .btn-outline-secondary { background-color: transparent !important; color: var(--ncw-text-secondary) !important; border-color: var(--ncw-border) !important; } html[data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: var(--ncw-surface-3) !important; color: var(--ncw-text) !important; } html[data-bs-theme="dark"] .btn-outline-info { background-color: transparent !important; color: #67e8f9 !important; border-color: rgba(6, 182, 212, 0.4) !important; } html[data-bs-theme="dark"] .btn-outline-info:hover { background-color: rgba(6, 182, 212, 0.15) !important; color: #67e8f9 !important; } html[data-bs-theme="dark"] .btn-outline-warning { background-color: transparent !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.4) !important; } html[data-bs-theme="dark"] .btn-outline-warning:hover { background-color: rgba(245, 158, 11, 0.15) !important; color: #fcd34d !important; } /* --- RunTraceViewer dark mode (agent pipeline visualization) --- */ html[data-bs-theme="dark"] .step-card { background: var(--ncw-surface-2) !important; border-color: var(--ncw-border) !important; } html[data-bs-theme="dark"] .step-card:hover { border-color: #4f46e5 !important; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15) !important; } html[data-bs-theme="dark"] .step-header:hover { background: var(--ncw-surface-3) !important; } html[data-bs-theme="dark"] .step-details { background: var(--ncw-surface) !important; border-color: var(--ncw-border) !important; } html[data-bs-theme="dark"] .step-summary { background: var(--ncw-surface-2) !important; border-color: var(--ncw-border) !important; color: var(--ncw-text-secondary) !important; } html[data-bs-theme="dark"] .step-type { color: var(--ncw-text) !important; } html[data-bs-theme="dark"] .step-type.type-plan { color: #fbbf24 !important; } html[data-bs-theme="dark"] .step-type.type-routing { color: #60a5fa !important; } html[data-bs-theme="dark"] .step-type.type-specialist { color: #34d399 !important; } html[data-bs-theme="dark"] .step-type.type-tool { color: #818cf8 !important; } html[data-bs-theme="dark"] .step-type.type-llm { color: #a78bfa !important; } html[data-bs-theme="dark"] .step-type.type-output { color: #34d399 !important; } html[data-bs-theme="dark"] .step-type.type-error { color: #f87171 !important; } html[data-bs-theme="dark"] .step-duration { background: var(--ncw-surface-3) !important; color: var(--ncw-text-secondary) !important; } html[data-bs-theme="dark"] .step-line { background: var(--ncw-border) !important; } html[data-bs-theme="dark"] .step-marker { background: var(--ncw-surface-3) !important; border-color: var(--ncw-border) !important; } /* Step marker category colors are intentionally preserved for semantic meaning */ /* --- Inline style overrides for dark mode (chat containers, toolbars) --- */ html[data-bs-theme="dark"] .chat-container, html[data-bs-theme="dark"] [style*="background: #f8f9fa"], html[data-bs-theme="dark"] [style*="background-color: #f8f9fa"] { background: var(--ncw-surface-2) !important; } /* --- Code blocks in dark mode --- */ html[data-bs-theme="dark"] code { background-color: var(--ncw-surface-3) !important; color: #e879f9 !important; } html[data-bs-theme="dark"] pre { background-color: var(--ncw-surface) !important; color: var(--ncw-text) !important; } /* --- AdminMemoryManagement dark mode --- */ html[data-bs-theme="dark"] .memory-card, html[data-bs-theme="dark"] .memory-panel { background: var(--ncw-surface-2) !important; border-color: var(--ncw-border) !important; } /* --- Tables: proper dark borders and row alternation --- */ html[data-bs-theme="dark"] .table { color: var(--ncw-text) !important; --bs-table-bg: var(--ncw-surface) !important; --bs-table-border-color: var(--ncw-border) !important; --bs-table-striped-bg: var(--ncw-surface-2) !important; --bs-table-hover-bg: var(--ncw-surface-3) !important; } html[data-bs-theme="dark"] .table > tbody > tr > * { background-color: var(--ncw-surface) !important; color: var(--ncw-text) !important; border-bottom-color: var(--ncw-border) !important; } html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--ncw-surface-2) !important; color: var(--ncw-text) !important; } html[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--ncw-surface-3) !important; } /* table-light header row in dark mode */ html[data-bs-theme="dark"] .table-light, html[data-bs-theme="dark"] thead.table-light > tr > th { background-color: var(--ncw-surface-2) !important; color: var(--ncw-text-secondary) !important; border-color: var(--ncw-border) !important; } /* --- Dropdowns dark mode --- */ html[data-bs-theme="dark"] .dropdown-menu { background-color: var(--ncw-surface-elevated) !important; border-color: var(--ncw-border) !important; } html[data-bs-theme="dark"] .dropdown-item { color: var(--ncw-text) !important; } html[data-bs-theme="dark"] .dropdown-item:hover { background-color: var(--ncw-surface-3) !important; } /* --- Modals dark mode --- */ html[data-bs-theme="dark"] .modal-content { background-color: var(--ncw-surface-2) !important; border-color: var(--ncw-border) !important; color: var(--ncw-text) !important; } html[data-bs-theme="dark"] .modal-header { border-color: var(--ncw-border) !important; } html[data-bs-theme="dark"] .modal-footer { border-color: var(--ncw-border) !important; } /* --- Tabs dark mode --- */ html[data-bs-theme="dark"] .nav-tabs { border-color: var(--ncw-border) !important; } html[data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--ncw-text-secondary) !important; } html[data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--ncw-surface-2) !important; border-color: var(--ncw-border) var(--ncw-border) var(--ncw-surface-2) !important; color: var(--ncw-text) !important; } /* --- Alert boxes: reduce brightness in dark mode --- */ html[data-bs-theme="dark"] .alert-info { background-color: rgba(59, 130, 246, 0.1) !important; border-color: rgba(59, 130, 246, 0.2) !important; color: #93c5fd !important; } html[data-bs-theme="dark"] .alert-warning { background-color: rgba(245, 158, 11, 0.1) !important; border-color: rgba(245, 158, 11, 0.2) !important; color: #fcd34d !important; } html[data-bs-theme="dark"] .alert-success { background-color: rgba(16, 185, 129, 0.1) !important; border-color: rgba(16, 185, 129, 0.2) !important; color: #6ee7b7 !important; } html[data-bs-theme="dark"] .alert-danger { background-color: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important; } /* --- Scrollbar dark mode --- */ html[data-bs-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: var(--ncw-surface); } html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--ncw-border); border-radius: 4px; } html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4b5563; } /* --- Pill/badge category colors: muted for dark mode --- */ html[data-bs-theme="dark"] .badge.bg-primary { background-color: rgba(59, 130, 246, 0.2) !important; color: #93c5fd !important; } html[data-bs-theme="dark"] .badge.bg-success { background-color: rgba(16, 185, 129, 0.2) !important; color: #6ee7b7 !important; } html[data-bs-theme="dark"] .badge.bg-warning { background-color: rgba(245, 158, 11, 0.2) !important; color: #fcd34d !important; } html[data-bs-theme="dark"] .badge.bg-danger { background-color: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important; } html[data-bs-theme="dark"] .badge.bg-info { background-color: rgba(6, 182, 212, 0.2) !important; color: #67e8f9 !important; } html[data-bs-theme="dark"] .badge.bg-secondary { background-color: rgba(75, 85, 99, 0.3) !important; color: #9ca3af !important; } /* --- Primary buttons: muted blue instead of saturated purple/indigo --- */ html[data-bs-theme="dark"] .btn-primary { background-color: #3b5998 !important; border-color: #3b5998 !important; color: #e4e6ea !important; } html[data-bs-theme="dark"] .btn-primary:hover { background-color: #4a6baf !important; border-color: #4a6baf !important; } /* --- Purple gradient buttons → solid muted indigo --- */ html[data-bs-theme="dark"] .btn-gradient, html[data-bs-theme="dark"] [style*="linear-gradient"] { background: #3b4f8a !important; border: none !important; } /* --- FAB (floating action button) --- */ html[data-bs-theme="dark"] .fab-button, html[data-bs-theme="dark"] .btn-floating, html[data-bs-theme="dark"] [class*="position-fixed"][class*="rounded-circle"] { background-color: var(--ncw-fab-bg) !important; opacity: 0.85; } /* --- Bright "subtle" backgrounds: tone down --- */ html[data-bs-theme="dark"] .bg-primary-subtle { background-color: rgba(59, 130, 246, 0.1) !important; } html[data-bs-theme="dark"] .bg-success-subtle { background-color: rgba(16, 185, 129, 0.1) !important; } html[data-bs-theme="dark"] .bg-warning-subtle { background-color: rgba(245, 158, 11, 0.1) !important; } html[data-bs-theme="dark"] .bg-danger-subtle { background-color: rgba(239, 68, 68, 0.1) !important; } html[data-bs-theme="dark"] .bg-info-subtle { background-color: rgba(6, 182, 212, 0.1) !important; } html[data-bs-theme="dark"] .text-primary { color: #7da1e8 !important; } html[data-bs-theme="dark"] .text-success { color: #6ee7b7 !important; } html[data-bs-theme="dark"] .text-danger { color: #fca5a5 !important; } html[data-bs-theme="dark"] .text-warning { color: #fcd34d !important; } html[data-bs-theme="dark"] .text-info { color: #67e8f9 !important; } /* --- Placeholder/empty state text --- */ html[data-bs-theme="dark"] .text-body-secondary { color: var(--ncw-muted) !important; } /* --- Data tables: prevent column truncation at right edge --- */ .table-responsive > .table { min-width: 600px; } .table-responsive > .table th, .table-responsive > .table td { white-space: nowrap; } .table-responsive > .table td.text-wrap { white-space: normal; } /* Optional helpers */ .ncw-surface { background: var(--ncw-surface); } .ncw-surface-2 { background: var(--ncw-surface-2); } .ncw-border { border-color: var(--ncw-border) !important; } .ncw-text { color: var(--ncw-text) !important; } .ncw-muted { color: var(--ncw-muted) !important; } /* --- Responsive utilities --- */ @media (max-width: 767.98px) { .ncw-hide-mobile { display: none !important; } .ncw-stack-mobile { flex-direction: column !important; } .ncw-full-mobile { width: 100% !important; } } @media (min-width: 768px) { .ncw-hide-desktop { display: none !important; } } @media (min-width: 768px) and (max-width: 1199.98px) { .ncw-hide-tablet { display: none !important; } }