/* Promethean — Ember theme. Load after Tailwind in base.html. Applies to every page that extends base.html. */
:root {
  --ember-intensity: 1.6;   /* 0.3 – 1.6 */
  --ember-breath: 4s;       /* 2s – 12s, one full breath */
  --ember-card-bg: linear-gradient(180deg, rgba(28,20,15,.72), rgba(14,10,8,.72));
  --ember-card-border: rgba(255,160,90,.10);
  --ember-card-inset: inset 0 1px 0 rgba(255,200,150,.06);
}
body { background: #070504 !important; color: #f7f3ef; }

/* Background layer (injected by ember.js) */
#ember-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#ember-bg .ember-blob { position: absolute; border-radius: 50%; filter: blur(40px); will-change: transform, opacity;
  animation: ember-breathe var(--dur) ease-in-out var(--delay) infinite; }
#ember-bg .ember-bed { position: absolute; left: 0; right: 0; bottom: 0; height: 22vh;
  background: linear-gradient(0deg, rgba(255,80,0, calc(.22 * var(--ember-intensity))), transparent);
  animation: ember-flicker calc(var(--ember-breath) * .7) ease-in-out infinite; }
#ember-bg .ember-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(5,3,2,.75) 100%); }
#ember-bg .ember-spark { position: absolute; bottom: -10px; border-radius: 50%; will-change: transform, opacity;
  animation: spark-rise var(--dur) linear var(--delay) infinite; }

/* Keep page content above the background */
body > nav, body > main, body > footer { position: relative; z-index: 1; }
body > nav.fixed { position: fixed; z-index: 50; }
body > nav { background: rgba(10,7,5,.55) !important; backdrop-filter: blur(14px); border-bottom-color: rgba(255,140,60,.10) !important; }

/* Cards: every .card-glow becomes warm, translucent glass */
.card-glow { background: var(--ember-card-bg) !important; border-color: var(--ember-card-border) !important;
  box-shadow: var(--ember-card-inset) !important; backdrop-filter: blur(12px); }
.card-glow:hover { border-color: rgba(255,140,60,.28) !important; box-shadow: var(--ember-card-inset), 0 0 28px rgba(255,98,0,.12) !important; }

/* Primary call to action, e.g. "Create New Bot". Add class="ember-cta" */
.ember-cta { background: linear-gradient(120deg, rgba(255,98,0,.22), rgba(120,30,0,.18) 55%, rgba(20,12,8,.7)) !important;
  border-color: transparent !important; animation: cta-breathe var(--ember-breath) ease-in-out infinite; }

/* Live status dot. Add class="ember-live-dot" */
.ember-live-dot { animation: dot-pulse 2s infinite; border-radius: 9999px; }

@keyframes ember-breathe {
  0%,100% { opacity: var(--lo); transform: translate(-50%,-50%) scale(.92); }
  45%     { opacity: var(--hi); transform: translate(-50%,-50%) scale(1.06); }
  60%     { opacity: calc(var(--hi) * .9); transform: translate(-50%,-50%) scale(1.04); }
}
@keyframes ember-flicker { 0%,100% { opacity: .55; } 20% { opacity: .8; } 35% { opacity: .5; } 55% { opacity: .9; } 75% { opacity: .6; } }
@keyframes spark-rise { 0% { transform: translate(0,0) scale(1); opacity: 0; } 10% { opacity: 1; } 70% { opacity: .8; } 100% { transform: translate(var(--dx), -105vh) scale(.3); opacity: 0; } }
@keyframes dot-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(63,185,80,.6); } 50% { box-shadow: 0 0 0 5px rgba(63,185,80,0); } }
@keyframes cta-breathe { 0%,100% { box-shadow: 0 0 0 1px rgba(255,98,0,.35), 0 0 24px rgba(255,98,0,.15); } 50% { box-shadow: 0 0 0 1px rgba(255,98,0,.6), 0 0 48px rgba(255,98,0,.35); } }

@media (prefers-reduced-motion: reduce) {
  #ember-bg .ember-blob, #ember-bg .ember-bed, .ember-cta, .ember-live-dot { animation: none; }
  #ember-bg .ember-spark { display: none; }
}

/* ------------------------------------------------------------------
   Repo integration — additions on top of the Claude Design handoff
   (README steps 4–5: dashboard accents + active nav tab).
   ------------------------------------------------------------------ */

