/* ───────────────────────────────────────────────────────────── Chatbot Admin Console — COLOR & THEME definitions All palette tokens and theme variants live here for easy management. Load this BEFORE styles.css. Default (:root) = dark; html[data-theme="light"] = light. The active theme is set on by theme.js (light | dark, with "system" resolved to one of those via prefers-color-scheme). ───────────────────────────────────────────────────────────── */ /* ===== Dark theme (default) ===== */ :root{ --bg:#131416; --surface:#1b1e23; --surface2:#23262C; --surface3:#2C2F36; --border:rgba(255,255,255,0.08); --border2:rgba(255,255,255,0.16); --text:#F5F5F6; --text-dim:rgba(245,245,246,0.62); --text-mute:rgba(245,245,246,0.42); --accent:oklch(0.82 0.14 80); --accent-deep:oklch(0.66 0.14 75); --good:oklch(0.78 0.15 150); --good-bg:oklch(0.78 0.15 150 / 0.14); --warn:oklch(0.82 0.13 80); --warn-bg:oklch(0.82 0.13 80 / 0.14); --bad:#ef4444; /* Door Lock pill red */ --bad-bg:rgba(239,68,68,0.15); --info:oklch(0.74 0.11 245); --info-bg:oklch(0.74 0.11 245 / 0.14); --violet:oklch(0.72 0.13 300); --violet-bg:oklch(0.72 0.13 300 / 0.14); --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; --edit-fill:rgba(0,0,0,0.32); } /* ===== Light theme (html[data-theme="light"]) ===== Reference palette: WhatsApp light (neutral greys/white + #00a884 family). Brand gold accent is preserved (deepened for contrast on white). */ html[data-theme="light"]{ --bg:#fdfcfa; --surface:#f8f7f3; --surface2:#f1f0eb; --surface3:#e8e6df; --border:rgba(52,46,34,0.11); --border2:rgba(52,46,34,0.17); --text:#322d24; --text-dim:rgba(50,45,36,0.60); --text-mute:rgba(50,45,36,0.44); --accent:oklch(0.79 0.125 74); --accent-deep:oklch(0.66 0.12 72); --good:oklch(0.61 0.13 152); --good-bg:oklch(0.66 0.14 152 / 0.15); --warn:oklch(0.61 0.115 71); --warn-bg:oklch(0.78 0.13 80 / 0.18); --bad:#f15e5e; /* Door Lock pill red (lightened for light mode) */ --bad-bg:rgba(241,94,94,0.12); --info:oklch(0.60 0.125 245); --info-bg:oklch(0.66 0.12 245 / 0.13); --violet:oklch(0.61 0.15 300); --violet-bg:oklch(0.66 0.15 300 / 0.13); --edit-fill:rgba(52,46,34,0.05); } /* Light-mode structural fixes: the dark theme reused white overlays for hovers and a near-black rail — both need light equivalents to stay visible. */ /* Left menu columns match the content background (near-white), separated by their border-right */ html[data-theme="light"] .m-side{background:var(--bg);} html[data-theme="light"] .m-subnav{background:var(--bg);} /* Selected menu item = the same surface as the KPI cards */ html[data-theme="light"] .m-nav-item.active{background:var(--surface);box-shadow:none;} html[data-theme="light"] .m-subnav-item.on{background:var(--surface);box-shadow:none;} /* Soft card elevation so nothing reads flat/plain */ html[data-theme="light"] .m-plan, html[data-theme="light"] .m-billing-card, html[data-theme="light"] .m-card, html[data-theme="light"] .m-table-wrap{box-shadow:0 1px 2px rgba(45,35,18,0.05),0 10px 26px rgba(45,35,18,0.06);} html[data-theme="light"] .m-mark::after{background:var(--surface);} html[data-theme="light"] .m-nav-item:hover{background:var(--surface2);color:var(--text);} html[data-theme="light"] .m-pop-item:hover{background:rgba(11,20,26,0.06);} html[data-theme="light"] .kb-sugg button:hover, html[data-theme="light"] .kb-sugg button.active{background:rgba(11,20,26,0.06);} html[data-theme="light"] .kb-chip button:hover{background:rgba(11,20,26,0.10);} html[data-theme="light"] .kb-combo-menu button:hover{background:rgba(11,20,26,0.06);} html[data-theme="light"] .m-subnav-item:hover{background:rgba(11,20,26,0.05);} html[data-theme="light"] .flow-world{background-image:radial-gradient(circle,rgba(11,20,26,0.08) 1px,transparent 1px);} html[data-theme="light"] .kb-layered{background:rgba(11,20,26,0.02);} html[data-theme="light"] .m-pop{box-shadow:0 14px 38px rgba(11,20,26,0.16);} html[data-theme="light"] .kb-sugg{box-shadow:0 16px 40px rgba(11,20,26,0.16);} html[data-theme="light"] .flow-node{box-shadow:0 10px 26px rgba(11,20,26,0.14);} /* Flow overlays: dark islands on the light canvas → light frosted panels */ html[data-theme="light"] .flow-mini{background:rgba(250,246,238,0.9);box-shadow:0 10px 22px rgba(45,35,18,0.12);} html[data-theme="light"] .flow-cue{background:rgba(250,246,238,0.9);} /* Modal card + backdrop: soften the heavy dark shadow for light mode */ html[data-theme="light"] .m-modal-card{box-shadow:0 24px 60px rgba(11,20,26,0.18);} /* Lighter profile avatar so it doesn't read heavy on the warm light theme */ html[data-theme="light"] .m-profile .m-av{background:linear-gradient(135deg,#93b4f4,#6d94ec);filter:none;} /* ===== Appearance selector — bare tiny icons (Day / Dark / System), below the profile ===== No frame: just three small icons. The active icon takes the accent colour. The top margin lifts the profile above it to gain space (footer is bottom-pinned). */ .m-theme-seg{ display:inline-flex;align-items:center;gap:8px;flex-shrink:0; margin:0;padding:0;background:none;border:none; } .m-theme-seg-btn{ border:none;background:none;padding:0;cursor:pointer; display:flex;align-items:center;justify-content:center;font-size:13px; color:var(--text-mute);transition:color .12s; } .m-theme-seg-btn:hover{color:var(--text);} .m-theme-seg-btn.on{color:var(--accent);} /* ===== Themed scrollbars ===== WebKit renders a white/grey default track when the pointer hovers a scroll area, which flashes against the dark UI. Paint the whole scrollbar from theme tokens so it stays consistent in both themes: transparent track, a muted thumb that brightens on hover. The 3px transparent border + content-box clip insets the thumb so it reads as a thin rounded bar. More-specific page rules (.m-subnav / .kbv-crumb-path → hidden) still win. */ html{ scrollbar-width:thin; scrollbar-color:var(--border2) transparent; } ::-webkit-scrollbar{ width:11px; height:11px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background-color:var(--border2); border-radius:10px; border:3px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{ background-color:var(--text-mute); } ::-webkit-scrollbar-corner{ background:transparent; }