/*
* Main application CSS
*
* Note: DaisyUI is loaded via CDN; Tailwind v4 is built locally by tailwindcss-rails.
* ActiveAdmin has its own separate CSS (active_admin.css)
*
*/
/* Custom modal classes - for TradingView chart modals */
.h-80vh { height: 80vh; }
.h-85vh { height: 85vh; }
.h-90vh { height: 90vh; }
/* Override DaisyUI modal-box max-width */
.modal-box.max-w-4xl { max-width: 56rem !important; }
.modal-box.max-w-6xl { max-width: 72rem !important; }
.modal-box.max-w-7xl { max-width: 80rem !important; }
.modal-box.w-11\/12 { width: 91.666667% !important; }
/* Fix DaisyUI navbar-center responsive visibility conflict */
.navbar-center.hidden {
display: none !important;
}
@media (min-width: 1024px) {
.navbar-center.hidden.lg\:flex {
display: flex !important;
}
}
/*
* SignalOps theme (UIRD-001) — hand-authored DaisyUI 4 theme.
*
* DaisyUI ships from the CDN and the local tailwindcss-rails v4 build does
* NOT run the DaisyUI plugin. The custom theme is therefore authored here as
* raw CSS variables under `[data-theme="signalops"]` and required LAST from
* application.css so it wins over the CDN built-in themes.
*
* Palette source of truth: docs/plans/redesign-dashboard-v3.html
* Values are OKLCH triplets (`L% C H`): DaisyUI 4 reads every theme colour as
* `oklch(var(--su) / a)`. They were HSL triplets (DaisyUI 3's format) until
* 2026-10-09; oklch() rejects a percentage hue, so every DaisyUI colour utility
* (bg-success, bg-base-200, text-error, bg-error/10, …) computed to transparent.
* The original HSL value is kept beside each line. Read these vars in our own
* CSS as `oklch(var(--x))`, never `hsl(var(--x))`.
*/
[data-theme="signalops"] {
color-scheme: dark;
/* primary — cyan #16c7d8 */
--p: 75.03% 0.1271 209.93; /* hsl 187 82% 47% */
--pf: 69.01% 0.1167 209.84; /* hsl 187 82% 42% */
--pc: 19.13% 0.0246 204.72; /* hsl 186 65% 6% */
/* secondary — violet #b589ff */
--s: 72.35% 0.1694 299.87; /* hsl 263 100% 77% */
--sf: 66.42% 0.1784 299.19; /* hsl 263 80% 70% */
--sc: 18.58% 0.0692 292.09; /* hsl 258 65% 11% */
/* accent — green #55e27a (long / up / success-ish accent) */
--a: 81.11% 0.1840 149.64; /* hsl 137 70% 61% */
--af: 75.99% 0.1852 149.00; /* hsl 137 60% 54% */
--ac: 18.86% 0.0338 151.61; /* hsl 137 55% 6% */
/* base surfaces — card #161b18, base-200 elevated #0f1311, lines #262e28.
Page bg (#0a0c0b) is applied directly on body below, NOT via --b2, so
base-200 surfaces stay a visible elevated tone. */
--b1: 22.00% 0.0101 156.30; /* hsl 140 10% 10% */
--b2: 17.23% 0.0058 156.56; /* hsl 140 9% 6% */
--b3: 29.64% 0.0159 150.06; /* hsl 130 9% 17% */
--bc: 95.10% 0.0131 150.63; /* hsl 130 24% 93% */
/* neutral */
--n: 24.21% 0.0112 153.07; /* hsl 135 9% 12% */
--nf: 20.79% 0.0087 153.14; /* hsl 135 9% 9% */
--nc: 69.07% 0.0182 156.72; /* hsl 140 6% 60% */
/* state colors — info cyan, success green, warning amber #ffbf3f, error red #ff5f73 */
--in: 75.03% 0.1271 209.93; /* hsl 187 82% 47% */
--inc: 19.13% 0.0246 204.72; /* hsl 186 65% 6% */
--su: 81.11% 0.1840 149.64; /* hsl 137 70% 61% */
--suc: 18.86% 0.0338 151.61; /* hsl 137 55% 6% */
--wa: 85.34% 0.1571 84.03; /* hsl 42 100% 62% */
--wac: 22.09% 0.0352 83.06; /* hsl 40 70% 8% */
--er: 70.20% 0.1922 14.62; /* hsl 351 100% 69% */
--erc: 17.87% 0.0426 13.00; /* hsl 351 60% 8% */
/* form-control component vars (DaisyUI checkbox/toggle/range) — without these
the checked state has no fill/checkmark and reads as "broken". */
--chkbg: 75.03% 0.1271 209.93; /* hsl 187 82% 47% */ /* checked checkbox fill = accent cyan */
--chkfg: 19.13% 0.0246 204.72; /* hsl 186 65% 6% */ /* checkmark = dark on cyan */
--tglbg: 75.03% 0.1271 209.93; /* hsl 187 82% 47% */ /* toggle knob/track checked accent */
/* component radii (DaisyUI) */
--rounded-box: 0.75rem;
--rounded-btn: 0.55rem;
--rounded-badge: 0.45rem;
--tab-radius: 0.5rem;
--border-btn: 1px;
/* ---- custom SignalOps tokens (what DaisyUI has no slot for) ---- */
--so-r: 11px;
--so-ink: #e9f0ea;
--so-dim: #94a098;
--so-dimmer: #79857d;
--so-accent: #16c7d8;
--so-accent2: #0fe0c4;
--so-accent-soft: rgba(22, 199, 216, 0.12);
--so-accent-line: rgba(22, 199, 216, 0.34);
--so-green: #55e27a;
--so-green-soft: rgba(85, 226, 122, 0.13);
--so-red: #ff5f73;
--so-red-soft: rgba(255, 95, 115, 0.13);
--so-amber: #ffbf3f;
--so-amber-soft: rgba(255, 191, 63, 0.13);
--so-violet: #b589ff;
--so-violet-soft: rgba(181, 137, 255, 0.14);
--so-line: #262e28;
--so-line2: #1d241f;
--so-card: #161b18;
--so-card2: #1b211d;
--so-card3: #212823;
--sh: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 34px rgba(0, 0, 0, 0.30);
--sh-lg: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 60px rgba(0, 0, 0, 0.5);
}
/* Base surface + text color.
DaisyUI's CDN only emits base body color for its built-in themes, not for a
hand-authored theme, so we must apply base-100 bg + base-content text here or
the page falls back to black-on-black. */
[data-theme="signalops"] {
background-color: oklch(var(--b2));
color: oklch(var(--bc));
}
/* Typography. Authored here (unlayered, loaded last) so it wins over Tailwind's
@layer base font defaults, which otherwise keep body on ui-sans-serif. */
[data-theme="signalops"] body,
[data-theme="signalops"] {
font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-theme="signalops"] h1,
[data-theme="signalops"] h2,
[data-theme="signalops"] h3,
[data-theme="signalops"] h4 {
font-family: "Sora", "Hanken Grotesk", system-ui, sans-serif;
letter-spacing: -0.02em;
}
[data-theme="signalops"] .font-mono,
[data-theme="signalops"] .mono,
[data-theme="signalops"] code,
[data-theme="signalops"] pre {
font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
font-variant-numeric: tabular-nums;
}
/* grid texture + radial glow background (prototype body) */
[data-theme="signalops"] body {
color: oklch(var(--bc));
background-color: #0a0c0b;
overflow-x: hidden; /* clip the off-screen closed mobile drawer so it can't widen the page */
background-image:
linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px),
radial-gradient(900px 380px at 72% -10%, rgba(22, 199, 216, 0.13), transparent 60%),
radial-gradient(700px 340px at 10% 4%, rgba(181, 137, 255, 0.07), transparent 55%);
background-size: 30px 30px, 30px 30px, 100% 100%, 100% 100%;
background-attachment: fixed;
}
/*
* SignalOps app shell (UIRD-002) — sidebar + topbar + content grid.
* Ported from docs/plans/redesign-dashboard-v3.html. DaisyUI has no sidebar
* component, so these are bespoke classes. Scoped under [data-theme="signalops"].
* Required from application.css (loaded last).
*/
/* ---- grid ---- */
[data-theme="signalops"] .app {
display: grid;
grid-template-columns: 240px 1fr;
min-height: 100vh;
}
[data-theme="signalops"] .main { min-width: 0; display: flex; flex-direction: column; }
[data-theme="signalops"] .wrap { padding: 28px 30px 70px; max-width: 1340px; width: 100%; }
/* ---- sidebar ---- */
[data-theme="signalops"] .side {
background: rgba(11, 14, 12, 0.92);
border-right: 1px solid var(--so-line);
padding: 18px 14px;
position: sticky; top: 0; height: 100vh; overflow-y: auto;
display: flex; flex-direction: column;
box-shadow: 14px 0 40px rgba(0, 0, 0, 0.28);
}
[data-theme="signalops"] .side .brand {
display: flex; align-items: center; gap: 11px;
padding: 6px 10px 20px;
font-family: "Sora", sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -0.4px;
}
[data-theme="signalops"] .side .brand .logo {
width: 32px; height: 32px; border-radius: 9px;
background: radial-gradient(circle at 35% 25%, #0f1b1b, #0a1212);
border: 1px solid var(--so-accent-line);
box-shadow: 0 0 22px rgba(22, 199, 216, 0.32), 0 0 0 1px rgba(22, 199, 216, 0.08) inset;
display: grid; place-items: center; color: var(--so-accent); font-size: 15px;
}
[data-theme="signalops"] .side .brand b {
background: linear-gradient(90deg, #e9f0ea, #9fe9f0);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
[data-theme="signalops"] .navsec {
color: var(--so-dimmer); font-size: 10px; text-transform: uppercase;
letter-spacing: 2px; font-weight: 700; padding: 16px 12px 6px;
}
[data-theme="signalops"] .nav {
display: flex; align-items: center; gap: 12px;
padding: 9px 12px; border-radius: 9px;
color: var(--so-dim); font-size: 14px; font-weight: 600;
cursor: pointer; border: 1px solid transparent; transition: 0.16s; position: relative;
}
[data-theme="signalops"] .nav svg { width: 18px; height: 18px; stroke-width: 1.9; opacity: 0.7; flex: none; }
[data-theme="signalops"] .nav:hover { background: var(--so-card2); color: var(--so-ink); }
[data-theme="signalops"] .nav.on {
background: linear-gradient(90deg, var(--so-accent-soft), transparent 80%);
color: var(--so-accent); border-color: var(--so-accent-line);
}
[data-theme="signalops"] .nav.on svg { opacity: 1; }
[data-theme="signalops"] .nav.on::before {
content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px;
width: 3px; border-radius: 0 3px 3px 0; background: var(--so-accent); box-shadow: 0 0 12px var(--so-accent);
}
[data-theme="signalops"] .nav .badge {
margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10.5px;
background: var(--so-accent-soft); border: 1px solid var(--so-accent-line);
color: var(--so-accent); border-radius: 20px; padding: 1px 7px; font-weight: 600;
}
[data-theme="signalops"] .side .foot {
margin-top: auto; border-top: 1px solid var(--so-line);
padding-top: 13px; display: flex; align-items: center; gap: 10px;
}
[data-theme="signalops"] .side .foot .av {
width: 34px; height: 34px; border-radius: 9px; background: #101a16;
border: 1px solid rgba(85, 226, 122, 0.4); color: var(--so-green);
display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
/* ---- topbar ---- */
[data-theme="signalops"] .top {
display: flex; align-items: center; gap: 14px;
padding: 13px 30px; background: rgba(10, 12, 11, 0.7);
border-bottom: 1px solid var(--so-line);
position: sticky; top: 0; z-index: 20;
backdrop-filter: saturate(1.3) blur(14px);
}
[data-theme="signalops"] .top .search {
flex: 1; max-width: 450px; display: flex; align-items: center; gap: 10px;
background: #0d100e; border: 1px solid var(--so-line); border-radius: 10px;
padding: 9px 14px; color: var(--so-dimmer); font-size: 13.5px; transition: 0.16s;
}
[data-theme="signalops"] .top .search:hover { border-color: var(--so-accent-line); }
[data-theme="signalops"] .top .search svg { width: 16px; height: 16px; stroke-width: 2; }
[data-theme="signalops"] .top .search .kbd {
margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 11px;
background: #11150f; border: 1px solid var(--so-line); border-radius: 5px; padding: 1px 6px; color: var(--so-dim);
}
[data-theme="signalops"] .top .spacer { flex: 1; }
[data-theme="signalops"] .top .live {
display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
color: var(--so-green); background: var(--so-green-soft);
border: 1px solid rgba(85, 226, 122, 0.22); padding: 6px 12px; border-radius: 20px;
}
[data-theme="signalops"] .top .live .pulse {
width: 7px; height: 7px; border-radius: 50%; background: var(--so-green);
box-shadow: 0 0 0 0 rgba(85, 226, 122, 0.55); animation: so-pulse 2.4s infinite;
}
@keyframes so-pulse { 70% { box-shadow: 0 0 0 7px rgba(85, 226, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(85, 226, 122, 0); } }
[data-theme="signalops"] .top .ico {
width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
color: var(--so-dim); cursor: pointer; border: 1px solid transparent; position: relative;
}
[data-theme="signalops"] .top .ico:hover { background: var(--so-card2); border-color: var(--so-line); }
[data-theme="signalops"] .top .ico svg { width: 19px; height: 19px; stroke-width: 1.9; }
[data-theme="signalops"] .top .ico .dot {
position: absolute; top: 9px; right: 10px; width: 7px; height: 7px;
border-radius: 50%; background: var(--so-red); border: 2px solid #0a0c0b;
}
/* mobile topbar trigger (hamburger), hidden on desktop */
[data-theme="signalops"] .top .menu-btn { display: none; }
/* Explicit opaque drawer surface. bg-base-200 used to compute transparent (the theme
vars were HSL, not the oklch DaisyUI 4 reads; see signalops_theme.css); this keeps
the drawer's exact tone and shadow regardless. */
[data-theme="signalops"] .drawer-side > .menu {
flex-wrap: nowrap;
min-height: 100dvh;
max-height: 100dvh;
overflow-y: auto;
background: #101512;
border-right: 1px solid var(--so-line);
box-shadow: 14px 0 40px rgba(0, 0, 0, .4);
}
/* Group headings match the desktop .navsec so they read as labels, not links. */
[data-theme="signalops"] .drawer-side .menu-title {
font-size: 10px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700;
padding: 16px 12px 6px;
}
/* ---- responsive: collapse sidebar to drawer ---- */
@media (max-width: 800px) {
[data-theme="signalops"] .app { grid-template-columns: 1fr; }
[data-theme="signalops"] .side { display: none; }
[data-theme="signalops"] .top { padding: 13px 16px; gap: 8px; }
[data-theme="signalops"] .top .search { display: none; }
[data-theme="signalops"] .top .ico { flex-shrink: 0; }
[data-theme="signalops"] .top .menu-btn { display: grid; }
[data-theme="signalops"] .wrap { padding: 20px 16px 60px; }
}
@media (max-width: 480px) {
[data-theme="signalops"] .top .live { font-size: 0; gap: 0; padding: 6px; }
}
/* Page-level rhythm. Keep the shell and page wrappers from compounding their
own horizontal gutters; narrower cards can still size themselves internally. */
[data-theme="signalops"] .wrap > .signalops-setup {
width: 100%;
max-width: 72rem;
padding: 32px 16px;
}
[data-theme="signalops"] .wrap > .signalops-robot-control { padding-top: 32px; }
[data-theme="signalops"] .wrap > :is(
.markets-page, .signalops-dashboard, .signalops-strategies,
.signalops-signals, .signalops-robot-control, .signalops-setup,
.signalops-alerts, .signalops-liquidations, .signalops-backtests,
.signalops-search, .signalops-pairs-table, .signalops-compare,
.signalops-backtest-form, .signalops-strategy-form, .signalops-account-settings
) h1 {
font-size: 30px;
line-height: 1.16;
}
/* Under 800px the shell's .wrap already gives the 16px phone gutter; page wrappers keep
their px-* / container padding for desktop only, so every page lines up at 16px. */
@media (max-width: 800px) {
[data-theme="signalops"] .wrap > :is(
.markets-page, .signalops-dashboard, .signalops-strategies,
.signalops-signals, .signalops-robot-control, .signalops-setup,
.signalops-alerts, .signalops-liquidations, .signalops-backtests,
.signalops-search, .signalops-pairs-table, .signalops-compare,
.signalops-backtest-form, .signalops-strategy-form, .signalops-account-settings
) {
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 640px) {
[data-theme="signalops"] .wrap > :is(
.markets-page, .signalops-dashboard, .signalops-strategies,
.signalops-signals, .signalops-robot-control, .signalops-setup,
.signalops-alerts, .signalops-liquidations, .signalops-backtests,
.signalops-search, .signalops-pairs-table, .signalops-compare,
.signalops-backtest-form, .signalops-strategy-form, .signalops-account-settings
) h1 { font-size: 26px; }
}
/*
* SignalOps dashboard overview (UIRD-003) — server-rendered v3 sections.
* Scoped under .so-overview so it never collides with the JS widget grid below
* or DaisyUI component classes. Ported from docs/plans/redesign-dashboard-v3.html.
*/
.so-overview { margin-bottom: 30px; }
/* staggered entry (ported from prototype .rise/.dN) */
.so-overview .rise { opacity: 0; transform: translateY(10px); animation: so-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
@keyframes so-rise { to { opacity: 1; transform: none; } }
.so-overview .d1 { animation-delay: 0.03s; }
.so-overview .d2 { animation-delay: 0.09s; }
.so-overview .d3 { animation-delay: 0.15s; }
.so-overview .d4 { animation-delay: 0.21s; }
.so-overview .d5 { animation-delay: 0.29s; }
@media (prefers-reduced-motion: reduce) {
.so-overview .rise { animation: none; opacity: 1; transform: none; }
}
.so-overview .num, .so-overview .mono { font-variant-numeric: tabular-nums; }
.so-overview .up { color: var(--so-green); }
.so-overview .down { color: var(--so-red); }
.so-overview .mute { color: var(--so-dim); }
/* section label */
.so-overview .sec-lbl {
font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
color: var(--so-dimmer); margin: 0 0 13px;
}
/* ticker tape */
.so-overview .tape {
display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
padding: 10px 14px; background: rgba(19, 23, 21, 0.7);
border: 1px solid var(--so-line); border-radius: 10px; box-shadow: var(--sh);
}
.so-overview .tape .pill {
font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: 0.6px; text-transform: uppercase;
padding: 6px 9px; border-radius: 7px; background: var(--so-green-soft); color: var(--so-green);
border: 1px solid rgba(85, 226, 122, 0.22); white-space: nowrap;
}
.so-overview .tape .items {
display: flex; gap: 22px; overflow: hidden;
font: 600 12.5px/1 "JetBrains Mono", monospace; color: var(--so-dim); white-space: nowrap;
}
.so-overview .tape .items b { color: var(--so-ink); }
/* KPI row */
.so-overview .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.so-overview .kpi {
background: linear-gradient(180deg, var(--so-card2), var(--so-card));
border: 1px solid var(--so-line); border-radius: var(--so-r); padding: 17px 18px;
box-shadow: var(--sh); position: relative; overflow: hidden; transition: 0.18s;
}
.so-overview .kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--so-accent); box-shadow: 0 0 14px var(--so-accent); }
.so-overview .kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); border-color: var(--so-accent-line); }
.so-overview .kpi .row1 { display: flex; align-items: center; justify-content: space-between; }
.so-overview .kpi .lbl { display: flex; align-items: center; gap: 8px; color: var(--so-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; }
.so-overview .kpi .glyph { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.so-overview .kpi .glyph svg { width: 16px; height: 16px; stroke-width: 2; }
.so-overview .kpi .val { font-family: "Sora", sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -1px; margin-top: 13px; line-height: 1; }
.so-overview .kpi .delta { font-size: 12px; font-weight: 700; margin-top: 7px; }
.so-overview .g-cyan { background: var(--so-accent-soft); color: var(--so-accent); }
.so-overview .g-violet { background: var(--so-violet-soft); color: var(--so-violet); }
.so-overview .g-green { background: var(--so-green-soft); color: var(--so-green); }
.so-overview .g-amber { background: var(--so-amber-soft); color: var(--so-amber); }
.so-overview .spark { position: absolute; right: 0; bottom: 0; width: 118px; height: 44px; opacity: 0.5; }
/* market cards */
.so-overview .market { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.so-overview .mc {
background: linear-gradient(180deg, var(--so-card2), var(--so-card));
border: 1px solid var(--so-line); border-radius: var(--so-r); padding: 16px 18px;
box-shadow: var(--sh); transition: 0.18s;
}
.so-overview .mc:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); border-color: var(--so-accent-line); }
.so-overview .mc .t { color: var(--so-dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: flex; justify-content: space-between; align-items: center; }
.so-overview .mc .v { font-family: "Sora", sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -0.6px; margin-top: 7px; }
.so-overview .mc .v small { font-family: "Hanken Grotesk", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.so-overview .mc .gaugewrap { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.so-overview .bar { height: 7px; border-radius: 6px; background: var(--so-card3); margin-top: 13px; overflow: hidden; }
.so-overview .bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--so-accent), var(--so-accent2)); }
.so-overview .bar.btc i { background: linear-gradient(90deg, #f7931a, #ffb454); }
.so-overview .delta-sm { font-size: 12.5px; font-weight: 700; margin-top: 11px; }
/* panels grid */
.so-overview .grid2 { display: grid; grid-template-columns: 1.38fr 1fr; gap: 20px; }
.so-overview .panel {
background: linear-gradient(180deg, var(--so-card2), var(--so-card));
border: 1px solid var(--so-line); border-radius: 14px; box-shadow: var(--sh); overflow: hidden;
}
.so-overview .ph { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--so-line2); }
.so-overview .ph h2 { font-family: "Sora", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.8px; text-transform: uppercase; margin: 0; }
.so-overview .ph .lnk { color: var(--so-accent); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.16s; }
.so-overview .ph .lnk:hover { gap: 7px; }
/* tables */
.so-overview table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.so-overview thead th { text-align: left; padding: 10px 20px; color: var(--so-dimmer); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; border-bottom: 1px solid var(--so-line2); }
.so-overview thead th.r, .so-overview td.r { text-align: right; }
.so-overview tbody td { padding: 12px 20px; border-bottom: 1px solid var(--so-line2); }
.so-overview tbody tr:last-child td { border-bottom: none; }
.so-overview tbody tr { transition: 0.12s; }
.so-overview tbody tr:hover td { background: rgba(22, 199, 216, 0.05); }
.so-overview .sym { display: flex; align-items: center; gap: 11px; }
.so-overview .sym .ti { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-family: "Sora", sans-serif; font-weight: 700; font-size: 12px; color: #06100f; flex: none; background: var(--so-accent); }
.so-overview .sym .nm { font-weight: 700; }
.so-overview .sym .ex { color: var(--so-dimmer); font-size: 11px; font-weight: 500; }
.so-overview .so-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 7px; text-transform: uppercase; letter-spacing: 0.3px; }
.so-overview .so-chip.buy { background: var(--so-green-soft); color: var(--so-green); }
.so-overview .so-chip.sell { background: var(--so-red-soft); color: var(--so-red); }
.so-overview .so-chip.neu { background: var(--so-card3); color: var(--so-dim); }
.so-overview .rsibar { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.so-overview .rsibar .track { width: 46px; height: 5px; border-radius: 4px; background: var(--so-card3); overflow: hidden; }
.so-overview .rsibar .track i { display: block; height: 100%; border-radius: 4px; }
/* signal feed */
.so-overview .feed { padding: 4px 0; }
.so-overview .fi { display: flex; gap: 13px; padding: 12px 20px; border-bottom: 1px solid var(--so-line2); transition: 0.12s; }
.so-overview .fi:last-child { border-bottom: none; }
.so-overview .fi:hover { background: rgba(22, 199, 216, 0.05); }
.so-overview .fi .fic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; border: 1px solid rgba(255, 255, 255, 0.04); }
.so-overview .fi .fic svg { width: 17px; height: 17px; stroke-width: 2.1; }
.so-overview .fi .body { flex: 1; min-width: 0; }
.so-overview .fi .h { font-weight: 600; font-size: 13.5px; }
.so-overview .fi .h b { font-weight: 700; }
.so-overview .fi .m { color: var(--so-dim); font-size: 12.5px; margin-top: 1px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.so-overview .fi .tg { font-family: "JetBrains Mono", monospace; font-size: 10.5px; background: var(--so-card3); padding: 0 6px; border-radius: 5px; color: var(--so-dim); }
.so-overview .fi .time { color: var(--so-dimmer); font-size: 11.5px; font-family: "JetBrains Mono", monospace; white-space: nowrap; }
.so-overview .ic-cyan { background: var(--so-accent-soft); color: var(--so-accent); }
.so-overview .ic-amber { background: var(--so-amber-soft); color: var(--so-amber); }
.so-overview .ic-green { background: var(--so-green-soft); color: var(--so-green); }
.so-overview .ic-red { background: var(--so-red-soft); color: var(--so-red); }
.so-overview .ic-violet { background: var(--so-violet-soft); color: var(--so-violet); }
.so-overview .empty { padding: 22px 20px; color: var(--so-dimmer); font-size: 13px; text-align: center; }
@media (max-width: 1140px) {
.so-overview .kpis, .so-overview .market { grid-template-columns: repeat(2, 1fr); }
.so-overview .grid2 { grid-template-columns: 1fr; }
}
/* MYDASH: overview blocks as dashboard widgets */
.so-builtin .so-overview { margin-bottom: 0; }
.so-builtin .so-overview .kpis,
.so-builtin .so-overview .market { margin-bottom: 0; }
.so-builtin .so-overview > .sec-lbl:first-child { margin-top: 0; }
.so-overview.no-rise .rise { animation: none; opacity: 1; transform: none; }
/*
* SignalOps component polish (UIRD-004/007) — bring DaisyUI components up to the
* v3 dashboard fidelity APP-WIDE by restyling the base DaisyUI classes under the
* signalops theme. Pages already use .card/.stats/.table/.badge/.tabs, so they
* gain the v3 look (gradient surfaces, hairline borders, shadows, accent rails,
* refined tables, hover lifts) without editing each page's markup.
*
* Scoped under [data-theme="signalops"]. The dashboard overview uses its own
* .so-* classes (signalops_overview.css) and is unaffected.
*/
/* ---- cards ---- */
[data-theme="signalops"] .card {
background: linear-gradient(180deg, var(--so-card2), var(--so-card));
border: 1px solid var(--so-line);
border-radius: var(--so-r);
box-shadow: var(--sh);
transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
[data-theme="signalops"] .card:hover {
transform: translateY(-2px);
box-shadow: var(--sh-lg);
border-color: var(--so-accent-line);
}
/* don't double-shadow nested/compact cards or chart widgets */
[data-theme="signalops"] .card .card { box-shadow: none; }
/* ---- stat tiles (KPI look with accent rail) ---- */
[data-theme="signalops"] .stats {
background: transparent;
box-shadow: none;
gap: 16px;
display: grid;
grid-auto-flow: column;
}
[data-theme="signalops"] .stat {
background: linear-gradient(180deg, var(--so-card2), var(--so-card));
border: 1px solid var(--so-line);
border-radius: var(--so-r);
box-shadow: var(--sh);
position: relative;
overflow: hidden;
transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
[data-theme="signalops"] .stat::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--so-accent);
box-shadow: 0 0 14px var(--so-accent);
}
[data-theme="signalops"] .stat:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); border-color: var(--so-accent-line); }
[data-theme="signalops"] .stat-title { color: var(--so-dim); text-transform: uppercase; letter-spacing: 0.6px; font-size: 12px; font-weight: 700; }
[data-theme="signalops"] .stat-value { font-family: "Sora", sans-serif; font-weight: 800; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; }
[data-theme="signalops"] .stat-desc { color: var(--so-dimmer); }
/* ---- tables (v3 dense table) ---- */
[data-theme="signalops"] .table thead th {
color: var(--so-dimmer);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
border-bottom: 1px solid var(--so-line2);
background: transparent;
}
[data-theme="signalops"] .table tbody td { border-bottom: 1px solid var(--so-line2); }
[data-theme="signalops"] .table tbody tr:last-child td { border-bottom: none; }
[data-theme="signalops"] .table tbody tr { transition: background 0.12s; }
[data-theme="signalops"] .table tbody tr:hover td { background: rgba(22, 199, 216, 0.05); }
[data-theme="signalops"] .table :where(td, th):first-child { border-radius: 0; }
/* numbers in tables read as mono/tabular */
[data-theme="signalops"] .table td.num, [data-theme="signalops"] .table td.mono { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
/* symbol initial tile (app-wide, used in pair tables) */
[data-theme="signalops"] .so-ti {
width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
font-family: "Sora", sans-serif; font-weight: 700; font-size: 12px;
color: #06100f; background: var(--so-accent); flex: none;
}
/* ---- panels / section headers via DaisyUI bg-base ----
NOTE: do NOT force .bg-base-200 transparent — it's used on ~87 real surfaces
(drawer, empty states, filter panels, collapses). The page background comes
from the [data-theme] body rule in signalops_theme.css, which already wins. */
[data-theme="signalops"] .bg-base-100 { background-color: var(--so-card) !important; }
[data-theme="signalops"] .bg-base-300 { background-color: var(--so-card3) !important; }
/* ---- checkbox: explicit visible checked state (CDN DaisyUI vars unreliable
with the hand-authored theme — checked bg was rendering transparent) ---- */
[data-theme="signalops"] .checkbox { border-color: var(--so-dim); }
[data-theme="signalops"] .checkbox:checked,
[data-theme="signalops"] .checkbox[aria-checked="true"] {
background-color: var(--so-accent) !important;
border-color: var(--so-accent) !important;
background-image: url('data:image/svg+xml;utf8,') !important;
background-size: 78%; background-position: center; background-repeat: no-repeat;
}
/* toggle: visible accent when on */
[data-theme="signalops"] .toggle:checked {
background-color: var(--so-accent) !important;
border-color: var(--so-accent) !important;
}
/* ---- collapse-arrow chevron: default border-color is near-invisible on the
dark theme. Force accent + thicker stroke so every collapse toggle reads as
clickable (affects ~20 collapses across detail/table/alerts/scalping). ---- */
[data-theme="signalops"] .collapse-arrow > .collapse-title:after {
border-color: var(--so-accent) !important;
border-width: 2px 2px 0 0 !important;
opacity: 0.9;
}
[data-theme="signalops"] .collapse-arrow > .collapse-title {
transition: background-color 0.15s ease;
}
[data-theme="signalops"] .collapse-arrow > .collapse-title:hover {
background-color: var(--so-accent-soft) !important;
}
/* explicit inline chevron (used where the detached corner arrow was confusing):
rotate ▶ to ▼ when the collapse is open */
.collapse-chevron { display: inline-block; font-size: 0.7em; }
.collapse input:checked ~ .collapse-title .collapse-chevron { transform: rotate(90deg); }
/* ---- badges → chip feel ----
Soft-fill chips instead of DaisyUI's solid badge colours. (These were first added
because the badge variants computed transparent; the cause was HSL theme vars,
now oklch in signalops_theme.css. The soft fills remain the intended look.) */
[data-theme="signalops"] .badge {
border-radius: 7px;
font-weight: 700;
letter-spacing: 0.2px;
border-width: 1px;
}
[data-theme="signalops"] .badge-primary,
[data-theme="signalops"] .badge-info { background-color: var(--so-accent-soft) !important; color: var(--so-accent) !important; border-color: var(--so-accent-line) !important; }
[data-theme="signalops"] .badge-secondary,
[data-theme="signalops"] .badge-accent { background-color: var(--so-violet-soft) !important; color: var(--so-violet) !important; border-color: rgba(181,137,255,.3) !important; }
[data-theme="signalops"] .badge-success { background-color: var(--so-green-soft) !important; color: var(--so-green) !important; border-color: rgba(85,226,122,.3) !important; }
[data-theme="signalops"] .badge-error { background-color: var(--so-red-soft) !important; color: var(--so-red) !important; border-color: rgba(255,95,115,.3) !important; }
[data-theme="signalops"] .badge-warning { background-color: var(--so-amber-soft) !important; color: var(--so-amber) !important; border-color: rgba(255,191,63,.3) !important; }
[data-theme="signalops"] .badge-neutral,
[data-theme="signalops"] .badge-ghost { background-color: var(--so-card3) !important; color: var(--so-dim) !important; border-color: var(--so-line) !important; }
/* outline badges: keep transparent bg, colored text/border */
[data-theme="signalops"] .badge-outline { background-color: transparent !important; }
[data-theme="signalops"] .badge-outline.badge-success { color: var(--so-green) !important; border-color: rgba(85,226,122,.5) !important; }
[data-theme="signalops"] .badge-outline.badge-error { color: var(--so-red) !important; border-color: rgba(255,95,115,.5) !important; }
/* ---- tabs → v3 pill ---- */
[data-theme="signalops"] .tabs-boxed, [data-theme="signalops"] .tabs.tabs-boxed {
background: var(--so-card);
border: 1px solid var(--so-line);
border-radius: 10px;
padding: 4px;
}
[data-theme="signalops"] .tab.tab-active {
background: var(--so-accent-soft) !important;
color: var(--so-accent) !important;
border-radius: 7px;
}
/* ---- inputs / selects: subtle dark fields ---- */
[data-theme="signalops"] .input, [data-theme="signalops"] .select, [data-theme="signalops"] .textarea {
background-color: #0d100e;
border-color: var(--so-line);
}
[data-theme="signalops"] .input:focus, [data-theme="signalops"] .select:focus {
border-color: var(--so-accent-line);
outline: none;
}
/* page section headings: tighten + Sora (already via base) — add subtle subtitle color */
[data-theme="signalops"] .page-subtitle, [data-theme="signalops"] .opacity-70 { color: var(--so-dim); }
/* Liquidations: keep the compact two-column summary on phones without
cutting off large amounts or the long/short ratio. */
@media (max-width: 639px) {
[data-theme="signalops"] .signalops-liquidations .liquidations-kpis .stat {
min-width: 0;
padding: 12px;
}
[data-theme="signalops"] .signalops-liquidations .liquidations-kpis .stat-title {
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.25;
}
[data-theme="signalops"] .signalops-liquidations .liquidations-kpis .stat-value {
font-size: 17px;
white-space: normal;
overflow-wrap: anywhere;
}
[data-theme="signalops"] .signalops-liquidations .liquidations-kpis .stat-desc {
white-space: normal;
overflow-wrap: anywhere;
}
}
@media (max-width: 360px) {
[data-theme="signalops"] .signalops-liquidations .liquidations-kpis {
grid-template-columns: minmax(0, 1fr);
}
}
/* Backtests: the full metrics table remains scrollable, with a visible mobile cue. */
[data-theme="signalops"] .signalops-backtests .backtests-scroll-hint {
display: none;
}
@media (max-width: 1023px) {
[data-theme="signalops"] .signalops-backtests .backtests-scroll-hint {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 12px 16px;
color: var(--so-accent);
background: var(--so-accent-soft);
font-size: 0.875rem;
font-weight: 600;
}
}
/* Match Signal Feed's labelled mobile rows: the newest liquidation's USD value
must not be hidden off the right edge of a scrolling desktop table. */
@media (max-width: 639px) {
[data-theme="signalops"] .liquidations-results { overflow: visible; }
[data-theme="signalops"] .liquidations-table,
[data-theme="signalops"] .liquidations-table tbody { display: block; width: 100%; }
[data-theme="signalops"] .liquidations-table thead { display: none; }
[data-theme="signalops"] .liquidations-table tbody tr {
display: block;
margin-bottom: 12px;
padding: 8px 12px;
border: 1px solid var(--so-line);
border-radius: var(--so-r);
background: var(--so-card);
}
[data-theme="signalops"] .liquidations-table tbody td {
display: grid;
grid-template-columns: minmax(82px, .7fr) minmax(0, 1.3fr);
gap: 12px;
align-items: start;
width: 100%;
padding: 8px 0;
border-bottom: 1px solid var(--so-line2);
text-align: left !important;
overflow-wrap: anywhere;
}
[data-theme="signalops"] .liquidations-table tbody td::before {
content: attr(data-label);
color: var(--so-dimmer);
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
[data-theme="signalops"] .liquidations-table tbody td:last-child { border-bottom: 0; }
}
/*
* SignalOps control neutralization (UIRD) — comprehensive override layer so
* every DaisyUI control reads as signalops instead of washed-out CDN defaults.
* Keeps DaisyUI (the app is built on it) but stops the per-component whack-a-mole.
* Scoped under [data-theme="signalops"]. Loaded last via application.css.
*
* (.card / .stat / .table / .badge / .tabs / .checkbox / .toggle live in
* signalops_components.css — this file covers the rest.)
*/
/* ---------- form fields: dark surfaces + accent focus ---------- */
[data-theme="signalops"] .input,
[data-theme="signalops"] .select,
[data-theme="signalops"] .textarea,
[data-theme="signalops"] .file-input {
background-color: #0d100e;
border-color: var(--so-line);
color: var(--so-ink);
}
[data-theme="signalops"] .input::placeholder,
[data-theme="signalops"] .textarea::placeholder { color: var(--so-dimmer); }
[data-theme="signalops"] .input:focus,
[data-theme="signalops"] .select:focus,
[data-theme="signalops"] .textarea:focus,
[data-theme="signalops"] .input:focus-within,
[data-theme="signalops"] .select:focus-within {
border-color: var(--so-accent-line);
outline: 2px solid var(--so-accent-soft);
outline-offset: -1px;
}
/* ---------- radio: accent when checked (parity with checkbox) ---------- */
[data-theme="signalops"] .radio { border-color: var(--so-dim); }
[data-theme="signalops"] .radio:checked,
[data-theme="signalops"] .radio[aria-checked="true"] {
border-color: var(--so-accent) !important;
background-color: var(--so-accent) !important;
box-shadow: 0 0 0 4px #0d100e inset !important; /* center dot via inset gap */
}
/* ---------- range slider: accent track/thumb ---------- */
[data-theme="signalops"] .range { color: var(--so-accent); }
[data-theme="signalops"] .range:focus { --range-shdw: var(--so-accent); }
/* ---------- labels: readable, not washed ---------- */
[data-theme="signalops"] .label-text { color: var(--so-dim); }
[data-theme="signalops"] .label-text-alt { color: var(--so-dimmer); }
/* ---------- buttons: keep token fills, fix ghost/outline contrast ---------- */
/* The CDN theme has no primary fill for our hand-authored theme variables.
Give primary actions one recognizable treatment across app and auth pages. */
[data-theme="signalops"] .btn-primary:not(.btn-outline):not(:disabled):not(.btn-disabled) {
background-color: var(--so-accent);
border-color: var(--so-accent);
color: #061a1c;
}
[data-theme="signalops"] .btn-primary:not(.btn-outline):not(:disabled):not(.btn-disabled):hover {
background-color: #22d7e7;
border-color: #22d7e7;
}
[data-theme="signalops"] .btn-ghost { color: var(--so-dim); }
[data-theme="signalops"] .btn-ghost:hover { background-color: var(--so-card3); color: var(--so-ink); }
[data-theme="signalops"] .btn-outline { border-color: var(--so-line-strong, var(--so-line)); color: var(--so-ink); }
[data-theme="signalops"] .btn-outline:hover { background-color: var(--so-card3); border-color: var(--so-accent-line); color: var(--so-ink); }
/* keep semantic outline buttons colored */
[data-theme="signalops"] .btn-outline.btn-success { color: var(--so-green); border-color: rgba(85,226,122,.4); }
[data-theme="signalops"] .btn-outline.btn-success:hover { background: var(--so-green-soft); border-color: var(--so-green); color: var(--so-green); }
[data-theme="signalops"] .btn-outline.btn-error { color: var(--so-red); border-color: rgba(255,95,115,.4); }
[data-theme="signalops"] .btn-outline.btn-error:hover { background: var(--so-red-soft); border-color: var(--so-red); color: var(--so-red); }
[data-theme="signalops"] .btn-outline.btn-primary { color: var(--so-accent); border-color: var(--so-accent-line); }
[data-theme="signalops"] .btn-outline.btn-primary:hover { background: var(--so-accent-soft); border-color: var(--so-accent); color: var(--so-accent); }
/* ---------- alert variants: tinted, not flat grey ---------- */
[data-theme="signalops"] .alert { background-color: var(--so-card); border: 1px solid var(--so-line); }
[data-theme="signalops"] .alert-info { background-color: var(--so-accent-soft); border-color: var(--so-accent-line); color: var(--so-ink); }
[data-theme="signalops"] .alert-success { background-color: var(--so-green-soft); border-color: rgba(85,226,122,.3); color: var(--so-ink); }
[data-theme="signalops"] .alert-warning { background-color: var(--so-amber-soft); border-color: rgba(255,191,63,.3); color: var(--so-ink); }
[data-theme="signalops"] .alert-error { background-color: var(--so-red-soft); border-color: rgba(255,95,115,.3); color: var(--so-ink); }
/* ---------- steps / step (global; stage2 has a custom one) ---------- */
[data-theme="signalops"] .steps .step:before { background-color: var(--so-card3); }
[data-theme="signalops"] .steps .step:after { background-color: var(--so-card3); color: var(--so-dim); }
[data-theme="signalops"] .steps .step-primary:after { background-color: var(--so-accent); color: #06100f; }
[data-theme="signalops"] .steps .step-primary + .step-primary:before { background-color: var(--so-accent); }
/* ---------- menu / dropdown / join / divider / kbd / progress / modal ---------- */
[data-theme="signalops"] .menu :where(li > *):hover { background-color: var(--so-card3); }
[data-theme="signalops"] .menu-title { color: var(--so-dimmer); }
[data-theme="signalops"] .dropdown-content { background-color: var(--so-card); border: 1px solid var(--so-line); box-shadow: var(--sh-lg); }
[data-theme="signalops"] .signalops-signals .signals-filter-panel {
position: relative;
z-index: 30;
isolation: isolate;
}
[data-theme="signalops"] .signalops-signals .signals-filter-panel .dropdown-content {
z-index: 60 !important;
background-color: #161b18 !important;
background-image: none !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 60px rgba(0, 0, 0, .72);
}
/* Compact filter controls without changing their order or submitted values. */
@media (max-width: 639px) {
[data-theme="signalops"] .signalops-alerts .signalops-alert-explainer {
grid-template-columns: 20px minmax(0, 1fr) 44px;
align-items: start;
gap: 8px;
padding: 4px 8px;
/* DaisyUI centres .alert content below sm; this banner reads as left-aligned text. */
justify-items: stretch;
text-align: start;
}
[data-theme="signalops"] .signalops-alerts .signalops-alert-explainer > svg { margin-top: 12px; }
/* Safari still draws its native marker on a flex ; the ▾ below replaces it. */
[data-theme="signalops"] .signalops-alerts .signalops-alert-explainer summary { list-style: none; }
[data-theme="signalops"] .signalops-alerts .signalops-alert-explainer summary::-webkit-details-marker { display: none; }
/* Three tabs in three equal columns, labels wrapping, instead of a row clipped mid-word. */
[data-theme="signalops"] .signalops-alerts .tabs {
grid-auto-flow: row;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: visible;
}
[data-theme="signalops"] .signalops-alerts .tabs .tab {
height: auto;
min-height: 44px;
padding-inline: 6px;
white-space: normal;
line-height: 1.2;
text-align: center;
}
[data-theme="signalops"] .signalops-alerts .signalops-alert-explainer summary::after {
content: "▾";
margin-left: auto;
font-size: 14px;
}
[data-theme="signalops"] .signalops-alerts .signalops-alert-explainer details[open] summary::after { transform: rotate(180deg); }
[data-theme="signalops"] .signalops-signals .signals-feed-heading { margin-bottom: 16px; }
[data-theme="signalops"] .signalops-signals .signals-filter-panel { margin-bottom: 16px; }
[data-theme="signalops"] .signalops-signals .signals-filter-panel .card-body { padding: 12px; }
[data-theme="signalops"] .signalops-signals .signals-filter-header { display: block; margin-bottom: 8px; }
[data-theme="signalops"] .signalops-signals .signals-filter-header .card-title { margin-bottom: 8px; }
[data-theme="signalops"] .signalops-signals .signals-preset-actions { justify-content: space-between; gap: 4px; }
[data-theme="signalops"] .signalops-signals .signals-preset-actions .btn { min-height: 40px; padding-inline: 8px; }
[data-theme="signalops"] .signalops-signals #signal-feed-filter-form > * + * { margin-top: 10px; }
[data-theme="signalops"] .signalops-signals .signals-filter-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 8px;
}
[data-theme="signalops"] .signalops-signals .signals-filter-fields > .dropdown { min-width: 0; }
[data-theme="signalops"] .signalops-signals .signals-filter-fields > :is(.dropdown, label, select, div.flex) {
min-width: 0;
}
[data-theme="signalops"] .signalops-signals .signals-filter-fields > :is(.dropdown, label, select, div.flex) > [role="button"],
[data-theme="signalops"] .signalops-signals .signals-filter-fields > :is(label, select, div.flex) {
width: 100%;
min-height: 40px;
justify-content: center;
}
[data-theme="signalops"] .signalops-signals .signals-filter-fields > .dropdown > [role="button"] { padding-inline: 6px; }
[data-theme="signalops"] .signalops-signals .signals-filter-fields > .dropdown > [role="button"] svg,
[data-theme="signalops"] .signalops-signals .signals-filter-fields > label svg,
[data-theme="signalops"] .signalops-signals .signals-filter-fields > div.flex svg { display: none; }
[data-theme="signalops"] .signalops-signals .signals-filter-fields > :is(span, button[type="submit"]) {
grid-column: 1 / -1;
}
[data-theme="signalops"] .signalops-signals .signals-filter-fields > button[type="submit"] {
min-height: 44px;
margin-left: 0;
}
[data-theme="signalops"] .signalops-signals .signals-active-filters {
flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
padding-bottom: 4px;
scrollbar-width: thin;
}
[data-theme="signalops"] .signalops-signals .signals-active-filters > * { flex: none; }
}
/* At the narrowest width, keep both alert actions fully labelled. */
@media (max-width: 360px) {
[data-theme="signalops"] .signalops-alerts .alert-rule-actions {
grid-template-columns: minmax(0, 1fr);
}
[data-theme="signalops"] .signalops-alerts .alert-rule-actions .btn {
width: 100%;
min-height: 44px;
white-space: nowrap;
}
}
/* Keep form cards and controls inside the mobile gutter instead of widening the page. */
@media (max-width: 639px) {
[data-theme="signalops"] .signalops-backtest-form .backtest-form-header {
align-items: stretch;
flex-direction: column;
gap: 12px;
}
[data-theme="signalops"] .signalops-backtest-form .backtest-preset-control {
align-items: stretch;
flex-direction: column;
gap: 6px;
min-width: 0;
}
[data-theme="signalops"] .signalops-backtest-form .backtest-preset-control select {
width: 100%;
min-width: 0;
}
[data-theme="signalops"] :is(.signalops-backtest-form, .signalops-account-settings) .card-body {
min-width: 0;
padding: 16px;
}
[data-theme="signalops"] :is(.signalops-backtest-form, .signalops-account-settings) .form-control,
[data-theme="signalops"] .signalops-backtest-form [data-backtest-form-target="conditionCard"],
[data-theme="signalops"] .signalops-backtest-form .condition-filter-panel .grid > *,
[data-theme="signalops"] .signalops-account-settings .grid > * {
min-width: 0;
}
[data-theme="signalops"] :is(.signalops-backtest-form, .signalops-account-settings) :is(.input, .select, .textarea) {
box-sizing: border-box;
min-width: 0;
max-width: 100%;
}
[data-theme="signalops"] .signalops-backtest-form [data-backtest-form-target="conditionCard"] .condition-filter-panel .grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-theme="signalops"] .signalops-backtest-form [data-backtest-form-target="conditionCard"] .form-control > .flex input {
min-width: 0;
}
[data-theme="signalops"] .signalops-backtest-form .backtest-direction-options {
flex-wrap: wrap;
column-gap: 12px;
}
[data-theme="signalops"] .signalops-backtest-form .backtest-stop-wick {
flex-wrap: wrap;
}
}
[data-theme="signalops"] .divider { color: var(--so-dimmer); }
[data-theme="signalops"] .divider:before, [data-theme="signalops"] .divider:after { background-color: var(--so-line); }
[data-theme="signalops"] .kbd { background-color: var(--so-card3); border-color: var(--so-line); color: var(--so-dim); }
[data-theme="signalops"] .progress { background-color: var(--so-card3); }
[data-theme="signalops"] .progress-primary::-webkit-progress-value { background-color: var(--so-accent); }
[data-theme="signalops"] .modal-box { background-color: var(--so-card); border: 1px solid var(--so-line); max-height: 90vh; overflow-y: auto; }
/* ---------- semantic text colors (vivid signalops, not muddy) ---------- */
[data-theme="signalops"] .text-success { color: var(--so-green) !important; }
[data-theme="signalops"] .text-error { color: var(--so-red) !important; }
[data-theme="signalops"] .text-warning { color: var(--so-amber) !important; }
[data-theme="signalops"] .text-info { color: var(--so-accent) !important; }
[data-theme="signalops"] .text-primary { color: var(--so-accent) !important; }
/* ---------- scalping stage2 semantic color coding (data-driven, JS-safe) ---------- */
[data-theme="signalops"] .so-stage2 [data-direction="bullish"] { color: var(--so-green); }
[data-theme="signalops"] .so-stage2 [data-direction="bearish"] { color: var(--so-red); }
[data-theme="signalops"] .so-stage2 [data-direction].btn-active,
[data-theme="signalops"] .so-stage2 [data-direction="bullish"].btn-active { box-shadow: inset 0 0 0 1px currentColor; }
/*
* SignalOps trade-pair detail (UIRD B-02 → done) — verdict header + 2-col layout.
* Ported from docs/plans/markets-detail-prototype.html. Scoped to [data-theme=signalops].
*/
[data-theme="signalops"] .so-vhead {
position: sticky; top: 62px; z-index: 9; /* tuck below the sticky topbar (z-20, ~62px tall) */
background: linear-gradient(180deg, rgba(20,24,21,.96), rgba(16,19,17,.92));
backdrop-filter: blur(10px);
border: 1px solid var(--so-line); border-radius: 14px; box-shadow: var(--sh);
padding: 16px 20px; margin-bottom: 18px;
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
[data-theme="signalops"] .so-vhead .vti { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-family: "Sora", sans-serif; font-weight: 800; color: #1a1205; font-size: 17px; background: var(--so-accent); flex: none; }
[data-theme="signalops"] .so-vhead .vsym { font-family: "Sora", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.5px; display: flex; align-items: center; gap: 9px; }
[data-theme="signalops"] .so-vhead .vprice { font-family: "Sora", sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -.8px; }
[data-theme="signalops"] .so-verdict { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 10px; font-weight: 800; font-size: 15px; letter-spacing: .3px; }
[data-theme="signalops"] .so-verdict.buy { background: var(--so-green-soft); color: var(--so-green); border: 1px solid rgba(85,226,122,.3); }
[data-theme="signalops"] .so-verdict.sell { background: var(--so-red-soft); color: var(--so-red); border: 1px solid rgba(255,95,115,.3); }
[data-theme="signalops"] .so-verdict.neu { background: var(--so-card3); color: var(--so-dim); border: 1px solid var(--so-line); }
[data-theme="signalops"] .so-vstat { display: flex; flex-direction: column; gap: 2px; }
[data-theme="signalops"] .so-vstat .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--so-dimmer); font-weight: 700; }
[data-theme="signalops"] .so-vstat .v { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 14px; }
[data-theme="signalops"] .so-vsep { width: 1px; height: 34px; background: var(--so-line); }
/* quick TF category tiles */
[data-theme="signalops"] .so-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
[data-theme="signalops"] .so-qt { background: linear-gradient(180deg, var(--so-card2), var(--so-card)); border: 1px solid var(--so-line); border-radius: 11px; padding: 12px 14px; display: flex; align-items: center; gap: 11px; }
[data-theme="signalops"] .so-qt .qdot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
[data-theme="signalops"] .so-qt .qdot.g { background: var(--so-green); box-shadow: 0 0 10px var(--so-green); }
[data-theme="signalops"] .so-qt .qdot.r { background: var(--so-red); box-shadow: 0 0 10px var(--so-red); }
[data-theme="signalops"] .so-qt .qdot.y { background: var(--so-amber); box-shadow: 0 0 10px var(--so-amber); }
[data-theme="signalops"] .so-qt .l { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--so-dimmer); font-weight: 700; }
[data-theme="signalops"] .so-qt .v { font-weight: 700; font-size: 14px; }
/* 2-col body */
[data-theme="signalops"] .so-2col { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
/* let columns shrink below content min-width — the TradingView chart has a large
intrinsic min-width that otherwise forces the column (and page) wider on mobile. */
[data-theme="signalops"] .so-2col > * { min-width: 0; }
[data-theme="signalops"] .so-2col .card { overflow: hidden; }
@media (max-width: 1120px) {
[data-theme="signalops"] .so-2col { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
[data-theme="signalops"] .so-quad { grid-template-columns: repeat(2, 1fr); }
}
/* ====================================================================
* Detail-page polish — restyle existing DaisyUI markup to match
* docs/plans/markets-detail-prototype.html (.ch / .lvl / .ind / .qt /
* verdict price). Container-only restyles; no ERB logic / JS contracts
* touched. The chart card, turbo live-price, and rendered partials keep
* their markup; we only refine their look via scoped selectors.
* ==================================================================== */
/* verdict header: price block -> Sora display (prototype .vhead .price).
The live-price partial uses Tailwind text-2xl/3xl font-bold; lift it to
the prototype's display face + tracking without touching the partial. */
[data-theme="signalops"] .so-vhead [id^="live_price_"] > div:first-child {
font-family: "Sora", sans-serif; font-weight: 800;
font-size: 26px; line-height: 1.05; letter-spacing: -.8px;
font-variant-numeric: tabular-nums;
}
[data-theme="signalops"] .so-vhead [id^="live_price_"] .opacity-50 {
font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
color: var(--so-dimmer); font-weight: 700;
}
/* exchange / index badge in header -> prototype hairline chip */
[data-theme="signalops"] .so-vhead .vsym .badge {
font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
border-radius: 6px; padding: 2px 7px;
}
/* ---- quick category tiles (.so-catsum) -> prototype .qt look ----
category_summary renders a 4-up grid of .card tiles (emoji + label +
verdict). Recompose them into the compact horizontal .qt tile. */
[data-theme="signalops"] .so-catsum .grid { gap: 12px; margin-bottom: 0; }
[data-theme="signalops"] .so-catsum .card {
background: linear-gradient(180deg, var(--so-card2), var(--so-card));
border: 1px solid var(--so-line); border-radius: 11px;
}
[data-theme="signalops"] .so-catsum .card:hover { transform: none; box-shadow: var(--sh); border-color: var(--so-line); }
[data-theme="signalops"] .so-catsum .card-body { gap: 3px; padding: 12px 14px; }
[data-theme="signalops"] .so-catsum .card-body .text-2xl { font-size: 20px; line-height: 1.1; }
[data-theme="signalops"] .so-catsum .card-body > .text-xs {
font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
color: var(--so-dimmer); font-weight: 700;
}
[data-theme="signalops"] .so-catsum .card-body > .text-sm { font-size: 14px; font-weight: 700; }
/* ---- indicator detail cards (right col) -> prototype .ch / .ind ---- */
/* card heading -> Sora uppercase header rule (.ch h3) with hairline rule */
[data-theme="signalops"] .so-indcol .card-title {
font-family: "Sora", sans-serif; font-weight: 700;
font-size: 13px; letter-spacing: .6px; text-transform: uppercase;
padding-bottom: 12px; margin-bottom: 4px;
border-bottom: 1px solid var(--so-line2);
}
[data-theme="signalops"] .so-indcol .card-title .text-base,
[data-theme="signalops"] .so-indcol .card-title svg { text-transform: none; }
/* indicator rows -> .ind (8px y-padding, hairline divider, last row clean) */
[data-theme="signalops"] .so-indcol .space-y-2 > .flex.justify-between {
padding: 8px 0; border-bottom: 1px solid var(--so-line2); margin: 0;
}
[data-theme="signalops"] .so-indcol .space-y-2 > .flex.justify-between:last-child { border-bottom: none; }
[data-theme="signalops"] .so-indcol .space-y-2 { margin-top: 2px; }
[data-theme="signalops"] .so-indcol .space-y-2 > .flex.justify-between > .opacity-70 { color: var(--so-dim); }
/* ---- Key Levels: daily open/high/low blocks -> prototype .lvl tile ---- */
[data-theme="signalops"] .so-keylvl .grid > .text-center {
background: var(--so-card); border: 1px solid var(--so-line);
border-radius: 9px; padding: 9px 8px;
}
[data-theme="signalops"] .so-keylvl .grid > .text-center .text-xs:last-child {
color: var(--so-dimmer); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; font-size: 10px;
}
[data-theme="signalops"] .so-keylvl .grid > .text-center .text-base,
[data-theme="signalops"] .so-keylvl .grid > .text-center .text-sm {
font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums;
}
/* section sub-labels (Daily / ICT Killzones) -> dimmer uppercase like prototype .upd */
[data-theme="signalops"] .so-keylvl .text-xs.font-semibold.uppercase { color: var(--so-dimmer); letter-spacing: .6px; }
/* ====================================================================
* Scalping stage 2: filter rail + results
* Ported polish from docs/plans/scalping-stage2-prototype.html.
* Restyles existing DaisyUI markup via scoped selectors only — no JS
* contract attributes (data-action / target / input name/id) touched.
* ==================================================================== */
[data-theme="signalops"] .so-presetbar { align-items: center; }
[data-theme="signalops"] .so-preset-actions { justify-content: flex-end; }
[data-theme="signalops"] .so-stage2 { display: grid; grid-template-columns: 308px 1fr; gap: 20px; align-items: start; }
[data-theme="signalops"] .so-stage2-rail { position: sticky; top: 14px; }
[data-theme="signalops"] .so-stage2-results { min-width: 0; }
/* ---- filter group panels (fgroup) ---------------------------------- */
[data-theme="signalops"] .so-stage2-rail .so-fgroup,
[data-theme="signalops"] .so-stage2-rail .bg-black\/20 {
background: linear-gradient(180deg, var(--so-card2), var(--so-card)) !important;
border: 1px solid var(--so-line); border-radius: var(--so-r);
box-shadow: var(--sh); padding: 0 !important; overflow: hidden;
}
[data-theme="signalops"] .so-stage2-rail .so-fgroup.active,
[data-theme="signalops"] .so-stage2-rail .so-fgroup:focus-within { border-color: var(--so-accent-line); }
/* header bar (fgh) with active-state dot */
[data-theme="signalops"] .so-stage2-rail .so-fgh {
padding: 11px 14px; margin: 0 !important;
border-bottom: 1px solid var(--so-line2);
}
[data-theme="signalops"] .so-stage2-rail .so-fgt {
font-family: "Sora", sans-serif; font-weight: 700;
font-size: 12.5px; letter-spacing: .4px; gap: 7px;
}
[data-theme="signalops"] .so-stage2-rail .so-fgt .text-lg { font-size: 13px; line-height: 1; }
[data-theme="signalops"] .so-stage2-rail .so-fgt-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--so-dimmer); flex: none;
}
[data-theme="signalops"] .so-stage2-rail .so-fgroup.active .so-fgt-dot {
background: var(--so-accent); box-shadow: 0 0 8px var(--so-accent);
}
[data-theme="signalops"] .so-stage2-rail .so-fgh .badge {
font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
text-transform: uppercase; background: var(--so-card3);
border: 1px solid var(--so-line); color: var(--so-dimmer); padding: 2px 7px;
}
/* group body: restore the horizontal padding the header reset removed.
Every direct child after the header bar gets the panel inset. */
[data-theme="signalops"] .so-stage2-rail .so-fgroup > *:not(.so-fgh) { padding-left: 14px; padding-right: 14px; }
[data-theme="signalops"] .so-stage2-rail .so-fgroup > .so-fgh + * { padding-top: 12px; }
[data-theme="signalops"] .so-stage2-rail .so-fgroup > *:last-child { padding-bottom: 14px; }
/* within-group logic toggle (.join btns -> seg pill) */
[data-theme="signalops"] .so-stage2-rail .join .btn-xs {
font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
min-height: 0; height: auto; padding: 4px 10px;
background: transparent; border: 1px solid var(--so-line);
color: var(--so-dim); text-transform: none;
}
[data-theme="signalops"] .so-stage2-rail .join .btn-xs.btn-active {
background: var(--so-accent-soft); border-color: var(--so-accent-line); color: var(--so-accent);
}
[data-theme="signalops"] .so-stage2-rail .join { border-radius: 7px; }
/* field micro-labels (fld label) */
[data-theme="signalops"] .so-stage2-rail .form-control .label { padding-bottom: 4px; }
[data-theme="signalops"] .so-stage2-rail .label-text {
font-size: 10.5px !important; text-transform: uppercase;
letter-spacing: .5px; color: var(--so-dimmer); font-weight: 700;
}
/* dark-field selects + inputs (sel/inp) */
[data-theme="signalops"] .so-stage2-rail .select,
[data-theme="signalops"] .so-stage2-rail .input {
background: #0d100e; border: 1px solid var(--so-line); border-radius: 8px;
color: var(--so-ink); font-size: 13px; min-height: 0;
height: auto; padding: 7px 10px;
}
[data-theme="signalops"] .so-stage2-rail .select:focus,
[data-theme="signalops"] .so-stage2-rail .input:focus {
outline: none; border-color: var(--so-accent-line);
}
[data-theme="signalops"] .so-stage2-rail .select { padding-right: 26px; }
/* repeatable trend-condition rows */
[data-theme="signalops"] .so-trend-condition {
background: rgba(13, 16, 14, .72);
border: 1px solid var(--so-line2);
border-radius: 9px;
padding: 9px;
transition: border-color .16s ease, background-color .16s ease;
}
[data-theme="signalops"] .so-trend-condition:focus-within {
background: var(--so-card3);
border-color: var(--so-accent-line);
}
[data-theme="signalops"] .so-trend-condition .select,
[data-theme="signalops"] .so-trend-condition .input {
min-width: 0;
width: 100%;
font-size: 11.5px;
}
/* chips — restyle the label wrappers around signal/gap checkboxes
(checkbox input itself is left untouched for the JS) */
[data-theme="signalops"] .so-stage2-rail .flex.flex-wrap.gap-1 > label {
border-radius: 7px; font-size: 11.5px; font-weight: 600;
padding: 4px 9px; transition: .14s;
}
/* direction segmented buttons keep accent treatment via .join rule above */
/* helper / hint text inside groups */
[data-theme="signalops"] .so-stage2-rail .so-fgroup .text-xs { font-size: 11px; }
/* tone the in-panel sub-dividers to the theme line colour */
[data-theme="signalops"] .so-stage2-rail .so-fgroup .border-gray-700 { border-color: var(--so-line2) !important; }
/* ---- quick presets row -------------------------------------------- */
[data-theme="signalops"] .so-presets .btn-outline {
border-radius: 8px; font-size: 12px; font-weight: 600;
border: 1px solid var(--so-accent-line); background: var(--so-accent-soft);
color: var(--so-accent); text-transform: none; min-height: 0; height: auto; padding: 6px 11px;
}
[data-theme="signalops"] .so-presets .btn-outline:hover {
background: var(--so-accent-line); color: var(--so-ink); border-color: var(--so-accent);
}
/* ---- results: stat tiles (rstat) ---------------------------------- */
[data-theme="signalops"] .so-rstats {
background: transparent !important; box-shadow: none; gap: 10px;
}
[data-theme="signalops"] .so-rstats .stat {
background: linear-gradient(180deg, var(--so-card2), var(--so-card));
border: 1px solid var(--so-line); border-radius: 10px;
text-align: center; min-width: 86px; gap: 0;
}
[data-theme="signalops"] .so-rstats .stat-value {
font-family: "Sora", sans-serif; font-weight: 800; font-size: 20px; line-height: 1;
}
[data-theme="signalops"] .so-rstats .stat-title {
font-size: 10px !important; text-transform: uppercase;
letter-spacing: .6px; color: var(--so-dimmer); font-weight: 700; margin-top: 2px;
}
/* match tile gets a green hairline like the prototype */
[data-theme="signalops"] .so-rstats .stat:nth-child(2) { border-color: rgba(85, 226, 122, .3); }
/* ---- results: view toggle (vtoggle) ------------------------------- */
[data-theme="signalops"] .so-vtoggle { border: 1px solid var(--so-line); }
[data-theme="signalops"] .so-vtoggle .join .btn-sm {
background: transparent; border: none; color: var(--so-dim);
font-weight: 700; font-size: 12.5px; min-height: 0; height: auto; padding: 6px 14px;
}
[data-theme="signalops"] .so-vtoggle .join .btn-sm.btn-active {
background: var(--so-accent-soft); color: var(--so-accent);
}
/* ---- results: matches table (panel + rtable) ---------------------- */
[data-theme="signalops"] .so-rtable {
background: linear-gradient(180deg, var(--so-card2), var(--so-card)) !important;
border: 1px solid var(--so-line) !important; box-shadow: var(--sh);
}
[data-theme="signalops"] .so-rtable table th {
color: var(--so-dimmer); font-size: 10px; text-transform: uppercase;
letter-spacing: .8px; font-weight: 700; padding: 9px 16px;
border-bottom: 1px solid var(--so-line2);
}
[data-theme="signalops"] .so-rtable table thead tr { background: transparent !important; }
[data-theme="signalops"] .so-rtable table td {
padding: 10px 16px; border-bottom: 1px solid var(--so-line2);
}
[data-theme="signalops"] .so-rtable table tr:last-child td { border-bottom: none; }
[data-theme="signalops"] .so-rtable table tbody tr.hover:hover,
[data-theme="signalops"] .so-rtable table tbody tr:hover { background: var(--so-card3) !important; }
@media (max-width: 1180px) {
[data-theme="signalops"] .so-stage2 { grid-template-columns: 1fr; }
[data-theme="signalops"] .so-stage2-rail { position: static; }
[data-theme="signalops"] .so-stage2-rail > .grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-theme="signalops"] .so-presetbar { align-items: stretch; flex-direction: column; }
[data-theme="signalops"] .so-preset-select { max-width: none; }
[data-theme="signalops"] .so-preset-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-theme="signalops"] .so-preset-actions .btn { width: 100%; }
[data-theme="signalops"] .so-rtable th:nth-child(8),
[data-theme="signalops"] .so-rtable td:nth-child(8),
[data-theme="signalops"] .so-rtable th:nth-child(9),
[data-theme="signalops"] .so-rtable td:nth-child(9) {
display: none;
}
}
@media (max-width: 860px) {
[data-theme="signalops"] .so-stage2-rail > .grid { grid-template-columns: 1fr; }
[data-theme="signalops"] .so-rtable th:nth-child(4),
[data-theme="signalops"] .so-rtable td:nth-child(4),
[data-theme="signalops"] .so-rtable th:nth-child(7),
[data-theme="signalops"] .so-rtable td:nth-child(7),
[data-theme="signalops"] .so-rtable th:nth-child(10),
[data-theme="signalops"] .so-rtable td:nth-child(10) {
display: none;
}
[data-theme="signalops"] .so-rtable table th,
[data-theme="signalops"] .so-rtable table td {
padding-left: 9px;
padding-right: 9px;
}
}
/* ---- unified signal-detail rail: one opaque panel, cards become hairline sections ---- */
[data-theme="signalops"] .so-signal-rail {
background: var(--so-card); border: 1px solid var(--so-line);
border-radius: 14px; box-shadow: var(--sh); overflow: hidden;
}
[data-theme="signalops"] .so-signal-rail .so-rail-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
padding: 12px 16px; background: var(--so-card2); border-bottom: 1px solid var(--so-line);
}
[data-theme="signalops"] .so-signal-rail .so-rail-title {
font-family: "Sora", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .6px; text-transform: uppercase;
}
[data-theme="signalops"] .so-signal-rail .so-rail-meta { font-size: 11px; color: var(--so-dimmer); }
[data-theme="signalops"] .so-signal-rail > .card {
background: transparent; border: 0; border-radius: 0; box-shadow: none; height: auto;
}
[data-theme="signalops"] .so-signal-rail > .card + .card { border-top: 1px solid var(--so-line); }
[data-theme="signalops"] .so-signal-rail > .card:hover { transform: none; box-shadow: none; }
[data-theme="signalops"] .so-signal-rail .card-body { padding: 10px 16px 8px; gap: 0; }
[data-theme="signalops"] .so-signal-rail .card-title {
font-size: 11.5px; color: var(--so-dim); padding-bottom: 6px; margin-bottom: 0; border-bottom: 0; min-height: 22px;
}
[data-theme="signalops"] .so-signal-rail .space-y-2 > .flex.justify-between { padding: 5px 0; font-size: 13px; }
[data-theme="signalops"] .so-signal-rail .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 8px; }
[data-theme="signalops"] .so-signal-rail .space-y-2 > .text-xs.-mt-1 { margin-top: -2px; padding-bottom: 4px; }
/* category status chip (replaces traffic-light emoji) */
[data-theme="signalops"] .so-status {
font-family: "Hanken Grotesk", system-ui, sans-serif; text-transform: none; letter-spacing: .2px;
font-size: 10.5px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 999px; border: 1px solid transparent;
}
[data-theme="signalops"] .so-status--bullish { color: var(--so-green); background: var(--so-green-soft); border-color: rgba(85,226,122,.28); }
[data-theme="signalops"] .so-status--bearish { color: var(--so-red); background: var(--so-red-soft); border-color: rgba(255,95,115,.28); }
[data-theme="signalops"] .so-status--neutral { color: var(--so-amber); background: var(--so-amber-soft); border-color: rgba(255,191,63,.26); }
/* Trade-pair scanner: decision-first density with complete mobile rows. */
[data-theme="signalops"] .markets-page {
width: 100%; max-width: 1440px; margin: 0 auto; padding: 32px 16px 72px;
}
[data-theme="signalops"] .markets-hero {
display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px;
}
[data-theme="signalops"] .markets-kicker {
color: var(--so-accent); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
[data-theme="signalops"] .markets-title {
margin-top: 5px; color: var(--so-ink); font-family: "Sora", sans-serif; font-size: clamp(25px, 2.4vw, 36px);
font-weight: 800; letter-spacing: -.035em; line-height: 1.08;
}
[data-theme="signalops"] .markets-subtitle { margin-top: 7px; color: var(--so-dim); font-size: 14px; }
[data-theme="signalops"] .markets-live {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(85, 226, 122, .22);
border-radius: 8px; background: rgba(85, 226, 122, .06); color: var(--so-green); font-size: 11px; font-weight: 700;
}
[data-theme="signalops"] .markets-live::before {
content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--so-green); box-shadow: 0 0 10px rgba(85, 226, 122, .7);
}
[data-theme="signalops"] .markets-stats {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; overflow: hidden;
margin-bottom: 14px; border: 1px solid var(--so-line); border-radius: 11px; background: var(--so-line2);
}
[data-theme="signalops"] .markets-stat { min-width: 0; padding: 12px 14px; background: var(--so-card); }
[data-theme="signalops"] .markets-stat strong {
display: block; color: var(--so-ink); font-family: "JetBrains Mono", monospace; font-size: 19px; font-weight: 700;
}
[data-theme="signalops"] .markets-stat span { color: var(--so-dimmer); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
[data-theme="signalops"] .markets-stat.is-live strong { color: var(--so-green); }
[data-theme="signalops"] .markets-stat.is-signal strong { color: var(--so-accent); }
[data-theme="signalops"] .markets-stat.is-stale strong { color: var(--warn-ink, #ffbf3f); }
[data-theme="signalops"] .markets-stat.is-watch strong { color: #f4ca58; }
[data-theme="signalops"] .markets-toolbar {
display: grid; grid-template-columns: minmax(220px, 1fr) auto repeat(3, minmax(132px, auto)); gap: 10px;
align-items: center; margin-bottom: 14px; padding: 10px; border: 1px solid var(--so-line); border-radius: 11px;
background: rgba(15, 19, 16, .86); box-shadow: var(--sh-sm); position: sticky; top: 72px; z-index: 8;
backdrop-filter: blur(12px);
}
[data-theme="signalops"] .markets-search { position: relative; min-width: 0; }
[data-theme="signalops"] .markets-search svg {
position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--so-dimmer); pointer-events: none;
}
[data-theme="signalops"] .markets-search input,
[data-theme="signalops"] .markets-select {
width: 100%; min-height: 42px; border: 1px solid var(--so-line); border-radius: 8px; background: #0d100e; color: var(--so-ink);
font-size: 13px; transition: border-color 160ms ease, box-shadow 160ms ease;
}
[data-theme="signalops"] .markets-search input { padding: 0 12px 0 38px; }
[data-theme="signalops"] .markets-select { padding: 0 32px 0 11px; }
[data-theme="signalops"] .markets-search input:focus,
[data-theme="signalops"] .markets-select:focus {
border-color: var(--so-accent-line); outline: 2px solid var(--so-accent-soft); outline-offset: 1px;
}
[data-theme="signalops"] .markets-scopes { display: grid; grid-template-columns: repeat(4, auto); gap: 3px; }
[data-theme="signalops"] .markets-scope {
min-height: 42px; padding: 0 12px; border: 1px solid transparent; border-radius: 7px; color: var(--so-dim);
background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
[data-theme="signalops"] .markets-scope:hover { color: var(--so-ink); background: var(--so-card2); }
[data-theme="signalops"] .markets-scope.is-active { color: var(--so-accent); border-color: var(--so-accent-line); background: var(--so-accent-soft); }
[data-theme="signalops"] .markets-scope:focus-visible,
[data-theme="signalops"] .markets-reset:focus-visible,
[data-theme="signalops"] .markets-watch:focus-visible,
[data-theme="signalops"] .markets-row:focus-visible {
outline: 2px solid var(--so-accent); outline-offset: 2px;
}
[data-theme="signalops"] .markets-board { overflow: hidden; border: 1px solid var(--so-line); border-radius: 12px; background: var(--so-card); box-shadow: var(--sh-md); }
[data-theme="signalops"] .markets-grid-head,
[data-theme="signalops"] .markets-row {
display: grid; grid-template-columns: minmax(220px, 1.1fr) minmax(360px, 1.7fr) minmax(120px, .62fr) minmax(126px, .62fr) 58px;
align-items: center; column-gap: 16px;
}
[data-theme="signalops"] .markets-grid-head {
min-height: 42px; padding: 0 16px; border-bottom: 1px solid var(--so-line); background: var(--so-card2); color: var(--so-dimmer);
font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
[data-theme="signalops"] .markets-grid-head span:nth-last-child(-n+2) { text-align: right; }
[data-theme="signalops"] .markets-row {
min-height: 72px; padding: 9px 16px; border-bottom: 1px solid var(--so-line2); cursor: pointer;
transition: background-color 160ms ease, box-shadow 160ms ease;
}
[data-theme="signalops"] .markets-row:last-child { border-bottom: 0; }
[data-theme="signalops"] .markets-row:hover { background: rgba(22, 199, 216, .045); box-shadow: inset 3px 0 0 var(--so-accent); }
[data-theme="signalops"] .markets-row[hidden] { display: none !important; }
[data-theme="signalops"] .markets-data { display: contents; }
[data-theme="signalops"] .markets-market { display: flex; align-items: center; gap: 11px; min-width: 0; }
[data-theme="signalops"] .markets-symbol { min-width: 0; }
[data-theme="signalops"] .markets-symbol strong { display: block; overflow: hidden; color: var(--so-ink); font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="signalops"] .markets-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; color: var(--so-dimmer); font-size: 10px; }
[data-theme="signalops"] .markets-meta span + span::before { content: "·"; margin-right: 8px; color: var(--so-line); }
[data-theme="signalops"] .markets-setup { display: grid; grid-template-columns: 58px 72px minmax(104px, 1fr) 88px; gap: 10px; min-width: 0; }
[data-theme="signalops"] .markets-metric { min-width: 0; }
[data-theme="signalops"] .markets-metric small { display: block; margin-bottom: 3px; color: var(--so-dimmer); font-size: 9px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
[data-theme="signalops"] .markets-metric b { display: block; overflow: hidden; color: var(--so-dim); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="signalops"] .markets-metric .text-success { color: var(--so-green); }
[data-theme="signalops"] .markets-metric .text-error { color: var(--so-red); }
[data-theme="signalops"] .markets-metric .text-warning { color: var(--warn-ink, #ffbf3f); }
[data-theme="signalops"] .markets-signal-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
[data-theme="signalops"] .markets-signal {
display: inline-flex; align-items: center; min-height: 25px; padding: 3px 8px; border: 1px solid var(--so-line); border-radius: 6px;
color: var(--so-dim); background: var(--so-card2); font-size: 10px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase;
}
[data-theme="signalops"] .markets-signal[data-tone="buy"] { color: var(--so-green); border-color: rgba(85, 226, 122, .32); background: rgba(85, 226, 122, .08); }
[data-theme="signalops"] .markets-signal[data-tone="sell"] { color: var(--so-red); border-color: rgba(255, 95, 115, .3); background: rgba(255, 95, 115, .07); }
[data-theme="signalops"] .markets-signal[data-tone="neutral"] { color: var(--warn-ink, #ffbf3f); border-color: rgba(255, 191, 63, .25); background: rgba(255, 191, 63, .06); }
[data-theme="signalops"] .markets-data[data-current="0"] .markets-signal { opacity: .48; filter: saturate(.55); }
[data-theme="signalops"] .markets-expired { color: var(--so-dimmer); font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
[data-theme="signalops"] .markets-freshness { text-align: right; }
[data-theme="signalops"] .markets-freshness strong { display: block; color: var(--so-dim); font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; }
[data-theme="signalops"] .markets-freshness span { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--so-dimmer); font-size: 9px; font-weight: 700; text-transform: uppercase; }
[data-theme="signalops"] .markets-freshness span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--so-dimmer); }
[data-theme="signalops"] .markets-freshness[data-state="live"] span { color: var(--so-green); }
[data-theme="signalops"] .markets-freshness[data-state="live"] span::before { background: var(--so-green); }
[data-theme="signalops"] .markets-freshness[data-state="aging"] span { color: var(--warn-ink, #ffbf3f); }
[data-theme="signalops"] .markets-freshness[data-state="aging"] span::before { background: var(--warn-ink, #ffbf3f); }
[data-theme="signalops"] .markets-freshness[data-state="stale"] span { color: var(--so-red); }
[data-theme="signalops"] .markets-freshness[data-state="stale"] span::before { background: var(--so-red); }
[data-theme="signalops"] .markets-watch-cell { display: flex; justify-content: flex-end; }
[data-theme="signalops"] .markets-watch {
display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; color: var(--so-dimmer); background: transparent;
cursor: pointer; transition: color 160ms ease, background 160ms ease;
}
[data-theme="signalops"] .markets-watch:hover { color: #f4ca58; background: rgba(244, 202, 88, .08); }
[data-theme="signalops"] .markets-watch.is-active { color: #f4ca58; }
[data-theme="signalops"] .markets-watch svg { width: 18px; height: 18px; }
[data-theme="signalops"] .markets-watch.is-active svg { fill: currentColor; }
[data-theme="signalops"] .markets-watch:disabled { cursor: wait; opacity: .55; }
[data-theme="signalops"] .markets-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; color: var(--so-dimmer); font-size: 11px; }
[data-theme="signalops"] .markets-reset { min-height: 36px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--so-accent); font-size: 11px; font-weight: 700; cursor: pointer; }
[data-theme="signalops"] .markets-reset:hover { background: var(--so-accent-soft); }
[data-theme="signalops"] .markets-empty { padding: 64px 24px; text-align: center; }
[data-theme="signalops"] .markets-empty strong { display: block; color: var(--so-ink); font-size: 16px; }
[data-theme="signalops"] .markets-empty p { margin-top: 6px; color: var(--so-dim); font-size: 13px; }
@media (max-width: 1080px) {
[data-theme="signalops"] .markets-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-theme="signalops"] .markets-toolbar .markets-search,
[data-theme="signalops"] .markets-toolbar .markets-scopes { grid-column: 1 / -1; }
[data-theme="signalops"] .markets-grid-head,
[data-theme="signalops"] .markets-row { grid-template-columns: minmax(190px, .9fr) minmax(310px, 1.45fr) 108px 112px 52px; column-gap: 10px; }
[data-theme="signalops"] .markets-setup { grid-template-columns: 52px 66px minmax(96px, 1fr) 82px; gap: 7px; }
}
@media (max-width: 760px) {
[data-theme="signalops"] .markets-page { padding: 22px 0 56px; }
[data-theme="signalops"] .markets-hero { align-items: flex-start; margin-bottom: 16px; }
[data-theme="signalops"] .markets-live { flex: none; padding: 7px; font-size: 0; }
[data-theme="signalops"] .markets-stats { grid-template-columns: repeat(2, 1fr); }
[data-theme="signalops"] .markets-stat:last-child { grid-column: 1 / -1; }
[data-theme="signalops"] .markets-toolbar { position: static; grid-template-columns: 1fr 1fr; padding: 9px; }
[data-theme="signalops"] .markets-search,
[data-theme="signalops"] .markets-scopes { grid-column: 1 / -1; }
[data-theme="signalops"] .markets-scopes { grid-template-columns: repeat(4, 1fr); }
[data-theme="signalops"] .markets-scope { padding: 0 5px; }
[data-theme="signalops"] .markets-toolbar .markets-sort-wrap { grid-column: 1 / -1; }
[data-theme="signalops"] .markets-grid-head { display: none; }
[data-theme="signalops"] .markets-board { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
[data-theme="signalops"] .markets-list { display: grid; gap: 9px; }
[data-theme="signalops"] .markets-row {
grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "market signal" "setup setup" "fresh watch";
row-gap: 13px; min-height: 0; padding: 14px; border: 1px solid var(--so-line); border-radius: 11px; background: var(--so-card);
}
[data-theme="signalops"] .markets-row:last-child { border-bottom: 1px solid var(--so-line); }
[data-theme="signalops"] .markets-row:hover { box-shadow: none; }
[data-theme="signalops"] .markets-market { grid-area: market; }
[data-theme="signalops"] .markets-setup { grid-area: setup; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 10px 0; border-top: 1px solid var(--so-line2); border-bottom: 1px solid var(--so-line2); }
[data-theme="signalops"] .markets-signal-cell { grid-area: signal; justify-content: flex-end; align-self: start; max-width: 112px; }
[data-theme="signalops"] .markets-expired { width: 100%; text-align: right; }
[data-theme="signalops"] .markets-freshness { grid-area: fresh; text-align: left; }
[data-theme="signalops"] .markets-watch-cell { grid-area: watch; }
[data-theme="signalops"] .markets-watch { margin: -8px -8px -8px 0; }
[data-theme="signalops"] .markets-footer { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
[data-theme="signalops"] .markets-row,
[data-theme="signalops"] .markets-scope,
[data-theme="signalops"] .markets-watch { transition: none; }
}
/* The column picker can expose any number of metrics: keep their intrinsic widths
inside a keyboard-scrollable region rather than squeezing badges into fragments. */
[data-theme="signalops"] .signalops-pairs-scroll {
max-width: 100%;
overscroll-behavior-inline: contain;
}
[data-theme="signalops"] .signalops-pairs-scroll:focus-visible {
outline: 2px solid var(--so-accent);
outline-offset: 2px;
}
[data-theme="signalops"] .signalops-table-scroll-hint { display: none; }
@media (max-width: 760px) {
/* Phones only: desktop has room to wrap cells, so it keeps the normal table layout. */
[data-theme="signalops"] .signalops-pairs-scroll #trade-pairs-table {
width: max-content;
min-width: 100%;
}
[data-theme="signalops"] .signalops-pairs-scroll #trade-pairs-table th,
[data-theme="signalops"] .signalops-pairs-scroll #trade-pairs-table td,
[data-theme="signalops"] .signalops-pairs-scroll #trade-pairs-table .badge {
white-space: nowrap;
}
[data-theme="signalops"] .signalops-table-scroll-hint {
display: block;
margin: 0 0 8px;
color: var(--so-dim);
font-size: 12px;
}
[data-theme="signalops"] .signalops-pairs-scroll {
border: 1px solid var(--so-line);
border-radius: 8px;
}
[data-theme="signalops"] :is(.signalops-pairs-table, .signalops-search) .dropdown-content {
position: fixed;
inset: auto 16px 16px;
width: auto;
max-height: 70vh;
overflow-y: auto;
z-index: 50;
}
/* Compare has a fixed set of metrics: show every value in labelled cards while
keeping the original header's indicator/time sort links available above them. */
[data-theme="signalops"] .signalops-compare-results,
[data-theme="signalops"] .signalops-compare-results thead,
[data-theme="signalops"] .signalops-compare-results tbody {
display: block;
width: 100%;
}
[data-theme="signalops"] .signalops-compare-results thead tr {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
padding: 0 0 10px;
}
[data-theme="signalops"] .signalops-compare-results thead th:nth-child(-n+3) { display: none; }
[data-theme="signalops"] .signalops-compare-results thead th:nth-child(n+4) {
display: block;
width: auto;
padding: 0;
text-align: left;
font-size: 12px;
}
[data-theme="signalops"] .signalops-compare-results tbody { display: grid; gap: 9px; }
[data-theme="signalops"] .signalops-compare-results tbody tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px 12px;
padding: 12px;
border: 1px solid var(--so-line);
border-radius: 9px;
background: var(--so-card);
}
[data-theme="signalops"] .signalops-compare-results tbody td {
display: block;
min-width: 0;
padding: 0;
border: 0;
}
[data-theme="signalops"] .signalops-compare-results tbody td:first-child {
grid-column: 2;
grid-row: 1;
align-self: center;
}
[data-theme="signalops"] .signalops-compare-results tbody td:nth-child(2) {
grid-column: 1;
grid-row: 1;
overflow-wrap: anywhere;
}
[data-theme="signalops"] .signalops-compare-results tbody td:nth-child(n+3) {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
text-align: right;
}
[data-theme="signalops"] .signalops-compare-results tbody td:nth-child(n+4) {
padding-top: 8px;
border-top: 1px solid var(--so-line);
}
[data-theme="signalops"] .signalops-compare-results tbody td[data-label]::before {
content: attr(data-label);
flex: 0 1 auto;
color: var(--so-dimmer);
font-family: inherit;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-align: left;
}
[data-theme="signalops"] .signalops-compare-results tbody td .badge { white-space: nowrap; }
}
/* First-party Signal Ops automation, receipt, and 390px layouts. */
[data-theme="signalops"] .automation-lifecycle {
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(2, minmax(140px, auto));
margin: 0 0 20px;
overflow: hidden;
border: 1px solid var(--so-line);
border-radius: var(--so-r);
background: color-mix(in srgb, var(--so-card) 94%, var(--so-accent) 6%);
}
[data-theme="signalops"] .automation-lifecycle__primary { min-width: 0; padding: 14px 16px 15px; }
[data-theme="signalops"] .automation-lifecycle dt {
color: var(--so-dimmer); font-size: 11px; font-weight: 600;
}
[data-theme="signalops"] .automation-lifecycle__state {
display: flex; align-items: center; gap: 8px; margin-top: 3px; color: var(--so-ink); font-size: 18px; font-weight: 700;
}
[data-theme="signalops"] .automation-lifecycle__state::before,
[data-theme="signalops"] .automation-lifecycle__fact-value::before {
content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--so-dimmer);
}
[data-theme="signalops"] .automation-lifecycle [data-tone="success"]::before { background: var(--so-accent); }
[data-theme="signalops"] .automation-lifecycle [data-tone="warning"]::before { background: var(--warn-ink, #ffbf3f); }
[data-theme="signalops"] .automation-lifecycle__detail { margin-top: 2px; color: var(--so-dim); font-size: 12px; line-height: 1.4; }
[data-theme="signalops"] .automation-lifecycle__fact {
min-width: 0; padding: 14px 16px; border-left: 1px solid var(--so-line); color: inherit;
}
[data-theme="signalops"] .automation-lifecycle__fact-value {
display: flex; align-items: center; gap: 7px; margin-top: 5px; color: var(--so-ink); font-size: 13px; font-weight: 650;
}
[data-theme="signalops"] .automation-lifecycle__fact-detail { margin-top: 3px; color: var(--so-dim); font-size: 11px; line-height: 1.35; }
[data-theme="signalops"] .automation-lifecycle__activity { width: fit-content; transition: color 160ms ease; }
[data-theme="signalops"] .automation-lifecycle__activity:hover { color: var(--so-accent); }
[data-theme="signalops"] .automation-lifecycle__activity:focus-visible { outline: 2px solid var(--so-accent); outline-offset: 3px; }
[data-theme="signalops"] .intent-details,
[data-theme="signalops"] .run-details {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--so-line2);
}
[data-theme="signalops"] :is(.intent-details, .run-details) > div { min-width: 0; padding: 9px 10px; background: var(--so-card2); }
[data-theme="signalops"] :is(.intent-details, .run-details) dt {
color: var(--so-dimmer); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
[data-theme="signalops"] :is(.intent-details, .run-details) dd { margin-top: 3px; color: var(--so-ink); overflow-wrap: anywhere; }
[data-theme="signalops"] .automation-run-filters { display: flex; flex-flow: row wrap; align-items: end; gap: 12px; }
[data-theme="signalops"] .automation-run-filters label { display: grid; gap: 4px; color: var(--so-dim); font-size: 12px; }
[data-theme="signalops"] .automation-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
[data-theme="signalops"] .automation-timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 20px; }
[data-theme="signalops"] .automation-timeline li { position: relative; min-width: 0; padding: 20px 10px 8px; border-top: 2px solid var(--so-line); color: var(--so-dim); }
[data-theme="signalops"] .automation-timeline li::before { content: ""; position: absolute; top: -6px; left: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--so-card3); border: 2px solid var(--so-line); }
[data-theme="signalops"] .automation-timeline li[data-complete="true"] { border-color: var(--so-accent); color: var(--so-ink); }
[data-theme="signalops"] .automation-timeline li[data-complete="true"]::before { border-color: var(--so-accent); background: var(--so-accent); }
[data-theme="signalops"] .automation-timeline b,
[data-theme="signalops"] .automation-timeline span { display: block; overflow-wrap: anywhere; }
[data-theme="signalops"] .automation-timeline span { margin-top: 3px; font: 10px/1.4 "JetBrains Mono", monospace; color: var(--so-dimmer); }
@media (max-width: 640px) {
[data-theme="signalops"] .signalops-mobile-page { width: 100%; min-width: 0; padding: 16px 0 !important; }
[data-theme="signalops"] .signalops-mobile-page :is(.card, .alert, form, details, dl, table) { max-width: 100%; min-width: 0; }
[data-theme="signalops"] .signalops-mobile-page .btn { min-height: 44px; white-space: normal; }
[data-theme="signalops"] .signalops-mobile-page :is(.input, .select) { max-width: 100%; min-height: 44px; font-size: 16px; }
[data-theme="signalops"] .automation-lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-theme="signalops"] .automation-lifecycle__primary {
grid-column: 1 / -1; padding: 13px 14px 14px; border-bottom: 1px solid var(--so-line);
}
[data-theme="signalops"] .automation-lifecycle__fact { padding: 11px 14px 12px; border-left: 0; }
[data-theme="signalops"] .automation-lifecycle__fact + .automation-lifecycle__fact { border-left: 1px solid var(--so-line); }
[data-theme="signalops"] .automation-timeline { grid-template-columns: 1fr; margin: 2px 0 22px 6px; }
[data-theme="signalops"] .automation-timeline li {
display: grid; grid-template-columns: minmax(108px, .8fr) minmax(0, 1.2fr);
gap: 10px; align-items: baseline; padding: 10px 8px 14px 22px;
border-top: 0; border-left: 2px solid var(--so-line);
}
[data-theme="signalops"] .automation-timeline li::before { top: 12px; left: -6px; }
[data-theme="signalops"] .automation-timeline li[data-complete="true"] { border-left-color: var(--so-accent); }
[data-theme="signalops"] .automation-timeline b { font-size: 12px; line-height: 1.4; }
[data-theme="signalops"] .automation-timeline span { margin-top: 0; line-height: 1.45; }
[data-theme="signalops"] .automation-run-filters { display: grid; grid-template-columns: 1fr; align-items: stretch; }
[data-theme="signalops"] .automation-run-filters label { width: 100%; }
[data-theme="signalops"] :is(.signalops-signals, .signalops-robot-control, .signalops-setup, .signalops-automation-runs) table,
[data-theme="signalops"] :is(.signalops-signals, .signalops-robot-control, .signalops-setup, .signalops-automation-runs) tbody {
display: block; width: 100%;
}
[data-theme="signalops"] :is(.signalops-signals, .signalops-robot-control, .signalops-setup, .signalops-automation-runs) thead { display: none; }
[data-theme="signalops"] :is(.signalops-signals, .signalops-robot-control, .signalops-setup, .signalops-automation-runs) tr {
display: block; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--so-line); border-radius: 10px; background: var(--so-card);
}
[data-theme="signalops"] :is(.signalops-signals, .signalops-robot-control, .signalops-setup, .signalops-automation-runs) td {
display: grid; grid-template-columns: minmax(82px, .7fr) minmax(0, 1.3fr); gap: 12px; align-items: start;
width: 100%; padding: 8px 0; text-align: left !important; border-bottom: 1px solid var(--so-line2); white-space: normal;
overflow-wrap: anywhere;
}
[data-theme="signalops"] :is(.signalops-signals, .signalops-robot-control, .signalops-setup, .signalops-automation-runs) td::before {
content: attr(data-label); color: var(--so-dimmer); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
[data-theme="signalops"] :is(.signalops-signals, .signalops-robot-control, .signalops-setup, .signalops-automation-runs) td:last-child { border-bottom: 0; }
[data-theme="signalops"] .signalops-signals .dropdown-content { position: fixed; inset: auto 16px 16px 16px; width: auto !important; max-height: 70vh; overflow-y: auto; }
[data-theme="signalops"] .signalops-signals .automate-link { display: inline-flex; min-height: 44px; align-items: center; }
[data-theme="signalops"] .signalops-robot-control > .flex:first-of-type { flex-direction: column; align-items: stretch; }
[data-theme="signalops"] .signalops-robot-control > .flex:first-of-type form { width: 100%; }
/* Step 3 stays in view on a phone too: with two-line cards the list is short enough that
a bar pinned to the bottom no longer hides much, and it is the only place Apply lives. */
[data-theme="signalops"] .signalops-robot-control .sticky .ml-auto { margin-left: 0; width: 100%; }
[data-theme="signalops"] .signalops-robot-control .sticky .btn { width: 100%; }
/* Robot Control coin card on a phone: two lines instead of eleven labelled rows.
[✓] BTC active
ST 1h ▲ ST 4h ▼ Rec Buy +7.5% above
Chart link, history, rank and volume drop out — "Check charts" covers the chart, and the
rest is for the desktop table. */
[data-theme="signalops"] .signalops-robot-control tbody tr[data-robot-control-target="row"] {
display: grid; grid-template-columns: 30px repeat(3, auto) 1fr; column-gap: 12px; row-gap: 6px;
align-items: center; padding: 10px 12px; margin-bottom: 8px;
}
[data-theme="signalops"] .signalops-robot-control tbody tr[data-robot-control-target="row"] td {
display: block; padding: 0; border: 0; width: auto; background: none !important;
}
/* A tap is a hover on a phone: the table's per-cell hover tint left patchy boxes on the card. */
[data-theme="signalops"] .signalops-robot-control tbody tr[data-robot-control-target="row"]:has(input:checked) {
border-color: var(--so-accent-line, var(--so-accent)); box-shadow: inset 3px 0 0 var(--so-accent);
}
[data-theme="signalops"] .signalops-robot-control tbody tr[data-robot-control-target="row"] td::before {
display: block; font-size: 9px; margin-bottom: 2px;
}
[data-theme="signalops"] .signalops-robot-control tbody td:is([data-label="Select"], [data-label="Symbol"], [data-label="Robot"])::before { content: none; }
[data-theme="signalops"] .signalops-robot-control tbody td[data-short]::before { content: attr(data-short); }
[data-theme="signalops"] .signalops-robot-control tbody td[data-label="Select"] { grid-row: 1 / span 2; grid-column: 1; }
[data-theme="signalops"] .signalops-robot-control tbody td[data-label="Symbol"] { grid-row: 1; grid-column: 2 / span 3; }
[data-theme="signalops"] .signalops-robot-control tbody td[data-label="Symbol"] .text-xs { display: none; }
[data-theme="signalops"] .signalops-robot-control tbody td[data-label="Robot"] { grid-row: 1; grid-column: 5; justify-self: end; }
[data-theme="signalops"] .signalops-robot-control tbody td[data-label="SuperTrend 1h"] { grid-row: 2; grid-column: 2; }
[data-theme="signalops"] .signalops-robot-control tbody td[data-label="SuperTrend 4h"] { grid-row: 2; grid-column: 3; }
[data-theme="signalops"] .signalops-robot-control tbody td[data-label="Recommendation"] { grid-row: 2; grid-column: 4; }
[data-theme="signalops"] .signalops-robot-control tbody td[data-label="vs 200 EMA"] { grid-row: 2; grid-column: 5; justify-self: end; text-align: right !important; }
[data-theme="signalops"] .signalops-robot-control tbody tr[data-robot-control-target="row"] td:is([data-label="Chart"], [data-label="History"], [data-label="Rank"], [data-label="Volume 24h"], [data-extra]) { display: none !important; }
[data-theme="signalops"] .signalops-setup [data-signals-setup-target="row"],
[data-theme="signalops"] .signalops-setup [data-signals-setup-target="entryRow"],
[data-theme="signalops"] .signalops-setup [data-signals-setup-target="precisionRow"],
[data-theme="signalops"] .signalops-setup [data-signals-setup-target="trendRow"],
[data-theme="signalops"] .signalops-setup [data-signals-setup-target="botEntryRow"],
[data-theme="signalops"] .signalops-setup [data-signals-setup-target="ungroupedRow"],
[data-theme="signalops"] .signalops-setup [data-signals-setup-target="ungroupedEntryRow"] {
display: flex; align-items: stretch; width: 100%; padding: 12px; gap: 10px;
}
[data-theme="signalops"] .signalops-setup :is([data-signals-setup-target="row"], [data-signals-setup-target$="Row"]) :is(.select, .input) { width: 100%; }
[data-theme="signalops"] .signalops-setup :is([data-signals-setup-target="row"], [data-signals-setup-target$="Row"]) .basis-full { padding-left: 0; }
[data-theme="signalops"] .signalops-setup :is([data-signals-setup-target="row"], [data-signals-setup-target$="Row"]) .ml-auto { margin-left: 0; }
[data-theme="signalops"] .signalops-setup .ml-4 { margin-left: 0; }
[data-theme="signalops"] .signalops-setup .join { display: grid; width: 100%; }
[data-theme="signalops"] .signalops-setup .join .btn { width: 100%; }
[data-theme="signalops"] .signalops-setup td[data-label="Decision"] form,
[data-theme="signalops"] .signalops-setup td[data-label="Decision"] .btn { width: 100%; }
}
/* Robot Control filters: a filter that is off keeps its settings (so ticking it restores them)
but greys them out — at full brightness "above", "Golden", "40–70" read as if they applied. */
.signalops-robot-control .rc-gate:not(:has(input[name$="_enabled"]:checked)) > :not(label:first-child) {
opacity: 0.35;
}
/* Numbered steps of the Robot Control routine (1 Screen · 2 Pick & check charts · 3 Apply). */
.signalops-robot-control .rc-step-num {
display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none;
border-radius: 999px; font-size: 11px; font-weight: 700; font-family: "JetBrains Mono", monospace;
color: var(--so-accent, #55e27a); border: 1px solid var(--so-accent-line, currentColor);
background: var(--so-accent-soft, transparent);
}
/* Robot Control step bar: the current step reads as selected. */
.signalops-robot-control .rc-step-tab.rc-step-active {
background: var(--so-accent-soft, rgba(22, 199, 216, 0.1));
color: var(--so-accent, inherit);
}