:root {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1f2330;
  --border: #2a2f3d;
  --text: #e7e9ee;
  --text-dim: #9aa1b2;
  --accent: #4f8cff;
  --accent-dim: #2c4a8a;
  --danger: #e5555c;
  --success: #3fb56c;
  --nearing: #b06fe0;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

a { color: var(--accent); }

.center-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  width: 100%;
  max-width: 400px;
}

.card h1 {
  font-size: 1.25rem;
  margin: 0 0 20px;
}

label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 14px 0 4px;
}

input[type="email"],
input[type="text"],
input[type="password"],
input[type="number"],
select {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 1rem;
}

input:focus, select:focus { outline: 2px solid var(--accent); }

button, .btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
}

button:hover, .btn:hover { background: #3d76e0; }

.btn-secondary { background: var(--surface-2); border: 1px solid var(--border); }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
}

.checkbox-row input { margin-top: 4px; }

.terms-box {
  max-height: 140px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 16px;
}

.muted { color: var(--text-dim); font-size: 0.85rem; }

.flash {
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.flash.error { background: rgba(229, 85, 92, 0.15); border: 1px solid var(--danger); color: #ffb3b6; }
.flash.success { background: rgba(63, 181, 108, 0.15); border: 1px solid var(--success); color: #a4e6bc; }

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  /* flex-wrap (2026-08-25, real incident) — 6 nav links + logo never fit a
     phone-width viewport without wrapping; without this the nav forced the
     whole PAGE wider than the viewport, and on mobile that in turn widens
     the browser's own layout viewport to fit it — which /dashboard/live's
     fixed-position chart modal then inherited (position:fixed with inset:0
     sizes against the layout viewport, not the narrower visual one), making
     it render far larger than the screen instead of "full page". Wrapping
     the nav onto a second line keeps the page itself exactly viewport-width,
     which fixes the modal's sizing as a side effect. */
  flex-wrap: wrap;
  row-gap: 8px;
}

nav .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
nav .tricept-logo { height: 24px; width: auto; display: block; }
nav .links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; row-gap: 6px; }
nav .links a { color: var(--text-dim); text-decoration: none; font-size: 0.9rem; }
nav .links a:hover { color: var(--text); }
nav form { margin: 0; }
nav button.linklike {
  background: none; border: none; color: var(--text-dim); font-size: 0.9rem;
  cursor: pointer; padding: 0; margin: 0; font-family: inherit;
}
nav button.linklike:hover { color: var(--text); }

main { max-width: 900px; margin: 0 auto; padding: 32px 24px; }

/* Live dashboard only (2026-08-22) — Laurence's note that most pages sit in a
   narrow centered column while /dashboard/live leaves both side "quarters"
   unused on a wide screen. Widened just for this page (main_class block in
   base.html), not globally — every other page (login, rules, admin tables)
   is still designed for the narrower centered-card layout and shouldn't
   stretch. */
main.main-wide { max-width: 1400px; }

/* Two-column layout: primary content (live-wired rule cards + charts) plus a
   dormant/off-rules side rail, using exactly the reclaimed side space above.
   Collapses to a single column under the rail's own min comfortable width
   rather than a fixed breakpoint, so it adapts to whatever's actually
   available instead of guessing screen sizes. */
.live-layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 1150px) {
  .live-layout { grid-template-columns: 1fr 320px; }
}
.live-layout-main { min-width: 0; } /* lets long content shrink instead of forcing the grid wider */
.live-layout-side { min-width: 0; position: sticky; top: 20px; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--text-dim); font-weight: 600; }

/* Instrument list rows (2026-08-25) — click opens the full-screen chart
   modal (openChartModal()), so these need to read as clickable. */
