/* chord-theme.css — shared design system for the Chord portal. Loaded LAST on each page so its tokens + polish win over per-page inline styles. Light + dark via [data-theme] on (see chord-theme.js). */ :root{ --accent:#2c2ce0; --accent-2:#5b5bf6; --coral:#f0775b; --bg:#f4f5fb; --bg-glow:rgba(44,44,224,.06); --card:#ffffff; --card-2:#fbfbfe; --ink:#14142b; --muted:#6a6a80; --line:#e8e8f1; --ok:#12a150; --off:#b3b3c2; --warn:#d9a300; --bad:#e5484d; --promoter:#12a150; --passive:#d9a300; --detractor:#e5484d; --radius:16px; --shadow:0 1px 2px rgba(20,20,50,.04), 0 10px 30px rgba(20,20,50,.06); --shadow-lg:0 2px 6px rgba(20,20,50,.06), 0 20px 50px rgba(20,20,50,.12); --ring:0 0 0 3px rgba(44,44,224,.18); } :root[data-theme="dark"]{ --accent:#7b7bff; --accent-2:#9a9aff; --coral:#ff8f73; --bg:#0b0b13; --bg-glow:rgba(123,123,255,.10); --card:#15151f; --card-2:#1b1b28; --ink:#ecedf6; --muted:#9a9ab4; --line:#282838; --ok:#34d17a; --off:#54546a; --warn:#e6b23a; --bad:#ff6b6b; --promoter:#34d17a; --passive:#e6b23a; --detractor:#ff6b6b; --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.55); --shadow-lg:0 2px 8px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.65); --ring:0 0 0 3px rgba(123,123,255,.28); } html{ transition:background-color .25s ease, color .25s ease; } body{ background: radial-gradient(1200px 600px at 100% -200px, var(--bg-glow), transparent 60%), radial-gradient(900px 500px at -10% -150px, var(--bg-glow), transparent 55%), var(--bg) !important; color:var(--ink) !important; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; } ::selection{ background:color-mix(in srgb, var(--accent) 30%, transparent); } /* Cards */ .card{ background:var(--card) !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow) !important; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .card h2{ letter-spacing:-.01em; } /* KPI cards — the flagship flourish */ .kpi{ background:linear-gradient(180deg, var(--card), var(--card-2)) !important; border:1px solid var(--line) !important; border-radius:14px !important; box-shadow:var(--shadow) !important; position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; } .kpi::before{ content:""; position:absolute; inset:0 auto auto 0; height:3px; width:100%; background:linear-gradient(90deg, var(--accent), var(--coral)); opacity:.9; } .kpi:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg) !important; } .kpi .val{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-.02em; } .kpi .val.small{ -webkit-text-fill-color:currentColor; background:none; } .kpi .label{ color:var(--muted) !important; } /* Header + nav */ header .bword{ letter-spacing:-.01em; } a.navlink, .controls a{ border-radius:8px; padding:5px 10px; transition:background .15s ease, color .15s ease; } a.navlink:hover, .controls a:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); } .pill.live, .pill.on{ background:color-mix(in srgb, var(--ok) 16%, transparent) !important; color:var(--ok) !important; } /* Buttons */ button.primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)) !important; border:0 !important; color:#fff !important; padding:9px 18px !important; border-radius:10px !important; font-weight:500 !important; font-size:13.5px !important; box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 26%, transparent); transition:transform .12s ease, box-shadow .2s ease, filter .2s ease; } button.primary:hover{ transform:translateY(-1px); filter:brightness(1.05); } button.ghost, button.refresh, button.logout, button.csv, .seg, .bar select, select#bulkScope{ background:var(--card) !important; color:var(--ink) !important; border:1px solid var(--line) !important; border-radius:8px !important; padding:7px 13px !important; font-size:13px !important; font-weight:500 !important; transition:border-color .15s ease, background .15s ease, transform .1s ease; } button.ghost:hover, button.refresh:hover, button.logout:hover, .seg:hover{ border-color:var(--accent) !important; background:var(--card-2) !important; } button.ghost:active, button.refresh:active, button.logout:active, button.csv:active, button.primary:active{ transform:translateY(0) scale(.98); } button.csv{ padding:7px 14px !important; } button.csv{ background:linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color:#fff !important; border:0 !important; } .seg.on{ background:var(--ink) !important; color:var(--bg) !important; border-color:var(--ink) !important; } /* Inputs — critical for dark mode */ input, select, textarea{ background:var(--card) !important; color:var(--ink) !important; border:1px solid var(--line) !important; border-radius:9px !important; transition:border-color .15s ease, box-shadow .15s ease; } input:focus, select:focus, textarea:focus{ outline:0; border-color:var(--accent) !important; box-shadow:var(--ring) !important; } input:not([type=checkbox]):not([type=radio]), select{ height:40px !important; padding:0 12px !important; font-size:14px !important; border-radius:10px !important; } textarea{ min-height:40px; padding:10px 12px !important; font-size:14px !important; border-radius:10px !important; } ::placeholder{ color:var(--muted) !important; opacity:.65; } input[type=checkbox], input[type=radio]{ accent-color:var(--accent); width:16px; height:16px; } select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px !important; background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8aa0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center !important; background-size:15px !important; } label{ color:var(--muted) !important; font-size:12.5px !important; font-weight:500 !important; letter-spacing:.005em; } /* Tables */ table th{ color:var(--muted) !important; border-bottom:1px solid var(--line) !important; } table td{ border-bottom:1px solid var(--line) !important; } tbody tr{ transition:background .12s ease; } tbody tr:hover{ background:color-mix(in srgb, var(--accent) 6%, transparent); } /* Tags / pills */ .tag{ border-radius:999px !important; } .tag.seg{ background:color-mix(in srgb, var(--accent) 14%, transparent) !important; color:var(--accent) !important; } .tag.pilot{ background:color-mix(in srgb, var(--ok) 16%, transparent) !important; color:var(--ok) !important; } .tag.off{ background:color-mix(in srgb, var(--bad) 14%, transparent) !important; color:var(--bad) !important; } .switch.on{ color:var(--ok) !important; } .switch.off{ color:var(--off) !important; } /* Login card */ .loginCard{ background:var(--card) !important; border:1px solid var(--line) !important; box-shadow:var(--shadow-lg) !important; } #login{ background: radial-gradient(800px 500px at 50% -100px, var(--bg-glow), transparent 60%), var(--bg) !important; } /* Theme toggle (injected by chord-theme.js) */ .chord-theme-toggle{ position:fixed; right:18px; bottom:18px; z-index:2147483000; width:44px; height:44px; border-radius:999px; cursor:pointer; display:flex; align-items:center; justify-content:center; background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-lg); transition:transform .15s ease, border-color .15s ease; } .chord-theme-toggle:hover{ transform:translateY(-2px) rotate(-8deg); border-color:var(--accent); } .chord-theme-toggle svg{ width:20px; height:20px; } /* Grid.js dark-mode fixes */ :root[data-theme="dark"] .gridjs-wrapper, :root[data-theme="dark"] .gridjs-table, :root[data-theme="dark"] .gridjs-container, :root[data-theme="dark"] table.gridjs-table{ background:var(--card) !important; color:var(--ink) !important; } :root[data-theme="dark"] .gridjs-th, :root[data-theme="dark"] .gridjs-td{ background:var(--card) !important; color:var(--ink) !important; border-color:var(--line) !important; } :root[data-theme="dark"] .gridjs-th{ color:var(--muted) !important; } :root[data-theme="dark"] .gridjs-search-input, :root[data-theme="dark"] .gridjs-pagination .gridjs-pages button{ background:var(--card-2) !important; color:var(--ink) !important; border-color:var(--line) !important; } :root[data-theme="dark"] .gridjs-pagination{ color:var(--muted) !important; } :root[data-theme="dark"] .gridjs-wrapper{ box-shadow:none !important; border:1px solid var(--line) !important; } /* Normalize legacy hardcoded surfaces so every page themes consistently (esp. Rules/Routing) */ .result{ background:var(--card-2) !important; border:1px solid var(--line) !important; color:var(--ink) !important; border-radius:12px !important; } .tag{ background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); } .tag.act, .pill.yes{ background:color-mix(in srgb, var(--ok) 16%, transparent) !important; color:var(--ok) !important; } .pill.no{ background:color-mix(in srgb, var(--bad) 14%, transparent) !important; color:var(--bad) !important; } .del{ color:var(--bad) !important; } .sub, .hint, .fnote, .desc, .bsub, .lbl, .note{ color:var(--muted) !important; } .kill .row{ background:var(--card-2) !important; border:1px solid var(--line) !important; border-radius:10px !important; } code{ background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--ink); padding:1px 5px; border-radius:6px; } canvas{ max-height:260px; } /* Scrollbar */ :root[data-theme="dark"]{ color-scheme:dark; } ::-webkit-scrollbar{ width:12px; height:12px; } ::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; border:3px solid transparent; background-clip:content-box; }