/* Nav: active tab = white text + orange underline */
.nav-link { border-bottom: 2px solid transparent; padding-bottom: 2px; }
.nav-link.is-active { color: #fff !important; border-bottom-color: #FF6200; }
.nav-logo img { filter: drop-shadow(0 0 10px rgba(255,98,0,.6)); }

/* Stat cards: 120px radial glow in the card's accent colour. Set --glow inline. */
.stat-card { position: relative; overflow: hidden; isolation: isolate; }
.stat-card::before { content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px;
  border-radius: 50%; background: radial-gradient(circle, var(--glow, transparent), transparent 70%);
  z-index: -1; pointer-events: none; }

/* "Create New Bot" call to action */
.ember-cta { backdrop-filter: blur(10px); }
.ember-cta-tile { background: linear-gradient(180deg,#ff7a1f,#e04f00); color: #fff;
  box-shadow: 0 0 24px rgba(255,98,0,.55), inset 0 1px 0 rgba(255,255,255,.3); }

/* Active bot rows: 4px ember bar on the left */
.ember-bot-bar { width: 4px; align-self: stretch; flex-shrink: 0; border-radius: 4px;
  background: linear-gradient(180deg,#ff8a3d,#c0341a); box-shadow: 0 0 10px rgba(255,98,0,.5); }

/* Status pill next to the page title */
.ember-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: rgba(63,185,80,.08); border: 1px solid rgba(63,185,80,.25);
  font-family: 'Geist Mono', monospace; font-size: 12.5px; color: #6fdc80; }
.ember-pill__dot { width: 7px; height: 7px; background: #3fb950; }

/* Live positions panel (partials/live_positions.html + js/live_positions.js) */
.lp-num { font-family: 'Geist Mono', monospace; font-variant-numeric: tabular-nums; }
.lp-pos { color: var(--ok); }
.lp-neg { color: var(--err); }
.lp-muted { color: var(--text-4); }
.lp-live { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--text-3); }
.lp-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neutral); }
.lp-live.is-live .lp-live__dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.lp-live.is-stale .lp-live__dot { background: var(--warn); }
.lp-table th { font-weight: 500; font-size: .75rem; color: var(--text-4); padding: 0 .75rem .5rem; white-space: nowrap; }
.lp-table td { padding: .7rem .75rem; border-top: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.lp-table th:first-child, .lp-table td:first-child { padding-left: .25rem; }
.lp-table td:first-child { white-space: normal; }
.lp-table th:last-child, .lp-table td:last-child { padding-right: .25rem; }
.lp-table tr.is-stale td.lp-price, .lp-table tr.is-stale td.lp-pnl { opacity: .55; }
.lp-sub { font-size: .75rem; color: var(--text-4); }
.lp-tag { font-size: .625rem; letter-spacing: .04em; text-transform: uppercase; color: var(--warn); background: var(--warn-bg); padding: 1px 5px; border-radius: 4px; margin-left: 6px; }
.lp-table tr.lp-detail td { border-top: 0; padding-top: 0; white-space: normal; }
.lp-table tbody.is-closed tr.lp-main { opacity: .6; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-detail-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lp-logs-link { flex-shrink: 0; font-size: .75rem; line-height: 1; padding: 4px 0; color: var(--accent, #f97316); white-space: nowrap; text-decoration: none; }
.lp-logs-link:hover { text-decoration: underline; }
.lp-chip { display: inline-flex; align-items: center; gap: 4px; font-family: 'Geist Mono', monospace; font-size: .6875rem; line-height: 1; padding: 4px 7px; border-radius: 6px; border: 1px solid var(--border); color: var(--text-3); white-space: nowrap; }
.lp-chip--tp { color: var(--text-2); }
.lp-chip--hit { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.lp-chip--sl { color: var(--warn); border-color: rgba(210,153,34,.35); }
.lp-chip--bad { color: var(--err); background: var(--err-bg); border-color: transparent; }
.lp-chip--off { text-decoration: line-through; opacity: .6; }
.lp-chip--closed { color: var(--info); background: var(--info-bg); border-color: transparent; font-family: inherit; }
.lp-chip--plain { border-color: transparent; padding-left: 2px; white-space: normal; line-height: 1.4; }
/* Demo (paper) trades of dry-run bots: badge + Live / Demo / All filter */
.lp-tag--demo { color: var(--info); background: var(--info-bg); }
.lp-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lp-seg button, .lp-seg a { font-size: .75rem; line-height: 1; padding: 6px 10px; color: var(--text-3); background: transparent; border: 0; cursor: pointer; }
.lp-seg button + button, .lp-seg a + a { border-left: 1px solid var(--border); }
.lp-seg button:hover, .lp-seg a:hover { color: var(--text-2); }
.lp-seg .is-on { color: #fff; background: rgba(255,255,255,.06); }
@media (max-width: 639px) {
  .lp-table th, .lp-table td { padding-left: .4rem; padding-right: .4rem; }
  .lp-quote { display: none; }
}
@keyframes lp-flash { from { background: rgba(255,255,255,.06); } to { background: transparent; } }
.lp-flash { animation: lp-flash .6s ease-out; }
@media (prefers-reduced-motion: reduce) { .lp-flash { animation: none; } }