.instrument-row:hover { background: var(--surface-2); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.badge.admin { color: var(--accent); border-color: var(--accent-dim); }
.badge.live { color: var(--danger); border-color: var(--danger); }
.badge.demo { color: var(--text-dim); }
.badge.direction-buy {
  color: var(--success);
  background: rgba(63, 181, 108, 0.15);
  border: 1.5px solid var(--success);
  font-weight: 700;
}
.badge.direction-sell {
  color: var(--danger);
  background: rgba(229, 85, 92, 0.15);
  border: 1.5px solid var(--danger);
  font-weight: 700;
}

.open-position-banner {
  max-width: 720px;
  margin: 12px 0 20px;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
}

.hypo-prompt, .hypo-panel {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.hypo-prompt button, .hypo-panel button { margin: 0 0 0 8px; }
.hypo-panel .condition-leaves { margin-top: 6px; }

.pnl-positive { color: var(--success); }
.pnl-negative { color: var(--danger); }

.window-buttons { display: flex; gap: 8px; margin: 12px 0; }
.window-buttons button {
  margin-top: 0; padding: 6px 12px; font-size: 0.85rem;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
}
.window-buttons button.active { background: var(--accent-dim); color: var(--text); border-color: var(--accent); }

.live-chart { display: block; width: 100%; height: auto; background: var(--surface-2); border-radius: 6px; margin-bottom: 8px; }
.oscillator-chart { height: auto; }

/* Enlarged chart modal (2026-08-21) — double-click a small chart to open it
   here, much bigger, for accurate practice-mode click-to-trade placement. */
.chart-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
/* max-height/overflow-y (2026-08-25) — the modal absorbed everything the
   old per-instrument mini charts used to have (window buttons, variance
   panel, overlay toggles, oscillator canvases) on top of its own already-
   tall price canvas; without a scroll container, that overflowed the
   viewport on ordinary screens with .chart-modal's own centering pushing
   the header (and its Close button) off-screen above the visible area
   entirely, unreachable — caught by an automated click test, not visually. */
.chart-modal-card { max-width: 1140px; width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; }

/* Tighter padding on phone-width screens (2026-08-25, Laurence's ask — the
   chart "looks a bit small"). .card's own base padding (32px) plus
   .chart-modal's own 24px was eating 112px of width from a ~390px phone
   screen before the chart even started — genuinely most of the screen,
   working against the whole point of "full page" viewing on the device
   this is actually used on. */
@media (max-width: 600px) {
  .chart-modal { padding: 8px; }
  .chart-modal-card { padding: 14px; max-height: calc(100vh - 16px); }
}
.chart-modal-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
  position: sticky; top: 0; background: var(--surface); padding-bottom: 8px; z-index: 1;
}

.overlay-toggles { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 12px; font-size: 0.85rem; color: var(--text-dim); }
.overlay-toggles label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.overlay-toggles input { margin: 0; }

/* Compact dormant/off-rule entries in the Live side rail (2026-08-22) —
   deliberately much smaller than a full .rule-card: a 2-line reference
   (name+badge, version+last-used) plus one-click actions, not a scorecard. */
.dormant-rule-entry {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 8px; font-size: 0.85rem;
}
.dormant-rule-entry .dormant-rule-name { font-weight: 600; }
.dormant-rule-entry .dormant-rule-meta { color: var(--text-dim); font-size: 0.78rem; margin-top: 2px; }
.dormant-rule-entry .dormant-rule-actions { display: flex; gap: 6px; margin-top: 6px; }
.dormant-rule-entry .dormant-rule-actions form { margin: 0; }
.dormant-rule-entry .dormant-rule-actions button { margin: 0; padding: 3px 10px; font-size: 0.78rem; }

.rule-card {
  background: var(--surface); border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 14px;
}
.rule-border-blue { border-left-color: var(--accent); }
.rule-border-purple { border-left-color: var(--nearing); }
.rule-border-green { border-left-color: var(--success); }
.rule-border-grey { border-left-color: var(--border); }

.rule-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rule-card-header button { margin-top: 0; padding: 6px 14px; font-size: 0.85rem; }
.rule-card-header button:disabled { background: var(--surface-2); color: var(--text-dim); cursor: not-allowed; }

.condition-instrument { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.condition-instrument:first-of-type { margin-top: 12px; }
.condition-header { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 8px; }
.condition-leaves { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.condition-leaves li { padding: 4px 0; color: var(--text-dim); }
.condition-leaves li.condition-met { color: var(--success); }
.condition-leaves li.condition-unmet { color: var(--text-dim); }

.badge.condition-met { color: var(--success); border-color: var(--success); }
.badge.nearing { color: var(--nearing); border-color: var(--nearing); }
.badge.market-tradeable { color: var(--success); border-color: var(--success); }
.badge.market-closed { color: var(--text-dim); }

/* Demo/live account badge, nav corner (2026-08-22) — Laurence's ask: "green
   for demo, red for live" so which real account is being viewed is never
   ambiguous at a glance. Deliberately strong, saturated colors (not the
   muted --success/--danger tokens used elsewhere) — this one specific
   distinction is worth being impossible to miss, unlike most badges on this
   site which are intentionally understated. */
.ig-env-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
  white-space: nowrap;
}
/* Same bold saturated-text-on-tinted-background treatment as .badge.direction-
   buy/sell above (2026-08-22 revision — the first attempt used a pale mint/pink
   text tint that read as near-white at a glance; this reuses the app's own
   existing --success/--danger tokens instead of inventing new colors). */
.ig-env-badge.ig-env-demo { color: var(--success); background: rgba(63, 181, 108, 0.15); border: 1.5px solid var(--success); }
.ig-env-badge.ig-env-live { color: var(--danger); background: rgba(229, 85, 92, 0.15); border: 1.5px solid var(--danger); }
.ig-env-badge.ig-env-loading { color: var(--text-dim); background: var(--surface-2); border: 1.5px solid var(--border); }

.feed-stale { color: var(--danger); font-weight: 600; }

.activity-blob { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.activity-blue { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.activity-purple { background: var(--nearing); box-shadow: 0 0 8px var(--nearing); }
.activity-green { background: var(--success); box-shadow: 0 0 8px var(--success); }
.activity-grey { background: var(--text-dim); }

.instrument-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 12px 0 20px; font-size: 0.9rem; }
.instrument-filter label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.instrument-filter input { margin: 0; }

.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #c8434a; }

.btn-sm { padding: 6px 12px; font-size: 0.85rem; margin-top: 0; }

.compact-table input[type="text"],
.compact-table select {
  width: auto;
  min-width: 70px;
  padding: 4px 6px;
  font-size: 0.85rem;
}
.compact-table td { vertical-align: middle; }
.compact-table .row-actions { display: flex; gap: 6px; }
.compact-table .col-name input { min-width: 120px; }
.compact-table .col-epic input { min-width: 160px; }
.compact-table .col-notes input { min-width: 140px; }