/* ═══════════════════════════════════════════════════════════
   ArbiFlow — strategies.css  (PATCH v2)
   Drop into /css/strategies.css
═══════════════════════════════════════════════════════════ */

/* ─── FILTER BAR ─────────────────────────────────────────── */
.fbar{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  border:1px solid var(--border);margin-bottom:16px;
}
.fbar::-webkit-scrollbar{display:none}
.fpill{
  padding:9px 16px;font-size:11px;font-weight:800;
  cursor:pointer;background:var(--bg-card);color:var(--tm);
  white-space:nowrap;transition:all var(--ease);
  border-right:1px solid var(--border);
  letter-spacing:.4px;text-transform:uppercase;
}
.fpill:last-child{border-right:none}
.fpill.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.fpill:hover:not(.active){background:var(--bg-alt);color:var(--tx)}

/* ─── SUMMARY BAR ────────────────────────────────────────── */
.sbar{display:flex;gap:2px;background:var(--border);margin-bottom:16px}
.sbar-chip{flex:1;padding:12px 10px;background:var(--bg-card);text-align:center}
.sbar-val{font-family:var(--mono);font-size:clamp(16px,4vw,20px);font-weight:700}
.sbar-lbl{font-size:10px;color:var(--tm);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* ─── TRADE CARD ─────────────────────────────────────────── */
.tcard{
  background:var(--bg-card);border:1px solid var(--border);
  border-left:3px solid var(--border-s);
  margin-bottom:10px;
  transition:box-shadow var(--ease),transform var(--ease);
  animation:fadeUp .32s ease both;
}
.tcard:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.tcard.s-active   {border-left-color:var(--green)}
.tcard.s-pending  {border-left-color:var(--amber)}
.tcard.s-completed{border-left-color:var(--tm);opacity:.82}
.tcard.s-cancelled{border-left-color:var(--red);opacity:.6}

/* Header */
.tc-hd{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px 12px;
  border-bottom:1px solid var(--border);
}
/* Token logo composite */
.tc-logo{position:relative;flex-shrink:0;width:46px;height:46px}
.tc-logo-img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--bg-alt);border:2px solid var(--border)}
.tc-logo-ex{
  position:absolute;bottom:-3px;right:-3px;
  width:20px;height:20px;border-radius:50%;
  background:var(--bg-card);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.tc-logo-ex img{width:14px;height:14px;border-radius:50%;object-fit:cover}

.tc-info{flex:1;min-width:0}
.tc-pair{font-size:16px;font-weight:800;letter-spacing:-.4px}
.tc-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:4px}
.tc-rt{text-align:right;flex-shrink:0}
.tc-pct{font-family:var(--mono);font-size:clamp(17px,4vw,21px);font-weight:700;color:var(--green)}
.tc-pct-lbl{font-size:9px;color:var(--tm);font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* Body */
.tc-body{padding:14px 18px}
.tc-prices{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.tc-pc{flex:1}
.tc-pc-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--tm);margin-bottom:3px}
.tc-pc-val{font-family:var(--mono);font-size:clamp(13px,3vw,15px);font-weight:700}
.tc-pc-val.entry{color:var(--red)}
.tc-pc-val.exit {color:var(--green)}
.tc-arrow{color:var(--tm);flex-shrink:0;padding-top:14px}

/* Routing path */
.tc-route{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  padding:8px 12px;background:var(--bg-alt);
  border:1px solid var(--border);margin-bottom:12px;
}
.tc-route-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--tm)}
.rstep{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 7px;background:var(--bg-card);
  border:1px solid var(--border);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
}
.rstep img{width:12px;height:12px;border-radius:50%;object-fit:cover}
.rarrow{color:var(--tm);font-size:11px;font-weight:700;flex-shrink:0}

/* Timer row */
.tc-timer{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;background:var(--bg-alt);
  border:1px solid var(--border);margin-bottom:10px;
}
.tc-timer-lbl{font-size:10px;color:var(--tm);font-weight:800;flex:1;text-transform:uppercase;letter-spacing:.5px}
.tc-timer-val{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.8px}
.tc-timer-val.active   {color:var(--green)}
.tc-timer-val.pending  {color:var(--amber)}
.tc-timer-val.completed{color:var(--tm)}

/* Progress */
.tc-prog{height:2px;background:var(--border);margin-bottom:12px;overflow:hidden}
.tc-prog-fill{height:100%;transition:width 1s linear}
.tc-prog-fill.active   {background:var(--green)}
.tc-prog-fill.pending  {background:var(--amber);width:0%!important}
.tc-prog-fill.completed{background:var(--tm)}

/* Time stamps row */
.tc-times{
  display:flex;gap:14px;font-size:11px;color:var(--tm);
  padding:0 18px 12px;flex-wrap:wrap;
}
.tc-ti{display:flex;flex-direction:column;gap:1px}
.tc-ti .tl{font-weight:800;text-transform:uppercase;letter-spacing:.4px;font-size:10px}
.tc-ti .tv{font-family:var(--mono);color:var(--ts)}

/* Footer */
.tc-ft{padding:0 18px 16px;display:flex;flex-direction:column;gap:8px}

/* Joined bar */
.joined-bar{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;background:var(--green-soft);
  border:1px solid rgba(0,192,118,.2);
  font-size:12px;color:#006B3F;font-weight:700;
}

/* ─── JOIN MODAL EXTRAS ──────────────────────────────────── */
.amt-wrap{position:relative}
.amt-sfx{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:12px;font-weight:700;color:var(--tm);
}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.preset{
  padding:5px 12px;background:var(--bg-alt);
  border:1px solid var(--border);font-size:12px;font-weight:700;
  color:var(--ts);cursor:pointer;transition:all var(--ease);
}
.preset:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}

.profit-preview{
  background:var(--green-soft);
  border:1px solid rgba(0,192,118,.2);
  padding:14px;margin:14px 0;
}
.pp-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0}
.pp-lbl{font-size:12px;color:#006B3F;font-weight:500}
.pp-val{font-family:var(--mono);font-size:14px;font-weight:700;color:#006B3F}
.pp-row.total .pp-val{font-size:18px;color:var(--green)}

/* Info notice */
.notice{
  display:flex;gap:8px;align-items:flex-start;
  padding:10px 12px;background:var(--blue-soft);
  border:1px solid rgba(19,64,212,.15);
  font-size:12px;color:var(--blue-d);
}
.notice svg{flex-shrink:0;margin-top:1px}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:480px){
  .tc-hd{padding:12px 14px 10px}
  .tc-body{padding:12px 14px}
  .tc-ft{padding:0 14px 12px}
  .tc-times{padding:0 14px 10px}
  .tc-pair{font-size:15px}
}
@media(min-width:640px){
  .tc-logo{width:50px;height:50px}
  .tc-logo-img{width:50px;height:50px}
}