:root { /* Refined dark — Linear/Vercel-style near-black with cool undertone */ --bg: #0a0c11; --panel: #11141b; --panel-2: #1a1e27; --panel-3: #232834; --border: #232834; --border-2: #2d3441; --text: #e7e9ee; --text-2: #b8bcc7; --muted: #7a8090; /* Primary accent — confident rose, single brand color */ --accent: #f43f5e; --accent-hover: #e11d48; --accent-soft: rgba(244, 63, 94, 0.12); /* Status palette — professional, restrained */ --info: #60a5fa; --info-soft: rgba(96, 165, 250, 0.12); --success: #34d399; --success-soft: rgba(52, 211, 153, 0.12); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.12); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.12); --shadow: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.55); --radius: 8px; --radius-lg: 12px; } /* Light theme — applied when is set. Same accent so the brand stays consistent; bg/panels/text invert with a gentler shadow. Status soft-bgs become slightly more saturated since they no longer compete with a dark background. */ :root[data-theme="light"] { --bg: #f7f8fa; --panel: #ffffff; --panel-2: #f1f3f6; --panel-3: #e7eaef; --border: #e2e5ea; --border-2: #cdd2da; --text: #1a1d24; --text-2: #3e4452; --muted: #6b7280; --accent: #e11d48; --accent-hover: #be123c; --accent-soft: rgba(225, 29, 72, 0.10); --info: #2563eb; --info-soft: rgba(37, 99, 235, 0.10); --success: #059669; --success-soft: rgba(5, 150, 105, 0.10); --warning: #b45309; --warning-soft: rgba(180, 83, 9, 0.10); --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.10); --shadow: 0 4px 16px rgba(0, 0, 0, 0.06); --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.12); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; } button { font-family: inherit; font-size: inherit; cursor: pointer; } .app { display: flex; height: 100vh; } /* Sidebar */ .sidebar { width: 240px; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 20px 12px; flex-shrink: 0; height: 100vh; overflow: hidden; } .brand { font-size: 18px; font-weight: 700; padding: 0 12px 20px; color: var(--text); letter-spacing: 0.3px; } .sidebar nav { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; /* keep the scrollbar subtle so it doesn't visually crowd the panel */ scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .sidebar nav::-webkit-scrollbar { width: 6px; } .sidebar nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .sidebar nav::-webkit-scrollbar-track { background: transparent; } .nav-btn { background: transparent; border: none; color: var(--muted); text-align: left; padding: 10px 12px; border-radius: 6px; transition: background 0.15s, color 0.15s; display: block; text-decoration: none; font: inherit; cursor: pointer; } .nav-btn:hover { background: var(--panel-2); color: var(--text); } .nav-btn.active { background: var(--accent); color: #fff; } /* Tenant / workspace switcher (only shown for users in >1 tenant). */ #nx-tenant-switcher { margin: 0 0 16px; padding: 8px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; } #nx-tenant-switcher .nx-ts-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } #nx-tenant-switcher select { width: 100%; padding: 6px 8px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font: inherit; } .nav-section { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 14px 12px 4px; opacity: 0.7; } .nav-section:first-child { padding-top: 4px; } .sidebar-footer { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--border); } /* Sidebar-footer buttons look like nav-btn, not generic ghost outlines. */ .sidebar-footer .ghost, .sidebar-footer button, .sidebar-footer a { background: transparent; border: none; color: var(--muted); text-align: left; padding: 10px 12px; border-radius: 6px; font: inherit; cursor: pointer; text-decoration: none; display: block; width: 100%; transition: background 0.15s, color 0.15s; } .sidebar-footer .ghost:hover, .sidebar-footer button:hover, .sidebar-footer a:hover { background: var(--panel-2); color: var(--text); } /* Main */ .main { flex: 1; overflow: auto; padding: 32px 40px; } .view { display: none; } .view.active { display: block; } .view-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .view-header h1 { margin: 0; font-size: 24px; font-weight: 600; } .actions { display: flex; gap: 10px; align-items: center; } /* Inputs */ input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="time"], input[type="url"], input[type="password"], input[type="number"], select, textarea { background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 6px; font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.15s; width: 100%; } /* Modal/drawer form fields: enforce dark theme even if a more specific rule elsewhere has set a white background. Use the page bg (one shade darker than the modal) so inputs look recessed rather than glowing. Wins by specificity. */ #modal-body input, #modal-body select, #modal-body textarea, .drawer input, .drawer select, .drawer textarea, #workspace-body input, #workspace-body select, #workspace-body textarea { background-color: var(--bg) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } #modal-body input:focus, #modal-body select:focus, #modal-body textarea:focus, .drawer input:focus, .drawer select:focus, .drawer textarea:focus, #workspace-body input:focus, #workspace-body select:focus, #workspace-body textarea:focus { border-color: var(--accent) !important; } #modal-body input::placeholder, #modal-body textarea::placeholder, #workspace-body input::placeholder, .drawer input::placeholder { color: var(--muted); opacity: 1; } /* And kill autofill bg specifically inside these containers — Chrome's autofill paints over our background otherwise. */ #modal-body input:-webkit-autofill, .drawer input:-webkit-autofill, #workspace-body input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important; box-shadow: 0 0 0 1000px var(--bg) inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text); } input:focus, select:focus, textarea:focus { border-color: var(--accent); } /* Browsers paint a custom yellow/blue background on autofilled inputs that ignores our --panel color. Force the dark theme through the autofill state so secret-key fields don't pop bright white when a password manager fills. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--panel) inset !important; box-shadow: 0 0 0 1000px var(--panel) inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text); border: 1px solid var(--border) !important; } textarea { resize: vertical; min-height: 80px; } /* Native