/* AgentLeash Dark Mode Toggle: add class "dark" to element Auto-detect: prefers-color-scheme */ html.dark { --bg: #0f1117; --surface: #1a1d27; --border: #2d3348; --text: #e2e8f0; --muted: #8892a8; --accent: #818cf8; --accent-hover: #6366f1; --green: #34d399; --red: #f87171; --amber: #fbbf24; --green-bg: #064e3b; --red-bg: #7f1d1d; --amber-bg: #78350f; --sidebar-bg: #141620; --sidebar-border: #2d3348; --input-bg: #1e2130; --card-shadow: 0 1px 3px rgba(0,0,0,0.4); } /* Global overrides for dark mode */ html.dark body { background: var(--bg); color: var(--text); } html.dark input, html.dark textarea, html.dark select { background: var(--input-bg); color: var(--text); border-color: var(--border); } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--muted); } html.dark .sidebar { background: var(--sidebar-bg) !important; border-color: var(--sidebar-border) !important; } html.dark .sidebar a { color: var(--muted) !important; } html.dark .sidebar a:hover, html.dark .sidebar a.active { color: var(--text) !important; background: rgba(129,140,248,0.1) !important; } html.dark .sidebar .section-label { color: var(--muted) !important; } /* Cards and panels */ html.dark .stat-card, html.dark .panel, html.dark .card, html.dark .wizard-card, html.dark .token-card, html.dark .vault-card { background: var(--surface) !important; border-color: var(--border) !important; } /* Tables */ html.dark table { border-color: var(--border); } html.dark th { background: var(--surface) !important; color: var(--muted) !important; border-color: var(--border) !important; } html.dark td { border-color: var(--border) !important; color: var(--text) !important; } html.dark tr:hover td { background: rgba(129,140,248,0.05) !important; } /* Buttons */ html.dark .btn-primary, html.dark button[class*="primary"] { background: var(--accent) !important; } html.dark .btn-primary:hover { background: var(--accent-hover) !important; } /* Status badges */ html.dark .badge, html.dark .status-badge { border-color: var(--border); } /* Code blocks */ html.dark code, html.dark pre { background: #0d0f16 !important; color: #a5b4fc !important; } /* Modals */ html.dark .modal-overlay { background: rgba(0,0,0,0.7) !important; } html.dark .modal, html.dark .modal-content { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } /* Permission tags */ html.dark .perm-tag { opacity: 0.9; } html.dark .perm-allowed { background: var(--green-bg); color: var(--green); } html.dark .perm-blocked { background: var(--red-bg); color: var(--red); } /* Tool grid buttons (demo page) */ html.dark .tool-btn { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } html.dark .tool-btn:hover { border-color: var(--accent) !important; background: rgba(129,140,248,0.1) !important; } html.dark .tool-btn .tool-desc { color: var(--muted) !important; } /* Chain options, permission cards */ html.dark .chain-option, html.dark .perm-card, html.dark .cap-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; } html.dark .chain-option:hover, html.dark .perm-card:hover, html.dark .cap-card:hover { border-color: var(--accent) !important; } html.dark .chain-option.selected { border-color: var(--accent) !important; background: rgba(129,140,248,0.1) !important; } /* NL input */ html.dark .nl-input, html.dark .nl-textarea { background: var(--input-bg) !important; color: var(--text) !important; border-color: var(--border) !important; } /* Perms preview */ html.dark .perms-preview { background: var(--surface) !important; border-color: var(--border) !important; } /* Header gradient - darken it */ html.dark .header { background: linear-gradient(135deg, #1e1b4b, #312e81) !important; } /* Log container already dark, keep it */ /* Scrollbar */ html.dark ::-webkit-scrollbar { width: 8px; } html.dark ::-webkit-scrollbar-track { background: var(--bg); } html.dark ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: var(--muted); }