/*
 * Main application CSS
 *
 * Note: DaisyUI + Tailwind is loaded via CDN in application.html.erb
 * 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 (full.min.css) and the local Tailwind build does
 * NOT run the daisyui plugin, so the custom theme cannot live in
 * tailwind.config.js. It is 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 HSL triplets (DaisyUI 4 format: `H S% L%`, no commas/hsl()).
 */

[data-theme="signalops"] {
  color-scheme: dark;

  /* primary — cyan #16c7d8 */
  --p: 187 82% 47%;
  --pf: 187 82% 42%;
  --pc: 186 65% 6%;

  /* secondary — violet #b589ff */
  --s: 263 100% 77%;
  --sf: 263 80% 70%;
  --sc: 258 65% 11%;

  /* accent — green #55e27a (long / up / success-ish accent) */
  --a: 137 70% 61%;
  --af: 137 60% 54%;
  --ac: 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: 140 10% 10%;
  --b2: 140 9% 6%;
  --b3: 130 9% 17%;
  --bc: 130 24% 93%;

  /* neutral */
  --n: 135 9% 12%;
  --nf: 135 9% 9%;
  --nc: 140 6% 60%;

  /* state colors — info cyan, success green, warning amber #ffbf3f, error red #ff5f73 */
  --in: 187 82% 47%;
  --inc: 186 65% 6%;
  --su: 137 70% 61%;
  --suc: 137 55% 6%;
  --wa: 42 100% 62%;
  --wac: 40 70% 8%;
  --er: 351 100% 69%;
  --erc: 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: 187 82% 47%; /* checked checkbox fill = accent cyan */
  --chkfg: 186 65% 6%;  /* checkmark = dark on cyan */
  --tglbg: 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: #5c665e;
  --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: hsl(var(--b2));
  color: hsl(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: hsl(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; }

/* ---- 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 .menu-btn { display: grid; }
  [data-theme="signalops"] .wrap { padding: 20px 16px 60px; }
}
/*
 * 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; }
}
/*
 * 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23061010" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>') !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 ----
   CDN DaisyUI badge color variants render transparent under the hand-authored
   theme (same failure as checkbox), so define soft-fill colors explicitly. */
[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); }
/*
 * 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 ---------- */
[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"] .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: 1.5fr 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: 1000px) {
  [data-theme="signalops"] .so-2col { grid-template-columns: 1fr; }
  [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-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; }

/* 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: 1000px) {
  [data-theme="signalops"] .so-stage2 { grid-template-columns: 1fr; }
  [data-theme="signalops"] .so-stage2-rail { position: static; }
}